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

Experimental

@pantoken/css-in-js — an Instructure theme object for runtime CSS-in-JS libraries.

Works with any library that reads a theme from props.theme — Emotion, styled-components, and Stitches all share that convention. pantokenTheme is the ready-made rebrand object, var()-backed so light/dark switching flows through @pantoken/css. toStyledTheme builds one from any IR (and can bake concrete values with { resolve }).

Example ​

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};`;

Interfaces ​

Type Aliases ​

Variables ​

Functions ​

References ​

Mode ​

Re-exports Mode

default ​

Renames and re-exports pantokenTheme