Bridge^{styles/bridge.css}

Everything shadcn/ui and Pro Blocks read, pointed at a semantic token. The bridge never holds a value, so shadcn components render in jsp-ds tokens with no edits.

Colour

Variables: 32
Checked by: npm run check

References only
Every line is one var(--ds-*) to a semantic token. The check fails on anything else.
Both modes
Declared on every mode scope, so it re-resolves inside dark and inverse sections.
Measured
Each pairing it creates is contrast-checked against WCAG 2.2 AA.

Pairings

Swatches are live: switch mode at the foot of the side nav to see both tiers flip together.

shadcn variable	jsp-ds token	Status	Note
--background	color.surface.page	exact
--foreground	color.text.default	exact
--card	color.surface.default	exact
--card-foreground	color.text.default	exact
--popover	color.surface.default	gap	token to-do: T-3 surface.overlay – raised surfaces should lighten in dark mode
--popover-foreground	color.text.default	exact
--primary	color.action.primary.background	exact
--primary-foreground	color.action.primary.text	exact
--secondary	color.action.tertiary.background	nearest	D5: shadcn "secondary" is a light fill = action.tertiary
--secondary-foreground	color.action.tertiary.text	exact
--accent	color.action.ghost.background.hover	nearest	shadcn uses accent for hover and highlighted-item fills
--accent-foreground	color.action.ghost.text	exact
--destructive	color.action.destructive.text	exact	radix-vega draws destructive as text on a 10% tint of this (red.700 light, red.400 dark)
--muted	color.surface.muted	exact
--muted-foreground	color.text.subtle	exact
--border	color.border.subtle	exact
--input	color.border.subtle	exact	shadcn's neutral-200, matched exactly (ISS-16) – 1.3:1, under WCAG 1.4.11
--ring	color.focus.ring	exact	shadcn's neutral-400, matched exactly (ISS-16)
--radius	radius.default	exact
--sidebar	color.surface.subtle	exact
--sidebar-foreground	color.text.default	exact
--sidebar-primary	color.action.primary.background	exact
--sidebar-primary-foreground	color.action.primary.text	exact
--sidebar-accent	color.surface.muted	exact
--sidebar-accent-foreground	color.action.ghost.text	exact	shadcn: neutral-900, the same as accent-foreground
--sidebar-border	color.border.subtle	exact
--sidebar-ring	color.focus.ring	exact
--chart-1	color.grey.300	gap
--chart-2	color.grey.500	gap
--chart-3	color.grey.600	gap
--chart-4	color.grey.700	gap
--chart-5	color.grey.800	gap

Contrast

The pairings the bridge creates, measured from the token values by npm run check. Text needs 4.5:1; boundaries and focus rings 3:1.

Pairing	Needs	Light	Dark	What
--foreground on --background	4.5:1	19.80:1 ✓	18.97:1 ✓	Body text on the page
--foreground on --card	4.5:1	19.80:1 ✓	17.18:1 ✓	Text on a card
--muted-foreground on --background	4.5:1	4.74:1 ✓	7.85:1 ✓	Secondary text on the page
--ds-color-text-subtle-on-muted on --muted	4.5:1	7.17:1 ✓	10.21:1 ✓	Secondary text on a muted surface – muted-foreground rebinds to this inside data-background="muted" (ISS-14)
--primary-foreground on --primary	4.5:1	17.18:1 ✓	14.23:1 ✓	Primary button label
--secondary-foreground on --secondary	4.5:1	16.44:1 ✓	14.50:1 ✓	Secondary button label
--accent-foreground on --accent	4.5:1	16.44:1 ✓	14.50:1 ✓	Highlighted menu item
--destructive on --background	4.5:1	6.42:1 ✓	6.85:1 ✓	Destructive text on the page
--sidebar-foreground on --sidebar	4.5:1	18.97:1 ✓	17.18:1 ✓	Sidebar text
--sidebar-accent-foreground on --sidebar-accent	4.5:1	16.44:1 ✓	14.50:1 ✓	Active sidebar item
--input on --background	–	1.26:1	1.31:1	Input boundary – shadcn's value, not enforced (ISS-16)
--ring on --background	–	2.52:1	4.18:1	Focus ring on the page – shadcn's value, not enforced (ISS-16)
--primary on --background	3:1	17.93:1 ✓	15.72:1 ✓	Primary button against the page
--border on --background	–	1.26:1	1.31:1	Decorative divider (no minimum)