@devslab/ds-tokens (英语)
🌐 한국어
DDS 设计符号, 由 Repo 根的单一源创建
(单位:千美元)tokens/*.json, W3C Design Tokens 格式)为每个消费形状
(第2节). pnpm build 生产:
| 艺术 | 导入 | 消费者 |
|---|---|---|
dist/tokens.css | @devslab/dds-tokens/tokens.css | 每个网络表面. --dds-* 自定义属性 — 打开 :root暗着 [data-theme="dark"] |
dist/tailwind/theme.css | @devslab/dds-tokens/tailwind/theme.css | 尾风v4(@theme(中文(简体) ) |
dist/tailwind/preset.js 编号 : .cjs | @devslab/dds-tokens/tailwind/preset | 尾风v3(presets: [...](中文(简体) ) |
dist/tokens.ts (+ 数) tokens.js 编号 : tokens.d.ts(中文(简体) ) | @devslab/dds-tokens | RN和任何运行时间代码——生数(网络上px,RN上pt) |
dist/ionic.css | @devslab/dds-tokens/ionic.css | 音响响响起 --ion-* 映射到 --dds-*: 品牌颜色primary + 键 -rgb编号 :-shade编号 :-tint编号 :-contrast),三种状态颜色及其 -contrast,页背景/文本/边框、字体和app chrome(item, (中文(简体) ), toolbar, (中文(简体) ), tab-bar, (中文(简体) ), card(中文(简体) ) |
使用说明
- 装入令.
tokens.css首先是:;theme.css编号 :ionic.css参考 变量。 尾风彩色公用事业通过var(--dds-*)所以他们 运行时跟随主题. - 黑暗模式 . 设定
data-theme="dark"打开<html>(或任何树下 --)data-theme="light"将树接回树下, 这样面板可以固定到其中之一 页:1 没有发布媒体查询;自动跟踪是消费者的电话, 与devslab.kr的切换相同. - 原始调色板不在CSS中. 组件可能只使用语义
(spec §3.1); CSS不发运的东西不能被硬码所反对.
调色板值可用自
tokens.ts用于绘图-定义代码. - 尾风取名. 颜色名称保留语义路径 :
bg-bg-brand, (中文(简体) ),text-text-primary, (中文(简体) ),border-border-default平起平起 ("品牌") 碰撞——color.bg.brand财务报告和审定财务报表color.text.brand是不同的价值观. 间距没有被覆盖 : Tailwind 默认的四分之一矩格已经 等同 DDS 4px 比例尺 (p-1=4px (英语)p-16=64px; DS 数据交换space.2=:p-0.5) (中文(简体) ).
脚本
pnpm build— 样式词典 v4 解析tokens/*.json; 明确 格式化器发送文物( 未知)$type失败的构建).pnpm check符号 JSON 验证(叶子形状,参考分辨率, 光/暗平,值形状) +tsc --strict在生成的TS上.
重罚级 pnpm verify 额外运行 scripts/check-docs-sync.mjs, (中文(简体) ),
当 CI 失败时 docs/design-system*.md 或者说 preview/index.html 漂移
从符号值.