pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — tātai tae CSS-anake e ōrite ana ki te InstUI @instructure/ui-color-utils āwhina (alpha, darken, lighten, overlayColors).

Ka tatauhia ēnei e InstUI i te wā hanga mā tinycolor2 ki ngā uara hex. Ka whakaputa a pantoken i ngā tohutoro var(--instui-*) e whakatau ana i roto i te kaitirotiro (ina rā, mā light-dark()), nō reira me whakamahia te tātai i roto i te CSS. Ia āwhina ka whakahoki i tētahi aho tae CSS i hangaia mai i color-mix() me relative color syntax — he āhuatanga paerewa ēnei mō ngā kaitirotiro hou — nō reira ka whai tonu te kī kotahi i te tohu ahakoa he pārua light-dark() whakawhirinaki-ki-te-scheme. Whakamahia rātou i ngā wā ka hiki koe i tētahi atarangi i te wa e kore e hiahia ana kia tīpakohia ā-ringa.

Tauira ​

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

Ngā Ingoa Momo ​

Ngā Mahi ​