pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — litareikningar eingöngu í CSS sem spegla InstUI @instructure/ui-color-utils hjálparfærin (alpha, darken, lighten, overlayColors).

InstUI reiknar þessi við byggingu með tinycolor2 yfir á ákveðin hex-gildi. pantoken sendir frá sér var(--instui-*)-tilvísanir sem leysast upp í vafranum (oft í gegnum light-dark()), svo reikningurinn þarf að fara fram í CSS í staðinn. Hver hjálpari skilar CSS-litstreng sem er byggður úr color-mix() og relative color syntax — bæði grunnvirkni nútímalegra vafra — þannig að ein tjáning fylgir tokeninu jafnvel þegar það er kerfisháð light-dark() par. Notaðu þau þar sem þú myndir annars harðkóða afleidda tóna.

Dæmi ​

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

Tegundarheiti ​

Föll ​