@ cssints/ tokens (英语)

现成代号集 点缀,每集一个子路径导出 。 每一套都是简单的DTCG数据 (单位:千美元)as const你传递给 createTokens ,而暗值是覆盖对象 createGlobalTheme。 。 。 . 数据由上游软件包和文件以被绑定的版本生成(bun run generate) (中文(简体) ). 软件包没有 运行时间和否 scope()。 。 。 .

// 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 } });

// 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);

// 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 持有 黑暗的规则:

@property --ease-ease-out3 {
  syntax: "*";
  inherits: true;
  initial-value: cubic-bezier(0, 0, 0.3, 1);
}
@property --radix-blue-11 {
  syntax: "<color>";
  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: "<length>";
  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%); /* ... */
    }
  }
}

套装

• 数据,不是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}:

  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 以超度计。 一个角色是其颜色的值,而不是别名,所以在另一个主题上是正确的 风味. 哪个颜色代表什么 上游 样式指南。 。 。 . 每种口味都有相同的路径,所以一种口味就是道具,而其他任何口味都是其中的主题,就像:

  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 检查每个阴影值 <shadow># 语法:大约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 导弹(第3.3节).

麻省理工学院每个来源的麻省理工学院通知,其版权线上方为:

特此免费准许任何人获得该软件的复制件和与之有关的 文档文件("软件"),在软件中处理,不受限制,包括不受限制 软件的使用、复制、修改、合并、出版、分发、分版使用权和/或销售权,以及 获得软件的人这样做,但须符合下列条件:

上述版权通知和本许可通知应载入版权通知的所有副本或大部分 软件.

软件是提供的"AS IS", 没有任何种类的恐惧, 释放或渗透, 包括但不限制 雇佣军的戒备,对特别目的和非目的的证明。 永远也不要 B. 任何索赔、救济或其他负债,不论在合同、合同或 产生于、出自或涉及软件或使用软件或其他交易的其他事项.

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