@ devicechain/ 品牌
Cononical Device Chain 品牌值和生成的样式表 消费者实际上需要.
tokens.json 是真理的来源。 里面的东西 css/ 财务报告和审定财务报表
tokens.generated.json 由它产生,并携带一种非手的编辑
头曰.
用这个
npm install @devicechain/brand
/* whichever vocabulary your app speaks — see the table below */
@import '@devicechain/brand/css/shadcn.css';
import tokens from '@devicechain/brand/tokens';
没有构建步骤和 JavaScript 运行:样式表和 生成代号为 JSON 的运出.
处理中
npm run generate -w @devicechain/brand # regenerate after editing tokens.json
npm run check:generated -w @devicechain/brand # fail if the committed output is stale
npm run verify -w @devicechain/brand # report consumers that disagree
# the marketing site lives in a separate repo, so point at it explicitly
DC_WEBSITE=../devicechain-website npm run verify -w @devicechain/brand
为什么三个样式表而不是一个
三个消费者不共享词汇表,单样式表不能 为他们服务:
| 消费者 | 文件 | 词汇 | 值格式 |
|---|---|---|---|
| 销售网站 | css/brand.css | --brand, (中文(简体) ), --ink, (中文(简体) ), --bg重音 | 六进制 |
| 控制台 | css/shadcn.css | --primary, (中文(简体) ), --ring, (中文(简体) ), --sidebar-* | 赤线 H S% L% 三进制 |
| 文档 | css/infima.css | --ifm-color-primary* | 六进制,加五步坡道 |
容易出错的两个细节:
- 控制台的三进制 没有
hsl()包装阴影作曲:hsl(var(--primary) / <alpha>),所以包装它们打破每一个α变体. - Infima想要一个五步坡道 小学的两边。 来源于 单相干值,所以步骤不能偏离顺序,这就是 手写斜坡的通常故障模式.
css/shadcn.css 财务报告和审定财务报表 css/infima.css 故意覆盖 品牌衍生标志
仅限。控制台仍然拥有其余的阴影尺度(卡片、弹出器、,
chart-*, (中文(简体) ), sidebar-* 文档网站仍然拥有自己的
背景主题.
为什么这些值被存储为十六进制
商标的艺术品是六分(branding/logos/logo.svg),所以六分卫是来源和
每一个其它形式都是衍生出来的。 这不是化妆品。 之前的操纵台
宣布品牌为 " 三圆" 197 71% 42%,它使得
#1f8cb7 —— 说 没有 页:1 #208cb7 在艺术。 一个通道出255,隐形
还有两种不同的颜色 自称是同一个颜色.
衍生可以消除那类错配.
一个规则
core.primary 是唯一的颜色,曾经意味着 交互式四个
口音( e)aqua → violet → magenta → amber,按管道顺序:摄入,
检测、反应、命令) 区域。它们从不标记链接,按钮
或者一个控制。 打破它,一页 停止导航.
什麽 verify 为了什么,它不是
"保持与控制台同步"是三个文件中的评论,而不是一个
保证——并且到本套件完成时,它已经失败了两次
写作. verify 把评论变成CI工作可以执行的东西.
这是故意的 只读它印出什么是异议和退出非零; 它永远不会重写消费者。 改变所运去的颜色是一种视觉决定, 所以一个一个地向消费者迁移 看看结果 不批量重写 让剧本安静下来.
移徙状况
控制台和仪表盘查看器导入 css/shadcn.css; 文件站点导入
css/infima.css。这些消费者直接使用生成的值。 营销
网站在一个单独的仓库中居住; 使用 DC_WEBSITE 与 verify 检查它的
当前值.