pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — obliczenia kolorów wykonywane wyłącznie w CSS, które odzwierciedlają pomocniki InstUI @instructure/ui-color-utils (alpha, darken, lighten, overlayColors).

InstUI oblicza je podczas budowania przy użyciu tinycolor2 względem konkretnych wartości hex. pantoken emituje odniesienia var(--instui-*), które rozwiązywane są w przeglądarce (często przez light-dark()), więc obliczenia muszą zachodzić w CSS. Każdy pomocnik zwraca ciąg koloru CSS zbudowany z color-mix() oraz relative color syntax — oba to podstawowe funkcje nowoczesnych przeglądarek — dzięki czemu pojedyncze wyrażenie śledzi token nawet gdy jest to parzysty, zależny od schematu light-dark(). Używaj ich wszędzie tam, gdzie inaczej twardo wpisywałbyś pochodny odcień.

Przykład ​

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

Aliasy typów ​

Funkcje ​