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 — объект темы Instructure для библиотек CSS-in-JS во время выполнения.

Работает с любой библиотекой, которая читает тему из 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 ​

Повторно экспортирует Mode

default ​

Переименовывает и повторно экспортирует pantokenTheme