颜色 Color
语义颜色 token 共 107 项，投影自 design-tokens/tokens/semantic.json。每项明（L）暗（D）两档成对展示；别名 token 标注 ⇐ 来源。品牌色 = color-brand 族，换主题只需改这一族。
强调 Accent color-accent · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-accent | #F1F1F1 | #121215 |
| color-accent-foreground | #161619 | #F1F1F1 |
动作 Action color-action · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-action-primary | ⇐ color-brand | ⇐ color-brand |
| color-action-primary-active | ⇐ color-brand-active | ⇐ color-brand-active |
| color-action-primary-foreground | ⇐ color-brand-foreground | ⇐ color-brand-foreground |
| color-action-primary-hover | ⇐ color-brand-hover | ⇐ color-brand-hover |
背景 Background color-background · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-background | #FFFFFF | #0B0B0C |
| color-background-secondary | #F8F8F8 | #0E0E10 |
| color-background-tertiary | #F1F1F1 | #111113 |
blue color-blue · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-blue | #165dff | #165dff |
| color-blue-foreground | #ffffff | #ffffff |
| color-blue-hover | color-mix(in srgb, {desktop.color-blue} 88%, black 12%) | color-mix(in srgb, {desktop.color-blue} 88%, white 12%) |
| color-blue-muted | #dee8ff | #041333 |
边框 Border color-border · 5
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-border | #DFDFDF | #424244 |
| color-border-default | ⇐ color-border | ⇐ color-border |
| color-border-interactive-active | ⇐ color-control-border-active | ⇐ color-control-border-active |
| color-border-interactive-hover | ⇐ color-control-border-hover | ⇐ color-control-border-hover |
| color-border-subtle | #F1F1F1 | #2F2F32 |
品牌 Brand color-brand · 6
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-brand | #8E80F2 | #9D91F5 |
| color-brand-active | #6A59D4 | #7A6AE0 |
| color-brand-foreground | #12101F | #12101F |
| color-brand-hover | #7A6AE0 | #8B7DF0 |
| color-brand-muted | #EFECFD | #2A2358 |
| color-brand-rgb | 142 128 242 | 157 145 245 |
composer color-composer · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-composer-icon-bg | color-mix(in srgb, {desktop.color-background-tertiary} 70%, transparent) | color-mix(in srgb, {desktop.color-background-tertiary} 70%, transparent) |
| color-composer-icon-hover-bg | ⇐ color-background-tertiary | ⇐ color-background-tertiary |
control color-control · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-control-border-active | ⇐ color-selection-border | ⇐ color-selection-border |
| color-control-border-hover | color-mix(in srgb, {desktop.color-brand} 32%, {desktop.color-border} 68%) | color-mix(in srgb, {desktop.color-brand} 32%, {desktop.color-border} 68%) |
cyan color-cyan · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-cyan | #13c1b8 | #13c1b8 |
| color-cyan-foreground | #ffffff | #ffffff |
| color-cyan-hover | color-mix(in srgb, {desktop.color-cyan} 88%, black 12%) | color-mix(in srgb, {desktop.color-cyan} 88%, white 12%) |
| color-cyan-muted | #def6f5 | #042725 |
危险 Destructive color-destructive · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-destructive | #ef4444 | #ef4444 |
| color-destructive-foreground | #ffffff | #ffffff |
| color-destructive-hover | color-mix(in srgb, {desktop.color-destructive} 88%, black 12%) | color-mix(in srgb, {desktop.color-destructive} 88%, white 12%) |
| color-destructive-muted | #fde5e5 | #300e0e |
disabled color-disabled · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-disabled-bg | #F1F1F1 | #121215 |
| color-disabled-border | #DFDFDF | #3D3D3F |
| color-disabled-fg | #A7A7A8 | #6B6B6D |
编辑器 Editor color-editor · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-editor-accent | ⇐ color-brand | ⇐ color-brand |
| color-editor-accent-border | ⇐ color-selection-border | ⇐ color-selection-border |
| color-editor-accent-muted | ⇐ color-brand-muted | ⇐ color-brand-muted |
focus color-focus · 1
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-focus-ring | ⇐ color-brand | ⇐ color-brand |
前景 Foreground color-foreground · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-foreground | #161619 | #F1F1F1 |
| color-foreground-secondary | #79797B | #ACACAD |
| color-foreground-tertiary | #A7A7A8 | #6B6B6D |
icon color-icon · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-icon-button-active-bg | color-mix(in srgb, {desktop.color-background-tertiary} 80%, {desktop.color-border} 20%) | color-mix(in srgb, {desktop.color-background-tertiary} 78%, {desktop.color-border} 22%) |
| color-icon-button-hover-bg | ⇐ color-background-tertiary | ⇐ color-background-tertiary |
| color-icon-button-hover-fg | ⇐ color-foreground | ⇐ color-foreground |
信息 Info color-info · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-info-bg | color-mix(in srgb, {desktop.color-blue} 12%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-blue} 16%, {desktop.color-background}) |
| color-info-border | color-mix(in srgb, {desktop.color-blue} 28%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-blue} 34%, {desktop.color-background}) |
| color-info-fg | color-mix(in srgb, {desktop.color-blue} 84%, black 8%) | color-mix(in srgb, {desktop.color-blue} 90%, white 6%) |
input color-input · 1
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-input | #DFDFDF | #424244 |
链接 Link color-link · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-link | ⇐ color-blue | ⇐ color-blue |
| color-link-hover | ⇐ color-blue-hover | ⇐ color-blue-hover |
弱化 Muted color-muted · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-muted | #F1F1F1 | #111113 |
| color-muted-foreground | #79797B | #ACACAD |
中性 Neutral color-neutral · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-neutral | #18181B | #F1F1F1 |
| color-neutral-foreground | #FFFFFF | #18181B |
| color-neutral-hover | color-mix(in srgb, {desktop.color-neutral} 88%, black 12%) | color-mix(in srgb, {desktop.color-neutral} 88%, white 12%) |
| color-neutral-muted | #DADADB | #3D3D3F |
提示 Notice color-notice · 12
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-notice-error-background | color-mix(in srgb, {desktop.color-destructive} 12%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-destructive} 14%, {desktop.color-background}) |
| color-notice-error-border | color-mix(in srgb, {desktop.color-destructive} 32%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-destructive} 36%, {desktop.color-background}) |
| color-notice-error-foreground | color-mix(in srgb, {desktop.color-destructive} 88%, black 10%) | color-mix(in srgb, {desktop.color-destructive} 92%, white 6%) |
| color-notice-info-background | ⇐ color-info-bg | ⇐ color-info-bg |
| color-notice-info-border | ⇐ color-info-border | ⇐ color-info-border |
| color-notice-info-foreground | ⇐ color-info-fg | ⇐ color-info-fg |
| color-notice-success-background | color-mix(in srgb, {desktop.color-success} 12%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-success} 14%, {desktop.color-background}) |
| color-notice-success-border | color-mix(in srgb, {desktop.color-success} 30%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-success} 32%, {desktop.color-background}) |
| color-notice-success-foreground | color-mix(in srgb, {desktop.color-success} 82%, black 10%) | color-mix(in srgb, {desktop.color-success} 86%, white 6%) |
| color-notice-warning-background | color-mix(in srgb, {desktop.color-warning} 14%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-warning} 16%, {desktop.color-background}) |
| color-notice-warning-border | color-mix(in srgb, {desktop.color-warning} 30%, {desktop.color-background}) | color-mix(in srgb, {desktop.color-warning} 36%, {desktop.color-background}) |
| color-notice-warning-foreground | color-mix(in srgb, {desktop.color-warning} 85%, black 10%) | color-mix(in srgb, {desktop.color-warning} 90%, white 6%) |
遮罩 Overlay color-overlay · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-overlay | rgb(29 33 41 / 0.6) | rgb(29 33 41 / 0.6) |
| color-overlay-strong | rgb(29 33 41 / 0.8) | rgb(29 33 41 / 0.8) |
主色 Primary color-primary · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-primary | #18181B | #F1F1F1 |
| color-primary-foreground | #FFFFFF | #18181B |
progress color-progress · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-progress | ⇐ color-blue | ⇐ color-blue |
| color-progress-bg | ⇐ color-info-bg | ⇐ color-info-bg |
| color-progress-fg | ⇐ color-info-fg | ⇐ color-info-fg |
purple color-purple · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-purple | #722ed1 | #722ed1 |
| color-purple-foreground | #ffffff | #ffffff |
| color-purple-hover | color-mix(in srgb, {desktop.color-purple} 88%, black 12%) | color-mix(in srgb, {desktop.color-purple} 88%, white 12%) |
| color-purple-muted | #ebe2f9 | #17092a |
ring color-ring · 1
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-ring | #18181B | #D5D5D6 |
次级 Secondary color-secondary · 2
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-secondary | #F1F1F1 | #121215 |
| color-secondary-foreground | #18181B | #F1F1F1 |
选区 Selection color-selection · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-selection-bg | ⇐ color-brand-muted | ⇐ color-brand-muted |
| color-selection-border | color-mix(in srgb, {desktop.color-brand} 46%, {desktop.color-border} 54%) | color-mix(in srgb, {desktop.color-brand} 46%, {desktop.color-border} 54%) |
| color-selection-fg | ⇐ color-brand | ⇐ color-brand |
侧栏 Sidebar color-sidebar · 6
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-sidebar | #FAFAFA | #0C0C0E |
| color-sidebar-accent | #E8E8E8 | #121215 |
| color-sidebar-accent-foreground | #18181B | #F1F1F1 |
| color-sidebar-border | #DFDFDF | #3D3D3F |
| color-sidebar-foreground | #161619 | #F1F1F1 |
| color-sidebar-ring | #18181B | #D5D5D6 |
成功 Success color-success · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-success | #10b981 | #10b981 |
| color-success-foreground | #ffffff | #ffffff |
| color-success-hover | color-mix(in srgb, {desktop.color-success} 88%, black 12%) | color-mix(in srgb, {desktop.color-success} 88%, white 12%) |
| color-success-muted | #dbf5ec | #03251a |
气泡 Tooltip color-tooltip · 3
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-tooltip-bg | #1f2937 | #1f2937 |
| color-tooltip-border | color-mix(in srgb, {desktop.color-tooltip-bg} 72%, black 28%) | color-mix(in srgb, {desktop.color-tooltip-bg} 72%, black 28%) |
| color-tooltip-fg | #f9fafb | #f9fafb |
警告 Warning color-warning · 4
| Token 名称 | 明色 | 暗色 |
|---|---|---|
| color-warning | #f59e0b | #f59e0b |
| color-warning-foreground | #ffffff | #ffffff |
| color-warning-hover | color-mix(in srgb, {desktop.color-warning} 88%, black 12%) | color-mix(in srgb, {desktop.color-warning} 88%, white 12%) |
| color-warning-muted | #fdeed3 | #362302 |