pantoken / colors

colors

Beta

@pantoken/plugin-colors — matematik koulè sèlman nan CSS ki reflete @instructure/ui-color-utils InstUI helpers (alpha, darken, lighten, overlayColors).

InstUI kalkile sa yo pandan faz build avèk tinycolor2 kont valè hex konkrè. pantoken emèt referans var(--instui-*) ki rezoud nan navigatè a (souvan atravè light-dark()), kidonk matematik la dwe fèt nan CSS olye. Chak helper retounen yon chenn koulè CSS ki konstwi soti nan color-mix() ak relative color syntax — Tou de se karakteristik modèn navigatè Baseline — konsa yon sèl ekspresyon suiv token an menm lè li se yon peye light-dark() depandan sou chema. Sèvi ak yo kote ou ta sinon kòd di yon ton derive.

Egzanp

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

Alyas tip

• CssColor

Fonksyon

• alpha
• darken
• lighten
• overlayColors
• onColor