@phcdevworks/spectre-ui 1.1.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 (15) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +137 -71
  3. package/dist/components.css +36 -1
  4. package/dist/index.cjs +28 -9
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +210 -175
  7. package/dist/index.d.cts +9 -3
  8. package/dist/index.d.ts +9 -3
  9. package/dist/index.js +28 -9
  10. package/dist/index.js.map +1 -1
  11. package/dist/tailwind/index.cjs +5 -10
  12. package/dist/tailwind/index.cjs.map +1 -1
  13. package/dist/tailwind/index.js +5 -10
  14. package/dist/tailwind/index.js.map +1 -1
  15. package/package.json +11 -11
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: #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: #8a96ad;
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: #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;
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: #082f49;
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 {
@@ -1004,6 +1004,11 @@
1004
1004
  box-shadow: none;
1005
1005
  }
1006
1006
 
1007
+ .sp-input--loading {
1008
+ pointer-events: none;
1009
+ opacity: var(--sp-opacity-active);
1010
+ }
1011
+
1007
1012
  /* CARDS ---------------------------------------------------------------- */
1008
1013
 
1009
1014
  .sp-card {
@@ -1181,6 +1186,11 @@
1181
1186
  pointer-events: none;
1182
1187
  }
1183
1188
 
1189
+ .sp-badge--loading {
1190
+ opacity: var(--sp-opacity-active);
1191
+ pointer-events: none;
1192
+ }
1193
+
1184
1194
  /* ICON BOXES ----------------------------------------------------------- */
1185
1195
 
1186
1196
  .sp-iconbox {
@@ -1291,6 +1301,11 @@
1291
1301
  pointer-events: none;
1292
1302
  }
1293
1303
 
1304
+ .sp-iconbox--loading {
1305
+ opacity: var(--sp-opacity-active);
1306
+ pointer-events: none;
1307
+ }
1308
+
1294
1309
  /* TESTIMONIALS --------------------------------------------------------- */
1295
1310
 
1296
1311
  .sp-testimonial {
@@ -1303,6 +1318,16 @@
1303
1318
  gap: var(--sp-space-24);
1304
1319
  }
1305
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
+
1306
1331
  .sp-testimonial-quote {
1307
1332
  color: var(--sp-component-testimonial-text);
1308
1333
  font-size: var(--sp-font-lg-size);
@@ -1416,6 +1441,16 @@
1416
1441
  gap: var(--sp-space-8);
1417
1442
  }
1418
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
+
1419
1454
  .sp-rating-stars {
1420
1455
  display: flex;
1421
1456
  gap: var(--sp-space-4);
@@ -1427,7 +1462,7 @@
1427
1462
  align-items: center;
1428
1463
  justify-content: center;
1429
1464
  }
1430
-
1465
+
1431
1466
  .sp-rating-star--filled {
1432
1467
  color: var(--sp-component-rating-star-filled);
1433
1468
  }
package/dist/index.d.cts CHANGED
@@ -38,7 +38,7 @@ interface CardRecipeOptions {
38
38
  }
39
39
  declare function getCardClasses(opts?: CardRecipeOptions): string;
40
40
 
41
- declare const inputStates: readonly ["default", "error", "success", "disabled"];
41
+ declare const inputStates: readonly ["default", "error", "success", "disabled", "loading"];
42
42
  declare const inputSizes: readonly ["sm", "md", "lg"];
43
43
  type InputState = (typeof inputStates)[number];
44
44
  type InputSize = (typeof inputSizes)[number];
@@ -63,6 +63,7 @@ interface BadgeRecipeOptions {
63
63
  size?: BadgeSize;
64
64
  interactive?: boolean;
65
65
  disabled?: boolean;
66
+ loading?: boolean;
66
67
  }
67
68
  declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
68
69
 
@@ -74,6 +75,7 @@ interface IconBoxRecipeOptions {
74
75
  variant?: IconBoxVariant;
75
76
  size?: IconBoxSize;
76
77
  disabled?: boolean;
78
+ loading?: boolean;
77
79
  }
78
80
  declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
79
81
 
@@ -82,8 +84,10 @@ declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
82
84
  * @sync v2.x - Synced with latest design tokens.
83
85
  */
84
86
  interface TestimonialRecipeOptions {
87
+ disabled?: boolean;
88
+ loading?: boolean;
85
89
  }
86
- declare function getTestimonialClasses(_opts?: TestimonialRecipeOptions): string;
90
+ declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
87
91
  declare function getTestimonialQuoteClasses(): string;
88
92
  declare function getTestimonialAuthorClasses(): string;
89
93
  declare function getTestimonialAuthorInfoClasses(): string;
@@ -109,8 +113,10 @@ declare function getPricingCardDescriptionClasses(): string;
109
113
  * @sync v2.x - Synced with latest design tokens.
110
114
  */
111
115
  interface RatingRecipeOptions {
116
+ disabled?: boolean;
117
+ loading?: boolean;
112
118
  }
113
- declare function getRatingClasses(_opts?: RatingRecipeOptions): string;
119
+ declare function getRatingClasses(opts?: RatingRecipeOptions): string;
114
120
  declare function getRatingStarsClasses(): string;
115
121
  declare function getRatingStarClasses(isFilled?: boolean): string;
116
122
  declare function getRatingTextClasses(): string;
package/dist/index.d.ts CHANGED
@@ -38,7 +38,7 @@ interface CardRecipeOptions {
38
38
  }
39
39
  declare function getCardClasses(opts?: CardRecipeOptions): string;
40
40
 
41
- declare const inputStates: readonly ["default", "error", "success", "disabled"];
41
+ declare const inputStates: readonly ["default", "error", "success", "disabled", "loading"];
42
42
  declare const inputSizes: readonly ["sm", "md", "lg"];
43
43
  type InputState = (typeof inputStates)[number];
44
44
  type InputSize = (typeof inputSizes)[number];
@@ -63,6 +63,7 @@ interface BadgeRecipeOptions {
63
63
  size?: BadgeSize;
64
64
  interactive?: boolean;
65
65
  disabled?: boolean;
66
+ loading?: boolean;
66
67
  }
67
68
  declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
68
69
 
@@ -74,6 +75,7 @@ interface IconBoxRecipeOptions {
74
75
  variant?: IconBoxVariant;
75
76
  size?: IconBoxSize;
76
77
  disabled?: boolean;
78
+ loading?: boolean;
77
79
  }
78
80
  declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
79
81
 
@@ -82,8 +84,10 @@ declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
82
84
  * @sync v2.x - Synced with latest design tokens.
83
85
  */
84
86
  interface TestimonialRecipeOptions {
87
+ disabled?: boolean;
88
+ loading?: boolean;
85
89
  }
86
- declare function getTestimonialClasses(_opts?: TestimonialRecipeOptions): string;
90
+ declare function getTestimonialClasses(opts?: TestimonialRecipeOptions): string;
87
91
  declare function getTestimonialQuoteClasses(): string;
88
92
  declare function getTestimonialAuthorClasses(): string;
89
93
  declare function getTestimonialAuthorInfoClasses(): string;
@@ -109,8 +113,10 @@ declare function getPricingCardDescriptionClasses(): string;
109
113
  * @sync v2.x - Synced with latest design tokens.
110
114
  */
111
115
  interface RatingRecipeOptions {
116
+ disabled?: boolean;
117
+ loading?: boolean;
112
118
  }
113
- declare function getRatingClasses(_opts?: RatingRecipeOptions): string;
119
+ declare function getRatingClasses(opts?: RatingRecipeOptions): string;
114
120
  declare function getRatingStarsClasses(): string;
115
121
  declare function getRatingStarClasses(isFilled?: boolean): string;
116
122
  declare function getRatingTextClasses(): string;