@phcdevworks/spectre-tokens 0.2.0 → 1.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 (10) hide show
  1. package/README.md +1232 -71
  2. package/dist/index.cjs +280 -61
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +78 -58
  5. package/dist/index.d.cts +30 -1
  6. package/dist/index.d.ts +30 -1
  7. package/dist/index.js +280 -61
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/tokens/core.json +259 -61
package/dist/index.css CHANGED
@@ -5,12 +5,14 @@
5
5
  --sp-surface-overlay: rgba(15,23,42,0.6);
6
6
  --sp-text-on-page-default: #0f172a;
7
7
  --sp-text-on-page-muted: #475569;
8
+ --sp-text-on-page-subtle: #94a3b8;
8
9
  --sp-text-on-page-meta: #94a3b8;
9
10
  --sp-text-on-surface-default: #0f172a;
10
- --sp-text-on-surface-muted: #6b7280;
11
+ --sp-text-on-surface-muted: #64748b;
12
+ --sp-text-on-surface-subtle: #94a3b8;
11
13
  --sp-text-on-surface-meta: #94a3b8;
12
14
  --sp-component-card-text: #0f172a;
13
- --sp-component-card-text-muted: #6b7280;
15
+ --sp-component-card-text-muted: #64748b;
14
16
  --sp-component-input-text: #0f172a;
15
17
  --sp-component-input-placeholder: #94a3b8;
16
18
  --sp-button-text-default: #0f172a;
@@ -27,40 +29,40 @@
27
29
  --sp-badge-danger-text: #b91c1c;
28
30
  --sp-icon-box-bg: #ffffff;
29
31
  --sp-icon-box-border: #e2e8f0;
30
- --sp-icon-box-icon-default: #6c32e6;
32
+ --sp-icon-box-icon-default: #2563eb;
31
33
  --sp-icon-box-icon-success: #16a34a;
32
34
  --sp-icon-box-icon-warning: #d97706;
33
35
  --sp-icon-box-icon-danger: #dc2626;
34
- --sp-color-brand-50: #f5f0ff;
35
- --sp-color-brand-100: #ebe2ff;
36
- --sp-color-brand-200: #d7c6ff;
37
- --sp-color-brand-300: #bfa1ff;
38
- --sp-color-brand-400: #a37aff;
39
- --sp-color-brand-500: #8652ff;
40
- --sp-color-brand-600: #6c32e6;
41
- --sp-color-brand-700: #5626b4;
42
- --sp-color-brand-800: #3d1b7f;
43
- --sp-color-brand-900: #241147;
36
+ --sp-color-brand-50: #eff6ff;
37
+ --sp-color-brand-100: #dbeafe;
38
+ --sp-color-brand-200: #bfdbfe;
39
+ --sp-color-brand-300: #93c5fd;
40
+ --sp-color-brand-400: #60a5fa;
41
+ --sp-color-brand-500: #3b82f6;
42
+ --sp-color-brand-600: #2563eb;
43
+ --sp-color-brand-700: #1d4ed8;
44
+ --sp-color-brand-800: #1e40af;
45
+ --sp-color-brand-900: #1e3a8a;
44
46
  --sp-color-neutral-50: #f8fafc;
45
47
  --sp-color-neutral-100: #f1f5f9;
46
48
  --sp-color-neutral-200: #e2e8f0;
47
- --sp-color-neutral-300: #cbd5f5;
49
+ --sp-color-neutral-300: #cbd5e1;
48
50
  --sp-color-neutral-400: #94a3b8;
49
51
  --sp-color-neutral-500: #64748b;
50
52
  --sp-color-neutral-600: #475569;
51
53
  --sp-color-neutral-700: #334155;
52
54
  --sp-color-neutral-800: #1e293b;
53
55
  --sp-color-neutral-900: #0f172a;
54
- --sp-color-accent-50: #e5fff8;
55
- --sp-color-accent-100: #b8ffed;
56
- --sp-color-accent-200: #89ffe1;
57
- --sp-color-accent-300: #59ffd6;
58
- --sp-color-accent-400: #29ffca;
59
- --sp-color-accent-500: #03e6b3;
60
- --sp-color-accent-600: #00b389;
61
- --sp-color-accent-700: #008060;
62
- --sp-color-accent-800: #004d38;
63
- --sp-color-accent-900: #002a20;
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;
64
66
  --sp-color-success-50: #f0fdf4;
65
67
  --sp-color-success-100: #dcfce7;
66
68
  --sp-color-success-200: #bbf7d0;
@@ -101,7 +103,7 @@
101
103
  --sp-color-info-700: #1d4ed8;
102
104
  --sp-color-info-800: #1e40af;
103
105
  --sp-color-info-900: #1e3a8a;
104
- --sp-color-focus-primary: #8652ff;
106
+ --sp-color-focus-primary: #3b82f6;
105
107
  --sp-color-focus-error: #ef4444;
106
108
  --sp-color-focus-info: #3b82f6;
107
109
  --sp-space-0: 0rem;
@@ -135,9 +137,9 @@
135
137
  --sp-radius-md: 4px;
136
138
  --sp-radius-lg: 8px;
137
139
  --sp-radius-pill: 999px;
138
- --sp-font-family-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
139
- --sp-font-family-serif: 'Spectre Serif', 'Georgia', serif;
140
- --sp-font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
140
+ --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
141
+ --sp-font-family-serif: 'Times New Roman', Times, serif;
142
+ --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
141
143
  --sp-font-xs-size: 0.75rem;
142
144
  --sp-font-xs-line-height: 1.25rem;
143
145
  --sp-font-xs-weight: 400;
@@ -159,8 +161,11 @@
159
161
  --sp-font-xs-letter-spacing: 0.02em;
160
162
  --sp-text-on-page-default: #0f172a;
161
163
  --sp-text-on-page-muted: #475569;
164
+ --sp-text-on-page-subtle: #94a3b8;
165
+ --sp-text-on-page-meta: #94a3b8;
162
166
  --sp-text-on-surface-default: #0f172a;
163
- --sp-text-on-surface-muted: #6b7280;
167
+ --sp-text-on-surface-muted: #64748b;
168
+ --sp-text-on-surface-subtle: #94a3b8;
164
169
  --sp-text-on-surface-meta: #94a3b8;
165
170
  --sp-badge-neutral-bg: #f1f5f9;
166
171
  --sp-badge-neutral-text: #334155;
@@ -174,14 +179,14 @@
174
179
  --sp-badge-danger-text: #b91c1c;
175
180
  --sp-icon-box-bg: #ffffff;
176
181
  --sp-icon-box-border: #e2e8f0;
177
- --sp-icon-box-icon-default: #6c32e6;
182
+ --sp-icon-box-icon-default: #2563eb;
178
183
  --sp-icon-box-icon-success: #16a34a;
179
184
  --sp-icon-box-icon-warning: #d97706;
180
185
  --sp-icon-box-icon-danger: #dc2626;
181
186
  --sp-shadow-none: none;
182
- --sp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
183
- --sp-shadow-md: 0 3px 8px -1px rgba(15, 23, 42, 0.1);
184
- --sp-shadow-lg: 0 8px 20px -4px rgba(15, 23, 42, 0.18);
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);
185
190
  --sp-breakpoint-sm: 640px;
186
191
  --sp-breakpoint-md: 768px;
187
192
  --sp-breakpoint-lg: 1024px;
@@ -205,7 +210,7 @@
205
210
  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
206
211
  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
207
212
  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
208
- --sp-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
213
+ --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
209
214
  --sp-opacity-disabled: 0.38;
210
215
  --sp-opacity-hover: 0.92;
211
216
  --sp-opacity-active: 0.84;
@@ -217,25 +222,25 @@
217
222
  --sp-focus-ring-style: solid;
218
223
  --sp-min-touch-target: 44px;
219
224
  --sp-min-text-size: 16px;
220
- --sp-button-primary-bg: #8652ff;
221
- --sp-button-primary-bghover: #6c32e6;
222
- --sp-button-primary-bgactive: #5626b4;
223
- --sp-button-primary-bgdisabled: #cbd5f5;
225
+ --sp-button-primary-bg: #2563eb;
226
+ --sp-button-primary-bghover: #1d4ed8;
227
+ --sp-button-primary-bgactive: #1e40af;
228
+ --sp-button-primary-bgdisabled: #e2e8f0;
224
229
  --sp-button-primary-text: #ffffff;
225
230
  --sp-button-primary-textdisabled: #94a3b8;
226
231
  --sp-button-secondary-bg: #ffffff;
227
- --sp-button-secondary-bghover: #f1f5f9;
228
- --sp-button-secondary-bgactive: #e2e8f0;
232
+ --sp-button-secondary-bghover: #f8fafc;
233
+ --sp-button-secondary-bgactive: #f1f5f9;
229
234
  --sp-button-secondary-bgdisabled: #f8fafc;
230
- --sp-button-secondary-text: #8652ff;
235
+ --sp-button-secondary-text: #2563eb;
231
236
  --sp-button-secondary-textdisabled: #94a3b8;
232
- --sp-button-secondary-border: #8652ff;
233
- --sp-button-secondary-borderdisabled: #cbd5f5;
237
+ --sp-button-secondary-border: #2563eb;
238
+ --sp-button-secondary-borderdisabled: #e2e8f0;
234
239
  --sp-button-ghost-bg: transparent;
235
- --sp-button-ghost-bghover: #f5f0ff;
236
- --sp-button-ghost-bgactive: #ebe2ff;
240
+ --sp-button-ghost-bghover: #eff6ff;
241
+ --sp-button-ghost-bgactive: #dbeafe;
237
242
  --sp-button-ghost-bgdisabled: transparent;
238
- --sp-button-ghost-text: #8652ff;
243
+ --sp-button-ghost-text: #2563eb;
239
244
  --sp-button-ghost-textdisabled: #94a3b8;
240
245
  --sp-button-danger-bg: #ef4444;
241
246
  --sp-button-danger-bghover: #dc2626;
@@ -249,13 +254,26 @@
249
254
  --sp-button-success-bgdisabled: #bbf7d0;
250
255
  --sp-button-success-text: #ffffff;
251
256
  --sp-button-success-textdisabled: #94a3b8;
257
+ --sp-button-cta-bg: #f59e0b;
258
+ --sp-button-cta-bghover: #d97706;
259
+ --sp-button-cta-bgactive: #b45309;
260
+ --sp-button-cta-bgdisabled: #fde68a;
261
+ --sp-button-cta-text: #ffffff;
262
+ --sp-button-cta-textdisabled: #94a3b8;
263
+ --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;
267
+ --sp-button-accent-bgdisabled: #ddd6fe;
268
+ --sp-button-accent-text: #ffffff;
269
+ --sp-button-accent-textdisabled: #94a3b8;
252
270
  --sp-form-default-bg: #ffffff;
253
- --sp-form-default-border: #cbd5f5;
271
+ --sp-form-default-border: #cbd5e1;
254
272
  --sp-form-default-text: #0f172a;
255
273
  --sp-form-default-placeholder: #94a3b8;
256
- --sp-form-hover-border: #8652ff;
257
- --sp-form-focus-border: #8652ff;
258
- --sp-form-focus-ring: #8652ff;
274
+ --sp-form-hover-border: #3b82f6;
275
+ --sp-form-focus-border: #3b82f6;
276
+ --sp-form-focus-ring: #3b82f6;
259
277
  --sp-form-valid-border: #22c55e;
260
278
  --sp-form-valid-bg: #f0fdf4;
261
279
  --sp-form-valid-text: #15803d;
@@ -280,13 +298,13 @@
280
298
  --sp-animation-scalein-duration: 200ms;
281
299
  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
282
300
  --sp-animation-scalein-keyframes: scale-in;
283
- --sp-animation-bounce-duration: 500ms;
284
- --sp-animation-bounce-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
301
+ --sp-animation-bounce-duration: 300ms;
302
+ --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
285
303
  --sp-animation-bounce-keyframes: bounce;
286
- --sp-animation-shake-duration: 400ms;
304
+ --sp-animation-shake-duration: 250ms;
287
305
  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
288
306
  --sp-animation-shake-keyframes: shake;
289
- --sp-animation-pulse-duration: 1500ms;
307
+ --sp-animation-pulse-duration: 1200ms;
290
308
  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
291
309
  --sp-animation-pulse-keyframes: pulse;
292
310
  }
@@ -296,13 +314,15 @@
296
314
  --sp-surface-input: #334155;
297
315
  --sp-surface-overlay: #1e293b;
298
316
  --sp-text-on-page-default: #f8fafc;
299
- --sp-text-on-page-muted: #cbd5f5;
317
+ --sp-text-on-page-muted: #cbd5e1;
318
+ --sp-text-on-page-subtle: #94a3b8;
300
319
  --sp-text-on-page-meta: #94a3b8;
301
320
  --sp-text-on-surface-default: #f1f5f9;
302
- --sp-text-on-surface-muted: #cbd5f5;
321
+ --sp-text-on-surface-muted: #cbd5e1;
322
+ --sp-text-on-surface-subtle: #94a3b8;
303
323
  --sp-text-on-surface-meta: #94a3b8;
304
324
  --sp-component-card-text: #f1f5f9;
305
- --sp-component-card-text-muted: #cbd5f5;
325
+ --sp-component-card-text-muted: #cbd5e1;
306
326
  --sp-component-input-text: #f1f5f9;
307
327
  --sp-component-input-placeholder: #94a3b8;
308
328
  --sp-button-text-default: #f1f5f9;
@@ -319,7 +339,7 @@
319
339
  --sp-badge-danger-text: #fee2e2;
320
340
  --sp-icon-box-bg: #1e293b;
321
341
  --sp-icon-box-border: #334155;
322
- --sp-icon-box-icon-default: #a37aff;
342
+ --sp-icon-box-icon-default: #93c5fd;
323
343
  --sp-icon-box-icon-success: #4ade80;
324
344
  --sp-icon-box-icon-warning: #fbbf24;
325
345
  --sp-icon-box-icon-danger: #f87171;
package/dist/index.d.cts CHANGED
@@ -42,6 +42,7 @@ interface ButtonStateTokens {
42
42
  textDisabled: string;
43
43
  border?: string;
44
44
  borderDisabled?: string;
45
+ shadow?: string;
45
46
  }
46
47
  interface FormStateTokens {
47
48
  bg?: string;
@@ -70,6 +71,29 @@ interface ComponentIconBoxTokens<Value = string> {
70
71
  iconWarning: Value;
71
72
  iconDanger: Value;
72
73
  }
74
+ interface ComponentTestimonialTokens<Value = string> {
75
+ bg: Value;
76
+ border: Value;
77
+ text: Value;
78
+ authorName: Value;
79
+ authorTitle: Value;
80
+ quoteMark: Value;
81
+ }
82
+ interface ComponentPricingCardTokens<Value = string> {
83
+ bg: Value;
84
+ border: Value;
85
+ featuredBg: Value;
86
+ featuredText: Value;
87
+ featuredBadgeBg: Value;
88
+ featuredBadgeText: Value;
89
+ price: Value;
90
+ priceDescription: Value;
91
+ }
92
+ interface ComponentRatingTokens<Value = string> {
93
+ starFilled: Value;
94
+ starEmpty: Value;
95
+ text: Value;
96
+ }
73
97
  interface ComponentTokens<Value = string> {
74
98
  card: {
75
99
  text: Value;
@@ -85,6 +109,9 @@ interface ComponentTokens<Value = string> {
85
109
  };
86
110
  badge: ComponentBadgeTokens<Value>;
87
111
  iconBox: ComponentIconBoxTokens<Value>;
112
+ testimonial: ComponentTestimonialTokens<Value>;
113
+ pricingCard: ComponentPricingCardTokens<Value>;
114
+ rating: ComponentRatingTokens<Value>;
88
115
  [key: string]: any;
89
116
  }
90
117
  type SpectreModeName = 'default' | 'dark';
@@ -98,6 +125,8 @@ interface SpectreModeTokens {
98
125
  card: SemanticTokenValue;
99
126
  input: SemanticTokenValue;
100
127
  overlay: SemanticTokenValue;
128
+ alternate: SemanticTokenValue;
129
+ hero: SemanticTokenValue;
101
130
  };
102
131
  text: {
103
132
  onPage: {
@@ -228,4 +257,4 @@ declare const tailwindPreset: {
228
257
  theme: TailwindTheme;
229
258
  };
230
259
 
231
- export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
260
+ export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
package/dist/index.d.ts CHANGED
@@ -42,6 +42,7 @@ interface ButtonStateTokens {
42
42
  textDisabled: string;
43
43
  border?: string;
44
44
  borderDisabled?: string;
45
+ shadow?: string;
45
46
  }
46
47
  interface FormStateTokens {
47
48
  bg?: string;
@@ -70,6 +71,29 @@ interface ComponentIconBoxTokens<Value = string> {
70
71
  iconWarning: Value;
71
72
  iconDanger: Value;
72
73
  }
74
+ interface ComponentTestimonialTokens<Value = string> {
75
+ bg: Value;
76
+ border: Value;
77
+ text: Value;
78
+ authorName: Value;
79
+ authorTitle: Value;
80
+ quoteMark: Value;
81
+ }
82
+ interface ComponentPricingCardTokens<Value = string> {
83
+ bg: Value;
84
+ border: Value;
85
+ featuredBg: Value;
86
+ featuredText: Value;
87
+ featuredBadgeBg: Value;
88
+ featuredBadgeText: Value;
89
+ price: Value;
90
+ priceDescription: Value;
91
+ }
92
+ interface ComponentRatingTokens<Value = string> {
93
+ starFilled: Value;
94
+ starEmpty: Value;
95
+ text: Value;
96
+ }
73
97
  interface ComponentTokens<Value = string> {
74
98
  card: {
75
99
  text: Value;
@@ -85,6 +109,9 @@ interface ComponentTokens<Value = string> {
85
109
  };
86
110
  badge: ComponentBadgeTokens<Value>;
87
111
  iconBox: ComponentIconBoxTokens<Value>;
112
+ testimonial: ComponentTestimonialTokens<Value>;
113
+ pricingCard: ComponentPricingCardTokens<Value>;
114
+ rating: ComponentRatingTokens<Value>;
88
115
  [key: string]: any;
89
116
  }
90
117
  type SpectreModeName = 'default' | 'dark';
@@ -98,6 +125,8 @@ interface SpectreModeTokens {
98
125
  card: SemanticTokenValue;
99
126
  input: SemanticTokenValue;
100
127
  overlay: SemanticTokenValue;
128
+ alternate: SemanticTokenValue;
129
+ hero: SemanticTokenValue;
101
130
  };
102
131
  text: {
103
132
  onPage: {
@@ -228,4 +257,4 @@ declare const tailwindPreset: {
228
257
  theme: TailwindTheme;
229
258
  };
230
259
 
231
- export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
260
+ export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };