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