pantoken / css-in-js

css-in-js

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

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

• ToStyledThemeOptions

Type Aliases

• StyledTheme

Variables

• pantokenTheme

Functions

• toThemeKey
• toStyledTheme

References

Mode

Re-exports Mode

---

default

Renames and re-exports pantokenTheme