Tailwindin tokenit, CSS-muuttujat ja CSS-in-JS

Style Dictionaryn CSS-alustan tuloste luo CSS:n mukautettujen ominaisuuksien tiedoston: --color-primary-500: #3b82f6; --spacing-4: 16px; ja niin edelleen. Nämä muuttujat määritellään :root-elementissä, joten ne ovat käytettävissä kaikkialla. Tämä muodostaa perustan kaikkien tokenien käyttämiselle sovelluksessa.

Tuo luotu CSS-tokenitiedosto käyttöön globaalissa tyylitiedostossa tai juuriasettelukomponentissa: @import './tokens/tokens.css'. Next.js:ssä tuo se tiedostossa app/layout.tsx tai styles/globals.css. Kun tiedosto on tuotu käyttöön, kaikki sovelluksen CSS-säännöt ja komponentit voivat viitata mukautettuihin ominaisuuksiin.

Viittaa CSS-muuttujiin komponenttien tyylitiedostoissa tai CSS Moduleissa: background-color: var(--color-primary-500); ja padding: var(--spacing-4);. Jos tokenin arvo muuttuu JSON-lähteessä, Style Dictionaryn uudelleenkoonti päivittää CSS-tiedoston, ja kaikki kyseistä muuttujaa käyttävät komponentit ottavat uuden arvon automaattisesti käyttöön.

CSS:n mukautetut ominaisuudet mahdollistavat teemojen vaihtamisen ajonaikaisesti. Ohita tummassa tilassa tokenien arvot teeman valitsimen alla: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. Komennolla document.documentElement.setAttribute('data-theme', 'dark') kaikki tokenien arvot vaihtuvat heti ilman uudelleenlatausta tai uudelleenkoontia.

Laajenna Tailwindin teemaa tiedostossa tailwind.config.js, jotta voit käyttää tokenien arvoja: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Tuo Style Dictionarysta saatava JS-tuloste Tailwind-määritykseen, jotta Tailwind-luokat (bg-primary-500) käyttävät aina ensisijaisia tokenien arvoja.

Ajonaikaisesti vaihdettavia teemoja varten määritä Tailwindin väri viittaamaan CSS-muuttujaan: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Tällöin CSS-muuttujan on tallennettava RGB-komponentit ilman rgb()-käärettä (--color-primary-rgb: 59 130 246). Tailwind käsittelee opasiteettiapuohjelmat sen jälkeen automaattisesti.

CSS-in-JS-kirjastot käyttävät JavaScript-teemaobjektia. Välitä Style Dictionaryn JS-tuloste teeman tarjoajan arvoksi: <ThemeProvider theme={tokens}>. Komponentit käyttävät tokeneita komennolla const theme = useTheme() ja viittauksella theme.color.primary[500]. Style Dictionary luo tyypitetyn tokeniobjektin, jonka teeman tarjoaja jakaa.

stylelint-no-hardcoded-colors-lisäosa ja mukautetut ESLint-säännöt voivat varmistaa, ettei tyylitiedostoissa tai komponenttitiedostoissa käytetä kovakoodattuja heksadesimaaliarvoja. Jos kehittäjä kirjoittaa color: #3b82f6 komennon color: var(--color-primary-500) sijaan, linteri ilmoittaa virheestä. Näin tokenijärjestelmä säilyy ainoana värien lähteenä.

Kun Tailwind-luokan nimet muodostetaan ajonaikaisesti tokenien nimistä, Tailwindin purge-toiminto voi poistaa nämä luokat, koska ne eivät esiinny lähdekoodissa staattisina merkkijonoina. Lisää dynaamisten luokkien mallit tiedoston tailwind.config.js safelist-määritykseen: safelist: [{ pattern: /bg-primary-/ }].

Figma Tokens -lisäosa vie Figma-tokenien arvot suoraan Style Dictionaryn JSON-muotoon. Työnkulku on seuraava: suunnittelijat päivittävät värit Figma Variablesissa, vievät ne lisäosan avulla, päivitetty JSON tallennetaan versionhallintaan, esikäännösskripti suorittaa Style Dictionaryn ja päivitettyjä CSS- ja JS-tulosteita käytetään React-sovelluksessa. Suunnittelu ja koodi pysyvät synkronoituina.

CSS:n mukautetut ominaisuudet rajoittuvat elementtiin, jossa ne määritellään, sekä sen jälkeläisiin. Tämä mahdollistaa komponenttikohtaiset teeman ohitukset: korttikomponentti voi asettaa juurielementtiinsä arvon --color-background: var(--color-surface-elevated), jolloin kaikki jälkeläiset käyttävät korotetun tason pinnan väriä ilman propien välittämistä komponenttihierarkian läpi.

Style Dictionary tuottaa CSS:n mukautettuja ominaisuuksia globaalia tuontia varten sekä JavaScript-objekteja Tailwind- ja CSS-in-JS-integraatioita varten. CSS-muuttujat mahdollistavat teemojen vaihtamisen ajonaikaisesti [data-theme]-ohituksilla. Tailwindin määritystä laajennetaan JS-tulosteen tokenien arvoilla; opasiteettia tukevassa teemoituksessa Tailwind määritetään käyttämään RGB-CSS-muuttujia. Lint-säännöt valvovat, että värit tulevat vain tokeneista, joten kovakoodatut arvot pysyvät poissa koodikannasta.