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() и синтаксиса относительных цветов — оба являются базовыми возможностями современных браузеров — так что одно выражение отслеживает токен даже когда это зависимая от схемы пара 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