Modesdata-mode
One attribute does both jobs. On <html> it is dark mode for the whole page; on a Section it is an inverse band. The bridge reads the tokens, so the shadcn tier flips with no inverse variants.
Colour- Modes
- light · dark
- Source
- tokens/themes/jsp/modes/dark.json
- One switch
data-mode="dark" flips every semantic colour inside the element.
- Inverse sections
Section background="inverse" sets it for you – no inverse component variants.
- Checked
Every contrast pair is measured in light and dark by npm run check.
Side by side
The same card in the page's mode and forced dark.
Secondary text in text.subtle.
Secondary text in text.subtle.
Inverse section
Every component, inside Section background=“inverse”.
Button
shadcn tierBadge and Avatar
shadcn tierCard
shadcn tierBody copy inside a card uses --muted-foreground, which is text.subtle.
Form controls
shadcn tierBorder is --input (border.default), focus ring is --ring (focus.ring).
Alert and Tabs
shadcn tierActive tab fill is --background on a --muted list.
Overlays
shadcn tierAccordion, Table and Separator
shadcn tier| Variable | Token |
|---|---|
| --border | color.border.subtle |
| --input | color.border.default |
Text styles
JSP tierThe quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
const bridge = var(--ds-color-surface-page)
SectionHeader, Eyebrow, Stack and Cluster
JSP tierEyebrow
A section heading
A lead paragraph in body.lead and text.subtle, capped at the prose width.
Centred
Everything centres, including actions.
Cluster
wrapsbydefault