SoybeanUI

v0.50.0-beta.1

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
9
Secondary
Accent
Carbon

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

S

primary-50 → primary-950

Status colors

the feedback scheme: destructive, success, warning and 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

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

SSegment · SToggleGroup · STagsInput · SCheckboxGroup

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

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

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

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

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.

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

Size

the ladder every control and text rung reads

  • 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

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

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

Font

the three typography roles: sans, heading and mono stacks

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

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

V

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

Q1
Q2
Q3
Q4

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

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.