Skip to content

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

函式: toStyledTheme()

toStyledTheme(tokens, options?): StyledTheme

實驗性

從 token IR 建立一個 CSS-in-JS 主題物件。

參數

tokens

唯讀 Token[]

IR(例如來自 @pantoken/tokens)。

options?

ToStyledThemeOptions = {}

ToStyledThemeOptions.

回傳

StyledTheme

主題物件,鍵為 camelCased 的 token 名稱。

範例

以 var() 為基底,淺色/深色 流程透過 @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)"

產生具體的單一模式值(用於沒有 CSS 變數的 SSR)

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