Theme Variables
Every CSS variable a theme file can set, with its default and its range
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.TagHelpers/stellar-admin.theme-variables.json), which tools can read for the variables of the installed version.
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. |
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). |
| 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. |
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. |
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. |
| 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. |
| 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. |
| 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. |