@darkalpha/nova-tokens (韩语)

设计标志和Nova UI背后的彩色引擎. 框架不可知,零依赖.

import { auditContrast, generateScale, getResolvedTheme, themeCss } from "@darkalpha/nova-tokens";

generateScale("#6d4aff"); // { 50: "#f6f7ff", …, 600: "#6d4aff", …, 975: "#150644" }

const theme = getResolvedTheme("vibrant", { brand: { primary: "#e11d48" } });
theme.light["primary-solid"]; // "#e11d48" (kept: white text on it passes 4.5:1)
auditContrast(theme).filter((c) => !c.pass); // []

themeCss(theme, ":root"); // CSS custom properties using light-dark()

层

• 初级 (单位:千美元)primitives: 20 OKLCH-所生成的12步相色尺度加上相距,半径,类型,运动,z-index,断点,容器和密度. 重新生成颜色 pnpm generate:primitives。 。 。 .
• 语义 (单位:千美元)SEMANTIC_COLOR_NAMES:以角色为主的颜色——表面,文字,焦点,图表颜色,八个意向各有九个角色. resolveTheme 按模式将它们映射到原始人并修正对比.
• 构成部分 指针( a)staticVariables(): 狭小的节点,例如 --nv-button-radius 财务报告和审定财务报表 --nv-card-padding 默认为全球标志.

文件

• @darkalpha/nova-tokens/css/tokens.css: 静态符号加默认主题 :root
• @darkalpha/nova-tokens/css/themes.css: 每一个预设范围 [data-nv-theme]
• @darkalpha/nova-tokens/css/tailwind.css: 尾风 v4 @theme inline 绘图
• @darkalpha/nova-tokens/tokens.json: 已解决的设计工具值
• @darkalpha/nova-tokens/tokens.dtcg.json 财务报告和审定财务报表 dtcg/*.json: W3C DTCG 令牌 (Tokens Studio, 样式词典)
• @darkalpha/nova-tokens/figma/<theme>.json: 一个主题的图像变量, 作为 REST API 请求机构

图图变量

figmaVariables(themes) 将符号转换成图形变量:a 新原始人类 收藏(平板、半径、字体大小、重量、行高、不透明、字体家族)和 a 新主题 以 Light 和 Dark 模式收集每个主题。 一个完全是一个调色板步骤的语义颜色成为了调色板变量的别名,因此链接在菲格玛活了下来.

要把它们推入一个文件(变量 REST API 需要一个 Figma Enterprise 计划和一个符号与 file_variables:read 财务报告和审定财务报表 file_variables:write 范围:

pnpm --filter @darkalpha/nova-tokens build
FIGMA_TOKEN=… FIGMA_FILE_KEY=… pnpm --filter @darkalpha/nova-tokens figma:sync --themes vibrant,ocean

重运行通过收藏和名称更新相同的变量,而不是重复它们. --dry-run 将请求正文写入 figma-variables.json 不叫菲格玛 在其他计划中,与Tokens Studio一起导入 DTCG 文件.