@phcdevworks/spectre-tokens 1.0.0 → 2.1.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 (17) hide show
  1. package/LICENSE +0 -0
  2. package/README.md +41 -24
  3. package/dist/index.cjs +1322 -811
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +63 -34
  6. package/dist/index.d.cts +1356 -86
  7. package/dist/index.d.ts +1356 -86
  8. package/dist/index.js +1322 -811
  9. package/dist/index.js.map +1 -1
  10. package/package.json +20 -4
  11. package/tokens/components.json +437 -0
  12. package/tokens/modes.json +499 -0
  13. package/tokens/palette.json +102 -0
  14. package/tokens/primitives.json +151 -0
  15. package/tokens/semantic-roles.json +65 -0
  16. package/tokens/typography.json +94 -0
  17. 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;
@@ -53,16 +54,16 @@
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: #eff6ff;
57
- --sp-color-accent-100: #dbeafe;
58
- --sp-color-accent-200: #bfdbfe;
59
- --sp-color-accent-300: #93c5fd;
60
- --sp-color-accent-400: #60a5fa;
61
- --sp-color-accent-500: #3b82f6;
62
- --sp-color-accent-600: #2563eb;
63
- --sp-color-accent-700: #1d4ed8;
64
- --sp-color-accent-800: #1e40af;
65
- --sp-color-accent-900: #1e3a8a;
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;
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;
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;
@@ -132,6 +150,9 @@
132
150
  --sp-layout-container-padding-inline-sm: 1rem;
133
151
  --sp-layout-container-padding-inline-md: 1.5rem;
134
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;
135
156
  --sp-radius-none: 0;
136
157
  --sp-radius-sm: 2px;
137
158
  --sp-radius-md: 4px;
@@ -161,12 +182,12 @@
161
182
  --sp-font-xs-letter-spacing: 0.02em;
162
183
  --sp-text-on-page-default: #0f172a;
163
184
  --sp-text-on-page-muted: #475569;
164
- --sp-text-on-page-subtle: #94a3b8;
165
- --sp-text-on-page-meta: #94a3b8;
185
+ --sp-text-on-page-subtle: #64748b;
186
+ --sp-text-on-page-meta: #64748b;
166
187
  --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;
188
+ --sp-text-on-surface-muted: #475569;
189
+ --sp-text-on-surface-subtle: #64748b;
190
+ --sp-text-on-surface-meta: #64748b;
170
191
  --sp-badge-neutral-bg: #f1f5f9;
171
192
  --sp-badge-neutral-text: #334155;
172
193
  --sp-badge-info-bg: #dbeafe;
@@ -184,9 +205,9 @@
184
205
  --sp-icon-box-icon-warning: #d97706;
185
206
  --sp-icon-box-icon-danger: #dc2626;
186
207
  --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);
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);
190
211
  --sp-breakpoint-sm: 640px;
191
212
  --sp-breakpoint-md: 768px;
192
213
  --sp-breakpoint-lg: 1024px;
@@ -228,6 +249,7 @@
228
249
  --sp-button-primary-bgdisabled: #e2e8f0;
229
250
  --sp-button-primary-text: #ffffff;
230
251
  --sp-button-primary-textdisabled: #94a3b8;
252
+ --sp-button-primary-focusring: rgba(59, 130, 246, 0.4);
231
253
  --sp-button-secondary-bg: #ffffff;
232
254
  --sp-button-secondary-bghover: #f8fafc;
233
255
  --sp-button-secondary-bgactive: #f1f5f9;
@@ -236,37 +258,43 @@
236
258
  --sp-button-secondary-textdisabled: #94a3b8;
237
259
  --sp-button-secondary-border: #2563eb;
238
260
  --sp-button-secondary-borderdisabled: #e2e8f0;
261
+ --sp-button-secondary-focusring: rgba(59, 130, 246, 0.4);
239
262
  --sp-button-ghost-bg: transparent;
240
263
  --sp-button-ghost-bghover: #eff6ff;
241
264
  --sp-button-ghost-bgactive: #dbeafe;
242
265
  --sp-button-ghost-bgdisabled: transparent;
243
266
  --sp-button-ghost-text: #2563eb;
244
267
  --sp-button-ghost-textdisabled: #94a3b8;
245
- --sp-button-danger-bg: #ef4444;
246
- --sp-button-danger-bghover: #dc2626;
247
- --sp-button-danger-bgactive: #b91c1c;
268
+ --sp-button-ghost-focusring: rgba(59, 130, 246, 0.4);
269
+ --sp-button-danger-bg: #dc2626;
270
+ --sp-button-danger-bghover: #b91c1c;
271
+ --sp-button-danger-bgactive: #991b1b;
248
272
  --sp-button-danger-bgdisabled: #fecaca;
249
273
  --sp-button-danger-text: #ffffff;
250
274
  --sp-button-danger-textdisabled: #94a3b8;
251
- --sp-button-success-bg: #22c55e;
252
- --sp-button-success-bghover: #16a34a;
253
- --sp-button-success-bgactive: #15803d;
275
+ --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
276
+ --sp-button-success-bg: #15803d;
277
+ --sp-button-success-bghover: #166534;
278
+ --sp-button-success-bgactive: #14532d;
254
279
  --sp-button-success-bgdisabled: #bbf7d0;
255
280
  --sp-button-success-text: #ffffff;
256
281
  --sp-button-success-textdisabled: #94a3b8;
282
+ --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
257
283
  --sp-button-cta-bg: #f59e0b;
258
284
  --sp-button-cta-bghover: #d97706;
259
285
  --sp-button-cta-bgactive: #b45309;
260
286
  --sp-button-cta-bgdisabled: #fde68a;
261
- --sp-button-cta-text: #ffffff;
287
+ --sp-button-cta-text: #0f172a;
262
288
  --sp-button-cta-textdisabled: #94a3b8;
263
289
  --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;
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;
267
294
  --sp-button-accent-bgdisabled: #ddd6fe;
268
295
  --sp-button-accent-text: #ffffff;
269
296
  --sp-button-accent-textdisabled: #94a3b8;
297
+ --sp-button-accent-focusring: rgba(139, 92, 246, 0.4);
270
298
  --sp-form-default-bg: #ffffff;
271
299
  --sp-form-default-border: #cbd5e1;
272
300
  --sp-form-default-text: #0f172a;
@@ -313,6 +341,7 @@
313
341
  --sp-surface-card: #1e293b;
314
342
  --sp-surface-input: #334155;
315
343
  --sp-surface-overlay: #1e293b;
344
+ --sp-surface-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
316
345
  --sp-text-on-page-default: #f8fafc;
317
346
  --sp-text-on-page-muted: #cbd5e1;
318
347
  --sp-text-on-page-subtle: #94a3b8;