Skip to content

pantoken / colors

colors

Behta

@pantoken/plugin-colors — CSS-dovddus várri-máhtto mii spegir InstUI @instructure/ui-color-utils aidánat (alpha, darken, lighten, overlayColors).

InstUI bargá dan mánu rájes tinycolor2 maŋŋil konkreetalaš hex-válggáid. pantoken gávdno var(--instui-*) referenssat mii geahččaluvvo brauzeras (dovddus leat váldit light-dark()), dus várri-máhtto galgá boahtit CSS:s. Juokse aidánat boađá CSS várri-striiga mii leat muhtun color-mix() ja relatiivalaš várri-syntaxa — båda Baseline modernas brauzer-funkšuvnnat — nuppi ekspressiija čuovvut token maid galgá dál leat skema-dependenta light-dark() pair. Geavaha dahkan maid don muhto hard-code-dearvvat derived shade.

Exempel

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

Type-aliasat

Fuššat