pantoken-root / css-in-js

css-in-js ​

Compatibility ​

Target: Emotion CSS-in-JS. Current format: ThemeProvider SSR emits the Pantoken token variable. Minimum host version: 11.14.0. Tested through 11.14.0. Newer releases require review.

Full compatibility matrix

実験的

@pantoken/css-in-js — ランタイムの CSS-in-JS ライブラリ向けの Instructure テーマオブジェクト。

props.theme からテーマを読み取る任意のライブラリで動作します — Emotion、styled-components、Stitches はその慣習を共有します。pantokenTheme は既製の rebrand オブジェクトで、var() 対応のためライト/ダーク切替が @pantoken/css を通じて反映されます。toStyledTheme は任意の IR からそれを構築し（{ resolve } で具体的な値を埋め込むこともできます）。

例 ​

styled-components

tsx
import { ThemeProvider } from "styled-components";
import { pantokenTheme } from "@pantoken/css-in-js";
<ThemeProvider theme={pantokenTheme}>...</ThemeProvider>;
// const Btn = styled.button`background: ${({ theme }) => theme.colorBackgroundBrand};`;

インターフェース ​

型エイリアス ​

変数 ​

関数 ​

参照 ​

Mode ​

再エクスポート モード

default ​

pantokenTheme をリネームして再エクスポートします