Token 系统
所有公开 CSS 变量统一使用 --scribdown- 前缀,避免与宿主环境或第三方样式发生命名冲突。整体设计入口见 设计导览,组件消费方式见 组件规范。
Token 的唯一来源是
packages/ui-handdrawn/src/styles/tokens.css,本页只做说明。改 Token 一律改那个文件,不要在应用层重新定义色值。
主题机制
Token 分两层:
- 调色板层
--scribdown-palette-light-*/--scribdown-palette-dark-*:两套主题的原始值,各定义一次。 - 语义层
--scribdown-color-*等:组件实际消费的变量,只做var()映射,不直接写色值。
主题切换即切换语义层指向哪套调色板,优先级从低到高:
强制主题的两个 class 名在 @scribdown/shared 中以 SCRIBDOWN_THEME_DARK_CLASS_NAME / SCRIBDOWN_THEME_LIGHT_CLASS_NAME 导出,宿主应引用常量而非硬编码字符串。文档站的明暗按钮就是通过它接上的。
调色板层仅供 Token 内部映射使用,组件请消费语义层变量。
颜色
引用块的四个颜色由上表派生,两套主题的配比不同:
纸面与阴影
阴影采用零模糊的偏移写法,保留手绘"墨晕"感,不做厚重浮层投影。
字体
圆角
圆角值采用轻微不规则的四角独立写法,以呼应手绘感。同层级组件只能使用同一组半径。
间距
统一采用 4 的倍数体系。
动效
所有交互过渡统一走 Token,不写散落 magic number。
资源与运行时变量
组件内部还有一批局部变量(如代码块、表格、手绘边框的贴图与尺寸),它们定义在各自的组件样式内、作用域仅限该组件,不属于全局 Token,不应被应用层消费。
排版
正文与标题的字号阶梯定义在 markdown.css,代码相关定义在 code.css / inline.css。
工具栏、图注、目录等组件的字号在各自组件样式内定义,不进入本表。