@j3m-quantum/ui 0.4.0 → 0.7.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.
- package/README.md +166 -0
- package/dist/index.cjs +167 -372
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -58
- package/dist/index.d.ts +22 -58
- package/dist/index.js +169 -373
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +596 -15
- package/package.json +1 -1
- package/dist/styles/animations.css +0 -370
- package/dist/styles/base.css +0 -130
- package/dist/styles/j3m-overrides.css +0 -132
- package/dist/styles/theme.css +0 -59
- package/dist/styles/tokens.css +0 -248
package/dist/styles/tokens.css
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
/* ========================================
|
|
2
|
-
J3M DESIGN TOKENS
|
|
3
|
-
All J3M-specific design tokens (backup from original globals.css)
|
|
4
|
-
======================================== */
|
|
5
|
-
|
|
6
|
-
:root {
|
|
7
|
-
/* ========================================
|
|
8
|
-
J3M SCALE COLORS (Primitives)
|
|
9
|
-
======================================== */
|
|
10
|
-
|
|
11
|
-
/* Primary Orange Scale */
|
|
12
|
-
--j3m-primary-100: #FBCEB5;
|
|
13
|
-
--j3m-primary-200: #F79D6B;
|
|
14
|
-
--j3m-primary-250: #F58446;
|
|
15
|
-
--j3m-primary-300: #F36C21;
|
|
16
|
-
--j3m-primary-350: #EA5B0C;
|
|
17
|
-
--j3m-primary-400: #CA4F0B;
|
|
18
|
-
--j3m-primary-500: #8F3808;
|
|
19
|
-
|
|
20
|
-
/* Neutral Gray Scale */
|
|
21
|
-
--j3m-neutral-100: #FFFFFF;
|
|
22
|
-
--j3m-neutral-200: #E8E8E8;
|
|
23
|
-
--j3m-neutral-250: #DADBDC;
|
|
24
|
-
--j3m-neutral-300: #D2D2D2;
|
|
25
|
-
--j3m-neutral-350: #D1D1D1;
|
|
26
|
-
--j3m-neutral-400: #BBBBBB;
|
|
27
|
-
--j3m-neutral-500: #A4A4A4;
|
|
28
|
-
--j3m-neutral-600: #8E8E8E;
|
|
29
|
-
--j3m-neutral-700: #777777;
|
|
30
|
-
--j3m-neutral-750: #747474;
|
|
31
|
-
--j3m-neutral-800: #606060;
|
|
32
|
-
--j3m-neutral-900: #4A4A4A;
|
|
33
|
-
--j3m-neutral-1000: #333333;
|
|
34
|
-
|
|
35
|
-
/* Status Colors */
|
|
36
|
-
--j3m-red-100: #FB3748;
|
|
37
|
-
--j3m-red-200: #D00416;
|
|
38
|
-
--j3m-yellow-100: #FFDB43;
|
|
39
|
-
--j3m-yellow-200: #DFB400;
|
|
40
|
-
--j3m-green-100: #84EBB4;
|
|
41
|
-
--j3m-green-200: #1FC16B;
|
|
42
|
-
|
|
43
|
-
/* ========================================
|
|
44
|
-
J3M SEMANTIC TOKENS
|
|
45
|
-
======================================== */
|
|
46
|
-
|
|
47
|
-
/* Background Tokens */
|
|
48
|
-
--color-bg-surface: var(--j3m-neutral-100);
|
|
49
|
-
--color-bg-subtle: var(--j3m-neutral-200);
|
|
50
|
-
|
|
51
|
-
/* Text Tokens */
|
|
52
|
-
--color-text-main: rgba(0, 0, 0, 0.7);
|
|
53
|
-
--color-text-muted: rgba(0, 0, 0, 0.5);
|
|
54
|
-
--color-text-soft: rgba(0, 0, 0, 0.4);
|
|
55
|
-
--color-text-on-accent: #FFFFFF;
|
|
56
|
-
--color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
|
|
57
|
-
|
|
58
|
-
/* Border Tokens */
|
|
59
|
-
--color-border-subtle: var(--j3m-neutral-200);
|
|
60
|
-
--color-border-strong: var(--j3m-neutral-400);
|
|
61
|
-
|
|
62
|
-
/* Accent Tokens */
|
|
63
|
-
--color-accent: var(--j3m-primary-250);
|
|
64
|
-
|
|
65
|
-
/* Interactive State Tokens */
|
|
66
|
-
--color-interactive-bg: var(--j3m-primary-250);
|
|
67
|
-
--color-interactive-text: var(--j3m-neutral-100);
|
|
68
|
-
--color-cta-bg: var(--j3m-primary-300);
|
|
69
|
-
--color-cta-text: var(--j3m-neutral-100);
|
|
70
|
-
--color-focus-ring: var(--j3m-stroke-primary-250-20);
|
|
71
|
-
--color-hover-overlay-light: var(--j3m-stroke-light-20);
|
|
72
|
-
--color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
|
|
73
|
-
|
|
74
|
-
/* Tooltip Tokens */
|
|
75
|
-
--color-tooltip-bg: var(--j3m-neutral-1000);
|
|
76
|
-
--color-tooltip-text: var(--j3m-neutral-100);
|
|
77
|
-
|
|
78
|
-
/* Progress Tokens */
|
|
79
|
-
--color-progress-fill: var(--j3m-primary-250);
|
|
80
|
-
--color-progress-track: rgba(255, 255, 255, 0.5);
|
|
81
|
-
|
|
82
|
-
/* Input Tokens (default - solid context) */
|
|
83
|
-
--color-input-bg: transparent;
|
|
84
|
-
--color-input-border: var(--color-border-subtle);
|
|
85
|
-
|
|
86
|
-
/* Checkbox & Radio Tokens */
|
|
87
|
-
--color-checkbox-bg: rgba(255, 255, 255, 0.5);
|
|
88
|
-
--color-radio-bg: rgba(255, 255, 255, 0.5);
|
|
89
|
-
|
|
90
|
-
/* Modal/Overlay Tokens (default - solid context) */
|
|
91
|
-
--color-popover-bg: var(--color-bg-surface);
|
|
92
|
-
--color-hovercard-bg: var(--color-bg-surface);
|
|
93
|
-
--color-sheet-bg: var(--color-bg-surface);
|
|
94
|
-
--color-drawer-bg: var(--color-bg-surface);
|
|
95
|
-
--color-dropdown-bg: var(--color-bg-surface);
|
|
96
|
-
--color-contextmenu-bg: var(--color-bg-surface);
|
|
97
|
-
|
|
98
|
-
/* Spacing */
|
|
99
|
-
--j3m-spacing-xs: 8px;
|
|
100
|
-
--j3m-spacing-s: 12px;
|
|
101
|
-
--j3m-spacing-m: 16px;
|
|
102
|
-
--j3m-spacing-l: 24px;
|
|
103
|
-
--j3m-spacing-xl: 32px;
|
|
104
|
-
|
|
105
|
-
/* Radii */
|
|
106
|
-
--j3m-radius-none: 0px;
|
|
107
|
-
--j3m-radius-2xs: 4px;
|
|
108
|
-
--j3m-radius-xs: 5px;
|
|
109
|
-
--j3m-radius-s: 8px;
|
|
110
|
-
--j3m-radius-m: 10px;
|
|
111
|
-
--j3m-radius-l: 18px;
|
|
112
|
-
--j3m-radius-xl: 22px;
|
|
113
|
-
--j3m-radius-2xl: 26px;
|
|
114
|
-
--j3m-radius-full: 999px;
|
|
115
|
-
|
|
116
|
-
/* Stroke/Border Width */
|
|
117
|
-
--j3m-stroke-none: 0px;
|
|
118
|
-
--j3m-stroke-s: 1px;
|
|
119
|
-
--j3m-stroke-m: 2px;
|
|
120
|
-
--j3m-stroke-l: 3px;
|
|
121
|
-
--j3m-stroke-xl: 4px;
|
|
122
|
-
|
|
123
|
-
/* Stroke Colors (opacity variants) */
|
|
124
|
-
/* Light (white) strokes */
|
|
125
|
-
--j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
|
|
126
|
-
--j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
|
|
127
|
-
/* Dark (neutral-1000) strokes */
|
|
128
|
-
--j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
|
|
129
|
-
--j3m-stroke-neutral-1000-20: rgba(51, 51, 51, 0.2);
|
|
130
|
-
/* Primary-250 strokes (interactive) */
|
|
131
|
-
--j3m-stroke-primary-250-10: rgba(245, 132, 70, 0.1);
|
|
132
|
-
--j3m-stroke-primary-250-20: rgba(245, 132, 70, 0.2);
|
|
133
|
-
/* Primary-350 strokes (toast, accent) */
|
|
134
|
-
--j3m-stroke-primary-350-10: rgba(234, 91, 12, 0.1);
|
|
135
|
-
--j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
|
|
136
|
-
|
|
137
|
-
/* Glass Effect Tokens */
|
|
138
|
-
--j3m-glass-light-10: rgba(255, 255, 255, 0.1);
|
|
139
|
-
--j3m-glass-light-20: rgba(255, 255, 255, 0.2);
|
|
140
|
-
--j3m-glass-light-30: rgba(255, 255, 255, 0.3);
|
|
141
|
-
--j3m-glass-light-50: rgba(255, 255, 255, 0.5);
|
|
142
|
-
--j3m-glass-light-60: rgba(255, 255, 255, 0.6);
|
|
143
|
-
--j3m-glass-light-70: rgba(255, 255, 255, 0.7);
|
|
144
|
-
--j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
|
|
145
|
-
--j3m-glass-light: rgba(255, 255, 255, 0.5);
|
|
146
|
-
--j3m-glass-light-hover: rgba(255, 255, 255, 0.7);
|
|
147
|
-
--j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
|
|
148
|
-
|
|
149
|
-
--j3m-glass-dark: rgba(51, 51, 51, 0.6);
|
|
150
|
-
--j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
|
|
151
|
-
--j3m-glass-dark-strong: rgba(51, 51, 51, 0.8);
|
|
152
|
-
|
|
153
|
-
--j3m-glass-neutral-subtle: rgba(198, 198, 198, 0.5);
|
|
154
|
-
--j3m-glass-neutral: rgba(227, 227, 227, 0.5);
|
|
155
|
-
--j3m-glass-neutral-hover: rgba(227, 227, 227, 0.6);
|
|
156
|
-
--j3m-glass-neutral-strong: rgba(227, 227, 227, 0.81);
|
|
157
|
-
|
|
158
|
-
--j3m-glass-primary: rgba(243, 108, 33, 0.1);
|
|
159
|
-
--j3m-glass-primary-hover: rgba(243, 108, 33, 0.15);
|
|
160
|
-
--j3m-glass-primary-strong: rgba(243, 108, 33, 0.2);
|
|
161
|
-
--j3m-glass-primary-highlight: rgba(243, 108, 33, 0.31);
|
|
162
|
-
|
|
163
|
-
--j3m-glass-border-light: rgba(255, 255, 255, 0.3);
|
|
164
|
-
--j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
|
|
165
|
-
--j3m-glass-border-white: rgba(255, 255, 255, 0.2);
|
|
166
|
-
--j3m-glass-border-dark: rgba(0, 0, 0, 0.1);
|
|
167
|
-
--j3m-glass-border-dark-subtle: rgba(0, 0, 0, 0.05);
|
|
168
|
-
|
|
169
|
-
/* Blur Scale */
|
|
170
|
-
--j3m-blur-none: 0px;
|
|
171
|
-
--j3m-blur-xs: 4px;
|
|
172
|
-
--j3m-blur-sm: 8px;
|
|
173
|
-
--j3m-blur-md: 12px;
|
|
174
|
-
--j3m-blur-lg: 16px;
|
|
175
|
-
--j3m-blur-xl: 24px;
|
|
176
|
-
--j3m-blur-2xl: 40px;
|
|
177
|
-
--j3m-blur-3xl: 64px;
|
|
178
|
-
--j3m-blur-4xl: 100px;
|
|
179
|
-
--j3m-blur-max: 1000px;
|
|
180
|
-
|
|
181
|
-
/* Opacity Scale */
|
|
182
|
-
--j3m-opacity-0: 0;
|
|
183
|
-
--j3m-opacity-5: 0.05;
|
|
184
|
-
--j3m-opacity-10: 0.1;
|
|
185
|
-
--j3m-opacity-20: 0.2;
|
|
186
|
-
--j3m-opacity-30: 0.3;
|
|
187
|
-
--j3m-opacity-40: 0.4;
|
|
188
|
-
--j3m-opacity-50: 0.5;
|
|
189
|
-
--j3m-opacity-60: 0.6;
|
|
190
|
-
--j3m-opacity-70: 0.7;
|
|
191
|
-
--j3m-opacity-80: 0.8;
|
|
192
|
-
--j3m-opacity-90: 0.9;
|
|
193
|
-
--j3m-opacity-100: 1;
|
|
194
|
-
|
|
195
|
-
/* Glass Shadows */
|
|
196
|
-
--j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
197
|
-
--j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
198
|
-
--j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
199
|
-
--j3m-glass-shadow-glow: 0 0 10px var(--j3m-primary-300);
|
|
200
|
-
--j3m-glass-shadow-glow-active: 0 0 10px var(--j3m-primary-350);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
/* ========================================
|
|
204
|
-
GLASS CONTEXT OVERRIDES
|
|
205
|
-
Applied when components are inside .glass-context
|
|
206
|
-
======================================== */
|
|
207
|
-
|
|
208
|
-
.glass-context {
|
|
209
|
-
/* Background - more transparent, lets blur show through */
|
|
210
|
-
--color-bg-surface: var(--j3m-glass-light);
|
|
211
|
-
--color-bg-subtle: var(--j3m-glass-light-subtle);
|
|
212
|
-
|
|
213
|
-
/* Text - higher contrast for glass backgrounds */
|
|
214
|
-
--color-text-main: rgba(0, 0, 0, 0.85);
|
|
215
|
-
--color-text-muted: rgba(0, 0, 0, 0.6);
|
|
216
|
-
--color-text-soft: rgba(0, 0, 0, 0.45);
|
|
217
|
-
|
|
218
|
-
/* Borders - lighter for glass effect */
|
|
219
|
-
--color-border-subtle: var(--j3m-glass-border-light);
|
|
220
|
-
--color-border-strong: var(--j3m-glass-border-white);
|
|
221
|
-
|
|
222
|
-
/* Interactive - SAME as solid system (primary-250 orange) */
|
|
223
|
-
--color-interactive-bg: var(--j3m-primary-250);
|
|
224
|
-
--color-interactive-text: var(--j3m-neutral-100);
|
|
225
|
-
--color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
|
|
226
|
-
--color-hover-overlay-light: var(--j3m-stroke-light-20);
|
|
227
|
-
--color-focus-ring: var(--j3m-stroke-primary-250-20);
|
|
228
|
-
|
|
229
|
-
/* Inputs & Select - 70% white fill for glass context (much brighter) */
|
|
230
|
-
--color-input-bg: var(--j3m-glass-light-70);
|
|
231
|
-
--color-input-border: var(--j3m-glass-border-light);
|
|
232
|
-
|
|
233
|
-
/* Checkbox & Radio - same 50% white fill in glass context */
|
|
234
|
-
--color-checkbox-bg: var(--j3m-glass-light-50);
|
|
235
|
-
--color-radio-bg: var(--j3m-glass-light-50);
|
|
236
|
-
|
|
237
|
-
/* Progress - white track in glass context */
|
|
238
|
-
--color-progress-track: rgba(255, 255, 255, 0.5);
|
|
239
|
-
|
|
240
|
-
/* Modal/Overlay - glass effect with backdrop blur (bright enough but transparent) */
|
|
241
|
-
--color-popover-bg: var(--j3m-glass-light-60);
|
|
242
|
-
--color-hovercard-bg: var(--j3m-glass-light-60);
|
|
243
|
-
--color-sheet-bg: var(--j3m-glass-light-60);
|
|
244
|
-
--color-drawer-bg: var(--j3m-glass-light-60);
|
|
245
|
-
--color-dropdown-bg: var(--j3m-glass-light-60);
|
|
246
|
-
--color-contextmenu-bg: var(--j3m-glass-light-60);
|
|
247
|
-
}
|
|
248
|
-
|