pantoken / css-in-js

css-in-js ​

Eksperymentalne

@pantoken/css-in-js — obiekt motywu Instructure dla bibliotek CSS-in-JS działających w czasie wykonywania.

Działa z każdą biblioteką, która odczytuje motyw z props.theme — Emotion, styled-components i Stitches stosują tę konwencję. pantokenTheme to gotowy obiekt rebrand, oparty na var(), dzięki czemu przełączanie jasny/ciemny przepływa przez @pantoken/css. toStyledTheme tworzy go z dowolnego IR (i może wstawić konkretne wartości przy pomocy { resolve }).

Przykład ​

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

Interfejsy ​

Aliasy typów ​

Zmienne ​

Funkcje ​

Odwołania ​

Mode ​

Ponownie eksportuje Mode

default ​

Zmienia nazwę i ponownie eksportuje pantokenTheme