@phcdevworks/spectre-tokens 2.1.0 → 2.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 (13) hide show
  1. package/LICENSE +12 -13
  2. package/README.md +138 -1456
  3. package/dist/index.cjs +449 -167
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +174 -174
  6. package/dist/index.d.cts +309 -27
  7. package/dist/index.d.ts +309 -27
  8. package/dist/index.js +449 -167
  9. package/dist/index.js.map +1 -1
  10. package/package.json +16 -13
  11. package/tokens/components.json +144 -45
  12. package/tokens/modes.json +250 -67
  13. package/tokens/palette.json +55 -55
package/dist/index.css CHANGED
@@ -1,69 +1,69 @@
1
1
  :root {
2
- --sp-surface-page: #f8fafc;
2
+ --sp-surface-page: #f7f8fb;
3
3
  --sp-surface-card: #ffffff;
4
4
  --sp-surface-input: #ffffff;
5
- --sp-surface-overlay: rgba(15, 23, 42, 0.6);
6
- --sp-surface-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
7
- --sp-text-on-page-default: #0f172a;
8
- --sp-text-on-page-muted: #475569;
9
- --sp-text-on-page-subtle: #64748b;
10
- --sp-text-on-page-meta: #64748b;
11
- --sp-text-on-surface-default: #0f172a;
12
- --sp-text-on-surface-muted: #475569;
13
- --sp-text-on-surface-subtle: #64748b;
14
- --sp-text-on-surface-meta: #64748b;
15
- --sp-component-card-text: #0f172a;
16
- --sp-component-card-text-muted: #64748b;
17
- --sp-component-input-text: #0f172a;
18
- --sp-component-input-placeholder: #94a3b8;
19
- --sp-button-text-default: #0f172a;
5
+ --sp-surface-overlay: rgba(20, 27, 36, 0.6);
6
+ --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
7
+ --sp-text-on-page-default: #141b24;
8
+ --sp-text-on-page-muted: #4b576a;
9
+ --sp-text-on-page-subtle: #657287;
10
+ --sp-text-on-page-meta: #657287;
11
+ --sp-text-on-surface-default: #141b24;
12
+ --sp-text-on-surface-muted: #4b576a;
13
+ --sp-text-on-surface-subtle: #657287;
14
+ --sp-text-on-surface-meta: #657287;
15
+ --sp-component-card-text: #141b24;
16
+ --sp-component-card-text-muted: #657287;
17
+ --sp-component-input-text: #141b24;
18
+ --sp-component-input-placeholder: #657287;
19
+ --sp-button-text-default: #141b24;
20
20
  --sp-button-text-on-primary: #ffffff;
21
- --sp-badge-neutral-bg: #f1f5f9;
22
- --sp-badge-neutral-text: #334155;
23
- --sp-badge-info-bg: #dbeafe;
24
- --sp-badge-info-text: #1d4ed8;
21
+ --sp-badge-neutral-bg: #eef1f6;
22
+ --sp-badge-neutral-text: #374253;
23
+ --sp-badge-info-bg: #e0f2fe;
24
+ --sp-badge-info-text: #075985;
25
25
  --sp-badge-success-bg: #dcfce7;
26
26
  --sp-badge-success-text: #15803d;
27
- --sp-badge-warning-bg: #fef3c7;
28
- --sp-badge-warning-text: #b45309;
27
+ --sp-badge-warning-bg: #fff1c2;
28
+ --sp-badge-warning-text: #8f5200;
29
29
  --sp-badge-danger-bg: #fee2e2;
30
30
  --sp-badge-danger-text: #b91c1c;
31
31
  --sp-icon-box-bg: #ffffff;
32
- --sp-icon-box-border: #e2e8f0;
33
- --sp-icon-box-icon-default: #2563eb;
32
+ --sp-icon-box-border: #d9dfeb;
33
+ --sp-icon-box-icon-default: #0369a1;
34
34
  --sp-icon-box-icon-success: #16a34a;
35
- --sp-icon-box-icon-warning: #d97706;
35
+ --sp-icon-box-icon-warning: #d48806;
36
36
  --sp-icon-box-icon-danger: #dc2626;
37
- --sp-color-brand-50: #eff6ff;
38
- --sp-color-brand-100: #dbeafe;
39
- --sp-color-brand-200: #bfdbfe;
40
- --sp-color-brand-300: #93c5fd;
41
- --sp-color-brand-400: #60a5fa;
42
- --sp-color-brand-500: #3b82f6;
43
- --sp-color-brand-600: #2563eb;
44
- --sp-color-brand-700: #1d4ed8;
45
- --sp-color-brand-800: #1e40af;
46
- --sp-color-brand-900: #1e3a8a;
47
- --sp-color-neutral-50: #f8fafc;
48
- --sp-color-neutral-100: #f1f5f9;
49
- --sp-color-neutral-200: #e2e8f0;
50
- --sp-color-neutral-300: #cbd5e1;
51
- --sp-color-neutral-400: #94a3b8;
52
- --sp-color-neutral-500: #64748b;
53
- --sp-color-neutral-600: #475569;
54
- --sp-color-neutral-700: #334155;
55
- --sp-color-neutral-800: #1e293b;
56
- --sp-color-neutral-900: #0f172a;
57
- --sp-color-accent-50: #f5f3ff;
58
- --sp-color-accent-100: #ede9fe;
59
- --sp-color-accent-200: #ddd6fe;
60
- --sp-color-accent-300: #c4b5fd;
61
- --sp-color-accent-400: #a78bfa;
62
- --sp-color-accent-500: #8b5cf6;
63
- --sp-color-accent-600: #7c3aed;
64
- --sp-color-accent-700: #6d28d9;
65
- --sp-color-accent-800: #5b21b6;
66
- --sp-color-accent-900: #4c1d95;
37
+ --sp-color-brand-50: #eef4ff;
38
+ --sp-color-brand-100: #d9e7ff;
39
+ --sp-color-brand-200: #b9d2ff;
40
+ --sp-color-brand-300: #8ab6ff;
41
+ --sp-color-brand-400: #5a92ff;
42
+ --sp-color-brand-500: #336df4;
43
+ --sp-color-brand-600: #1f57db;
44
+ --sp-color-brand-700: #1946b4;
45
+ --sp-color-brand-800: #173b8f;
46
+ --sp-color-brand-900: #16336f;
47
+ --sp-color-neutral-50: #f7f8fb;
48
+ --sp-color-neutral-100: #eef1f6;
49
+ --sp-color-neutral-200: #d9dfeb;
50
+ --sp-color-neutral-300: #b7c1d4;
51
+ --sp-color-neutral-400: #8a96ad;
52
+ --sp-color-neutral-500: #657287;
53
+ --sp-color-neutral-600: #4b576a;
54
+ --sp-color-neutral-700: #374253;
55
+ --sp-color-neutral-800: #222b38;
56
+ --sp-color-neutral-900: #141b24;
57
+ --sp-color-accent-50: #f6f2ff;
58
+ --sp-color-accent-100: #eee5ff;
59
+ --sp-color-accent-200: #ddccff;
60
+ --sp-color-accent-300: #c3a7ff;
61
+ --sp-color-accent-400: #a279ff;
62
+ --sp-color-accent-500: #854ff7;
63
+ --sp-color-accent-600: #7135dd;
64
+ --sp-color-accent-700: #5d28b8;
65
+ --sp-color-accent-800: #4d2393;
66
+ --sp-color-accent-900: #401f75;
67
67
  --sp-color-success-50: #f0fdf4;
68
68
  --sp-color-success-100: #dcfce7;
69
69
  --sp-color-success-200: #bbf7d0;
@@ -74,16 +74,16 @@
74
74
  --sp-color-success-700: #15803d;
75
75
  --sp-color-success-800: #166534;
76
76
  --sp-color-success-900: #14532d;
77
- --sp-color-warning-50: #fffbeb;
78
- --sp-color-warning-100: #fef3c7;
79
- --sp-color-warning-200: #fde68a;
80
- --sp-color-warning-300: #fcd34d;
81
- --sp-color-warning-400: #fbbf24;
82
- --sp-color-warning-500: #f59e0b;
83
- --sp-color-warning-600: #d97706;
84
- --sp-color-warning-700: #b45309;
85
- --sp-color-warning-800: #92400e;
86
- --sp-color-warning-900: #78350f;
77
+ --sp-color-warning-50: #fffbea;
78
+ --sp-color-warning-100: #fff1c2;
79
+ --sp-color-warning-200: #ffe08a;
80
+ --sp-color-warning-300: #ffd24d;
81
+ --sp-color-warning-400: #ffc21a;
82
+ --sp-color-warning-500: #f5ad00;
83
+ --sp-color-warning-600: #d48806;
84
+ --sp-color-warning-700: #ad6800;
85
+ --sp-color-warning-800: #8f5200;
86
+ --sp-color-warning-900: #734000;
87
87
  --sp-color-error-50: #fef2f2;
88
88
  --sp-color-error-100: #fee2e2;
89
89
  --sp-color-error-200: #fecaca;
@@ -94,22 +94,22 @@
94
94
  --sp-color-error-700: #b91c1c;
95
95
  --sp-color-error-800: #991b1b;
96
96
  --sp-color-error-900: #7f1d1d;
97
- --sp-color-info-50: #eff6ff;
98
- --sp-color-info-100: #dbeafe;
99
- --sp-color-info-200: #bfdbfe;
100
- --sp-color-info-300: #93c5fd;
101
- --sp-color-info-400: #60a5fa;
102
- --sp-color-info-500: #3b82f6;
103
- --sp-color-info-600: #2563eb;
104
- --sp-color-info-700: #1d4ed8;
105
- --sp-color-info-800: #1e40af;
106
- --sp-color-info-900: #1e3a8a;
107
- --sp-color-indigo-500: #667eea;
108
- --sp-color-indigo-600: #5c67f2;
109
- --sp-color-violet-600: #764ba2;
110
- --sp-color-focus-primary: #3b82f6;
97
+ --sp-color-info-50: #f0f9ff;
98
+ --sp-color-info-100: #e0f2fe;
99
+ --sp-color-info-200: #bae6fd;
100
+ --sp-color-info-300: #7dd3fc;
101
+ --sp-color-info-400: #38bdf8;
102
+ --sp-color-info-500: #0ea5e9;
103
+ --sp-color-info-600: #0369a1;
104
+ --sp-color-info-700: #075985;
105
+ --sp-color-info-800: #0c4a6e;
106
+ --sp-color-info-900: #082f49;
107
+ --sp-color-indigo-500: #5b6ee1;
108
+ --sp-color-indigo-600: #4d61db;
109
+ --sp-color-violet-600: #6f3fd7;
110
+ --sp-color-focus-primary: #336df4;
111
111
  --sp-color-focus-error: #ef4444;
112
- --sp-color-focus-info: #3b82f6;
112
+ --sp-color-focus-info: #0369a1;
113
113
  --sp-color-white-0: #;
114
114
  --sp-color-white-1: f;
115
115
  --sp-color-white-2: f;
@@ -180,34 +180,34 @@
180
180
  --sp-font-2xl-line-height: 2.5rem;
181
181
  --sp-font-2xl-weight: 600;
182
182
  --sp-font-xs-letter-spacing: 0.02em;
183
- --sp-text-on-page-default: #0f172a;
184
- --sp-text-on-page-muted: #475569;
185
- --sp-text-on-page-subtle: #64748b;
186
- --sp-text-on-page-meta: #64748b;
187
- --sp-text-on-surface-default: #0f172a;
188
- --sp-text-on-surface-muted: #475569;
189
- --sp-text-on-surface-subtle: #64748b;
190
- --sp-text-on-surface-meta: #64748b;
191
- --sp-badge-neutral-bg: #f1f5f9;
192
- --sp-badge-neutral-text: #334155;
193
- --sp-badge-info-bg: #dbeafe;
194
- --sp-badge-info-text: #1d4ed8;
183
+ --sp-text-on-page-default: #141b24;
184
+ --sp-text-on-page-muted: #4b576a;
185
+ --sp-text-on-page-subtle: #657287;
186
+ --sp-text-on-page-meta: #657287;
187
+ --sp-text-on-surface-default: #141b24;
188
+ --sp-text-on-surface-muted: #4b576a;
189
+ --sp-text-on-surface-subtle: #657287;
190
+ --sp-text-on-surface-meta: #657287;
191
+ --sp-badge-neutral-bg: #eef1f6;
192
+ --sp-badge-neutral-text: #374253;
193
+ --sp-badge-info-bg: #e0f2fe;
194
+ --sp-badge-info-text: #075985;
195
195
  --sp-badge-success-bg: #dcfce7;
196
- --sp-badge-success-text: #15803d;
197
- --sp-badge-warning-bg: #fef3c7;
198
- --sp-badge-warning-text: #b45309;
196
+ --sp-badge-success-text: #166534;
197
+ --sp-badge-warning-bg: #fff1c2;
198
+ --sp-badge-warning-text: #8f5200;
199
199
  --sp-badge-danger-bg: #fee2e2;
200
- --sp-badge-danger-text: #b91c1c;
200
+ --sp-badge-danger-text: #991b1b;
201
201
  --sp-icon-box-bg: #ffffff;
202
- --sp-icon-box-border: #e2e8f0;
203
- --sp-icon-box-icon-default: #2563eb;
202
+ --sp-icon-box-border: #d9dfeb;
203
+ --sp-icon-box-icon-default: #0369a1;
204
204
  --sp-icon-box-icon-success: #16a34a;
205
- --sp-icon-box-icon-warning: #d97706;
205
+ --sp-icon-box-icon-warning: #d48806;
206
206
  --sp-icon-box-icon-danger: #dc2626;
207
207
  --sp-shadow-none: none;
208
- --sp-shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.06);
209
- --sp-shadow-md: 0 2px 6px -1px rgba(30, 41, 59, 0.08);
210
- --sp-shadow-lg: 0 6px 16px -4px rgba(30, 41, 59, 0.12);
208
+ --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
209
+ --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
210
+ --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
211
211
  --sp-breakpoint-sm: 640px;
212
212
  --sp-breakpoint-md: 768px;
213
213
  --sp-breakpoint-lg: 1024px;
@@ -243,74 +243,74 @@
243
243
  --sp-focus-ring-style: solid;
244
244
  --sp-min-touch-target: 44px;
245
245
  --sp-min-text-size: 16px;
246
- --sp-button-primary-bg: #2563eb;
247
- --sp-button-primary-bghover: #1d4ed8;
248
- --sp-button-primary-bgactive: #1e40af;
249
- --sp-button-primary-bgdisabled: #e2e8f0;
246
+ --sp-button-primary-bg: #0369a1;
247
+ --sp-button-primary-bghover: #075985;
248
+ --sp-button-primary-bgactive: #0c4a6e;
249
+ --sp-button-primary-bgdisabled: #d9dfeb;
250
250
  --sp-button-primary-text: #ffffff;
251
- --sp-button-primary-textdisabled: #94a3b8;
252
- --sp-button-primary-focusring: rgba(59, 130, 246, 0.4);
251
+ --sp-button-primary-textdisabled: #8a96ad;
252
+ --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
253
253
  --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;
261
- --sp-button-secondary-focusring: rgba(59, 130, 246, 0.4);
254
+ --sp-button-secondary-bghover: #f7f8fb;
255
+ --sp-button-secondary-bgactive: #eef1f6;
256
+ --sp-button-secondary-bgdisabled: #f7f8fb;
257
+ --sp-button-secondary-text: #075985;
258
+ --sp-button-secondary-textdisabled: #8a96ad;
259
+ --sp-button-secondary-border: #075985;
260
+ --sp-button-secondary-borderdisabled: #d9dfeb;
261
+ --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
262
262
  --sp-button-ghost-bg: transparent;
263
- --sp-button-ghost-bghover: #eff6ff;
264
- --sp-button-ghost-bgactive: #dbeafe;
263
+ --sp-button-ghost-bghover: #f0f9ff;
264
+ --sp-button-ghost-bgactive: #e0f2fe;
265
265
  --sp-button-ghost-bgdisabled: transparent;
266
- --sp-button-ghost-text: #2563eb;
267
- --sp-button-ghost-textdisabled: #94a3b8;
268
- --sp-button-ghost-focusring: rgba(59, 130, 246, 0.4);
266
+ --sp-button-ghost-text: #075985;
267
+ --sp-button-ghost-textdisabled: #8a96ad;
268
+ --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
269
269
  --sp-button-danger-bg: #dc2626;
270
270
  --sp-button-danger-bghover: #b91c1c;
271
271
  --sp-button-danger-bgactive: #991b1b;
272
272
  --sp-button-danger-bgdisabled: #fecaca;
273
273
  --sp-button-danger-text: #ffffff;
274
- --sp-button-danger-textdisabled: #94a3b8;
274
+ --sp-button-danger-textdisabled: #8a96ad;
275
275
  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
276
276
  --sp-button-success-bg: #15803d;
277
277
  --sp-button-success-bghover: #166534;
278
278
  --sp-button-success-bgactive: #14532d;
279
279
  --sp-button-success-bgdisabled: #bbf7d0;
280
280
  --sp-button-success-text: #ffffff;
281
- --sp-button-success-textdisabled: #94a3b8;
281
+ --sp-button-success-textdisabled: #8a96ad;
282
282
  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
283
- --sp-button-cta-bg: #f59e0b;
284
- --sp-button-cta-bghover: #d97706;
285
- --sp-button-cta-bgactive: #b45309;
286
- --sp-button-cta-bgdisabled: #fde68a;
287
- --sp-button-cta-text: #0f172a;
288
- --sp-button-cta-textdisabled: #94a3b8;
289
- --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
290
- --sp-button-cta-focusring: rgba(245, 158, 11, 0.4);
291
- --sp-button-accent-bg: #7c3aed;
292
- --sp-button-accent-bghover: #6d28d9;
293
- --sp-button-accent-bgactive: #5b21b6;
294
- --sp-button-accent-bgdisabled: #ddd6fe;
283
+ --sp-button-cta-bg: #1f57db;
284
+ --sp-button-cta-bghover: #1946b4;
285
+ --sp-button-cta-bgactive: #173b8f;
286
+ --sp-button-cta-bgdisabled: #b9d2ff;
287
+ --sp-button-cta-text: #ffffff;
288
+ --sp-button-cta-textdisabled: #8a96ad;
289
+ --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
290
+ --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
291
+ --sp-button-accent-bg: #7135dd;
292
+ --sp-button-accent-bghover: #5d28b8;
293
+ --sp-button-accent-bgactive: #4d2393;
294
+ --sp-button-accent-bgdisabled: #ddccff;
295
295
  --sp-button-accent-text: #ffffff;
296
- --sp-button-accent-textdisabled: #94a3b8;
297
- --sp-button-accent-focusring: rgba(139, 92, 246, 0.4);
296
+ --sp-button-accent-textdisabled: #8a96ad;
297
+ --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
298
298
  --sp-form-default-bg: #ffffff;
299
- --sp-form-default-border: #cbd5e1;
300
- --sp-form-default-text: #0f172a;
301
- --sp-form-default-placeholder: #94a3b8;
302
- --sp-form-hover-border: #3b82f6;
303
- --sp-form-focus-border: #3b82f6;
304
- --sp-form-focus-ring: #3b82f6;
299
+ --sp-form-default-border: #b7c1d4;
300
+ --sp-form-default-text: #141b24;
301
+ --sp-form-default-placeholder: #657287;
302
+ --sp-form-hover-border: #0ea5e9;
303
+ --sp-form-focus-border: #0ea5e9;
304
+ --sp-form-focus-ring: #0ea5e9;
305
305
  --sp-form-valid-border: #22c55e;
306
306
  --sp-form-valid-bg: #f0fdf4;
307
307
  --sp-form-valid-text: #15803d;
308
308
  --sp-form-invalid-border: #ef4444;
309
309
  --sp-form-invalid-bg: #fef2f2;
310
310
  --sp-form-invalid-text: #b91c1c;
311
- --sp-form-disabled-bg: #f8fafc;
312
- --sp-form-disabled-border: #e2e8f0;
313
- --sp-form-disabled-text: #94a3b8;
311
+ --sp-form-disabled-bg: #f7f8fb;
312
+ --sp-form-disabled-border: #d9dfeb;
313
+ --sp-form-disabled-text: #8a96ad;
314
314
  --sp-animation-fadein-duration: 200ms;
315
315
  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
316
316
  --sp-animation-fadein-keyframes: fade-in;
@@ -337,39 +337,39 @@
337
337
  --sp-animation-pulse-keyframes: pulse;
338
338
  }
339
339
  :root[data-spectre-theme="dark"] {
340
- --sp-surface-page: #0f172a;
341
- --sp-surface-card: #1e293b;
342
- --sp-surface-input: #334155;
343
- --sp-surface-overlay: #1e293b;
344
- --sp-surface-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
345
- --sp-text-on-page-default: #f8fafc;
346
- --sp-text-on-page-muted: #cbd5e1;
347
- --sp-text-on-page-subtle: #94a3b8;
348
- --sp-text-on-page-meta: #94a3b8;
349
- --sp-text-on-surface-default: #f1f5f9;
350
- --sp-text-on-surface-muted: #cbd5e1;
351
- --sp-text-on-surface-subtle: #94a3b8;
352
- --sp-text-on-surface-meta: #94a3b8;
353
- --sp-component-card-text: #f1f5f9;
354
- --sp-component-card-text-muted: #cbd5e1;
355
- --sp-component-input-text: #f1f5f9;
356
- --sp-component-input-placeholder: #94a3b8;
357
- --sp-button-text-default: #f1f5f9;
340
+ --sp-surface-page: #141b24;
341
+ --sp-surface-card: #222b38;
342
+ --sp-surface-input: #374253;
343
+ --sp-surface-overlay: #222b38;
344
+ --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
345
+ --sp-text-on-page-default: #f7f8fb;
346
+ --sp-text-on-page-muted: #b7c1d4;
347
+ --sp-text-on-page-subtle: #8a96ad;
348
+ --sp-text-on-page-meta: #8a96ad;
349
+ --sp-text-on-surface-default: #eef1f6;
350
+ --sp-text-on-surface-muted: #b7c1d4;
351
+ --sp-text-on-surface-subtle: #8a96ad;
352
+ --sp-text-on-surface-meta: #8a96ad;
353
+ --sp-component-card-text: #eef1f6;
354
+ --sp-component-card-text-muted: #b7c1d4;
355
+ --sp-component-input-text: #eef1f6;
356
+ --sp-component-input-placeholder: #b7c1d4;
357
+ --sp-button-text-default: #eef1f6;
358
358
  --sp-button-text-on-primary: #ffffff;
359
- --sp-badge-neutral-bg: #334155;
360
- --sp-badge-neutral-text: #f1f5f9;
361
- --sp-badge-info-bg: #1e40af;
362
- --sp-badge-info-text: #dbeafe;
359
+ --sp-badge-neutral-bg: #374253;
360
+ --sp-badge-neutral-text: #eef1f6;
361
+ --sp-badge-info-bg: #0c4a6e;
362
+ --sp-badge-info-text: #e0f2fe;
363
363
  --sp-badge-success-bg: #166534;
364
364
  --sp-badge-success-text: #dcfce7;
365
- --sp-badge-warning-bg: #92400e;
366
- --sp-badge-warning-text: #fef3c7;
365
+ --sp-badge-warning-bg: #8f5200;
366
+ --sp-badge-warning-text: #fff1c2;
367
367
  --sp-badge-danger-bg: #991b1b;
368
368
  --sp-badge-danger-text: #fee2e2;
369
- --sp-icon-box-bg: #1e293b;
370
- --sp-icon-box-border: #334155;
371
- --sp-icon-box-icon-default: #93c5fd;
369
+ --sp-icon-box-bg: #222b38;
370
+ --sp-icon-box-border: #374253;
371
+ --sp-icon-box-icon-default: #7dd3fc;
372
372
  --sp-icon-box-icon-success: #4ade80;
373
- --sp-icon-box-icon-warning: #fbbf24;
373
+ --sp-icon-box-icon-warning: #ffc21a;
374
374
  --sp-icon-box-icon-danger: #f87171;
375
375
  }