pantoken / colors
colors
Béta
@pantoken/plugin-colors — CSS-only szín matematika, amely az InstUI @instructure/ui-color-utils segítőit tükrözi (alpha, darken, lighten, overlayColors).
Az InstUI ezeket fordítási időben számolja ki a tinycolor2 segítségével konkrét hex értékek ellen. A pantoken var(--instui-*) referenciákat bocsát ki, amelyek a böngészőben oldódnak fel (gyakran a light-dark() keresztül), ezért a matematikának CSS-ben kell megtörténnie. Minden segítő egy CSS szín karakterláncot ad vissza, amelyet a color-mix() és a relatív szín szintaxis alapján készít — mindkettő Baseline modern böngésző funkció — így egy egyetlen kifejezés követi a tokent még akkor is, ha ez egy sémafüggő light-dark() pár. Használja őket bárhol, ahol egyébként merevkódoznál egy származtatott árnyalatot.
Példa
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)"