# @cssints/tokens 中文文档 规范地址：https://npmcn.com/package/%40cssints/tokens/ 版本：0\.35\.1 npm 元数据更新时间：2026-11-07T14:56:06.350Z 中文译文更新时间：2026-11-11T03:46:31.469Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cssints/tokens 原文对照：https://npmcn.com/package/%40cssints/tokens/?lang=original 项目主页：https://cssints.dev/ 源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler ## 关键信息（来自 npm 元数据） - 包体积（解压后）：290 kB，13 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=22 - 运行依赖：0 个 - peer 依赖：cssints ^0\.35\.0 - 首次发布：2026-10-10T20:57:57.355Z - 最新版本发布：2026-11-07T14:56:05.958Z - 近 30 天下载量：7316（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：43（近 12 个月 43 个） ## 中文简介 将 cssints 设置为 DTCG 数据: 开口道具、 Radix 颜色、 Flexoki 颜色、 合理颜色、 madoromi ## 安装 ```sh npm install @cssints/tokens ``` 也可以使用：`pnpm add @cssints/tokens`、`yarn add @cssints/tokens`、`bun add @cssints/tokens` ## README # @ cssints/ tokens (英语) 现成代号集 [点缀](https://npmcn.com/package/README.md),每集一个子路径导出 。 每一套都是简单的DTCG数据 (单位:千美元)`as const`你传递给 `createTokens` ,而暗值是覆盖对象 `createGlobalTheme`。 。 。 . 数据由上游软件包和文件以被绑定的版本生成(`bun run generate`) (中文(简体) ). 软件包没有 运行时间和否 `scope()`。 。 。 . ```ts // tokens.ts import { createTokens } from "cssints" with { type: "cssints" }; import { colors, easings, radii, shadows, sizes } from "@cssints/tokens/open-props"; import { light } from "@cssints/tokens/radix"; export const op = createTokens({ ...colors, size: sizes, radius: radii, ease: easings, shadow: shadows, }); export const rx = createTokens({ radix: { blue: light.blue, gray: light.gray } }); ``` ```ts // theme.ts, imported once by the entry import { createGlobalTheme, media } from "cssints" with { type: "cssints" }; import { shadowsDark } from "@cssints/tokens/open-props"; import { dark } from "@cssints/tokens/radix"; import { op, rx } from "./tokens.ts"; const scheme = media("(prefers-color-scheme: dark)"); createGlobalTheme(rx.radix, scheme, { blue: dark.blue, gray: dark.gray }); createGlobalTheme(op.shadow, scheme, shadowsDark); ``` ```ts // card.ts import { boxShadow, cn, color, p, transitionTimingFunction, } from "cssints" with { type: "cssints" }; import { op, rx } from "./tokens.ts"; export const card = cn( p(op.size._3), color(rx.radix.blue._11), boxShadow(op.shadow.shadow2), transitionTimingFunction(op.ease.easeOut3), ); ``` 说明 `card.ts` 持有模块所用的四个符号,即384 `tokens.ts` 生产。 减轻和阴影 没有 `@property` 他们自己的语法,所以他们的规则具有任何价值(`syntax: "*"`) (中文(简体) ). 说明 `theme.ts` 持有 黑暗的规则: ```css @property --ease-ease-out3 { syntax: "*"; inherits: true; initial-value: cubic-bezier(0, 0, 0.3, 1); } @property --radix-blue-11 { syntax: ""; inherits: true; initial-value: #0d74ce; } @property --shadow-shadow2 { syntax: "*"; inherits: true; initial-value: 0 3px 5px -2px hsl(220 3% 15% / 4%), 0 7px 14px -5px hsl(220 3% 15% / 6%); } @property --size-3 { syntax: ""; inherits: true; initial-value: 16px; } @layer _.a { ._16gq2dh { padding: var(--size-3); } ._6lyfev { transition-timing-function: var(--ease-ease-out3); } ._jwbgq6 { color: var(--radix-blue-11); } ._lwcu7u { box-shadow: var(--shadow-shadow2); } } @layer _.k { @media (prefers-color-scheme: dark) { :root { --radix-blue-1: #0d1520; /* ... */ --radix-gray-12: #eeeeee; } } @media (prefers-color-scheme: dark) { :root { --shadow-shadow1: 0 1px 2px -1px hsl(220 40% 2% / 34%); /* ... */ } } } ``` ## 套装 | 导入 | 出口 | 从 | | --- | --- | --- | | `@cssints/tokens/open-props` | `colors`, (中文(简体) ), `sizes`, (中文(简体) ), `remSizes`, (中文(简体) ), `fluidSizes`, (中文(简体) ), `contentSizes`, (中文(简体) ), `headerSizes`, (中文(简体) ), `relativeSizes`, (中文(简体) ), `radii`, (中文(简体) ), `borderSizes`, (中文(简体) ), `fontSizes`, (中文(简体) ), `fluidFontSizes`, (中文(简体) ), `letterSpacings`, (中文(简体) ), `fontWeights`, (中文(简体) ), `lineHeights`, (中文(简体) ), `easings`, (中文(简体) ), `springs`, (中文(简体) ), `shadows` (钥匙); `shadowsDark` (覆盖) | 1.7.23 打开道具 | | `@cssints/tokens/radix` | `light`, (中文(简体) ), `lightAlpha` (钥匙); `dark`, (中文(简体) ), `darkAlpha` (覆盖) | @radex-ui/ 颜色 3. 0.0 | | `@cssints/tokens/flexoki` | `flexoki` (单位:千美元)`base`数字 : `black`, (中文(简体) ), `paper`, (中文(简体) ), `50`.`950`; 8个口音 `50`.`950`(中文(简体) ) | kepano/ flexoki@ 8d723ba (英语) | | `@cssints/tokens/reasonable-colors` | `reasonableColors` (25个花色,遮阳) `1`.`6`(中文(简体) ) | 合理颜色0.4.0 | | `@cssints/tokens/madoromi` | `madoromi` (八道香炉) `haruHiru`.`fuyuYoru`12个中立人 14个墨子, `roles`, (中文(简体) ), `ansi`(中文(简体) ) | 请检查date=中的日期值 (帮助) | - **数据,不是a `createTokens` 电话.** 变量名称是符号路径,所以您将一组放在它的下面 前缀 : `createTokens({ radix: light })` 给 `--radix-blue-11`, (中文(简体) ), `createTokens(light)` 给 `--blue-11`开放道具, 半径和合理颜色都有一个 `blue`所以只有你能说哪一个是 `--blue-*`。数据也允许您选择 天平:类型成本和主题的大小按您通过的每个符(参见"Limits"). 一个插件的 `{ tokens }` 条目 获取您的结果 `createTokens` 调用,所以一个插件仍然可以在一个集上建立. - **钥匙.** 步骤保留上游名称。 以数字开头的密钥是 `_` 和代码中的密钥(`t.blue._7`, (中文(简体) ), `t.size._000`),如csints所读;变量保留了密钥(`--blue-7`) (中文(简体) ). 拉迪克斯的阿尔法鳞片是 `blueA`这样 他们的变量是 `--blue-a-3`。 。 。 . - **开道具.** `colors` 是19个胡同 `open-props/src/colors`, (中文(简体) ), `0`.`12`。 。 。 . `sizes` 是 px 缩放 (`size-px-*`, (中文(简体) ), `000`.`15`和命名的宽度 `xxs`.`xxl`· ; `remSizes` 缩放( r)`size-*`, (中文(简体) ), `000`.`15`, (中文(简体) ), `fluidSizes` `1`.`10` (单位:千美元)`clamp()`, (中文(简体) ), `contentSizes` 财务报告和审定财务报表 `headerSizes` `1`.`3` (单位:千美元)`ch`, (中文(简体) ), `relativeSizes` `000`.`15` (单位:千美元)`ch`) (中文(简体) ). `radii` 为: `1`.`6` 财务报告和审定财务报表 `round`,在雷姆像上游. `fontSizes` 为: `00`.`8` (雷姆语), `fluidFontSizes` `0`.`3`, (中文(简体) ), `letterSpacings` `0`.`7` (他们). `fontWeights` 为: `1`.`9`, (中文(简体) ), `lineHeights` `00`.`5`。 。 。 . `easings` (单位:千美元)`cubicBezier`这是 立方贝塞尔和相位,带有 Penner 曲线(`easeCubicOut`, (中文(简体) ), `easeQuintInOut`,为圆环的正弦; `springs` 页:1 弹簧和弹簧 `linear()` (见"通鉴". `shadows` 是许多迹象 `shadowsDark` 它们的覆盖 `createGlobalTheme`数字 : `--shadow-color` 财务报告和审定财务报表 `--shadow-strength` 被写入每个值,光和暗. - **来 来 来.** cssints 以雷姆、克或克表示一个符号 `@property` 初始值为 px( at 16px)并声明 值本身在 `:root`,因此符号跟随用户的字体大小. 打开 `:root` a 一个 `em` 或者说 `ch` 这是根的. 字母间隔,和 `ch` 大小,如果它们应该遵循元素的字体,则使其不继承:然后 每个元素都计算自己的(`:where(*){--tracking-1:.025em}`: ```ts createTokens({ tracking: letterSpacings }, (path) => ({ var: path.join("-"), inherit: false })); ``` - **拉迪克丝.** `light` 有31个坚固的天平, `lightAlpha` 页:1 `blackA`, (中文(简体) ), `whiteA`。 。 。 . `dark` 财务报告和审定财务报表 `darkAlpha` 以同样的道路, `{ blue: { _1: "#0d1520", ... } }`,用于 `createGlobalTheme`。要选择天平,要选择 以物配主,以物配主, 您没有创建的符号的覆盖是一个类型错误 . - **马多罗米.** 8个香味,一个季节(`haru` 春天时, `natsu` 夏天,我们一起来, `aki` 秋天时, `fuyu` 冬季)逐天(`hiru`(中文(简体) ) 或夜间(`yoru`: `haruHiru` . `fuyuYoru`。每个键相同,上游名称在 ASCII 中 (单位:千美元)`hyoshi`没有 `hyōshi`: 纸 `kami`, (中文(简体) ), `hyoshi`, (中文(简体) ), `chitsu`, (中文(简体) ), `nijimi0`.`2`, (中文(简体) ), `kasure0`.`2`; 笔墨 `usuzumi0`, (中文(简体) ), `usuzumi1`, (中文(简体) ), `sumi`; 14个墨水(`sakura`, (中文(简体) ), `nadeshiko`, (中文(简体) ), `botan`, (中文(简体) ), `fuji`, (中文(简体) ), `kikyo`, (中文(简体) ), `beni`, (中文(简体) ), `akane`, (中文(简体) ), `kaki`, (中文(简体) ), `yamabuki`, (中文(简体) ), `wakaba`, (中文(简体) ), `tokiwa`, (中文(简体) ), `sora`, (中文(简体) ), `ruri`, (中文(简体) ), `ai`) (中文(简体) ). `roles` 是样式指南的用法( y)`text`, (中文(简体) ), `keyword`, (中文(简体) ), `link`, (中文(简体) ), `error`, (中文(简体) ), `success`, (中文(简体) ), `added`,...:40)和 `ansi` 16个终端颜色,按数字分列(`ansi._0`.`ansi._15`, (中文(简体) ), `--madoromi-ansi-0`.`15`· ; `"0"` 或者说 `_0` 以超度计。 一个角色是其颜色的值,而不是别名,所以在另一个主题上是正确的 风味. 哪个颜色代表什么 上游 [样式指南](https://github.com/the-moonwitch/madoromi/blob/f8bcc5aa1ec3f731fcba9471be7caa5df1ab5695/palettes/style-guide.md)。 。 。 . 每种口味都有相同的路径,所以一种口味就是道具,而其他任何口味都是其中的主题,就像: ```ts import { createGlobalTheme, createTokens, media } from "cssints" with { type: "cssints" }; import { madoromi } from "@cssints/tokens/madoromi"; export const m = createTokens({ madoromi: madoromi.akiHiru }); // --madoromi-kami, --madoromi-roles-text, ... createGlobalTheme(m.madoromi, media("(prefers-color-scheme: dark)"), madoromi.akiYoru); // day and night createGlobalTheme(m.madoromi, '[data-season="haru"]', madoromi.haruHiru); // another season ``` 主题设置了风味的每个符号(82). 晚上和一季 给每对选手 (单位:千美元)`[data-season="haru"][data-mode="yoru"]`) (中文(简体) ). ## 对比度 `check.contrast` 读取默认和每个主题。 有了Radix的组合,背景上的文字步骤就给出了这些 成果(`test/fixtures/radix-theme.ts` 检查所有31个天平,光和暗: - 第12步在1步或第2步上:所有平面上,光和暗都显示为4.5分或以上. - 第11步出道于第1步或第2步:在黑暗中为4.5分或以上. 从光线来看,这些对子低于4.5. Radix 调制组第11步,不是 2. 比率随着csints减少: | 对 | 琥珀 | 绿色 | 玉坛 | 橙红色 | 泰尔 | 黄色 | | --- | --- | --- | --- | --- | --- | --- | | 11对1 | | | | 4.41 (中文(简体) ) | 4.49 (中文(简体) ) | 4.48 联合国 | | 11对2 | 4.43 国家 | 4.49 (中文(简体) ) | 4.43 国家 | 4.24 联合国 | 第4.34条 | 4.42 (中文(简体) ) | `check.contrast(t.radix.orange._11, t.radix.orange._2, { min: 4.5 })` 失败构建 : `contrast 4.24 is below 4.5: radix.orange.11 #cc4e00 on radix.orange.2 #fff7ed, in the default values`。 。 。 . 与玛多罗米, `test/fixtures/madoromi-tokens.ts` 检查所有八种花: `sumi` 打开 `kami` 7个或7个以上(7.17个至 第11/48号决议,附件, `usuzumi0` 打开 `kami` 4.5或以上(4.52至7.44), `kasure2` (小案文,评论) `kami` 3个或3个以上(3.5个) 改为5.74。 日花是每个射程的低端. ## 限制 - **影子在类型中的成本.** cssints 检查每个阴影值 `#` 语法:大约3万 瞬间一层,所以 `shadows` (11个最高7层的代币) `shadowsDark` 作为主题 1.2 M多. - **类型成本** (tsgo,每行一个文件;一六分之一的颜色成本约为80即时): | 打电话 | 证据 | 检查时间 | | --- | --- | --- | | `color("red")` (基线) | 0.16门 | 0.08s (中文(简体) ) | | 打开道具 `colors` (247个令牌) | 0.18门 | 0.09 (英语) | | 打开道具,所有道具组(453个)和 `shadowsDark` 主题 | 2.7海里 | 1.8 s (简体中文) | | 半径 `light` (372起) | 0.19门 | 零点10分 | | 半径 `light` 编辑 `dark` 主题 | 0.27门 | 零点12分 | | 半径 `lightAlpha` 编辑 `darkAlpha` 主题 | 0.54门 | 0.29s (中文(简体) ) | | 半径 `light` 财务报告和审定财务报表 `lightAlpha` 在一个电话中,两个主题 | 0.66门 | 0.38 门 | | Flexoki (119) (英语) | 0.17门 | 0.09 (英语) | | 合理颜色( 150) | 0.17门 | 零点10分 | | 玛多罗米,一种风味(82),另一种作为主题 | 0.20门 | 0.13s (中文(简体) ) | 单声道在TypeScript的极限(TS2589,"过深")以5M左右停止. ## 许可证 密码是MIT(`LICENSE`) (中文(简体) ). 数据保留其来源的许可证: - **打开道具**: MIT,版权 (c) 2021 Adam Argyle. - **Radix 颜色**: MIT,版权(c)2021 Radix. - **弗来克索克语Name**: MIT,版权 (c) 2023 Steph Ango. - **合理颜色**: MIT,版权 (c)2020 马修·豪威尔. - **玛多罗米**: MPL-2.0,版权-月亮witch (samhain). 每个文件的 MPL 应用 : `src/madoromi.ts` 编辑 `dist/madoromi.*` 从中构建的MPL-2.0,并带有其通知和源 URL 在承诺中;其余 包留在麻省理工学院。 这些文件的更改在 MPL 下; 在您的代码中使用它们不是 (单位:千美元)[MPL - 2.0 导弹](https://mozilla.org/MPL/2.0/)(第3.3节). 麻省理工学院每个来源的麻省理工学院通知,其版权线上方为: > 特此免费准许任何人获得该软件的复制件和与之有关的 文档文件("软件"),在软件中处理,不受限制,包括不受限制 软件的使用、复制、修改、合并、出版、分发、分版使用权和/或销售权,以及 获得软件的人这样做,但须符合下列条件: > > 上述版权通知和本许可通知应载入版权通知的所有副本或大部分 软件. > > 软件是提供的"AS IS", 没有任何种类的恐惧, 释放或渗透, 包括但不限制 雇佣军的戒备,对特别目的和非目的的证明。 永远也不要 B. 任何索赔、救济或其他负债,不论在合同、合同或 产生于、出自或涉及软件或使用软件或其他交易的其他事项. ```bash cd packages/tokens && bun run generate # src/*.ts from the devDependencies and the pinned files, then vp fmt cd packages/tokens && bun run test # a fixture per set through the engine (sheets, Radix theme and contrast); bun run typecheck: the type test ``` ## 常见问题 ### @cssints/tokens 是什么？ 将 cssints 设置为 DTCG 数据: 开口道具、 Radix 颜色、 Flexoki 颜色、 合理颜色、 madoromi ### 如何安装 @cssints/tokens？ 在项目目录运行 npm install @cssints/tokens，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cssints/tokens 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cssints/tokens 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @cssints/tokens 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @cssints/tokens 可以商用吗？ @cssints/tokens 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @cssints/tokens 的下载量有多少？ 根据 npm 官方下载统计，@cssints/tokens 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,316 次，日均约 244 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cssints/tokens 还在维护吗？ 最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。