@phcdevworks/spectre-tokens 2.2.0 → 2.4.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 +196 -23
  2. package/dist/index.cjs +68 -236
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +19 -25
  5. package/dist/index.d.cts +11 -1
  6. package/dist/index.d.ts +11 -1
  7. package/dist/index.js +68 -236
  8. package/dist/index.js.map +1 -1
  9. package/package.json +18 -11
  10. package/tokens/components.json +23 -17
  11. package/tokens/modes.json +20 -20
  12. package/tokens/primitives.json +3 -3
  13. package/tokens/typography.json +2 -1
package/dist/index.css CHANGED
@@ -3,15 +3,18 @@
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
19
  --sp-component-card-text-muted: #4b576a;
17
20
  --sp-component-input-text: #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;
@@ -217,9 +208,9 @@
217
208
  --sp-icon-box-icon-warning: #d48806;
218
209
  --sp-icon-box-icon-danger: #dc2626;
219
210
  --sp-shadow-none: none;
220
- --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
221
- --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
222
- --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
211
+ --sp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
212
+ --sp-shadow-md: 0 2px 6px -1px rgba(0, 0, 0, 0.08);
213
+ --sp-shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
223
214
  --sp-breakpoint-sm: 640px;
224
215
  --sp-breakpoint-md: 768px;
225
216
  --sp-breakpoint-lg: 1024px;
@@ -262,7 +253,7 @@
262
253
  --sp-button-primary-text: #ffffff;
263
254
  --sp-button-primary-textdisabled: #8a96ad;
264
255
  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
265
- --sp-button-primary-focusvisible: {colors.info.500} / 0.4;
256
+ --sp-button-primary-focusvisible: rgba(14, 165, 233, 0.4);
266
257
  --sp-button-secondary-bg: #ffffff;
267
258
  --sp-button-secondary-bghover: #f7f8fb;
268
259
  --sp-button-secondary-bgactive: #eef1f6;
@@ -272,7 +263,7 @@
272
263
  --sp-button-secondary-border: #075985;
273
264
  --sp-button-secondary-borderdisabled: #d9dfeb;
274
265
  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
275
- --sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
266
+ --sp-button-secondary-focusvisible: rgba(14, 165, 233, 0.4);
276
267
  --sp-button-ghost-bg: transparent;
277
268
  --sp-button-ghost-bghover: #f0f9ff;
278
269
  --sp-button-ghost-bgactive: #e0f2fe;
@@ -280,7 +271,7 @@
280
271
  --sp-button-ghost-text: #075985;
281
272
  --sp-button-ghost-textdisabled: #8a96ad;
282
273
  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
283
- --sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
274
+ --sp-button-ghost-focusvisible: rgba(14, 165, 233, 0.4);
284
275
  --sp-button-danger-bg: #dc2626;
285
276
  --sp-button-danger-bghover: #b91c1c;
286
277
  --sp-button-danger-bgactive: #991b1b;
@@ -310,7 +301,7 @@
310
301
  --sp-button-accent-text: #ffffff;
311
302
  --sp-button-accent-textdisabled: #8a96ad;
312
303
  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
313
- --sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
304
+ --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
314
305
  --sp-form-default-bg: #ffffff;
315
306
  --sp-form-default-border: #b7c1d4;
316
307
  --sp-form-default-text: #141b24;
@@ -318,8 +309,8 @@
318
309
  --sp-form-hover-border: #0ea5e9;
319
310
  --sp-form-focus-border: #0ea5e9;
320
311
  --sp-form-focus-ring: #0ea5e9;
321
- --sp-form-focusvisible-border: {colors.info.500};
322
- --sp-form-focusvisible-ring: {colors.info.500};
312
+ --sp-form-focusvisible-border: #0ea5e9;
313
+ --sp-form-focusvisible-ring: #0ea5e9;
323
314
  --sp-form-valid-border: #22c55e;
324
315
  --sp-form-valid-bg: #f0fdf4;
325
316
  --sp-form-valid-text: #15803d;
@@ -358,16 +349,19 @@
358
349
  --sp-surface-page: #141b24;
359
350
  --sp-surface-card: #222b38;
360
351
  --sp-surface-input: #374253;
361
- --sp-surface-overlay: #222b38;
362
- --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
352
+ --sp-surface-overlay: rgba(0, 0, 0, 0.6);
353
+ --sp-surface-alternate: #222b38;
354
+ --sp-surface-hero: linear-gradient(135deg, #5d28b8 0%, #401f75 100%);
363
355
  --sp-text-on-page-default: #f7f8fb;
364
356
  --sp-text-on-page-muted: #b7c1d4;
365
357
  --sp-text-on-page-subtle: #8a96ad;
366
358
  --sp-text-on-page-meta: #8a96ad;
359
+ --sp-text-on-page-brand: #5a92ff;
367
360
  --sp-text-on-surface-default: #eef1f6;
368
361
  --sp-text-on-surface-muted: #b7c1d4;
369
362
  --sp-text-on-surface-subtle: #8a96ad;
370
363
  --sp-text-on-surface-meta: #8a96ad;
364
+ --sp-text-on-surface-brand: #5a92ff;
371
365
  --sp-component-card-text: #eef1f6;
372
366
  --sp-component-card-text-muted: #b7c1d4;
373
367
  --sp-component-input-text: #eef1f6;
package/dist/index.d.cts CHANGED
@@ -649,6 +649,7 @@ interface SpectreGeneratedTokens {
649
649
  size: string;
650
650
  lineHeight: string;
651
651
  weight: number;
652
+ letterSpacing: string;
652
653
  };
653
654
  sm: {
654
655
  size: string;
@@ -799,6 +800,7 @@ interface ButtonStateTokens {
799
800
  borderDisabled?: string;
800
801
  shadow?: string;
801
802
  focusRing?: string;
803
+ focusVisible?: string;
802
804
  }
803
805
  interface FormStateTokens {
804
806
  bg?: string;
@@ -809,14 +811,19 @@ interface FormStateTokens {
809
811
  }
810
812
  interface ComponentBadgeTokens<Value = string> {
811
813
  neutralBg: Value;
814
+ neutralBgHover?: Value;
812
815
  neutralText: Value;
813
816
  infoBg: Value;
817
+ infoBgHover?: Value;
814
818
  infoText: Value;
815
819
  successBg: Value;
820
+ successBgHover?: Value;
816
821
  successText: Value;
817
822
  warningBg: Value;
823
+ warningBgHover?: Value;
818
824
  warningText: Value;
819
825
  dangerBg: Value;
826
+ dangerBgHover?: Value;
820
827
  dangerText: Value;
821
828
  }
822
829
  interface ComponentIconBoxTokens<Value = string> {
@@ -829,6 +836,7 @@ interface ComponentIconBoxTokens<Value = string> {
829
836
  }
830
837
  interface ComponentTestimonialTokens<Value = string> {
831
838
  bg: Value;
839
+ bgHover?: Value;
832
840
  border: Value;
833
841
  text: Value;
834
842
  authorName: Value;
@@ -837,6 +845,7 @@ interface ComponentTestimonialTokens<Value = string> {
837
845
  }
838
846
  interface ComponentPricingCardTokens<Value = string> {
839
847
  bg: Value;
848
+ bgHover?: Value;
840
849
  border: Value;
841
850
  featuredBg: Value;
842
851
  featuredText: Value;
@@ -887,17 +896,18 @@ interface SpectreModeTokens {
887
896
  muted: SemanticTokenValue;
888
897
  subtle: SemanticTokenValue;
889
898
  meta: SemanticTokenValue;
899
+ brand: SemanticTokenValue;
890
900
  };
891
901
  onSurface: {
892
902
  default: SemanticTokenValue;
893
903
  muted: SemanticTokenValue;
894
904
  subtle: SemanticTokenValue;
895
905
  meta: SemanticTokenValue;
906
+ brand: SemanticTokenValue;
896
907
  };
897
908
  };
898
909
  component: ComponentTokens<SemanticTokenValue>;
899
910
  }
900
-
901
911
  type SpectreTokens = SpectreGeneratedTokens;
902
912
  interface LayoutTokens {
903
913
  section: {
package/dist/index.d.ts CHANGED
@@ -649,6 +649,7 @@ interface SpectreGeneratedTokens {
649
649
  size: string;
650
650
  lineHeight: string;
651
651
  weight: number;
652
+ letterSpacing: string;
652
653
  };
653
654
  sm: {
654
655
  size: string;
@@ -799,6 +800,7 @@ interface ButtonStateTokens {
799
800
  borderDisabled?: string;
800
801
  shadow?: string;
801
802
  focusRing?: string;
803
+ focusVisible?: string;
802
804
  }
803
805
  interface FormStateTokens {
804
806
  bg?: string;
@@ -809,14 +811,19 @@ interface FormStateTokens {
809
811
  }
810
812
  interface ComponentBadgeTokens<Value = string> {
811
813
  neutralBg: Value;
814
+ neutralBgHover?: Value;
812
815
  neutralText: Value;
813
816
  infoBg: Value;
817
+ infoBgHover?: Value;
814
818
  infoText: Value;
815
819
  successBg: Value;
820
+ successBgHover?: Value;
816
821
  successText: Value;
817
822
  warningBg: Value;
823
+ warningBgHover?: Value;
818
824
  warningText: Value;
819
825
  dangerBg: Value;
826
+ dangerBgHover?: Value;
820
827
  dangerText: Value;
821
828
  }
822
829
  interface ComponentIconBoxTokens<Value = string> {
@@ -829,6 +836,7 @@ interface ComponentIconBoxTokens<Value = string> {
829
836
  }
830
837
  interface ComponentTestimonialTokens<Value = string> {
831
838
  bg: Value;
839
+ bgHover?: Value;
832
840
  border: Value;
833
841
  text: Value;
834
842
  authorName: Value;
@@ -837,6 +845,7 @@ interface ComponentTestimonialTokens<Value = string> {
837
845
  }
838
846
  interface ComponentPricingCardTokens<Value = string> {
839
847
  bg: Value;
848
+ bgHover?: Value;
840
849
  border: Value;
841
850
  featuredBg: Value;
842
851
  featuredText: Value;
@@ -887,17 +896,18 @@ interface SpectreModeTokens {
887
896
  muted: SemanticTokenValue;
888
897
  subtle: SemanticTokenValue;
889
898
  meta: SemanticTokenValue;
899
+ brand: SemanticTokenValue;
890
900
  };
891
901
  onSurface: {
892
902
  default: SemanticTokenValue;
893
903
  muted: SemanticTokenValue;
894
904
  subtle: SemanticTokenValue;
895
905
  meta: SemanticTokenValue;
906
+ brand: SemanticTokenValue;
896
907
  };
897
908
  };
898
909
  component: ComponentTokens<SemanticTokenValue>;
899
910
  }
900
-
901
911
  type SpectreTokens = SpectreGeneratedTokens;
902
912
  interface LayoutTokens {
903
913
  section: {