@phcdevworks/spectre-tokens 0.0.3 → 0.0.4

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 +22 -0
  2. package/dist/index.cjs +290 -21
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +30 -0
  5. package/dist/index.d.cts +82 -5
  6. package/dist/index.d.ts +82 -5
  7. package/dist/index.js +290 -21
  8. package/dist/index.js.map +1 -1
  9. package/package.json +5 -6
  10. package/tokens/core.json +140 -16
package/dist/index.d.cts CHANGED
@@ -45,6 +45,45 @@ interface FormStateTokens {
45
45
  placeholder?: string;
46
46
  ring?: string;
47
47
  }
48
+ type SpectreModeName = 'default' | 'dark';
49
+ type SemanticTokenValue = string | {
50
+ value: string;
51
+ [key: string]: any;
52
+ };
53
+ interface SpectreModeTokens {
54
+ surface: {
55
+ page: SemanticTokenValue;
56
+ card: SemanticTokenValue;
57
+ input: SemanticTokenValue;
58
+ overlay: SemanticTokenValue;
59
+ };
60
+ text: {
61
+ onPage: {
62
+ default: SemanticTokenValue;
63
+ muted: SemanticTokenValue;
64
+ subtle: SemanticTokenValue;
65
+ };
66
+ onSurface: {
67
+ default: SemanticTokenValue;
68
+ muted: SemanticTokenValue;
69
+ subtle: SemanticTokenValue;
70
+ };
71
+ };
72
+ component: {
73
+ card: {
74
+ text: SemanticTokenValue;
75
+ textMuted: SemanticTokenValue;
76
+ };
77
+ input: {
78
+ text: SemanticTokenValue;
79
+ placeholder: SemanticTokenValue;
80
+ };
81
+ button: {
82
+ textDefault: SemanticTokenValue;
83
+ textOnPrimary: SemanticTokenValue;
84
+ };
85
+ };
86
+ }
48
87
  interface SpectreTokens {
49
88
  colors: any;
50
89
  spacing: any;
@@ -59,9 +98,47 @@ interface SpectreTokens {
59
98
  accessibility?: any;
60
99
  opacity?: any;
61
100
  animations?: any;
62
- surface?: any;
63
- text?: any;
64
- component?: any;
101
+ borders?: any;
102
+ surface: {
103
+ page: SemanticTokenValue;
104
+ card: SemanticTokenValue;
105
+ input: SemanticTokenValue;
106
+ overlay: SemanticTokenValue;
107
+ [key: string]: SemanticTokenValue;
108
+ };
109
+ text: {
110
+ onPage: {
111
+ default: SemanticTokenValue;
112
+ muted: SemanticTokenValue;
113
+ subtle?: SemanticTokenValue;
114
+ };
115
+ onSurface: {
116
+ default: SemanticTokenValue;
117
+ muted: SemanticTokenValue;
118
+ subtle?: SemanticTokenValue;
119
+ };
120
+ [key: string]: any;
121
+ };
122
+ component: {
123
+ card: {
124
+ text: SemanticTokenValue;
125
+ textMuted: SemanticTokenValue;
126
+ };
127
+ input: {
128
+ text: SemanticTokenValue;
129
+ placeholder: SemanticTokenValue;
130
+ };
131
+ button: {
132
+ textDefault: SemanticTokenValue;
133
+ textOnPrimary: SemanticTokenValue;
134
+ };
135
+ [key: string]: any;
136
+ };
137
+ modes: {
138
+ default: Partial<SpectreModeTokens>;
139
+ dark: Partial<SpectreModeTokens>;
140
+ [mode: string]: Partial<SpectreModeTokens>;
141
+ };
65
142
  }
66
143
  interface Tokens {
67
144
  colors: Record<string, ColorScale>;
@@ -100,7 +177,7 @@ interface TailwindTheme {
100
177
  opacity: TokenScale;
101
178
  }
102
179
 
103
- declare const generateCssVariables: (tokens: Tokens, options?: CssVariableOptions) => string;
180
+ declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
104
181
 
105
182
  declare const tokens: SpectreTokens;
106
183
  declare const tailwindTheme: TailwindTheme;
@@ -108,4 +185,4 @@ declare const tailwindPreset: {
108
185
  theme: TailwindTheme;
109
186
  };
110
187
 
111
- export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
188
+ export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, 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
@@ -45,6 +45,45 @@ interface FormStateTokens {
45
45
  placeholder?: string;
46
46
  ring?: string;
47
47
  }
48
+ type SpectreModeName = 'default' | 'dark';
49
+ type SemanticTokenValue = string | {
50
+ value: string;
51
+ [key: string]: any;
52
+ };
53
+ interface SpectreModeTokens {
54
+ surface: {
55
+ page: SemanticTokenValue;
56
+ card: SemanticTokenValue;
57
+ input: SemanticTokenValue;
58
+ overlay: SemanticTokenValue;
59
+ };
60
+ text: {
61
+ onPage: {
62
+ default: SemanticTokenValue;
63
+ muted: SemanticTokenValue;
64
+ subtle: SemanticTokenValue;
65
+ };
66
+ onSurface: {
67
+ default: SemanticTokenValue;
68
+ muted: SemanticTokenValue;
69
+ subtle: SemanticTokenValue;
70
+ };
71
+ };
72
+ component: {
73
+ card: {
74
+ text: SemanticTokenValue;
75
+ textMuted: SemanticTokenValue;
76
+ };
77
+ input: {
78
+ text: SemanticTokenValue;
79
+ placeholder: SemanticTokenValue;
80
+ };
81
+ button: {
82
+ textDefault: SemanticTokenValue;
83
+ textOnPrimary: SemanticTokenValue;
84
+ };
85
+ };
86
+ }
48
87
  interface SpectreTokens {
49
88
  colors: any;
50
89
  spacing: any;
@@ -59,9 +98,47 @@ interface SpectreTokens {
59
98
  accessibility?: any;
60
99
  opacity?: any;
61
100
  animations?: any;
62
- surface?: any;
63
- text?: any;
64
- component?: any;
101
+ borders?: any;
102
+ surface: {
103
+ page: SemanticTokenValue;
104
+ card: SemanticTokenValue;
105
+ input: SemanticTokenValue;
106
+ overlay: SemanticTokenValue;
107
+ [key: string]: SemanticTokenValue;
108
+ };
109
+ text: {
110
+ onPage: {
111
+ default: SemanticTokenValue;
112
+ muted: SemanticTokenValue;
113
+ subtle?: SemanticTokenValue;
114
+ };
115
+ onSurface: {
116
+ default: SemanticTokenValue;
117
+ muted: SemanticTokenValue;
118
+ subtle?: SemanticTokenValue;
119
+ };
120
+ [key: string]: any;
121
+ };
122
+ component: {
123
+ card: {
124
+ text: SemanticTokenValue;
125
+ textMuted: SemanticTokenValue;
126
+ };
127
+ input: {
128
+ text: SemanticTokenValue;
129
+ placeholder: SemanticTokenValue;
130
+ };
131
+ button: {
132
+ textDefault: SemanticTokenValue;
133
+ textOnPrimary: SemanticTokenValue;
134
+ };
135
+ [key: string]: any;
136
+ };
137
+ modes: {
138
+ default: Partial<SpectreModeTokens>;
139
+ dark: Partial<SpectreModeTokens>;
140
+ [mode: string]: Partial<SpectreModeTokens>;
141
+ };
65
142
  }
66
143
  interface Tokens {
67
144
  colors: Record<string, ColorScale>;
@@ -100,7 +177,7 @@ interface TailwindTheme {
100
177
  opacity: TokenScale;
101
178
  }
102
179
 
103
- declare const generateCssVariables: (tokens: Tokens, options?: CssVariableOptions) => string;
180
+ declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
104
181
 
105
182
  declare const tokens: SpectreTokens;
106
183
  declare const tailwindTheme: TailwindTheme;
@@ -108,4 +185,4 @@ declare const tailwindPreset: {
108
185
  theme: TailwindTheme;
109
186
  };
110
187
 
111
- export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, type SpectreTokens, type TailwindTheme, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tailwindPreset, tailwindTheme, tokens };
188
+ export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type FormStateTokens, 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.js CHANGED
@@ -93,56 +93,180 @@ var core_default = {
93
93
  },
94
94
  surface: {
95
95
  page: {
96
- value: "#0f172a",
96
+ value: "#f8fafc",
97
97
  description: "primary app background"
98
98
  },
99
99
  card: {
100
- value: "#1e293b",
100
+ value: "#ffffff",
101
101
  description: "containers and tiles"
102
102
  },
103
103
  input: {
104
- value: "#334155",
104
+ value: "#ffffff",
105
105
  description: "form inputs, textareas"
106
106
  },
107
107
  overlay: {
108
- value: "#1e293b",
108
+ value: "rgba(15,23,42,0.6)",
109
109
  description: "modals, dropdowns, flyouts"
110
110
  }
111
111
  },
112
112
  text: {
113
113
  onPage: {
114
- default: "#f8fafc",
115
- muted: "#cbd5f5",
114
+ default: "#0f172a",
115
+ muted: "#475569",
116
116
  subtle: "#94a3b8"
117
117
  },
118
118
  onSurface: {
119
- default: "#f1f5f9",
120
- muted: "#cbd5f5",
119
+ default: "#0f172a",
120
+ muted: "#6b7280",
121
121
  subtle: "#94a3b8"
122
122
  }
123
123
  },
124
124
  component: {
125
125
  card: {
126
- text: "#f1f5f9",
127
- textMuted: "#cbd5f5"
126
+ text: "#0f172a",
127
+ textMuted: "#6b7280"
128
128
  },
129
129
  input: {
130
- text: "#f1f5f9",
130
+ text: "#0f172a",
131
131
  placeholder: "#94a3b8"
132
132
  },
133
133
  button: {
134
- textDefault: "#f1f5f9",
134
+ textDefault: "#0f172a",
135
135
  textOnPrimary: "#ffffff"
136
136
  }
137
137
  },
138
138
  modes: {
139
139
  default: {
140
- surface: {},
141
- text: {}
140
+ surface: {
141
+ page: {
142
+ value: "#f8fafc"
143
+ },
144
+ card: {
145
+ value: "#ffffff"
146
+ },
147
+ input: {
148
+ value: "#ffffff"
149
+ },
150
+ overlay: {
151
+ value: "rgba(15,23,42,0.6)"
152
+ }
153
+ },
154
+ text: {
155
+ onPage: {
156
+ default: {
157
+ value: "#0f172a"
158
+ },
159
+ muted: {
160
+ value: "#475569"
161
+ },
162
+ subtle: {
163
+ value: "#94a3b8"
164
+ }
165
+ },
166
+ onSurface: {
167
+ default: {
168
+ value: "#0f172a"
169
+ },
170
+ muted: {
171
+ value: "#6b7280"
172
+ },
173
+ subtle: {
174
+ value: "#94a3b8"
175
+ }
176
+ }
177
+ },
178
+ component: {
179
+ card: {
180
+ text: {
181
+ value: "#0f172a"
182
+ },
183
+ textMuted: {
184
+ value: "#6b7280"
185
+ }
186
+ },
187
+ input: {
188
+ text: {
189
+ value: "#0f172a"
190
+ },
191
+ placeholder: {
192
+ value: "#94a3b8"
193
+ }
194
+ },
195
+ button: {
196
+ textDefault: {
197
+ value: "#0f172a"
198
+ },
199
+ textOnPrimary: {
200
+ value: "#ffffff"
201
+ }
202
+ }
203
+ }
142
204
  },
143
205
  dark: {
144
- surface: {},
145
- text: {}
206
+ surface: {
207
+ page: {
208
+ value: "#0f172a"
209
+ },
210
+ card: {
211
+ value: "#1e293b"
212
+ },
213
+ input: {
214
+ value: "#334155"
215
+ },
216
+ overlay: {
217
+ value: "#1e293b"
218
+ }
219
+ },
220
+ text: {
221
+ onPage: {
222
+ default: {
223
+ value: "#f8fafc"
224
+ },
225
+ muted: {
226
+ value: "#cbd5f5"
227
+ },
228
+ subtle: {
229
+ value: "#94a3b8"
230
+ }
231
+ },
232
+ onSurface: {
233
+ default: {
234
+ value: "#f1f5f9"
235
+ },
236
+ muted: {
237
+ value: "#cbd5f5"
238
+ },
239
+ subtle: {
240
+ value: "#94a3b8"
241
+ }
242
+ }
243
+ },
244
+ component: {
245
+ card: {
246
+ text: {
247
+ value: "#f1f5f9"
248
+ },
249
+ textMuted: {
250
+ value: "#cbd5f5"
251
+ }
252
+ },
253
+ input: {
254
+ text: {
255
+ value: "#f1f5f9"
256
+ },
257
+ placeholder: {
258
+ value: "#94a3b8"
259
+ }
260
+ },
261
+ button: {
262
+ textDefault: {
263
+ value: "#f1f5f9"
264
+ },
265
+ textOnPrimary: {
266
+ value: "#ffffff"
267
+ }
268
+ }
269
+ }
146
270
  }
147
271
  },
148
272
  opacity: {
@@ -463,13 +587,158 @@ var createCssVariableMap = (tokens2, options = {}) => {
463
587
  });
464
588
  return map;
465
589
  };
590
+ var resolveSemanticValue = (value) => {
591
+ if (typeof value === "string" || typeof value === "number") return String(value);
592
+ if (value && typeof value === "object" && "value" in value) {
593
+ return String(value.value);
594
+ }
595
+ return void 0;
596
+ };
597
+ var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
598
+ var pickSemantic = (...candidates) => {
599
+ for (const candidate of candidates) {
600
+ const resolved = resolveSemanticValue(candidate);
601
+ if (resolved !== void 0) return resolved;
602
+ }
603
+ return void 0;
604
+ };
466
605
  var generateCssVariables = (tokens2, options = {}) => {
467
606
  const selector = options.selector ?? DEFAULT_SELECTOR;
468
- const declarations = createCssVariableMap(tokens2, options);
469
- const lines = Object.entries(declarations).map(([name, value]) => ` ${name}: ${value};`).join("\n");
470
- return `${selector} {
471
- ${lines}
472
- }
607
+ const prefix = options.prefix ?? DEFAULT_PREFIX;
608
+ const declarations = createCssVariableMap(tokens2, { ...options, prefix });
609
+ const mapLines = Object.entries(declarations).map(([name, value]) => ` ${name}: ${value};`);
610
+ const defaultMode = tokens2.modes?.default ?? {};
611
+ const darkMode = tokens2.modes?.dark ?? {};
612
+ const surfaceAliases = tokens2.surface ?? {};
613
+ const textAliases = tokens2.text ?? {};
614
+ const componentAliases = tokens2.component ?? {};
615
+ const baseLines = [];
616
+ const addBase = (name, value) => {
617
+ if (value !== void 0) baseLines.push(` ${name}: ${value};`);
618
+ };
619
+ addBase(toVariableName(prefix, "surface", "page"), pickSemantic(getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
620
+ addBase(toVariableName(prefix, "surface", "card"), pickSemantic(getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
621
+ addBase(toVariableName(prefix, "surface", "input"), pickSemantic(getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
622
+ addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
623
+ addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
624
+ addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
625
+ addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
626
+ addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
627
+ addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
628
+ addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
629
+ addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
630
+ addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
631
+ addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
632
+ addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
633
+ const rootLines = [...baseLines, ...mapLines];
634
+ const darkLines = [];
635
+ const addDark = (name, value) => {
636
+ if (value !== void 0) darkLines.push(` ${name}: ${value};`);
637
+ };
638
+ addDark(
639
+ toVariableName(prefix, "surface", "page"),
640
+ pickSemantic(getPath(darkMode, ["surface", "page"]), getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"]))
641
+ );
642
+ addDark(
643
+ toVariableName(prefix, "surface", "card"),
644
+ pickSemantic(getPath(darkMode, ["surface", "card"]), getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"]))
645
+ );
646
+ addDark(
647
+ toVariableName(prefix, "surface", "input"),
648
+ pickSemantic(getPath(darkMode, ["surface", "input"]), getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"]))
649
+ );
650
+ addDark(
651
+ toVariableName(prefix, "surface", "overlay"),
652
+ pickSemantic(getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
653
+ );
654
+ addDark(
655
+ toVariableName(prefix, "text", "on", "page", "default"),
656
+ pickSemantic(
657
+ getPath(darkMode, ["text", "onPage", "default"]),
658
+ getPath(defaultMode, ["text", "onPage", "default"]),
659
+ getPath(textAliases, ["onPage", "default"])
660
+ )
661
+ );
662
+ addDark(
663
+ toVariableName(prefix, "text", "on", "page", "muted"),
664
+ pickSemantic(
665
+ getPath(darkMode, ["text", "onPage", "muted"]),
666
+ getPath(defaultMode, ["text", "onPage", "muted"]),
667
+ getPath(textAliases, ["onPage", "muted"])
668
+ )
669
+ );
670
+ addDark(
671
+ toVariableName(prefix, "text", "on", "surface", "default"),
672
+ pickSemantic(
673
+ getPath(darkMode, ["text", "onSurface", "default"]),
674
+ getPath(defaultMode, ["text", "onSurface", "default"]),
675
+ getPath(textAliases, ["onSurface", "default"])
676
+ )
677
+ );
678
+ addDark(
679
+ toVariableName(prefix, "text", "on", "surface", "muted"),
680
+ pickSemantic(
681
+ getPath(darkMode, ["text", "onSurface", "muted"]),
682
+ getPath(defaultMode, ["text", "onSurface", "muted"]),
683
+ getPath(textAliases, ["onSurface", "muted"])
684
+ )
685
+ );
686
+ addDark(
687
+ toVariableName(prefix, "component", "card", "text"),
688
+ pickSemantic(
689
+ getPath(darkMode, ["component", "card", "text"]),
690
+ getPath(defaultMode, ["component", "card", "text"]),
691
+ getPath(componentAliases, ["card", "text"])
692
+ )
693
+ );
694
+ addDark(
695
+ toVariableName(prefix, "component", "card", "text-muted"),
696
+ pickSemantic(
697
+ getPath(darkMode, ["component", "card", "textMuted"]),
698
+ getPath(defaultMode, ["component", "card", "textMuted"]),
699
+ getPath(componentAliases, ["card", "textMuted"])
700
+ )
701
+ );
702
+ addDark(
703
+ toVariableName(prefix, "component", "input", "text"),
704
+ pickSemantic(
705
+ getPath(darkMode, ["component", "input", "text"]),
706
+ getPath(defaultMode, ["component", "input", "text"]),
707
+ getPath(componentAliases, ["input", "text"])
708
+ )
709
+ );
710
+ addDark(
711
+ toVariableName(prefix, "component", "input", "placeholder"),
712
+ pickSemantic(
713
+ getPath(darkMode, ["component", "input", "placeholder"]),
714
+ getPath(defaultMode, ["component", "input", "placeholder"]),
715
+ getPath(componentAliases, ["input", "placeholder"])
716
+ )
717
+ );
718
+ addDark(
719
+ toVariableName(prefix, "button", "text", "default"),
720
+ pickSemantic(
721
+ getPath(darkMode, ["component", "button", "textDefault"]),
722
+ getPath(defaultMode, ["component", "button", "textDefault"]),
723
+ getPath(componentAliases, ["button", "textDefault"])
724
+ )
725
+ );
726
+ addDark(
727
+ toVariableName(prefix, "button", "text", "on", "primary"),
728
+ pickSemantic(
729
+ getPath(darkMode, ["component", "button", "textOnPrimary"]),
730
+ getPath(defaultMode, ["component", "button", "textOnPrimary"]),
731
+ getPath(componentAliases, ["button", "textOnPrimary"])
732
+ )
733
+ );
734
+ const rootBlock = `${selector} {
735
+ ${rootLines.join("\n")}
736
+ }`;
737
+ const darkBlock = `${selector}[data-spectre-theme="dark"] {
738
+ ${darkLines.join("\n")}
739
+ }`;
740
+ return `${rootBlock}
741
+ ${darkBlock}
473
742
  `;
474
743
  };
475
744