SoybeanUI

v0.50.0-beta.1

主题编辑器

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

明暗模式

品牌色

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

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

SButton

SButton · SLink · SBadge · STag

Theme docs
9
Secondary
Accent
Carbon

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

S

primary-50 → primary-950

状态色

feedback 方案：destructive、success、warning、info

  • destructive
  • success
  • warning
  • info
  • -foreground

SAlert

SBadge · STag · SProgress

9
9
9
9
solid
solid
solid
solid
soft
soft
soft
soft
outline
outline
outline
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

SSegment · SToggleGroup · STagsInput · SCheckboxGroup

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
InvoiceStatusAmount
INV-001Paid$250.00
INV-002Pending$150.00
INV-003Paid$350.00
INV-004Refunded$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

Elevated popupmuted chipaccent chip

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

muted-foreground/70 — the quick brown fox

描边与焦点

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

outline
primary
destructive

SSeparator

Card border

Card outlines read the same hairline tokens

BlogDocsSource

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
--borderPopup
--maskPopup
shadow-mdPopup

尺寸

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

  • size
  • text-4xs…9xl

SButton · SBadge · STag

xs
sm
md
lg
xl
2xl
xs
sm
md
lg
xl
2xl

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SSwitch · SSlider · SRadioGroup · SSegment

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
xs
sm
md
lg
xl
2xl
full

SButton · SInput · STag · STextarea at five rungs

2xs
Tag
sm
Tag
md
Tag
xl
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
xs
sm
md
lg
xl
2xl

Gap ladder — SButtonGroup · SToolbar · SKbd

3xs
K S
2xs
K S
xs
K S
sm
K S
md
K S
lg
K S
xl
K S

SButtonGroup · SToolbar · SSeparator

SAlert stack · SCard padding

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

Resolve resolveThemeMap() and emit --font-sans from 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

V

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

Q1
Q2
Q3
Q4

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

Text roles on the page surface

text-foreground — body copy at 14px

text-muted-foreground — body copy at 14px

text-muted-foreground/70 — body copy at 14px

In dark mode the guard re-picks a fill level or flips the foreground; the AAA policy widens the thresholds.