diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 635a70e2d..f57fa3d15 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -131,3 +131,16 @@ wa-page > main { background-color: var(--wa-color-warning-fill-normal); } } + +/* Swatches */ + +.swatch { + background-color: var(--wa-color-surface-default); + border-color: var(--wa-color-neutral-border-normal); + border-style: var(--wa-border-style); + border-width: var(--wa-border-width-s); + border-radius: var(--wa-border-radius-s); + line-height: 2.5; + height: 2.5em; + padding-inline: var(--wa-space-xs); +} diff --git a/docs/docs/theming/borders.md b/docs/docs/theming/borders.md index 642aee270..557e17bd9 100644 --- a/docs/docs/theming/borders.md +++ b/docs/docs/theming/borders.md @@ -4,25 +4,13 @@ description: Change the edges and corners of your components with Web Awesome's layout: page.njk --- - - ## Style Border style controls the line shape of borders throughout Web Awesome. | Custom Property | Default Value | Preview | | ----------------------------- | - | ------------------------------- | -| `--wa-border-style` | solid |
| +| `--wa-border-style` | solid |
| ## Width @@ -32,9 +20,9 @@ Each border width value uses a `calc()` function with `--wa-border-width-multipl | Custom Property | Default Value | Preview | | ----------------------------- | - | ------------------------------- | -| `--wa-border-width-s` | 0.0625rem (1px) |
| -| `--wa-border-width-m` | 0.125rem (2px) |
| -| `--wa-border-width-l` | 0.1875rem (3px) |
| +| `--wa-border-width-s` | 0.0625rem (1px) |
| +| `--wa-border-width-m` | 0.125rem (2px) |
| +| `--wa-border-width-l` | 0.1875rem (3px) |
| ## Radius @@ -42,9 +30,9 @@ Common border radius properties allow you to achieve specific shapes. | Custom Property | Default Value | Preview | | ----------------------------- | - | ------------------------------- | -| `--wa-border-radius-pill` | 9999px |
| -| `--wa-border-radius-circle` | 50% |
| -| `--wa-border-radius-square` | 0rem |
| +| `--wa-border-radius-pill` | 9999px |
| +| `--wa-border-radius-circle` | 50% |
| +| `--wa-border-radius-square` | 0rem |
| Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size. @@ -52,7 +40,7 @@ Each border radius value uses a `calc()` function with `--wa-border-radius-multi | Custom Property | Default Value | Preview | | ----------------------------- | - | ------------------------------- | -| `--wa-border-radius-xs` | 0.1875rem (3px) |
| -| `--wa-border-radius-s` | 0.375rem (6px) |
| -| `--wa-border-radius-m` | 0.75rem (12px) |
| -| `--wa-border-radius-l` | 1.125rem (18px) |
| +| `--wa-border-radius-xs` | 0.1875rem (3px) |
| +| `--wa-border-radius-s` | 0.375rem (6px) |
| +| `--wa-border-radius-m` | 0.75rem (12px) |
| +| `--wa-border-radius-l` | 1.125rem (18px) |
| diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 2087e7289..9bb3620b4 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -21,14 +21,8 @@ layout: page.njk .color-preview { flex: 1 1 auto; } - .color-swatch { - border-radius: var(--wa-border-radius-s); - line-height: 2; - height: 2em; - padding-inline: var(--wa-space-xs); - } - .color-swatch.text-only { - padding-inline: 0; + .swatch { + border: none; } @@ -56,47 +50,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Red
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -104,47 +98,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Yellow
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -152,47 +146,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Green
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -200,47 +194,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Blue
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -248,47 +242,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Indigo
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -296,47 +290,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Violet
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -344,47 +338,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
Gray
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -405,47 +399,47 @@ By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-
Primary
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -453,47 +447,47 @@ By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-
Base
-
+
95
-
+
90
-
+
80
-
+
70
-
+
60
-
+
50
-
+
40
-
+
30
-
+
20
-
+
10
-
+
05
@@ -504,10 +498,10 @@ Surfaces are background layers that other components and content rest on. Surfac | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-surface-raised` |
| -| `--wa-color-surface-default` |
| -| `--wa-color-surface-lowered` |
| -| `--wa-color-surface-border` |
| +| `--wa-color-surface-raised` |
| +| `--wa-color-surface-default` |
| +| `--wa-color-surface-lowered` |
| +| `--wa-color-surface-border` |
| ### Text @@ -515,9 +509,9 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-text-normal` |
AaBb
| -| `--wa-color-text-quiet` |
AaBb
| -| `--wa-color-text-link` |
AaBb
| +| `--wa-color-text-normal` | AaBb | +| `--wa-color-text-quiet` | AaBb | +| `--wa-color-text-link` | AaBb | ### Overlays @@ -525,8 +519,8 @@ Overlays provide a backdrop to isolate content, often allowing background contex | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-overlay-modal` |
| -| `--wa-color-overlay-inline` |
| +| `--wa-color-overlay-modal` |
| +| `--wa-color-overlay-inline` |
| ### Shadow @@ -534,7 +528,7 @@ Shadows indicate elevation and, often, interactivity. `--wa-color-shadow` is use | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-shadow` |
| +| `--wa-color-shadow` |
| ### Interactions @@ -544,7 +538,7 @@ Web Awesome uses a single, consistent focus color for predictable keyboard navig | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-focus` |
| +| `--wa-color-focus` |
| #### Hover and Active @@ -552,8 +546,8 @@ We leverage `color-mix()` to achieve consistent hover and active states across c | Custom Property | Preview | | ----------------------------- | ------------------------------- | -| `--wa-color-mix-hover` |
mixed
| -| `--wa-color-mix-active` |
mixed
| +| `--wa-color-mix-hover` |
mixed
| +| `--wa-color-mix-active` |
mixed
| ## Semantic Colors @@ -580,12 +574,12 @@ Finally, each color is named according to how much attention it draws. Here, we | Custom Property | brand | success | neutral | warning | danger | | ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | -| `--wa-color-*-fill-quiet` |
|
|
|
|
| -| `--wa-color-*-fill-normal` |
|
|
|
|
| -| `--wa-color-*-fill-loud` |
|
|
|
|
| -| `--wa-color-*-border-quiet` |
|
|
|
|
| -| `--wa-color-*-border-normal` |
|
|
|
|
| -| `--wa-color-*-border-loud` |
|
|
|
|
| -| `--wa-color-*-on-quiet` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| -| `--wa-color-*-on-normal` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| -| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| \ No newline at end of file +| `--wa-color-*-fill-quiet` |
|
|
|
|
| +| `--wa-color-*-fill-normal` |
|
|
|
|
| +| `--wa-color-*-fill-loud` |
|
|
|
|
| +| `--wa-color-*-border-quiet` |
|
|
|
|
| +| `--wa-color-*-border-normal` |
|
|
|
|
| +| `--wa-color-*-border-loud` |
|
|
|
|
| +| `--wa-color-*-on-quiet` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| +| `--wa-color-*-on-normal` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| +| `--wa-color-*-on-loud` |
AaBb
|
AaBb
|
AaBb
|
AaBb
|
AaBb
| \ No newline at end of file diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md index 938392913..ffdb2e11b 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -10,29 +10,29 @@ For components that share similar qualities, Web Awesome includes custom propert Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), etc. share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`. -Not every form control uses all of these custom properties. For example, `wa-radio` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `wa-button` defines many of its own styles but matches the height and border styles of other form controls. +Not every form control uses all of these custom properties. For example, `` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `` defines many of its own styles but matches the height and border styles of other form controls. -| Custom Property | Default Value | -| ------------------------------------------- | ------------------------------- | -| `--wa-form-control-background` | `var(--wa-color-surface-default)` | -| `--wa-form-control-border-style` | `var(--wa-border-style)` | -| `--wa-form-control-border-width` | `var(--wa-border-width-s)` | -| `--wa-form-control-border-radius` | `var(--wa-border-radius-s)` | -| `--wa-form-control-activated-color` | `var(--wa-color-brand-fill-loud)` | -| `--wa-form-control-resting-color` | `var(--wa-color-neutral-border-loud)` | -| `--wa-form-control-label-color` | `var(--wa-color-neutral-border-loud)` | -| `--wa-form-control-label-font-weight` | `var(--wa-font-weight-normal)` | -| `--wa-form-control-label-line-height` | `var(--wa-line-height-normal)` | -| `--wa-form-control-value-color` | `var(--wa-color-text-normal)` | -| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` | -| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` | -| `--wa-form-control-placeholder-color` | `var(--wa-color-base-60)` | +| Custom Property | Default Value | +| ------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| `--wa-form-control-background` | `var(--wa-color-surface-default)` | +| `--wa-form-control-border-style` | `var(--wa-border-style)` | +| `--wa-form-control-border-width` | `var(--wa-border-width-s)` | +| `--wa-form-control-border-radius` | `var(--wa-border-radius-s)` | +| `--wa-form-control-activated-color` | `var(--wa-color-brand-fill-loud)` | +| `--wa-form-control-resting-color` | `var(--wa-color-neutral-border-loud)` | +| `--wa-form-control-label-color` | `var(--wa-color-neutral-border-loud)` | +| `--wa-form-control-label-font-weight` | `var(--wa-font-weight-normal)` | +| `--wa-form-control-label-line-height` | `var(--wa-line-height-normal)` | +| `--wa-form-control-value-color` | `var(--wa-color-text-normal)` | +| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` | +| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` | +| `--wa-form-control-placeholder-color` | `var(--wa-color-base-60)` | | `--wa-form-control-height-s` | `calc(var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height))` | -| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))` | -| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))` | -| `--wa-form-control-required-content` | `'*'` | -| `--wa-form-control-required-content-color` | `inherit` | -| `--wa-form-control-required-content-offset` | `-0.1em` | +| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))` | +| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))` | +| `--wa-form-control-required-content` | `'*'` | +| `--wa-form-control-required-content-color` | `inherit` | +| `--wa-form-control-required-content-offset` | `-0.1em` | ```html {.example}