@moderneinc/neo-design 3.0.0 → 4.0.0-next.557dc6

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.
Files changed (21) hide show
  1. package/README.md +20 -16
  2. package/dist/border-radius.css +1 -11
  3. package/dist/border-radius.d.ts +0 -30
  4. package/dist/border-radius.js +0 -10
  5. package/dist/colors.css +2 -80
  6. package/dist/colors.d.ts +0 -235
  7. package/dist/colors.js +8 -161
  8. package/dist/index.d.ts +75 -866
  9. package/dist/semantic-colors.css +0 -110
  10. package/dist/semantic-colors.d.ts +0 -162
  11. package/dist/semantic-colors.js +11 -157
  12. package/dist/shadows.css +2 -2
  13. package/dist/shadows.d.ts +39 -273
  14. package/dist/shadows.js +18 -242
  15. package/dist/spacing.css +12 -27
  16. package/dist/spacing.d.ts +30 -76
  17. package/dist/spacing.js +35 -50
  18. package/dist/typography.css +2 -25
  19. package/dist/typography.d.ts +0 -70
  20. package/dist/typography.js +5 -55
  21. package/package.json +1 -1
package/README.md CHANGED
@@ -10,14 +10,13 @@ npm install @moderneinc/neo-design
10
10
 
11
11
  ## 📦 What's Included
12
12
 
13
- - **Design Tokens**: Multiple token types processed from `src/tokens/raw/`
14
- - Primitive colors (`color-primitives.json`)
15
- - Semantic colors (`color.json`)
16
- - Typography primitives (`type-primitives.json`)
17
- - Breakpoints (`breakpoints.json`)
18
- - **Internal Plugin System**: CSS Variables, JS Export, and JSON Export plugins (build-time only)
13
+ - **Design Tokens**: W3C DTCG format token files in `src/tokens/`
14
+ - `primitive/` — color, spacing, border-radius, shadow, typography, breakpoints
15
+ - `semantic/` — semantic colors, semantic typography (aliases into primitives)
16
+ - **Internal Plugin System**: CSS Variables, JS Export, and DTS Export plugins (build-time only)
17
+ - **DTCG Reader**: Reads W3C Design Tokens Community Group format into plugin-compatible structures
19
18
  - **Pure JavaScript**: Simplified architecture, no TypeScript complexity
20
- - **Multiple Output Formats**: CSS, JavaScript, and JSON exports for design tokens
19
+ - **Multiple Output Formats**: CSS custom properties, JavaScript exports, and TypeScript declarations
21
20
 
22
21
  ## 🎨 Generated Outputs
23
22
 
@@ -50,28 +49,32 @@ The package includes an internal plugin system used during the build process:
50
49
  - **JS Export Plugin**: Creates JavaScript module exports from processed tokens
51
50
  - **JSON Export Plugin**: Generates JSON files with processed design tokens
52
51
 
53
- These plugins are configured in `neo.config.js` and executed by `scripts/build-production.js` during `npm run build`. They are not exposed as public exports.
52
+ These plugins are configured in `neo.config.js` and executed by `scripts/build-production.js` during `npm run build`. They read W3C DTCG format token files via the DTCG reader and are not exposed as public exports.
54
53
 
55
54
  ## 🏗️ Architecture & Build Process
56
55
 
57
56
  ```mermaid
58
57
  graph TB
59
- A[Design Tokens<br/>src/tokens/raw/*.json] --> B[npm run build<br/>scripts/build-production.js]
58
+ F[Figma API] --> S[fetch-figma-variables.js]
59
+ S --> A[DTCG Token Files<br/>src/tokens/*.tokens.json]
60
+
61
+ A --> B[npm run build<br/>scripts/build-production.js]
60
62
 
61
63
  B --> C[Rollup Bundle Build<br/>rollup -c]
62
64
  C --> D[Generated Bundles<br/>dist/]
63
65
  D --> E[index.js<br/>CommonJS Bundle]
64
- D --> F[index.esm.js<br/>ES Module Bundle]
66
+ D --> Esm[index.esm.js<br/>ES Module Bundle]
65
67
 
66
68
  B --> G[Token Contract Processing<br/>neo.config.js]
67
- G --> G1[Colors Contract<br/>preprocessor + plugins]
68
- G --> G2[Semantic Colors Contract<br/>preprocessor + plugins]
69
- G --> G3[Typography Contract<br/>plugins]
70
- G --> G4[Breakpoints Contract<br/>preprocessor + plugins]
69
+ G --> R[DTCG Reader<br/>dtcg-reader.js]
70
+ R --> G1[Colors]
71
+ R --> G2[Semantic Colors]
72
+ R --> G3[Typography]
73
+ R --> G4[Shadows + Spacing + ...]
71
74
 
72
75
  G1 --> H[CSS Variables Plugin]
73
76
  G1 --> I[JS Export Plugin]
74
- G1 --> J[JSON Export Plugin]
77
+ G1 --> J[DTS Export Plugin]
75
78
 
76
79
  H --> K[Generated Artifacts<br/>dist/]
77
80
  I --> K
@@ -80,8 +83,9 @@ graph TB
80
83
  G3 --> K
81
84
  G4 --> K
82
85
 
83
- K --> L[✅ Ready for npm publish]
86
+ K --> L[Ready for npm publish]
84
87
 
88
+ style F fill:#fff3e0
85
89
  style A fill:#e1f5fe
86
90
  style K fill:#f3e5f5
87
91
  style L fill:#e8f5e8
package/dist/border-radius.css CHANGED
@@ -1,20 +1,10 @@
1
- :root {/* Scopes: Corner Radius */
2
- --neo-border-radius-card: 12px;
3
- /* Scopes: Corner Radius */
1
+ :root { --neo-border-radius-card: 12px;
4
2
  --neo-border-radius-button: 999px;
5
- /* Scopes: Corner Radius */
6
3
  --neo-border-radius-input: 8px;
7
- /* Scopes: Corner Radius */
8
4
  --neo-border-radius-x-xs: 2px;
9
- /* Scopes: Corner Radius */
10
5
  --neo-border-radius-x-s: 4px;
11
- /* Scopes: Corner Radius */
12
6
  --neo-border-radius-s: 8px;
13
- /* Scopes: Corner Radius */
14
7
  --neo-border-radius-m: 12px;
15
- /* Scopes: Corner Radius */
16
8
  --neo-border-radius-l: 20px;
17
- /* Scopes: Corner Radius */
18
9
  --neo-border-radius-x-l: 30px;
19
- /* Scopes: Corner Radius */
20
10
  --neo-border-radius-full: 999px;}
package/dist/border-radius.d.ts CHANGED
@@ -4,54 +4,24 @@
4
4
  * @generated
5
5
  */
6
6
 
7
- /**
8
- * @scopes Corner Radius
9
- */
10
7
  export declare const card: 12;
11
8
 
12
- /**
13
- * @scopes Corner Radius
14
- */
15
9
  export declare const button: 999;
16
10
 
17
- /**
18
- * @scopes Corner Radius
19
- */
20
11
  export declare const input: 8;
21
12
 
22
- /**
23
- * @scopes Corner Radius
24
- */
25
13
  export declare const xXS: 2;
26
14
 
27
- /**
28
- * @scopes Corner Radius
29
- */
30
15
  export declare const xS: 4;
31
16
 
32
- /**
33
- * @scopes Corner Radius
34
- */
35
17
  export declare const s: 8;
36
18
 
37
- /**
38
- * @scopes Corner Radius
39
- */
40
19
  export declare const m: 12;
41
20
 
42
- /**
43
- * @scopes Corner Radius
44
- */
45
21
  export declare const l: 20;
46
22
 
47
- /**
48
- * @scopes Corner Radius
49
- */
50
23
  export declare const xL: 30;
51
24
 
52
- /**
53
- * @scopes Corner Radius
54
- */
55
25
  export declare const full: 999;
56
26
 
57
27
  declare const _default: {
package/dist/border-radius.js CHANGED
@@ -5,61 +5,51 @@
5
5
  */
6
6
 
7
7
  /**
8
- * Scopes: Corner Radius
9
8
  * @type {number}
10
9
  */
11
10
  export const card = 12;
12
11
 
13
12
  /**
14
- * Scopes: Corner Radius
15
13
  * @type {number}
16
14
  */
17
15
  export const button = 999;
18
16
 
19
17
  /**
20
- * Scopes: Corner Radius
21
18
  * @type {number}
22
19
  */
23
20
  export const input = 8;
24
21
 
25
22
  /**
26
- * Scopes: Corner Radius
27
23
  * @type {number}
28
24
  */
29
25
  export const xXS = 2;
30
26
 
31
27
  /**
32
- * Scopes: Corner Radius
33
28
  * @type {number}
34
29
  */
35
30
  export const xS = 4;
36
31
 
37
32
  /**
38
- * Scopes: Corner Radius
39
33
  * @type {number}
40
34
  */
41
35
  export const s = 8;
42
36
 
43
37
  /**
44
- * Scopes: Corner Radius
45
38
  * @type {number}
46
39
  */
47
40
  export const m = 12;
48
41
 
49
42
  /**
50
- * Scopes: Corner Radius
51
43
  * @type {number}
52
44
  */
53
45
  export const l = 20;
54
46
 
55
47
  /**
56
- * Scopes: Corner Radius
57
48
  * @type {number}
58
49
  */
59
50
  export const xL = 30;
60
51
 
61
52
  /**
62
- * Scopes: Corner Radius
63
53
  * @type {number}
64
54
  */
65
55
  export const full = 999;
package/dist/colors.css CHANGED
@@ -1,158 +1,80 @@
1
- :root {/* Scopes: All Fills, Stroke Color */
2
- --neo-digital-blue-50: #f2f3ff;
3
- /* Scopes: All Fills, Stroke Color */
1
+ :root { --neo-digital-blue-50: #f2f3ff;
4
2
  --neo-digital-blue-100: #dce0ff;
5
- /* Scopes: All Fills, Stroke Color */
6
3
  --neo-digital-blue-200: #b6bfff;
7
- /* Scopes: All Fills, Stroke Color */
8
4
  --neo-digital-blue-300: #8d99ff;
9
- /* Scopes: All Fills, Stroke Color */
10
5
  --neo-digital-blue-400: #626eff;
11
- /* primary color | Scopes: All Fills, Stroke Color */
6
+ /* primary color */
12
7
  --neo-digital-blue-500: #2f42ff;
13
- /* Scopes: All Fills, Stroke Color */
14
8
  --neo-digital-blue-600: #2637e6;
15
- /* Scopes: All Fills, Stroke Color */
16
9
  --neo-digital-blue-700: #1e2ec2;
17
- /* Scopes: All Fills, Stroke Color */
18
10
  --neo-digital-blue-800: #131e7a;
19
- /* Scopes: All Fills, Stroke Color */
20
11
  --neo-digital-blue-900: #000855;
21
- /* Scopes: All Fills, Stroke Color */
22
12
  --neo-digital-green-50: #f3fff5;
23
- /* Scopes: All Fills, Stroke Color */
24
13
  --neo-digital-green-100: #cfffd7;
25
- /* Scopes: All Fills, Stroke Color */
26
14
  --neo-digital-green-200: #acffb9;
27
- /* Scopes: All Fills, Stroke Color */
28
15
  --neo-digital-green-300: #88fe9b;
29
- /* Scopes: All Fills, Stroke Color */
30
16
  --neo-digital-green-400: #72e184;
31
- /* Scopes: All Fills, Stroke Color */
32
17
  --neo-digital-green-500: #5ec46f;
33
- /* Scopes: All Fills, Stroke Color */
34
18
  --neo-digital-green-600: #4ca75a;
35
- /* Scopes: All Fills, Stroke Color */
36
19
  --neo-digital-green-700: #3b8948;
37
- /* Scopes: All Fills, Stroke Color */
38
20
  --neo-digital-green-800: #2c6c36;
39
- /* Scopes: All Fills, Stroke Color */
40
21
  --neo-digital-green-900: #1e4f26;
41
- /* Scopes: All Fills, Stroke Color */
42
22
  --neo-gold-100: #fbf1d2;
43
- /* Scopes: All Fills, Stroke Color */
44
23
  --neo-gold-200: #f7e3a5;
45
- /* Scopes: All Fills, Stroke Color */
46
24
  --neo-gold-300: #f4d479;
47
- /* Scopes: All Fills, Stroke Color */
48
25
  --neo-gold-400: #f0c64c;
49
- /* Scopes: All Fills, Stroke Color */
50
26
  --neo-gold-500: #ecb81f;
51
- /* Scopes: All Fills, Stroke Color */
52
27
  --neo-gold-600: #bd9319;
53
- /* Scopes: All Fills, Stroke Color */
54
28
  --neo-gold-700: #8e6e13;
55
- /* Scopes: All Fills, Stroke Color */
56
29
  --neo-gold-800: #5e4a0c;
57
- /* Scopes: All Fills, Stroke Color */
58
30
  --neo-gold-900: #2f2506;
59
- /* Scopes: All Fills, Stroke Color */
60
31
  --neo-grey-50: #f9fafb;
61
- /* Scopes: All Fills, Stroke Color */
62
32
  --neo-grey-100: #f3f4f6;
63
- /* Scopes: All Fills, Stroke Color */
64
33
  --neo-grey-200: #e5e7eb;
65
- /* Scopes: All Fills, Stroke Color */
66
34
  --neo-grey-300: #d1d5db;
67
- /* Scopes: All Fills, Stroke Color */
68
35
  --neo-grey-400: #9ca3af;
69
- /* Scopes: All Fills, Stroke Color */
70
36
  --neo-grey-500: #6b7280;
71
- /* Scopes: All Fills, Stroke Color */
72
37
  --neo-grey-600: #4b5563;
73
- /* Scopes: All Fills, Stroke Color */
74
38
  --neo-grey-700: #374151;
75
- /* Scopes: All Fills, Stroke Color */
76
39
  --neo-grey-800: #1f2937;
77
- /* Scopes: All Fills, Stroke Color */
78
40
  --neo-grey-900: #111827;
79
- /* Scopes: All Fills, Stroke Color */
80
41
  --neo-orange-50: #fff8e5;
81
- /* Scopes: All Fills, Stroke Color */
82
42
  --neo-orange-100: #ffebb7;
83
- /* Scopes: All Fills, Stroke Color */
84
43
  --neo-orange-200: #ffde8a;
85
- /* Scopes: All Fills, Stroke Color */
86
44
  --neo-orange-300: #ffd15c;
87
- /* Scopes: All Fills, Stroke Color */
88
45
  --neo-orange-400: #ffc52e;
89
- /* Scopes: All Fills, Stroke Color */
90
46
  --neo-orange-500: #ffb800;
91
- /* Scopes: All Fills, Stroke Color */
92
47
  --neo-orange-600: #d69b00;
93
- /* Scopes: All Fills, Stroke Color */
94
48
  --neo-orange-700: #856000;
95
- /* Scopes: All Fills, Stroke Color */
96
49
  --neo-orange-800: #856000;
97
- /* Scopes: All Fills, Stroke Color */
98
50
  --neo-orange-900: #5c4200;
99
- /* Scopes: All Fills, Stroke Color */
100
51
  --neo-red-50: #ffedef;
101
- /* Scopes: All Fills, Stroke Color */
102
52
  --neo-red-100: #ffc6cd;
103
- /* Scopes: All Fills, Stroke Color */
104
53
  --neo-red-200: #ff9eaa;
105
- /* Scopes: All Fills, Stroke Color */
106
54
  --neo-red-300: #fd7686;
107
- /* Scopes: All Fills, Stroke Color */
108
55
  --neo-red-400: #ed4a5d;
109
- /* Scopes: All Fills, Stroke Color */
110
56
  --neo-red-500: #cb3446;
111
- /* Scopes: All Fills, Stroke Color */
112
57
  --neo-red-600: #a92232;
113
- /* Scopes: All Fills, Stroke Color */
114
58
  --neo-red-700: #871421;
115
- /* Scopes: All Fills, Stroke Color */
116
59
  --neo-red-800: #650914;
117
- /* Scopes: All Fills, Stroke Color */
118
60
  --neo-red-900: #43020a;
119
- /* Scopes: All Fills, Stroke Color */
120
61
  --neo-teal-green-50: #eefffa;
121
- /* Scopes: All Fills, Stroke Color */
122
62
  --neo-teal-green-100: #c9fff1;
123
- /* Scopes: All Fills, Stroke Color */
124
63
  --neo-teal-green-200: #a4ffe7;
125
- /* Scopes: All Fills, Stroke Color */
126
64
  --neo-teal-green-300: #7fffde;
127
- /* Scopes: All Fills, Stroke Color */
128
65
  --neo-teal-green-400: #54eec6;
129
- /* Scopes: All Fills, Stroke Color */
130
66
  --neo-teal-green-500: #3bcca6;
131
- /* Scopes: All Fills, Stroke Color */
132
67
  --neo-teal-green-600: #27aa88;
133
- /* Scopes: All Fills, Stroke Color */
134
68
  --neo-teal-green-700: #17886b;
135
- /* Scopes: All Fills, Stroke Color */
136
69
  --neo-teal-green-800: #0b664e;
137
- /* Scopes: All Fills, Stroke Color */
138
70
  --neo-teal-green-900: #034433;
139
- /* Scopes: All Fills, Stroke Color */
140
71
  --neo-violet-100: #ebd5f1;
141
- /* Scopes: All Fills, Stroke Color */
142
72
  --neo-violet-200: #d6ace3;
143
- /* Scopes: All Fills, Stroke Color */
144
73
  --neo-violet-300: #c282d5;
145
- /* Scopes: All Fills, Stroke Color */
146
74
  --neo-violet-400: #ad59c7;
147
- /* Scopes: All Fills, Stroke Color */
148
75
  --neo-violet-500: #992fb9;
149
- /* Scopes: All Fills, Stroke Color */
150
76
  --neo-violet-600: #7a2694;
151
- /* Scopes: All Fills, Stroke Color */
152
77
  --neo-violet-700: #5c1c6f;
153
- /* Scopes: All Fills, Stroke Color */
154
78
  --neo-violet-800: #3d134a;
155
- /* Scopes: All Fills, Stroke Color */
156
79
  --neo-violet-900: #1f0925;
157
- /* Scopes: All Fills, Stroke Color */
158
80
  --neo-white: #ffffff;}