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

함수: toStyledTheme() ​

toStyledTheme(tokens, options?): StyledTheme

실험적

토큰 IR로부터 CSS-in-JS 테마 객체를 빌드합니다.

매개변수 ​

tokens ​

읽기 전용 Token[]

IR(예: @pantoken/tokens에서 온 것).

options? ​

ToStyledThemeOptions = {}

ToStyledThemeOptions.

반환값 ​

StyledTheme

카멜케이스(camelCased) 토큰 이름을 키로 하는 테마 객체.

예제들 ​

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

단일 모드의 구체적 값을 고정화(SSR에서 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()