pantoken / colors

colors ​

Bêta

@pantoken/plugin-colors — mathemateg lliw dim ond CSS sy'n adlewyrchu cynorthwywyr @instructure/ui-color-utils o InstUI (alpha, darken, lighten, overlayColors).

Mae InstUI yn cyfrifo'r rhain ar adeg adeiladu gan ddefnyddio tinycolor2 yn erbyn gwerthoedd hex pendant. Mae pantoken yn allbynnu cyfeiriadau var(--instui-*) sy'n datrys yn y porwr (yn aml trwy light-dark()), felly mae'r mathemateg yn rhaid ei gyflawni yn CSS yn lle. Mae pob cynorthwyydd yn dychwelyd llinyn lliw CSS a adeiladwyd o color-mix() a relative color syntax — y ddau yn nodweddion porwr modern Baseline — felly mae mynegiad unigol yn dilyn y tocyn hyd yn oed pan mae'n bâr light-dark() sy'n dibynnu ar gynllun. Defnyddiwch nhw lle bynnag y byddech fel arall yn godio ton ddeilliedig yn uniongyrchol.

Enghraifft ​

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

Aliasau Math ​

Swyddogaethau ​