pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — CSS-kun farveregning, der afspejler InstUI @instructure/ui-color-utils hjælpere (alpha, darken, lighten, overlayColors).

InstUI beregner disse på byggetidspunkt med tinycolor2 mod konkrete hex-værdier. pantoken udsender var(--instui-*) referencer, der opløses i browseren (ofte gennem light-dark()), så matematikken skal foregå i CSS i stedet. Hver hjælper returnerer en CSS-farvestreng bygget fra color-mix() og relativ farvesyntaks — begge Baseline moderne-browser-funktioner — så et enkelt udtryk sporer tokenet, selv når det er et skema-afhængigt light-dark() par. Brug dem, hvor du ellers ville hard-code en afledt skygge.

Eksempel ​

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

Typealiaser ​

Funktioner ​