Design Tokens

Design tokens are the building blocks of your theme and thread through every Web Awesome component, giving your project a cohesive look and feel. They control everything from typography and color to spacing and borders.

Borders

Border tokens define the edges and corners of Web Awesome components.

 Color

Ensure consistent use of color and readable contrast with Web Awesome's color properties.

 Component Groups

Style groups of components that share similar qualities with these Web Awesome tokens.

 Ellipsis

This CSS utility layer provides single- and multi-line text truncation classes that neatly cut off overflowing text and replace it with an ellipsis.

 Focus

Configure recognizable focus states with Web Awesome's focus tokens.

 Shadows

Elevate your components with Web Awesome's shadow tokens.

 Space

Lock down consistent spacing Web Awesome's space tokens.

 Transitions

Customize your theme's built-in transitions with Web Awesome's transition tokens.

 Typography

Get consistent font styles and vertical rhythm with Web Awesome's typography tokens.

Using Design Tokens

Design tokens are CSS custom properties prefixed with --wa-. Use them in your own stylesheets by wrapping the token name in the CSS var() function and assigning it to a property:

.branded-container {
  background-color: var(--wa-color-brand-fill-normal);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-brand-border-normal);
  color: var(--wa-color-brand-on-normal);
}

You can also use design tokens with inline styles:

<span style="
  background-color: var(--wa-color-brand-fill-normal);
  color: var(--wa-color-brand-on-normal);
"></span>

Customizing Design Tokens

Overriding a design token updates every component and style that references it, making it a breeze to style and restyle your project. To customize a token, set its value in your styles. Setting tokens on :root applies them globally across your entire project:

:root {
  --wa-font-family-body: 'Inter', sans-serif;
  --wa-border-width-scale: 1.5; /* scales all border widths proportionally */
}

To customize a token that adapts to light and dark mode, scope the token to .wa-light, .wa-dark, and, optionally, .wa-invert:

:root,
.wa-light,
.wa-dark .wa-invert {
  --wa-color-surface-default: var(--wa-color-neutral-95);
}

.wa-dark,
.wa-invert {
  --wa-color-surface-default: var(--wa-color-neutral-05);
}

You can also scope tokens to a subtree rather than :root, which allows you to theme a single section or element differently from the rest:

*:state(user-invalid),
*:user-invalid {
  --wa-color-focus: var(--wa-color-danger-60);
  --wa-form-control-border-color: var(--wa-color-danger-border-normal);
  --wa-form-control-label-color: var(--wa-color-danger-on-quiet);
}
    No results