pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — Matemáticas de color solo en CSS que reflejan los @instructure/ui-color-utils de InstUI funciones auxiliares (alpha, darken, lighten, overlayColors).

InstUI calcula esos valores en tiempo de compilación con tinycolor2 frente a valores hex concretos. pantoken emite referencias var(--instui-*) que se resuelven en el navegador (a menudo a través de light-dark()), por lo que las operaciones deben ocurrir en CSS en su lugar. Cada helper devuelve una cadena de color CSS construida a partir de color-mix() y la notación de color relativa — ambas características básicas de navegadores modernos — así que una sola expresión sigue el token incluso cuando es un par light-dark() dependiente del esquema. Úsalos donde de otra forma codificarías manualmente un tono derivado.

Ejemplo ​

ts
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)"

Alias de tipo ​

Funciones ​