pantoken / css-in-js

css-in-js ​

Thử nghiệm

@pantoken/css-in-js — một đối tượng theme của Instructure cho các thư viện CSS-in-JS tại thời gian chạy.

Tương thích với bất kỳ thư viện nào đọc theme từ props.theme — Emotion, styled-components và Stitches đều dùng cùng quy ước đó. pantokenTheme là đối tượng rebrand đã sẵn sàng, được hỗ trợ bởi var() nên việc chuyển sáng/tối chảy qua @pantoken/css. toStyledTheme tạo một đối tượng từ bất kỳ IR nào (và có thể đóng giá trị cụ thể bằng { resolve }).

Ví dụ ​

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

Giao diện ​

Bí danh kiểu ​

Biến ​

Hàm ​

Tham chiếu ​

Mode ​

Xuất lại Mode

default ​

Đổi tên và xuất lại pantokenTheme