@phcdevworks/spectre-ui 1.0.0 → 1.1.1

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 +137 -72
  3. package/dist/base.css +1 -1
  4. package/dist/components.css +93 -9
  5. package/dist/index.cjs +39 -15
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.css +274 -180
  8. package/dist/index.d.cts +34 -3
  9. package/dist/index.d.ts +34 -3
  10. package/dist/index.js +39 -15
  11. package/dist/index.js.map +1 -1
  12. package/dist/tailwind/index.cjs +5 -10
  13. package/dist/tailwind/index.cjs.map +1 -1
  14. package/dist/tailwind/index.js +5 -10
  15. package/dist/tailwind/index.js.map +1 -1
  16. package/dist/utilities.css +1 -1
  17. package/package.json +19 -9
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: #8a96ad;
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: #eff6ff;
62
- --sp-color-accent-100: #dbeafe;
63
- --sp-color-accent-200: #ddd6fe;
64
- --sp-color-accent-300: #93c5fd;
65
- --sp-color-accent-400: #60a5fa;
66
- --sp-color-accent-500: #8b5cf6;
67
- --sp-color-accent-600: #7c3aed;
68
- --sp-color-accent-700: #6d28d9;
69
- --sp-color-accent-800: #1e40af;
70
- --sp-color-accent-900: #1e3a8a;
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;
@@ -154,6 +154,9 @@
154
154
  --sp-layout-container-padding-inline-sm: 1rem;
155
155
  --sp-layout-container-padding-inline-md: 1.5rem;
156
156
  --sp-layout-container-padding-inline-lg: 2rem;
157
+ --sp-layout-container-max-width: 72rem;
158
+ --sp-border-width-base: 1px;
159
+ --sp-border-width-thick: 2px;
157
160
  --sp-radius-none: 0;
158
161
  --sp-radius-sm: 2px;
159
162
  --sp-radius-md: 4px;
@@ -181,34 +184,34 @@
181
184
  --sp-font-2xl-line-height: 2.5rem;
182
185
  --sp-font-2xl-weight: 600;
183
186
  --sp-font-xs-letter-spacing: 0.02em;
184
- --sp-text-on-page-default: #0f172a;
185
- --sp-text-on-page-muted: #475569;
186
- --sp-text-on-page-subtle: #64748b;
187
- --sp-text-on-page-meta: #64748b;
188
- --sp-text-on-surface-default: #0f172a;
189
- --sp-text-on-surface-muted: #475569;
190
- --sp-text-on-surface-subtle: #64748b;
191
- --sp-text-on-surface-meta: #64748b;
192
- --sp-badge-neutral-bg: #f1f5f9;
193
- --sp-badge-neutral-text: #334155;
194
- --sp-badge-info-bg: #dbeafe;
195
- --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;
196
199
  --sp-badge-success-bg: #dcfce7;
197
- --sp-badge-success-text: #15803d;
198
- --sp-badge-warning-bg: #fef3c7;
199
- --sp-badge-warning-text: #b45309;
200
+ --sp-badge-success-text: #166534;
201
+ --sp-badge-warning-bg: #fff1c2;
202
+ --sp-badge-warning-text: #8f5200;
200
203
  --sp-badge-danger-bg: #fee2e2;
201
- --sp-badge-danger-text: #b91c1c;
204
+ --sp-badge-danger-text: #991b1b;
202
205
  --sp-icon-box-bg: #ffffff;
203
- --sp-icon-box-border: #e2e8f0;
204
- --sp-icon-box-icon-default: #2563eb;
206
+ --sp-icon-box-border: #d9dfeb;
207
+ --sp-icon-box-icon-default: #0369a1;
205
208
  --sp-icon-box-icon-success: #16a34a;
206
- --sp-icon-box-icon-warning: #d97706;
209
+ --sp-icon-box-icon-warning: #d48806;
207
210
  --sp-icon-box-icon-danger: #dc2626;
208
211
  --sp-shadow-none: none;
209
- --sp-shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.06);
210
- --sp-shadow-md: 0 2px 6px -1px rgba(30, 41, 59, 0.08);
211
- --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);
212
215
  --sp-breakpoint-sm: 640px;
213
216
  --sp-breakpoint-md: 768px;
214
217
  --sp-breakpoint-lg: 1024px;
@@ -244,67 +247,74 @@
244
247
  --sp-focus-ring-style: solid;
245
248
  --sp-min-touch-target: 44px;
246
249
  --sp-min-text-size: 16px;
247
- --sp-button-primary-bg: #2563eb;
248
- --sp-button-primary-bghover: #1d4ed8;
249
- --sp-button-primary-bgactive: #1e40af;
250
- --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;
251
254
  --sp-button-primary-text: #ffffff;
252
- --sp-button-primary-textdisabled: #94a3b8;
255
+ --sp-button-primary-textdisabled: #8a96ad;
256
+ --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
253
257
  --sp-button-secondary-bg: #ffffff;
254
- --sp-button-secondary-bghover: #f8fafc;
255
- --sp-button-secondary-bgactive: #f1f5f9;
256
- --sp-button-secondary-bgdisabled: #f8fafc;
257
- --sp-button-secondary-text: #2563eb;
258
- --sp-button-secondary-textdisabled: #94a3b8;
259
- --sp-button-secondary-border: #2563eb;
260
- --sp-button-secondary-borderdisabled: #e2e8f0;
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);
261
266
  --sp-button-ghost-bg: transparent;
262
- --sp-button-ghost-bghover: #eff6ff;
263
- --sp-button-ghost-bgactive: #dbeafe;
267
+ --sp-button-ghost-bghover: #f0f9ff;
268
+ --sp-button-ghost-bgactive: #e0f2fe;
264
269
  --sp-button-ghost-bgdisabled: transparent;
265
- --sp-button-ghost-text: #2563eb;
266
- --sp-button-ghost-textdisabled: #94a3b8;
270
+ --sp-button-ghost-text: #075985;
271
+ --sp-button-ghost-textdisabled: #8a96ad;
272
+ --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
267
273
  --sp-button-danger-bg: #dc2626;
268
274
  --sp-button-danger-bghover: #b91c1c;
269
275
  --sp-button-danger-bgactive: #991b1b;
270
276
  --sp-button-danger-bgdisabled: #fecaca;
271
277
  --sp-button-danger-text: #ffffff;
272
- --sp-button-danger-textdisabled: #94a3b8;
278
+ --sp-button-danger-textdisabled: #8a96ad;
279
+ --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
273
280
  --sp-button-success-bg: #15803d;
274
281
  --sp-button-success-bghover: #166534;
275
282
  --sp-button-success-bgactive: #14532d;
276
283
  --sp-button-success-bgdisabled: #bbf7d0;
277
284
  --sp-button-success-text: #ffffff;
278
- --sp-button-success-textdisabled: #94a3b8;
279
- --sp-button-cta-bg: #f59e0b;
280
- --sp-button-cta-bghover: #d97706;
281
- --sp-button-cta-bgactive: #b45309;
282
- --sp-button-cta-bgdisabled: #fde68a;
283
- --sp-button-cta-text: #0f172a;
284
- --sp-button-cta-textdisabled: #94a3b8;
285
- --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
286
- --sp-button-accent-bg: #7c3aed;
287
- --sp-button-accent-bghover: #6d28d9;
288
- --sp-button-accent-bgactive: #1e40af;
289
- --sp-button-accent-bgdisabled: #ddd6fe;
285
+ --sp-button-success-textdisabled: #8a96ad;
286
+ --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
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;
290
299
  --sp-button-accent-text: #ffffff;
291
- --sp-button-accent-textdisabled: #94a3b8;
300
+ --sp-button-accent-textdisabled: #8a96ad;
301
+ --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
292
302
  --sp-form-default-bg: #ffffff;
293
- --sp-form-default-border: #cbd5e1;
294
- --sp-form-default-text: #0f172a;
295
- --sp-form-default-placeholder: #94a3b8;
296
- --sp-form-hover-border: #3b82f6;
297
- --sp-form-focus-border: #3b82f6;
298
- --sp-form-focus-ring: #3b82f6;
303
+ --sp-form-default-border: #b7c1d4;
304
+ --sp-form-default-text: #141b24;
305
+ --sp-form-default-placeholder: #8a96ad;
306
+ --sp-form-hover-border: #0ea5e9;
307
+ --sp-form-focus-border: #0ea5e9;
308
+ --sp-form-focus-ring: #0ea5e9;
299
309
  --sp-form-valid-border: #22c55e;
300
310
  --sp-form-valid-bg: #f0fdf4;
301
311
  --sp-form-valid-text: #15803d;
302
312
  --sp-form-invalid-border: #ef4444;
303
313
  --sp-form-invalid-bg: #fef2f2;
304
314
  --sp-form-invalid-text: #b91c1c;
305
- --sp-form-disabled-bg: #f8fafc;
306
- --sp-form-disabled-border: #e2e8f0;
307
- --sp-form-disabled-text: #94a3b8;
315
+ --sp-form-disabled-bg: #f7f8fb;
316
+ --sp-form-disabled-border: #d9dfeb;
317
+ --sp-form-disabled-text: #8a96ad;
308
318
  --sp-animation-fadein-duration: 200ms;
309
319
  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
310
320
  --sp-animation-fadein-keyframes: fade-in;
@@ -331,40 +341,40 @@
331
341
  --sp-animation-pulse-keyframes: pulse;
332
342
  }
333
343
  :root[data-spectre-theme="dark"] {
334
- --sp-surface-page: #0f172a;
335
- --sp-surface-card: #1e293b;
336
- --sp-surface-input: #334155;
337
- --sp-surface-overlay: #1e293b;
338
- --sp-surface-hero: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
339
- --sp-text-on-page-default: #f8fafc;
340
- --sp-text-on-page-muted: #cbd5e1;
341
- --sp-text-on-page-subtle: #94a3b8;
342
- --sp-text-on-page-meta: #94a3b8;
343
- --sp-text-on-surface-default: #f1f5f9;
344
- --sp-text-on-surface-muted: #cbd5e1;
345
- --sp-text-on-surface-subtle: #94a3b8;
346
- --sp-text-on-surface-meta: #94a3b8;
347
- --sp-component-card-text: #f1f5f9;
348
- --sp-component-card-text-muted: #cbd5e1;
349
- --sp-component-input-text: #f1f5f9;
350
- --sp-component-input-placeholder: #94a3b8;
351
- --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: #d9dfeb;
351
+ --sp-text-on-page-subtle: #b7c1d4;
352
+ --sp-text-on-page-meta: #b7c1d4;
353
+ --sp-text-on-surface-default: #eef1f6;
354
+ --sp-text-on-surface-muted: #d9dfeb;
355
+ --sp-text-on-surface-subtle: #b7c1d4;
356
+ --sp-text-on-surface-meta: #b7c1d4;
357
+ --sp-component-card-text: #eef1f6;
358
+ --sp-component-card-text-muted: #d9dfeb;
359
+ --sp-component-input-text: #eef1f6;
360
+ --sp-component-input-placeholder: #8a96ad;
361
+ --sp-button-text-default: #eef1f6;
352
362
  --sp-button-text-on-primary: #ffffff;
353
- --sp-badge-neutral-bg: #334155;
354
- --sp-badge-neutral-text: #f1f5f9;
355
- --sp-badge-info-bg: #1e40af;
356
- --sp-badge-info-text: #dbeafe;
363
+ --sp-badge-neutral-bg: #374253;
364
+ --sp-badge-neutral-text: #eef1f6;
365
+ --sp-badge-info-bg: #082f49;
366
+ --sp-badge-info-text: #e0f2fe;
357
367
  --sp-badge-success-bg: #166534;
358
368
  --sp-badge-success-text: #dcfce7;
359
- --sp-badge-warning-bg: #92400e;
360
- --sp-badge-warning-text: #fef3c7;
369
+ --sp-badge-warning-bg: #8f5200;
370
+ --sp-badge-warning-text: #fff1c2;
361
371
  --sp-badge-danger-bg: #991b1b;
362
372
  --sp-badge-danger-text: #fee2e2;
363
- --sp-icon-box-bg: #1e293b;
364
- --sp-icon-box-border: #334155;
365
- --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;
366
376
  --sp-icon-box-icon-success: #4ade80;
367
- --sp-icon-box-icon-warning: #fbbf24;
377
+ --sp-icon-box-icon-warning: #ffc21a;
368
378
  --sp-icon-box-icon-danger: #f87171;
369
379
  }
370
380
  @layer base {
@@ -423,7 +433,7 @@
423
433
  }
424
434
 
425
435
  :focus-visible {
426
- outline: var(--sp-focus-ring-width) solid var(--sp-color-focus-primary);
436
+ outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style) var(--sp-color-focus-primary);
427
437
  outline-offset: var(--sp-focus-ring-offset);
428
438
  }
429
439
 
@@ -435,8 +445,8 @@
435
445
  @layer components {
436
446
 
437
447
  :root {
438
- /* structural border width — swap to token when spectre-tokens ships sp-border-width-base */
439
- --sp-component-border-width: 1px;
448
+ /* structural border width */
449
+ --sp-component-border-width: var(--sp-border-width-base);
440
450
 
441
451
  /* button roles */
442
452
  --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
@@ -473,6 +483,8 @@
473
483
  --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
474
484
  --sp-component-button-success-text: var(--sp-button-success-text);
475
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. */
476
488
  --sp-component-button-cta-bg: var(--sp-color-accent-600);
477
489
  --sp-component-button-cta-bg-hover: var(--sp-color-accent-700);
478
490
  --sp-component-button-cta-bg-active: var(--sp-color-accent-800);
@@ -576,34 +588,57 @@
576
588
  /* testimonial roles */
577
589
  --sp-component-testimonial-bg: var(--sp-surface-card);
578
590
  --sp-component-testimonial-border: var(--sp-color-neutral-200);
579
- --sp-component-testimonial-text: var(--sp-text-on-surface-muted);
580
- --sp-component-testimonial-author-name: var(--sp-text-on-surface-default);
581
- --sp-component-testimonial-author-title: var(--sp-text-on-surface-subtle);
591
+ --sp-component-testimonial-text: var(--sp-color-neutral-700);
592
+ --sp-component-testimonial-author-name: var(--sp-color-neutral-900);
593
+ --sp-component-testimonial-author-title: var(--sp-color-neutral-500);
582
594
  --sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
583
595
 
584
596
  /* pricing card roles */
585
597
  --sp-component-pricing-card-bg: var(--sp-surface-card);
586
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. */
587
601
  --sp-component-pricing-card-featured-bg: var(--sp-color-neutral-900);
588
602
  --sp-component-pricing-card-featured-text: var(--sp-color-neutral-50);
589
603
  --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
590
604
  --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
591
- --sp-component-pricing-card-price: var(--sp-text-on-surface-default);
605
+ --sp-component-pricing-card-price: var(--sp-color-neutral-900);
592
606
  --sp-component-pricing-card-featured-price: var(--sp-color-neutral-50);
593
- --sp-component-pricing-card-price-description: var(--sp-text-on-surface-subtle);
607
+ --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
594
608
 
595
609
  /* rating roles */
596
610
  --sp-component-rating-star-filled: var(--sp-color-warning-500);
597
611
  --sp-component-rating-star-empty: var(--sp-color-neutral-200);
598
- --sp-component-rating-text: var(--sp-text-on-surface-subtle);
612
+ --sp-component-rating-text: var(--sp-color-neutral-500);
599
613
  }
600
614
 
601
615
  /* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
602
616
  :root[data-spectre-theme="dark"] {
617
+ --sp-component-testimonial-bg: var(--sp-color-neutral-800);
603
618
  --sp-component-testimonial-border: var(--sp-color-neutral-700);
619
+ --sp-component-testimonial-text: var(--sp-color-neutral-300);
620
+ --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
621
+ --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
604
622
  --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
623
+
624
+ --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
605
625
  --sp-component-pricing-card-border: var(--sp-color-neutral-700);
626
+ --sp-component-pricing-card-price: var(--sp-color-neutral-100);
627
+ --sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
628
+
606
629
  --sp-component-rating-star-empty: var(--sp-color-neutral-700);
630
+ --sp-component-rating-text: var(--sp-color-neutral-400);
631
+
632
+ --sp-component-badge-success-bg: var(--sp-color-success-800);
633
+ --sp-component-badge-success-text: var(--sp-color-success-100);
634
+ --sp-component-badge-warning-bg: var(--sp-color-warning-800);
635
+ --sp-component-badge-warning-text: var(--sp-color-warning-100);
636
+ --sp-component-badge-danger-bg: var(--sp-color-error-800);
637
+ --sp-component-badge-danger-text: var(--sp-color-error-100);
638
+ --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
639
+ --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
640
+ --sp-component-badge-info-bg: var(--sp-color-info-800);
641
+ --sp-component-badge-info-text: var(--sp-color-info-100);
607
642
 
608
643
  --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
609
644
  --sp-component-badge-warning-bg-hover: var(--sp-color-warning-700);
@@ -929,6 +964,10 @@
929
964
  width: 100%;
930
965
  }
931
966
 
967
+ .sp-input--pill {
968
+ border-radius: var(--sp-radius-pill);
969
+ }
970
+
932
971
  .sp-input:focus,
933
972
  .sp-input--focus {
934
973
  border-color: var(--sp-component-input-role-border-focus);
@@ -965,6 +1004,11 @@
965
1004
  box-shadow: none;
966
1005
  }
967
1006
 
1007
+ .sp-input--loading {
1008
+ pointer-events: none;
1009
+ opacity: var(--sp-opacity-active);
1010
+ }
1011
+
968
1012
  /* CARDS ---------------------------------------------------------------- */
969
1013
 
970
1014
  .sp-card {
@@ -1014,6 +1058,11 @@
1014
1058
  height: 100%;
1015
1059
  }
1016
1060
 
1061
+ .sp-card--disabled {
1062
+ opacity: var(--sp-opacity-disabled);
1063
+ pointer-events: none;
1064
+ }
1065
+
1017
1066
  .sp-card--interactive {
1018
1067
  cursor: pointer;
1019
1068
  transition:
@@ -1132,6 +1181,16 @@
1132
1181
  transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
1133
1182
  }
1134
1183
 
1184
+ .sp-badge--disabled {
1185
+ opacity: var(--sp-opacity-disabled);
1186
+ pointer-events: none;
1187
+ }
1188
+
1189
+ .sp-badge--loading {
1190
+ opacity: var(--sp-opacity-active);
1191
+ pointer-events: none;
1192
+ }
1193
+
1135
1194
  /* ICON BOXES ----------------------------------------------------------- */
1136
1195
 
1137
1196
  .sp-iconbox {
@@ -1237,6 +1296,16 @@
1237
1296
  color: var(--sp-component-iconbox-info-text);
1238
1297
  }
1239
1298
 
1299
+ .sp-iconbox--disabled {
1300
+ opacity: var(--sp-opacity-disabled);
1301
+ pointer-events: none;
1302
+ }
1303
+
1304
+ .sp-iconbox--loading {
1305
+ opacity: var(--sp-opacity-active);
1306
+ pointer-events: none;
1307
+ }
1308
+
1240
1309
  /* TESTIMONIALS --------------------------------------------------------- */
1241
1310
 
1242
1311
  .sp-testimonial {
@@ -1249,6 +1318,16 @@
1249
1318
  gap: var(--sp-space-24);
1250
1319
  }
1251
1320
 
1321
+ .sp-testimonial--disabled {
1322
+ opacity: var(--sp-opacity-disabled);
1323
+ pointer-events: none;
1324
+ }
1325
+
1326
+ .sp-testimonial--loading {
1327
+ opacity: var(--sp-opacity-active);
1328
+ pointer-events: none;
1329
+ }
1330
+
1252
1331
  .sp-testimonial-quote {
1253
1332
  color: var(--sp-component-testimonial-text);
1254
1333
  font-size: var(--sp-font-lg-size);
@@ -1311,6 +1390,11 @@
1311
1390
  border: none;
1312
1391
  }
1313
1392
 
1393
+ .sp-pricing-card--disabled {
1394
+ opacity: var(--sp-opacity-disabled);
1395
+ pointer-events: none;
1396
+ }
1397
+
1314
1398
  .sp-pricing-card-badge {
1315
1399
  position: absolute;
1316
1400
  top: var(--sp-space-16);
@@ -1357,6 +1441,16 @@
1357
1441
  gap: var(--sp-space-8);
1358
1442
  }
1359
1443
 
1444
+ .sp-rating--disabled {
1445
+ opacity: var(--sp-opacity-disabled);
1446
+ pointer-events: none;
1447
+ }
1448
+
1449
+ .sp-rating--loading {
1450
+ opacity: var(--sp-opacity-active);
1451
+ pointer-events: none;
1452
+ }
1453
+
1360
1454
  .sp-rating-stars {
1361
1455
  display: flex;
1362
1456
  gap: var(--sp-space-4);
@@ -1368,7 +1462,7 @@
1368
1462
  align-items: center;
1369
1463
  justify-content: center;
1370
1464
  }
1371
-
1465
+
1372
1466
  .sp-rating-star--filled {
1373
1467
  color: var(--sp-component-rating-star-filled);
1374
1468
  }
@@ -1398,7 +1492,7 @@
1398
1492
  margin-right: auto;
1399
1493
  padding-left: var(--sp-layout-container-padding-inline-md);
1400
1494
  padding-right: var(--sp-layout-container-padding-inline-md);
1401
- max-width: calc(var(--sp-space-96) * 12);
1495
+ max-width: var(--sp-layout-container-max-width);
1402
1496
  }
1403
1497
 
1404
1498
  .sp-section {