Tokens i Tailwind, CSS-variabler og CSS-in-JS

Style Dictionarys CSS-plattformresultat genererer en fil med egendefinerte CSS-egenskaper: --color-primary-500: #3b82f6; --spacing-4: 16px; og så videre. Disse variablene defineres på :root, slik at de blir tilgjengelige globalt. Dette er grunnlaget for all bruk av tokens i applikasjonen.

Importer den genererte CSS-tokenfilen i det globale stilarket eller i rotlayoutkomponenten: @import './tokens/tokens.css'. I Next.js importeres den i app/layout.tsx eller styles/globals.css. Når filen er importert, kan alle CSS-regler og komponenter i applikasjonen referere til CSS-variablene.

Referer til CSS-variabler i komponentstilark eller CSS Modules: background-color: var(--color-primary-500); og padding: var(--spacing-4);. Hvis tokenverdien endres i JSON-kilden, oppdaterer en ny bygging med Style Dictionary CSS-filen, og alle komponenter som bruker variabelen, gjenspeiler automatisk den nye verdien.

CSS-variabler muliggjør bytte av tema under kjøring. For mørk modus kan tokenverdier overstyres under en temavelger: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. Når document.documentElement.setAttribute('data-theme', 'dark') angis, byttes alle tokenverdiene umiddelbart uten omlasting eller ny bygging.

Utvid temaet i Tailwind i tailwind.config.js for å bruke tokenverdier: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Importer JS-resultatet fra Style Dictionary i Tailwind-konfigurasjonen for å sikre at Tailwind-klassene (bg-primary-500) alltid bruker de autoritative tokenverdiene.

For temaer som kan byttes under kjøring i Tailwind konfigureres fargen til å referere til en CSS-variabel: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Dette krever at CSS-variabelen lagrer RGB-komponentene uten rgb()-omslaget (--color-primary-rgb: 59 130 246). Tailwind håndterer deretter verktøyklassene for gjennomsiktighet automatisk.

CSS-in-JS-biblioteker bruker et JavaScript-temaobjekt. Send JS-resultatet fra Style Dictionary som verdien til theme provider: <ThemeProvider theme={tokens}>. Komponenter får tilgang til tokens via const theme = useTheme() og theme.color.primary[500]. Style Dictionary genererer det typede tokenobjektet, og theme provider distribuerer det.

Programtillegget stylelint-no-hardcoded-colors og tilpassede ESLint-regler kan håndheve at ingen hardkodede heksadesimalverdier forekommer i stilark eller komponentfiler. Hvis en utvikler skriver color: #3b82f6 i stedet for color: var(--color-primary-500), rapporterer linteren dette. Dermed forblir tokensystemet den eneste fargekilden.

Når Tailwind-klassenavn bygges dynamisk fra tokennavn under kjøring, kan Tailwinds purge fjerne klassene fordi de ikke forekommer som statiske strenger i kildekoden. Legg til mønstre for dynamiske klassenavn i safelist i tailwind.config.js: safelist: [{ pattern: /bg-primary-/ }].

Figma Tokens-pluginen eksporterer Figma-tokenverdier direkte til Style Dictionarys JSON-format. Arbeidsflyten er slik: Designere oppdaterer farger i Figma Variables, eksporterer via programtillegget, legger den oppdaterte JSON-filen inn i versjonskontroll, prebuild-skriptet kjører Style Dictionary, og de oppdaterte CSS- og JS-resultatene brukes i React-appen. Design og kode holdes synkronisert.

CSS-variabler er avgrenset til elementet de defineres på, og til elementets etterkommere. Dette gjør overstyring av temaer på komponentnivå mulig: En kortkomponent kan angi --color-background: var(--color-surface-elevated) på rotelementet sitt, og alle etterkommere bruker den hevede overflatefargen uten prop drilling.

Style Dictionary genererer CSS-variabler for global import og JavaScript-objekter for integrasjon med Tailwind og CSS-in-JS. CSS-variabler muliggjør bytte av tema under kjøring gjennom overstyringer med [data-theme]. Tailwind utvider konfigurasjonen med tokenverdier fra JS-resultatet. For temabytte med støtte for gjennomsiktighet konfigureres Tailwind til å referere til RGB-CSS-variabler. Lint-regler håndhever at bare tokens brukes til farger, slik at hardkodede verdier holdes ute av kodebasen.