mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Update docs to lean into the "tokens" terminology in lieu of "properties"
Co-Authored-By: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
This commit is contained in:
Lea Verou
2
docs/docs/themes/index.njk
vendored
2
docs/docs/themes/index.njk
vendored
@@ -14,7 +14,7 @@ categories:
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
|
||||
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
|
||||
|
||||
@@ -487,7 +487,7 @@ Overlays provide a backdrop to isolate content, often allowing background contex
|
||||
### Shadow
|
||||
|
||||
Web Awesome uses a single color for all shadows.
|
||||
This is used alongside other [shadow properties](/docs/tokens/shadows) to construct your theme's shadows.
|
||||
This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------- | --------------------------------------------------------------------------- |
|
||||
@@ -497,7 +497,7 @@ This is used alongside other [shadow properties](/docs/tokens/shadows) to constr
|
||||
|
||||
#### Focus
|
||||
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/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 |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Focus
|
||||
description: Configure recognizable focus states with Web Awesome's focus properties.
|
||||
---
|
||||
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.
|
||||
|
||||
|
||||
| Custom Property | Default Value |
|
||||
|
||||
@@ -3,7 +3,7 @@ title: Shadows
|
||||
description: Elevate your components with Web Awesome's shadow properties.
|
||||
---
|
||||
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.
|
||||
|
||||
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal
|
||||
|
||||
## Links
|
||||
|
||||
Together with [`--wa-color-link`](/docs/tokens/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
|
||||
Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
|
||||
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) properties in your theme.
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
|
||||
|
||||
| Class Name | `gap` Value | Preview |
|
||||
| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -14,7 +14,7 @@ status: wip
|
||||
|
||||
Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
|
||||
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) properties in your theme.
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.
|
||||
|
||||
| Class Name | `border-radius` Value | Preview |
|
||||
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-normal);`
|
||||
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme.
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
|
||||
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
- `text-wrap: balance;`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ----------------------------------------------------- |
|
||||
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
|
||||
|
||||
Reference in New Issue
Block a user