Design Tokens

Every token is a CSS custom property. They are defined on :root (and also on .cr-theme for scoped usage) by chromium-ui-react/styles.css.

Google color palette

Full palette: blue, green, grey, red, yellow (50–900), purple/pink/cyan (100/500/900).

Token	Use
`--cr-fallback-color-primary`	Primary brand color (buttons, links, checked states)
`--cr-fallback-color-on-primary`	Foreground on primary surfaces
`--cr-fallback-color-surface`	Default page/card background
`--cr-fallback-color-surface-1`	Subtle tinted background
`--cr-fallback-color-surface-variant`	Borders, disabled backgrounds
`--cr-fallback-color-on-surface`	Primary text color
`--cr-fallback-color-on-surface-subtle`	Secondary text color
`--cr-fallback-color-outline`	Default border color
`--cr-fallback-color-error`	Error/destructive color
`--cr-fallback-color-disabled-background`	Disabled element background
`--cr-fallback-color-disabled-foreground`	Disabled element text

Token	Value
`--cr-hover-background-color`	6% overlay on current `on-surface`
`--cr-active-background-color`	10% overlay on current `on-surface`
`--cr-focus-outline-color`	`--cr-fallback-color-primary`

Token	Value
`--cr-font-family`	`Roboto, 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif`
`--cr-font-family-mono`	`'Roboto Mono', 'Courier New', Courier, monospace`
`--cr-font-size-xs`	`11px`
`--cr-font-size-sm`	`12px`
`--cr-font-size-md`	`13px` (Chromium default body)
`--cr-font-size-base`	`14px`
`--cr-font-size-lg`	`16px`
`--cr-font-size-xl`	`20px`
`--cr-font-size-2xl`	`24px`
`--cr-font-weight-regular`	`400`
`--cr-font-weight-medium`	`500`
`--cr-font-weight-bold`	`700`

Token	Value
`--cr-transition-duration`	`80ms` (Chromium-standard) — `0ms` if `prefers-reduced-motion: reduce`

To opt out of prefers-color-scheme and force a theme:

<div data-cr-theme="dark">...</div>