@bug-on/md3-tokens

Thư viện Design Tokens cốt lõi của Material Design 3 Expressive dưới dạng CSS Custom Properties.

Package này cung cấp toàn bộ các biến thiết kế (Design Tokens) tiêu chuẩn của hệ thống Material Design 3 thông qua các CSS Custom Properties (biến CSS thuần). Không chứa mã logic JavaScript, đảm bảo hiệu năng tối đa và tính tương thích tuyệt đối cho mọi framework.

📦 Cài đặt

npm install @bug-on/md3-tokens
# hoặc
pnpm add @bug-on/md3-tokens

🛠️ How to Use

[!IMPORTANT] Important Design Note: This package ONLY contains raw CSS custom properties/variables (e.g., --md-sys-color-primary, --md-sys-shape-corner-medium) and JS/TS design token descriptors. It DOES NOT contain Tailwind utility classes (such as bg-m3-primary, text-m3-on-surface, rounded-m3-xl). To use those utility classes, you must install and configure @bug-on/md3-tailwind or @bug-on/md3-react along with it.

To apply these design tokens to your application, import the corresponding stylesheets into your global CSS entry point (e.g., globals.css, index.css):

/* Import M3 dynamic color tokens */
@import "@bug-on/md3-tokens/colors.css";

/* Import corner radius shape tokens */
@import "@bug-on/md3-tokens/shape.css";

🎨 CSS Custom Property Naming Structure (Tokens)

The CSS variable naming convention strictly follows Google's Material Design 3 specifications:

• --md-sys-color-primary: Principal action color of the system.
• --md-sys-color-error: System warning and error color.
• --md-sys-shape-corner-extra-large: Extra Large corner radius token (28px).

[!TIP] For the best developer experience and to avoid typing these long CSS custom properties manually, we highly recommend pairing this package with @bug-on/md3-tailwind to automatically map CSS variables to convenient Tailwind utility classes (e.g., compiling to bg-m3-primary, rounded-m3-large). If you are using React, please use @bug-on/md3-react which integrates all these tokens out of the box.

📖 Tài Liệu Chi Tiết

Để xem toàn bộ bảng tra cứu danh sách Design Tokens cùng hướng dẫn tích hợp chi tiết, vui lòng truy cập: 👉 Tài liệu & Demo chính thức trên GitHub

⚖️ Giấy phép

MIT