pantoken / colors

colors ​

Bêta

@pantoken/plugin-colors — calculs de couleur uniquement en CSS qui reflètent le @instructure/ui-color-utils d'InstUI fonctions utilitaires (alpha, darken, lighten, overlayColors).

InstUI calcule ceux-ci à la compilation avec tinycolor2 sur des valeurs hexadécimales concrètes. pantoken émet des références var(--instui-*) qui se résolvent dans le navigateur (souvent via light-dark()), donc les calculs doivent plutôt se faire en CSS. Chaque fonction utilitaire retourne une chaîne de couleur CSS construite à partir de color-mix() et de la syntaxe de couleur relative — des deux fonctionnalités de base des navigateurs modernes — ainsi une seule expression suit le token même lorsqu'il s'agit d'une paire light-dark() dépendante du schéma. Les utiliser partout où vous coderiez autrement en dur une teinte dérivée.

Exemple ​

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 type ​

Fonctions ​