Vean

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
  • -text
  • -subtle
  • -border

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-text · destructive-subtle · destructive-border

destructive
destructive-subtle
destructive-border

表单控件

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

数据展示

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

  • surface
  • elevated
  • muted
  • accent
  • border
  • muted-foreground

Card title

Surface, border, radius and shadow tokens

Card content sits on --vean-surface 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.

表面与阴影

层次阶梯、嵌套表面与 surfaceStyle

  • background
  • surface
  • elevated
  • carbon
  • shadow-md
  • surfaceStyle

Elevation ladder — background → surface → elevated → carbon

Aa--vean-background
Aa--vean-surface
Aa--vean-elevated
Aa--vean-carbon

Nesting — a surface inside a surface

Surface panel

Elevated popupmuted chipaccent chip

Shadow ladder

xs
sm
md
lg

Text roles on the page surface

--vean-foreground — the quick brown fox

--vean-muted-foreground — the quick brown fox

muted-foreground/70 — the quick brown fox

描边与焦点

细线 token、border-strong 与焦点环

  • border
  • border-strong
  • input
  • ring
  • border-alpha
  • borderOpacity

Hairline tokens

--vean-border
--vean-border-strong
--vean-input
--vean-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

--vean-ring
ring-ring/50
--vean-ring-width

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

浮层

对话框与弹层所在的 elevated 表面

  • elevated
  • border
  • shadow-md
  • z-base

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

Popup surface tokens

--vean-elevatedPopup
--vean-borderPopup
--vean-shadow-mdPopup

尺寸

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

  • size
  • text-4xs…2xl
  • leading-*

SButton · SBadge · STag

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

SInput · SSelect · STextarea · SInputNumber

SCheckbox · SSwitch · SSlider · SRadioGroup · SSegment

SProgress · SAvatar

VVVVVV

Text ladder — --vean-text-4xs → --vean-text-2xl

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

区域 · 侧栏

镜像全局角色的区域皮肤

  • sidebar-surface
  • sidebar-foreground
  • sidebar-accent
  • sidebar-accent-foreground
  • sidebar-border
  • sidebar-primary

SLayout · STreeMenu — the region skin in place

V

Region tokens — the sidebar mirrors the global roles

bg-sidebar-surface
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

对比度

对比度护栏逐对校验的填充与前景色

  • contrast
  • *-foreground
  • *-text
  • *-subtle

Solid fills — SButton on every role

Fill ↔ foreground pairs — the contrast guard's units

--vean-primaryReadable text
--vean-secondaryReadable text
--vean-accentReadable text
--vean-carbonReadable text
--vean-destructiveReadable text
--vean-successReadable text
--vean-warningReadable text
--vean-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.