Theme editor

Tune the theme on the left and every component below follows. The panel is the real SThemeCustomizer — colors, radius, size, spacing, fonts, surfaces, borders and the per-token overrides apply to this page as you change them.

Color mode

Brand color

primary, the fills derived from the base palette, and the role ramp

primary
primary-foreground
primary-50…950
ring
secondary
accent
carbon

SButton

SButton · SLink · SBadge · STag

Theme docs

Secondary

Accent

Carbon

SSwitch · SCheckbox · SSlider · SProgress · SRating · SPagination · SAvatar

Checked

primary-50 → primary-950

Status colors

the feedback scheme: destructive, success, warning and info

destructive
success
warning
info
-foreground

SAlert

destructive

Feedback scheme role

success

Feedback scheme role

warning

Feedback scheme role

info

Feedback scheme role

SBadge · STag · SProgress

solid

soft

outline

toast · SPopconfirm

destructive · destructive-foreground

destructive

destructive/10

destructive/30

Form controls

hairline tokens, control fills and the focus ring

input
border
ring
muted
secondary
accent

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SRadioGroup · SSwitch · SRating · SSlider

Accept terms

Starter

Team

Enterprise

SSegment · SToggleGroup · STagsInput · SCheckboxGroup

SMS

Push

Vue

UnoCSS

Focus ring · disabled — press Tab to walk the ring token

Data display

surfaces, muted fills and table borders

card
popover
muted
accent
border
muted-foreground

Card title

Surface, border, radius and shadow tokens

Card content sits on --card with the global radius seed.

Tab content: overview

K

Invoice	Status	Amount
INV-001	Paid	$250.00
INV-002	Pending	$150.00
INV-003	Paid	$350.00
INV-004	Refunded	$450.00

No data

Empty state icons and copy follow the text ladder.

Surfaces & shadows

the elevation ladder, nested card / popover surfaces and surfaceStyle

background
card
popover
card-foreground
popover-foreground
carbon
shadow-md
surfaceStyle

Elevation ladder — background → card → popover → carbon

Aa--background

Aa--card

Aa--popover

Aa--carbon

Nesting — a surface inside a surface

Surface panel

Shadow ladder

shadow-sm

shadow

shadow-md

shadow-lg

Text roles on the page surface

--foreground — the quick brown fox

--muted-foreground — the quick brown fox

次级文字再压一层不透明度就掉到 3.55:1，低于 AA 的 4.5:1 —— 这一档已经是下限。

Borders & focus

hairline tokens, the focus ring and the modal mask

border
input
ring
border-alpha
borderOpacity

Hairline tokens

--border

--input

--primary

border-border/40

dashed

Control outlines — SInput · SSelect · STextarea

SCheckbox · SRadioGroup · SSwitch · STag

Indeterminate

One

Two

outline

primary

destructive

SSeparator

Card border

Card outlines read the same hairline tokens

Blog

Docs

Source

Horizontal and vertical separators

Focus rings

--ring

ring-ring/50

--ring-width

Border opacity and ring width are global: the hairline tiles above are the same token at different alpha.

Overlays

dialogs and popups on the popover surface, plus the mask

popover
mask
border
shadow-md
z-base

SDialog · SDrawer · SSheet · SDropdownMenu · SPopover · STooltip · SPopconfirm

Popup surface tokens

--popoverPopup

--maskPopup

shadow-mdPopup

Size

the ladder every control and text rung reads

size
text-4xs…9xl

SButton · SBadge · STag

2xl

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SSwitch · SSlider · SRadioGroup · SSegment

2xl

One

Two

One

Two

One

Two

One

Two

One

Two

One

Two

SProgress · SAvatar

VVVVVV

Type rungs — 4xs / 3xs / 2xs (ours) then xs → 9xl (UnoCSS)

text-4xs

text-3xs

text-2xs

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

Radius

one seed drives the whole rung ladder

radius
radius-2xs…2xl
radius-none
radius-full

Rung ladder — every rung is a multiple of --radius

none

2xs

2xl

full

SButton · SInput · STag · STextarea at five rungs

2xs

Tag

full

Tag

Nesting — inner radius derived from the outer panel

Card

Card and controls inside it share the seed

Spacing

one unit drives padding, margin and gap

spacing-unit
spacing-3xs…9xl
p-4
gap-md

Padding ladder — the inner block is fixed, the frame moves

2xs

2xl

Gap ladder — SButtonGroup · SToolbar · SKbd

3xs

K S

2xs

K S

SButtonGroup · SToolbar · SSeparator

SAlert stack · SCard padding

Stacked alert

space-y-2 between rows

Stacked alert

space-y-2 between rows

Card

Cards pad their body with the same grid

Body content

Font

the three typography roles: sans, heading and mono stacks

font-sans
font-heading
font-mono

Live stacks — read from `--font-*` on `:root`

font-sans

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

font-serifui-serif, Georgia, Cambria, "Times New Roman", Times, serif

font-monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

font-heading

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

font-sans — body & controls

Body copy

The sans stack drives paragraphs, labels and form chrome

Pack my box with five dozen liquor jugs — the default reading face for UI copy, tables and long-form documentation.

KShortcuts and hints inherit the sans stack

font-heading — titles

Section heading

Headings and display text use --font-heading

SoybeanUI Theme Engine

One stack for titles — swap it from the customizer and every heading follows.

font-serif — serif copy

Long-form reading

Prose that opts into the serif stack reads --font-serif

The serif role is a root variable of its own, so body copy can go serif while the heading stays sans — or the reverse, independently.

Set apart from the sans arm, and no longer folded into the heading role.

font-mono — code & tokens

Inline code

Code, kbd and token chips read --font-mono

ResolveresolveThemeMap()and emit--font-sansfrom the literal layer.

            :root {
  --font-sans: …;
  --font-serif: …;
  --font-mono: …;
  --font-heading: …;
}

Region — sidebar

the region skin, mirroring the global roles

sidebar
sidebar-foreground
sidebar-accent
sidebar-accent-foreground
sidebar-border
sidebar-primary
sidebar-primary-foreground
sidebar-ring

SLayout · STreeMenu — the region skin in place

Region tokens — the sidebar mirrors the global roles

bg-sidebar

bg-sidebar-accent

text-sidebar-primary

bg-carbon

Chart colors

chart-1 to chart-5, derived from primary

chart-1
chart-2
chart-3
chart-4
chart-5

Grouped bars

Stacked bar · legend

chart-1 chart-2 chart-3 chart-4 chart-5

Contrast

the fill to foreground pairs, side by side

*-foreground
*-hairline

Solid fills — SButton on every role

Fill ↔ foreground pairs — every fill with its declared text

--primaryReadable text

--secondaryReadable text

--accentReadable text

--carbonReadable text

--destructiveReadable text

--successReadable text

--warningReadable text

--infoReadable text