@phcdevworks/spectre-tokens 2.0.0 → 2.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 +133 -1440
  3. package/dist/index.cjs +386 -136
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +179 -169
  6. package/dist/index.d.cts +250 -14
  7. package/dist/index.d.ts +250 -14
  8. package/dist/index.js +386 -136
  9. package/dist/index.js.map +1 -1
  10. package/package.json +15 -11
  11. package/tokens/components.json +444 -105
  12. package/tokens/modes.json +558 -108
  13. package/tokens/palette.json +55 -55
  14. package/tokens/primitives.json +6 -0
  15. package/tokens/semantic-roles.json +2 -1
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: #8a96ad;
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: #eff6ff;
58
- --sp-color-accent-100: #dbeafe;
59
- --sp-color-accent-200: #ddd6fe;
60
- --sp-color-accent-300: #93c5fd;
61
- --sp-color-accent-400: #60a5fa;
62
- --sp-color-accent-500: #8b5cf6;
63
- --sp-color-accent-600: #7c3aed;
64
- --sp-color-accent-700: #6d28d9;
65
- --sp-color-accent-800: #1e40af;
66
- --sp-color-accent-900: #1e3a8a;
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;
@@ -150,6 +150,9 @@
150
150
  --sp-layout-container-padding-inline-sm: 1rem;
151
151
  --sp-layout-container-padding-inline-md: 1.5rem;
152
152
  --sp-layout-container-padding-inline-lg: 2rem;
153
+ --sp-layout-container-max-width: 72rem;
154
+ --sp-border-width-base: 1px;
155
+ --sp-border-width-thick: 2px;
153
156
  --sp-radius-none: 0;
154
157
  --sp-radius-sm: 2px;
155
158
  --sp-radius-md: 4px;
@@ -177,34 +180,34 @@
177
180
  --sp-font-2xl-line-height: 2.5rem;
178
181
  --sp-font-2xl-weight: 600;
179
182
  --sp-font-xs-letter-spacing: 0.02em;
180
- --sp-text-on-page-default: #0f172a;
181
- --sp-text-on-page-muted: #475569;
182
- --sp-text-on-page-subtle: #64748b;
183
- --sp-text-on-page-meta: #64748b;
184
- --sp-text-on-surface-default: #0f172a;
185
- --sp-text-on-surface-muted: #475569;
186
- --sp-text-on-surface-subtle: #64748b;
187
- --sp-text-on-surface-meta: #64748b;
188
- --sp-badge-neutral-bg: #f1f5f9;
189
- --sp-badge-neutral-text: #334155;
190
- --sp-badge-info-bg: #dbeafe;
191
- --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;
192
195
  --sp-badge-success-bg: #dcfce7;
193
- --sp-badge-success-text: #15803d;
194
- --sp-badge-warning-bg: #fef3c7;
195
- --sp-badge-warning-text: #b45309;
196
+ --sp-badge-success-text: #166534;
197
+ --sp-badge-warning-bg: #fff1c2;
198
+ --sp-badge-warning-text: #8f5200;
196
199
  --sp-badge-danger-bg: #fee2e2;
197
- --sp-badge-danger-text: #b91c1c;
200
+ --sp-badge-danger-text: #991b1b;
198
201
  --sp-icon-box-bg: #ffffff;
199
- --sp-icon-box-border: #e2e8f0;
200
- --sp-icon-box-icon-default: #2563eb;
202
+ --sp-icon-box-border: #d9dfeb;
203
+ --sp-icon-box-icon-default: #0369a1;
201
204
  --sp-icon-box-icon-success: #16a34a;
202
- --sp-icon-box-icon-warning: #d97706;
205
+ --sp-icon-box-icon-warning: #d48806;
203
206
  --sp-icon-box-icon-danger: #dc2626;
204
207
  --sp-shadow-none: none;
205
- --sp-shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.06);
206
- --sp-shadow-md: 0 2px 6px -1px rgba(30, 41, 59, 0.08);
207
- --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);
208
211
  --sp-breakpoint-sm: 640px;
209
212
  --sp-breakpoint-md: 768px;
210
213
  --sp-breakpoint-lg: 1024px;
@@ -240,67 +243,74 @@
240
243
  --sp-focus-ring-style: solid;
241
244
  --sp-min-touch-target: 44px;
242
245
  --sp-min-text-size: 16px;
243
- --sp-button-primary-bg: #2563eb;
244
- --sp-button-primary-bghover: #1d4ed8;
245
- --sp-button-primary-bgactive: #1e40af;
246
- --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;
247
250
  --sp-button-primary-text: #ffffff;
248
- --sp-button-primary-textdisabled: #94a3b8;
251
+ --sp-button-primary-textdisabled: #8a96ad;
252
+ --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
249
253
  --sp-button-secondary-bg: #ffffff;
250
- --sp-button-secondary-bghover: #f8fafc;
251
- --sp-button-secondary-bgactive: #f1f5f9;
252
- --sp-button-secondary-bgdisabled: #f8fafc;
253
- --sp-button-secondary-text: #2563eb;
254
- --sp-button-secondary-textdisabled: #94a3b8;
255
- --sp-button-secondary-border: #2563eb;
256
- --sp-button-secondary-borderdisabled: #e2e8f0;
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);
257
262
  --sp-button-ghost-bg: transparent;
258
- --sp-button-ghost-bghover: #eff6ff;
259
- --sp-button-ghost-bgactive: #dbeafe;
263
+ --sp-button-ghost-bghover: #f0f9ff;
264
+ --sp-button-ghost-bgactive: #e0f2fe;
260
265
  --sp-button-ghost-bgdisabled: transparent;
261
- --sp-button-ghost-text: #2563eb;
262
- --sp-button-ghost-textdisabled: #94a3b8;
266
+ --sp-button-ghost-text: #075985;
267
+ --sp-button-ghost-textdisabled: #8a96ad;
268
+ --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
263
269
  --sp-button-danger-bg: #dc2626;
264
270
  --sp-button-danger-bghover: #b91c1c;
265
271
  --sp-button-danger-bgactive: #991b1b;
266
272
  --sp-button-danger-bgdisabled: #fecaca;
267
273
  --sp-button-danger-text: #ffffff;
268
- --sp-button-danger-textdisabled: #94a3b8;
274
+ --sp-button-danger-textdisabled: #8a96ad;
275
+ --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
269
276
  --sp-button-success-bg: #15803d;
270
277
  --sp-button-success-bghover: #166534;
271
278
  --sp-button-success-bgactive: #14532d;
272
279
  --sp-button-success-bgdisabled: #bbf7d0;
273
280
  --sp-button-success-text: #ffffff;
274
- --sp-button-success-textdisabled: #94a3b8;
275
- --sp-button-cta-bg: #f59e0b;
276
- --sp-button-cta-bghover: #d97706;
277
- --sp-button-cta-bgactive: #b45309;
278
- --sp-button-cta-bgdisabled: #fde68a;
279
- --sp-button-cta-text: #0f172a;
280
- --sp-button-cta-textdisabled: #94a3b8;
281
- --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
282
- --sp-button-accent-bg: #7c3aed;
283
- --sp-button-accent-bghover: #6d28d9;
284
- --sp-button-accent-bgactive: #1e40af;
285
- --sp-button-accent-bgdisabled: #ddd6fe;
281
+ --sp-button-success-textdisabled: #8a96ad;
282
+ --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
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;
286
295
  --sp-button-accent-text: #ffffff;
287
- --sp-button-accent-textdisabled: #94a3b8;
296
+ --sp-button-accent-textdisabled: #8a96ad;
297
+ --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
288
298
  --sp-form-default-bg: #ffffff;
289
- --sp-form-default-border: #cbd5e1;
290
- --sp-form-default-text: #0f172a;
291
- --sp-form-default-placeholder: #94a3b8;
292
- --sp-form-hover-border: #3b82f6;
293
- --sp-form-focus-border: #3b82f6;
294
- --sp-form-focus-ring: #3b82f6;
299
+ --sp-form-default-border: #b7c1d4;
300
+ --sp-form-default-text: #141b24;
301
+ --sp-form-default-placeholder: #8a96ad;
302
+ --sp-form-hover-border: #0ea5e9;
303
+ --sp-form-focus-border: #0ea5e9;
304
+ --sp-form-focus-ring: #0ea5e9;
295
305
  --sp-form-valid-border: #22c55e;
296
306
  --sp-form-valid-bg: #f0fdf4;
297
307
  --sp-form-valid-text: #15803d;
298
308
  --sp-form-invalid-border: #ef4444;
299
309
  --sp-form-invalid-bg: #fef2f2;
300
310
  --sp-form-invalid-text: #b91c1c;
301
- --sp-form-disabled-bg: #f8fafc;
302
- --sp-form-disabled-border: #e2e8f0;
303
- --sp-form-disabled-text: #94a3b8;
311
+ --sp-form-disabled-bg: #f7f8fb;
312
+ --sp-form-disabled-border: #d9dfeb;
313
+ --sp-form-disabled-text: #8a96ad;
304
314
  --sp-animation-fadein-duration: 200ms;
305
315
  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
306
316
  --sp-animation-fadein-keyframes: fade-in;
@@ -327,39 +337,39 @@
327
337
  --sp-animation-pulse-keyframes: pulse;
328
338
  }
329
339
  :root[data-spectre-theme="dark"] {
330
- --sp-surface-page: #0f172a;
331
- --sp-surface-card: #1e293b;
332
- --sp-surface-input: #334155;
333
- --sp-surface-overlay: #1e293b;
334
- --sp-surface-hero: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
335
- --sp-text-on-page-default: #f8fafc;
336
- --sp-text-on-page-muted: #cbd5e1;
337
- --sp-text-on-page-subtle: #94a3b8;
338
- --sp-text-on-page-meta: #94a3b8;
339
- --sp-text-on-surface-default: #f1f5f9;
340
- --sp-text-on-surface-muted: #cbd5e1;
341
- --sp-text-on-surface-subtle: #94a3b8;
342
- --sp-text-on-surface-meta: #94a3b8;
343
- --sp-component-card-text: #f1f5f9;
344
- --sp-component-card-text-muted: #cbd5e1;
345
- --sp-component-input-text: #f1f5f9;
346
- --sp-component-input-placeholder: #94a3b8;
347
- --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: #d9dfeb;
347
+ --sp-text-on-page-subtle: #b7c1d4;
348
+ --sp-text-on-page-meta: #b7c1d4;
349
+ --sp-text-on-surface-default: #eef1f6;
350
+ --sp-text-on-surface-muted: #d9dfeb;
351
+ --sp-text-on-surface-subtle: #b7c1d4;
352
+ --sp-text-on-surface-meta: #b7c1d4;
353
+ --sp-component-card-text: #eef1f6;
354
+ --sp-component-card-text-muted: #d9dfeb;
355
+ --sp-component-input-text: #eef1f6;
356
+ --sp-component-input-placeholder: #8a96ad;
357
+ --sp-button-text-default: #eef1f6;
348
358
  --sp-button-text-on-primary: #ffffff;
349
- --sp-badge-neutral-bg: #334155;
350
- --sp-badge-neutral-text: #f1f5f9;
351
- --sp-badge-info-bg: #1e40af;
352
- --sp-badge-info-text: #dbeafe;
359
+ --sp-badge-neutral-bg: #374253;
360
+ --sp-badge-neutral-text: #eef1f6;
361
+ --sp-badge-info-bg: #082f49;
362
+ --sp-badge-info-text: #e0f2fe;
353
363
  --sp-badge-success-bg: #166534;
354
364
  --sp-badge-success-text: #dcfce7;
355
- --sp-badge-warning-bg: #92400e;
356
- --sp-badge-warning-text: #fef3c7;
365
+ --sp-badge-warning-bg: #8f5200;
366
+ --sp-badge-warning-text: #fff1c2;
357
367
  --sp-badge-danger-bg: #991b1b;
358
368
  --sp-badge-danger-text: #fee2e2;
359
- --sp-icon-box-bg: #1e293b;
360
- --sp-icon-box-border: #334155;
361
- --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;
362
372
  --sp-icon-box-icon-success: #4ade80;
363
- --sp-icon-box-icon-warning: #fbbf24;
373
+ --sp-icon-box-icon-warning: #ffc21a;
364
374
  --sp-icon-box-icon-danger: #f87171;
365
375
  }