@j3m-quantum/ui 1.4.0 → 1.5.0

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 (3) hide show
  1. package/dist/styles/generated/variables.css +263 -0
  2. package/dist/styles/index.css +8 -0
  3. package/package.json +4 -2
package/dist/styles/generated/variables.css ADDED
@@ -0,0 +1,263 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
7
+ --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
8
+ --j3m-glass-light-40: rgba(255, 255, 255, 0.4);
9
+ --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
10
+ --j3m-glass-light-80: rgba(255, 255, 255, 0.8);
11
+ --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
12
+ --j3m-glass-light-default: rgba(255, 255, 255, 0.5);
13
+ --j3m-glass-light-hover: rgba(255, 255, 255, 0.8);
14
+ --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
15
+ --j3m-glass-dark-10: rgba(13, 17, 23, 0.1);
16
+ --j3m-glass-dark-20: rgba(13, 17, 23, 0.2);
17
+ --j3m-glass-dark-40: rgba(13, 17, 23, 0.4);
18
+ --j3m-glass-dark-50: rgba(13, 17, 23, 0.5);
19
+ --j3m-glass-dark-60: rgba(13, 17, 23, 0.6);
20
+ --j3m-glass-dark-70: rgba(13, 17, 23, 0.7);
21
+ --j3m-glass-dark-80: rgba(13, 17, 23, 0.8);
22
+ --j3m-glass-dark-90: rgba(13, 17, 23, 0.9);
23
+ --j3m-glass-dark-95: rgba(13, 17, 23, 0.95);
24
+ --j3m-glass-dark-base: #0d1117;
25
+ --j3m-glass-dark-subtle: rgba(13, 17, 23, 0.3);
26
+ --j3m-glass-dark-muted: rgba(13, 17, 23, 0.4);
27
+ --j3m-glass-dark-surface: rgba(13, 17, 23, 0.7);
28
+ --j3m-glass-dark-surface-hover: rgba(22, 27, 34, 0.8);
29
+ --j3m-glass-dark-surface-active: rgba(30, 35, 42, 0.85);
30
+ --j3m-glass-dark-elevated: rgba(22, 27, 34, 0.85);
31
+ --j3m-glass-dark-elevated-hover: rgba(30, 35, 42, 0.9);
32
+ --j3m-glass-dark-overlay: rgba(22, 27, 34, 0.95);
33
+ --j3m-glass-dark-input: rgba(0, 0, 0, 0.4);
34
+ --j3m-glass-dark-sidebar: rgba(0, 0, 0, 0.6);
35
+ --j3m-glass-dark-element: rgba(255, 255, 255, 0.05);
36
+ --j3m-glass-dark-element-hover: rgba(255, 255, 255, 0.08);
37
+ --j3m-glass-dark-element-active: rgba(255, 255, 255, 0.12);
38
+ --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
39
+ --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
40
+ --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
41
+ --j3m-glass-border-dark: rgba(255, 255, 255, 0.08);
42
+ --j3m-glass-border-dark-light: rgba(255, 255, 255, 0.12);
43
+ --j3m-glass-border-dark-subtle: rgba(255, 255, 255, 0.05);
44
+ --j3m-glass-frosted: rgba(255, 255, 255, 0.25);
45
+ --j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
46
+ --j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
47
+ --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
48
+ --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
49
+ --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
50
+ --j3m-orange-1: #fffdfb;
51
+ --j3m-orange-2: #fff5ed;
52
+ --j3m-orange-3: #ffe8d9;
53
+ --j3m-orange-4: #ffd4bc;
54
+ --j3m-orange-5: #ffba8f;
55
+ --j3m-orange-6: #ffa66a;
56
+ --j3m-orange-7: #f79d6b;
57
+ --j3m-orange-8: #f58446;
58
+ --j3m-orange-9: #f36c21;
59
+ --j3m-orange-10: #ea5b0c;
60
+ --j3m-orange-11: #ca4f0b;
61
+ --j3m-orange-12: #8f3808;
62
+ --j3m-gray-1: #ffffff;
63
+ --j3m-gray-2: #fafafa;
64
+ --j3m-gray-3: #f0f0f0;
65
+ --j3m-gray-4: #e8e8e8;
66
+ --j3m-gray-5: #e0e0e0;
67
+ --j3m-gray-6: #d2d2d2;
68
+ --j3m-gray-7: #bbbbbb;
69
+ --j3m-gray-8: #a4a4a4;
70
+ --j3m-gray-9: #8e8e8e;
71
+ --j3m-gray-10: #777777;
72
+ --j3m-gray-11: #606060;
73
+ --j3m-gray-12: #333333;
74
+ --j3m-gray-13: #272727;
75
+ --j3m-gray-14: #1a1a1a;
76
+ --j3m-red-9: #fb3748;
77
+ --j3m-red-10: #d00416;
78
+ --j3m-yellow-9: #ffdb43;
79
+ --j3m-yellow-10: #dfb400;
80
+ --j3m-green-9: #84ebb4;
81
+ --j3m-green-10: #1fc16b;
82
+ --j3m-blur-sm: 10px;
83
+ --j3m-blur-md: 20px;
84
+ --j3m-blur-lg: 50px;
85
+ --j3m-blur-frosted: 24px;
86
+ --j3m-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
87
+ --j3m-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
88
+ --j3m-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
89
+ --j3m-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
90
+ --j3m-shadow-glow: 0 0 10px #F36C21;
91
+ --j3m-shadow-glow-active: 0 0 20px #EA5B0C;
92
+ --j3m-radius-none: 0px;
93
+ --j3m-radius-2xs: 4px;
94
+ --j3m-radius-xs: 5px;
95
+ --j3m-radius-s: 8px;
96
+ --j3m-radius-m: 10px;
97
+ --j3m-radius-l: 18px;
98
+ --j3m-radius-xl: 22px;
99
+ --j3m-radius-2xl: 26px;
100
+ --j3m-radius-full: 9999px;
101
+ --j3m-spacing-xs: 8px;
102
+ --j3m-spacing-s: 12px;
103
+ --j3m-spacing-m: 16px;
104
+ --j3m-spacing-l: 24px;
105
+ --j3m-spacing-xl: 32px;
106
+ --j3m-layout-header-height: 56px;
107
+ --j3m-layout-sidebar-width: 256px;
108
+ --j3m-layout-sidebar-width-collapsed: 48px;
109
+ --j3m-stroke-none: 0px;
110
+ --j3m-stroke-s: 1px;
111
+ --j3m-stroke-m: 2px;
112
+ --j3m-stroke-l: 3px;
113
+ --j3m-stroke-xl: 4px;
114
+ --sidebar-primary-foreground: #ffffff;
115
+ --glass-dark-card-foreground: #ffffff;
116
+ --glass-dark-accent-foreground: #ffffff;
117
+ --glass-dark-foreground: rgba(255, 255, 255, 0.95);
118
+ --glass-dark-muted-foreground: rgba(255, 255, 255, 0.6);
119
+ --glass-dark-bg-app: rgba(0, 0, 0, 0);
120
+ --glass-dark-bg-page: rgba(0, 0, 0, 0);
121
+ --glass-dark-bg-surface-active: #404040;
122
+ --glass-dark-bg-elevated-hover: #404040;
123
+ --glass-dark-bg-element-hover: #404040;
124
+ --glass-dark-bg-element-active: #4a4a4a;
125
+ --glass-dark-accent: #404040;
126
+ --glass-dark-sidebar-accent: #404040;
127
+ --glass-dark-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
128
+ --glass-light-bg-app: rgba(0, 0, 0, 0);
129
+ --glass-light-bg-page: rgba(0, 0, 0, 0);
130
+ --glass-light-bg-sidebar: #e8e8e8;
131
+ --glass-light-muted-foreground: rgba(0, 0, 0, 0.55);
132
+ --dark-accent: #404040;
133
+ --dark-destructive-foreground: #ffffff;
134
+ --dark-sidebar-accent: #404040;
135
+ --dark-bg-app: #0d0d0d;
136
+ --dark-bg-page: #1a1a1a;
137
+ --dark-bg-surface-active: #404040;
138
+ --dark-bg-elevated-hover: #404040;
139
+ --dark-bg-subtle: #1a1a1a;
140
+ --dark-bg-element-hover: #404040;
141
+ --dark-bg-element-active: #4d4d4d;
142
+ --dark-bg-input-disabled: #1a1a1a;
143
+ --primary-foreground: #ffffff;
144
+ --destructive-foreground: #ffffff;
145
+ --chart-1: var(--j3m-orange-8);
146
+ --chart-2: var(--j3m-orange-7);
147
+ --chart-3: var(--j3m-orange-9);
148
+ --chart-4: var(--j3m-orange-5);
149
+ --chart-5: var(--j3m-orange-10);
150
+ --j3m-bg-app: var(--j3m-gray-6);
151
+ --j3m-bg-page: var(--j3m-gray-4);
152
+ --j3m-bg-surface: var(--j3m-gray-1);
153
+ --j3m-bg-surface-hover: var(--j3m-gray-2);
154
+ --j3m-bg-surface-active: var(--j3m-gray-3);
155
+ --j3m-bg-elevated: var(--j3m-gray-1);
156
+ --j3m-bg-elevated-hover: var(--j3m-gray-2);
157
+ --j3m-bg-overlay: var(--j3m-gray-1);
158
+ --j3m-bg-muted: var(--j3m-gray-4);
159
+ --j3m-bg-subtle: var(--j3m-gray-3);
160
+ --j3m-bg-element: var(--j3m-gray-4);
161
+ --j3m-bg-element-hover: var(--j3m-gray-5);
162
+ --j3m-bg-element-active: var(--j3m-gray-6);
163
+ --j3m-bg-input: var(--j3m-gray-1);
164
+ --j3m-bg-input-disabled: var(--j3m-gray-3);
165
+ --j3m-bg-sidebar: var(--j3m-gray-4);
166
+ --j3m-bg-toolbar: var(--j3m-gray-5);
167
+ --sidebar: var(--j3m-gray-4);
168
+ --sidebar-foreground: var(--j3m-gray-11);
169
+ --sidebar-primary: var(--j3m-orange-9);
170
+ --sidebar-accent: var(--j3m-gray-3);
171
+ --sidebar-accent-foreground: var(--j3m-gray-12);
172
+ --sidebar-border: var(--j3m-gray-6);
173
+ --sidebar-ring: var(--j3m-orange-9);
174
+ --glass-dark-frosted: var(--j3m-glass-dark-surface);
175
+ --glass-dark-frosted-strong: var(--j3m-glass-dark-elevated);
176
+ --glass-dark-frosted-card: var(--j3m-glass-dark-surface);
177
+ --glass-dark-bg-surface: var(--j3m-gray-13);
178
+ --glass-dark-bg-surface-hover: var(--j3m-gray-12);
179
+ --glass-dark-bg-elevated: var(--j3m-gray-12);
180
+ --glass-dark-bg-overlay: var(--j3m-gray-13);
181
+ --glass-dark-bg-muted: var(--j3m-gray-12);
182
+ --glass-dark-bg-subtle: var(--j3m-gray-11);
183
+ --glass-dark-bg-element: var(--j3m-gray-12);
184
+ --glass-dark-bg-input: var(--j3m-gray-11);
185
+ --glass-dark-bg-input-disabled: var(--j3m-gray-10);
186
+ --glass-dark-bg-sidebar: var(--j3m-gray-13);
187
+ --glass-dark-card: var(--j3m-gray-13);
188
+ --glass-dark-popover: var(--j3m-gray-13);
189
+ --glass-dark-border: var(--j3m-gray-11);
190
+ --glass-dark-secondary: var(--j3m-gray-12);
191
+ --glass-dark-sidebar: var(--j3m-gray-13);
192
+ --glass-dark-sidebar-foreground: var(--j3m-gray-1);
193
+ --glass-dark-sidebar-border: var(--j3m-gray-11);
194
+ --glass-dark-sidebar-accent-foreground: var(--j3m-gray-1);
195
+ --glass-light-bg-surface: var(--j3m-glass-frosted-card);
196
+ --glass-light-bg-surface-hover: var(--j3m-glass-light-50);
197
+ --glass-light-bg-surface-active: var(--j3m-glass-light-80);
198
+ --glass-light-bg-elevated: var(--j3m-glass-light-80);
199
+ --glass-light-bg-elevated-hover: var(--j3m-glass-light-80);
200
+ --glass-light-bg-overlay: var(--j3m-glass-light-strong);
201
+ --glass-light-bg-muted: var(--j3m-glass-light-20);
202
+ --glass-light-bg-subtle: var(--j3m-glass-light-10);
203
+ --glass-light-bg-element: var(--j3m-glass-light-40);
204
+ --glass-light-bg-element-hover: var(--j3m-glass-light-50);
205
+ --glass-light-bg-element-active: var(--j3m-glass-light-80);
206
+ --glass-light-bg-input: var(--j3m-glass-light-50);
207
+ --glass-light-bg-input-disabled: var(--j3m-glass-light-20);
208
+ --glass-light-card: var(--j3m-glass-light-50);
209
+ --glass-light-popover: var(--j3m-gray-1);
210
+ --glass-light-input: var(--j3m-glass-light-50);
211
+ --glass-light-border: var(--j3m-glass-border-light);
212
+ --glass-light-muted: var(--j3m-glass-light-50);
213
+ --glass-light-secondary: var(--j3m-glass-light-80);
214
+ --dark-background: var(--j3m-gray-12);
215
+ --dark-foreground: var(--j3m-gray-1);
216
+ --dark-card: var(--j3m-gray-13);
217
+ --dark-card-foreground: var(--j3m-gray-1);
218
+ --dark-popover: var(--j3m-gray-13);
219
+ --dark-popover-foreground: var(--j3m-gray-1);
220
+ --dark-primary: var(--j3m-orange-8);
221
+ --dark-primary-foreground: var(--j3m-gray-12);
222
+ --dark-secondary: var(--j3m-gray-12);
223
+ --dark-secondary-foreground: var(--j3m-gray-1);
224
+ --dark-muted: var(--j3m-gray-12);
225
+ --dark-muted-foreground: var(--j3m-gray-7);
226
+ --dark-accent-foreground: var(--j3m-gray-1);
227
+ --dark-destructive: var(--j3m-red-10);
228
+ --dark-border: var(--j3m-gray-11);
229
+ --dark-input: var(--j3m-gray-11);
230
+ --dark-ring: var(--j3m-orange-8);
231
+ --dark-sidebar: var(--j3m-gray-13);
232
+ --dark-sidebar-foreground: var(--j3m-gray-1);
233
+ --dark-sidebar-primary: var(--j3m-orange-8);
234
+ --dark-sidebar-primary-foreground: var(--j3m-gray-12);
235
+ --dark-sidebar-accent-foreground: var(--j3m-gray-1);
236
+ --dark-sidebar-border: var(--j3m-gray-11);
237
+ --dark-sidebar-ring: var(--j3m-orange-8);
238
+ --dark-bg-surface: var(--j3m-gray-13);
239
+ --dark-bg-surface-hover: var(--j3m-gray-12);
240
+ --dark-bg-elevated: var(--j3m-gray-12);
241
+ --dark-bg-overlay: var(--j3m-gray-12);
242
+ --dark-bg-muted: var(--j3m-gray-13);
243
+ --dark-bg-element: var(--j3m-gray-12);
244
+ --dark-bg-input: var(--j3m-gray-13);
245
+ --dark-bg-sidebar: var(--j3m-gray-13);
246
+ --primary: var(--j3m-orange-8);
247
+ --secondary: var(--j3m-gray-4);
248
+ --secondary-foreground: var(--j3m-gray-11);
249
+ --accent: var(--j3m-gray-3);
250
+ --accent-foreground: var(--j3m-gray-12);
251
+ --destructive: var(--j3m-red-9);
252
+ --muted: var(--j3m-gray-4);
253
+ --muted-foreground: var(--j3m-gray-9);
254
+ --border: var(--j3m-gray-7);
255
+ --input: var(--j3m-gray-6);
256
+ --ring: var(--j3m-orange-8);
257
+ --background: var(--j3m-gray-1);
258
+ --foreground: var(--j3m-gray-12);
259
+ --card: var(--j3m-gray-1);
260
+ --card-foreground: var(--j3m-gray-12);
261
+ --popover: var(--j3m-gray-1);
262
+ --popover-foreground: var(--j3m-gray-12);
263
+ }
package/dist/styles/index.css CHANGED
@@ -5,8 +5,16 @@
5
5
  Usage:
6
6
  @import "tailwindcss";
7
7
  @import "@j3m-quantum/ui/styles";
8
+
9
+ Token Architecture:
10
+ - Source of Truth: tokens/*.json (Style Dictionary)
11
+ - Generated: src/styles/generated/variables.css
12
+ - This file: Mode overrides, Tailwind mapping, utilities
8
13
  ======================================== */
9
14
 
15
+ /* Import generated primitive tokens from Style Dictionary */
16
+ @import './generated/variables.css';
17
+
10
18
  /* ========================================
11
19
  COLOR SCALES (12-Step, HEX Format)
12
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@j3m-quantum/ui",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "private": false,
5
5
  "description": "J3M UI Component Library - React components with J3M design tokens",
6
6
  "type": "module",
@@ -27,7 +27,8 @@
27
27
  "README.md"
28
28
  ],
29
29
  "scripts": {
30
- "build": "tsup && npm run copy-styles",
30
+ "tokens": "style-dictionary build --config style-dictionary.config.js",
31
+ "build": "npm run tokens && tsup && npm run copy-styles",
31
32
  "copy-styles": "cp -r src/styles dist/",
32
33
  "dev": "tsup --watch",
33
34
  "prepublishOnly": "npm run build"
@@ -98,6 +99,7 @@
98
99
  "@changesets/cli": "^2.29.4",
99
100
  "@types/react": "^19.1.8",
100
101
  "@types/react-dom": "^19.1.6",
102
+ "style-dictionary": "^4.2.0",
101
103
  "tsup": "^8.5.0",
102
104
  "typescript": "^5.8.3"
103
105
  }