@phcdevworks/spectre-tokens 2.1.2 → 2.3.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 (13) hide show
  1. package/README.md +200 -23
  2. package/dist/index.cjs +300 -1131
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +31 -19
  5. package/dist/index.d.cts +281 -1135
  6. package/dist/index.d.ts +281 -1135
  7. package/dist/index.js +300 -1131
  8. package/dist/index.js.map +1 -1
  9. package/package.json +22 -11
  10. package/tokens/components.json +41 -3
  11. package/tokens/modes.json +35 -7
  12. package/tokens/primitives.json +0 -4
  13. package/tokens/typography.json +24 -3
package/dist/index.css CHANGED
@@ -3,17 +3,20 @@
3
3
  --sp-surface-card: #ffffff;
4
4
  --sp-surface-input: #ffffff;
5
5
  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
6
+ --sp-surface-alternate: #eef1f6;
6
7
  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
7
8
  --sp-text-on-page-default: #141b24;
8
9
  --sp-text-on-page-muted: #4b576a;
9
10
  --sp-text-on-page-subtle: #657287;
10
11
  --sp-text-on-page-meta: #657287;
12
+ --sp-text-on-page-brand: #1f57db;
11
13
  --sp-text-on-surface-default: #141b24;
12
14
  --sp-text-on-surface-muted: #4b576a;
13
15
  --sp-text-on-surface-subtle: #657287;
14
16
  --sp-text-on-surface-meta: #657287;
17
+ --sp-text-on-surface-brand: #1f57db;
15
18
  --sp-component-card-text: #141b24;
16
- --sp-component-card-text-muted: #657287;
19
+ --sp-component-card-text-muted: #4b576a;
17
20
  --sp-component-input-text: #141b24;
18
21
  --sp-component-input-placeholder: #657287;
19
22
  --sp-button-text-default: #141b24;
@@ -110,20 +113,8 @@
110
113
  --sp-color-focus-primary: #336df4;
111
114
  --sp-color-focus-error: #ef4444;
112
115
  --sp-color-focus-info: #0369a1;
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;
116
+ --sp-color-white: #ffffff;
117
+ --sp-color-black: #000000;
127
118
  --sp-space-0: 0rem;
128
119
  --sp-space-4: 0.25rem;
129
120
  --sp-space-8: 0.5rem;
@@ -172,13 +163,25 @@
172
163
  --sp-font-md-weight: 500;
173
164
  --sp-font-lg-size: 1.25rem;
174
165
  --sp-font-lg-line-height: 2rem;
175
- --sp-font-lg-weight: 500;
166
+ --sp-font-lg-weight: 600;
176
167
  --sp-font-xl-size: 1.5rem;
177
168
  --sp-font-xl-line-height: 2.125rem;
178
169
  --sp-font-xl-weight: 600;
179
170
  --sp-font-2xl-size: 1.875rem;
180
171
  --sp-font-2xl-line-height: 2.5rem;
181
- --sp-font-2xl-weight: 600;
172
+ --sp-font-2xl-weight: 700;
173
+ --sp-font-3xl-size: 2.25rem;
174
+ --sp-font-3xl-line-height: 2.75rem;
175
+ --sp-font-3xl-weight: 700;
176
+ --sp-font-4xl-size: 3rem;
177
+ --sp-font-4xl-line-height: 3.5rem;
178
+ --sp-font-4xl-weight: 800;
179
+ --sp-font-5xl-size: 3.75rem;
180
+ --sp-font-5xl-line-height: 4.25rem;
181
+ --sp-font-5xl-weight: 800;
182
+ --sp-font-6xl-size: 4.5rem;
183
+ --sp-font-6xl-line-height: 5rem;
184
+ --sp-font-6xl-weight: 900;
182
185
  --sp-font-xs-letter-spacing: 0.02em;
183
186
  --sp-text-on-page-default: #141b24;
184
187
  --sp-text-on-page-muted: #4b576a;
@@ -250,6 +253,7 @@
250
253
  --sp-button-primary-text: #ffffff;
251
254
  --sp-button-primary-textdisabled: #8a96ad;
252
255
  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
256
+ --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
253
257
  --sp-button-secondary-bg: #ffffff;
254
258
  --sp-button-secondary-bghover: #f7f8fb;
255
259
  --sp-button-secondary-bgactive: #eef1f6;
@@ -259,6 +263,7 @@
259
263
  --sp-button-secondary-border: #075985;
260
264
  --sp-button-secondary-borderdisabled: #d9dfeb;
261
265
  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
266
+ --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
262
267
  --sp-button-ghost-bg: transparent;
263
268
  --sp-button-ghost-bghover: #f0f9ff;
264
269
  --sp-button-ghost-bgactive: #e0f2fe;
@@ -266,6 +271,7 @@
266
271
  --sp-button-ghost-text: #075985;
267
272
  --sp-button-ghost-textdisabled: #8a96ad;
268
273
  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
274
+ --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
269
275
  --sp-button-danger-bg: #dc2626;
270
276
  --sp-button-danger-bghover: #b91c1c;
271
277
  --sp-button-danger-bgactive: #991b1b;
@@ -295,6 +301,7 @@
295
301
  --sp-button-accent-text: #ffffff;
296
302
  --sp-button-accent-textdisabled: #8a96ad;
297
303
  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
304
+ --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
298
305
  --sp-form-default-bg: #ffffff;
299
306
  --sp-form-default-border: #b7c1d4;
300
307
  --sp-form-default-text: #141b24;
@@ -302,6 +309,8 @@
302
309
  --sp-form-hover-border: #0ea5e9;
303
310
  --sp-form-focus-border: #0ea5e9;
304
311
  --sp-form-focus-ring: #0ea5e9;
312
+ --sp-form-focusvisible-border: #0ea5e9;
313
+ --sp-form-focusvisible-ring: #0ea5e9;
305
314
  --sp-form-valid-border: #22c55e;
306
315
  --sp-form-valid-bg: #f0fdf4;
307
316
  --sp-form-valid-text: #15803d;
@@ -341,15 +350,18 @@
341
350
  --sp-surface-card: #222b38;
342
351
  --sp-surface-input: #374253;
343
352
  --sp-surface-overlay: #222b38;
344
- --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
353
+ --sp-surface-alternate: #222b38;
354
+ --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
345
355
  --sp-text-on-page-default: #f7f8fb;
346
356
  --sp-text-on-page-muted: #b7c1d4;
347
357
  --sp-text-on-page-subtle: #8a96ad;
348
358
  --sp-text-on-page-meta: #8a96ad;
359
+ --sp-text-on-page-brand: #5a92ff;
349
360
  --sp-text-on-surface-default: #eef1f6;
350
361
  --sp-text-on-surface-muted: #b7c1d4;
351
362
  --sp-text-on-surface-subtle: #8a96ad;
352
363
  --sp-text-on-surface-meta: #8a96ad;
364
+ --sp-text-on-surface-brand: #5a92ff;
353
365
  --sp-component-card-text: #eef1f6;
354
366
  --sp-component-card-text-muted: #b7c1d4;
355
367
  --sp-component-input-text: #eef1f6;
@@ -368,7 +380,7 @@
368
380
  --sp-badge-danger-text: #fee2e2;
369
381
  --sp-icon-box-bg: #222b38;
370
382
  --sp-icon-box-border: #374253;
371
- --sp-icon-box-icon-default: #7dd3fc;
383
+ --sp-icon-box-icon-default: #38bdf8;
372
384
  --sp-icon-box-icon-success: #4ade80;
373
385
  --sp-icon-box-icon-warning: #ffc21a;
374
386
  --sp-icon-box-icon-danger: #f87171;