@phcdevworks/spectre-tokens 0.2.1 → 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 (16) hide show
  1. package/README.md +13 -17
  2. package/dist/index.cjs +1251 -602
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +105 -73
  5. package/dist/index.d.cts +1340 -87
  6. package/dist/index.d.ts +1340 -87
  7. package/dist/index.js +1251 -602
  8. package/dist/index.js.map +1 -1
  9. package/package.json +15 -4
  10. package/tokens/components.json +155 -0
  11. package/tokens/modes.json +182 -0
  12. package/tokens/palette.json +102 -0
  13. package/tokens/primitives.json +145 -0
  14. package/tokens/semantic-roles.json +64 -0
  15. package/tokens/typography.json +94 -0
  16. package/tokens/core.json +0 -714
package/dist/index.css CHANGED
@@ -2,17 +2,18 @@
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: #6b7280;
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
- --sp-component-card-text-muted: #6b7280;
16
+ --sp-component-card-text-muted: #64748b;
16
17
  --sp-component-input-text: #0f172a;
17
18
  --sp-component-input-placeholder: #94a3b8;
18
19
  --sp-button-text-default: #0f172a;
@@ -29,40 +30,40 @@
29
30
  --sp-badge-danger-text: #b91c1c;
30
31
  --sp-icon-box-bg: #ffffff;
31
32
  --sp-icon-box-border: #e2e8f0;
32
- --sp-icon-box-icon-default: #6c32e6;
33
+ --sp-icon-box-icon-default: #2563eb;
33
34
  --sp-icon-box-icon-success: #16a34a;
34
35
  --sp-icon-box-icon-warning: #d97706;
35
36
  --sp-icon-box-icon-danger: #dc2626;
36
- --sp-color-brand-50: #f5f0ff;
37
- --sp-color-brand-100: #ebe2ff;
38
- --sp-color-brand-200: #d7c6ff;
39
- --sp-color-brand-300: #bfa1ff;
40
- --sp-color-brand-400: #a37aff;
41
- --sp-color-brand-500: #8652ff;
42
- --sp-color-brand-600: #6c32e6;
43
- --sp-color-brand-700: #5626b4;
44
- --sp-color-brand-800: #3d1b7f;
45
- --sp-color-brand-900: #241147;
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;
46
47
  --sp-color-neutral-50: #f8fafc;
47
48
  --sp-color-neutral-100: #f1f5f9;
48
49
  --sp-color-neutral-200: #e2e8f0;
49
- --sp-color-neutral-300: #cbd5f5;
50
+ --sp-color-neutral-300: #cbd5e1;
50
51
  --sp-color-neutral-400: #94a3b8;
51
52
  --sp-color-neutral-500: #64748b;
52
53
  --sp-color-neutral-600: #475569;
53
54
  --sp-color-neutral-700: #334155;
54
55
  --sp-color-neutral-800: #1e293b;
55
56
  --sp-color-neutral-900: #0f172a;
56
- --sp-color-accent-50: #e5fff8;
57
- --sp-color-accent-100: #b8ffed;
58
- --sp-color-accent-200: #89ffe1;
59
- --sp-color-accent-300: #59ffd6;
60
- --sp-color-accent-400: #29ffca;
61
- --sp-color-accent-500: #03e6b3;
62
- --sp-color-accent-600: #00b389;
63
- --sp-color-accent-700: #008060;
64
- --sp-color-accent-800: #004d38;
65
- --sp-color-accent-900: #002a20;
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;
66
67
  --sp-color-success-50: #f0fdf4;
67
68
  --sp-color-success-100: #dcfce7;
68
69
  --sp-color-success-200: #bbf7d0;
@@ -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;
106
- --sp-color-focus-primary: #8652ff;
107
+ --sp-color-indigo-500: #667eea;
108
+ --sp-color-indigo-600: #5c67f2;
109
+ --sp-color-violet-600: #764ba2;
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;
@@ -137,9 +155,9 @@
137
155
  --sp-radius-md: 4px;
138
156
  --sp-radius-lg: 8px;
139
157
  --sp-radius-pill: 999px;
140
- --sp-font-family-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
141
- --sp-font-family-serif: 'Spectre Serif', 'Georgia', serif;
142
- --sp-font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
158
+ --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
159
+ --sp-font-family-serif: 'Times New Roman', Times, serif;
160
+ --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
143
161
  --sp-font-xs-size: 0.75rem;
144
162
  --sp-font-xs-line-height: 1.25rem;
145
163
  --sp-font-xs-weight: 400;
@@ -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: #6b7280;
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;
@@ -179,14 +197,14 @@
179
197
  --sp-badge-danger-text: #b91c1c;
180
198
  --sp-icon-box-bg: #ffffff;
181
199
  --sp-icon-box-border: #e2e8f0;
182
- --sp-icon-box-icon-default: #6c32e6;
200
+ --sp-icon-box-icon-default: #2563eb;
183
201
  --sp-icon-box-icon-success: #16a34a;
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.08);
188
- --sp-shadow-md: 0 3px 8px -1px rgba(15, 23, 42, 0.1);
189
- --sp-shadow-lg: 0 8px 20px -4px rgba(15, 23, 42, 0.18);
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;
@@ -210,7 +228,7 @@
210
228
  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
211
229
  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
212
230
  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
213
- --sp-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
231
+ --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
214
232
  --sp-opacity-disabled: 0.38;
215
233
  --sp-opacity-hover: 0.92;
216
234
  --sp-opacity-active: 0.84;
@@ -222,45 +240,58 @@
222
240
  --sp-focus-ring-style: solid;
223
241
  --sp-min-touch-target: 44px;
224
242
  --sp-min-text-size: 16px;
225
- --sp-button-primary-bg: #8652ff;
226
- --sp-button-primary-bghover: #6c32e6;
227
- --sp-button-primary-bgactive: #5626b4;
228
- --sp-button-primary-bgdisabled: #cbd5f5;
243
+ --sp-button-primary-bg: #2563eb;
244
+ --sp-button-primary-bghover: #1d4ed8;
245
+ --sp-button-primary-bgactive: #1e40af;
246
+ --sp-button-primary-bgdisabled: #e2e8f0;
229
247
  --sp-button-primary-text: #ffffff;
230
248
  --sp-button-primary-textdisabled: #94a3b8;
231
249
  --sp-button-secondary-bg: #ffffff;
232
- --sp-button-secondary-bghover: #f1f5f9;
233
- --sp-button-secondary-bgactive: #e2e8f0;
250
+ --sp-button-secondary-bghover: #f8fafc;
251
+ --sp-button-secondary-bgactive: #f1f5f9;
234
252
  --sp-button-secondary-bgdisabled: #f8fafc;
235
- --sp-button-secondary-text: #8652ff;
253
+ --sp-button-secondary-text: #2563eb;
236
254
  --sp-button-secondary-textdisabled: #94a3b8;
237
- --sp-button-secondary-border: #8652ff;
238
- --sp-button-secondary-borderdisabled: #cbd5f5;
255
+ --sp-button-secondary-border: #2563eb;
256
+ --sp-button-secondary-borderdisabled: #e2e8f0;
239
257
  --sp-button-ghost-bg: transparent;
240
- --sp-button-ghost-bghover: #f5f0ff;
241
- --sp-button-ghost-bgactive: #ebe2ff;
258
+ --sp-button-ghost-bghover: #eff6ff;
259
+ --sp-button-ghost-bgactive: #dbeafe;
242
260
  --sp-button-ghost-bgdisabled: transparent;
243
- --sp-button-ghost-text: #8652ff;
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;
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;
286
+ --sp-button-accent-text: #ffffff;
287
+ --sp-button-accent-textdisabled: #94a3b8;
257
288
  --sp-form-default-bg: #ffffff;
258
- --sp-form-default-border: #cbd5f5;
289
+ --sp-form-default-border: #cbd5e1;
259
290
  --sp-form-default-text: #0f172a;
260
291
  --sp-form-default-placeholder: #94a3b8;
261
- --sp-form-hover-border: #8652ff;
262
- --sp-form-focus-border: #8652ff;
263
- --sp-form-focus-ring: #8652ff;
292
+ --sp-form-hover-border: #3b82f6;
293
+ --sp-form-focus-border: #3b82f6;
294
+ --sp-form-focus-ring: #3b82f6;
264
295
  --sp-form-valid-border: #22c55e;
265
296
  --sp-form-valid-bg: #f0fdf4;
266
297
  --sp-form-valid-text: #15803d;
@@ -285,13 +316,13 @@
285
316
  --sp-animation-scalein-duration: 200ms;
286
317
  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
287
318
  --sp-animation-scalein-keyframes: scale-in;
288
- --sp-animation-bounce-duration: 500ms;
289
- --sp-animation-bounce-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
319
+ --sp-animation-bounce-duration: 300ms;
320
+ --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
290
321
  --sp-animation-bounce-keyframes: bounce;
291
- --sp-animation-shake-duration: 400ms;
322
+ --sp-animation-shake-duration: 250ms;
292
323
  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
293
324
  --sp-animation-shake-keyframes: shake;
294
- --sp-animation-pulse-duration: 1500ms;
325
+ --sp-animation-pulse-duration: 1200ms;
295
326
  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
296
327
  --sp-animation-pulse-keyframes: pulse;
297
328
  }
@@ -300,16 +331,17 @@
300
331
  --sp-surface-card: #1e293b;
301
332
  --sp-surface-input: #334155;
302
333
  --sp-surface-overlay: #1e293b;
334
+ --sp-surface-hero: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 100%);
303
335
  --sp-text-on-page-default: #f8fafc;
304
- --sp-text-on-page-muted: #cbd5f5;
336
+ --sp-text-on-page-muted: #cbd5e1;
305
337
  --sp-text-on-page-subtle: #94a3b8;
306
338
  --sp-text-on-page-meta: #94a3b8;
307
339
  --sp-text-on-surface-default: #f1f5f9;
308
- --sp-text-on-surface-muted: #cbd5f5;
340
+ --sp-text-on-surface-muted: #cbd5e1;
309
341
  --sp-text-on-surface-subtle: #94a3b8;
310
342
  --sp-text-on-surface-meta: #94a3b8;
311
343
  --sp-component-card-text: #f1f5f9;
312
- --sp-component-card-text-muted: #cbd5f5;
344
+ --sp-component-card-text-muted: #cbd5e1;
313
345
  --sp-component-input-text: #f1f5f9;
314
346
  --sp-component-input-placeholder: #94a3b8;
315
347
  --sp-button-text-default: #f1f5f9;
@@ -326,7 +358,7 @@
326
358
  --sp-badge-danger-text: #fee2e2;
327
359
  --sp-icon-box-bg: #1e293b;
328
360
  --sp-icon-box-border: #334155;
329
- --sp-icon-box-icon-default: #a37aff;
361
+ --sp-icon-box-icon-default: #93c5fd;
330
362
  --sp-icon-box-icon-success: #4ade80;
331
363
  --sp-icon-box-icon-warning: #fbbf24;
332
364
  --sp-icon-box-icon-danger: #f87171;