pantoken / colors

colors

Beta

@pantoken/plugin-colors — 仅 CSS 的颜色运算，模仿 InstUI 的 @instructure/ui-color-utils 辅助函数（alpha、darken、lighten、overlayColors）。

InstUI 在构建时使用 tinycolor2 针对具体的十六进制值进行计算。pantoken 发出 可在浏览器中解析的 var(--instui-*) 引用（通常通过 light-dark()），因此 这些运算必须在 CSS 中进行。每个辅助函数返回一个 CSS 颜色字符串，该字符串由 color-mix() 和 相对颜色语法 构建—— 两者都是现代浏览器的基础特性——因此单个表达式可以跟踪该 token，即使它是一个 依赖配色方案的 light-dark() 对。将它们用于你原本会硬编码派生色的任何地方。

示例

import { alpha, darken } from "@pantoken/plugin-colors";

// A subtle brand-tinted hover, derived from the brand token (mirrors InstUI's ghost hover).
const hover = alpha(darken("var(--instui-color-institutional-brand-button-primary-bgd)", 10), 10);
// → "color-mix(in srgb, hsl(from var(--…brand-…) h s calc(l - 10)) 10%, transparent)"

类型别名

• CssColor

函数

• alpha
• darken
• lighten
• overlayColors
• onColor