@phcdevworks/spectre-tokens 0.0.3 → 0.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 (10) hide show
  1. package/README.md +22 -0
  2. package/dist/index.cjs +589 -45
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +66 -6
  5. package/dist/index.d.cts +136 -5
  6. package/dist/index.d.ts +136 -5
  7. package/dist/index.js +589 -45
  8. package/dist/index.js.map +1 -1
  9. package/package.json +5 -6
  10. package/tokens/core.json +274 -18
package/dist/index.d.ts CHANGED
@@ -6,6 +6,11 @@ interface TypographyScaleEntry {
6
6
  fontWeight?: number;
7
7
  letterSpacing?: string;
8
8
  }
9
+ interface FontScaleEntry {
10
+ size: string;
11
+ lineHeight: string;
12
+ weight: number;
13
+ }
9
14
  interface TypographyTokens {
10
15
  families: Record<string, string>;
11
16
  scale: Record<string, TypographyScaleEntry>;
@@ -45,11 +50,78 @@ interface FormStateTokens {
45
50
  placeholder?: string;
46
51
  ring?: string;
47
52
  }
53
+ type SpectreModeName = 'default' | 'dark';
54
+ type SemanticTokenValue = string | {
55
+ value: string;
56
+ [key: string]: any;
57
+ };
58
+ interface SpectreModeTokens {
59
+ surface: {
60
+ page: SemanticTokenValue;
61
+ card: SemanticTokenValue;
62
+ input: SemanticTokenValue;
63
+ overlay: SemanticTokenValue;
64
+ };
65
+ text: {
66
+ onPage: {
67
+ default: SemanticTokenValue;
68
+ muted: SemanticTokenValue;
69
+ subtle: SemanticTokenValue;
70
+ meta: SemanticTokenValue;
71
+ };
72
+ onSurface: {
73
+ default: SemanticTokenValue;
74
+ muted: SemanticTokenValue;
75
+ subtle: SemanticTokenValue;
76
+ meta: SemanticTokenValue;
77
+ };
78
+ };
79
+ component: {
80
+ card: {
81
+ text: SemanticTokenValue;
82
+ textMuted: SemanticTokenValue;
83
+ };
84
+ input: {
85
+ text: SemanticTokenValue;
86
+ placeholder: SemanticTokenValue;
87
+ };
88
+ button: {
89
+ textDefault: SemanticTokenValue;
90
+ textOnPrimary: SemanticTokenValue;
91
+ };
92
+ badge: {
93
+ primary: {
94
+ bg: SemanticTokenValue;
95
+ text: SemanticTokenValue;
96
+ };
97
+ success: {
98
+ bg: SemanticTokenValue;
99
+ text: SemanticTokenValue;
100
+ };
101
+ warning: {
102
+ bg: SemanticTokenValue;
103
+ text: SemanticTokenValue;
104
+ };
105
+ danger: {
106
+ bg: SemanticTokenValue;
107
+ text: SemanticTokenValue;
108
+ };
109
+ };
110
+ };
111
+ }
48
112
  interface SpectreTokens {
49
113
  colors: any;
50
114
  spacing: any;
51
115
  radii: any;
52
116
  typography: any;
117
+ font: {
118
+ xs: FontScaleEntry;
119
+ sm: FontScaleEntry;
120
+ md: FontScaleEntry;
121
+ lg: FontScaleEntry;
122
+ xl: FontScaleEntry;
123
+ ['2xl']: FontScaleEntry;
124
+ };
53
125
  shadows: any;
54
126
  breakpoints: any;
55
127
  zIndex: any;
@@ -59,9 +131,67 @@ interface SpectreTokens {
59
131
  accessibility?: any;
60
132
  opacity?: any;
61
133
  animations?: any;
62
- surface?: any;
63
- text?: any;
64
- component?: any;
134
+ borders?: any;
135
+ surface: {
136
+ page: SemanticTokenValue;
137
+ card: SemanticTokenValue;
138
+ input: SemanticTokenValue;
139
+ overlay: SemanticTokenValue;
140
+ [key: string]: SemanticTokenValue;
141
+ };
142
+ text: {
143
+ onPage: {
144
+ default: string;
145
+ muted: string;
146
+ subtle: string;
147
+ meta: string;
148
+ };
149
+ onSurface: {
150
+ default: string;
151
+ muted: string;
152
+ subtle: string;
153
+ meta: string;
154
+ };
155
+ [key: string]: any;
156
+ };
157
+ component: {
158
+ card: {
159
+ text: SemanticTokenValue;
160
+ textMuted: SemanticTokenValue;
161
+ };
162
+ input: {
163
+ text: SemanticTokenValue;
164
+ placeholder: SemanticTokenValue;
165
+ };
166
+ button: {
167
+ textDefault: SemanticTokenValue;
168
+ textOnPrimary: SemanticTokenValue;
169
+ };
170
+ badge: {
171
+ primary: {
172
+ bg: string;
173
+ text: string;
174
+ };
175
+ success: {
176
+ bg: string;
177
+ text: string;
178
+ };
179
+ warning: {
180
+ bg: string;
181
+ text: string;
182
+ };
183
+ danger: {
184
+ bg: string;
185
+ text: string;
186
+ };
187
+ };
188
+ [key: string]: any;
189
+ };
190
+ modes: {
191
+ default: Partial<SpectreModeTokens>;
192
+ dark: Partial<SpectreModeTokens>;
193
+ [mode: string]: Partial<SpectreModeTokens>;
194
+ };
65
195
  }
66
196
  interface Tokens {
67
197
  colors: Record<string, ColorScale>;
@@ -72,6 +202,7 @@ interface Tokens {
72
202
  spacing: TokenScale;
73
203
  radii: TokenScale;
74
204
  typography: TypographyTokens;
205
+ font: Record<string, FontScaleEntry>;
75
206
  shadows: TokenScale;
76
207
  breakpoints: TokenScale;
77
208
  zIndex: TokenScale;
@@ -100,7 +231,7 @@ interface TailwindTheme {
100
231
  opacity: TokenScale;
101
232
  }
102
233
 
103
- declare const generateCssVariables: (tokens: Tokens, options?: CssVariableOptions) => string;
234
+ declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
104
235
 
105
236
  declare const tokens: SpectreTokens;
106
237
  declare const tailwindTheme: TailwindTheme;
@@ -108,4 +239,4 @@ declare const tailwindPreset: {
108
239
  theme: TailwindTheme;
109
240
  };
110
241
 
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 };
242
+ 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 };