pantoken-root / 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을 통해 제공됩니다

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 변수를 사용하지 않을 경우)

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