@phcdevworks/spectre-tokens 0.2.1 → 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 +13 -17
  2. package/dist/index.cjs +259 -61
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +71 -58
  5. package/dist/index.d.cts +30 -1
  6. package/dist/index.d.ts +30 -1
  7. package/dist/index.js +259 -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
@@ -8,11 +8,11 @@
8
8
  --sp-text-on-page-subtle: #94a3b8;
9
9
  --sp-text-on-page-meta: #94a3b8;
10
10
  --sp-text-on-surface-default: #0f172a;
11
- --sp-text-on-surface-muted: #6b7280;
11
+ --sp-text-on-surface-muted: #64748b;
12
12
  --sp-text-on-surface-subtle: #94a3b8;
13
13
  --sp-text-on-surface-meta: #94a3b8;
14
14
  --sp-component-card-text: #0f172a;
15
- --sp-component-card-text-muted: #6b7280;
15
+ --sp-component-card-text-muted: #64748b;
16
16
  --sp-component-input-text: #0f172a;
17
17
  --sp-component-input-placeholder: #94a3b8;
18
18
  --sp-button-text-default: #0f172a;
@@ -29,40 +29,40 @@
29
29
  --sp-badge-danger-text: #b91c1c;
30
30
  --sp-icon-box-bg: #ffffff;
31
31
  --sp-icon-box-border: #e2e8f0;
32
- --sp-icon-box-icon-default: #6c32e6;
32
+ --sp-icon-box-icon-default: #2563eb;
33
33
  --sp-icon-box-icon-success: #16a34a;
34
34
  --sp-icon-box-icon-warning: #d97706;
35
35
  --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;
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;
46
46
  --sp-color-neutral-50: #f8fafc;
47
47
  --sp-color-neutral-100: #f1f5f9;
48
48
  --sp-color-neutral-200: #e2e8f0;
49
- --sp-color-neutral-300: #cbd5f5;
49
+ --sp-color-neutral-300: #cbd5e1;
50
50
  --sp-color-neutral-400: #94a3b8;
51
51
  --sp-color-neutral-500: #64748b;
52
52
  --sp-color-neutral-600: #475569;
53
53
  --sp-color-neutral-700: #334155;
54
54
  --sp-color-neutral-800: #1e293b;
55
55
  --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;
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;
66
66
  --sp-color-success-50: #f0fdf4;
67
67
  --sp-color-success-100: #dcfce7;
68
68
  --sp-color-success-200: #bbf7d0;
@@ -103,7 +103,7 @@
103
103
  --sp-color-info-700: #1d4ed8;
104
104
  --sp-color-info-800: #1e40af;
105
105
  --sp-color-info-900: #1e3a8a;
106
- --sp-color-focus-primary: #8652ff;
106
+ --sp-color-focus-primary: #3b82f6;
107
107
  --sp-color-focus-error: #ef4444;
108
108
  --sp-color-focus-info: #3b82f6;
109
109
  --sp-space-0: 0rem;
@@ -137,9 +137,9 @@
137
137
  --sp-radius-md: 4px;
138
138
  --sp-radius-lg: 8px;
139
139
  --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;
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;
143
143
  --sp-font-xs-size: 0.75rem;
144
144
  --sp-font-xs-line-height: 1.25rem;
145
145
  --sp-font-xs-weight: 400;
@@ -164,7 +164,7 @@
164
164
  --sp-text-on-page-subtle: #94a3b8;
165
165
  --sp-text-on-page-meta: #94a3b8;
166
166
  --sp-text-on-surface-default: #0f172a;
167
- --sp-text-on-surface-muted: #6b7280;
167
+ --sp-text-on-surface-muted: #64748b;
168
168
  --sp-text-on-surface-subtle: #94a3b8;
169
169
  --sp-text-on-surface-meta: #94a3b8;
170
170
  --sp-badge-neutral-bg: #f1f5f9;
@@ -179,14 +179,14 @@
179
179
  --sp-badge-danger-text: #b91c1c;
180
180
  --sp-icon-box-bg: #ffffff;
181
181
  --sp-icon-box-border: #e2e8f0;
182
- --sp-icon-box-icon-default: #6c32e6;
182
+ --sp-icon-box-icon-default: #2563eb;
183
183
  --sp-icon-box-icon-success: #16a34a;
184
184
  --sp-icon-box-icon-warning: #d97706;
185
185
  --sp-icon-box-icon-danger: #dc2626;
186
186
  --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);
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);
190
190
  --sp-breakpoint-sm: 640px;
191
191
  --sp-breakpoint-md: 768px;
192
192
  --sp-breakpoint-lg: 1024px;
@@ -210,7 +210,7 @@
210
210
  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
211
211
  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
212
212
  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
213
- --sp-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
213
+ --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
214
214
  --sp-opacity-disabled: 0.38;
215
215
  --sp-opacity-hover: 0.92;
216
216
  --sp-opacity-active: 0.84;
@@ -222,25 +222,25 @@
222
222
  --sp-focus-ring-style: solid;
223
223
  --sp-min-touch-target: 44px;
224
224
  --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;
225
+ --sp-button-primary-bg: #2563eb;
226
+ --sp-button-primary-bghover: #1d4ed8;
227
+ --sp-button-primary-bgactive: #1e40af;
228
+ --sp-button-primary-bgdisabled: #e2e8f0;
229
229
  --sp-button-primary-text: #ffffff;
230
230
  --sp-button-primary-textdisabled: #94a3b8;
231
231
  --sp-button-secondary-bg: #ffffff;
232
- --sp-button-secondary-bghover: #f1f5f9;
233
- --sp-button-secondary-bgactive: #e2e8f0;
232
+ --sp-button-secondary-bghover: #f8fafc;
233
+ --sp-button-secondary-bgactive: #f1f5f9;
234
234
  --sp-button-secondary-bgdisabled: #f8fafc;
235
- --sp-button-secondary-text: #8652ff;
235
+ --sp-button-secondary-text: #2563eb;
236
236
  --sp-button-secondary-textdisabled: #94a3b8;
237
- --sp-button-secondary-border: #8652ff;
238
- --sp-button-secondary-borderdisabled: #cbd5f5;
237
+ --sp-button-secondary-border: #2563eb;
238
+ --sp-button-secondary-borderdisabled: #e2e8f0;
239
239
  --sp-button-ghost-bg: transparent;
240
- --sp-button-ghost-bghover: #f5f0ff;
241
- --sp-button-ghost-bgactive: #ebe2ff;
240
+ --sp-button-ghost-bghover: #eff6ff;
241
+ --sp-button-ghost-bgactive: #dbeafe;
242
242
  --sp-button-ghost-bgdisabled: transparent;
243
- --sp-button-ghost-text: #8652ff;
243
+ --sp-button-ghost-text: #2563eb;
244
244
  --sp-button-ghost-textdisabled: #94a3b8;
245
245
  --sp-button-danger-bg: #ef4444;
246
246
  --sp-button-danger-bghover: #dc2626;
@@ -254,13 +254,26 @@
254
254
  --sp-button-success-bgdisabled: #bbf7d0;
255
255
  --sp-button-success-text: #ffffff;
256
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;
257
270
  --sp-form-default-bg: #ffffff;
258
- --sp-form-default-border: #cbd5f5;
271
+ --sp-form-default-border: #cbd5e1;
259
272
  --sp-form-default-text: #0f172a;
260
273
  --sp-form-default-placeholder: #94a3b8;
261
- --sp-form-hover-border: #8652ff;
262
- --sp-form-focus-border: #8652ff;
263
- --sp-form-focus-ring: #8652ff;
274
+ --sp-form-hover-border: #3b82f6;
275
+ --sp-form-focus-border: #3b82f6;
276
+ --sp-form-focus-ring: #3b82f6;
264
277
  --sp-form-valid-border: #22c55e;
265
278
  --sp-form-valid-bg: #f0fdf4;
266
279
  --sp-form-valid-text: #15803d;
@@ -285,13 +298,13 @@
285
298
  --sp-animation-scalein-duration: 200ms;
286
299
  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
287
300
  --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);
301
+ --sp-animation-bounce-duration: 300ms;
302
+ --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
290
303
  --sp-animation-bounce-keyframes: bounce;
291
- --sp-animation-shake-duration: 400ms;
304
+ --sp-animation-shake-duration: 250ms;
292
305
  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
293
306
  --sp-animation-shake-keyframes: shake;
294
- --sp-animation-pulse-duration: 1500ms;
307
+ --sp-animation-pulse-duration: 1200ms;
295
308
  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
296
309
  --sp-animation-pulse-keyframes: pulse;
297
310
  }
@@ -301,15 +314,15 @@
301
314
  --sp-surface-input: #334155;
302
315
  --sp-surface-overlay: #1e293b;
303
316
  --sp-text-on-page-default: #f8fafc;
304
- --sp-text-on-page-muted: #cbd5f5;
317
+ --sp-text-on-page-muted: #cbd5e1;
305
318
  --sp-text-on-page-subtle: #94a3b8;
306
319
  --sp-text-on-page-meta: #94a3b8;
307
320
  --sp-text-on-surface-default: #f1f5f9;
308
- --sp-text-on-surface-muted: #cbd5f5;
321
+ --sp-text-on-surface-muted: #cbd5e1;
309
322
  --sp-text-on-surface-subtle: #94a3b8;
310
323
  --sp-text-on-surface-meta: #94a3b8;
311
324
  --sp-component-card-text: #f1f5f9;
312
- --sp-component-card-text-muted: #cbd5f5;
325
+ --sp-component-card-text-muted: #cbd5e1;
313
326
  --sp-component-input-text: #f1f5f9;
314
327
  --sp-component-input-placeholder: #94a3b8;
315
328
  --sp-button-text-default: #f1f5f9;
@@ -326,7 +339,7 @@
326
339
  --sp-badge-danger-text: #fee2e2;
327
340
  --sp-icon-box-bg: #1e293b;
328
341
  --sp-icon-box-border: #334155;
329
- --sp-icon-box-icon-default: #a37aff;
342
+ --sp-icon-box-icon-default: #93c5fd;
330
343
  --sp-icon-box-icon-success: #4ade80;
331
344
  --sp-icon-box-icon-warning: #fbbf24;
332
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 };