@phcdevworks/spectre-tokens 0.1.0 → 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.
- package/README.md +91 -7
- package/dist/index.cjs +256 -191
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +74 -34
- package/dist/index.d.cts +57 -68
- package/dist/index.d.ts +57 -68
- package/dist/index.js +256 -191
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/tokens/core.json +159 -89
package/dist/index.d.cts
CHANGED
|
@@ -50,6 +50,43 @@ interface FormStateTokens {
|
|
|
50
50
|
placeholder?: string;
|
|
51
51
|
ring?: string;
|
|
52
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
|
+
}
|
|
53
90
|
type SpectreModeName = 'default' | 'dark';
|
|
54
91
|
type SemanticTokenValue = string | {
|
|
55
92
|
value: string;
|
|
@@ -76,42 +113,12 @@ interface SpectreModeTokens {
|
|
|
76
113
|
meta: SemanticTokenValue;
|
|
77
114
|
};
|
|
78
115
|
};
|
|
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
|
-
};
|
|
116
|
+
component: ComponentTokens<SemanticTokenValue>;
|
|
111
117
|
}
|
|
112
118
|
interface SpectreTokens {
|
|
113
119
|
colors: any;
|
|
114
|
-
|
|
120
|
+
space: TokenScale;
|
|
121
|
+
layout: LayoutTokens;
|
|
115
122
|
radii: any;
|
|
116
123
|
typography: any;
|
|
117
124
|
font: {
|
|
@@ -154,52 +161,34 @@ interface SpectreTokens {
|
|
|
154
161
|
};
|
|
155
162
|
[key: string]: any;
|
|
156
163
|
};
|
|
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
|
-
};
|
|
164
|
+
component: ComponentTokens<SemanticTokenValue>;
|
|
190
165
|
modes: {
|
|
191
166
|
default: Partial<SpectreModeTokens>;
|
|
192
167
|
dark: Partial<SpectreModeTokens>;
|
|
193
168
|
[mode: string]: Partial<SpectreModeTokens>;
|
|
194
169
|
};
|
|
195
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
|
+
}
|
|
196
183
|
interface Tokens {
|
|
197
184
|
colors: Record<string, ColorScale>;
|
|
198
185
|
opacity: TokenScale;
|
|
199
186
|
accessibility: AccessibilityTokens;
|
|
200
187
|
buttons: Record<string, ButtonStateTokens>;
|
|
201
188
|
forms: Record<string, FormStateTokens>;
|
|
202
|
-
|
|
189
|
+
component: ComponentTokens;
|
|
190
|
+
space: TokenScale;
|
|
191
|
+
layout: LayoutTokens;
|
|
203
192
|
radii: TokenScale;
|
|
204
193
|
typography: TypographyTokens;
|
|
205
194
|
font: Record<string, FontScaleEntry>;
|
|
@@ -239,4 +228,4 @@ declare const tailwindPreset: {
|
|
|
239
228
|
theme: TailwindTheme;
|
|
240
229
|
};
|
|
241
230
|
|
|
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 };
|
|
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -50,6 +50,43 @@ interface FormStateTokens {
|
|
|
50
50
|
placeholder?: string;
|
|
51
51
|
ring?: string;
|
|
52
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
|
+
}
|
|
53
90
|
type SpectreModeName = 'default' | 'dark';
|
|
54
91
|
type SemanticTokenValue = string | {
|
|
55
92
|
value: string;
|
|
@@ -76,42 +113,12 @@ interface SpectreModeTokens {
|
|
|
76
113
|
meta: SemanticTokenValue;
|
|
77
114
|
};
|
|
78
115
|
};
|
|
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
|
-
};
|
|
116
|
+
component: ComponentTokens<SemanticTokenValue>;
|
|
111
117
|
}
|
|
112
118
|
interface SpectreTokens {
|
|
113
119
|
colors: any;
|
|
114
|
-
|
|
120
|
+
space: TokenScale;
|
|
121
|
+
layout: LayoutTokens;
|
|
115
122
|
radii: any;
|
|
116
123
|
typography: any;
|
|
117
124
|
font: {
|
|
@@ -154,52 +161,34 @@ interface SpectreTokens {
|
|
|
154
161
|
};
|
|
155
162
|
[key: string]: any;
|
|
156
163
|
};
|
|
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
|
-
};
|
|
164
|
+
component: ComponentTokens<SemanticTokenValue>;
|
|
190
165
|
modes: {
|
|
191
166
|
default: Partial<SpectreModeTokens>;
|
|
192
167
|
dark: Partial<SpectreModeTokens>;
|
|
193
168
|
[mode: string]: Partial<SpectreModeTokens>;
|
|
194
169
|
};
|
|
195
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
|
+
}
|
|
196
183
|
interface Tokens {
|
|
197
184
|
colors: Record<string, ColorScale>;
|
|
198
185
|
opacity: TokenScale;
|
|
199
186
|
accessibility: AccessibilityTokens;
|
|
200
187
|
buttons: Record<string, ButtonStateTokens>;
|
|
201
188
|
forms: Record<string, FormStateTokens>;
|
|
202
|
-
|
|
189
|
+
component: ComponentTokens;
|
|
190
|
+
space: TokenScale;
|
|
191
|
+
layout: LayoutTokens;
|
|
203
192
|
radii: TokenScale;
|
|
204
193
|
typography: TypographyTokens;
|
|
205
194
|
font: Record<string, FontScaleEntry>;
|
|
@@ -239,4 +228,4 @@ declare const tailwindPreset: {
|
|
|
239
228
|
theme: TailwindTheme;
|
|
240
229
|
};
|
|
241
230
|
|
|
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 };
|
|
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 };
|