@phcdevworks/spectre-tokens 1.0.0 → 2.0.0

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/dist/index.cjs +1261 -810
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +47 -28
  4. package/dist/index.d.cts +1310 -86
  5. package/dist/index.d.ts +1310 -86
  6. package/dist/index.js +1261 -810
  7. package/dist/index.js.map +1 -1
  8. package/package.json +15 -4
  9. package/tokens/components.json +155 -0
  10. package/tokens/modes.json +182 -0
  11. package/tokens/palette.json +102 -0
  12. package/tokens/primitives.json +145 -0
  13. package/tokens/semantic-roles.json +64 -0
  14. package/tokens/typography.json +94 -0
  15. package/tokens/core.json +0 -912
package/dist/index.css CHANGED
@@ -2,15 +2,16 @@
2
2
  --sp-surface-page: #f8fafc;
3
3
  --sp-surface-card: #ffffff;
4
4
  --sp-surface-input: #ffffff;
5
- --sp-surface-overlay: rgba(15,23,42,0.6);
5
+ --sp-surface-overlay: rgba(15, 23, 42, 0.6);
6
+ --sp-surface-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
6
7
  --sp-text-on-page-default: #0f172a;
7
8
  --sp-text-on-page-muted: #475569;
8
- --sp-text-on-page-subtle: #94a3b8;
9
- --sp-text-on-page-meta: #94a3b8;
9
+ --sp-text-on-page-subtle: #64748b;
10
+ --sp-text-on-page-meta: #64748b;
10
11
  --sp-text-on-surface-default: #0f172a;
11
- --sp-text-on-surface-muted: #64748b;
12
- --sp-text-on-surface-subtle: #94a3b8;
13
- --sp-text-on-surface-meta: #94a3b8;
12
+ --sp-text-on-surface-muted: #475569;
13
+ --sp-text-on-surface-subtle: #64748b;
14
+ --sp-text-on-surface-meta: #64748b;
14
15
  --sp-component-card-text: #0f172a;
15
16
  --sp-component-card-text-muted: #64748b;
16
17
  --sp-component-input-text: #0f172a;
@@ -55,12 +56,12 @@
55
56
  --sp-color-neutral-900: #0f172a;
56
57
  --sp-color-accent-50: #eff6ff;
57
58
  --sp-color-accent-100: #dbeafe;
58
- --sp-color-accent-200: #bfdbfe;
59
+ --sp-color-accent-200: #ddd6fe;
59
60
  --sp-color-accent-300: #93c5fd;
60
61
  --sp-color-accent-400: #60a5fa;
61
- --sp-color-accent-500: #3b82f6;
62
- --sp-color-accent-600: #2563eb;
63
- --sp-color-accent-700: #1d4ed8;
62
+ --sp-color-accent-500: #8b5cf6;
63
+ --sp-color-accent-600: #7c3aed;
64
+ --sp-color-accent-700: #6d28d9;
64
65
  --sp-color-accent-800: #1e40af;
65
66
  --sp-color-accent-900: #1e3a8a;
66
67
  --sp-color-success-50: #f0fdf4;
@@ -103,9 +104,26 @@
103
104
  --sp-color-info-700: #1d4ed8;
104
105
  --sp-color-info-800: #1e40af;
105
106
  --sp-color-info-900: #1e3a8a;
107
+ --sp-color-indigo-500: #667eea;
108
+ --sp-color-indigo-600: #5c67f2;
109
+ --sp-color-violet-600: #764ba2;
106
110
  --sp-color-focus-primary: #3b82f6;
107
111
  --sp-color-focus-error: #ef4444;
108
112
  --sp-color-focus-info: #3b82f6;
113
+ --sp-color-white-0: #;
114
+ --sp-color-white-1: f;
115
+ --sp-color-white-2: f;
116
+ --sp-color-white-3: f;
117
+ --sp-color-white-4: f;
118
+ --sp-color-white-5: f;
119
+ --sp-color-white-6: f;
120
+ --sp-color-black-0: #;
121
+ --sp-color-black-1: 0;
122
+ --sp-color-black-2: 0;
123
+ --sp-color-black-3: 0;
124
+ --sp-color-black-4: 0;
125
+ --sp-color-black-5: 0;
126
+ --sp-color-black-6: 0;
109
127
  --sp-space-0: 0rem;
110
128
  --sp-space-4: 0.25rem;
111
129
  --sp-space-8: 0.5rem;
@@ -161,12 +179,12 @@
161
179
  --sp-font-xs-letter-spacing: 0.02em;
162
180
  --sp-text-on-page-default: #0f172a;
163
181
  --sp-text-on-page-muted: #475569;
164
- --sp-text-on-page-subtle: #94a3b8;
165
- --sp-text-on-page-meta: #94a3b8;
182
+ --sp-text-on-page-subtle: #64748b;
183
+ --sp-text-on-page-meta: #64748b;
166
184
  --sp-text-on-surface-default: #0f172a;
167
- --sp-text-on-surface-muted: #64748b;
168
- --sp-text-on-surface-subtle: #94a3b8;
169
- --sp-text-on-surface-meta: #94a3b8;
185
+ --sp-text-on-surface-muted: #475569;
186
+ --sp-text-on-surface-subtle: #64748b;
187
+ --sp-text-on-surface-meta: #64748b;
170
188
  --sp-badge-neutral-bg: #f1f5f9;
171
189
  --sp-badge-neutral-text: #334155;
172
190
  --sp-badge-info-bg: #dbeafe;
@@ -184,9 +202,9 @@
184
202
  --sp-icon-box-icon-warning: #d97706;
185
203
  --sp-icon-box-icon-danger: #dc2626;
186
204
  --sp-shadow-none: none;
187
- --sp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
188
- --sp-shadow-md: 0 2px 6px -1px rgba(15, 23, 42, 0.08);
189
- --sp-shadow-lg: 0 6px 16px -4px rgba(15, 23, 42, 0.12);
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);
190
208
  --sp-breakpoint-sm: 640px;
191
209
  --sp-breakpoint-md: 768px;
192
210
  --sp-breakpoint-lg: 1024px;
@@ -242,15 +260,15 @@
242
260
  --sp-button-ghost-bgdisabled: transparent;
243
261
  --sp-button-ghost-text: #2563eb;
244
262
  --sp-button-ghost-textdisabled: #94a3b8;
245
- --sp-button-danger-bg: #ef4444;
246
- --sp-button-danger-bghover: #dc2626;
247
- --sp-button-danger-bgactive: #b91c1c;
263
+ --sp-button-danger-bg: #dc2626;
264
+ --sp-button-danger-bghover: #b91c1c;
265
+ --sp-button-danger-bgactive: #991b1b;
248
266
  --sp-button-danger-bgdisabled: #fecaca;
249
267
  --sp-button-danger-text: #ffffff;
250
268
  --sp-button-danger-textdisabled: #94a3b8;
251
- --sp-button-success-bg: #22c55e;
252
- --sp-button-success-bghover: #16a34a;
253
- --sp-button-success-bgactive: #15803d;
269
+ --sp-button-success-bg: #15803d;
270
+ --sp-button-success-bghover: #166534;
271
+ --sp-button-success-bgactive: #14532d;
254
272
  --sp-button-success-bgdisabled: #bbf7d0;
255
273
  --sp-button-success-text: #ffffff;
256
274
  --sp-button-success-textdisabled: #94a3b8;
@@ -258,12 +276,12 @@
258
276
  --sp-button-cta-bghover: #d97706;
259
277
  --sp-button-cta-bgactive: #b45309;
260
278
  --sp-button-cta-bgdisabled: #fde68a;
261
- --sp-button-cta-text: #ffffff;
279
+ --sp-button-cta-text: #0f172a;
262
280
  --sp-button-cta-textdisabled: #94a3b8;
263
281
  --sp-button-cta-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);
264
- --sp-button-accent-bg: #8b5cf6;
265
- --sp-button-accent-bghover: #7c3aed;
266
- --sp-button-accent-bgactive: #6d28d9;
282
+ --sp-button-accent-bg: #7c3aed;
283
+ --sp-button-accent-bghover: #6d28d9;
284
+ --sp-button-accent-bgactive: #1e40af;
267
285
  --sp-button-accent-bgdisabled: #ddd6fe;
268
286
  --sp-button-accent-text: #ffffff;
269
287
  --sp-button-accent-textdisabled: #94a3b8;
@@ -313,6 +331,7 @@
313
331
  --sp-surface-card: #1e293b;
314
332
  --sp-surface-input: #334155;
315
333
  --sp-surface-overlay: #1e293b;
334
+ --sp-surface-hero: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
316
335
  --sp-text-on-page-default: #f8fafc;
317
336
  --sp-text-on-page-muted: #cbd5e1;
318
337
  --sp-text-on-page-subtle: #94a3b8;