@ code- sherpas/ pharos- tokens (英语)
代号"Sherpas"的设计标志. 框架-不可知论. DTCG + 样式词典 v4 + OKLCH.
部分 法罗,代码Sherpas的设计系统:它的视觉方向和
每个符号的值在
Pharos 设计系统文物, (中文(简体) ),
在此作为符号和组件发布 pharos-react,以及程序的文件(决定、路线图、,
质量标准(中文(简体) )
生活环境 方案a Pharos。 。 。 .
这个包裹里有什么
此软件包定义 原子值 在代码Shelpas的视觉系统:颜色,间隔,半径,打字,阴影,z-index,持续时间,放松,以及布局宽度和断点. 它们来自任何前端(React, Vue, Svelte, React Introduct)和后端(交易邮件,PDF,报告).
它没有组件。 反应组件存在 @code-sherpas/pharos-react 并将此软件包作为同伴依赖.
安装
pnpm add @code-sherpas/pharos-tokens
# or npm / yarn
使用量
备选案文A——CSS自定义属性(建议)
在您的应用程序入口处导入 CSS 令牌 :
@import '@code-sherpas/pharos-tokens/styles.css';
或,从JS/TS进入点:
import '@code-sherpas/pharos-tokens/styles.css';
两种入境点的船舶类型申报,因此附带效应的进口类型检查与 noUncheckedSideEffectImports (默认自 TypeScript 6 起) declare module。 。 。 . @code-sherpas/pharos-tokens/css 是原名下相同的样式表,并继续工作.
这暴露了 --pharos-* 打开 :root。直接或通过 Tailwind 任意值使用它们:
.button-primary {
background: var(--pharos-color-primary-600);
color: white;
}
<div class="bg-[var(--pharos-color-neutral-900)] text-white p-[var(--pharos-spacing-4)]">…</div>
备选案文B——打出的对象(JS/TS)
import { tokens } from '@code-sherpas/pharos-tokens';
const darkSurface = tokens.color.neutral['900'];
const cardRadius = tokens.radius['2xl'];
每个符号路径都被输入,所以一个被重新命名或被移除的符号会失败您的编译. 声明不需要 resolveJsonModule 也没有 skipLibCheck,并编译为 moduleResolution bundler, (中文(简体) ), node16 财务报告和审定财务报表 nodenext。 。 。 .
备选案文C——平稳常数(选择性进口)
import { PharosColorPrimary600, PharosRadius2xl } from '@code-sherpas/pharos-tokens/tokens.js';
备选办法D-DTCG来源(海关管道)
对于你自己的变换(iOS,Android,Figma等):
import colorDtcg from '@code-sherpas/pharos-tokens/dtcg/color';
// DTCG object with $value, $type, $description
消费者规则
见 消费者的规则 在编号(Programa Pharos)中,Pharos保存其文件(决定D27).
托肯结构
| 家属 | 示例路径 | 说明 |
|---|---|---|
| 基础 | color.base.{white,black} | 纯白而黑. |
| 中立者 | color.neutral.{50..950} | 灰度,在更暗的阶梯上略为被海军所触动. |
| 小学 | color.primary.{50..900} | 海蓝色,比例为50-900. 600是基地Hue. |
| 语义 | color.semantic.{success,error,warning,info}.{fg,bg,on} | 成功/错误/警告/信息. fg + on 双人通过WCAG AA. |
| 间距 | spacing.{0..24} | 尾风相容的缩放 rem。 。 。 . |
| 半径 | radius.{none,sm,md,lg,xl,2xl,3xl,full} | 转角圆相. |
| 类型 | font.{family,weight,size,lineHeight,letterSpacing}.* | 特写. 机构默认 = size.sm (14px) (英语). |
| 阴影 | shadow.{sm,md,lg,xl} | 高处. |
| Z指数 | z.{0,header,above-header,modal-overlay,modal,drawer-overlay,drawer,dropdown,tooltip} | 语义相通而非文义相通. |
| 会期 | duration.{fast,normal,slow} | 过渡. |
| 缓解 | easing.{in,out,in-out} | 立方体-贝氏曲线. |
| 宽度 | width.panel | 按角色排列的宽度. panel: 工作表和侧面小组(24rem). |
| 断点 | breakpoint.panel | 视港断点按角色分列(D32);在JS中读取. |
捐款
pnpm install- 修改或添加符号在
src/*.tokens.json(DTCG格式). pnpm build——验证"样式词典"编译.pnpm test——WCAG + DTCG 验证必须通过.pnpm changeset——申报变更类型(patch / minual/major).- 打开公关.
CI验证了WCAG 2.1 AA在每种颜色/上色对上的对比. 如果 PR 打破了对比, 则无法合并 .
许可证
麻省理工学院. 见 自由主义。 。 。 .