@phcdevworks/spectre-tokens 0.0.4 → 0.2.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 +91 -7
  2. package/dist/index.cjs +378 -38
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +86 -16
  5. package/dist/index.d.cts +81 -38
  6. package/dist/index.d.ts +81 -38
  7. package/dist/index.js +378 -38
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/tokens/core.json +215 -13
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,6 +50,43 @@ interface FormStateTokens {
45
50
  placeholder?: string;
46
51
  ring?: string;
47
52
  }
53
+ interface ComponentBadgeTokens<Value = string> {
54
+ neutralBg: Value;
55
+ neutralText: Value;
56
+ infoBg: Value;
57
+ infoText: Value;
58
+ successBg: Value;
59
+ successText: Value;
60
+ warningBg: Value;
61
+ warningText: Value;
62
+ dangerBg: Value;
63
+ dangerText: Value;
64
+ }
65
+ interface ComponentIconBoxTokens<Value = string> {
66
+ bg: Value;
67
+ border: Value;
68
+ iconDefault: Value;
69
+ iconSuccess: Value;
70
+ iconWarning: Value;
71
+ iconDanger: Value;
72
+ }
73
+ interface ComponentTokens<Value = string> {
74
+ card: {
75
+ text: Value;
76
+ textMuted: Value;
77
+ };
78
+ input: {
79
+ text: Value;
80
+ placeholder: Value;
81
+ };
82
+ button: {
83
+ textDefault: Value;
84
+ textOnPrimary: Value;
85
+ };
86
+ badge: ComponentBadgeTokens<Value>;
87
+ iconBox: ComponentIconBoxTokens<Value>;
88
+ [key: string]: any;
89
+ }
48
90
  type SpectreModeName = 'default' | 'dark';
49
91
  type SemanticTokenValue = string | {
50
92
  value: string;
@@ -62,33 +104,31 @@ interface SpectreModeTokens {
62
104
  default: SemanticTokenValue;
63
105
  muted: SemanticTokenValue;
64
106
  subtle: SemanticTokenValue;
107
+ meta: SemanticTokenValue;
65
108
  };
66
109
  onSurface: {
67
110
  default: SemanticTokenValue;
68
111
  muted: SemanticTokenValue;
69
112
  subtle: SemanticTokenValue;
113
+ meta: SemanticTokenValue;
70
114
  };
71
115
  };
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
- };
116
+ component: ComponentTokens<SemanticTokenValue>;
86
117
  }
87
118
  interface SpectreTokens {
88
119
  colors: any;
89
- spacing: any;
120
+ space: TokenScale;
121
+ layout: LayoutTokens;
90
122
  radii: any;
91
123
  typography: any;
124
+ font: {
125
+ xs: FontScaleEntry;
126
+ sm: FontScaleEntry;
127
+ md: FontScaleEntry;
128
+ lg: FontScaleEntry;
129
+ xl: FontScaleEntry;
130
+ ['2xl']: FontScaleEntry;
131
+ };
92
132
  shadows: any;
93
133
  breakpoints: any;
94
134
  zIndex: any;
@@ -108,47 +148,50 @@ interface SpectreTokens {
108
148
  };
109
149
  text: {
110
150
  onPage: {
111
- default: SemanticTokenValue;
112
- muted: SemanticTokenValue;
113
- subtle?: SemanticTokenValue;
151
+ default: string;
152
+ muted: string;
153
+ subtle: string;
154
+ meta: string;
114
155
  };
115
156
  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;
157
+ default: string;
158
+ muted: string;
159
+ subtle: string;
160
+ meta: string;
134
161
  };
135
162
  [key: string]: any;
136
163
  };
164
+ component: ComponentTokens<SemanticTokenValue>;
137
165
  modes: {
138
166
  default: Partial<SpectreModeTokens>;
139
167
  dark: Partial<SpectreModeTokens>;
140
168
  [mode: string]: Partial<SpectreModeTokens>;
141
169
  };
142
170
  }
171
+ interface LayoutTokens {
172
+ section: {
173
+ padding: TokenScale;
174
+ gap: TokenScale;
175
+ };
176
+ stack: {
177
+ gap: TokenScale;
178
+ };
179
+ container: {
180
+ paddingInline: TokenScale;
181
+ };
182
+ }
143
183
  interface Tokens {
144
184
  colors: Record<string, ColorScale>;
145
185
  opacity: TokenScale;
146
186
  accessibility: AccessibilityTokens;
147
187
  buttons: Record<string, ButtonStateTokens>;
148
188
  forms: Record<string, FormStateTokens>;
149
- spacing: TokenScale;
189
+ component: ComponentTokens;
190
+ space: TokenScale;
191
+ layout: LayoutTokens;
150
192
  radii: TokenScale;
151
193
  typography: TypographyTokens;
194
+ font: Record<string, FontScaleEntry>;
152
195
  shadows: TokenScale;
153
196
  breakpoints: TokenScale;
154
197
  zIndex: TokenScale;
@@ -185,4 +228,4 @@ declare const tailwindPreset: {
185
228
  theme: TailwindTheme;
186
229
  };
187
230
 
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 };
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 };