@ archetypeai/ ds- lib- tokens (英语)
尾风 v4 主题 用于Archetype AI设计系统. 提供有设计系统组件口味的语义设计符号,彩色调色板和基底样式.
安装
npm install @archetypeai/ds-lib-tokens tailwindcss
使用量
在您的全球 CSS 中导入 Tailwind 之前的主题 :
@import '@archetypeai/ds-lib-tokens/fonts.css'; /* optional → PP Neue Montreal (requires font files in static/fonts/) */
@import '@archetypeai/ds-lib-tokens/theme.css';
@import 'tailwindcss';
<div class="bg-background text-foreground p-md border-border rounded-lg">
Hello world
</div>
包含什么
| 特性 | 细节 |
|---|---|
| 语义符号 | OKLCH CSS 变量( 阴影样式) : background, (中文(简体) ), foreground, (中文(简体) ), card, (中文(简体) ), popover, (中文(简体) ), primary, (中文(简体) ), secondary, (中文(简体) ), muted, (中文(简体) ), accent, (中文(简体) ), destructive, (中文(简体) ), border, (中文(简体) ), separator, (中文(简体) ), scrollbar, (中文(简体) ), scrollbar-track, (中文(简体) ), input, (中文(简体) ), ring, (中文(简体) ), chart-1– 说吧 –5, (中文(简体) ), sidebar, (中文(简体) ), table, (中文(简体) ), table-header, (中文(简体) ), table-section, (中文(简体) ), atai-neutral, (中文(简体) ), atai-good, (中文(简体) ), atai-warning, (中文(简体) ), atai-critical, (中文(简体) ), atai-always-black, (中文(简体) ), atai-always-white |
| 品牌颜色 | 4平方 OKLCH 值, 无缩放 : brand-babyblue, (中文(简体) ), brand-yellow, (中文(简体) ), brand-black, (中文(简体) ), brand-white |
| 调色板 | 26个OKLCH坡道:Tailwind的22个股道平面(red.rose, (中文(简体) ), slate, (中文(简体) ), gray, (中文(简体) ), zinc, (中文(简体) ), neutral, (中文(简体) ), stone外加4个设计-系统中性(mauve, (中文(简体) ), olive, (中文(简体) ), mist, (中文(简体) ), taupe每一个运行50-950次 加一个 850 步骤 - 见下文 |
| 间距 | --spacing-xs (0.25雷姆) • --spacing-xl (1.5雷姆),用作 p-md, (中文(简体) ), gap-lg,, , , , , , , , |
| 半径比例 | --radius-xs → --radius-xl, (中文(简体) ), --radius-full附加时 --atai-radius-interactive (交互式内容的无线电, rounded-interactive(中文(简体) ) |
| 图标中风宽度 | --stroke-width-icon-{default,interactive,status,emphasis} (1/1.25/1.5/2) Lucide 图标 |
| 宽度级警卫 | --max-width-*编号 :--min-width-* 尾风别名 --container-* 缩放,所以 max-w-md 确定容器大小,而不是t恤间隔标志 |
| 黑暗模式 | .dark 类通过 @custom-variant dark (&:where(.dark, .dark *)) |
| 类型 | 字体家族堆栈,并有相匹配的倒置,成对的类型缩放(--text-*--line-height 编号 : --letter-spacing 每一步,加 --text-2xs),和一个语义HTML基层 |
| 滚动栏 | --scrollbar编号 :--scrollbar-track (hum+音轨颜色, bg-scrollbar和 --scrollbar-width。全球应用在底层,所以每个滚动器都遵循主题,没有应用代码 |
品牌颜色和调色板定义于 colors.css 自动装入 theme.css。 。 。 .
这个 850 步骤
每个坡道都有一个 850 尾风没有树荫 尾风的尺度很粗糙 zinc-800 → zinc-900 在 OKLCH 光度中降出 0.064 个- 它留下了 暗模式, 只有一个表面站 --card 财务报告和审定财务报表 --popover 两人必须分享,所以 Card 内置 a Dialog 只能用它的戒指来区分.
每个 850 为其每个构成部分的中点 800 财务报告和审定财务报表 900 在OKLCH的邻居们, 被装入了SRGB, 在那里,一个正中点落在它之外(emerald, (中文(简体) ), sky, (中文(简体) ), rose 染色体减少、轻度和湿度. --card 用途 zinc-850 在暗模式下,给予表面四个步骤而不是三个步骤:
| L | 符号 | 表面 |
|---|---|---|
| 0.141 (中文(简体) ) | --background | 页 次 |
| 0.210 (韩语) | --popover 编号 : --sidebar 编号 : --secondary 编号 : --table-header | 对话框、 下拉菜单、 选择、 侧面板、 侧边栏、 表格页眉 |
| 0.242 (中文(简体) ) | --card 编号 : --table | 纸牌、提醒、项目、图表、表格 |
| 0.274 (简体中文) | --input 编号 : --muted 编号 : --border | 田地、水井、边缘 |
光线模式不受影响 : --card 留下来 zinc-50 对白 --popover。 。 。 .
该表有它自己的表面: --table 等于 --card 今天,一个桌子读作一个面板, 并且是它自己的象征,所以两者可以不触摸卡. --table-header 在两个主题方面都落后一步(zinc-100 光线, zinc-900 黑了,所以头从身体上退去,而 --border 线条下保持可见. --table-section 填充体内的分区分隔符( n)zinc-200 光线, zinc-950 黑暗),是两个主题中比标题更深的一步. 横行徘徊和选择 --muted。 。 。 .
类型比例
每个股票 text-* 步骤带有自己的行高和光学字母间隔,所以 text-sm 独自一人在品牌上—— 从不对 text-* 工具为 leading-* 或者说 tracking-*斜道已经供应了两者 随着体积的增大,跟踪会收紧;而体积缩小会拉松.
| 步骤 | 大小 | 线高 | 字母间距 |
|---|---|---|---|
text-2xs | 10px (英语) | 14px 时速 | 0.02毫米口径 |
text-xs | 12px 时速 | 16px 时 | 0.01m (简体中文) |
text-sm | 14px 时速 | 20px (英语) | 0 个 |
text-base | 16px 时 | 24px (英语) | 0 个 |
text-lg | 18px (简体中文) | 26px (韩语) | - 0.005毫米口径 |
text-xl | 20px (英语) | 28px (英语) | - 0.01毫米口径 |
text-2xl | 24px (英语) | 30px 时速 | - 0.015 纳米 |
text-3xl | 30px 时速 | 36个px | - 0.02毫米(千分位数) |
text-4xl | 36个px | 40px (英语) | - 0.025毫米口径 |
text-5xl | 48px 坐标 | 52px (英语) | - 0.03m (中文(简体) ) |
text-6xl– 说吧 –text-9xl | 60-128px (中文(简体) ) | 1个 | -0.035 / -0.04em (单位:千美元) |
线-高音为根大小的整像素,所以相邻行和细胞共用像素网格.
text-2xs (10px)是密集元数据的下限——使用它而不是任意 text-[10px]编号 :text-[11px]字母间隔是按大小而不是按家庭键的 font-mono 时间 lg 及以上继承负跟踪;在尺寸上单子被使用在设计系统中(xs编号 :sm0或正数.
原始人遵循同样的规则: 不 leading-* 或者说 tracking-* 坐在旁边 text-* 在任何地方 ds-ui-svelte一种有意识的超规模建筑是: Counter数字滚筒text-[1em] + 键 leading-(--counter-row) 内 counter.svelte),它需要相适应的格子和固定行高来激活一个滚动的数字;这是唯一被接受的任意缩放地. 时 size="inherit" 这行是 1lh,所以一个赤裸的计数器在运行的文本卷 在它继承的行高上而不是在药丸的固定行上.
语义 HTML 基层
theme.css 样式一小组 作者内容 如此平庸的标出元素在品牌上没有工具类. code 财务报告和审定财务报表 pre 不需要规则: 尾风预飞已经给他们了 --font-mono,而PP Neue Montreal Sans和Mono共享相同的x高和盖高,所以内置代码与周围的文本大小相同.
| 元素 | 样式 |
|---|---|
body | bg-background text-foreground font-sans text-sm ——基数在此设定一次并继承 |
h1 编号 : h2 编号 : h3 | text-primary, (中文(简体) ), text-3xl 编号 : text-2xl 编号 : text-xl, (中文(简体) ), font-normal, (中文(简体) ), text-balance· ; h1 (单位:千美元) capitalize |
h4 编号 : h5 编号 : h6 | text-muted-foreground, (中文(简体) ), text-lg 编号 : text-base 编号 : text-sm, (中文(简体) ), font-normal |
p | text-primary text-pretty (继承大小) |
small | text-primary text-xs |
strong | font-medium (继承大小) |
blockquote | border-s-2 ps-6 italic |
a | cursor-pointer ——只付得起,没有颜色和大小 |
仅 h1– 说吧 –h6 财务报告和审定财务报表 small 携带字体大小;其他所有东西都继承,所以在父母身上的大小总是会取胜.
故意无名: span, (中文(简体) ), label, (中文(简体) ), em, (中文(简体) ), code, (中文(简体) ), pre。 。 。 . 它们是结构性的——它们出现在第三方部件内部,组成库并突出代码,关于它们的元素规则会比每个消费者的母体大小强,这迫使应用程序重复 text-* 每个内线的孩子。 他们从父母那里继承遗产. a 在同一个家庭 和携带 无打字 出于同样的原因,但它确实得到 cursor-pointer: UA 工作表只给指针 a[href],因此锚被接通到点击处理器上,或者通过一个 child 片断在 href 土地——否则将读作纯文本。 后果:赤裸的链接仍然视平 (Tailwind preflight gives) a color: inherit; text-decoration: inherit直到应用程序的样式, 一个纯装饰性的锚现在显示一个它没有获得的指针; <label> 打印为 Label 原始的。 原始的. h1 标题为(capitalize,以 normal-case);没有其他标题带有文本转换形式——大写通过 Label 变体和 typography="mono" 轴。 所有元素默认为 border-border 财务报告和审定财务报表 outline-ring/50。 。 。 .
滚动条也由底板层管理:普遍性 * 规则集 scrollbar-color 编号 : scrollbar-width 从 --scrollbar 编号 : --scrollbar-track 编号 : --scrollbar-width因此,每个 overflow 框中,包括您自己的应用程序中的内容 无类. 宣布为 * 而不是说 :root 两种财产都是继承的,但 var() 宣言所在的替代品,因此 * 是什么让一个 .dark 打开 任意 树下翻转树下卷轴.
只有 标准 使用滚动条属性 。 在Chrimium 121+ / WebKit 18.2+ 一个非-auto scrollbar-color 或者说 scrollbar-width 选择遗留的元素 ::-webkit-scrollbar 伪元素,所以两者是相互排斥的而不是分层的——标准配对是唯一一个Chromium,WebKit和Gecko都执行. 后果:拇指半径和明显的徘徊颜色是无法表示的(发动机从拇指颜色得到徘徊), --scrollbar-width 仅使用 auto | thin | none,而macOS则使 覆盖 滚动条,不占用布局空间而忽略厚度。 通过重新定义符号来重取主题; 用 [scrollbar-width:none]。 。 。 .
字体
fonts.css 本包中包含两种类型: @font-face 声明: 13个WOFF2脸 pP Neue Montreal Sans + 摩诺font-display: swap指出 /fonts/*.woff2附加时 20个相匹配的倒地相 (每OS基地×每重量). 字体二进制本身是 没有 npm 包的一部分 - CLI(ds create 编号 : ds init 编号 : ds add --fonts <path>复制到您的项目中 static/fonts/. 13个文件共计~820 KB(铸币局的TTF/OTF为2.1 MB);如果品牌字体得到更新,则用字体Tools从原作中再生:
python3 -c "from fontTools.ttLib import TTFont; from pathlib import Path
for src in sorted(Path('.').glob('PPNeueMontreal*.[to]tf')): f = TTFont(src); f.flavor = 'woff2'; f.save(src.with_suffix('.woff2'))"
当二进制缺席时,倒背面取而代之: 当地 系统字体,取自PP Neue Montreal本身的度量标准——x高,平均字符宽度,和行框——通过 size-adjust + 键 ascent编号 :descent编号 :line-gap-override,所以一个没有规定的项目仍然按照品牌字体的比例制作,并且布局相同. 当二进制出现时,同样的面相使倒回 brand-font互换无倒移(没有布局变换/CLS).
选择倒计时基地 每个操作系统 (叠入) theme.css 命令它们,这样每个平台都会解决其最接近的本地字体,全部确认 local()- 可达到:
| 苹果公司 | 窗口 | 机器人 | |
|---|---|---|---|
| 圣诞 | 诺伊河脊 | 参数 | 机器人 |
| 单曲 | 门罗 | 康索拉斯/卡斯卡迪亚莫诺 | 单人机器人 |
SF Mono被故意不使用——它无法通过 local()数字 @capsizecss 由正则权重(如果品牌字体的度量衡改变,则重新生成).
预装
font-display: swap 加上量度相配的倒置可以实现互换无倒置,但第一个涂料仍然发生在倒置相上,除非浏览器被告知在发现"倒置"之前取出品牌字体 @font-face 规则。 因此,CLI在上面插入了3个预装值 %sveltekit.head% 内 src/app.html 当它安装字体时 - 面部涂料使用: 书 (400个桑, body, (中文(简体) ), 中型 (500桑语, strong 和强调) 单行本 (400个单数,标签,徽章,计数). 当翻译的文本最需要时.
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontreal-Book.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontreal-Medium.woff2" />
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/PPNeueMontrealMono-Book.woff2" />
crossorigin 即使对同源字体来说也是强制性的 - 字体请求总是CORS- mode,没有它的预加载不匹配,所以浏览器下载了文件两次. 如果你的主人没有 src/app.html CLI 打印这些标签供您粘贴到 <head>。 。 。 .
体重已经申报 每个实例数字 : local('Helvetica Neue') 总是决定 经常 切除无论 font-weight 因此,一张脸会默默地使Medium成为常态 大胆 700. 因此,每个重量都表示其实际削减(local('HelveticaNeue-Medium') 编号 : -Bold(见A/C.5/49/70,附件)。 没有真中子(Arial, Menlo, Cascadia)的基数省略了500个,所以它和正中子匹配.