pantoken / colors

colors

Βήτα

@pantoken/plugin-colors — μαθηματικά χρώματος μόνο με CSS που αντικατοπτρίζουν τα helpers του InstUI @instructure/ui-color-utils (alpha, darken, lighten, overlayColors).

Το InstUI τα υπολογίζει κατά το χρόνο build με tinycolor2 σε συγκεκριμένες δεκαεξαδικές τιμές. Το pantoken εκπέμπει αναφορές var(--instui-*) που επιλύονται στον περιηγητή (συχνά μέσω light-dark()), οπότε τα μαθηματικά πρέπει να γίνουν στο CSS αντίστοιχα. Κάθε helper επιστρέφει μια συμβολοσειρά χρώματος CSS χτισμένη από color-mix() και σχετική σύνταξη χρωμάτων — και τα δύο είναι βασικές δυνατότητες σύγχρονων περιηγητών — έτσι μια ενιαία έκφραση παρακολουθεί το token ακόμα κι όταν είναι ζεύγος light-dark() εξαρτώμενο από το σχήμα. Χρησιμοποιήστε τα όπου αλλιώς θα σκληροκωδικοποιούσατε μια παραγόμενη απόχρωση.

Παράδειγμα

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

Συνώνυμα τύπου

• CssColor

Συναρτήσεις

• alpha
• darken
• lighten
• overlayColors
• onColor