@waynestate/wayne-ui-tokens

Wayne State University's brand color, type, spacing and motion, as design tokens rather than hex values copied between projects.

This is part of Wayne UI, the design system for Wayne State C&IT and DSOE internal applications. If you are building for the public web, you want waynestate/base-site, not this.

Contrast is declared on the tokens, not hoped for

Colors are the Wayne State Identity Style Guide's, but each token that participates in a text or UI contrast requirement carries the requirement inline, under $extensions['wsu.contrast']: which token it is measured against, and the ratio it has to clear. For example, the default body text token declares a minimum of 7:1 against the default surface, AAA rather than merely AA, because body copy is what most of a page is.

That declaration is not decoration. The package's test suite reads every one of them, computes the real WCAG contrast ratio between the two tokens as built, and fails if any pairing misses its own stated minimum. A color change that quietly drops a pairing below what it promises does not ship; it fails pnpm --filter @waynestate/wayne-ui-tokens test. Copying a hex value out of a screenshot gives you none of that. This package gives you a value that has already been checked against the thing it sits next to, and stays checked every time either one changes.

The measured pairings ship too, so a consuming application can run the same check against its own combinations rather than trusting that a value looking right is a value that is right. contrastRatio() from the ./contrast export is the exact function the build itself uses, so an application computes contrast the same way rather than reimplementing WCAG's luminance maths slightly wrong.

Install

pnpm add @waynestate/wayne-ui-tokens

Use

The tokens come out in whatever format your build wants:

import tokens from '@waynestate/wayne-ui-tokens'
// { "green-400": "#0c5449", "gold-400": "#ffcc33", ... }

@import "@waynestate/wayne-ui-tokens/css";
/* --wsu-green-400: #0c5449; ... */

@import "@waynestate/wayne-ui-tokens/scss";
// $wsu-green-400: #0c5449;

The ./json export is the same tokens plus the measured contrastPairs, for anything that wants to inspect or re-verify the contrast data directly rather than trust the CSS or JS output. The ./contrast export is the WCAG contrast functions themselves, parseHex, luminance and contrastRatio, with no dependency on the rest of the package.

Most applications will not reach for this package directly. @waynestate/wayne-ui-css depends on it and re-exports the tokens as the CSS custom properties every Wayne UI component reads. Reach for this package on its own when you need the raw values, the contrast data, or the maths, in something other than CSS.

Documentation

Full token reference, including every ramp and every declared contrast pairing: https://wayneui.apps.wayne.edu/docs/