Skip to content

pantoken / css-in-js

css-in-js

実験的

@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

Re-exports Mode


default

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