pantoken / css-in-js

css-in-js ​

Experimentell

@pantoken/css-in-js — ein Instructure-Theme-Objekt für CSS-in-JS-Bibliotheken zur Laufzeit.

Funktioniert mit jeder Bibliothek, die ein Theme aus props.theme liest — Emotion, styled-components und Stitches teilen diese Konvention. pantokenTheme ist das gebrauchsfertige rebrand-Objekt, var()-gestützt, sodass der Wechsel zwischen Hell/Dunkel über @pantoken/css durchgereicht wird. toStyledTheme erstellt eines aus beliebigem IR (und kann konkrete Werte mit { resolve } fest einbinden).

Beispiel ​

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

Schnittstellen ​

Typ-Aliasse ​

Variablen ​

Funktionen ​

Referenzen ​

Mode ​

Re-exportiert Mode

default ​

Benennt um und exportiert pantokenTheme neu.