@phcdevworks/spectre-ui 1.1.0 → 1.1.2

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 (17) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +149 -71
  3. package/dist/base.css +375 -0
  4. package/dist/components.css +469 -30
  5. package/dist/index.cjs +54 -14
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.css +268 -204
  8. package/dist/index.d.cts +84 -20
  9. package/dist/index.d.ts +84 -20
  10. package/dist/index.js +54 -14
  11. package/dist/index.js.map +1 -1
  12. package/dist/tailwind/index.cjs +19 -22
  13. package/dist/tailwind/index.cjs.map +1 -1
  14. package/dist/tailwind/index.js +19 -22
  15. package/dist/tailwind/index.js.map +1 -1
  16. package/dist/utilities.css +375 -0
  17. package/package.json +22 -19
package/dist/index.css CHANGED
@@ -3,71 +3,71 @@
3
3
  - Then UI base, components, utilities
4
4
  */
5
5
  :root {
6
- --sp-surface-page: #f8fafc;
6
+ --sp-surface-page: #f7f8fb;
7
7
  --sp-surface-card: #ffffff;
8
8
  --sp-surface-input: #ffffff;
9
- --sp-surface-overlay: rgba(15, 23, 42, 0.6);
10
- --sp-surface-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11
- --sp-text-on-page-default: #0f172a;
12
- --sp-text-on-page-muted: #475569;
13
- --sp-text-on-page-subtle: #64748b;
14
- --sp-text-on-page-meta: #64748b;
15
- --sp-text-on-surface-default: #0f172a;
16
- --sp-text-on-surface-muted: #475569;
17
- --sp-text-on-surface-subtle: #64748b;
18
- --sp-text-on-surface-meta: #64748b;
19
- --sp-component-card-text: #0f172a;
20
- --sp-component-card-text-muted: #64748b;
21
- --sp-component-input-text: #0f172a;
22
- --sp-component-input-placeholder: #94a3b8;
23
- --sp-button-text-default: #0f172a;
9
+ --sp-surface-overlay: rgba(20, 27, 36, 0.6);
10
+ --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
11
+ --sp-text-on-page-default: #141b24;
12
+ --sp-text-on-page-muted: #4b576a;
13
+ --sp-text-on-page-subtle: #657287;
14
+ --sp-text-on-page-meta: #657287;
15
+ --sp-text-on-surface-default: #141b24;
16
+ --sp-text-on-surface-muted: #4b576a;
17
+ --sp-text-on-surface-subtle: #657287;
18
+ --sp-text-on-surface-meta: #657287;
19
+ --sp-component-card-text: #141b24;
20
+ --sp-component-card-text-muted: #657287;
21
+ --sp-component-input-text: #141b24;
22
+ --sp-component-input-placeholder: #657287;
23
+ --sp-button-text-default: #141b24;
24
24
  --sp-button-text-on-primary: #ffffff;
25
- --sp-badge-neutral-bg: #f1f5f9;
26
- --sp-badge-neutral-text: #334155;
27
- --sp-badge-info-bg: #dbeafe;
28
- --sp-badge-info-text: #1d4ed8;
25
+ --sp-badge-neutral-bg: #eef1f6;
26
+ --sp-badge-neutral-text: #374253;
27
+ --sp-badge-info-bg: #e0f2fe;
28
+ --sp-badge-info-text: #075985;
29
29
  --sp-badge-success-bg: #dcfce7;
30
30
  --sp-badge-success-text: #15803d;
31
- --sp-badge-warning-bg: #fef3c7;
32
- --sp-badge-warning-text: #b45309;
31
+ --sp-badge-warning-bg: #fff1c2;
32
+ --sp-badge-warning-text: #8f5200;
33
33
  --sp-badge-danger-bg: #fee2e2;
34
34
  --sp-badge-danger-text: #b91c1c;
35
35
  --sp-icon-box-bg: #ffffff;
36
- --sp-icon-box-border: #e2e8f0;
37
- --sp-icon-box-icon-default: #2563eb;
36
+ --sp-icon-box-border: #d9dfeb;
37
+ --sp-icon-box-icon-default: #0369a1;
38
38
  --sp-icon-box-icon-success: #16a34a;
39
- --sp-icon-box-icon-warning: #d97706;
39
+ --sp-icon-box-icon-warning: #d48806;
40
40
  --sp-icon-box-icon-danger: #dc2626;
41
- --sp-color-brand-50: #eff6ff;
42
- --sp-color-brand-100: #dbeafe;
43
- --sp-color-brand-200: #bfdbfe;
44
- --sp-color-brand-300: #93c5fd;
45
- --sp-color-brand-400: #60a5fa;
46
- --sp-color-brand-500: #3b82f6;
47
- --sp-color-brand-600: #2563eb;
48
- --sp-color-brand-700: #1d4ed8;
49
- --sp-color-brand-800: #1e40af;
50
- --sp-color-brand-900: #1e3a8a;
51
- --sp-color-neutral-50: #f8fafc;
52
- --sp-color-neutral-100: #f1f5f9;
53
- --sp-color-neutral-200: #e2e8f0;
54
- --sp-color-neutral-300: #cbd5e1;
55
- --sp-color-neutral-400: #94a3b8;
56
- --sp-color-neutral-500: #64748b;
57
- --sp-color-neutral-600: #475569;
58
- --sp-color-neutral-700: #334155;
59
- --sp-color-neutral-800: #1e293b;
60
- --sp-color-neutral-900: #0f172a;
61
- --sp-color-accent-50: #f5f3ff;
62
- --sp-color-accent-100: #ede9fe;
63
- --sp-color-accent-200: #ddd6fe;
64
- --sp-color-accent-300: #c4b5fd;
65
- --sp-color-accent-400: #a78bfa;
66
- --sp-color-accent-500: #8b5cf6;
67
- --sp-color-accent-600: #7c3aed;
68
- --sp-color-accent-700: #6d28d9;
69
- --sp-color-accent-800: #5b21b6;
70
- --sp-color-accent-900: #4c1d95;
41
+ --sp-color-brand-50: #eef4ff;
42
+ --sp-color-brand-100: #d9e7ff;
43
+ --sp-color-brand-200: #b9d2ff;
44
+ --sp-color-brand-300: #8ab6ff;
45
+ --sp-color-brand-400: #5a92ff;
46
+ --sp-color-brand-500: #336df4;
47
+ --sp-color-brand-600: #1f57db;
48
+ --sp-color-brand-700: #1946b4;
49
+ --sp-color-brand-800: #173b8f;
50
+ --sp-color-brand-900: #16336f;
51
+ --sp-color-neutral-50: #f7f8fb;
52
+ --sp-color-neutral-100: #eef1f6;
53
+ --sp-color-neutral-200: #d9dfeb;
54
+ --sp-color-neutral-300: #b7c1d4;
55
+ --sp-color-neutral-400: #8a96ad;
56
+ --sp-color-neutral-500: #657287;
57
+ --sp-color-neutral-600: #4b576a;
58
+ --sp-color-neutral-700: #374253;
59
+ --sp-color-neutral-800: #222b38;
60
+ --sp-color-neutral-900: #141b24;
61
+ --sp-color-accent-50: #f6f2ff;
62
+ --sp-color-accent-100: #eee5ff;
63
+ --sp-color-accent-200: #ddccff;
64
+ --sp-color-accent-300: #c3a7ff;
65
+ --sp-color-accent-400: #a279ff;
66
+ --sp-color-accent-500: #854ff7;
67
+ --sp-color-accent-600: #7135dd;
68
+ --sp-color-accent-700: #5d28b8;
69
+ --sp-color-accent-800: #4d2393;
70
+ --sp-color-accent-900: #401f75;
71
71
  --sp-color-success-50: #f0fdf4;
72
72
  --sp-color-success-100: #dcfce7;
73
73
  --sp-color-success-200: #bbf7d0;
@@ -78,16 +78,16 @@
78
78
  --sp-color-success-700: #15803d;
79
79
  --sp-color-success-800: #166534;
80
80
  --sp-color-success-900: #14532d;
81
- --sp-color-warning-50: #fffbeb;
82
- --sp-color-warning-100: #fef3c7;
83
- --sp-color-warning-200: #fde68a;
84
- --sp-color-warning-300: #fcd34d;
85
- --sp-color-warning-400: #fbbf24;
86
- --sp-color-warning-500: #f59e0b;
87
- --sp-color-warning-600: #d97706;
88
- --sp-color-warning-700: #b45309;
89
- --sp-color-warning-800: #92400e;
90
- --sp-color-warning-900: #78350f;
81
+ --sp-color-warning-50: #fffbea;
82
+ --sp-color-warning-100: #fff1c2;
83
+ --sp-color-warning-200: #ffe08a;
84
+ --sp-color-warning-300: #ffd24d;
85
+ --sp-color-warning-400: #ffc21a;
86
+ --sp-color-warning-500: #f5ad00;
87
+ --sp-color-warning-600: #d48806;
88
+ --sp-color-warning-700: #ad6800;
89
+ --sp-color-warning-800: #8f5200;
90
+ --sp-color-warning-900: #734000;
91
91
  --sp-color-error-50: #fef2f2;
92
92
  --sp-color-error-100: #fee2e2;
93
93
  --sp-color-error-200: #fecaca;
@@ -98,22 +98,22 @@
98
98
  --sp-color-error-700: #b91c1c;
99
99
  --sp-color-error-800: #991b1b;
100
100
  --sp-color-error-900: #7f1d1d;
101
- --sp-color-info-50: #eff6ff;
102
- --sp-color-info-100: #dbeafe;
103
- --sp-color-info-200: #bfdbfe;
104
- --sp-color-info-300: #93c5fd;
105
- --sp-color-info-400: #60a5fa;
106
- --sp-color-info-500: #3b82f6;
107
- --sp-color-info-600: #2563eb;
108
- --sp-color-info-700: #1d4ed8;
109
- --sp-color-info-800: #1e40af;
110
- --sp-color-info-900: #1e3a8a;
111
- --sp-color-indigo-500: #667eea;
112
- --sp-color-indigo-600: #5c67f2;
113
- --sp-color-violet-600: #764ba2;
114
- --sp-color-focus-primary: #3b82f6;
101
+ --sp-color-info-50: #f0f9ff;
102
+ --sp-color-info-100: #e0f2fe;
103
+ --sp-color-info-200: #bae6fd;
104
+ --sp-color-info-300: #7dd3fc;
105
+ --sp-color-info-400: #38bdf8;
106
+ --sp-color-info-500: #0ea5e9;
107
+ --sp-color-info-600: #0369a1;
108
+ --sp-color-info-700: #075985;
109
+ --sp-color-info-800: #0c4a6e;
110
+ --sp-color-info-900: #082f49;
111
+ --sp-color-indigo-500: #5b6ee1;
112
+ --sp-color-indigo-600: #4d61db;
113
+ --sp-color-violet-600: #6f3fd7;
114
+ --sp-color-focus-primary: #336df4;
115
115
  --sp-color-focus-error: #ef4444;
116
- --sp-color-focus-info: #3b82f6;
116
+ --sp-color-focus-info: #0369a1;
117
117
  --sp-color-white-0: #;
118
118
  --sp-color-white-1: f;
119
119
  --sp-color-white-2: f;
@@ -184,34 +184,34 @@
184
184
  --sp-font-2xl-line-height: 2.5rem;
185
185
  --sp-font-2xl-weight: 600;
186
186
  --sp-font-xs-letter-spacing: 0.02em;
187
- --sp-text-on-page-default: #0f172a;
188
- --sp-text-on-page-muted: #475569;
189
- --sp-text-on-page-subtle: #64748b;
190
- --sp-text-on-page-meta: #64748b;
191
- --sp-text-on-surface-default: #0f172a;
192
- --sp-text-on-surface-muted: #475569;
193
- --sp-text-on-surface-subtle: #64748b;
194
- --sp-text-on-surface-meta: #64748b;
195
- --sp-badge-neutral-bg: #f1f5f9;
196
- --sp-badge-neutral-text: #334155;
197
- --sp-badge-info-bg: #dbeafe;
198
- --sp-badge-info-text: #1d4ed8;
187
+ --sp-text-on-page-default: #141b24;
188
+ --sp-text-on-page-muted: #4b576a;
189
+ --sp-text-on-page-subtle: #657287;
190
+ --sp-text-on-page-meta: #657287;
191
+ --sp-text-on-surface-default: #141b24;
192
+ --sp-text-on-surface-muted: #4b576a;
193
+ --sp-text-on-surface-subtle: #657287;
194
+ --sp-text-on-surface-meta: #657287;
195
+ --sp-badge-neutral-bg: #eef1f6;
196
+ --sp-badge-neutral-text: #374253;
197
+ --sp-badge-info-bg: #e0f2fe;
198
+ --sp-badge-info-text: #075985;
199
199
  --sp-badge-success-bg: #dcfce7;
200
- --sp-badge-success-text: #15803d;
201
- --sp-badge-warning-bg: #fef3c7;
202
- --sp-badge-warning-text: #b45309;
200
+ --sp-badge-success-text: #166534;
201
+ --sp-badge-warning-bg: #fff1c2;
202
+ --sp-badge-warning-text: #8f5200;
203
203
  --sp-badge-danger-bg: #fee2e2;
204
- --sp-badge-danger-text: #b91c1c;
204
+ --sp-badge-danger-text: #991b1b;
205
205
  --sp-icon-box-bg: #ffffff;
206
- --sp-icon-box-border: #e2e8f0;
207
- --sp-icon-box-icon-default: #2563eb;
206
+ --sp-icon-box-border: #d9dfeb;
207
+ --sp-icon-box-icon-default: #0369a1;
208
208
  --sp-icon-box-icon-success: #16a34a;
209
- --sp-icon-box-icon-warning: #d97706;
209
+ --sp-icon-box-icon-warning: #d48806;
210
210
  --sp-icon-box-icon-danger: #dc2626;
211
211
  --sp-shadow-none: none;
212
- --sp-shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.06);
213
- --sp-shadow-md: 0 2px 6px -1px rgba(30, 41, 59, 0.08);
214
- --sp-shadow-lg: 0 6px 16px -4px rgba(30, 41, 59, 0.12);
212
+ --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
213
+ --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
214
+ --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
215
215
  --sp-breakpoint-sm: 640px;
216
216
  --sp-breakpoint-md: 768px;
217
217
  --sp-breakpoint-lg: 1024px;
@@ -247,74 +247,74 @@
247
247
  --sp-focus-ring-style: solid;
248
248
  --sp-min-touch-target: 44px;
249
249
  --sp-min-text-size: 16px;
250
- --sp-button-primary-bg: #2563eb;
251
- --sp-button-primary-bghover: #1d4ed8;
252
- --sp-button-primary-bgactive: #1e40af;
253
- --sp-button-primary-bgdisabled: #e2e8f0;
250
+ --sp-button-primary-bg: #0369a1;
251
+ --sp-button-primary-bghover: #075985;
252
+ --sp-button-primary-bgactive: #0c4a6e;
253
+ --sp-button-primary-bgdisabled: #d9dfeb;
254
254
  --sp-button-primary-text: #ffffff;
255
- --sp-button-primary-textdisabled: #94a3b8;
256
- --sp-button-primary-focusring: rgba(59, 130, 246, 0.4);
255
+ --sp-button-primary-textdisabled: #8a96ad;
256
+ --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
257
257
  --sp-button-secondary-bg: #ffffff;
258
- --sp-button-secondary-bghover: #f8fafc;
259
- --sp-button-secondary-bgactive: #f1f5f9;
260
- --sp-button-secondary-bgdisabled: #f8fafc;
261
- --sp-button-secondary-text: #2563eb;
262
- --sp-button-secondary-textdisabled: #94a3b8;
263
- --sp-button-secondary-border: #2563eb;
264
- --sp-button-secondary-borderdisabled: #e2e8f0;
265
- --sp-button-secondary-focusring: rgba(59, 130, 246, 0.4);
258
+ --sp-button-secondary-bghover: #f7f8fb;
259
+ --sp-button-secondary-bgactive: #eef1f6;
260
+ --sp-button-secondary-bgdisabled: #f7f8fb;
261
+ --sp-button-secondary-text: #075985;
262
+ --sp-button-secondary-textdisabled: #8a96ad;
263
+ --sp-button-secondary-border: #075985;
264
+ --sp-button-secondary-borderdisabled: #d9dfeb;
265
+ --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
266
266
  --sp-button-ghost-bg: transparent;
267
- --sp-button-ghost-bghover: #eff6ff;
268
- --sp-button-ghost-bgactive: #dbeafe;
267
+ --sp-button-ghost-bghover: #f0f9ff;
268
+ --sp-button-ghost-bgactive: #e0f2fe;
269
269
  --sp-button-ghost-bgdisabled: transparent;
270
- --sp-button-ghost-text: #2563eb;
271
- --sp-button-ghost-textdisabled: #94a3b8;
272
- --sp-button-ghost-focusring: rgba(59, 130, 246, 0.4);
270
+ --sp-button-ghost-text: #075985;
271
+ --sp-button-ghost-textdisabled: #8a96ad;
272
+ --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
273
273
  --sp-button-danger-bg: #dc2626;
274
274
  --sp-button-danger-bghover: #b91c1c;
275
275
  --sp-button-danger-bgactive: #991b1b;
276
276
  --sp-button-danger-bgdisabled: #fecaca;
277
277
  --sp-button-danger-text: #ffffff;
278
- --sp-button-danger-textdisabled: #94a3b8;
278
+ --sp-button-danger-textdisabled: #8a96ad;
279
279
  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
280
280
  --sp-button-success-bg: #15803d;
281
281
  --sp-button-success-bghover: #166534;
282
282
  --sp-button-success-bgactive: #14532d;
283
283
  --sp-button-success-bgdisabled: #bbf7d0;
284
284
  --sp-button-success-text: #ffffff;
285
- --sp-button-success-textdisabled: #94a3b8;
285
+ --sp-button-success-textdisabled: #8a96ad;
286
286
  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
287
- --sp-button-cta-bg: #f59e0b;
288
- --sp-button-cta-bghover: #d97706;
289
- --sp-button-cta-bgactive: #b45309;
290
- --sp-button-cta-bgdisabled: #fde68a;
291
- --sp-button-cta-text: #0f172a;
292
- --sp-button-cta-textdisabled: #94a3b8;
293
- --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
294
- --sp-button-cta-focusring: rgba(245, 158, 11, 0.4);
295
- --sp-button-accent-bg: #7c3aed;
296
- --sp-button-accent-bghover: #6d28d9;
297
- --sp-button-accent-bgactive: #5b21b6;
298
- --sp-button-accent-bgdisabled: #ddd6fe;
287
+ --sp-button-cta-bg: #1f57db;
288
+ --sp-button-cta-bghover: #1946b4;
289
+ --sp-button-cta-bgactive: #173b8f;
290
+ --sp-button-cta-bgdisabled: #b9d2ff;
291
+ --sp-button-cta-text: #ffffff;
292
+ --sp-button-cta-textdisabled: #8a96ad;
293
+ --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
294
+ --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
295
+ --sp-button-accent-bg: #7135dd;
296
+ --sp-button-accent-bghover: #5d28b8;
297
+ --sp-button-accent-bgactive: #4d2393;
298
+ --sp-button-accent-bgdisabled: #ddccff;
299
299
  --sp-button-accent-text: #ffffff;
300
- --sp-button-accent-textdisabled: #94a3b8;
301
- --sp-button-accent-focusring: rgba(139, 92, 246, 0.4);
300
+ --sp-button-accent-textdisabled: #8a96ad;
301
+ --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
302
302
  --sp-form-default-bg: #ffffff;
303
- --sp-form-default-border: #cbd5e1;
304
- --sp-form-default-text: #0f172a;
305
- --sp-form-default-placeholder: #94a3b8;
306
- --sp-form-hover-border: #3b82f6;
307
- --sp-form-focus-border: #3b82f6;
308
- --sp-form-focus-ring: #3b82f6;
303
+ --sp-form-default-border: #b7c1d4;
304
+ --sp-form-default-text: #141b24;
305
+ --sp-form-default-placeholder: #657287;
306
+ --sp-form-hover-border: #0ea5e9;
307
+ --sp-form-focus-border: #0ea5e9;
308
+ --sp-form-focus-ring: #0ea5e9;
309
309
  --sp-form-valid-border: #22c55e;
310
310
  --sp-form-valid-bg: #f0fdf4;
311
311
  --sp-form-valid-text: #15803d;
312
312
  --sp-form-invalid-border: #ef4444;
313
313
  --sp-form-invalid-bg: #fef2f2;
314
314
  --sp-form-invalid-text: #b91c1c;
315
- --sp-form-disabled-bg: #f8fafc;
316
- --sp-form-disabled-border: #e2e8f0;
317
- --sp-form-disabled-text: #94a3b8;
315
+ --sp-form-disabled-bg: #f7f8fb;
316
+ --sp-form-disabled-border: #d9dfeb;
317
+ --sp-form-disabled-text: #8a96ad;
318
318
  --sp-animation-fadein-duration: 200ms;
319
319
  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
320
320
  --sp-animation-fadein-keyframes: fade-in;
@@ -341,40 +341,40 @@
341
341
  --sp-animation-pulse-keyframes: pulse;
342
342
  }
343
343
  :root[data-spectre-theme="dark"] {
344
- --sp-surface-page: #0f172a;
345
- --sp-surface-card: #1e293b;
346
- --sp-surface-input: #334155;
347
- --sp-surface-overlay: #1e293b;
348
- --sp-surface-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
349
- --sp-text-on-page-default: #f8fafc;
350
- --sp-text-on-page-muted: #cbd5e1;
351
- --sp-text-on-page-subtle: #94a3b8;
352
- --sp-text-on-page-meta: #94a3b8;
353
- --sp-text-on-surface-default: #f1f5f9;
354
- --sp-text-on-surface-muted: #cbd5e1;
355
- --sp-text-on-surface-subtle: #94a3b8;
356
- --sp-text-on-surface-meta: #94a3b8;
357
- --sp-component-card-text: #f1f5f9;
358
- --sp-component-card-text-muted: #cbd5e1;
359
- --sp-component-input-text: #f1f5f9;
360
- --sp-component-input-placeholder: #94a3b8;
361
- --sp-button-text-default: #f1f5f9;
344
+ --sp-surface-page: #141b24;
345
+ --sp-surface-card: #222b38;
346
+ --sp-surface-input: #374253;
347
+ --sp-surface-overlay: #222b38;
348
+ --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
349
+ --sp-text-on-page-default: #f7f8fb;
350
+ --sp-text-on-page-muted: #b7c1d4;
351
+ --sp-text-on-page-subtle: #8a96ad;
352
+ --sp-text-on-page-meta: #8a96ad;
353
+ --sp-text-on-surface-default: #eef1f6;
354
+ --sp-text-on-surface-muted: #b7c1d4;
355
+ --sp-text-on-surface-subtle: #8a96ad;
356
+ --sp-text-on-surface-meta: #8a96ad;
357
+ --sp-component-card-text: #eef1f6;
358
+ --sp-component-card-text-muted: #b7c1d4;
359
+ --sp-component-input-text: #eef1f6;
360
+ --sp-component-input-placeholder: #b7c1d4;
361
+ --sp-button-text-default: #eef1f6;
362
362
  --sp-button-text-on-primary: #ffffff;
363
- --sp-badge-neutral-bg: #334155;
364
- --sp-badge-neutral-text: #f1f5f9;
365
- --sp-badge-info-bg: #1e40af;
366
- --sp-badge-info-text: #dbeafe;
363
+ --sp-badge-neutral-bg: #374253;
364
+ --sp-badge-neutral-text: #eef1f6;
365
+ --sp-badge-info-bg: #0c4a6e;
366
+ --sp-badge-info-text: #e0f2fe;
367
367
  --sp-badge-success-bg: #166534;
368
368
  --sp-badge-success-text: #dcfce7;
369
- --sp-badge-warning-bg: #92400e;
370
- --sp-badge-warning-text: #fef3c7;
369
+ --sp-badge-warning-bg: #8f5200;
370
+ --sp-badge-warning-text: #fff1c2;
371
371
  --sp-badge-danger-bg: #991b1b;
372
372
  --sp-badge-danger-text: #fee2e2;
373
- --sp-icon-box-bg: #1e293b;
374
- --sp-icon-box-border: #334155;
375
- --sp-icon-box-icon-default: #93c5fd;
373
+ --sp-icon-box-bg: #222b38;
374
+ --sp-icon-box-border: #374253;
375
+ --sp-icon-box-icon-default: #7dd3fc;
376
376
  --sp-icon-box-icon-success: #4ade80;
377
- --sp-icon-box-icon-warning: #fbbf24;
377
+ --sp-icon-box-icon-warning: #ffc21a;
378
378
  --sp-icon-box-icon-danger: #f87171;
379
379
  }
380
380
  @layer base {
@@ -483,15 +483,14 @@
483
483
  --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
484
484
  --sp-component-button-success-text: var(--sp-button-success-text);
485
485
  --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
486
- /* FLAG: buttons.cta tokens in spectre-tokens v2.x use warning.500 (Gold),
487
- which violates the Aesthetic Audit guardrails. Remaining on accent palette. */
488
- --sp-component-button-cta-bg: var(--sp-color-accent-600);
489
- --sp-component-button-cta-bg-hover: var(--sp-color-accent-700);
490
- --sp-component-button-cta-bg-active: var(--sp-color-accent-800);
491
- --sp-component-button-cta-bg-disabled: var(--sp-color-accent-200);
492
- --sp-component-button-cta-text: var(--sp-color-neutral-50);
493
- --sp-component-button-cta-text-disabled: var(--sp-color-neutral-400);
494
- --sp-component-button-cta-shadow: 0 4px 14px 0 var(--sp-color-accent-500) / 0.39;
486
+ /* CTA button alignment restored to official tokens as they now use the brand palette (Blue). */
487
+ --sp-component-button-cta-bg: var(--sp-button-cta-bg);
488
+ --sp-component-button-cta-bg-hover: var(--sp-button-cta-bghover);
489
+ --sp-component-button-cta-bg-active: var(--sp-button-cta-bgactive);
490
+ --sp-component-button-cta-bg-disabled: var(--sp-button-cta-bgdisabled);
491
+ --sp-component-button-cta-text: var(--sp-button-cta-text);
492
+ --sp-component-button-cta-text-disabled: var(--sp-button-cta-textdisabled);
493
+ --sp-component-button-cta-shadow: var(--sp-button-cta-shadow);
495
494
  --sp-component-button-accent-bg: var(--sp-button-accent-bg);
496
495
  --sp-component-button-accent-bg-hover: var(--sp-button-accent-bghover);
497
496
  --sp-component-button-accent-bg-active: var(--sp-button-accent-bgactive);
@@ -520,6 +519,7 @@
520
519
  --sp-component-input-role-bg: var(--sp-form-default-bg);
521
520
  --sp-component-input-role-text: var(--sp-form-default-text);
522
521
  --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
522
+ --sp-component-input-role-border-hover: var(--sp-form-hover-border);
523
523
  --sp-component-input-role-border-focus: var(--sp-form-focus-border);
524
524
  --sp-component-input-role-ring: var(--sp-form-focus-ring);
525
525
  --sp-component-input-role-border-error: var(--sp-form-invalid-border);
@@ -553,7 +553,7 @@
553
553
  --sp-component-badge-info-bg: var(--sp-badge-info-bg);
554
554
  --sp-component-badge-info-text: var(--sp-badge-info-text);
555
555
 
556
- /* badge hover states — missing from core token exports, mapped to semantic logic */
556
+ /* badge hover states derived from Spectre token semantics */
557
557
  --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
558
558
  --sp-component-badge-secondary-bg-hover: var(--sp-button-secondary-bghover);
559
559
  --sp-component-badge-success-bg-hover: var(--sp-color-success-200);
@@ -596,10 +596,8 @@
596
596
  /* pricing card roles */
597
597
  --sp-component-pricing-card-bg: var(--sp-surface-card);
598
598
  --sp-component-pricing-card-border: var(--sp-color-neutral-200);
599
- /* FLAG: component.pricingCard.featuredBg in tokens is info.600 (Blue), which clashing
600
- with the warning.500 (Gold) badge. Remaining on neutral-900 to pass Aesthetic Audit. */
601
- --sp-component-pricing-card-featured-bg: var(--sp-color-neutral-900);
602
- --sp-component-pricing-card-featured-text: var(--sp-color-neutral-50);
599
+ --sp-component-pricing-card-featured-bg: var(--sp-color-info-600);
600
+ --sp-component-pricing-card-featured-text: var(--sp-button-text-on-primary);
603
601
  --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
604
602
  --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
605
603
  --sp-component-pricing-card-price: var(--sp-color-neutral-900);
@@ -612,20 +610,21 @@
612
610
  --sp-component-rating-text: var(--sp-color-neutral-500);
613
611
  }
614
612
 
615
- /* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
613
+ /* dark mode overrides mapped from Spectre token mode definitions */
616
614
  :root[data-spectre-theme="dark"] {
617
615
  --sp-component-testimonial-bg: var(--sp-color-neutral-800);
618
616
  --sp-component-testimonial-border: var(--sp-color-neutral-700);
619
- --sp-component-testimonial-text: var(--sp-color-neutral-300);
617
+ --sp-component-testimonial-text: var(--sp-color-neutral-200);
620
618
  --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
621
- --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
619
+ --sp-component-testimonial-author-title: var(--sp-color-neutral-300);
622
620
  --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
623
621
 
624
622
  --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
625
623
  --sp-component-pricing-card-border: var(--sp-color-neutral-700);
626
624
  --sp-component-pricing-card-price: var(--sp-color-neutral-100);
627
- --sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
625
+ --sp-component-pricing-card-price-description: var(--sp-color-neutral-300);
628
626
 
627
+ --sp-component-rating-star-filled: var(--sp-color-warning-400);
629
628
  --sp-component-rating-star-empty: var(--sp-color-neutral-700);
630
629
  --sp-component-rating-text: var(--sp-color-neutral-400);
631
630
 
@@ -637,11 +636,11 @@
637
636
  --sp-component-badge-danger-text: var(--sp-color-error-100);
638
637
  --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
639
638
  --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
640
- --sp-component-badge-info-bg: var(--sp-color-info-800);
639
+ --sp-component-badge-info-bg: var(--sp-color-info-900);
641
640
  --sp-component-badge-info-text: var(--sp-color-info-100);
642
641
 
643
642
  --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
644
- --sp-component-badge-warning-bg-hover: var(--sp-color-warning-700);
643
+ --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
645
644
  --sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
646
645
  --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
647
646
  --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
@@ -968,8 +967,14 @@
968
967
  border-radius: var(--sp-radius-pill);
969
968
  }
970
969
 
970
+ .sp-input:hover,
971
+ .sp-input--hover {
972
+ border-color: var(--sp-component-input-role-border-hover);
973
+ }
974
+
971
975
  .sp-input:focus,
972
- .sp-input--focus {
976
+ .sp-input--focus,
977
+ .sp-input.is-focus {
973
978
  border-color: var(--sp-component-input-role-border-focus);
974
979
  box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-input-role-ring);
975
980
  outline: none;
@@ -988,11 +993,14 @@
988
993
  color: var(--sp-component-input-role-text);
989
994
  }
990
995
 
996
+ .sp-input:disabled,
997
+ .sp-input[aria-disabled="true"],
991
998
  .sp-input--disabled {
992
999
  background-color: var(--sp-component-input-role-bg-disabled);
993
1000
  color: var(--sp-component-input-role-text-disabled);
994
1001
  border-color: var(--sp-component-input-role-border-disabled);
995
1002
  cursor: not-allowed;
1003
+ pointer-events: none;
996
1004
  }
997
1005
 
998
1006
  .sp-input--disabled::placeholder {
@@ -1004,6 +1012,11 @@
1004
1012
  box-shadow: none;
1005
1013
  }
1006
1014
 
1015
+ .sp-input--loading {
1016
+ pointer-events: none;
1017
+ opacity: var(--sp-opacity-active);
1018
+ }
1019
+
1007
1020
  /* CARDS ---------------------------------------------------------------- */
1008
1021
 
1009
1022
  .sp-card {
@@ -1058,6 +1071,11 @@
1058
1071
  pointer-events: none;
1059
1072
  }
1060
1073
 
1074
+ .sp-card--loading {
1075
+ opacity: var(--sp-opacity-active);
1076
+ pointer-events: none;
1077
+ }
1078
+
1061
1079
  .sp-card--interactive {
1062
1080
  cursor: pointer;
1063
1081
  transition:
@@ -1067,7 +1085,11 @@
1067
1085
 
1068
1086
  .sp-card--interactive:hover,
1069
1087
  .sp-card--interactive:focus-visible,
1070
- .sp-card--interactive:focus-within {
1088
+ .sp-card--interactive:focus-within,
1089
+ .sp-card--interactive.sp-card--hover,
1090
+ .sp-card--interactive.is-hover,
1091
+ .sp-card--interactive.sp-card--focus,
1092
+ .sp-card--interactive.is-focus {
1071
1093
  transform: translateY(calc(var(--sp-component-border-width) * -1));
1072
1094
  box-shadow: var(--sp-component-card-shadow-elevated);
1073
1095
  }
@@ -1112,7 +1134,8 @@
1112
1134
  color: var(--sp-component-badge-primary-text);
1113
1135
  }
1114
1136
 
1115
- .sp-badge--primary.sp-badge--interactive:hover {
1137
+ .sp-badge--primary.sp-badge--interactive:hover,
1138
+ .sp-badge--primary.sp-badge--interactive.sp-badge--hover {
1116
1139
  background-color: var(--sp-component-badge-primary-bg-hover);
1117
1140
  }
1118
1141
 
@@ -1122,7 +1145,8 @@
1122
1145
  border-color: var(--sp-component-badge-secondary-border);
1123
1146
  }
1124
1147
 
1125
- .sp-badge--secondary.sp-badge--interactive:hover {
1148
+ .sp-badge--secondary.sp-badge--interactive:hover,
1149
+ .sp-badge--secondary.sp-badge--interactive.sp-badge--hover {
1126
1150
  background-color: var(--sp-component-badge-secondary-bg-hover);
1127
1151
  }
1128
1152
 
@@ -1131,7 +1155,8 @@
1131
1155
  color: var(--sp-component-badge-success-text);
1132
1156
  }
1133
1157
 
1134
- .sp-badge--success.sp-badge--interactive:hover {
1158
+ .sp-badge--success.sp-badge--interactive:hover,
1159
+ .sp-badge--success.sp-badge--interactive.sp-badge--hover {
1135
1160
  background-color: var(--sp-component-badge-success-bg-hover);
1136
1161
  }
1137
1162
 
@@ -1140,7 +1165,8 @@
1140
1165
  color: var(--sp-component-badge-warning-text);
1141
1166
  }
1142
1167
 
1143
- .sp-badge--warning.sp-badge--interactive:hover {
1168
+ .sp-badge--warning.sp-badge--interactive:hover,
1169
+ .sp-badge--warning.sp-badge--interactive.sp-badge--hover {
1144
1170
  background-color: var(--sp-component-badge-warning-bg-hover);
1145
1171
  }
1146
1172
 
@@ -1149,7 +1175,8 @@
1149
1175
  color: var(--sp-component-badge-danger-text);
1150
1176
  }
1151
1177
 
1152
- .sp-badge--danger.sp-badge--interactive:hover {
1178
+ .sp-badge--danger.sp-badge--interactive:hover,
1179
+ .sp-badge--danger.sp-badge--interactive.sp-badge--hover {
1153
1180
  background-color: var(--sp-component-badge-danger-bg-hover);
1154
1181
  }
1155
1182
 
@@ -1158,7 +1185,8 @@
1158
1185
  color: var(--sp-component-badge-neutral-text);
1159
1186
  }
1160
1187
 
1161
- .sp-badge--neutral.sp-badge--interactive:hover {
1188
+ .sp-badge--neutral.sp-badge--interactive:hover,
1189
+ .sp-badge--neutral.sp-badge--interactive.sp-badge--hover {
1162
1190
  background-color: var(--sp-component-badge-neutral-bg-hover);
1163
1191
  }
1164
1192
 
@@ -1167,7 +1195,8 @@
1167
1195
  color: var(--sp-component-badge-info-text);
1168
1196
  }
1169
1197
 
1170
- .sp-badge--info.sp-badge--interactive:hover {
1198
+ .sp-badge--info.sp-badge--interactive:hover,
1199
+ .sp-badge--info.sp-badge--interactive.sp-badge--hover {
1171
1200
  background-color: var(--sp-component-badge-info-bg-hover);
1172
1201
  }
1173
1202
 
@@ -1181,6 +1210,11 @@
1181
1210
  pointer-events: none;
1182
1211
  }
1183
1212
 
1213
+ .sp-badge--loading {
1214
+ opacity: var(--sp-opacity-active);
1215
+ pointer-events: none;
1216
+ }
1217
+
1184
1218
  /* ICON BOXES ----------------------------------------------------------- */
1185
1219
 
1186
1220
  .sp-iconbox {
@@ -1291,6 +1325,11 @@
1291
1325
  pointer-events: none;
1292
1326
  }
1293
1327
 
1328
+ .sp-iconbox--loading {
1329
+ opacity: var(--sp-opacity-active);
1330
+ pointer-events: none;
1331
+ }
1332
+
1294
1333
  /* TESTIMONIALS --------------------------------------------------------- */
1295
1334
 
1296
1335
  .sp-testimonial {
@@ -1303,6 +1342,16 @@
1303
1342
  gap: var(--sp-space-24);
1304
1343
  }
1305
1344
 
1345
+ .sp-testimonial--disabled {
1346
+ opacity: var(--sp-opacity-disabled);
1347
+ pointer-events: none;
1348
+ }
1349
+
1350
+ .sp-testimonial--loading {
1351
+ opacity: var(--sp-opacity-active);
1352
+ pointer-events: none;
1353
+ }
1354
+
1306
1355
  .sp-testimonial-quote {
1307
1356
  color: var(--sp-component-testimonial-text);
1308
1357
  font-size: var(--sp-font-lg-size);
@@ -1370,6 +1419,11 @@
1370
1419
  pointer-events: none;
1371
1420
  }
1372
1421
 
1422
+ .sp-pricing-card--loading {
1423
+ opacity: var(--sp-opacity-active);
1424
+ pointer-events: none;
1425
+ }
1426
+
1373
1427
  .sp-pricing-card-badge {
1374
1428
  position: absolute;
1375
1429
  top: var(--sp-space-16);
@@ -1416,6 +1470,16 @@
1416
1470
  gap: var(--sp-space-8);
1417
1471
  }
1418
1472
 
1473
+ .sp-rating--disabled {
1474
+ opacity: var(--sp-opacity-disabled);
1475
+ pointer-events: none;
1476
+ }
1477
+
1478
+ .sp-rating--loading {
1479
+ opacity: var(--sp-opacity-active);
1480
+ pointer-events: none;
1481
+ }
1482
+
1419
1483
  .sp-rating-stars {
1420
1484
  display: flex;
1421
1485
  gap: var(--sp-space-4);
@@ -1427,7 +1491,7 @@
1427
1491
  align-items: center;
1428
1492
  justify-content: center;
1429
1493
  }
1430
-
1494
+
1431
1495
  .sp-rating-star--filled {
1432
1496
  color: var(--sp-component-rating-star-filled);
1433
1497
  }