@trackunit/css-component-tokens 0.0.30 → 0.0.32

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 (17) hide show
  1. package/index.cjs +282 -231
  2. package/index.js +284 -229
  3. package/package.json +2 -2
  4. package/src/component-tokens/ComponentTokenDefinition.d.ts +11 -11
  5. package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts +220 -220
  6. package/src/component-tokens/ComponentTokens.d.ts +250 -250
  7. package/src/component-tokens/MockComponent.d.ts +26 -26
  8. package/src/component-tokens/components/BaseInput.tokens.d.ts +33 -33
  9. package/src/component-tokens/components/Button.tokens.d.ts +35 -35
  10. package/src/component-tokens/components/Card.tokens.d.ts +51 -51
  11. package/src/component-tokens/components/FormGroup.tokens.d.ts +21 -21
  12. package/src/component-tokens/components/Popover/Popover.tokens.d.ts +13 -13
  13. package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts +13 -13
  14. package/src/component-tokens/components/Search.tokens.d.ts +83 -83
  15. package/src/component-tokens/pluginUtilityFunctions.d.ts +30 -30
  16. package/src/index.d.ts +3 -3
  17. package/src/plugin.d.ts +4 -4
package/src/component-tokens/ComponentTokens.d.ts CHANGED
@@ -1,250 +1,250 @@
1
- import { ThemeNames } from "./ComponentTokenDefinition";
2
- export declare const componentTokenDefinitions: {
3
- card: {
4
- readonly DEFAULT: {
5
- readonly border: {
6
- readonly borderColor: "rgb(var(--color-slate-200))";
7
- readonly borderRadius: "var(--border-radius-DEFAULT)";
8
- };
9
- readonly "popover-border": {
10
- readonly borderRadius: "var(--border-radius-DEFAULT)";
11
- };
12
- readonly shadow: {
13
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
14
- };
15
- readonly spacing: {
16
- readonly gap: "var(--spacing-3)";
17
- readonly padding: "var(--spacing-3)";
18
- };
19
- readonly "spacing-sm": {
20
- readonly gap: "var(--spacing-4)";
21
- readonly padding: "var(--spacing-4)";
22
- };
23
- readonly "spacing-md": {
24
- readonly gap: "var(--spacing-4)";
25
- readonly padding: "var(--spacing-6)";
26
- };
27
- };
28
- readonly "theme-marketing": {
29
- readonly border: {
30
- readonly borderColor: "rgba(0, 0, 0, 0)";
31
- readonly borderRadius: "2rem";
32
- };
33
- readonly "popover-border": {
34
- readonly borderRadius: "1rem";
35
- };
36
- readonly shadow: {
37
- readonly boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)";
38
- };
39
- readonly spacing: {
40
- readonly gap: "var(--spacing-1)";
41
- readonly padding: "var(--spacing-1)";
42
- };
43
- readonly "spacing-sm": {
44
- readonly gap: "var(--spacing-1)";
45
- readonly padding: "var(--spacing-1)";
46
- };
47
- readonly "spacing-md": {
48
- readonly gap: "var(--spacing-1)";
49
- readonly padding: "var(--spacing-1)";
50
- };
51
- };
52
- };
53
- button: {
54
- readonly DEFAULT: {
55
- readonly "secondary-color": {
56
- readonly backgroundColor: "rgb(var(--color-secondary-200))";
57
- readonly color: "rgb(var(--color-secondary-600))";
58
- };
59
- readonly border: {
60
- readonly borderRadius: "var(--border-radius-lg)";
61
- };
62
- readonly height: {
63
- readonly height: "auto";
64
- };
65
- readonly padding: {
66
- readonly paddingLeft: "var(--spacing-2-5)";
67
- readonly paddingRight: "var(--spacing-2-5)";
68
- };
69
- };
70
- readonly "theme-marketing": {
71
- readonly "secondary-color": {
72
- readonly backgroundColor: "rgb(var(--color-secondary-600))";
73
- readonly color: "rgb(var(--color-secondary-50))";
74
- };
75
- readonly border: {
76
- readonly borderRadius: "50px";
77
- };
78
- readonly height: {
79
- readonly height: "55px";
80
- };
81
- readonly padding: {
82
- readonly paddingLeft: "var(--spacing-12)";
83
- readonly paddingRight: "var(--spacing-12)";
84
- };
85
- };
86
- };
87
- search: {
88
- readonly DEFAULT: {
89
- readonly width: {
90
- readonly width: "9rem";
91
- };
92
- readonly background: {
93
- readonly backgroundColor: "";
94
- };
95
- readonly borderless: {
96
- readonly borderStyle: "hidden";
97
- };
98
- readonly "focus-hover": {
99
- readonly borderWidth: "1px";
100
- readonly borderBottomWidth: "1px";
101
- readonly borderColor: "rgb(var(--color-gray-400))";
102
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
103
- readonly backgroundColor: "rgb(var(--color-slate-50))";
104
- };
105
- readonly border: {
106
- readonly borderStyle: "solid";
107
- readonly borderWidth: "1px";
108
- readonly borderBottomWidth: "1px";
109
- readonly borderColor: "rgb(var(--color-gray-200))";
110
- readonly borderBottomColor: "rgb(var(--color-gray-200))";
111
- readonly borderRadius: "0.5rem";
112
- };
113
- readonly "focus-within": {
114
- readonly borderColor: "rgb(var(--color-slate-400))";
115
- readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
116
- };
117
- readonly widen: {
118
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
119
- };
120
- readonly "widen-focus": {
121
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
122
- };
123
- readonly prefix: {
124
- readonly color: "rgb(var(--color-slate-400))";
125
- readonly cursor: "default";
126
- };
127
- };
128
- readonly "theme-marketing": {
129
- readonly width: {
130
- readonly width: "0px";
131
- };
132
- readonly background: {
133
- readonly backgroundColor: "transparent";
134
- };
135
- readonly borderless: {
136
- readonly borderStyle: "hidden";
137
- };
138
- readonly "focus-hover": {
139
- readonly borderWidth: "0px";
140
- readonly borderBottomWidth: "2px";
141
- readonly borderColor: "rgb(var(--color-black-DEFAULT))";
142
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
143
- readonly backgroundColor: "transparent";
144
- };
145
- readonly border: {
146
- readonly borderStyle: "solid";
147
- readonly borderWidth: "0px";
148
- readonly borderBottomWidth: "2px";
149
- readonly borderColor: "rgb(var(--color-white-DEFAULT))";
150
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
151
- readonly borderRadius: "0px";
152
- };
153
- readonly "focus-within": {
154
- readonly borderColor: "none";
155
- readonly boxShadow: "none";
156
- };
157
- readonly widen: {
158
- readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
159
- };
160
- readonly "widen-focus": {
161
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
162
- };
163
- readonly prefix: {
164
- readonly color: "rgb(var(--color-slate-600))";
165
- readonly cursor: "pointer";
166
- };
167
- };
168
- };
169
- popover: {
170
- readonly DEFAULT: {
171
- readonly border: {
172
- readonly borderRadius: "var(--border-radius-DEFAULT)";
173
- };
174
- };
175
- readonly "theme-marketing": {
176
- readonly border: {
177
- readonly borderRadius: "1rem";
178
- };
179
- };
180
- };
181
- popoverListItem: {
182
- readonly DEFAULT: {
183
- readonly border: {
184
- readonly borderRadius: "var(--border-radius-DEFAULT)";
185
- };
186
- };
187
- readonly "theme-marketing": {
188
- readonly border: {
189
- readonly borderRadius: "1rem";
190
- };
191
- };
192
- };
193
- baseInput: {
194
- readonly DEFAULT: {
195
- readonly border: {
196
- readonly borderRadius: "var(--border-radius-lg)";
197
- readonly borderWidth: "1px";
198
- };
199
- readonly shadow: {
200
- readonly boxShadow: "var(--box-shadow-sm)";
201
- };
202
- readonly background: {
203
- readonly backgroundColor: "white";
204
- };
205
- readonly prefix: {
206
- readonly borderRightWidth: "1px";
207
- };
208
- };
209
- readonly "theme-marketing": {
210
- readonly border: {
211
- readonly borderRadius: "70px";
212
- readonly borderWidth: "0px";
213
- };
214
- readonly shadow: {
215
- readonly boxShadow: "none";
216
- };
217
- readonly background: {
218
- readonly backgroundColor: "rgb(var(--color-stone-50))";
219
- };
220
- readonly prefix: {
221
- readonly borderRightWidth: "0px";
222
- };
223
- };
224
- };
225
- formGroup: {
226
- readonly DEFAULT: {
227
- readonly gap: {
228
- readonly display: "auto";
229
- readonly gap: "auto";
230
- };
231
- readonly font: {
232
- readonly fontWeight: "normal";
233
- };
234
- };
235
- readonly "theme-marketing": {
236
- readonly gap: {
237
- readonly display: "grid";
238
- readonly gap: "var(--spacing-4)";
239
- };
240
- readonly font: {
241
- readonly fontWeight: "700";
242
- };
243
- };
244
- };
245
- };
246
- export type ComponentTokenDefinitions = typeof componentTokenDefinitions;
247
- export type ComponentNames = keyof typeof componentTokenDefinitions;
248
- export type ComponentTokenNames<Component extends ComponentNames> = {
249
- [Key in keyof typeof componentTokenDefinitions[Component][ThemeNames] & string]: Key;
250
- }[keyof typeof componentTokenDefinitions[Component][ThemeNames] & string];
1
+ import { ThemeNames } from "./ComponentTokenDefinition";
2
+ export declare const componentTokenDefinitions: {
3
+ card: {
4
+ readonly DEFAULT: {
5
+ readonly border: {
6
+ readonly borderColor: "rgb(var(--color-slate-200))";
7
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
8
+ };
9
+ readonly "popover-border": {
10
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
11
+ };
12
+ readonly shadow: {
13
+ readonly boxShadow: "var(--box-shadow-DEFAULT)";
14
+ };
15
+ readonly spacing: {
16
+ readonly gap: "var(--spacing-3)";
17
+ readonly padding: "var(--spacing-3)";
18
+ };
19
+ readonly "spacing-sm": {
20
+ readonly gap: "var(--spacing-4)";
21
+ readonly padding: "var(--spacing-4)";
22
+ };
23
+ readonly "spacing-md": {
24
+ readonly gap: "var(--spacing-4)";
25
+ readonly padding: "var(--spacing-6)";
26
+ };
27
+ };
28
+ readonly "theme-marketing": {
29
+ readonly border: {
30
+ readonly borderColor: "rgba(0, 0, 0, 0)";
31
+ readonly borderRadius: "2rem";
32
+ };
33
+ readonly "popover-border": {
34
+ readonly borderRadius: "1rem";
35
+ };
36
+ readonly shadow: {
37
+ readonly boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)";
38
+ };
39
+ readonly spacing: {
40
+ readonly gap: "var(--spacing-1)";
41
+ readonly padding: "var(--spacing-1)";
42
+ };
43
+ readonly "spacing-sm": {
44
+ readonly gap: "var(--spacing-1)";
45
+ readonly padding: "var(--spacing-1)";
46
+ };
47
+ readonly "spacing-md": {
48
+ readonly gap: "var(--spacing-1)";
49
+ readonly padding: "var(--spacing-1)";
50
+ };
51
+ };
52
+ };
53
+ button: {
54
+ readonly DEFAULT: {
55
+ readonly "secondary-color": {
56
+ readonly backgroundColor: "rgb(var(--color-secondary-200))";
57
+ readonly color: "rgb(var(--color-secondary-600))";
58
+ };
59
+ readonly border: {
60
+ readonly borderRadius: "var(--border-radius-lg)";
61
+ };
62
+ readonly height: {
63
+ readonly height: "auto";
64
+ };
65
+ readonly padding: {
66
+ readonly paddingLeft: "var(--spacing-2-5)";
67
+ readonly paddingRight: "var(--spacing-2-5)";
68
+ };
69
+ };
70
+ readonly "theme-marketing": {
71
+ readonly "secondary-color": {
72
+ readonly backgroundColor: "rgb(var(--color-secondary-600))";
73
+ readonly color: "rgb(var(--color-secondary-50))";
74
+ };
75
+ readonly border: {
76
+ readonly borderRadius: "50px";
77
+ };
78
+ readonly height: {
79
+ readonly height: "55px";
80
+ };
81
+ readonly padding: {
82
+ readonly paddingLeft: "var(--spacing-12)";
83
+ readonly paddingRight: "var(--spacing-12)";
84
+ };
85
+ };
86
+ };
87
+ search: {
88
+ readonly DEFAULT: {
89
+ readonly width: {
90
+ readonly width: "9rem";
91
+ };
92
+ readonly background: {
93
+ readonly backgroundColor: "";
94
+ };
95
+ readonly borderless: {
96
+ readonly borderStyle: "hidden";
97
+ };
98
+ readonly "focus-hover": {
99
+ readonly borderWidth: "1px";
100
+ readonly borderBottomWidth: "1px";
101
+ readonly borderColor: "rgb(var(--color-gray-400))";
102
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
103
+ readonly backgroundColor: "rgb(var(--color-slate-50))";
104
+ };
105
+ readonly border: {
106
+ readonly borderStyle: "solid";
107
+ readonly borderWidth: "1px";
108
+ readonly borderBottomWidth: "1px";
109
+ readonly borderColor: "rgb(var(--color-gray-200))";
110
+ readonly borderBottomColor: "rgb(var(--color-gray-200))";
111
+ readonly borderRadius: "0.5rem";
112
+ };
113
+ readonly "focus-within": {
114
+ readonly borderColor: "rgb(var(--color-slate-400))";
115
+ readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
116
+ };
117
+ readonly widen: {
118
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
119
+ };
120
+ readonly "widen-focus": {
121
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
122
+ };
123
+ readonly prefix: {
124
+ readonly color: "rgb(var(--color-slate-400))";
125
+ readonly cursor: "default";
126
+ };
127
+ };
128
+ readonly "theme-marketing": {
129
+ readonly width: {
130
+ readonly width: "0px";
131
+ };
132
+ readonly background: {
133
+ readonly backgroundColor: "transparent";
134
+ };
135
+ readonly borderless: {
136
+ readonly borderStyle: "hidden";
137
+ };
138
+ readonly "focus-hover": {
139
+ readonly borderWidth: "0px";
140
+ readonly borderBottomWidth: "2px";
141
+ readonly borderColor: "rgb(var(--color-black-DEFAULT))";
142
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
143
+ readonly backgroundColor: "transparent";
144
+ };
145
+ readonly border: {
146
+ readonly borderStyle: "solid";
147
+ readonly borderWidth: "0px";
148
+ readonly borderBottomWidth: "2px";
149
+ readonly borderColor: "rgb(var(--color-white-DEFAULT))";
150
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
151
+ readonly borderRadius: "0px";
152
+ };
153
+ readonly "focus-within": {
154
+ readonly borderColor: "none";
155
+ readonly boxShadow: "none";
156
+ };
157
+ readonly widen: {
158
+ readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
159
+ };
160
+ readonly "widen-focus": {
161
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
162
+ };
163
+ readonly prefix: {
164
+ readonly color: "rgb(var(--color-slate-600))";
165
+ readonly cursor: "pointer";
166
+ };
167
+ };
168
+ };
169
+ popover: {
170
+ readonly DEFAULT: {
171
+ readonly border: {
172
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
173
+ };
174
+ };
175
+ readonly "theme-marketing": {
176
+ readonly border: {
177
+ readonly borderRadius: "1rem";
178
+ };
179
+ };
180
+ };
181
+ popoverListItem: {
182
+ readonly DEFAULT: {
183
+ readonly border: {
184
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
185
+ };
186
+ };
187
+ readonly "theme-marketing": {
188
+ readonly border: {
189
+ readonly borderRadius: "1rem";
190
+ };
191
+ };
192
+ };
193
+ baseInput: {
194
+ readonly DEFAULT: {
195
+ readonly border: {
196
+ readonly borderRadius: "var(--border-radius-lg)";
197
+ readonly borderWidth: "1px";
198
+ };
199
+ readonly shadow: {
200
+ readonly boxShadow: "var(--box-shadow-sm)";
201
+ };
202
+ readonly background: {
203
+ readonly backgroundColor: "white";
204
+ };
205
+ readonly prefix: {
206
+ readonly borderRightWidth: "1px";
207
+ };
208
+ };
209
+ readonly "theme-marketing": {
210
+ readonly border: {
211
+ readonly borderRadius: "70px";
212
+ readonly borderWidth: "0px";
213
+ };
214
+ readonly shadow: {
215
+ readonly boxShadow: "none";
216
+ };
217
+ readonly background: {
218
+ readonly backgroundColor: "rgb(var(--color-stone-50))";
219
+ };
220
+ readonly prefix: {
221
+ readonly borderRightWidth: "0px";
222
+ };
223
+ };
224
+ };
225
+ formGroup: {
226
+ readonly DEFAULT: {
227
+ readonly gap: {
228
+ readonly display: "auto";
229
+ readonly gap: "auto";
230
+ };
231
+ readonly font: {
232
+ readonly fontWeight: "normal";
233
+ };
234
+ };
235
+ readonly "theme-marketing": {
236
+ readonly gap: {
237
+ readonly display: "grid";
238
+ readonly gap: "var(--spacing-4)";
239
+ };
240
+ readonly font: {
241
+ readonly fontWeight: "700";
242
+ };
243
+ };
244
+ };
245
+ };
246
+ export type ComponentTokenDefinitions = typeof componentTokenDefinitions;
247
+ export type ComponentNames = keyof typeof componentTokenDefinitions;
248
+ export type ComponentTokenNames<Component extends ComponentNames> = {
249
+ [Key in keyof typeof componentTokenDefinitions[Component][ThemeNames] & string]: Key;
250
+ }[keyof typeof componentTokenDefinitions[Component][ThemeNames] & string];
package/src/component-tokens/MockComponent.d.ts CHANGED
@@ -1,26 +1,26 @@
1
- export declare const MockComponentTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly border: {
4
- readonly borderRadius: "var(--border-radius-DEFAULT)";
5
- };
6
- };
7
- readonly "theme-marketing": {
8
- readonly border: {
9
- readonly borderRadius: "var(--border-radius-2xl)";
10
- };
11
- };
12
- };
13
- export declare const MockComponentTokenDefinitionAlternative: {
14
- readonly DEFAULT: {
15
- readonly border: {
16
- readonly borderRadius: "var(--border-radius-DEFAULT)";
17
- readonly borderWidth: "var(--border-width-DEFAULT)";
18
- };
19
- };
20
- readonly "theme-marketing": {
21
- readonly border: {
22
- readonly borderRadius: "var(--border-radius-md)";
23
- readonly borderWidth: "var(--border-width-thin)";
24
- };
25
- };
26
- };
1
+ export declare const MockComponentTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly border: {
4
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
5
+ };
6
+ };
7
+ readonly "theme-marketing": {
8
+ readonly border: {
9
+ readonly borderRadius: "var(--border-radius-2xl)";
10
+ };
11
+ };
12
+ };
13
+ export declare const MockComponentTokenDefinitionAlternative: {
14
+ readonly DEFAULT: {
15
+ readonly border: {
16
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
17
+ readonly borderWidth: "var(--border-width-DEFAULT)";
18
+ };
19
+ };
20
+ readonly "theme-marketing": {
21
+ readonly border: {
22
+ readonly borderRadius: "var(--border-radius-md)";
23
+ readonly borderWidth: "var(--border-width-thin)";
24
+ };
25
+ };
26
+ };
package/src/component-tokens/components/BaseInput.tokens.d.ts CHANGED
@@ -1,33 +1,33 @@
1
- export declare const BaseInputTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly border: {
4
- readonly borderRadius: "var(--border-radius-lg)";
5
- readonly borderWidth: "1px";
6
- };
7
- readonly shadow: {
8
- readonly boxShadow: "var(--box-shadow-sm)";
9
- };
10
- readonly background: {
11
- readonly backgroundColor: "white";
12
- };
13
- readonly prefix: {
14
- readonly borderRightWidth: "1px";
15
- };
16
- };
17
- readonly "theme-marketing": {
18
- readonly border: {
19
- readonly borderRadius: "70px";
20
- readonly borderWidth: "0px";
21
- };
22
- readonly shadow: {
23
- readonly boxShadow: "none";
24
- };
25
- readonly background: {
26
- readonly backgroundColor: "rgb(var(--color-stone-50))";
27
- };
28
- readonly prefix: {
29
- readonly borderRightWidth: "0px";
30
- };
31
- };
32
- };
33
- export default BaseInputTokenDefinition;
1
+ export declare const BaseInputTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly border: {
4
+ readonly borderRadius: "var(--border-radius-lg)";
5
+ readonly borderWidth: "1px";
6
+ };
7
+ readonly shadow: {
8
+ readonly boxShadow: "var(--box-shadow-sm)";
9
+ };
10
+ readonly background: {
11
+ readonly backgroundColor: "white";
12
+ };
13
+ readonly prefix: {
14
+ readonly borderRightWidth: "1px";
15
+ };
16
+ };
17
+ readonly "theme-marketing": {
18
+ readonly border: {
19
+ readonly borderRadius: "70px";
20
+ readonly borderWidth: "0px";
21
+ };
22
+ readonly shadow: {
23
+ readonly boxShadow: "none";
24
+ };
25
+ readonly background: {
26
+ readonly backgroundColor: "rgb(var(--color-stone-50))";
27
+ };
28
+ readonly prefix: {
29
+ readonly borderRightWidth: "0px";
30
+ };
31
+ };
32
+ };
33
+ export default BaseInputTokenDefinition;