pantoken / renderers/css-in-js/src / toStyledTheme

Mahi: toStyledTheme() ​

toStyledTheme(tokens, options?): StyledTheme

Whakamātautau

Hangaia he taonga kaupapa CSS-in-JS mai i te token IR.

Ngā Tawhā ​

tokens ​

panui-anake Token[]

Te IR (hei tauira, nō @pantoken/tokens).

options? ​

ToStyledThemeOptions = {}

ToStyledThemeOptions.

Whakahokia ​

StyledTheme

Ko te taonga kaupapa, kei ngā kī e whakamahi ana i ngā ingoa token i roto i te camelCased.

Ngā tauira ​

E tautokohia ana e var(), ngā rere mārama/pō mā roto i @pantoken/css

ts
import { toStyledTheme } from "@pantoken/css-in-js";
import { tokens } from "@pantoken/tokens";

const theme = toStyledTheme(tokens);
// theme.colorBackgroundBrand → "var(--instui-color-background-brand)"

Tunu i ngā uara mō te aratau kotahi (mō SSR me te kore o ngā taurangi CSS)

ts
import { toStyledTheme } from "@pantoken/css-in-js";
import { tokens } from "@pantoken/tokens";

const dark = toStyledTheme(tokens, { resolve: "dark" });
// dark.colorBackgroundBase → a concrete value, not a var()