Theming

silver-ui uses CSS custom properties (variables) prefixed with --silver- for all visual tokens. Override any variable at :root to change the default theme, or scope overrides to a container for branded areas.

All library styles use CSS @layer, so your custom CSS always takes precedence without specificity battles.

Quick start

Use the <Theme> component for app-wide or scoped theme overrides. It maps friendly token names to the Silver CSS variables used by every component.

import {Button, Theme} from 'silver-ui';

export function App() {
  return (
    <Theme
      mode="light"
      tokens={{
        colors: {
          primary: 'teal-500',
          primaryHover: 'teal-600',
          primaryActive: 'teal-700',
          primarySubtle: 'teal-100',
        },
        fonts: {
          body: 'Inter, system-ui, sans-serif',
        },
        radii: {
          componentMd: '0.5rem',
        },
      }}>
      <Button label="Save" />
    </Theme>
  );
}

Palette references can use either teal-500 or teal.500 syntax. Custom CSS values like #225bff, oklch(...), or var(...) are also supported.

Dark mode

Dark-mode tokens activate under [data-theme="dark"] or @media (prefers-color-scheme: dark). Set data-theme="dark" on a parent element and override dark values there:

[data-theme='dark'] {
  --silver-colors-primary: #93c5fd;
  --silver-colors-bg: #0f172a;
  --silver-colors-fg: #f8fafc;
}

Scoped themes

<Theme> scopes token overrides to its subtree, so multiple themed areas can coexist on the same page.

<Theme
  tokens={{
    colors: {
      bg: '#ffffff',
      bgSubtle: 'gray-50',
      primary: 'purple-500',
    },
  }}>
  <Button label="Themed action" />
</Theme>

CSS variable escape hatch

For non-React surfaces or global CSS, set the underlying custom properties directly. These are the same variables generated by <Theme>.

:root {
  --silver-colors-primary: var(--silver-colors-teal-500);
  --silver-colors-primary-hover: var(--silver-colors-teal-600);
  --silver-colors-primary-active: var(--silver-colors-teal-700);
  --silver-radii-component-md: 0.5rem;
  --silver-fonts-body: Inter, system-ui, sans-serif;
}

CSS variables can also be scoped to any container:

<div
  style={{
    '--silver-colors-primary': 'var(--silver-colors-purple-500)',
  }}>
  <Button label="Save" />
</div>

Per-instance overrides

Every component accepts className and style props:

<Button
  className="danger-action"
  label="Delete"
  style={{'--silver-radii-component-md': '9999px'}}
/>

---

CSS variable reference

All variables below are emitted by the Panda CSS build. The authoritative source is panda.config.ts. Variables marked with light/dark values respond automatically to theme mode.

Base color scales

These are the raw color palettes that semantic tokens reference. Override semantic tokens (below) rather than these unless you need to change the entire palette.

Each scale has steps 50 through 900.

gray

Variable	Name	Value
--silver-colors-gray-50	gray-50	#f1f4f7
--silver-colors-gray-100	gray-100	#d5d9de
--silver-colors-gray-200	gray-200	#b1bac3
--silver-colors-gray-300	gray-300	#8a97a4
--silver-colors-gray-400	gray-400	#708090
--silver-colors-gray-500	gray-500	#6a7b8c
--silver-colors-gray-600	gray-600	#576573
--silver-colors-gray-700	gray-700	#45505b
--silver-colors-gray-800	gray-800	#333b43
--silver-colors-gray-900	gray-900	#22272d

blue

Variable	Name	Value
--silver-colors-blue-50	blue-50	#dae9fd
--silver-colors-blue-100	blue-100	#bad6fb
--silver-colors-blue-200	blue-200	#87b8f9
--silver-colors-blue-300	blue-300	#5b9ef6
--silver-colors-blue-400	blue-400	#3487f4
--silver-colors-blue-500	blue-500	#4a98ff
--silver-colors-blue-600	blue-600	#0f76ff
--silver-colors-blue-700	blue-700	#005cd6
--silver-colors-blue-800	blue-800	#00449e
--silver-colors-blue-900	blue-900	#002d69

cyan

Variable	Name	Value
--silver-colors-cyan-50	cyan-50	#dff2f8
--silver-colors-cyan-100	cyan-100	#c3e7f1
--silver-colors-cyan-200	cyan-200	#92d3e6
--silver-colors-cyan-300	cyan-300	#60bfdb
--silver-colors-cyan-400	cyan-400	#48b5d5
--silver-colors-cyan-500	cyan-500	#40b9dd
--silver-colors-cyan-600	cyan-600	#23a1c6
--silver-colors-cyan-700	cyan-700	#1c809d
--silver-colors-cyan-800	cyan-800	#155e74
--silver-colors-cyan-900	cyan-900	#0e3f4d

green

Variable	Name	Value
--silver-colors-green-50	green-50	#e0f6e2
--silver-colors-green-100	green-100	#c4eec8
--silver-colors-green-200	green-200	#91e098
--silver-colors-green-300	green-300	#54cf60
--silver-colors-green-400	green-400	#33b33f
--silver-colors-green-500	green-500	#26a332
--silver-colors-green-600	green-600	#1f8629
--silver-colors-green-700	green-700	#196a21
--silver-colors-green-800	green-800	#124e18
--silver-colors-green-900	green-900	#0c3410

orange

Variable	Name	Value
--silver-colors-orange-50	orange-50	#fdeada
--silver-colors-orange-100	orange-100	#fbd7b8
--silver-colors-orange-200	orange-200	#f7b57c
--silver-colors-orange-300	orange-300	#f38e38
--silver-colors-orange-400	orange-400	#eb740e
--silver-colors-orange-500	orange-500	#eb6d02
--silver-colors-orange-600	orange-600	#c15902
--silver-colors-orange-700	orange-700	#994701
--silver-colors-orange-800	orange-800	#713401
--silver-colors-orange-900	orange-900	#4b2301

pink

Variable	Name	Value
--silver-colors-pink-50	pink-50	#f7e0ef
--silver-colors-pink-100	pink-100	#efc5e0
--silver-colors-pink-200	pink-200	#e397c8
--silver-colors-pink-300	pink-300	#d76ab0
--silver-colors-pink-400	pink-400	#d256a5
--silver-colors-pink-500	pink-500	#d951a8
--silver-colors-pink-600	pink-600	#c92c90
--silver-colors-pink-700	pink-700	#9f2372
--silver-colors-pink-800	pink-800	#751a54
--silver-colors-pink-900	pink-900	#4e1138

purple

Variable	Name	Value
--silver-colors-purple-50	purple-50	#e2dbfd
--silver-colors-purple-100	purple-100	#c9bbfb
--silver-colors-purple-200	purple-200	#a289f9
--silver-colors-purple-300	purple-300	#8260f7
--silver-colors-purple-400	purple-400	#5f34f4
--silver-colors-purple-500	purple-500	#7952ff
--silver-colors-purple-600	purple-600	#4a15ff
--silver-colors-purple-700	purple-700	#3100db
--silver-colors-purple-800	purple-800	#2400a2
--silver-colors-purple-900	purple-900	#18006c

red

Variable	Name	Value
--silver-colors-red-50	red-50	#fceef0
--silver-colors-red-100	red-100	#f9d1d8
--silver-colors-red-200	red-200	#f1bcc5
--silver-colors-red-300	red-300	#e28d9b
--silver-colors-red-400	red-400	#da4e65
--silver-colors-red-500	red-500	#d92644
--silver-colors-red-600	red-600	#e31a3b
--silver-colors-red-700	red-700	#842e3d
--silver-colors-red-800	red-800	#6b2e38
--silver-colors-red-900	red-900	#562b32

teal

Variable	Name	Value
--silver-colors-teal-50	teal-50	#dff8f7
--silver-colors-teal-100	teal-100	#c0f1ef
--silver-colors-teal-200	teal-200	#8be5e1
--silver-colors-teal-300	teal-300	#4ad7d1
--silver-colors-teal-400	teal-400	#29b9b3
--silver-colors-teal-500	teal-500	#1ca49e
--silver-colors-teal-600	teal-600	#178682
--silver-colors-teal-700	teal-700	#126b67
--silver-colors-teal-800	teal-800	#0d4f4c
--silver-colors-teal-900	teal-900	#093433

yellow

Variable	Name	Value
--silver-colors-yellow-50	yellow-50	#fdf3da
--silver-colors-yellow-100	yellow-100	#fbe7b7
--silver-colors-yellow-200	yellow-200	#f8d47b
--silver-colors-yellow-300	yellow-300	#f4bd37
--silver-colors-yellow-400	yellow-400	#efad0d
--silver-colors-yellow-500	yellow-500	#f0aa00
--silver-colors-yellow-600	yellow-600	#c58b00
--silver-colors-yellow-700	yellow-700	#9c6e00
--silver-colors-yellow-800	yellow-800	#735200
--silver-colors-yellow-900	yellow-900	#4d3600

---

Primary colors

The main brand color used for buttons, links, focus rings, and selected states.

Variable	Light	Dark
--silver-colors-primary	teal-500	teal-500
--silver-colors-primary-hover	teal-600	teal-600
--silver-colors-primary-active	teal-700	teal-700
--silver-colors-primary-subtle	teal-100	teal-900

Destructive colors

Used for destructive actions (delete buttons, error confirmations).

Variable	Light	Dark
--silver-colors-destructive	red-600	red-500
--silver-colors-destructive-hover	red-700	red-400
--silver-colors-destructive-active	red-800	red-300
--silver-colors-destructive-fg	#fff	#fff

Foreground colors

Text and icon colors.

Variable	Light	Dark
--silver-colors-fg	gray-900	gray-50
--silver-colors-fg-muted	gray-600	gray-200
--silver-colors-fg-disabled	gray-200	gray-600
--silver-colors-fg-on-primary	#fff	#fff

Background colors

Surface and container backgrounds.

Variable	Light	Dark
--silver-colors-bg	#ffffff	gray-900
--silver-colors-bg-subtle	gray-50	gray-800
--silver-colors-bg-hover	gray-50	gray-900
--silver-colors-bg-selected	teal-100	teal-900
--silver-colors-bg-ghost-hover	rgba(0,0,0,0.06)	rgba(255,255,255,0.08)
--silver-colors-bg-ghost-active	rgba(0,0,0,0.1)	rgba(255,255,255,0.12)

Border colors

Variable	Light	Dark
--silver-colors-border	gray-100	gray-900
--silver-colors-border-emphasized	gray-100	gray-700

Track colors

Slider tracks, progress bars, and similar range indicators.

Variable	Light	Dark
--silver-colors-track	gray-100	gray-700
--silver-colors-track-emphasized	gray-300	gray-600
--silver-colors-track-disabled	gray-300	gray-700

Overlay colors

Backdrops for modals, drawers, and dialogs.

Variable	Value
--silver-colors-overlay-scrim	rgba(0,0,0,0.45)
--silver-colors-overlay-scrim-subtle	rgba(0,0,0,0.35)
--silver-colors-overlay-scrim-strong	rgba(0,0,0,0.76)

Skeleton colors

Loading placeholder pulse animation.

Variable	Light	Dark
--silver-colors-skeleton	gray-100	gray-600
--silver-colors-skeleton-shimmer	gray-50	gray-500

Status colors

Used by Alert, Badge, Toast, Stepper, and form validation states.

Variable	Light	Dark
--silver-colors-status-success-fg	green-600	green-600
--silver-colors-status-success-border	green-600	green-400
--silver-colors-status-success-solid	green-600	green-500
--silver-colors-status-success-solid-fg	#fff	#fff
--silver-colors-status-error-fg	red-500	red-500
--silver-colors-status-error-border	red-600	red-400
--silver-colors-status-error-solid	red-600	red-500
--silver-colors-status-error-solid-fg	#fff	#fff
--silver-colors-status-warning-fg	yellow-500	yellow-500
--silver-colors-status-warning-border	yellow-500	yellow-400
--silver-colors-status-warning-solid	yellow-500	yellow-400
--silver-colors-status-warning-solid-fg	#fff	#fff
--silver-colors-status-info-fg	blue-700	blue-700
--silver-colors-status-info-solid	teal-500	teal-500
--silver-colors-status-info-solid-fg	#fff	#fff
--silver-colors-status-neutral-solid	gray-500	gray-400
--silver-colors-status-neutral-solid-fg	#fff	#fff
--silver-colors-status-disabled-solid	gray-400	gray-600
--silver-colors-status-disabled-solid-fg	#fff	#fff

Presence colors

Online/offline/error indicators on avatars.

Variable	Light	Dark
--silver-colors-presence-success	green-500	green-400
--silver-colors-presence-neutral	gray-500	gray-400
--silver-colors-presence-error	red-600	red-400

Surface colors

Tinted background surfaces used by Schedule events, tags, and badges. Each color has four sub-tokens: default (background), fg (text), hover, and accent (dot/indicator).

Variable	Light	Dark
--silver-colors-surface-blue	blue-100	blue-900
--silver-colors-surface-blue-fg	blue-800	blue-100
--silver-colors-surface-blue-hover	blue-200	blue-800
--silver-colors-surface-blue-accent	blue-700	blue-500
--silver-colors-surface-cyan	cyan-100	cyan-900
--silver-colors-surface-cyan-fg	cyan-800	cyan-200
--silver-colors-surface-cyan-hover	cyan-200	cyan-800
--silver-colors-surface-cyan-accent	cyan-600	cyan-700
--silver-colors-surface-gray	gray-50	gray-800
--silver-colors-surface-gray-fg	gray-900	gray-100
--silver-colors-surface-gray-hover	gray-100	gray-700
--silver-colors-surface-gray-accent	gray-600	gray-400
--silver-colors-surface-green	green-100	green-900
--silver-colors-surface-green-fg	green-800	green-200
--silver-colors-surface-green-hover	green-200	green-800
--silver-colors-surface-green-accent	green-600	green-400
--silver-colors-surface-orange	orange-100	orange-900
--silver-colors-surface-orange-fg	orange-800	orange-200
--silver-colors-surface-orange-hover	orange-200	orange-800
--silver-colors-surface-orange-accent	orange-500	orange-700
--silver-colors-surface-pink	pink-100	pink-900
--silver-colors-surface-pink-fg	pink-800	pink-200
--silver-colors-surface-pink-hover	pink-200	pink-800
--silver-colors-surface-pink-accent	pink-500	pink-600
--silver-colors-surface-purple	purple-100	purple-900
--silver-colors-surface-purple-fg	purple-800	purple-200
--silver-colors-surface-purple-hover	purple-200	purple-800
--silver-colors-surface-purple-accent	purple-200	purple-500
--silver-colors-surface-red	red-100	red-900
--silver-colors-surface-red-fg	red-800	red-200
--silver-colors-surface-red-hover	red-200	red-800
--silver-colors-surface-red-accent	red-600	red-400
--silver-colors-surface-teal	teal-100	teal-900
--silver-colors-surface-teal-fg	teal-800	teal-300
--silver-colors-surface-teal-hover	teal-200	teal-800
--silver-colors-surface-teal-accent	teal-500	teal-700
--silver-colors-surface-yellow	yellow-100	yellow-900
--silver-colors-surface-yellow-fg	yellow-800	yellow-400
--silver-colors-surface-yellow-hover	yellow-200	yellow-800
--silver-colors-surface-yellow-accent	yellow-600	yellow-700

Icon colors

Semantic icon color tokens. Components like Icon use these, but they resolve to other semantic tokens so overriding the source token is usually sufficient.

Variable	Light	Dark
--silver-colors-icon-primary	gray-900	gray-50
--silver-colors-icon-secondary	gray-600	gray-400
--silver-colors-icon-tertiary	gray-500	gray-500
--silver-colors-icon-disabled	gray-400	gray-600
--silver-colors-icon-accent	teal-500	teal-500
--silver-colors-icon-success	green-600	green-600
--silver-colors-icon-error	red-500	red-500
--silver-colors-icon-warning	yellow-500	yellow-500
--silver-colors-icon-info	blue-700	blue-700
--silver-colors-icon-blue	blue-700	blue-500
--silver-colors-icon-red	red-600	red-600
--silver-colors-icon-green	green-600	green-600
--silver-colors-icon-gray	gray-600	gray-200
--silver-colors-icon-cyan	cyan-600	cyan-500
--silver-colors-icon-teal	teal-500	teal-500
--silver-colors-icon-yellow	yellow-300	yellow-200
--silver-colors-icon-orange	orange-500	orange-500
--silver-colors-icon-pink	pink-600	pink-500
--silver-colors-icon-purple	purple-700	purple-500

---

Typography

Fonts

Variable	Default
--silver-fonts-body	system-ui, -apple-system, sans-serif
--silver-fonts-mono	ui-monospace, monospace
--silver-fonts-sans	ui-sans-serif, system-ui, sans-serif, ...
--silver-fonts-serif	ui-serif, Georgia, Cambria, ...

Font sizes

Variable	Value
--silver-font-sizes-2xs	0.5rem
--silver-font-sizes-xs	0.75rem
--silver-font-sizes-sm	0.875rem
--silver-font-sizes-md	1rem
--silver-font-sizes-lg	1.125rem
--silver-font-sizes-xl	1.25rem
--silver-font-sizes-2xl	1.5rem
--silver-font-sizes-3xl	1.875rem
--silver-font-sizes-4xl	2.25rem
--silver-font-sizes-5xl	3rem
--silver-font-sizes-6xl	3.75rem
--silver-font-sizes-7xl	4.5rem
--silver-font-sizes-8xl	6rem
--silver-font-sizes-9xl	8rem

Font weights

Variable	Value
--silver-font-weights-thin	100
--silver-font-weights-extralight	200
--silver-font-weights-light	300
--silver-font-weights-normal	400
--silver-font-weights-medium	500
--silver-font-weights-semibold	600
--silver-font-weights-bold	700
--silver-font-weights-extrabold	800
--silver-font-weights-black	900

Line heights

Variable	Value
--silver-line-heights-none	1
--silver-line-heights-tight	1.25
--silver-line-heights-snug	1.375
--silver-line-heights-normal	1.5
--silver-line-heights-relaxed	1.625
--silver-line-heights-loose	2

Letter spacings

Variable	Value
--silver-letter-spacings-tighter	-0.05em
--silver-letter-spacings-tight	-0.025em
--silver-letter-spacings-normal	0em
--silver-letter-spacings-wide	0.025em
--silver-letter-spacings-wider	0.05em
--silver-letter-spacings-widest	0.1em

---

Component sizing

Standardized sizes used across all interactive components (buttons, inputs, selects, etc.). Override these to change the size system globally.

Heights

Variable	Value
--silver-sizes-component-sm	2rem (32px)
--silver-sizes-component-md	2.5rem (40px)
--silver-sizes-component-lg	3rem (48px)

Icon sizes

Variable	Value
--silver-sizes-icon-sm	1rem (16px)
--silver-sizes-icon-md	1.25rem (20px)
--silver-sizes-icon-lg	1.5rem (24px)

Horizontal padding

Variable	Value
--silver-spacing-component-sm	0.75rem (12px)
--silver-spacing-component-md	1rem (16px)
--silver-spacing-component-lg	1.25rem (20px)

Component font sizes

Variable	Value
--silver-font-sizes-component-sm	0.875rem (14px)
--silver-font-sizes-component-md	1rem (16px)
--silver-font-sizes-component-lg	1rem (16px)

---

Border radii

Variable	Value
--silver-radii-xs	0.125rem
--silver-radii-sm	0.25rem
--silver-radii-md	0.375rem
--silver-radii-lg	0.5rem
--silver-radii-xl	0.75rem
--silver-radii-2xl	1rem
--silver-radii-3xl	1.5rem
--silver-radii-full	9999px

Component radii

Variable	Value
--silver-radii-component-sm	0.25rem
--silver-radii-component-md	0.375rem
--silver-radii-component-lg	0.5rem

---

Border widths

Variable	Value
--silver-border-widths-default	1px
--silver-border-widths-emphasized	2px
--silver-border-widths-focus	2px

---

Shadows

Elevation

Variable	Value
--silver-shadows-2xs	0 1px rgb(0 0 0 / 0.05)
--silver-shadows-xs	0 1px 2px 0 rgb(0 0 0 / 0.05)
--silver-shadows-sm	0 1px 3px 0 rgb(0 0 0 / 0.1), ...
--silver-shadows-md	0 4px 6px -1px rgb(0 0 0 / 0.1), ...
--silver-shadows-lg	0 10px 15px -3px rgb(0 0 0 / 0.1), ...
--silver-shadows-xl	0 20px 25px -5px rgb(0 0 0 / 0.1), ...
--silver-shadows-2xl	0 25px 50px -12px rgb(0 0 0 / 0.25)

Focus rings

Variable	Description
--silver-shadows-focus	Primary focus ring (uses primary.subtle)
--silver-shadows-focus-error	Error-state focus ring (uses red.100)
--silver-shadows-focus-warning	Warning-state focus ring (uses yellow.100)
--silver-shadows-focus-success	Success-state focus ring (uses green.100)

---

Focus offset

Controls the gap between a focused element and its focus ring.

Variable	Value
--silver-spacing-focus-offset	2px
--silver-spacing-focus-offset-tight	1px
--silver-spacing-focus-offset-loose	3px

---

Motion

Durations

Variable	Value
--silver-durations-fastest	50ms
--silver-durations-faster	100ms
--silver-durations-fast	150ms
--silver-durations-normal	200ms
--silver-durations-slow	300ms
--silver-durations-slower	400ms
--silver-durations-slowest	500ms

Easings

Variable	Value
--silver-easings-default	cubic-bezier(0.4, 0, 0.2, 1)
--silver-easings-linear	linear
--silver-easings-in	cubic-bezier(0.4, 0, 1, 1)
--silver-easings-out	cubic-bezier(0, 0, 0.2, 1)
--silver-easings-in-out	cubic-bezier(0.4, 0, 0.2, 1)

---

Spacing scale

The full spacing scale used for margins, padding, and gaps. Only custom values from panda.config.ts are listed above in component sizing; the rest follow the default Panda CSS spacing scale (--silver-spacing-0 through --silver-spacing-96).