主题编辑器

左侧调整主题配置，下方组件实时跟随。面板即真实的 SThemeCustomizer：颜色、圆角、尺寸、间距、字体、表面、描边与逐 token 覆盖都会即时作用于当前页面。

明暗模式

品牌色

primary、由中性基调派生的填充，以及角色色阶

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

状态色

feedback 方案：destructive、success、warning、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

表单控件

细线 token、控件填充与焦点环

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

数据展示

表面、弱化填充与表格描边

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.

表面与阴影

层次阶梯、嵌套的 card / popover 表面与 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 —— 这一档已经是下限。

描边与焦点

细线 token、焦点环与模态遮罩

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.

浮层

对话框与弹层所在的 popover 表面，以及遮罩

popover
mask
border
shadow-md
z-base

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

Popup surface tokens

--popoverPopup

--maskPopup

shadow-mdPopup

尺寸

控件与文字档位共用的 size 刻度

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
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

间距

一个变量驱动内外边距与 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

字体

三套字族角色：无衬线、标题与等宽 stack

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: …;
}

区域 · 侧栏

镜像全局角色的区域皮肤

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

图表色

由 primary 派生的 chart-1 至 chart-5

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

对比度

填充与其前景的配对一览

*-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