GuideTokensReferenceUpdated in v15

Colors

The --wr-color-* tokens, and which one to use for fills, text and borders.

Intents

Five intents, each with the same set of tokens.

primary
base
dark
darker
light
lighter
success
base
dark
darker
light
lighter
warning
base
dark
darker
light
lighter
danger
base
dark
darker
light
lighter
info
base
dark
darker
light
lighter
TokenUse
--wr-color-{intent}Solid fill
--wr-color-{intent}-contrastText on the solid fill
--wr-color-{intent}-dark, -darkerHover and pressed fill
--wr-color-{intent}-light, -lighterLighter shades
--wr-color-{intent}-softTinted fill
--wr-color-{intent}-soft-borderBorder on a tinted fill
--wr-color-{intent}-activePressed tinted fill
--wr-color-{intent}-inkThe intent as text, on a surface or a tinted fill
--wr-color-{intent}-soft-contrastOlder text-on-tint token. Use -ink instead
primary · -soft fill, -soft-border, -ink text
success · -soft fill, -soft-border, -ink text
warning · -soft fill, -soft-border, -ink text
danger · -soft fill, -soft-border, -ink text
info · -soft fill, -soft-border, -ink text

Neutrals

Use these for surfaces and text, not the fixed gray ramp: they follow dark mode, the ramp does not.

TokenUse
--wr-color-surfacePage and card background
--wr-color-on-surfaceBody text
--wr-color-on-surface-mutedSecondary text
--wr-color-placeholderPlaceholder text
--wr-color-hoverHover tint on rows and icon buttons
--wr-color-fill-subtle, -fill, -fill-strongNeutral washes: a band, a header, a track
--wr-border-subtle, -base, -strongBorders and dividers
--wr-color-overlayModal and drawer scrim
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950

Usage

.toast {
  background: var(--wr-color-primary);
  color: var(--wr-color-primary-contrast);
}
.toast:hover { background: var(--wr-color-primary-dark); }

.alert {
  background: var(--wr-color-danger-soft);
  border: 1px solid var(--wr-color-danger-soft-border);
  color: var(--wr-color-danger-ink);
}

.card {
  background: var(--wr-color-surface);
  border: 1px solid var(--wr-border-base);
  color: var(--wr-color-on-surface);
}
.card__meta { color: var(--wr-color-on-surface-muted); }

// Any token at any alpha
.ring {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wr-color-primary) 20%, transparent);
}

Focus ring

Text fields mark focus with their border instead, so these tokens do not reach them.

TokenDefault
--wr-focus-ring-colorvar(--wr-color-primary)
--wr-focus-ring-width2px
--wr-focus-ring-offset2px
--wr-focus-ring-halocolor-mix(in srgb, var(--wr-color-primary) 25%, transparent)
:root {
  --wr-focus-ring-color: var(--wr-color-success);
  --wr-focus-ring-width: 3px;
}

// Text fields: recolour their focused border too.
.wr-input:focus,
.wr-input-group:focus-within,
.wr-textarea--focused {
  --wr-input-border: var(--wr-focus-ring-color);
  --wr-input-group-border: var(--wr-focus-ring-color);
  --wr-textarea-border: var(--wr-focus-ring-color);
}

Looping over the intents

theme.$colors in Sass and WR_COLORS in TypeScript list the intents, a rebrand included.

@use 'ngwr/theme';

.my-badge {
  @each $name in theme.$colors {
    &--#{$name} {
      background: var(--wr-color-#{$name});
      color: var(--wr-color-#{$name}-contrast);
    }
  }
}
import { WR_COLORS } from 'ngwr/theme';

WR_COLORS; // ['primary', 'success', 'warning', 'danger', 'info']

See also

2022 – 2026 © Roman Khegayv15.1.0