pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — matematika warna berbasis CSS saja yang mencerminkan helper InstUI @instructure/ui-color-utils (alpha, darken, lighten, overlayColors).

InstUI menghitung itu saat build menggunakan tinycolor2 terhadap nilai hex konkret. pantoken mengeluarkan referensi var(--instui-*) yang diselesaikan di browser (sering melalui light-dark()), jadi perhitungan harus terjadi di CSS. Setiap helper mengembalikan string warna CSS yang dibangun dari color-mix() dan relative color syntax — keduanya adalah fitur dasar browser modern — sehingga satu ekspresi mengikuti token bahkan ketika itu adalah pasangan light-dark() yang bergantung pada skema. Gunakan mereka di mana pun Anda seharusnya meng-hardcode nuansa turunan.

Contoh ​

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

Alias Tipe ​

Fungsi ​