开发预览更新于 2026-05-10

主题与 Tokens

用 CSS 变量切换 ChuFix UI 的主题、密度、主色等设计 token。

ChuFix UI 所有视觉表现都从 CSS 变量里读，集中定义在 @chufix-design/tokens/tokens.css。颜色采用 OKLCH 色彩空间，从不直写 #hex。

切换主题

三套主题：dark-cool（默认）、dark-warm、light。

<html data-theme="dark-cool">...</html>
<html data-theme="dark-warm">...</html>
<html data-theme="light">...</html>

<html data-theme="dark"> 是 dark-cool 的别名。运行时切换：

document.documentElement.dataset.theme = 'light';

切换密度

两种密度：comfortable（默认，控件 32px）、compact（控件 28px）。

<html data-density="compact">...</html>

密度只影响 --control-h / --pad-x / --row-h 等几何 token，颜色与主题正交。

自定义主色

主色由 OKLCH 单点定义，hover / active / soft 由其衍生：

:root {
  --accent-1: oklch(64% 0.16 263);            /* 默认填充 */
  --accent-2: oklch(70% 0.16 263);            /* hover */
  --accent-3: oklch(58% 0.15 263);            /* active */
  --accent-soft: oklch(64% 0.16 263 / 0.16);  /* 浅色背景 */
}

只改色相 H 即可换品牌色（如 H 12 偏红、H 152 偏绿、H 263 偏蓝紫）。若需在样式里手动加透明度，OKLCH 直接支持斜杠语法：oklch(64% 0.16 263 / 0.4)。

完整 token 清单

色面：--bg-0 --bg-1 --bg-2 --bg-3 --bg-inset

前景：--fg-1 --fg-2 --fg-3 --fg-on-accent

线条：--line-1 --line-2

主色：--accent-1 --accent-2 --accent-3 --accent-soft

状态：--status-success --status-warning --status-error --status-info，各自配 -soft 浅色变体。

圆角：--r-2 --r-3 --r-4 --r-6 --r-8 --r-pill

间距（4px 步进）：--s-1 … --s-12

字号：--t-11 --t-12 --t-13 --t-14 --t-16 --t-18 --t-22 --t-28，配套 --lh-* 行高。

字体：--font-sans（Inter）、--font-mono（JetBrains Mono）

阴影：--shadow-1（细描边）--shadow-2（卡片）--shadow-3（弹层）--shadow-4（模态）

时长：--dur-instant --dur-fast --dur-base --dur-slow

缓动：--ease-out --ease-in-out --ease-spring

层级：--z-sticky --z-dropdown --z-popover --z-tooltip --z-drawer --z-modal --z-toast