@ cueplus/ 托盘
下方的符号层 @cueplusplus/ui,对于一个需要名词而不是名词的应用程序
通过一个组件: 5个密度图案、14个字体配对、14个样式组和10个油漆
包装,作为 DTCG 源码编写并编译为属性范围 CSS 自定义属性.
系统5个DOM轴中有4个住在这里,它们拥有严格脱节的符号集——一页是: 每一个都有一个选择,所以他们编成一个总和而不是一个产品:
| 轴 | 拥有 |
|---|---|
[data-density] | 几何——控制高度,弧度,间隔,类型大小 |
[data-font] | 三个类型叠叠成对的名称 |
[data-style] | 页面组成——道教和UI领跑,度量,波段节奏,规则和场地,盖子跟踪(13个名字) |
[data-paint] | 尾部 -- -- 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相 |
颜色不在这里 . 第五轴, [data-theme],左出此包:调色板是一个包
现在@cueplusplus/theme-<name>所以没有 THEMES 导出,
没有 ThemeName,以及 dist/theme.css 是一个已贬值的别名,其名称是: axes.css 保持到0.10,以及
之后在未成年人中被带走。 空白的调色板 一个没有被标记的页面 画活在
@cueplusplus/theme-base。 。 。 .
安装
这个 @cueplusplus 范围为 npm上公开 并且默认地在那里解决,故无物
用于配置和不提供证书——它像其他任何软件包一样安装.
pnpm add @cueplusplus/tokens
没有对等者和依赖性:此软件包是生成的数据和8行的JavaScript. 这个
也作为依附 @cueplusplus/ui,所以一个已经安装组件的应用程序
- 把它命名为 package.json 只是使常数可以导入到你自己的代码.
CI、Vercel和信使的过期日期在
docs/CONSUMING.md 第1节。 。 。 .
快开始
应用程序导入 @cueplusplus/ui/styles.css 已有轴作为 CSS; 它需要这个软件包
名称只是为了停止重述它出口的东西.
import { DENSITIES, token } from "@cueplusplus/tokens";
const ring = `1px solid ${token("focus")}`; // "1px solid var(--cue-focus)"
const labels = DENSITIES.map((rung) => [rung, rung.replace(/-/g, " ")] as const);
DENSITIES 实值 ["ultra-compact", "compact", "normal", "large", "ultra-large"]按梯子顺序排列.
从中获取拾取者的标签和样式表的运行列表,而不是写出:
当梯子变了,就静静地去, 没有任何地方报告它。 同样的情况是
其他三个轴线—— FONTS, (中文(简体) ), STYLE_SETS 财务报告和审定财务报表 PAINTS 每个词汇都是按菜单顺序排列的,
和一个从一个人建造的采摘器 与目录一起生长 而不是默默地忽略它的最新条目.
没有捆绑器,CSS中的同一件事是进口:
@import "@cueplusplus/tokens/axes.css";
飞来飞去
| 子路径 | 这是什么 |
|---|---|
@cueplusplus/tokens | 四轴词汇表—— DENSITIES, (中文(简体) ), FONTS, (中文(简体) ), STYLE_SETS, (中文(简体) ), PAINTS 与 MODES 和每个 DEFAULT_*; 每一轴拥有的合同(COLOR_CONTRACT, (中文(简体) ), GEOMETRY_CONTRACT, (中文(简体) ), FONT_TOKENS, (中文(简体) ), STYLE_CONTRACT, (中文(简体) ), STYLE_SET_CONTRACT, (中文(简体) ), PAINT_CONTRACT, (中文(简体) ), PAINT_INK_CONTRACT, (中文(简体) ), PAINT_INKS(三); FONT_PAIRINGS 财务报告和审定财务报表 FONT_FACES· ; faceProperty() 财务报告和审定财务报表 token(); 每个类型 |
./axes.css | 作为 CSS 的密度、字体、样式设置和油漆轴——每个 [data-density], (中文(简体) ), [data-font], (中文(简体) ), [data-style] 财务报告和审定财务报表 [data-paint] 块——没有颜色 |
./tailwind.css | 尾风 v4 @theme inline 绘图层 |
./theme.css | 折旧的别名: ./axes.css: 保留到0.10, 未成年人在 |
./base.json | 与数据相同的轴, 对于此建筑外建的主题 |
./primitives.tokens.json | 一级调色板主题源别名 |
./registry/token-layer.json | 作为阴影的层中独立主题的一半 碎片 ——已折入登记基项,不能自行安装 |
根项是 dist/tokens.js 与 dist/tokens.d.ts 旁边——平版JavaScript,因为
节点拒绝剥离类型 node_modules (单位:千美元) .ts 条目为 1 a
注册消费者无法加载.
这里的一切都是由 build.mjs 从 src/**.tokens.json。编辑源头,绝不
dist/。 。 。 .
其余的就在这
- 从另一个项目安装和使用:
docs/CONSUMING.md - 密度梯子, 以及每个跑道上移动的 : https://ui.cueplus.com/docs/密度
- 漆轴,它的十包和每个拒绝的东西: https://ui.cueplus.com/docs/paint (中文(简体) )
- 这14对, 和10你的应用必须交付: https://ui.cueplus.com/docs/typefaces (中文(简体) )
- 这个
--cue-*以及一个主题如何填充: https://ui.cueplus.com/docs/theming (英语) - 您的版本有什么变化 :
node_modules/@cueplusplus/tokens/CHANGELOG.md