pantoken / colors

colors ​

Beta

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

O InstUI calcula esses valores em tempo de build com tinycolor2 em valores hex concretos. O pantoken emite referências var(--instui-*) que são resolvidas no navegador (frequentemente via light-dark()), então a matemática precisa ocorrer em CSS. Cada helper retorna uma string de cor CSS construída a partir de color-mix() e da syntaxe de cores relativas — ambas funcionalidades modernas de navegadores Baseline — portanto uma única expressão acompanha o token mesmo quando ele é um par light-dark() dependente de esquema. Use-os onde você de outra forma 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 ​