Slate

Themes
light
dark

Cool neutrals of the slate scale, an indigo accent and contrast tuned to AA in both modes.

Values come from the @feugene/granularity-tokens package

On this page

Specimen
What it is for
Rules of use
Modes
Pairs on the root
Roles

The theme is named after the scale it is built on (--gr-slate-*), and in the config ({ theme: 'slate' }) it never meets the tone tone="slate".

Specimen

Role	Light	Dark
`--gr-bg`	`#f8fafc`	`#0f172a`
`--gr-card`	`#ffffff`	`#1e293b`
`--gr-fg`	`#0f172a`	`#f8fafc`
`--gr-muted-fg`	`#556275`	`#aab6c7`
`--gr-primary`	`#4f46e5`	`#9d8bfa`
`--gr-accent`	`#eef2ff`	`#1e1b4b`

The same markup in an island of each mode: the only difference is the pair on the subtree.

What it is for

The base theme of the design system: product interfaces, admin panels, tools — dense screens where a table, a form, an alert and a row of buttons stand side by side. Components are released and shown in the docs with it, and the package keeps its values complete for every component. Another theme starts from it by inheritance (extends, a variation that follows its edits) or by a copy (theme:copy, a language of its own).

Rules of use

Text colour comes from the -text role, not from the tone: a saturated tone fails AA in at least one mode (the toneContrast gate).
A button-weight fill is -solid with its own -solid-fg: buttons of every tone look like one family.
The border of a toggleable control is --gr-control-brd, not --gr-brd: only it holds 3:1 against the page, the card and --gr-muted.
A validation error takes the --gr-invalid-* roles, not the danger tone: by default they reference danger, but a theme may tell the two messages apart.

Modes

Mode	Purpose
`light`	the default mode: light surfaces, a bluish translucent shadow reads softer than a black one
`dark`	light tone fills under dark text; the shadow is blacker and denser, and so is the backdrop of modal layers — otherwise a raised surface does not separate from the background

Pairs on the root

The user's choice stores the mode name, and the root gets the pair of the theme and the mode. Nobody writes the pair by hand: the build's manifest provides it.

Identifier: slate

Mode	Scheme	Pair on the root
`light` · default	`light`	`data-theme="slate-light"`
`dark`	`dark`	`data-theme="slate-dark"`

Roles

This is the theme the portal is built with, and its roles with their contrast are on the Color page of the foundations. Roles and contrast