pantoken / colors

colors

ベータ

@pantoken/plugin-colors — InstUI の @instructure/ui-color-utils を模した、CSS のみのカラー演算 ヘルパー（alpha, darken, lighten, overlayColors）。

InstUI はビルド時に具体的な 16 進値に対して tinycolor2 でそれらを計算します。pantoken はブラウザで解決される var(--instui-*) 参照（多くの場合 light-dark() を介して）を出力するため、演算は代わりに CSS 内で行う必要があります。各ヘルパーは color-mix() と 相対カラー構文 に基づく CSS カラー文字列を返します — どちらも現代ブラウザの基本機能です — したがって単一の式で、トークンがスキーム依存の 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