CSS Tokens

March 31, 2026 · View on GitHub

本文档是 OneUI --of-* token 的消费侧参考索引，不是样式真源。

真源

以下文件定义了当前运行态 token 真源，新增或调整 token 应优先改这里，再同步更新本文档。

  • /opt/Oneflow/flowlab/项目/oneui/code/develop/src/styles/variables.css
  • /opt/Oneflow/flowlab/项目/oneui/code/develop/src/styles/themes/neutral.css
  • /opt/Oneflow/flowlab/项目/oneui/code/develop/src/styles/themes/ops-console.css

Bridge

如果你的应用已经有自己的设计 token，优先保留自己的命名，再桥接到 OneUI 的 --of-* 命名空间。

:root {
  --app-surface-canvas: #f6f7f9;
  --app-surface-panel: #ffffff;
  --app-text-primary: #0f172a;
  --app-border-subtle: rgba(15, 23, 42, 0.08);
  --app-accent-default: #334155;

  --of-surface-canvas: var(--app-surface-canvas);
  --of-surface-elevated: var(--app-surface-panel);
  --of-text-primary: var(--app-text-primary);
  --of-border-subtle: var(--app-border-subtle);
  --of-accent-default: var(--app-accent-default);
}

局部场景建议直接把 bridge 挂在 wrapper 上：

.ops-preview {
  --app-surface-canvas: #edf3f8;
  --app-surface-panel: rgba(255, 255, 255, 0.88);
  --app-accent-default: #0f4c81;

  --of-surface-canvas: var(--app-surface-canvas);
  --of-surface-elevated: var(--app-surface-panel);
  --of-accent-default: var(--app-accent-default);
}

分类索引

Surface

TokenDefaultNotes
--of-surface-canvas#f6f7f9App canvas
--of-surface-elevated#ffffffCards, popups, raised containers
--of-surface-panel#fbfcfdPanel background
--of-surface-muted#f1f3f6Subtle background
--of-surface-selected#eceff3Selected state
--of-surface-workspace#ffffffWorkspace base
--of-surface-workspace-raised#ffffffWorkspace raised layer
--of-surface-workspace-strong#f8fafcStrong workspace layer
--of-surface-overlayrgba(0, 0, 0, 0.4)Backdrop overlay

Text

TokenDefaultNotes
--of-text-primary#0f172aMain text
--of-text-secondary#526071Secondary text
--of-text-tertiary#7a8797Tertiary text
--of-text-strong#09111fStrong text
--of-text-inverse#ffffffInverse text
--of-text-muted#cbd5e1Muted text
--of-text-placeholdervar(--of-text-tertiary)Placeholder text
--of-link-default#334155Link default
--of-link-hover#1f2a37Link hover
--of-link-visited#475569Link visited

Border

TokenDefaultNotes
--of-border-subtlergba(15, 23, 42, 0.08)Light border
--of-border-strongrgba(15, 23, 42, 0.14)Strong border
--of-border-workspacevar(--of-workspace-border)Workspace border
--of-border-activevar(--of-border-strong)Active border
--of-border-defaultvar(--of-border-subtle)Default border
--of-border-dividervar(--of-border-subtle)Divider line
--of-border-colorvar(--of-border-subtle)Compatibility alias
--of-border1px solid var(--of-border-color)Border shorthand

Accent

TokenDefaultNotes
--of-accent-default#334155Default accent
--of-accent-strong#0f172aStrong accent
--of-accent-soft#dbe2eaSoft accent
--of-link-default#334155Link default
--of-link-hover#1f2a37Link hover
--of-link-visited#475569Link visited

State

TokenDefaultNotes
--of-color-success#22c55eSuccess base
--of-color-warning#d97706Warning base
--of-color-error#dc2626Error base
--of-color-info#2563ebInfo base
--of-priority-p0-text#dc2626Priority P0 text
--of-priority-p0-bg#fee2e2Priority P0 background
--of-status-todo-text#64748bStatus text
--of-status-done-bg#dcfce7Done background
--of-role-fe-text#059669FE role text
--of-badge-purple-border#c4b5fdBadge border

Shadow

TokenDefaultNotes
--of-shadow-card0 2px 12px rgba(0, 0, 0, 0.04)Card shadow
--of-shadow-card-hover0 2px 12px 0 rgba(0, 0, 0, 0.08)Card hover shadow
--of-shadow-dropdown0 4px 16px rgba(0, 0, 0, 0.12)Dropdown shadow
--of-shadow-modal0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08)Modal shadow
--of-shadow-drawer-12px 0 32px rgba(0, 0, 0, 0.12), -2px 0 8px rgba(0, 0, 0, 0.08)Drawer shadow
--of-shadow-panel-2px 0 20px rgba(0, 0, 0, 0.13)SidePanel shadow
--of-shadow-toast0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)Toast shadow
--of-shadow-popover0 4px 12px rgba(0, 0, 0, 0.08)Popover shadow
--of-shadow-overlay-lg0 8px 24px rgba(0, 0, 0, 0.15)Large overlay shadow

Radius

TokenDefaultNotes
--of-radius-sm0.25remSmall radius
--of-radius-md0.375remMedium radius
--of-radius-lg0.5remLarge radius
--of-radius-xl0.625remExtra large radius
--of-radius-2xl1.25remStrong radius
--of-radius-full9999pxFull pill

Spacing

TokenDefaultNotes
--of-spacing-0_50.125rem0.5 spacing
--of-spacing-10.25rem1 spacing
--of-spacing-20.5rem2 spacing
--of-spacing-30.75rem3 spacing
--of-spacing-41rem4 spacing
--of-spacing-61.5rem6 spacing
--of-spacing-82rem8 spacing
--of-spacing-102.5rem10 spacing

Z-Index

TokenDefaultNotes
--of-z-base1Base layer
--of-z-raised2Raised layer
--of-z-sticky10Sticky layer
--of-z-dropdown100Dropdown layer
--of-z-sidebar199Sidebar layer
--of-z-navbar200Navbar layer
--of-z-overlay1000Overlay layer
--of-z-modal1001Modal layer
--of-z-popover1002Popover layer
--of-z-context-menu1003Context menu layer
--of-z-toast9999Toast layer

Other High-Frequency Tokens

TokenDefaultNotes
--of-font-sans"Inter", ui-sans-serif, system-ui, -apple-system, sans-serifDefault font
--of-font-mono"JetBrains Mono", "Fira Code", ui-monospace, monospaceMonospace font
--of-font-size-xs0.6875remFont size
--of-font-weight-semibold600Font weight
--of-line-height-normal1.5Line height
--of-transition-normalall 0.2s easeTransition
--of-navbar-height56pxNavbar height
--of-sidebar-width240pxSidebar width

Maintenance

  1. This document is for consumers only; it is not the source of truth.
  2. When a token changes, update src/styles/variables.css and the relevant theme file first, then sync this document.
  3. Prefer wrapper-scoped bridges over direct app-specific overrides of component internals.