@ appire/ad-design-tokes (英语)
AppDirect 前端应用的设计符号.
安装
npm install @appdirect/ad-design-tokens
可用出口
- 解析语义符号 :
@appdirect/ad-design-tokens/semantic/light@appdirect/ad-design-tokens/semantic/dark
- 已解析的组件符号 :
@appdirect/ad-design-tokens/components/light@appdirect/ad-design-tokens/components/dark
- 已解析的符号输出( 每层) :
@appdirect/ad-design-tokens/resolved/core.json@appdirect/ad-design-tokens/resolved/open-color.json@appdirect/ad-design-tokens/resolved/derived.json@appdirect/ad-design-tokens/resolved/semantic-light.json@appdirect/ad-design-tokens/resolved/semantic-dark.json@appdirect/ad-design-tokens/resolved/components-light.json@appdirect/ad-design-tokens/resolved/components-dark.json
- Figma / Tokens Studio (DTCG JSON 配有
{ref}别名完整:@appdirect/ad-design-tokens/figma/open-color.json@appdirect/ad-design-tokens/figma/core.json@appdirect/ad-design-tokens/figma/derived.json@appdirect/ad-design-tokens/figma/semantic.light.json@appdirect/ad-design-tokens/figma/semantic.dark.json@appdirect/ad-design-tokens/figma/components.light.json@appdirect/ad-design-tokens/figma/components.dark.json@appdirect/ad-design-tokens/figma/$themes.json(Tokens Studio主题列表)
- CSS 变量 :
@appdirect/ad-design-tokens/css/foundations.css(只有语义符号——框架适配器的基础)@appdirect/ad-design-tokens/css/mantine.css(机器适配器——组件选择器参考)--ad-*(马来语)@appdirect/ad-design-tokens/css/tokens.css(创始人+组件令牌——香草消费者完全独占)@appdirect/ad-design-tokens/css/open-color.css(单位:千美元)--ad-open-color-*调色板)
- 设计文件适配器 :
@appdirect/ad-design-tokens/design-spec.yaml(解决YAML 有效载荷以同步)DESIGN.md前题在ad-design-system(中文(简体) )
- 联合来文的切入点:
@appdirect/ad-design-tokens(完全解开的捆绑)
使用量
图片通过Tokens工作室
Tokens 工作室位于 dist/figma/ 在已发布的软件包中。 这个 $themes.json 将图层文件分为两个主题(Light, (中文(简体) ), Dark) 因此,Tokens Studio在导入时创建了以下 Figma 变量集合 :
| 收藏 | 模式 |
|---|---|
Tokens / Open-Color | 数值 |
Tokens / Core | 数值 |
Tokens / Derived | 数值 |
Tokens / Semantic | 光, 暗色( 暗色) |
Tokens / Semantic Brand | 数值 |
Tokens / Components | 光, 暗色( 暗色) |
互动状态(hover, active, focus, disable)被有意排除在Figma导出之外——它们是代码方面的关注. 图片只绑定默认/恢复状态 .
解决 JSON 进口问题
import semanticLight from '@appdirect/ad-design-tokens/semantic/light' with { type: 'json' };
import componentsDark from '@appdirect/ad-design-tokens/components/dark' with { type: 'json' };
import resolvedCore from '@appdirect/ad-design-tokens/resolved/core.json' with { type: 'json' };
CSS变量——香草消费者
import '@appdirect/ad-design-tokens/css/tokens.css';
CSS 变量——只调色板
import '@appdirect/ad-design-tokens/css/open-color.css';
CSS 变量 — Maintine 适配器
导入于 @mantine/core/styles.css 因此适配器的更高特异性选择者获胜:
import '@mantine/core/styles.css';
import '@appdirect/ad-design-tokens/css/foundations.css';
import '@appdirect/ad-design-tokens/css/mantine.css';
.button {
background: var(--ad-color-brand-primary);
color: var(--ad-color-brand-on-primary);
}
JS 切入点
import tokens from '@appdirect/ad-design-tokens';
console.log(tokens.semantic.light.color.bg.default.$value);