pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — matematik warna hanya CSS yang mencerminkan pembantu InstUI @instructure/ui-color-utils pembantu (alpha, darken, lighten, overlayColors).

InstUI mengira itu pada masa bina dengan tinycolor2 terhadap nilai hex konkrit. pantoken mengeluarkan rujukan var(--instui-*) yang diselesaikan dalam penyemak imbas (sering melalui light-dark()), jadi pengiraan perlu berlaku dalam CSS sebaliknya. Setiap pembantu mengembalikan rentetan warna CSS yang dibina daripada color-mix() dan relative color syntax — kedua-duanya ciri asas penyemak imbas moden — jadi satu ungkapan menjejak token walaupun ia sepasang light-dark() bergantung pada skim. Gunakannya di mana sahaja anda sebaliknya akan mengekod keras warna terbitan.

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 Jenis ​

Fungsi ​