diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index d15ee2cd5..d3bdf4f75 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -34,6 +34,7 @@ {# Web Awesome #} + diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 19c3e5724..f322e086f 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -2,6 +2,7 @@

  • Experimental

    • diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index bdeb0822b..bcc1872f0 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -57,22 +57,6 @@ html:not(.wa-theme-dark) .only-dark { box-sizing: inherit; } -a:focus, -button:focus { - outline: none; -} - -a:focus-visible, -button:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: var(--wa-focus-ring-offset); -} - -::selection { - background-color: var(--wa-color-selection-background); - color: var(--wa-color-selection-text); -} - /* Show custom elements only after they're registered */ :not(:defined), :not(:defined) * { @@ -94,11 +78,6 @@ html { body { height: 100%; - font: 16px var(--wa-font-family-body); - font-weight: var(--wa-font-weight-normal); - background-color: var(--docs-background-color); - line-height: var(--wa-font-line-height-regular); - color: var(--wa-color-text-normal); padding: 0; margin: 0; overflow-x: hidden; @@ -113,8 +92,6 @@ h3, h4, h5, h6 { - font-family: var(--wa-font-family-body); - font-weight: var(--wa-font-weight-medium); margin: 3rem 0 1.5rem 0; } @@ -122,39 +99,15 @@ h1:first-of-type { margin-top: 1rem; } -h1 { - font-size: var(--wa-font-size-2xl); -} - h2 { font-size: 1.875rem; - border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); -} - -h3 { - font-size: 1.625rem; -} - -h4 { - font-size: 1.375rem; -} - -h5 { - font-size: 1.125rem; -} - -h6 { - font-size: 0.875rem; + border-bottom: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline); } p { margin-block-end: 1.5em; } -img { - max-width: 100%; -} - .badges img { border-radius: var(--wa-corners-1x); } @@ -170,77 +123,12 @@ details pre { border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); } -a { - color: var(--wa-color-text-link); -} - -a:hover { - color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover)); -} - -abbr[title] { - text-decoration: none; - border-bottom: dashed 1px var(--wa-color-text-link); - cursor: help; -} - -em { - font-style: italic; -} - -strong { - font-weight: var(--wa-font-weight-heavy); -} - code { - font-family: var(--wa-font-family-code); - font-size: 0.9125em; background-color: rgba(0 0 0 / 0.025); background-blend-mode: darken; - border-radius: var(--wa-corners-1x); padding: 0.125em 0.25em; } -kbd { - background: var(--wa-color-neutral-fill-muted); - border: solid 1px var(--wa-color-neutral-outline-muted); - box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white), 0 1px 0 0 var(--wa-color-tint-black); - font-family: var(--wa-font-family-code); - font-size: 0.9125em; - border-radius: var(--wa-corners-1x); - color: var(--wa-color-neutral-text-on-muted); - padding: 0.125em 0.4em; -} - -ins { - background-color: var(--wa-color-success-fill-muted); - color: var(--wa-color-success-text-on-muted); - border-radius: var(--wa-corners-1x); - text-decoration: none; - padding: 0.125em 0.25em; -} - -s { - background-color: var(--wa-color-danger-fill-muted); - color: var(--wa-color-danger-text-on-muted); - border-radius: var(--wa-corners-1x); - text-decoration: none; - padding: 0.125em 0.25em; -} - -mark { - background-color: var(--wa-color-warning-fill-muted); - color: inherit; - border-radius: var(--wa-corners-1x); - padding: 0.125em 0.25em; -} - -hr { - border: none; - border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); - margin: calc(var(--docs-content-vertical-spacing) * 2) 0; -} - /* Block quotes */ blockquote { position: relative; diff --git a/docs/pages/experimental/style-guide.md b/docs/pages/experimental/style-guide.md new file mode 100644 index 000000000..28aba3c7c --- /dev/null +++ b/docs/pages/experimental/style-guide.md @@ -0,0 +1,19 @@ +--- +meta: + title: Style Guide + description: TODO +--- + +# Style Guide + +## Headings + +# Heading 1 + +## Heading 2 + +### Heading 3 + +#### Heading 4 + +Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#), sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/src/themes/applied.css b/src/themes/applied.css new file mode 100644 index 000000000..df782daf6 --- /dev/null +++ b/src/themes/applied.css @@ -0,0 +1,159 @@ +/** + * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on + * Web Awesome's design tokens. + */ +html { + box-sizing: border-box; + font-family: var(--wa-font-family-body); + font-size: var(--wa-font-size-root); + font-weight: var(--wa-font-weight-normal); + line-height: var(--wa-font-line-height-regular); + color: var(--wa-color-text-normal); + background-color: var(--wa-color-surface-default); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + padding: 0; + margin: 0; +} + +body { + padding: ; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +::selection { + background-color: var(--wa-color-selection-background); + color: var(--wa-color-selection-text); +} + +/* Headings & Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--wa-font-family-heading); + font-weight: var(--wa-font-weight-medium); +} + +h1 { + font-size: var(--wa-font-size-2xl); +} + +h2 { + font-size: var(--wa-font-size-xl); +} + +h3 { + font-size: var(--wa-font-size-l); +} + +h4 { + font-size: var(--wa-font-size-m); +} + +h5 { + font-size: var(--wa-font-size-s); +} + +h6 { + font-size: var(--wa-font-size-xs); +} + +em, +i { + font-style: italic; +} + +strong, +b { + font-weight: var(--wa-font-weight-heavy); +} + +ins { + background-color: var(--wa-color-success-fill-muted); + color: var(--wa-color-success-text-on-muted); + border-radius: var(--wa-corners-1x); + text-decoration: none; + padding: 0.125em 0.25em; +} + +s { + background-color: var(--wa-color-danger-fill-muted); + color: var(--wa-color-danger-text-on-muted); + border-radius: var(--wa-corners-1x); + text-decoration: none; + padding: 0.125em 0.25em; +} + +mark { + background-color: var(--wa-color-warning-fill-muted); + color: inherit; + border-radius: var(--wa-corners-1x); + padding: 0.125em 0.25em; +} + +/* Code */ +code, +pre, +kbd, +samp { + font-family: var(--wa-font-family-code); + font-size: 0.9125em; + border-radius: var(--wa-corners-1x); +} + +/* Images */ +img { + max-width: 100%; + height: auto; +} + +/* Links */ +a { + color: var(--wa-color-text-link); +} + +a:hover { + color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover)); +} + +a:focus, +button:focus { + outline: none; +} + +a:focus-visible, +button:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Misc */ +abbr[title] { + text-decoration: none; + border-bottom: dashed 1px var(--wa-color-text-link); + cursor: help; +} + +kbd { + background: var(--wa-color-neutral-fill-muted); + border: solid 1px var(--wa-color-neutral-outline-muted); + box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white), 0 1px 0 0 var(--wa-color-tint-black); + font-family: var(--wa-font-family-code); + border-radius: var(--wa-corners-1x); + color: var(--wa-color-neutral-text-on-muted); + padding: 0.125em 0.4em; +} + +hr { + border: none; + border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); + margin: var(--wa-space-2xl) 0; +}