pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — matemática de cores exclusiva em CSS que espelha os auxiliares @instructure/ui-color-utils do InstUI (alpha, darken, lighten, overlayColors).

O InstUI calcula esses valores em tempo de build com tinycolor2 usando valores hexadecimais concretos. O pantoken emite referências var(--instui-*) que são resolvidas no navegador (frequentemente via light-dark()), então a matemática precisa acontecer em CSS. Cada auxiliar retorna uma string de cor CSS construída a partir de color-mix() e sintaxe de cores relativas — ambos recursos básicos de navegadores modernos — assim uma única expressão rastreia o token mesmo quando é um par light-dark() dependente do esquema. Use-os onde quer que, de outra forma, você codificaria manualmente uma tonalidade derivada.

Exemplo ​

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

Aliases de tipo ​

Funções ​