pantoken / colors

colors

Бета

@pantoken/plugin-colors — обчислення кольору тільки в CSS, яке віддзеркалює InstUI @instructure/ui-color-utils допоміжні функції (alpha, darken, lighten, overlayColors).

InstUI обчислює їх під час збірки за допомогою tinycolor2 для конкретних hex-значень. pantoken генерує посилання var(--instui-*), які розв’язуються в браузері (часто через light-dark()), тому обчислення мають відбуватися в CSS. Кожна допоміжна функція повертає CSS-рядок кольору, побудований з color-mix() та relative color syntax — обидва це базові можливості сучасних браузерів — тож один вираз відстежує токен навіть коли це пара light-dark(), що залежить від схеми. Використовуйте їх там, де інакше жорстко закодували б похідний відтінок.

Приклад

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

Псевдоніми типів

• CssColor

Функції

• alpha
• darken
• lighten
• overlayColors
• onColor