Tokens
Nothing on this page is typed by hand. Every name, every value and every contrast figure is read out of packages/tokens/dist/tokens.json when the site builds, and the ratios are measured by the same module the token test suite uses. A token added to the source appears here. A value changed in the source changes here. A pairing that stops meeting its declared minimum fails this build before it can be published.
- Tokens
- 217
- Colors
- 142
- Declared contrast pairings
- 74
- Held to AAA
- 52
13 semantic color tokens carry no contrast declaration: light.surface.overlay, light.brand.active, light.accent.subtle, light.border.base, light.mockup.device, light.mockup.bezel, dark.surface.overlay, dark.brand.active, dark.brand.subtle, dark.accent.subtle, dark.border.base, dark.mockup.device, dark.mockup.bezel. These are surfaces and fills that never sit behind text on their own. Anything that does needs a declaration, because a pairing with no declaration is a pairing the gate cannot see.
How the layers work
primitive color.green.400 #0c5449 the ramp
semantic semantic.light.brand {color.green.400} what it is for
component --wsu-brand what components may useComponents reference the semantic layer only. Reaching past it to a ramp value is how a system stops being themeable: the value is right in light, wrong in dark, and invisible to the contrast gate because no semantic token declares it. The CSS build fails on var(--wsu-green-400) inside a component or the chrome.
The ramps match waynestate/base-site stop for stop, so green-400 means the same thing to a C&IT developer as it does to a marketing developer. Extension stops are allowed only on numbers base-site does not define, and each has to justify itself in the token source.
Contrast
Every color pairing the system relies on is declared on the tokens themselves, with the minimum it has to meet and, often, why. The test suite reads those declarations back, so adding a color without one is caught by a coverage test rather than discovered later.
The minima are not all the same. Body text is held to 7:1, which is WCAG AAA rather than the 4.5:1 AA floor, because the WSU palette reaches it. Helper text and captions are held to 4.5:1. Borders and focus rings are held to 3:1, which is the non-text requirement in 1.4.11.
Light
| Pairing | Sample | Measured | Declared minimum | Result |
|---|---|---|---|---|
text.subtleonsurface.baseAA. Captions and helper text only, never primary content | #71717a on #FFFFFF | 4.83:1 | 4.5:1 AA 1.4.3 | Meets 0.33 to spare |
status.infoonsurface.base | #0E5A7D on #FFFFFF | 7.56:1 | 7:1 AAA 1.4.6 | Meets 0.56 to spare |
status.info-ononstatus.info | #FFFFFF on #0E5A7D | 7.56:1 | 7:1 AAA 1.4.6 | Meets 0.56 to spare |
status.dangeronsurface.base | #9B1C2E on #FFFFFF | 8.07:1 | 7:1 AAA 1.4.6 | Meets 1.07 to spare |
status.danger-ononstatus.danger | #FFFFFF on #9B1C2E | 8.07:1 | 7:1 AAA 1.4.6 | Meets 1.07 to spare |
status.warningonsurface.base | #634D00 on #FFFFFF | 8.10:1 | 7:1 AAA 1.4.6 | Meets 1.10 to spare |
status.warning-ononstatus.warning | #FFFFFF on #634D00 | 8.10:1 | 7:1 AAA 1.4.6 | Meets 1.10 to spare |
brand.baseonbrand.subtle | #0c5449 on #F2F7F6 | 8.15:1 | 7:1 AAA 1.4.6 | Meets 1.15 to spare |
Dark
| Pairing | Sample | Measured | Declared minimum | Result |
|---|---|---|---|---|
chrome.bar-mutedonchrome.bar | #F2F7F6 on #0c5449 | 8.15:1 | 7:1 AAA 1.4.6 | Meets 1.15 to spare |
text.subtleonsurface.base | #a1a1aa on #142521 | 6.22:1 | 4.5:1 AA 1.4.3 | Meets 1.72 to spare |
status.infoonsurface.base | #8CC8E8 on #142521 | 8.76:1 | 7:1 AAA 1.4.6 | Meets 1.76 to spare |
chrome.bar-textonchrome.bar | #FFFFFF on #0c5449 | 8.82:1 | 7:1 AAA 1.4.6 | Meets 1.82 to spare |
border.strongonsurface.raisedinputs sit on cards and popovers too, not only on the page | #a1a1aa on #1F322E | 5.27:1 | 3:1 1.4.11 non-text | Meets 2.27 to spare |
status.nonproduction-ononstatus.nonproduction | #0A1916 on #F5A3B8 | 9.29:1 | 7:1 AAA 1.4.6 | Meets 2.29 to spare |
status.dangeronsurface.base | #FFB4AB on #142521 | 9.39:1 | 7:1 AAA 1.4.6 | Meets 2.39 to spare |
status.info-ononstatus.info | #0A1916 on #8CC8E8 | 9.91:1 | 7:1 AAA 1.4.6 | Meets 2.91 to spare |
The gold
PMS 1225c sits at 1.5:1 against white, so it is never a text color on a light surface and never the foreground of a control. The foreground on gold is always ink. That is declared on the token, which is why a component cannot quietly get it wrong.
Color
The primitive layer. These match waynestate/base-site stop for stop, so green-400 means the same thing to a C&IT developer as it does to a marketing developer. Components must never reference a ramp value directly. The CSS build fails if one does.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-green-25 | #F2F7F6 | color.green.25 |
--wsu-green-50 | #cedddb | color.green.50 |
--wsu-green-100 | #9ebbb6 | color.green.100 |
--wsu-green-200 | #6d9892 | color.green.200 |
--wsu-green-300 | #3d766d | color.green.300 |
--wsu-green-400 | #0c5449 | color.green.400 |
--wsu-green-500 | #0b4a40 | color.green.500 |
--wsu-green-600 | #094038 | color.green.600 |
--wsu-green-700 | #08352f | color.green.700 |
--wsu-green-800 | #062b27 | color.green.800 |
--wsu-green-900 | #05211e | color.green.900 |
--wsu-gold-50 | #fff5d6 | color.gold.50 |
--wsu-gold-100 | #ffebad | color.gold.100 |
--wsu-gold-200 | #ffe085 | color.gold.200 |
--wsu-gold-300 | #ffd65c | color.gold.300 |
--wsu-gold-400 | #ffcc33 | color.gold.400 |
--wsu-gold-500 | #edbd2c | color.gold.500 |
--wsu-gold-600 | #dbae25 | color.gold.600 |
--wsu-gold-700 | #c89f1f | color.gold.700 |
--wsu-gold-800 | #b69018 | color.gold.800 |
--wsu-gold-900 | #a48111 | color.gold.900 |
--wsu-gold-950 | #634D00 | color.gold.950 |
--wsu-neutral-50 | #fafafa | color.neutral.50 |
--wsu-neutral-100 | #f4f4f5 | color.neutral.100 |
--wsu-neutral-200 | #e4e4e7 | color.neutral.200 |
--wsu-neutral-300 | #d4d4d8 | color.neutral.300 |
--wsu-neutral-400 | #a1a1aa | color.neutral.400 |
--wsu-neutral-500 | #71717a | color.neutral.500 |
--wsu-neutral-600 | #52525b | color.neutral.600 |
--wsu-neutral-700 | #3f3f46 | color.neutral.700 |
--wsu-neutral-800 | #27272a | color.neutral.800 |
--wsu-neutral-900 | #18181b | color.neutral.900 |
--wsu-neutral-950 | #09090b | color.neutral.950 |
--wsu-ink-700 | #314842 | color.ink.700 |
--wsu-ink-800 | #1F322E | color.ink.800 |
--wsu-ink-900 | #142521 | color.ink.900 |
--wsu-ink-950 | #0A1916 | color.ink.950 |
--wsu-ink-975 | #050D0B | color.ink.975 |
--wsu-white | #FFFFFF | color.white |
--wsu-black | #09090b | color.black |
--wsu-functional-danger-dark | #9B1C2E | color.functional.danger.dark |
--wsu-functional-danger-light | #FFB4AB | color.functional.danger.light |
--wsu-functional-success-dark | #0F5132 | color.functional.success.dark |
--wsu-functional-success-light | #8FE0AE | color.functional.success.light |
--wsu-functional-warning-dark | #634D00 | color.functional.warning.dark |
--wsu-functional-warning-light | #FFD65C | color.functional.warning.light |
--wsu-functional-info-dark | #0E5A7D | color.functional.info.dark |
--wsu-functional-info-light | #8CC8E8 | color.functional.info.light |
--wsu-functional-nonproduction-dark | #8B2145 | color.functional.nonproduction.dark |
--wsu-functional-nonproduction-light | #F5A3B8 | color.functional.nonproduction.light |
The layer components are allowed to use. Every name says what the color is for rather than what it looks like, which is what makes one component set work in two themes.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-surface | #FFFFFF | semantic.light.surface.basepoints at color.white |
--wsu-surface-sunken | #fafafa | semantic.light.surface.sunkenpoints at color.neutral.50 |
--wsu-surface-raised | #FFFFFF | semantic.light.surface.raisedpoints at color.white |
--wsu-surface-overlay | #FFFFFF | semantic.light.surface.overlaypoints at color.white |
--wsu-surface-inverse | #18181b | semantic.light.surface.inversepoints at color.neutral.900 |
--wsu-text | #18181b | semantic.light.text.basepoints at color.neutral.900 |
--wsu-text-muted | #3f3f46 | semantic.light.text.mutedpoints at color.neutral.700 |
--wsu-text-subtle | #71717a | semantic.light.text.subtlepoints at color.neutral.500 |
--wsu-text-on-inverse | #f4f4f5 | semantic.light.text.on-inversepoints at color.neutral.100 |
--wsu-brand | #0c5449 | semantic.light.brand.basepoints at color.green.400 |
--wsu-brand-hover | #0b4a40 | semantic.light.brand.hoverpoints at color.green.500 |
--wsu-brand-active | #094038 | semantic.light.brand.activepoints at color.green.600 |
--wsu-brand-subtle | #F2F7F6 | semantic.light.brand.subtlepoints at color.green.25 |
--wsu-on-brand | #FFFFFF | semantic.light.brand.onpoints at color.white |
--wsu-accent | #ffcc33 | semantic.light.accent.basepoints at color.gold.400 |
--wsu-accent-subtle | #ffebad | semantic.light.accent.subtlepoints at color.gold.100 |
--wsu-on-accent | #09090b | semantic.light.accent.onpoints at color.neutral.950 |
--wsu-border | #d4d4d8 | semantic.light.border.basepoints at color.neutral.300 |
--wsu-border-strong | #71717a | semantic.light.border.strongpoints at color.neutral.500 |
--wsu-border-brand | #0c5449 | semantic.light.border.brandpoints at color.green.400 |
--wsu-focus-ring | #0c5449 | semantic.light.focus.ringpoints at color.green.400 |
--wsu-focus-offset | #FFFFFF | semantic.light.focus.offsetpoints at color.white |
--wsu-chrome-masthead | #094038 | semantic.light.chrome.mastheadpoints at color.green.600 |
--wsu-chrome-masthead-text | #FFFFFF | semantic.light.chrome.masthead-textpoints at color.white |
--wsu-chrome-masthead-muted | #F2F7F6 | semantic.light.chrome.masthead-mutedpoints at color.green.25 |
--wsu-chrome-bar | #0c5449 | semantic.light.chrome.barpoints at color.green.400 |
--wsu-chrome-bar-hover | #0b4a40 | semantic.light.chrome.bar-hoverpoints at color.green.500 |
--wsu-chrome-bar-text | #FFFFFF | semantic.light.chrome.bar-textpoints at color.white |
--wsu-chrome-bar-muted | #F2F7F6 | semantic.light.chrome.bar-mutedpoints at color.green.25 |
--wsu-chrome-on-chrome-focus | #ffd65c | semantic.light.chrome.on-chrome-focuspoints at color.gold.300 |
--wsu-chrome-mark | #0c5449 | semantic.light.chrome.markpoints at color.green.400 |
--wsu-mockup-device | #09090b | semantic.light.mockup.devicepoints at color.black |
--wsu-mockup-bezel | #71717a | semantic.light.mockup.bezelpoints at color.neutral.500 |
--wsu-mockup-panel | #050D0B | semantic.light.mockup.panelpoints at color.ink.975 |
--wsu-mockup-screen | #18181b | semantic.light.mockup.screenpoints at color.neutral.900 |
--wsu-on-mockup | #f4f4f5 | semantic.light.mockup.onpoints at color.neutral.100 |
--wsu-danger | #9B1C2E | semantic.light.status.dangerpoints at color.functional.danger.dark |
--wsu-on-danger | #FFFFFF | semantic.light.status.danger-onpoints at color.white |
--wsu-success | #0F5132 | semantic.light.status.successpoints at color.functional.success.dark |
--wsu-on-success | #FFFFFF | semantic.light.status.success-onpoints at color.white |
--wsu-warning | #634D00 | semantic.light.status.warningpoints at color.functional.warning.dark |
--wsu-on-warning | #FFFFFF | semantic.light.status.warning-onpoints at color.white |
--wsu-info | #0E5A7D | semantic.light.status.infopoints at color.functional.info.dark |
--wsu-on-info | #FFFFFF | semantic.light.status.info-onpoints at color.white |
--wsu-nonproduction | #8B2145 | semantic.light.status.nonproductionpoints at color.functional.nonproduction.dark |
--wsu-on-nonproduction | #FFFFFF | semantic.light.status.nonproduction-onpoints at color.white |
The same names, resolved against the dark surfaces. A component that uses the semantic layer needs no dark-mode branch of its own.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-surface | #142521 | semantic.dark.surface.basepoints at color.ink.900 |
--wsu-surface-sunken | #0A1916 | semantic.dark.surface.sunkenpoints at color.ink.950 |
--wsu-surface-raised | #1F322E | semantic.dark.surface.raisedpoints at color.ink.800 |
--wsu-surface-overlay | #1F322E | semantic.dark.surface.overlaypoints at color.ink.800 |
--wsu-surface-inverse | #f4f4f5 | semantic.dark.surface.inversepoints at color.neutral.100 |
--wsu-text | #f4f4f5 | semantic.dark.text.basepoints at color.neutral.100 |
--wsu-text-muted | #d4d4d8 | semantic.dark.text.mutedpoints at color.neutral.300 |
--wsu-text-subtle | #a1a1aa | semantic.dark.text.subtlepoints at color.neutral.400 |
--wsu-text-on-inverse | #142521 | semantic.dark.text.on-inversepoints at color.ink.900 |
--wsu-brand | #cedddb | semantic.dark.brand.basepoints at color.green.50 |
--wsu-brand-hover | #F2F7F6 | semantic.dark.brand.hoverpoints at color.green.25 |
--wsu-brand-active | #FFFFFF | semantic.dark.brand.activepoints at color.white |
--wsu-brand-subtle | #062b27 | semantic.dark.brand.subtlepoints at color.green.800 |
--wsu-on-brand | #0A1916 | semantic.dark.brand.onpoints at color.ink.950 |
--wsu-accent | #ffd65c | semantic.dark.accent.basepoints at color.gold.300 |
--wsu-accent-subtle | #a48111 | semantic.dark.accent.subtlepoints at color.gold.900 |
--wsu-on-accent | #0A1916 | semantic.dark.accent.onpoints at color.ink.950 |
--wsu-border | #314842 | semantic.dark.border.basepoints at color.ink.700 |
--wsu-border-strong | #a1a1aa | semantic.dark.border.strongpoints at color.neutral.400 |
--wsu-border-brand | #cedddb | semantic.dark.border.brandpoints at color.green.50 |
--wsu-focus-ring | #ffd65c | semantic.dark.focus.ringpoints at color.gold.300 |
--wsu-focus-offset | #09090b | semantic.dark.focus.offsetpoints at color.neutral.950 |
--wsu-chrome-masthead | #094038 | semantic.dark.chrome.mastheadpoints at color.green.600 |
--wsu-chrome-masthead-text | #FFFFFF | semantic.dark.chrome.masthead-textpoints at color.white |
--wsu-chrome-masthead-muted | #F2F7F6 | semantic.dark.chrome.masthead-mutedpoints at color.green.25 |
--wsu-chrome-bar | #0c5449 | semantic.dark.chrome.barpoints at color.green.400 |
--wsu-chrome-bar-hover | #0b4a40 | semantic.dark.chrome.bar-hoverpoints at color.green.500 |
--wsu-chrome-bar-text | #FFFFFF | semantic.dark.chrome.bar-textpoints at color.white |
--wsu-chrome-bar-muted | #F2F7F6 | semantic.dark.chrome.bar-mutedpoints at color.green.25 |
--wsu-chrome-on-chrome-focus | #ffd65c | semantic.dark.chrome.on-chrome-focuspoints at color.gold.300 |
--wsu-chrome-mark | #FFFFFF | semantic.dark.chrome.markpoints at color.white |
--wsu-mockup-device | #09090b | semantic.dark.mockup.devicepoints at color.black |
--wsu-mockup-bezel | #71717a | semantic.dark.mockup.bezelpoints at color.neutral.500 |
--wsu-mockup-panel | #050D0B | semantic.dark.mockup.panelpoints at color.ink.975 |
--wsu-mockup-screen | #18181b | semantic.dark.mockup.screenpoints at color.neutral.900 |
--wsu-on-mockup | #f4f4f5 | semantic.dark.mockup.onpoints at color.neutral.100 |
--wsu-danger | #FFB4AB | semantic.dark.status.dangerpoints at color.functional.danger.light |
--wsu-on-danger | #0A1916 | semantic.dark.status.danger-onpoints at color.ink.950 |
--wsu-success | #8FE0AE | semantic.dark.status.successpoints at color.functional.success.light |
--wsu-on-success | #0A1916 | semantic.dark.status.success-onpoints at color.ink.950 |
--wsu-warning | #FFD65C | semantic.dark.status.warningpoints at color.functional.warning.light |
--wsu-on-warning | #0A1916 | semantic.dark.status.warning-onpoints at color.ink.950 |
--wsu-info | #8CC8E8 | semantic.dark.status.infopoints at color.functional.info.light |
--wsu-on-info | #0A1916 | semantic.dark.status.info-onpoints at color.ink.950 |
--wsu-nonproduction | #F5A3B8 | semantic.dark.status.nonproductionpoints at color.functional.nonproduction.light |
--wsu-on-nonproduction | #0A1916 | semantic.dark.status.nonproduction-onpoints at color.ink.950 |
Layout
A 4px scale. Use these rather than arbitrary lengths so gaps line up across components.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-space-0 | 0rem | space.0 |
--wsu-space-1 | 0.25rem | space.1 |
--wsu-space-2 | 0.5rem | space.2 |
--wsu-space-3 | 0.75rem | space.3 |
--wsu-space-4 | 1rem | space.4 |
--wsu-space-5 | 1.25rem | space.5 |
--wsu-space-6 | 1.5rem | space.6 |
--wsu-space-8 | 2rem | space.8 |
--wsu-space-10 | 2.5rem | space.10 |
--wsu-space-12 | 3rem | space.12 |
--wsu-space-16 | 4rem | space.16 |
--wsu-space-20 | 5rem | space.20 |
--wsu-space-24 | 6rem | space.24 |
--wsu-space-px | 0.0625rem | space.px |
Three named roles rather than a size scale: field, box and selector. daisyUI reads the same three names, so its controls round the way ours do.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-radius-none | 0rem | radius.none |
--wsu-radius-sm | 0.25rem | radius.sm |
--wsu-radius-field | 0.375rem | radius.field |
--wsu-radius-box | 0.75rem | radius.box |
--wsu-radius-selector | 0.5rem | radius.selector |
--wsu-radius-full | 9999rem | radius.full |
Layout and control dimensions. size.tap-min is 44px, which is WCAG 2.2 Target Size (AAA, 2.5.5); size.tap-compact is the 24px AA floor (2.5.8) for controls in a dense table.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-size-tap-min | 2.75rem | size.tap-min |
--wsu-size-tap-compact | 2.25rem | size.tap-compact |
--wsu-size-focus-ring-width | 0.1875rem | size.focus-ring-width |
--wsu-size-focus-ring-offset | 0.125rem | size.focus-ring-offset |
--wsu-size-border-width | 0.0625rem | size.border-width |
--wsu-size-border-width-strong | 0.125rem | size.border-width-strong |
--wsu-size-content-max | 75rem | size.content-max |
--wsu-size-gutter | 0.9375rem | size.gutter |
--wsu-size-prose-max | 42rem | size.prose-max |
--wsu-size-sidebar | 17rem | size.sidebar |
--wsu-size-sidebar-collapsed | 4rem | size.sidebar-collapsed |
Matching Tailwind, so a utility class and a WayneUI component break at the same width.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-bp-xs | 20rem | breakpoint.xs |
--wsu-bp-sm | 40rem | breakpoint.sm |
--wsu-bp-md | 48rem | breakpoint.md |
--wsu-bp-lg | 64rem | breakpoint.lg |
--wsu-bp-xl | 80rem | breakpoint.xl |
Named layers, so an overlay that must sit above the drawer says so instead of guessing a number.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-z-base | 0 | z.base |
--wsu-z-sticky | 100 | z.sticky |
--wsu-z-drawer | 200 | z.drawer |
--wsu-z-overlay | 300 | z.overlay |
--wsu-z-toast | 400 | z.toast |
--wsu-z-skip-link | 500 | z.skip-link |
Type, depth and motion
Stratium is the university display face, with Lato as the first fallback and a self-hosted Lato Fallback metric-matched to it so the swap does not reflow the page.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-font-family-display | Stratium 1, Lato, Lato Fallback, Calibri, Helvetica Neue, Arial, sans-serif | font.family.display |
--wsu-font-family-body | Lato, Lato Fallback, Calibri, Helvetica Neue, Arial, sans-serif | font.family.body |
--wsu-font-family-mono | ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace | font.family.mono |
--wsu-font-weight-light | 300 | font.weight.light |
--wsu-font-weight-regular | 400 | font.weight.regular |
--wsu-font-weight-bold | 700 | font.weight.bold |
--wsu-font-weight-black | 900 | font.weight.black |
--wsu-font-size-xs | 0.75rem | font.size.xs |
--wsu-font-size-sm | 0.875rem | font.size.sm |
--wsu-font-size-base | 1rem | font.size.base |
--wsu-font-size-lg | 1.125rem | font.size.lg |
--wsu-font-size-xl | 1.25rem | font.size.xl |
--wsu-font-size-2xl | 1.5rem | font.size.2xl |
--wsu-font-size-3xl | 1.875rem | font.size.3xl |
--wsu-font-size-4xl | 2.25rem | font.size.4xl |
--wsu-font-size-5xl | 3rem | font.size.5xl |
--wsu-font-lineHeight-tight | 1.2 | font.lineHeight.tight |
--wsu-font-lineHeight-snug | 1.35 | font.lineHeight.snug |
--wsu-font-lineHeight-base | 1.5 | font.lineHeight.base |
--wsu-font-lineHeight-relaxed | 1.75 | font.lineHeight.relaxed |
--wsu-font-letterSpacing-tight | -0.015em | font.letterSpacing.tight |
--wsu-font-letterSpacing-normal | 0em | font.letterSpacing.normal |
--wsu-font-letterSpacing-wide | 0.025em | font.letterSpacing.wide |
--wsu-font-letterSpacing-caps | 0.06em | font.letterSpacing.caps |
Elevation. Depth is never the only signal for a state, because a shadow is invisible in forced colors.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-shadow-none | none | shadow.none |
--wsu-shadow-sm | 0 1px 2px 0 rgb(16 18 18 / 0.06) | shadow.sm |
--wsu-shadow-md | 0 2px 4px -1px rgb(16 18 18 / 0.08), 0 1px 2px -1px rgb(16 18 18 / 0.06) | shadow.md |
--wsu-shadow-lg | 0 8px 16px -4px rgb(16 18 18 / 0.10), 0 2px 4px -2px rgb(16 18 18 / 0.06) | shadow.lg |
--wsu-shadow-overlay | 0 16px 40px -8px rgb(16 18 18 / 0.24) | shadow.overlay |
Two working durations: fast for hovers, presses and small reveals, base for anything entering or leaving. prefers-reduced-motion collapses both globally in base.css, which only works because no component invents its own timing.
| CSS custom property | Value | Token |
|---|---|---|
--wsu-duration-instant | 0ms | duration.instant |
--wsu-duration-fast | 120ms | duration.fast |
--wsu-duration-base | 200ms | duration.base |
--wsu-duration-slow | 320ms | duration.slow |
Consuming them
pnpm add @waynestate/wayne-ui-tokensimport tokens from '@waynestate/wayne-ui-tokens'
import { contrastRatio, WCAG } from '@waynestate/wayne-ui-tokens/contrast'@import "@waynestate/wayne-ui-tokens/css";@use "@waynestate/wayne-ui-tokens/scss";@waynestate/wayne-ui-tokens/json is the manifest this page is built from, including the contrast declarations. If you are writing a color check of your own, use the exported contrastRatio rather than reimplementing the maths: the token tests, the component tests, this site and your application then all compute it the same way instead of each being slightly wrong in a different direction.
You almost never need the tokens package directly. wayne-ui.css already contains the whole token layer, unlayered, so var(--wsu-brand) works in any stylesheet loaded after it.