Theme Variables

A theme file sets these CSS variables on :root inside @layer sa.theme. Leave out any variable you don't change. The theme builder has a control for each variable below, with the same ranges.

The package ships the same list as stellar-admin.theme-variables.json (at /_content/StellarAdmin.UI/stellar-admin.theme-variables.json), which tools can read for the variables of the installed version.

Essential variablesCopy Anchor Link

Most themes are made from these alone.

Variable	Default	Values	Meaning
--sa-accent	oklch(0.5 0.16 258)	any colour	Brand colour: primary actions, focus, selection, bold highlights.
--sa-neutral-hue	255	0 to 360	Hue the greys lean toward.
--sa-neutral-chroma	0.006	0 to 0.04	How much the greys lean (0 is pure grey).
--sa-radius	6px	0px to 24px, Pill (9999px)	Control corners.
--sa-pills	0	0 or 1	Tags (badges, chips, the switch) are pills instead of following the radius.
--sa-relief	0	0 (Flat), 1 (Raised), 2 (Tactile)	Raised adds a shadow under buttons; tactile also adds a bottom edge, a hover lift, a pressed state and recessed fields.
--sa-elevation	0.7	0 to 3	Shadow strength: 0 flat, 1 soft, 2 or more floating.
--sa-density	1	0.7 to 1.4	Spacing and control sizes, not type: 0.75 dense to 1.25 roomy.
--sa-font-sans	"Inter", ui-sans-serif, system-ui, sans-serif	a font stack; the theme builder offers Inter, Geist, IBM Plex Sans, Figtree, Source Sans 3, Space Grotesk, Lexend, Archivo, System	Body and control font.
--sa-font-heading	var(--sa-font-sans)	a font stack; the theme builder offers Same as body, Fraunces, Space Grotesk, Lexend	Titles.

ColourCopy Anchor Link

Colours accept any CSS colour syntax. The accent's fills and text forms are adjusted for contrast automatically, so any lightness works. Variables that follow another variable are unset by default: set them only when dark mode or text on the accent should differ.

Variable	Default	Values	Meaning
--sa-accent	oklch(0.5 0.16 258)	any colour	Brand colour: primary actions, focus, selection, bold highlights.
--sa-accent-dark	Unset: follows Accent	any colour	The accent in dark mode.
--sa-on-accent	Unset: follows Accent	any colour	Text on accent fills, instead of the automatic black or white.
--sa-danger	oklch(0.58 0.22 27)	any colour	Destructive actions and errors.
--sa-danger-dark	Unset: follows Danger	any colour	The danger colour in dark mode.
--sa-success	oklch(0.6 0.15 150)	any colour	Status colour for success.
--sa-warning	oklch(0.72 0.16 70)	any colour	Status colour for warnings.
--sa-info	oklch(0.6 0.14 240)	any colour	Status colour for information.
--sa-neutral-hue	255	0 to 360	Hue the greys lean toward.
--sa-neutral-chroma	0.006	0 to 0.04	How much the greys lean (0 is pure grey).
--sa-neutral-hue-dark	Unset: follows Neutral hue	0 to 360	The neutral hue in dark mode.
--sa-neutral-chroma-dark	Unset: follows Neutral tint	0 to 0.04	The neutral tint in dark mode.
--sa-accent-tint	0.15	0 to 1	How much the accent tints hover, selection and highlight washes.
--sa-surface-depth	0.8	0 to 1	Separation between the page and cards (0 is one flat surface).
--sa-nav-tint	0.5	0 to 1	The sidebar, from page colour to sunken.
--sa-line-strength	1	0.75 to 2	Dividers and control borders (below 0.75 acts as 0.75).

Shape and depthCopy Anchor Link

Variable	Default	Values	Meaning
--sa-radius	6px	0px to 24px, Pill (9999px)	Control corners.
--sa-radius-outer	Unset: follows Radius	0px to 32px	Card and dialog corners.
--sa-pills	0	0 or 1	Tags (badges, chips, the switch) are pills instead of following the radius.
--sa-outlines	1	0 or 1	Filled parts (buttons, badges, chips, the switch track) also draw an outline.
--sa-relief	0	0 (Flat), 1 (Raised), 2 (Tactile)	Raised adds a shadow under buttons; tactile also adds a bottom edge, a hover lift, a pressed state and recessed fields.
--sa-sheen	1	0 or 1	Solid buttons get a lit surface: a gradient, a top highlight, a darker edge and a pressed shadow.
--sa-stroke	1px	0px to 3px	Border width.
--sa-elevation	0.7	0 to 3	Shadow strength: 0 flat, 1 soft, 2 or more floating.

Space and typeCopy Anchor Link

Density scales spacing and control sizes, not text; the type scale changes text sizes. Each font variable is a font stack: end it with native fallbacks, and load the web font from your layout (see fonts).

Variable	Default	Values	Meaning
--sa-density	1	0.7 to 1.4	Spacing and control sizes, not type: 0.75 dense to 1.25 roomy.
--sa-type-scale	1	0.8 to 1.2	Text sizes.
--sa-font-sans	"Inter", ui-sans-serif, system-ui, sans-serif	a font stack; the theme builder offers Inter, Geist, IBM Plex Sans, Figtree, Source Sans 3, Space Grotesk, Lexend, Archivo, System	Body and control font.
--sa-font-heading	var(--sa-font-sans)	a font stack; the theme builder offers Same as body, Fraunces, Space Grotesk, Lexend	Titles.
--sa-font-mono	ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace	a font stack; the theme builder offers System, JetBrains Mono, IBM Plex Mono, Geist Mono	Code.
--sa-kbd-font	Unset: follows Font	var(--sa-font-mono) (Monospace)	Keyboard keys.
--sa-weight-control	500	400 (400), 500 (500), 600 (600)	Buttons, tabs, menu items.
--sa-weight-heading	600	400 (400), 500 (500), 600 (600), 700 (700)	Titles.
--sa-leading-body	1.5	1.3 to 1.8	Line height of running text.

Section labelsCopy Anchor Link

Menu labels, sidebar group labels, and table column heads when they take the section label style.

Variable	Default	Values	Meaning
--sa-section-label-font	inherit	inherit (Body font), var(--sa-font-heading) (Heading font), var(--sa-font-mono) (Monospace)	Section labels: menu labels, sidebar group labels, and column heads when they take the section label style.
--sa-section-label-text	calc(0.71875rem * var(--sa-type-scale))	var(--sa-text-2xs) (11px), calc(0.71875rem * var(--sa-type-scale)) (11.5px), var(--sa-text-xs) (12px), var(--sa-text-sm) (14px)	Section label text size.
--sa-section-label-weight	500	400 (400), 500 (500), 600 (600), 700 (700)	Section label weight.
--sa-section-label-transform	none	none (As written), uppercase (Uppercase)	Section label case.
--sa-section-label-tracking	0em	0em to 0.15em	Section label letter spacing.

StructureCopy Anchor Link

Variable	Default	Values	Meaning
--sa-footer-fill	0	0 or 1	Card footers sit on a tinted band.
--sa-footer-rule	1	0 or 1	Card footers have a divider above them.
--sa-dialog-footer-fill	Unset: follows Card footer band	0 or 1	Dialog and sheet footers sit on a tinted band.
--sa-dialog-footer-rule	Unset: follows Card footer rule	0 or 1	Dialog and sheet footers have a divider above them.
--sa-column-head-label	0	0 or 1	Table column heads take the section label style.
--sa-column-head-fill	1	0 or 1	Table column heads sit on a sunken band.
--sa-column-head-case	none	none (As written), uppercase (Uppercase), var(--sa-section-label-transform) (As section labels)	Table column head case.
--sa-column-head-font	inherit	inherit (Body font), var(--sa-font-mono) (Monospace)	Table column head font.
--sa-current-page-fill	0	0 (Outline), 0.15 (Soft), 1 (Solid)	The current page in pagination.

ButtonsCopy Anchor Link

Variable	Default	Values	Meaning
--sa-solid-destructive	1	0 or 1	Destructive buttons are solid instead of a soft tint.
--sa-filled-secondary	1	0 or 1	Secondary buttons have a sunken fill instead of a bordered surface.
--sa-link-decoration	none	none (No underline), underline (Underline)	Link buttons at rest.
--sa-press-offset	1px	0px to 2px	How far a button moves when pressed.

FocusCopy Anchor Link

Variable	Default	Values	Meaning
--sa-focus-width	3px	1px to 4px	Focus ring width.
--sa-focus-offset	0px	0px to 4px	Gap between the control and the ring.
--sa-focus-color	Unset: follows Accent	any colour	Focus ring colour.