@c2n/主题
设计符号 @c2n/* 网络组件,加a 生成的基础主题 将每个组件 CSS 变量映射到它们上.
组件通过它们自己的CSS自定义属性(--c2-button__container--background-color大约总共700个). @c2n/theme 在上方添加一个便利层: ~35 共享的代币命名 --c2-theme--<name>。基准主题设置每个组件变量到 var(--c2-theme--<token>, <component default>) 时间 :root,所以应用程序只需要定义符号。 任何您设定的元件变量仍然会获胜 .
npm install @c2n/theme
import '@c2n/theme/theme.css' // tokens + base theme
/* Your app: override a few tokens, every component follows. */
:root {
--c2-theme--color-primary: #7c3aed;
--c2-theme--radius-md: 10px;
--c2-theme--font-family: 'Inter', system-ui, sans-serif;
}
文件
| 导出 | 内容 |
|---|---|
@c2n/theme/theme.css | tokens.css + 键 base.css |
@c2n/theme/tokens.css | 脚本默认值: 打开灯 :root, 暗处 [data-theme='dark'] 编号 : .c2-dark 作为 prefers-color-scheme: dark 倒计时 |
@c2n/theme/base.css | --c2-<component>…: var(--c2-theme--…, <default>) 用于每个映射组件变量。 如果您的应用程序已经定义了符号, 请单独使用 |
@c2n/theme/tokens.js | 符号表作为 TypeScript ()tokens, (中文(简体) ), TokenDef(中文(简体) ) |
@c2n/theme/tokens.json | 键+ component variable → token 绘图 |
@c2n/theme/report.json | 每个软件包的覆盖范围和未映射的变量列表 |
黑暗模式
设定 data-theme="dark" (或 c2-dark 上课) <html> 或任何树下;没有它,OS优先. data-theme="light" 编号 : c2-light 选择出子树 .
叠加层
tokens.css 财务报告和审定财务报表 base.css 把每个规则都放进 c2n-theme 级联层。一个无层规则比一个分层规则强,无论它的具体或源顺序如何,所以一个平地 :root { --c2-theme--color-primary: … } 在光线模式下覆盖符号 data-theme="dark" 在操作系统暗黑的倒计时下 你设定的元件变量也是一样 如果您的应用程序将自己的样式分层, 请声明 c2n-theme 首先,在一个 @layer 任何导入前的语句,所以它保持最低: @layer c2n-theme, base, components;在主题离开前导入的分层框架 c2n-theme 在它的地层上.
层
- 键 —— 说
--c2-theme--*,由应用程序设置. - 基础主题 - 生成地图,船在这里.
- 构成部分变量 —— 说
--c2-<component>__<part>[__<state>]--<property>精良的逃生舱门. - App 变体组件 重复的外观包裹在自己的组件中(见文件站点指南).
发展
npm run build -w packages/tools/theme 编译 src/tokens.ts 运行 scripts/theme-generator读取 @c2n/*/custom-elements.json,将每个文档的 CSS 变量分类(scripts/theme-generator/classify.ts除外情况 overrides.ts)并写作 dist/。构建取决于每个组件的构建,因此列表是新鲜的;控制台打印一个覆盖表和 dist/report.json 列出哪些内容没有被修改和原因.
一个组件可以记录其侧面变量背后的短手变量(--c2-details--border 后面 --c2-details--border-top 和另外三个,编为 var(--c2-details--border-top, var(--c2-details--border, …))) (中文(简体) ). 发电机读取了包裹的倒数 dist/ 当每个侧面的可变地图精确到其短手地图的数值时,只将短手写到 base.css (单位:千美元)scripts/theme-generator/shorthands.ts:写出双方会让短手在主题下无法接触. 您设置的平方变量仍然取胜; dist/report.json 列出在 coveredByShorthand。 。 。 . npm test -w packages/tools/theme 运行发电机组测试.
npm run dev -w packages/tools/theme 打开 Vite 带 (index.html) 有主题组件, 暗相切换和符号覆盖 .