@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -2
- package/src/styles/tokens.css +35 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qijenchen/design-system",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "World-class design system — components, patterns, tokens, hooks (single source of truth for team distribution).",
|
|
6
6
|
"type": "module",
|
|
@@ -35,7 +35,9 @@
|
|
|
35
35
|
"types": "./dist/hooks/*.d.ts",
|
|
36
36
|
"import": "./dist/hooks/*.js"
|
|
37
37
|
},
|
|
38
|
-
"./styles/globals.css": "./dist/globals.css"
|
|
38
|
+
"./styles/globals.css": "./dist/globals.css",
|
|
39
|
+
"./styles/tokens.css": "./src/styles/tokens.css",
|
|
40
|
+
"./styles/tokens": "./src/styles/tokens.css"
|
|
39
41
|
},
|
|
40
42
|
"main": "./dist/index.js",
|
|
41
43
|
"module": "./dist/index.js",
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* ═══════════════════════════════════════════════════════════════════════
|
|
2
|
+
@qijenchen/design-system — Consolidated Token Stylesheet
|
|
3
|
+
═══════════════════════════════════════════════════════════════════════
|
|
4
|
+
|
|
5
|
+
AUTO-GENERATED by scripts/gen-figma-make-artifacts.mjs — DO NOT EDIT MANUALLY.
|
|
6
|
+
|
|
7
|
+
To add a new token category:
|
|
8
|
+
1. Create packages/design-system/src/tokens/<category>/*.css
|
|
9
|
+
2. Run: node scripts/gen-figma-make-artifacts.mjs
|
|
10
|
+
3. Commit this file alongside the new token file
|
|
11
|
+
|
|
12
|
+
Single-import setup for consumers (Figma Make / ad-hoc Tailwind v4 projects):
|
|
13
|
+
|
|
14
|
+
import '@qijenchen/design-system/styles/tokens'
|
|
15
|
+
|
|
16
|
+
Load order canonical (per src/globals.css):
|
|
17
|
+
primitives → @theme-using files (semantic / typography / uiSize / ...) →
|
|
18
|
+
other categories (layoutSpace / radius / opacity / motion).
|
|
19
|
+
|
|
20
|
+
Why aggregator:
|
|
21
|
+
Tailwind v4 generates utility classes only when @theme directives are
|
|
22
|
+
loaded. Individual token files declare both raw CSS vars (:root) and
|
|
23
|
+
@theme inline blocks; aggregator preserves canonical order so all utility
|
|
24
|
+
classes are generated correctly.
|
|
25
|
+
|
|
26
|
+
═══════════════════════════════════════════════════════════════════════ */
|
|
27
|
+
|
|
28
|
+
@import './../tokens/color/primitives.css';
|
|
29
|
+
@import './../tokens/color/semantic.css';
|
|
30
|
+
@import './../tokens/typography/typography.css';
|
|
31
|
+
@import './../tokens/uiSize/uiSize.css';
|
|
32
|
+
@import './../tokens/layoutSpace/layoutSpace.css';
|
|
33
|
+
@import './../tokens/radius/radius.css';
|
|
34
|
+
@import './../tokens/opacity/opacity.css';
|
|
35
|
+
@import './../tokens/motion/motion.css';
|