@baukit/ui-tokens
一个无依赖性的设计脚本计划,验证器,可访问性检查器,以及网络和React Industrial的决定性编译器.
定义和验证符号
import { checkContrast, parseTokens, type DesignTokens } from '@baukit/ui-tokens';
const tokens = parseTokens(untrustedJson);
const violations = checkContrast(tokens);
颜色不透明 #RGB 或者说 #RRGGBB 有光和暗变体的 sRGB 值. 彩叶需要至少一个语义组和名称. 类型、空间、半径、运动和高地均被命名为尺度. contrastPairs 声明前景/背景语义路径; 普通文本必须达到 4. 5:1并标出条目 largeText 这两个主题必须达到3:1。 校验错误包括路径, 例如 $.color.text.primary.light,而对比失败包括计算出的比例.
校验是手写而非Zod基:schema是小的,这使得生产依赖性保持在了零,它使得诊断能够适应语义符号路径.
用颜色工作
颜色帮助者接受三到六位数的 SRGB 颜色,带有
选项 #。 规范化和计算出的颜色使用小写 #rrggbb 形式.
import {
blendColors,
chooseReadableForeground,
hexToRgb,
normalizeHexColor,
rgbToHex,
} from '@baukit/ui-tokens';
normalizeHexColor('09C'); // '#0099cc'
hexToRgb('#0099cc'); // { r: 0, g: 153, b: 204 }
rgbToHex({ r: 0, g: 153, b: 204 }); // '#0099cc'
blendColors('#ffffff', '#000000', 0.25); // '#404040'
const foreground = chooseReadableForeground('#005fcc', ['#ffffff', '#111111'], 4.5);
// { foreground: '#ffffff', ratio: 5.98..., meetsThreshold: true }
blendColors 夹住其比值 [0, 1]。 。 。 . chooseReadableForeground 返回时
第一个符合门槛的候选人。 如果没有人通过,它返回
比例最高的候选人 meetsThreshold 改为 false。 。 。 .
检查语义对比矩阵
DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS 定义这些角色路径 :
color.background.primary财务报告和审定财务报表color.background.elevatedcolor.text.primary财务报告和审定财务报表color.text.mutedcolor.border.primary财务报告和审定财务报表color.focus.ringcolor.action.primary, (中文(简体) ),color.action.onPrimary, (中文(简体) ),color.action.secondary,以及color.action.onSecondarycolor.status.success, (中文(简体) ),color.status.warning, (中文(简体) ),color.status.danger,以及他们的onSuccess, (中文(简体) ),onWarning,以及onDanger前景
文字和有标签的展望需要4.5:1. 边界和焦点圈需要 3:1 两个背景角色. 检查器测试每条要求 光和暗的变体并返回每一个失败.
import {
checkSemanticContrastMatrix,
DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS,
} from '@baukit/ui-tokens';
const failures = checkSemanticContrastMatrix(tokens, [
...DEFAULT_SEMANTIC_CONTRAST_REQUIREMENTS,
{
foregroundRole: 'color.chart.label',
backgroundRole: 'color.chart.background',
minimumRatio: 4.5,
},
]);
通过不同的列表来替换默认值 。 缺少的角色或最小值 在可能为1至21的WCAG范围外抛出一个描述性错误.
计算垂直布局
产品提供每个维度和门槛。 两个函数都否定 或非无限值.
import { getUsableContentHeight, isShortViewport } from '@baukit/ui-tokens';
getUsableContentHeight(720, 112, 128); // 480
isShortViewport(600, productLayout.shortViewportHeight); // true
编译
import { toCssVariables, toReactNative } from '@baukit/ui-tokens';
const css = toCssVariables(tokens);
const nativeModule = toReactNative(tokens);
toCssVariables 输出已排序 --bk-* 报表 :root,然后在 [data-theme="dark"]。 。 。 . toReactNative 发出一个排序的巢穴 tokens 常数与推断 Tokens 类型。 无障碍声明是构建元数据,在生成的运行时常数中被省略.
执行符号 no-raw-color
设计纸盒的图案只有在颜色远离组件时才值得使用.
@baukit/ui-tokens/eslint 报告 CSS 的 ESLint 平面配置插件
直接用应用程序代码书写的颜色 .
import uiTokens from '@baukit/ui-tokens/eslint';
export default [
{
plugins: { '@baukit/ui-tokens': uiTokens },
rules: {
'@baukit/ui-tokens/no-raw-color': [
'error',
{ allowedFiles: ['src/theme/tokens.ts', 'src/theme/**'] },
],
},
},
];
configs.recommended 当产品需要不时, 以默认方式打开规则
选项:
import { configs } from '@baukit/ui-tokens/eslint';
export default [configs.recommended];
规则报告 #rgb, (中文(简体) ), #rrggbb,以及 #rrggbbaa 十六进制值加
rgb(), (中文(简体) ), rgba(), (中文(简体) ), hsl(),以及 hsla() 任何出现的地方,在字符串和
模板文字相同。 CSS 等颜色关键词 crimson 只报告
样式类似位置: 颜色命名属性, a StyleSheet.create 电话,a
style, (中文(简体) ), color,或 fill JSX属性,a css 标记模板,或
名称结束于 style, (中文(简体) ), theme, (中文(简体) ), palette,或 colors该
限制会保留路由名称,测试id,以及普通的发音去掉报告.
选项 :
| 选项 | 默认 | 含义 |
|---|---|---|
allowedFiles | [] | 类似光滑的路径, 可以声明生色 . * 在路径段内匹配, ** 横跨各段。 把标志性定义放在这里. |
allowedValues | transparent, (中文(简体) ), currentColor, (中文(简体) ), inherit, (中文(简体) ), none | 文学作品随处可见 条目添加默认值 . |
additionalStyleProperties | [] | 额外的属性或属性名称被视为风格相近. |
reportKeywords | true | 设定为 false 仅报告十六进制和功能标记. |
边界
此软件包共享语义值, 如 color.background.primary这是故意的,不是
设计系统而不是跨平台组件库:DOM和React Industrial组件,
互动行为,原始品牌-palette决定, 和产品主题都留在它之外.
exampleTokens 证明每个团体都是测试对象 这不是Baukit视觉语言,和
把它复制到一个产品中作为起动调色板并不是它的目的.
生产入口没有运行时间依赖. eslint 是一个可选的对等依赖
仅通过 /eslint 子路径, 因此导入包永远不会加载它 .