pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — InstUI @instructure/ui-color-utils yardımcılarını yansıtan, yalnızca CSS ile yapılan renk matematiği yardımcıları (alpha, darken, lighten, overlayColors).

InstUI bunları derleme zamanında gerçek hex değerlerine karşı tinycolor2 ile hesaplar. pantoken ise tarayıcıda çözülen var(--instui-*) referansları (çoğunlukla light-dark() aracılığıyla) üretir, bu yüzden hesaplamaların bunun yerine CSS içinde yapılması gerekir. Her yardımcı, color-mix() ve relative color syntax — her ikisi de modern tarayıcıların Temel özellikleri — kullanılarak oluşturulmuş bir CSS renk dizesi döndürür; böylece tek bir ifade, bir token'ın şemaya bağlı bir light-dark() çifti olsa bile token'ı izler. Türetilmiş bir tonu sabit kodlayacağınız her yerde bunları kullanın.

Örnek ​

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

Tür Takma Adları ​

Fonksiyonlar ​