mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
touch up theming docs
This commit is contained in:
lindsaym-fa
@@ -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);
|
||||
|
||||
@@ -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` | <code>solid</code> | <div class="swatch" style="border-style: var(--wa-border-style)"></div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ------------------- | ------------- | ----------------------------------------------------------------------- |
|
||||
| `--wa-border-style` | `solid` | <div class="swatch" style="border-style: var(--wa-border-style)"></div> |
|
||||
|
||||
## 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` | <code>0.0625rem</code> <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
|
||||
| `--wa-border-width-m` | <code>0.125rem</code> <small>(2px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
|
||||
| `--wa-border-width-l` | <code>0.1875rem</code> <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| --------------------- | -------------------------------- | ------------------------------------------------------------------------- |
|
||||
| `--wa-border-width-s` | `0.0625rem` <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
|
||||
| `--wa-border-width-m` | `0.125rem` <small>(2px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
|
||||
| `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
|
||||
|
||||
## 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` | <code>9999px</code> | <div class="swatch" style="border-radius: var(--wa-border-radius-pill)"></div> |
|
||||
| `--wa-border-radius-circle` | <code>50%</code> | <div class="swatch" style="aspect-ratio: 1 / 1; border-radius: var(--wa-border-radius-circle)"></div> |
|
||||
| `--wa-border-radius-square` | <code>0rem</code> | <div class="swatch" style="border-radius: var(--wa-border-radius-square)"></div> |
|
||||
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` | <div class="swatch" style="border-radius: var(--wa-border-radius-pill)"></div> |
|
||||
| `--wa-border-radius-circle` | `50%` | <div class="swatch" style="aspect-ratio: 1 / 1; border-radius: var(--wa-border-radius-circle)"></div> |
|
||||
| `--wa-border-radius-square` | `0px` | <div class="swatch" style="border-radius: var(--wa-border-radius-square)"></div> |
|
||||
|
||||
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` | <code>0.1875rem</code> <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-xs)"></div> |
|
||||
| `--wa-border-radius-s` | <code>0.375rem</code> <small>(6px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
|
||||
| `--wa-border-radius-m` | <code>0.75rem</code> <small>(12px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
|
||||
| `--wa-border-radius-l` | <code>1.125rem</code> <small>(18px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| `--wa-border-radius-xs` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-xs)"></div> |
|
||||
| `--wa-border-radius-s` | `0.375rem` <small>(6px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
|
||||
| `--wa-border-radius-m` | `0.75rem` <small>(12px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
|
||||
| `--wa-border-radius-l` | `1.125rem` <small>(18px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
|
||||
|
||||
@@ -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` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
|
||||
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div> |
|
||||
|
||||
### 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` | <span style="color: var(--wa-color-text-normal)">AaBb</span> |
|
||||
| `--wa-color-text-quiet` | <span style="color: var(--wa-color-text-quiet)">AaBb</span> |
|
||||
| `--wa-color-text-link` | <span style="color: var(--wa-color-text-link)">AaBb</span> |
|
||||
| Custom Property | Preview |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-color-text-normal` | <div style="color: var(--wa-color-text-normal)">AaBb</div> |
|
||||
| `--wa-color-text-quiet` | <div style="color: var(--wa-color-text-quiet)">AaBb</div> |
|
||||
| `--wa-color-text-link` | <div style="color: var(--wa-color-text-link)">AaBb</div> |
|
||||
|
||||
### 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` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
|
||||
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
|
||||
@@ -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` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
|
||||
|
||||
@@ -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` | <div class="swatch" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
|
||||
|
||||
@@ -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` | <div class="swatch color-mix-example" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div> |
|
||||
| `--wa-color-mix-active` | <div class="swatch color-mix-example" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
|
||||
@@ -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 | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
|
||||
| ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- |
|
||||
| `--wa-color-*-fill-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
|
||||
| Custom Property | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
|
||||
| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
|
||||
| `--wa-color-*-fill-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
|
||||
| `--wa-color-*-fill-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
|
||||
| `--wa-color-*-fill-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
|
||||
| `--wa-color-*-border-quiet` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div> |
|
||||
| `--wa-color-*-border-normal` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div> |
|
||||
| `--wa-color-*-border-loud` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div> |
|
||||
| `--wa-color-*-on-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
|
||||
| `--wa-color-*-on-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
|
||||
| `--wa-color-*-on-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
|
||||
| `--wa-color-*-fill-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
|
||||
| `--wa-color-*-border-quiet` | <div class="swatch" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
|
||||
| `--wa-color-*-border-normal` | <div class="swatch" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-normal)"></div> |
|
||||
| `--wa-color-*-border-loud` | <div class="swatch" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" style="border-color: var(--wa-color-danger-border-loud)"></div> |
|
||||
| `--wa-color-*-on-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
|
||||
| `--wa-color-*-on-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
|
||||
| `--wa-color-*-on-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
|
||||
@@ -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, `<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, `<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 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, `<wa-ra
|
||||
|
||||
Panels consist of components with larger, contained surface areas like [callout](/docs/components/callout), [card](/docs/components/card), [details](/docs/components/details), and [dialog](/docs/components/dialog).
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| Custom Property | Default Value |
|
||||
| -------------------------- | --------------------------- |
|
||||
| `--wa-panel-border-style` | `var(--wa-border-style)` |
|
||||
| `--wa-panel-border-width` | `var(--wa-border-width-s)` |
|
||||
@@ -102,7 +102,7 @@ Panels consist of components with larger, contained surface areas like [callout]
|
||||
|
||||
Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range).
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| Custom Property | Default Value |
|
||||
| ---------------------------- | ----------------------------------- |
|
||||
| `--wa-tooltip-arrow-size` | `0.375rem` <small>(6px)</small> |
|
||||
| `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` |
|
||||
|
||||
@@ -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` | <code>solid</code> |
|
||||
| `--wa-focus-ring-width` | <code>0.1875rem</code> |
|
||||
| `--wa-focus-ring` | <code>var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)</code> |
|
||||
| `--wa-focus-ring-offset` | <code>0.0625rem</code> |
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------ | ----------------------------------------------------------------------------- |
|
||||
| `--wa-focus-ring-style` | `solid` |
|
||||
| `--wa-focus-ring-width` | `0.1875rem` <small>(3px)</small> |
|
||||
| `--wa-focus-ring` | `var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)` |
|
||||
| `--wa-focus-ring-offset` | `0.0625rem` <small>(1px)</small> |
|
||||
|
||||
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}
|
||||
<form class="wa-block-spacing-m">
|
||||
|
||||
@@ -20,8 +20,8 @@ Motion like transitions and animations can make interactions more lively and emp
|
||||
|
||||
Web Awesome uses transitions to ease between component states.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-transition-slow` | <code>300ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-slow)"></div> |
|
||||
| `--wa-transition-normal` | <code>150ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
|
||||
| `--wa-transition-fast` | <code>75ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-fast)"></div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ------------------------ | ------------- | ------------------------------------------------------------------------------------------- |
|
||||
| `--wa-transition-slow` | `300ms` | <div class="swatch" style="transition: background-color var(--wa-transition-slow)"></div> |
|
||||
| `--wa-transition-normal` | `150ms` | <div class="swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
|
||||
| `--wa-transition-fast` | `75ms` | <div class="swatch" style="transition: background-color var(--wa-transition-fast)"></div> |
|
||||
@@ -5,7 +5,7 @@ layout: page.njk
|
||||
---
|
||||
|
||||
<style>
|
||||
.spacing-swatch {
|
||||
.spacing-example {
|
||||
--dot-size: 0.5em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -15,7 +15,7 @@ layout: page.njk
|
||||
margin-inline:var(--dot-size);
|
||||
}
|
||||
|
||||
.spacing-swatch::before {
|
||||
.spacing-example::before {
|
||||
content: '';
|
||||
aspect-ratio: 1 / 1;
|
||||
width: var(--dot-size);
|
||||
@@ -24,7 +24,7 @@ layout: page.njk
|
||||
margin-inline-start: calc(var(--dot-size) * -1);
|
||||
}
|
||||
|
||||
.spacing-swatch::after {
|
||||
.spacing-example::after {
|
||||
content: '';
|
||||
aspect-ratio: 1 / 1;
|
||||
width: var(--dot-size);
|
||||
@@ -36,21 +36,21 @@ layout: page.njk
|
||||
|
||||
Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.
|
||||
|
||||
Each space value uses a `calc()` function with `--wa-space-multiplier` to increase or decrease all spacing at once. By default, this multiplier is `1`. The table below lists only the result of the calculation.
|
||||
Each space property uses a `calc()` function with `--wa-space-multiplier` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-space-3xs` | <code>0.125rem</code> <small>(2px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-3xs)"></div> |
|
||||
| `--wa-space-2xs` | <code>0.25rem</code> <small>(4px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-2xs)"></div> |
|
||||
| `--wa-space-xs` | <code>0.5rem</code> <small>(8px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-xs)"></div> |
|
||||
| `--wa-space-s` | <code>0.75rem</code> <small>(12px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-s)"></div> |
|
||||
| `--wa-space-m` | <code>1rem</code> <small>(16px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-m)"></div> |
|
||||
| `--wa-space-l` | <code>1.25rem</code> <small>(20px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-l)"></div> |
|
||||
| `--wa-space-xl` | <code>1.5rem</code> <small>(24px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-xl)"></div> |
|
||||
| `--wa-space-2xl` | <code>2rem</code> <small>(32px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-2xl)"></div> |
|
||||
| `--wa-space-3xl` | <code>3rem</code> <small>(48px)</small> | <div class="spacing-swatch" style="width: var(--wa-space-3xl)"></div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
|
||||
| `--wa-space-3xs` | `0.125rem` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
|
||||
| `--wa-space-2xs` | `0.25rem` <small>(4px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
|
||||
| `--wa-space-xs` | `0.5rem` <small>(8px)</small> | <div class="spacing-example" style="width: var(--wa-space-xs)"></div> |
|
||||
| `--wa-space-s` | `0.75rem` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div> |
|
||||
| `--wa-space-m` | `1rem` <small>(16px)</small> | <div class="spacing-example" style="width: var(--wa-space-m)"></div> |
|
||||
| `--wa-space-l` | `1.25rem` <small>(20px)</small> | <div class="spacing-example" style="width: var(--wa-space-l)"></div> |
|
||||
| `--wa-space-xl` | `1.5rem` <small>(24px)</small> | <div class="spacing-example" style="width: var(--wa-space-xl)"></div> |
|
||||
| `--wa-space-2xl` | `2rem` <small>(32px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
|
||||
| `--wa-space-3xl` | `3rem` <small>(48px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
|
||||
|
||||
When using these space properties, it may be helpful to conceptualize three distinct groups:
|
||||
When using space properties, it may be helpful to consider three distinct groups:
|
||||
- Small-scale space (`3xs`, `2xs`, and `xs`) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltips
|
||||
- Normal space (`s`, `m`, and `l`) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputs
|
||||
- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs
|
||||
@@ -6,75 +6,75 @@ layout: page.njk
|
||||
|
||||
## Font Family
|
||||
|
||||
Font families are assigned specific roles — like heading or code — to help keep text styles consistent and customization easy. By default, these properties use system fonts and generic fallbacks to maximize performance.
|
||||
Font families are assigned specific roles — like heading or code — to help keep text styles consistent and easy to customize. By default, these properties use system fonts and generic fallbacks to maximize performance.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-font-family-body` | `ui-sans-serif, system-ui, sans-serif` | <div style="font-family: var(--wa-font-family-body)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-heading` | `var(--wa-font-family-body)` | <div style="font-family: var(--wa-font-family-heading)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-code` | `ui-monospace, monospace` | <div style="font-family: var(--wa-font-family-code)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-longform` | `ui-serif, serif` | <div style="font-family: var(--wa-font-family-longform)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| --------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-font-family-body` | `ui-sans-serif, system-ui, sans-serif` | <div style="font-family: var(--wa-font-family-body)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-heading` | `var(--wa-font-family-body)` | <div style="font-family: var(--wa-font-family-heading)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-code` | `ui-monospace, monospace` | <div style="font-family: var(--wa-font-family-code)">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `--wa-font-family-longform` | `ui-serif, serif` | <div style="font-family: var(--wa-font-family-longform)">Sphinx of black quartz, judge my vow.</div> |
|
||||
|
||||
## Font Size
|
||||
|
||||
Font sizes use the Major Second type scale, rounded to the nearest whole pixel assuming a 16px root font size. To maximize variation in larger font sizes, every other step on the scale is skipped.
|
||||
|
||||
Each font size value uses a `calc()` function with `--wa-font-size-multiplier` to increase or decrease all font sizes at once. By default, this multiplier is `1`. The table below lists only the result of the calculation.
|
||||
Each font size uses a `calc()` function with `--wa-font-size-multiplier` to scale all font sizes at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-font-size-2xs` | `0.6875rem` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
|
||||
| `--wa-font-size-xs` | `0.75rem` <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
|
||||
| `--wa-font-size-s` | `0.875rem` <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
|
||||
| `--wa-font-size-m` | `1rem` <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
|
||||
| `--wa-font-size-l` | `1.25rem` <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
|
||||
| `--wa-font-size-xl` | `1.625rem` <small>(26px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
|
||||
| `--wa-font-size-2xl` | `2rem` <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
|
||||
| `--wa-font-size-3xl` | `2.5625rem` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
|
||||
| `--wa-font-size-4xl` | `3.25rem` <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| -------------------- | --------------------------------- | ---------------------------------------------------------- |
|
||||
| `--wa-font-size-2xs` | `0.6875rem` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
|
||||
| `--wa-font-size-xs` | `0.75rem` <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
|
||||
| `--wa-font-size-s` | `0.875rem` <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
|
||||
| `--wa-font-size-m` | `1rem` <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
|
||||
| `--wa-font-size-l` | `1.25rem` <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
|
||||
| `--wa-font-size-xl` | `1.625rem` <small>(26px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
|
||||
| `--wa-font-size-2xl` | `2rem` <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
|
||||
| `--wa-font-size-3xl` | `2.5625rem` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
|
||||
| `--wa-font-size-4xl` | `3.25rem` <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
|
||||
|
||||
## Font Weight
|
||||
|
||||
Font weight properties are given common names — like light or bold — or assigned specific roles.
|
||||
Font weight properties are given common names or assigned specific roles.
|
||||
|
||||
Common weights let you easily adjust the full range of weights for your theme.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-font-weight-light` | `300` | <div style="font-weight: var(--wa-font-weight-light)">AaBb</div> |
|
||||
| `--wa-font-weight-normal` | `400` | <div style="font-weight: var(--wa-font-weight-normal)">AaBb</div> |
|
||||
| `--wa-font-weight-semibold` | `500` | <div style="font-weight: var(--wa-font-weight-semibold)">AaBb</div> |
|
||||
| `--wa-font-weight-bold` | `600` | <div style="font-weight: var(--wa-font-weight-bold)">AaBb</div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| --------------------------- | ------------- | ------------------------------------------------------------------- |
|
||||
| `--wa-font-weight-light` | `300` | <div style="font-weight: var(--wa-font-weight-light)">AaBb</div> |
|
||||
| `--wa-font-weight-normal` | `400` | <div style="font-weight: var(--wa-font-weight-normal)">AaBb</div> |
|
||||
| `--wa-font-weight-semibold` | `500` | <div style="font-weight: var(--wa-font-weight-semibold)">AaBb</div> |
|
||||
| `--wa-font-weight-bold` | `600` | <div style="font-weight: var(--wa-font-weight-bold)">AaBb</div> |
|
||||
|
||||
Role-based weights allow you to uniformly adjust the weight of certain types of text elements to keep text styles consistent.
|
||||
Role-based weights allow you to uniformly adjust the weight of certain types of text to keep styles consistent.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-font-weight-body` | `var(--wa-font-weight-normal)` | <div style="font-weight: var(--wa-font-weight-body)">AaBb</div> |
|
||||
| `--wa-font-weight-heading` | `var(--wa-font-weight-bold)` | <div style="font-weight: var(--wa-font-weight-heading)">AaBb</div> |
|
||||
| `--wa-font-weight-action` | `var(--wa-font-weight-semibold)` | <div style="font-weight: var(--wa-font-weight-action)">AaBb</div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| -------------------------- | -------------------------------- | ------------------------------------------------------------------ |
|
||||
| `--wa-font-weight-body` | `var(--wa-font-weight-normal)` | <div style="font-weight: var(--wa-font-weight-body)">AaBb</div> |
|
||||
| `--wa-font-weight-heading` | `var(--wa-font-weight-bold)` | <div style="font-weight: var(--wa-font-weight-heading)">AaBb</div> |
|
||||
| `--wa-font-weight-action` | `var(--wa-font-weight-semibold)` | <div style="font-weight: var(--wa-font-weight-action)">AaBb</div> |
|
||||
|
||||
In Web Awesome, we use `--wa-font-weight-action` for interactive text, such as button labels and tab names. We also recommend using `--wa-font-weight-action` for interactive text that doesn't otherwise signal its interactively, such as links without text decoration.
|
||||
In Web Awesome, we use `--wa-font-weight-action` for interactive text, such as button labels and tab names. We also recommend using `--wa-font-weight-action` for text that uses color alone to signal interactivity, such as links without text decoration.
|
||||
|
||||
## Line Height
|
||||
|
||||
Line heights control the distance between lines of text and are unitless to scale proportionately with text size. For readability, `--wa-line-height-normal`, recommended for paragraph text, should be 1.5 or greater.
|
||||
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------------- | - | ------------------------------- |
|
||||
| `--wa-line-height-condensed` | `1.125` | <div style="line-height: var(--wa-line-height-condensed); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
| `--wa-line-height-normal` | `1.6` | <div style="line-height: var(--wa-line-height-normal); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
| `--wa-line-height-expanded` | `2` | <div style="line-height: var(--wa-line-height-expanded); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ---------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-line-height-condensed` | `1.125` | <div style="line-height: var(--wa-line-height-condensed); border-block-color: var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
| `--wa-line-height-normal` | `1.6` | <div style="line-height: var(--wa-line-height-normal); border-block-color: var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
| `--wa-line-height-expanded` | `2` | <div style="line-height: var(--wa-line-height-expanded); border-block-color: var(--wa-color-neutral-border-loud)">AaBb</div> |
|
||||
|
||||
## Links
|
||||
|
||||
Together with [`--wa-color-link`](/docs/theming/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ----------------------------- | ------------------------------- |
|
||||
| `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` |
|
||||
| `--wa-link-decoration-hover` | `underline` |
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------- |
|
||||
| `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` |
|
||||
| `--wa-link-decoration-hover` | `underline` |
|
||||
|
||||
```html {.example}
|
||||
<a href="#">Web Awesome anchor</a>
|
||||
|
||||
@@ -6,11 +6,11 @@ layout: page.njk
|
||||
|
||||
Z-index properties make sure that certain Web Awesome components aren't mistakenly obscured. If you have elements with their own z-indices outside of Web Awesome, you can change these z-index properties as needed so that everything stacks appropriately.
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ----------------------- | -------------- |
|
||||
| `--wa-z-index-dropdown` | `900` |
|
||||
| `--wa-z-index-toast` | `990` |
|
||||
| `--wa-z-index-tooltip` | `1000` |
|
||||
| Custom Property | Default Value |
|
||||
| ----------------------- | ------------- |
|
||||
| `--wa-z-index-dropdown` | `900` |
|
||||
| `--wa-z-index-toast` | `990` |
|
||||
| `--wa-z-index-tooltip` | `1000` |
|
||||
|
||||
```html {.example}
|
||||
<div class="z-index-example">
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0rem;
|
||||
--wa-border-radius-square: 0px;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
|
||||
Reference in New Issue
Block a user