@jsswift/ui 1.0.54 → 2.0.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 (39) hide show
  1. package/dist/css/animation.css +36 -36
  2. package/dist/css/base.css +374 -374
  3. package/dist/css/docs.css +54 -54
  4. package/dist/css/fonts-nunito.css +2 -2
  5. package/dist/css/min-ui.css +1 -1
  6. package/dist/css/responsive-base.css +549 -549
  7. package/dist/css/responsive.css +3225 -3225
  8. package/dist/css/ui-components.css +2902 -2930
  9. package/dist/css/ui-light.css +3853 -3881
  10. package/dist/css/ui-light.min.css +1 -1
  11. package/dist/css/ui.css +6530 -6558
  12. package/dist/css/ui.min.css +1 -1
  13. package/dist/min-ui.js +12 -12
  14. package/dist/ui.js +4354 -9379
  15. package/dist/ui.min.js +12 -12
  16. package/package.json +2 -2
  17. package/src/00-bootstrap.js +305 -305
  18. package/src/01-foundation-helpers.js +328 -325
  19. package/src/10-primitives-layout.js +242 -242
  20. package/src/20-display-content.js +76 -76
  21. package/src/21-list-content.js +21 -21
  22. package/src/22-banner-content.js +376 -376
  23. package/src/23-tooltip.js +9 -9
  24. package/src/31-form-advanced.js +141 -141
  25. package/src/40-navigation.js +81 -81
  26. package/src/41-tab-panel.js +37 -37
  27. package/src/50-feedback.js +52 -52
  28. package/src/51-feedback-service.js +166 -166
  29. package/src/60-shell-app.js +1082 -1082
  30. package/src/61-form-service.js +5 -5
  31. package/src/70-dialog.js +34 -34
  32. package/src/71-menu-overlays.js +73 -73
  33. package/src/80-data.js +38 -38
  34. package/src/css/animation.css +36 -36
  35. package/src/css/base.css +374 -374
  36. package/src/css/docs.css +54 -54
  37. package/src/css/fonts-nunito.css +2 -2
  38. package/src/css/responsive.css +3225 -3225
  39. package/src/css/ui-components.css +2902 -2930
package/src/css/base.css CHANGED
@@ -11,114 +11,114 @@
11
11
  /* ======================
12
12
  0) Meta / Layout tokens
13
13
  ====================== */
14
- --cms-brand: "JSswift";
14
+ --jss-brand: "JSswift";
15
15
 
16
- --cms-space-1: 4px;
17
- --cms-space-2: 8px;
18
- --cms-space-3: 12px;
19
- --cms-space-4: 16px;
20
- --cms-space-5: 20px;
21
- --cms-space-6: 24px;
16
+ --jss-space-1: 4px;
17
+ --jss-space-2: 8px;
18
+ --jss-space-3: 12px;
19
+ --jss-space-4: 16px;
20
+ --jss-space-5: 20px;
21
+ --jss-space-6: 24px;
22
22
 
23
23
  /* ======================
24
24
  1) Neutral scale (foundation)
25
25
  ====================== */
26
- --cms-gray-50: #f8fafc;
27
- --cms-gray-100: #f1f5f9;
28
- --cms-gray-200: #e2e8f0;
29
- --cms-gray-300: #cbd5e1;
30
- --cms-gray-400: #94a3b8;
31
- --cms-gray-500: #64748b;
32
- --cms-gray-600: #475569;
33
- --cms-gray-700: #334155;
34
- --cms-gray-800: #1f2937;
35
- --cms-gray-900: #0f172a;
36
- --cms-gray-950: #020617;
26
+ --jss-gray-50: #f8fafc;
27
+ --jss-gray-100: #f1f5f9;
28
+ --jss-gray-200: #e2e8f0;
29
+ --jss-gray-300: #cbd5e1;
30
+ --jss-gray-400: #94a3b8;
31
+ --jss-gray-500: #64748b;
32
+ --jss-gray-600: #475569;
33
+ --jss-gray-700: #334155;
34
+ --jss-gray-800: #1f2937;
35
+ --jss-gray-900: #0f172a;
36
+ --jss-gray-950: #020617;
37
37
 
38
38
  /* ======================
39
39
  2) Primary scale (Swift Blue)
40
40
  ====================== */
41
- --cms-primary-50: #eef6ff;
42
- --cms-primary-100: #dbeafe;
43
- --cms-primary-200: #bfdbfe;
44
- --cms-primary-300: #93c5fd;
45
- --cms-primary-400: #60a5fa;
46
- --cms-primary-500: #3b82f6;
47
- --cms-primary-600: #3c78f7;
48
- --cms-primary-700: #1d4ed8;
49
- --cms-primary-800: #1e40af;
50
- --cms-primary-900: #1e3a8a;
51
- --cms-primary-950: #172554;
41
+ --jss-primary-50: #eef6ff;
42
+ --jss-primary-100: #dbeafe;
43
+ --jss-primary-200: #bfdbfe;
44
+ --jss-primary-300: #93c5fd;
45
+ --jss-primary-400: #60a5fa;
46
+ --jss-primary-500: #3b82f6;
47
+ --jss-primary-600: #3c78f7;
48
+ --jss-primary-700: #1d4ed8;
49
+ --jss-primary-800: #1e40af;
50
+ --jss-primary-900: #1e3a8a;
51
+ --jss-primary-950: #172554;
52
52
 
53
53
  /* ======================
54
54
  3) Accent scale (Aurora Teal)
55
55
  ====================== */
56
- --cms-accent-50: #ecfeff;
57
- --cms-accent-100: #cffafe;
58
- --cms-accent-200: #a5f3fc;
59
- --cms-accent-300: #67e8f9;
60
- --cms-accent-400: #22d3ee;
61
- --cms-accent-500: #06b6d4;
62
- --cms-accent-600: #0891b2;
63
- --cms-accent-700: #0e7490;
64
- --cms-accent-800: #155e75;
65
- --cms-accent-900: #164e63;
66
- --cms-accent-950: #083344;
56
+ --jss-accent-50: #ecfeff;
57
+ --jss-accent-100: #cffafe;
58
+ --jss-accent-200: #a5f3fc;
59
+ --jss-accent-300: #67e8f9;
60
+ --jss-accent-400: #22d3ee;
61
+ --jss-accent-500: #06b6d4;
62
+ --jss-accent-600: #0891b2;
63
+ --jss-accent-700: #0e7490;
64
+ --jss-accent-800: #155e75;
65
+ --jss-accent-900: #164e63;
66
+ --jss-accent-950: #083344;
67
67
 
68
68
  /* ======================
69
69
  4) Status scales
70
70
  ====================== */
71
71
  /* Success */
72
- --cms-success-50: #f0fdf4;
73
- --cms-success-100: #dcfce7;
74
- --cms-success-200: #bbf7d0;
75
- --cms-success-300: #86efac;
76
- --cms-success-400: #4ade80;
77
- --cms-success-500: #22c55e;
78
- --cms-success-600: #16a34a;
79
- --cms-success-700: #15803d;
80
- --cms-success-800: #166534;
81
- --cms-success-900: #14532d;
82
- --cms-success-950: #052e16;
72
+ --jss-success-50: #f0fdf4;
73
+ --jss-success-100: #dcfce7;
74
+ --jss-success-200: #bbf7d0;
75
+ --jss-success-300: #86efac;
76
+ --jss-success-400: #4ade80;
77
+ --jss-success-500: #22c55e;
78
+ --jss-success-600: #16a34a;
79
+ --jss-success-700: #15803d;
80
+ --jss-success-800: #166534;
81
+ --jss-success-900: #14532d;
82
+ --jss-success-950: #052e16;
83
83
 
84
84
  /* Warning */
85
- --cms-warning-50: #fffbeb;
86
- --cms-warning-100: #fef3c7;
87
- --cms-warning-200: #fde68a;
88
- --cms-warning-300: #fcd34d;
89
- --cms-warning-400: #fbbf24;
90
- --cms-warning-500: #f59e0b;
91
- --cms-warning-600: #d97706;
92
- --cms-warning-700: #b45309;
93
- --cms-warning-800: #92400e;
94
- --cms-warning-900: #78350f;
95
- --cms-warning-950: #451a03;
85
+ --jss-warning-50: #fffbeb;
86
+ --jss-warning-100: #fef3c7;
87
+ --jss-warning-200: #fde68a;
88
+ --jss-warning-300: #fcd34d;
89
+ --jss-warning-400: #fbbf24;
90
+ --jss-warning-500: #f59e0b;
91
+ --jss-warning-600: #d97706;
92
+ --jss-warning-700: #b45309;
93
+ --jss-warning-800: #92400e;
94
+ --jss-warning-900: #78350f;
95
+ --jss-warning-950: #451a03;
96
96
 
97
97
  /* Danger */
98
- --cms-danger-50: #fef2f2;
99
- --cms-danger-100: #fee2e2;
100
- --cms-danger-200: #fecaca;
101
- --cms-danger-300: #fca5a5;
102
- --cms-danger-400: #f87171;
103
- --cms-danger-500: #ef4444;
104
- --cms-danger-600: #dc2626;
105
- --cms-danger-700: #b91c1c;
106
- --cms-danger-800: #991b1b;
107
- --cms-danger-900: #7f1d1d;
108
- --cms-danger-950: #450a0a;
98
+ --jss-danger-50: #fef2f2;
99
+ --jss-danger-100: #fee2e2;
100
+ --jss-danger-200: #fecaca;
101
+ --jss-danger-300: #fca5a5;
102
+ --jss-danger-400: #f87171;
103
+ --jss-danger-500: #ef4444;
104
+ --jss-danger-600: #dc2626;
105
+ --jss-danger-700: #b91c1c;
106
+ --jss-danger-800: #991b1b;
107
+ --jss-danger-900: #7f1d1d;
108
+ --jss-danger-950: #450a0a;
109
109
 
110
110
  /* Info */
111
- --cms-info-50: #eef4ff;
112
- --cms-info-100: #e0e7ff;
113
- --cms-info-200: #c7d9fe;
114
- --cms-info-300: #a5c9fc;
115
- --cms-info-400: #819ff8;
116
- --cms-info-500: #547dce;
117
- --cms-info-600: #445fc1;
118
- --cms-info-700: #3352b1;
119
- --cms-info-800: #3051a3;
120
- --cms-info-900: #2e3d81;
121
- --cms-info-950: #1b264b;
111
+ --jss-info-50: #eef4ff;
112
+ --jss-info-100: #e0e7ff;
113
+ --jss-info-200: #c7d9fe;
114
+ --jss-info-300: #a5c9fc;
115
+ --jss-info-400: #819ff8;
116
+ --jss-info-500: #547dce;
117
+ --jss-info-600: #445fc1;
118
+ --jss-info-700: #3352b1;
119
+ --jss-info-800: #3051a3;
120
+ --jss-info-900: #2e3d81;
121
+ --jss-info-950: #1b264b;
122
122
 
123
123
  /* ======================
124
124
  5) Special scales (optional but “premium”)
@@ -126,325 +126,325 @@
126
126
  - Pink (marketing)
127
127
  - Orange (energy)
128
128
  ====================== */
129
- --cms-violet-50: #f5f3ff;
130
- --cms-violet-100: #ede9fe;
131
- --cms-violet-200: #ddd6fe;
132
- --cms-violet-300: #c4b5fd;
133
- --cms-violet-400: #a78bfa;
134
- --cms-violet-500: #8b5cf6;
135
- --cms-violet-600: #7c3aed;
136
- --cms-violet-700: #6d28d9;
137
- --cms-violet-800: #5b21b6;
138
- --cms-violet-900: #4c1d95;
139
- --cms-violet-950: #2e1065;
140
-
141
- --cms-pink-50: #fdf2f8;
142
- --cms-pink-100: #fce7f3;
143
- --cms-pink-200: #fbcfe8;
144
- --cms-pink-300: #f9a8d4;
145
- --cms-pink-400: #f472b6;
146
- --cms-pink-500: #ec4899;
147
- --cms-pink-600: #db2777;
148
- --cms-pink-700: #be185d;
149
- --cms-pink-800: #9d174d;
150
- --cms-pink-900: #831843;
151
- --cms-pink-950: #500724;
152
-
153
- --cms-orange-50: #fff7ed;
154
- --cms-orange-100: #ffedd5;
155
- --cms-orange-200: #fed7aa;
156
- --cms-orange-300: #fdba74;
157
- --cms-orange-400: #fb923c;
158
- --cms-orange-500: #f97316;
159
- --cms-orange-600: #ea580c;
160
- --cms-orange-700: #c2410c;
161
- --cms-orange-800: #9a3412;
162
- --cms-orange-900: #7c2d12;
163
- --cms-orange-950: #431407;
129
+ --jss-violet-50: #f5f3ff;
130
+ --jss-violet-100: #ede9fe;
131
+ --jss-violet-200: #ddd6fe;
132
+ --jss-violet-300: #c4b5fd;
133
+ --jss-violet-400: #a78bfa;
134
+ --jss-violet-500: #8b5cf6;
135
+ --jss-violet-600: #7c3aed;
136
+ --jss-violet-700: #6d28d9;
137
+ --jss-violet-800: #5b21b6;
138
+ --jss-violet-900: #4c1d95;
139
+ --jss-violet-950: #2e1065;
140
+
141
+ --jss-pink-50: #fdf2f8;
142
+ --jss-pink-100: #fce7f3;
143
+ --jss-pink-200: #fbcfe8;
144
+ --jss-pink-300: #f9a8d4;
145
+ --jss-pink-400: #f472b6;
146
+ --jss-pink-500: #ec4899;
147
+ --jss-pink-600: #db2777;
148
+ --jss-pink-700: #be185d;
149
+ --jss-pink-800: #9d174d;
150
+ --jss-pink-900: #831843;
151
+ --jss-pink-950: #500724;
152
+
153
+ --jss-orange-50: #fff7ed;
154
+ --jss-orange-100: #ffedd5;
155
+ --jss-orange-200: #fed7aa;
156
+ --jss-orange-300: #fdba74;
157
+ --jss-orange-400: #fb923c;
158
+ --jss-orange-500: #f97316;
159
+ --jss-orange-600: #ea580c;
160
+ --jss-orange-700: #c2410c;
161
+ --jss-orange-800: #9a3412;
162
+ --jss-orange-900: #7c2d12;
163
+ --jss-orange-950: #431407;
164
164
 
165
165
  /* ======================
166
166
  6) Social / Brand colors
167
167
  ====================== */
168
- --cms-facebook: #1877f2;
169
- --cms-twitter: #1da1f2;
170
- --cms-x: #0b0f19;
171
- --cms-linkedin: #0a66c2;
172
- --cms-google: #ea4335;
173
- --cms-youtube: #ff0000;
174
- --cms-vimeo: #1ab7ea;
175
- --cms-dribbble: #ea4c89;
176
- --cms-github: #18181b;
177
- --cms-instagram: #e1306c;
178
- --cms-pinterest: #e60023;
179
- --cms-rss: #f59e0b;
168
+ --jss-facebook: #1877f2;
169
+ --jss-twitter: #1da1f2;
170
+ --jss-x: #0b0f19;
171
+ --jss-linkedin: #0a66c2;
172
+ --jss-google: #ea4335;
173
+ --jss-youtube: #ff0000;
174
+ --jss-vimeo: #1ab7ea;
175
+ --jss-dribbble: #ea4c89;
176
+ --jss-github: #18181b;
177
+ --jss-instagram: #e1306c;
178
+ --jss-pinterest: #e60023;
179
+ --jss-rss: #f59e0b;
180
180
 
181
181
  /* ======================
182
182
  7) Alpha tokens (glass / overlay)
183
183
  ====================== */
184
- --cms-alpha-1: rgba(2, 6, 23, 0.04);
185
- --cms-alpha-2: rgba(2, 6, 23, 0.08);
186
- --cms-alpha-3: rgba(2, 6, 23, 0.12);
187
- --cms-alpha-4: rgba(2, 6, 23, 0.18);
188
- --cms-alpha-5: rgba(2, 6, 23, 0.26);
184
+ --jss-alpha-1: rgba(2, 6, 23, 0.04);
185
+ --jss-alpha-2: rgba(2, 6, 23, 0.08);
186
+ --jss-alpha-3: rgba(2, 6, 23, 0.12);
187
+ --jss-alpha-4: rgba(2, 6, 23, 0.18);
188
+ --jss-alpha-5: rgba(2, 6, 23, 0.26);
189
189
 
190
190
  /* ======================
191
191
  8) Shadows (premium)
192
192
  ====================== */
193
- --cms-shadow-sm: 0 1px 2px rgba(2, 6, 23, .30);
194
- --cms-shadow-md: 0 10px 30px rgba(2, 6, 23, .50);
195
- --cms-shadow-lg: 0 22px 60px rgba(2, 6, 23, .70);
193
+ --jss-shadow-sm: 0 1px 2px rgba(2, 6, 23, .30);
194
+ --jss-shadow-md: 0 10px 30px rgba(2, 6, 23, .50);
195
+ --jss-shadow-lg: 0 22px 60px rgba(2, 6, 23, .70);
196
196
 
197
197
  /* =========================================================
198
198
  SEMANTIC TOKENS (the real win)
199
199
  ========================================================= */
200
200
 
201
201
  /* Backgrounds & surfaces */
202
- --cms-bg: var(--cms-gray-50);
203
- --cms-bg-2: var(--cms-gray-100);
204
- --cms-surface: var(--cms-gray-200);
205
- --cms-surface-2: var(--cms-gray-300);
206
- --cms-surface-3: var(--cms-gray-400);
202
+ --jss-bg: var(--jss-gray-50);
203
+ --jss-bg-2: var(--jss-gray-100);
204
+ --jss-surface: var(--jss-gray-200);
205
+ --jss-surface-2: var(--jss-gray-300);
206
+ --jss-surface-3: var(--jss-gray-400);
207
207
 
208
208
  /* Text */
209
- --cms-text: var(--cms-gray-900);
210
- --cms-text-2: var(--cms-gray-700);
211
- --cms-text-3: var(--cms-gray-500);
212
- --cms-text-inverse: #282828;
209
+ --jss-text: var(--jss-gray-900);
210
+ --jss-text-2: var(--jss-gray-700);
211
+ --jss-text-3: var(--jss-gray-500);
212
+ --jss-text-inverse: #282828;
213
213
 
214
214
  /* Borders */
215
215
 
216
216
 
217
217
 
218
218
  /* Brand actions */
219
- --cms-accent: var(--cms-accent-600);
220
- --cms-accent-soft: var(--cms-accent-500);
221
- --cms-accent-text: var(--cms-accent-800);
219
+ --jss-accent: var(--jss-accent-600);
220
+ --jss-accent-soft: var(--jss-accent-500);
221
+ --jss-accent-text: var(--jss-accent-800);
222
222
 
223
223
  /* Focus ring */
224
- --cms-ring: rgba(59, 130, 246, 0.45);
225
- --cms-ring-strong: rgba(59, 130, 246, 0.65);
224
+ --jss-ring: rgba(59, 130, 246, 0.45);
225
+ --jss-ring-strong: rgba(59, 130, 246, 0.65);
226
226
 
227
227
  /* Components defaults */
228
- --cms-card-bg: var(--cms-surface);
229
- --cms-card-border: var(--cms-border-color);
230
-
231
- --cms-btn-bg: var(--cms-primary);
232
- --cms-btn-bg-hover: var(--cms-primary-hover);
233
- --cms-btn-text: var(--cms-text-inverse);
234
-
235
- --cms-input-bg: var(--cms-surface);
236
- --cms-input-border: var(--cms-border-color);
237
- --cms-input-text: var(--cms-text);
238
- --cms-input-placeholder: var(--cms-text-3);
239
-
240
- --cms-chip-bg: var(--cms-surface-2);
241
- --cms-chip-text: var(--cms-text-2);
242
- --cms-badge-bg: var(--cms-primary-soft);
243
- --cms-badge-text: var(--cms-primary-text);
244
-
245
-
246
- --cms-panel: #e9e9e9;
247
- --cms-text: #434343;
248
- --cms-muted: #5d5d5d;
249
-
250
- --cms-border-color: rgba(93, 95, 100, 0.35);
251
- --cms-border-color-2: var(--cms-gray-400);
252
- --cms-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
253
- --cms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
254
- --cms-icon-color: var(--cms-text);
255
- --cms-icon-size-xxs: 8px;
256
- --cms-icon-size-xs: 10px;
257
- --cms-icon-size-sm: 14px;
258
- --cms-icon-size-md: 18px;
259
- --cms-icon-size-lg: 24px;
260
- --cms-icon-size-xl: 32px;
261
- --cms-icon-size-xxl: 42px;
262
- --cms-icon-size-xxxl: 64px;
263
- --cms-icon-stroke-width: 0.1rem;
264
-
265
- --cms-size-xxs: 6px;
266
- --cms-size-xs: 10px;
267
- --cms-size-sm: 18px;
268
- --cms-size-md: 26px;
269
- --cms-size-lg: 32px;
270
- --cms-size-xl: 48px;
271
- --cms-size-xxl: 64px;
272
- --cms-size-xxxl: 128px;
228
+ --jss-card-bg: var(--jss-surface);
229
+ --jss-card-border: var(--jss-border-color);
230
+
231
+ --jss-btn-bg: var(--jss-primary);
232
+ --jss-btn-bg-hover: var(--jss-primary-hover);
233
+ --jss-btn-text: var(--jss-text-inverse);
234
+
235
+ --jss-input-bg: var(--jss-surface);
236
+ --jss-input-border: var(--jss-border-color);
237
+ --jss-input-text: var(--jss-text);
238
+ --jss-input-placeholder: var(--jss-text-3);
239
+
240
+ --jss-chip-bg: var(--jss-surface-2);
241
+ --jss-chip-text: var(--jss-text-2);
242
+ --jss-badge-bg: var(--jss-primary-soft);
243
+ --jss-badge-text: var(--jss-primary-text);
244
+
245
+
246
+ --jss-panel: #e9e9e9;
247
+ --jss-text: #434343;
248
+ --jss-muted: #5d5d5d;
249
+
250
+ --jss-border-color: rgba(93, 95, 100, 0.35);
251
+ --jss-border-color-2: var(--jss-gray-400);
252
+ --jss-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
253
+ --jss-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
254
+ --jss-icon-color: var(--jss-text);
255
+ --jss-icon-size-xxs: 8px;
256
+ --jss-icon-size-xs: 10px;
257
+ --jss-icon-size-sm: 14px;
258
+ --jss-icon-size-md: 18px;
259
+ --jss-icon-size-lg: 24px;
260
+ --jss-icon-size-xl: 32px;
261
+ --jss-icon-size-xxl: 42px;
262
+ --jss-icon-size-xxxl: 64px;
263
+ --jss-icon-stroke-width: 0.1rem;
264
+
265
+ --jss-size-xxs: 6px;
266
+ --jss-size-xs: 10px;
267
+ --jss-size-sm: 18px;
268
+ --jss-size-md: 26px;
269
+ --jss-size-lg: 32px;
270
+ --jss-size-xl: 48px;
271
+ --jss-size-xxl: 64px;
272
+ --jss-size-xxxl: 128px;
273
273
 
274
274
  /* States */
275
275
 
276
- --cms-primary: var(--cms-primary-600);
277
- --cms-primary-hover: var(--cms-primary-400);
278
- --cms-primary-active: var(--cms-primary-800);
279
- --cms-primary-focus: var(--cms-primary-600);
280
- --cms-primary-disabled: var(--cms-primary-300);
281
- --cms-primary-soft: var(--cms-primary-500);
282
- --cms-primary-text: var(--cms-primary-500);
283
-
284
- --cms-secondary: var(--cms-gray-600);
285
- --cms-secondary-hover: var(--cms-gray-400);
286
- --cms-secondary-active: var(--cms-gray-800);
287
- --cms-secondary-focus: var(--cms-gray-600);
288
- --cms-secondary-disabled: var(--cms-gray-300);
289
- --cms-secondary-soft: var(--cms-gray-500);
290
- --cms-secondary-text: var(--cms-gray-500);
291
-
292
- --cms-danger: var(--cms-danger-600);
293
- --cms-danger-hover: var(--cms-danger-400);
294
- --cms-danger-active: var(--cms-danger-800);
295
- --cms-danger-focus: var(--cms-danger-600);
296
- --cms-danger-disabled: var(--cms-danger-300);
297
- --cms-danger-soft: var(--cms-danger-400);
298
- --cms-danger-text: var(--cms-danger-500);
299
-
300
- --cms-warning: var(--cms-warning-500);
301
- --cms-warning-hover: var(--cms-warning-400);
302
- --cms-warning-active: var(--cms-warning-400);
303
- --cms-warning-focus: var(--cms-warning-600);
304
- --cms-warning-disabled: var(--cms-warning-700);
305
- --cms-warning-soft: var(--cms-warning-400);
306
- --cms-warning-text: var(--cms-warning-500);
307
-
308
- --cms-success: var(--cms-success-600);
309
- --cms-success-hover: var(--cms-success-500);
310
- --cms-success-active: var(--cms-success-800);
311
- --cms-success-focus: var(--cms-success-600);
312
- --cms-success-disabled: var(--cms-success-300);
313
- --cms-success-soft: var(--cms-success-600);
314
- --cms-success-text: var(--cms-success-500);
315
-
316
- --cms-info: var(--cms-info-600);
317
- --cms-info-hover: var(--cms-info-400);
318
- --cms-info-active: var(--cms-info-800);
319
- --cms-info-focus: var(--cms-info-600);
320
- --cms-info-disabled: var(--cms-info-300);
321
- --cms-info-soft: var(--cms-info-500);
322
- --cms-info-text: var(--cms-info-500);
323
-
324
- --cms-dark: var(--cms-gray-800);
325
- --cms-dark-hover: var(--cms-gray-600);
326
- --cms-dark-active: var(--cms-gray-700);
327
- --cms-dark-focus: var(--cms-gray-700);
328
- --cms-dark-disabled: var(--cms-gray-700);
329
- --cms-dark-soft: var(--cms-gray-700);
330
- --cms-dark-text: var(--cms-gray-100);
331
-
332
- --cms-light: var(--cms-bg-2);
333
- --cms-light-hover: var(--cms-surface);
334
- --cms-light-active: var(--cms-surface-2);
335
- --cms-light-focus: var(--cms-bg-2);
336
- --cms-light-disabled: var(--cms-surface-2);
337
- --cms-light-soft: var(--cms-gray-100);
338
- --cms-light-text: var(--cms-gray-900);
339
-
340
- --cms-font-size: 14px;
341
- --cms-font-weight: 400;
342
- --cms-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
343
- --set-icon-size: calc(var(--cms-font-size) + 4px);
344
-
345
- --cms-font-size-xxs: 6px;
346
- --cms-font-size-xs: 10px;
347
- --cms-font-size-sm: 12px;
348
- --cms-font-size-md: 14px;
349
- --cms-font-size-lg: 18px;
350
- --cms-font-size-xl: 24px;
351
- --cms-font-size-xxl: 32px;
352
- --cms-font-size-xxxl: 48px;
353
-
354
- --cms-input-height-xxs: 16px;
355
- --cms-input-height-xs: 20px;
356
- --cms-input-height-sm: 24px;
357
- --cms-input-height-md: 32px;
358
- --cms-input-height-lg: 48px;
359
- --cms-input-height-xl: 64px;
360
- --cms-input-height-xxl: 80px;
361
-
362
- --set-shadow: 0 3px 6px color-mix(in srgb, var(--cms-gray-600) 40%, transparent);
363
- --set-color-0: var(--cms-gray-100);
364
- --set-color-1: var(--cms-gray-300);
365
- --set-color-2: var(--cms-gray-300);
366
- --set-color-3: var(--cms-gray-500);
367
- --set-color-4: var(--cms-gray-600);
276
+ --jss-primary: var(--jss-primary-600);
277
+ --jss-primary-hover: var(--jss-primary-400);
278
+ --jss-primary-active: var(--jss-primary-800);
279
+ --jss-primary-focus: var(--jss-primary-600);
280
+ --jss-primary-disabled: var(--jss-primary-300);
281
+ --jss-primary-soft: var(--jss-primary-500);
282
+ --jss-primary-text: var(--jss-primary-500);
283
+
284
+ --jss-secondary: var(--jss-gray-600);
285
+ --jss-secondary-hover: var(--jss-gray-400);
286
+ --jss-secondary-active: var(--jss-gray-800);
287
+ --jss-secondary-focus: var(--jss-gray-600);
288
+ --jss-secondary-disabled: var(--jss-gray-300);
289
+ --jss-secondary-soft: var(--jss-gray-500);
290
+ --jss-secondary-text: var(--jss-gray-500);
291
+
292
+ --jss-danger: var(--jss-danger-600);
293
+ --jss-danger-hover: var(--jss-danger-400);
294
+ --jss-danger-active: var(--jss-danger-800);
295
+ --jss-danger-focus: var(--jss-danger-600);
296
+ --jss-danger-disabled: var(--jss-danger-300);
297
+ --jss-danger-soft: var(--jss-danger-400);
298
+ --jss-danger-text: var(--jss-danger-500);
299
+
300
+ --jss-warning: var(--jss-warning-500);
301
+ --jss-warning-hover: var(--jss-warning-400);
302
+ --jss-warning-active: var(--jss-warning-400);
303
+ --jss-warning-focus: var(--jss-warning-600);
304
+ --jss-warning-disabled: var(--jss-warning-700);
305
+ --jss-warning-soft: var(--jss-warning-400);
306
+ --jss-warning-text: var(--jss-warning-500);
307
+
308
+ --jss-success: var(--jss-success-600);
309
+ --jss-success-hover: var(--jss-success-500);
310
+ --jss-success-active: var(--jss-success-800);
311
+ --jss-success-focus: var(--jss-success-600);
312
+ --jss-success-disabled: var(--jss-success-300);
313
+ --jss-success-soft: var(--jss-success-600);
314
+ --jss-success-text: var(--jss-success-500);
315
+
316
+ --jss-info: var(--jss-info-600);
317
+ --jss-info-hover: var(--jss-info-400);
318
+ --jss-info-active: var(--jss-info-800);
319
+ --jss-info-focus: var(--jss-info-600);
320
+ --jss-info-disabled: var(--jss-info-300);
321
+ --jss-info-soft: var(--jss-info-500);
322
+ --jss-info-text: var(--jss-info-500);
323
+
324
+ --jss-dark: var(--jss-gray-800);
325
+ --jss-dark-hover: var(--jss-gray-600);
326
+ --jss-dark-active: var(--jss-gray-700);
327
+ --jss-dark-focus: var(--jss-gray-700);
328
+ --jss-dark-disabled: var(--jss-gray-700);
329
+ --jss-dark-soft: var(--jss-gray-700);
330
+ --jss-dark-text: var(--jss-gray-100);
331
+
332
+ --jss-light: var(--jss-bg-2);
333
+ --jss-light-hover: var(--jss-surface);
334
+ --jss-light-active: var(--jss-surface-2);
335
+ --jss-light-focus: var(--jss-bg-2);
336
+ --jss-light-disabled: var(--jss-surface-2);
337
+ --jss-light-soft: var(--jss-gray-100);
338
+ --jss-light-text: var(--jss-gray-900);
339
+
340
+ --jss-font-size: 14px;
341
+ --jss-font-weight: 400;
342
+ --jss-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
343
+ --set-icon-size: calc(var(--jss-font-size) + 4px);
344
+
345
+ --jss-font-size-xxs: 6px;
346
+ --jss-font-size-xs: 10px;
347
+ --jss-font-size-sm: 12px;
348
+ --jss-font-size-md: 14px;
349
+ --jss-font-size-lg: 18px;
350
+ --jss-font-size-xl: 24px;
351
+ --jss-font-size-xxl: 32px;
352
+ --jss-font-size-xxxl: 48px;
353
+
354
+ --jss-input-height-xxs: 16px;
355
+ --jss-input-height-xs: 20px;
356
+ --jss-input-height-sm: 24px;
357
+ --jss-input-height-md: 32px;
358
+ --jss-input-height-lg: 48px;
359
+ --jss-input-height-xl: 64px;
360
+ --jss-input-height-xxl: 80px;
361
+
362
+ --set-shadow: 0 3px 6px color-mix(in srgb, var(--jss-gray-600) 40%, transparent);
363
+ --set-color-0: var(--jss-gray-100);
364
+ --set-color-1: var(--jss-gray-300);
365
+ --set-color-2: var(--jss-gray-300);
366
+ --set-color-3: var(--jss-gray-500);
367
+ --set-color-4: var(--jss-gray-600);
368
368
  --set-border-width: 1px;
369
369
 
370
370
  --set-gradient-deg: 180deg;
371
371
 
372
- --cms-b-radius-default: 4px;
373
- --cms-input-height-default: var(--cms-input-height-md);
374
- --cms-select-bg-default: var(--cms-panel);
375
- --cms-bg-default: var(--cms-panel);
376
-
377
- --cms-theme-color-1: #f8f9fa;
378
- --cms-theme-color-2: #e9ecef;
379
- --cms-theme-color-3: #dee2e6;
380
- --cms-theme-color-4: #ced4da;
381
- --cms-theme-color-5: #adb5bd;
382
- --cms-theme-color-6: #868e96;
383
- --cms-theme-color-7: #495057;
384
- --cms-theme-color-8: #343a40;
385
- --cms-theme-color-9: #212529;
372
+ --jss-b-radius-default: 4px;
373
+ --jss-input-height-default: var(--jss-input-height-md);
374
+ --jss-select-bg-default: var(--jss-panel);
375
+ --jss-bg-default: var(--jss-panel);
376
+
377
+ --jss-theme-color-1: #f8f9fa;
378
+ --jss-theme-color-2: #e9ecef;
379
+ --jss-theme-color-3: #dee2e6;
380
+ --jss-theme-color-4: #ced4da;
381
+ --jss-theme-color-5: #adb5bd;
382
+ --jss-theme-color-6: #868e96;
383
+ --jss-theme-color-7: #495057;
384
+ --jss-theme-color-8: #343a40;
385
+ --jss-theme-color-9: #212529;
386
386
  }
387
387
 
388
388
  /* =====================================================================
389
389
  DARK THEME (high quality)
390
390
  ===================================================================== */
391
391
  :root[data-theme="dark"] {
392
- --cms-alpha-1: rgba(255, 255, 255, 0.04);
393
- --cms-alpha-2: rgba(255, 255, 255, 0.08);
394
- --cms-alpha-3: rgba(255, 255, 255, 0.12);
395
- --cms-alpha-4: rgba(255, 255, 255, 0.18);
396
- --cms-alpha-5: rgba(255, 255, 255, 0.26);
397
-
398
- --cms-bg: #121212;
399
- --cms-bg-2: #0b1020;
400
- --cms-surface: #0f172a;
401
- --cms-surface-2: #111c34;
402
- --cms-surface-3: #16213f;
403
-
404
- --cms-text: #e5e7eb;
405
- --cms-text-2: #cbd5e1;
406
- --cms-text-3: #94a3b8;
407
- --cms-text-inverse: #0b1020;
408
-
409
- --cms-panel: #10141e;
410
- --cms-text: #cbcbcb;
411
- --cms-muted: #6b6b6b;
412
-
413
- --cms-border-color: rgba(148, 163, 184, 0.18);
414
- --cms-border-color-2: rgba(148, 163, 184, 0.26);
415
-
416
- --cms-accent: var(--cms-accent-400);
417
- --cms-accent-soft: rgba(34, 211, 238, 0.12);
418
- --cms-accent-text: var(--cms-accent-200);
419
-
420
- --cms-ring: rgba(96, 165, 250, 0.45);
421
- --cms-ring-strong: rgba(96, 165, 250, 0.65);
422
-
423
- --cms-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
424
- --cms-shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
425
- --cms-shadow-lg: 0 22px 60px rgba(0, 0, 0, .70);
426
-
427
- --cms-card-bg: var(--cms-surface);
428
- --cms-card-border: var(--cms-border-color);
429
-
430
- --cms-input-bg: rgba(255, 255, 255, 0.02);
431
- --cms-input-border: var(--cms-border-color);
432
- --cms-input-text: var(--cms-text);
433
-
434
- --cms-b-radius-default: 4px;
435
- --cms-input-height-default: var(--cms-input-height-md);
436
- --cms-select-bg-default: var(--cms-panel);
437
- --cms-bg-default: var(--cms-panel);
438
-
439
- --cms-theme-color-1: #212529;
440
- --cms-theme-color-2: #343a40;
441
- --cms-theme-color-3: #495057;
442
- --cms-theme-color-4: #868e96;
443
- --cms-theme-color-5: #adb5bd;
444
- --cms-theme-color-6: #ced4da;
445
- --cms-theme-color-7: #dee2e6;
446
- --cms-theme-color-8: #e9ecef;
447
- --cms-theme-color-9: #f8f9fa;
392
+ --jss-alpha-1: rgba(255, 255, 255, 0.04);
393
+ --jss-alpha-2: rgba(255, 255, 255, 0.08);
394
+ --jss-alpha-3: rgba(255, 255, 255, 0.12);
395
+ --jss-alpha-4: rgba(255, 255, 255, 0.18);
396
+ --jss-alpha-5: rgba(255, 255, 255, 0.26);
397
+
398
+ --jss-bg: #121212;
399
+ --jss-bg-2: #0b1020;
400
+ --jss-surface: #0f172a;
401
+ --jss-surface-2: #111c34;
402
+ --jss-surface-3: #16213f;
403
+
404
+ --jss-text: #e5e7eb;
405
+ --jss-text-2: #cbd5e1;
406
+ --jss-text-3: #94a3b8;
407
+ --jss-text-inverse: #0b1020;
408
+
409
+ --jss-panel: #10141e;
410
+ --jss-text: #cbcbcb;
411
+ --jss-muted: #6b6b6b;
412
+
413
+ --jss-border-color: rgba(148, 163, 184, 0.18);
414
+ --jss-border-color-2: rgba(148, 163, 184, 0.26);
415
+
416
+ --jss-accent: var(--jss-accent-400);
417
+ --jss-accent-soft: rgba(34, 211, 238, 0.12);
418
+ --jss-accent-text: var(--jss-accent-200);
419
+
420
+ --jss-ring: rgba(96, 165, 250, 0.45);
421
+ --jss-ring-strong: rgba(96, 165, 250, 0.65);
422
+
423
+ --jss-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
424
+ --jss-shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
425
+ --jss-shadow-lg: 0 22px 60px rgba(0, 0, 0, .70);
426
+
427
+ --jss-card-bg: var(--jss-surface);
428
+ --jss-card-border: var(--jss-border-color);
429
+
430
+ --jss-input-bg: rgba(255, 255, 255, 0.02);
431
+ --jss-input-border: var(--jss-border-color);
432
+ --jss-input-text: var(--jss-text);
433
+
434
+ --jss-b-radius-default: 4px;
435
+ --jss-input-height-default: var(--jss-input-height-md);
436
+ --jss-select-bg-default: var(--jss-panel);
437
+ --jss-bg-default: var(--jss-panel);
438
+
439
+ --jss-theme-color-1: #212529;
440
+ --jss-theme-color-2: #343a40;
441
+ --jss-theme-color-3: #495057;
442
+ --jss-theme-color-4: #868e96;
443
+ --jss-theme-color-5: #adb5bd;
444
+ --jss-theme-color-6: #ced4da;
445
+ --jss-theme-color-7: #dee2e6;
446
+ --jss-theme-color-8: #e9ecef;
447
+ --jss-theme-color-9: #f8f9fa;
448
448
 
449
449
  }
450
450
 
@@ -454,33 +454,33 @@
454
454
 
455
455
  /* Emerald brand */
456
456
  :root[data-brand="emerald"] {
457
- --cms-primary-500: #10b981;
458
- --cms-primary-600: #059669;
459
- --cms-primary-700: #047857;
457
+ --jss-primary-500: #10b981;
458
+ --jss-primary-600: #059669;
459
+ --jss-primary-700: #047857;
460
460
 
461
- --cms-primary: var(--cms-primary-600);
462
- --cms-primary-hover: var(--cms-primary-700);
463
- --cms-ring: rgba(16, 185, 129, 0.45);
461
+ --jss-primary: var(--jss-primary-600);
462
+ --jss-primary-hover: var(--jss-primary-700);
463
+ --jss-ring: rgba(16, 185, 129, 0.45);
464
464
  }
465
465
 
466
466
  /* Violet brand */
467
467
  :root[data-brand="violet"] {
468
- --cms-primary-500: #8b5cf6;
469
- --cms-primary-600: #7c3aed;
470
- --cms-primary-700: #6d28d9;
468
+ --jss-primary-500: #8b5cf6;
469
+ --jss-primary-600: #7c3aed;
470
+ --jss-primary-700: #6d28d9;
471
471
 
472
- --cms-primary: var(--cms-primary-600);
473
- --cms-primary-hover: var(--cms-primary-700);
474
- --cms-ring: rgba(139, 92, 246, 0.45);
472
+ --jss-primary: var(--jss-primary-600);
473
+ --jss-primary-hover: var(--jss-primary-700);
474
+ --jss-ring: rgba(139, 92, 246, 0.45);
475
475
  }
476
476
 
477
477
 
478
478
  :root {
479
- --cms-font: var(--cms-font-family);
479
+ --jss-font: var(--jss-font-family);
480
480
  }
481
481
 
482
482
  *,
483
483
  *::before,
484
484
  *::after {
485
- font-family: var(--cms-font);
485
+ font-family: var(--jss-font);
486
486
  }