From 0dccdaecdf4f216c3fe394cf0b522c80e2b88807 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Fri, 7 Jun 2024 15:42:27 -0400 Subject: [PATCH] touch up theming docs --- docs/assets/styles/docs.css | 3 +- docs/docs/theming/borders.md | 48 +++++++-------- docs/docs/theming/color.md | 45 +++++++------- docs/docs/theming/component-groups.md | 8 +-- docs/docs/theming/focus.md | 14 ++--- docs/docs/theming/motion.md | 10 ++-- docs/docs/theming/space.md | 32 +++++----- docs/docs/theming/typography.md | 84 +++++++++++++-------------- docs/docs/theming/z-index.md | 10 ++-- src/themes/default.css | 2 +- 10 files changed, 130 insertions(+), 126 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f57fa3d15..644404b4d 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -135,11 +135,12 @@ wa-page > main { /* Swatches */ .swatch { - background-color: var(--wa-color-surface-default); + background-color: transparent; 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); + box-sizing: border-box; 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 557e17bd9..b67c2881a 100644 --- a/docs/docs/theming/borders.md +++ b/docs/docs/theming/borders.md @@ -6,41 +6,43 @@ layout: page.njk ## Style -Border style controls the line shape of borders throughout Web Awesome. +Border style controls the standard line shape of borders throughout Web Awesome. -| Custom Property | Default Value | Preview | -| ----------------------------- | - | ------------------------------- | -| `--wa-border-style` | solid |
| +| Custom Property | Default Value | Preview | +| ------------------- | ------------- | ----------------------------------------------------------------------- | +| `--wa-border-style` | `solid` |
| ## Width Border widths use `rem` units in order to scale proportionately with the root font size. -Each border width value uses a `calc()` function with `--wa-border-width-multiplier` to increase or decrease all border widths at once. By default, this multiplier is `0.0625`. The table below lists only the result of the calculation. +Each border width value uses a `calc()` function with `--wa-border-width-multiplier` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation. -| 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) |
| +| 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) |
| ## Radius -Common border radius properties allow you to achieve specific shapes. +Border radius controls the corners of Web Awesome components. -| Custom Property | Default Value | Preview | -| ----------------------------- | - | ------------------------------- | -| `--wa-border-radius-pill` | 9999px |
| -| `--wa-border-radius-circle` | 50% |
| -| `--wa-border-radius-square` | 0rem |
| +Common border radius properties allow you to achieve specific shapes beyond your theme's preferred corner styles. + +| Custom Property | Default Value | Preview | +| --------------------------- | ------------- | ----------------------------------------------------------------------------------------------------- | +| `--wa-border-radius-pill` | `9999px` |
| +| `--wa-border-radius-circle` | `50%` |
| +| `--wa-border-radius-square` | `0px` |
| 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. -Each border radius value uses a `calc()` function with `--wa-border-radius-multiplier` to increase or decrease all border radii at once. By default, this multiplier is `0.375`. The table below lists only the result of the calculation. +Each property uses a `calc()` function with `--wa-border-radius-multiplier` to scale all border radii at once. By default, this multiplier is `0.375`. The table below lists the result of the calculation. -| 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) |
| +| 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) |
| diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index fbb1f5495..69df78cc0 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -27,7 +27,7 @@ layout: page.njk flex: 1 1 auto; } .swatch { - border: none; + border-color: transparent; } .color-mix-example { background-image: @@ -38,6 +38,7 @@ layout: page.njk var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud)) ; + border: none; color: var(--wa-color-brand-on-loud); text-align: center; } @@ -513,28 +514,28 @@ By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa- Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells). -| Custom Property | Preview | +| Custom Property | Preview | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `--wa-color-surface-raised` |
| | `--wa-color-surface-default` |
| | `--wa-color-surface-lowered` |
| -| `--wa-color-surface-border` |
| +| `--wa-color-surface-border` |
| ### Text Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors. -| Custom Property | Preview | -| ------------------------ | ------------------------------------------------------------ | -| `--wa-color-text-normal` | AaBb | -| `--wa-color-text-quiet` | AaBb | -| `--wa-color-text-link` | AaBb | +| Custom Property | Preview | +| ------------------------ | ---------------------------------------------------------- | +| `--wa-color-text-normal` |
AaBb
| +| `--wa-color-text-quiet` |
AaBb
| +| `--wa-color-text-link` |
AaBb
| ### Overlays Overlays provide a backdrop to isolate content, often allowing background context to show through. -| Custom Property | Preview | +| Custom Property | Preview | | --------------------------- | ----------------------------------------------------------------------------------- | | `--wa-color-overlay-modal` |
| | `--wa-color-overlay-inline` |
| @@ -543,7 +544,7 @@ Overlays provide a backdrop to isolate content, often allowing background contex Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows. -| Custom Property | Preview | +| Custom Property | Preview | | ------------------- | --------------------------------------------------------------------------- | | `--wa-color-shadow` |
| @@ -553,7 +554,7 @@ Web Awesome uses a single color for all shadows. This is used alongside other [s Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible. -| Custom Property | Preview | +| Custom Property | Preview | | ------------------ | ----------------------------------------------------------------------------------------------------------------------- | | `--wa-color-focus` |
| @@ -561,7 +562,7 @@ Web Awesome uses a single focus color for predictable keyboard navigation. This Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component. -| Custom Property | Preview | +| Custom Property | Preview | | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | | `--wa-color-mix-hover` |
mixed
| | `--wa-color-mix-active` |
mixed
| @@ -586,14 +587,14 @@ Finally, each color is named according to how much attention it draws. Here, we - **Normal** draws some attention - **Loud** draws the most attention -| Custom Property | brand | success | neutral | warning | danger | -| ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | -| `--wa-color-*-fill-quiet` |
|
|
|
|
| +| 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-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 ffdb2e11b..84d37cdc4 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -10,9 +10,9 @@ 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, `` 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. +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 width of other form controls. -| Custom Property | Default Value | +| Custom Property | Default Value | | ------------------------------------------- | ------------------------------------------------------------------------------------------------- | | `--wa-form-control-background` | `var(--wa-color-surface-default)` | | `--wa-form-control-border-style` | `var(--wa-border-style)` | @@ -72,7 +72,7 @@ Not every form control uses all of these custom properties. For example, `(6px) | | `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` | diff --git a/docs/docs/theming/focus.md b/docs/docs/theming/focus.md index 7b90844b8..e8c7782e3 100644 --- a/docs/docs/theming/focus.md +++ b/docs/docs/theming/focus.md @@ -7,14 +7,14 @@ layout: page.njk A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components. -| Custom Property | Default Value | -| ----------------------------- | ------------------------------- | -| `--wa-focus-ring-style` | solid | -| `--wa-focus-ring-width` | 0.1875rem | -| `--wa-focus-ring` | var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus) | -| `--wa-focus-ring-offset` | 0.0625rem | +| Custom Property | Default Value | +| ------------------------ | ----------------------------------------------------------------------------- | +| `--wa-focus-ring-style` | `solid` | +| `--wa-focus-ring-width` | `0.1875rem` (3px) | +| `--wa-focus-ring` | `var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)` | +| `--wa-focus-ring-offset` | `0.0625rem` (1px) | -Navigate this form example with your keyboard to see your theme's focus ring in action. +See your theme's focus ring in action by navigating this form example with your keyboard. ```html {.example}