@trackunit/css-component-tokens 0.0.30 → 0.0.31

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/ComponentTokenVariablesByThemeName.d.ts CHANGED
@@ -1,220 +1,220 @@
1
- import { ThemeNames } from "./ComponentTokenDefinition";
2
- import { ComponentTokenDefinitions } from "./ComponentTokens";
3
- /** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
4
- export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => {
5
- [k: string]: {
6
- readonly border: {
7
- readonly borderColor: "rgb(var(--color-slate-200))";
8
- readonly borderRadius: "var(--border-radius-DEFAULT)";
9
- };
10
- readonly "popover-border": {
11
- readonly borderRadius: "var(--border-radius-DEFAULT)";
12
- };
13
- readonly shadow: {
14
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
15
- };
16
- readonly spacing: {
17
- readonly gap: "var(--spacing-3)";
18
- readonly padding: "var(--spacing-3)";
19
- };
20
- readonly "spacing-sm": {
21
- readonly gap: "var(--spacing-4)";
22
- readonly padding: "var(--spacing-4)";
23
- };
24
- readonly "spacing-md": {
25
- readonly gap: "var(--spacing-4)";
26
- readonly padding: "var(--spacing-6)";
27
- };
28
- } | {
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
- readonly "secondary-color": {
53
- readonly backgroundColor: "rgb(var(--color-secondary-200))";
54
- readonly color: "rgb(var(--color-secondary-600))";
55
- };
56
- readonly border: {
57
- readonly borderRadius: "var(--border-radius-lg)";
58
- };
59
- readonly height: {
60
- readonly height: "auto";
61
- };
62
- readonly padding: {
63
- readonly paddingLeft: "var(--spacing-2-5)";
64
- readonly paddingRight: "var(--spacing-2-5)";
65
- };
66
- } | {
67
- readonly "secondary-color": {
68
- readonly backgroundColor: "rgb(var(--color-secondary-600))";
69
- readonly color: "rgb(var(--color-secondary-50))";
70
- };
71
- readonly border: {
72
- readonly borderRadius: "50px";
73
- };
74
- readonly height: {
75
- readonly height: "55px";
76
- };
77
- readonly padding: {
78
- readonly paddingLeft: "var(--spacing-12)";
79
- readonly paddingRight: "var(--spacing-12)";
80
- };
81
- } | {
82
- readonly width: {
83
- readonly width: "9rem";
84
- };
85
- readonly background: {
86
- readonly backgroundColor: "";
87
- };
88
- readonly borderless: {
89
- readonly borderStyle: "hidden";
90
- };
91
- readonly "focus-hover": {
92
- readonly borderWidth: "1px";
93
- readonly borderBottomWidth: "1px";
94
- readonly borderColor: "rgb(var(--color-gray-400))";
95
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
96
- readonly backgroundColor: "rgb(var(--color-slate-50))";
97
- };
98
- readonly border: {
99
- readonly borderStyle: "solid";
100
- readonly borderWidth: "1px";
101
- readonly borderBottomWidth: "1px";
102
- readonly borderColor: "rgb(var(--color-gray-200))";
103
- readonly borderBottomColor: "rgb(var(--color-gray-200))";
104
- readonly borderRadius: "0.5rem";
105
- };
106
- readonly "focus-within": {
107
- readonly borderColor: "rgb(var(--color-slate-400))";
108
- readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
109
- };
110
- readonly widen: {
111
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
112
- };
113
- readonly "widen-focus": {
114
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
115
- };
116
- readonly prefix: {
117
- readonly color: "rgb(var(--color-slate-400))";
118
- readonly cursor: "default";
119
- };
120
- } | {
121
- readonly width: {
122
- readonly width: "0px";
123
- };
124
- readonly background: {
125
- readonly backgroundColor: "transparent";
126
- };
127
- readonly borderless: {
128
- readonly borderStyle: "hidden";
129
- };
130
- readonly "focus-hover": {
131
- readonly borderWidth: "0px";
132
- readonly borderBottomWidth: "2px";
133
- readonly borderColor: "rgb(var(--color-black-DEFAULT))";
134
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
135
- readonly backgroundColor: "transparent";
136
- };
137
- readonly border: {
138
- readonly borderStyle: "solid";
139
- readonly borderWidth: "0px";
140
- readonly borderBottomWidth: "2px";
141
- readonly borderColor: "rgb(var(--color-white-DEFAULT))";
142
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
143
- readonly borderRadius: "0px";
144
- };
145
- readonly "focus-within": {
146
- readonly borderColor: "none";
147
- readonly boxShadow: "none";
148
- };
149
- readonly widen: {
150
- readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
151
- };
152
- readonly "widen-focus": {
153
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
154
- };
155
- readonly prefix: {
156
- readonly color: "rgb(var(--color-slate-600))";
157
- readonly cursor: "pointer";
158
- };
159
- } | {
160
- readonly border: {
161
- readonly borderRadius: "var(--border-radius-DEFAULT)";
162
- };
163
- } | {
164
- readonly border: {
165
- readonly borderRadius: "1rem";
166
- };
167
- } | {
168
- readonly border: {
169
- readonly borderRadius: "var(--border-radius-DEFAULT)";
170
- };
171
- } | {
172
- readonly border: {
173
- readonly borderRadius: "1rem";
174
- };
175
- } | {
176
- readonly border: {
177
- readonly borderRadius: "var(--border-radius-lg)";
178
- readonly borderWidth: "1px";
179
- };
180
- readonly shadow: {
181
- readonly boxShadow: "var(--box-shadow-sm)";
182
- };
183
- readonly background: {
184
- readonly backgroundColor: "white";
185
- };
186
- readonly prefix: {
187
- readonly borderRightWidth: "1px";
188
- };
189
- } | {
190
- readonly border: {
191
- readonly borderRadius: "70px";
192
- readonly borderWidth: "0px";
193
- };
194
- readonly shadow: {
195
- readonly boxShadow: "none";
196
- };
197
- readonly background: {
198
- readonly backgroundColor: "rgb(var(--color-stone-50))";
199
- };
200
- readonly prefix: {
201
- readonly borderRightWidth: "0px";
202
- };
203
- } | {
204
- readonly gap: {
205
- readonly display: "auto";
206
- readonly gap: "auto";
207
- };
208
- readonly font: {
209
- readonly fontWeight: "normal";
210
- };
211
- } | {
212
- readonly gap: {
213
- readonly display: "grid";
214
- readonly gap: "var(--spacing-4)";
215
- };
216
- readonly font: {
217
- readonly fontWeight: "700";
218
- };
219
- };
220
- };
1
+ import { ThemeNames } from "./ComponentTokenDefinition";
2
+ import { ComponentTokenDefinitions } from "./ComponentTokens";
3
+ /** Returns object structure for Tailwind variable config for specified theme for ALL ComponentTokenDefinitions. */
4
+ export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => {
5
+ [k: string]: {
6
+ readonly border: {
7
+ readonly borderColor: "rgb(var(--color-slate-200))";
8
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
9
+ };
10
+ readonly "popover-border": {
11
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
12
+ };
13
+ readonly shadow: {
14
+ readonly boxShadow: "var(--box-shadow-DEFAULT)";
15
+ };
16
+ readonly spacing: {
17
+ readonly gap: "var(--spacing-3)";
18
+ readonly padding: "var(--spacing-3)";
19
+ };
20
+ readonly "spacing-sm": {
21
+ readonly gap: "var(--spacing-4)";
22
+ readonly padding: "var(--spacing-4)";
23
+ };
24
+ readonly "spacing-md": {
25
+ readonly gap: "var(--spacing-4)";
26
+ readonly padding: "var(--spacing-6)";
27
+ };
28
+ } | {
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
+ readonly "secondary-color": {
53
+ readonly backgroundColor: "rgb(var(--color-secondary-200))";
54
+ readonly color: "rgb(var(--color-secondary-600))";
55
+ };
56
+ readonly border: {
57
+ readonly borderRadius: "var(--border-radius-lg)";
58
+ };
59
+ readonly height: {
60
+ readonly height: "auto";
61
+ };
62
+ readonly padding: {
63
+ readonly paddingLeft: "var(--spacing-2-5)";
64
+ readonly paddingRight: "var(--spacing-2-5)";
65
+ };
66
+ } | {
67
+ readonly "secondary-color": {
68
+ readonly backgroundColor: "rgb(var(--color-secondary-600))";
69
+ readonly color: "rgb(var(--color-secondary-50))";
70
+ };
71
+ readonly border: {
72
+ readonly borderRadius: "50px";
73
+ };
74
+ readonly height: {
75
+ readonly height: "55px";
76
+ };
77
+ readonly padding: {
78
+ readonly paddingLeft: "var(--spacing-12)";
79
+ readonly paddingRight: "var(--spacing-12)";
80
+ };
81
+ } | {
82
+ readonly width: {
83
+ readonly width: "9rem";
84
+ };
85
+ readonly background: {
86
+ readonly backgroundColor: "";
87
+ };
88
+ readonly borderless: {
89
+ readonly borderStyle: "hidden";
90
+ };
91
+ readonly "focus-hover": {
92
+ readonly borderWidth: "1px";
93
+ readonly borderBottomWidth: "1px";
94
+ readonly borderColor: "rgb(var(--color-gray-400))";
95
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
96
+ readonly backgroundColor: "rgb(var(--color-slate-50))";
97
+ };
98
+ readonly border: {
99
+ readonly borderStyle: "solid";
100
+ readonly borderWidth: "1px";
101
+ readonly borderBottomWidth: "1px";
102
+ readonly borderColor: "rgb(var(--color-gray-200))";
103
+ readonly borderBottomColor: "rgb(var(--color-gray-200))";
104
+ readonly borderRadius: "0.5rem";
105
+ };
106
+ readonly "focus-within": {
107
+ readonly borderColor: "rgb(var(--color-slate-400))";
108
+ readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
109
+ };
110
+ readonly widen: {
111
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
112
+ };
113
+ readonly "widen-focus": {
114
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
115
+ };
116
+ readonly prefix: {
117
+ readonly color: "rgb(var(--color-slate-400))";
118
+ readonly cursor: "default";
119
+ };
120
+ } | {
121
+ readonly width: {
122
+ readonly width: "0px";
123
+ };
124
+ readonly background: {
125
+ readonly backgroundColor: "transparent";
126
+ };
127
+ readonly borderless: {
128
+ readonly borderStyle: "hidden";
129
+ };
130
+ readonly "focus-hover": {
131
+ readonly borderWidth: "0px";
132
+ readonly borderBottomWidth: "2px";
133
+ readonly borderColor: "rgb(var(--color-black-DEFAULT))";
134
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
135
+ readonly backgroundColor: "transparent";
136
+ };
137
+ readonly border: {
138
+ readonly borderStyle: "solid";
139
+ readonly borderWidth: "0px";
140
+ readonly borderBottomWidth: "2px";
141
+ readonly borderColor: "rgb(var(--color-white-DEFAULT))";
142
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
143
+ readonly borderRadius: "0px";
144
+ };
145
+ readonly "focus-within": {
146
+ readonly borderColor: "none";
147
+ readonly boxShadow: "none";
148
+ };
149
+ readonly widen: {
150
+ readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
151
+ };
152
+ readonly "widen-focus": {
153
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
154
+ };
155
+ readonly prefix: {
156
+ readonly color: "rgb(var(--color-slate-600))";
157
+ readonly cursor: "pointer";
158
+ };
159
+ } | {
160
+ readonly border: {
161
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
162
+ };
163
+ } | {
164
+ readonly border: {
165
+ readonly borderRadius: "1rem";
166
+ };
167
+ } | {
168
+ readonly border: {
169
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
170
+ };
171
+ } | {
172
+ readonly border: {
173
+ readonly borderRadius: "1rem";
174
+ };
175
+ } | {
176
+ readonly border: {
177
+ readonly borderRadius: "var(--border-radius-lg)";
178
+ readonly borderWidth: "1px";
179
+ };
180
+ readonly shadow: {
181
+ readonly boxShadow: "var(--box-shadow-sm)";
182
+ };
183
+ readonly background: {
184
+ readonly backgroundColor: "white";
185
+ };
186
+ readonly prefix: {
187
+ readonly borderRightWidth: "1px";
188
+ };
189
+ } | {
190
+ readonly border: {
191
+ readonly borderRadius: "70px";
192
+ readonly borderWidth: "0px";
193
+ };
194
+ readonly shadow: {
195
+ readonly boxShadow: "none";
196
+ };
197
+ readonly background: {
198
+ readonly backgroundColor: "rgb(var(--color-stone-50))";
199
+ };
200
+ readonly prefix: {
201
+ readonly borderRightWidth: "0px";
202
+ };
203
+ } | {
204
+ readonly gap: {
205
+ readonly display: "auto";
206
+ readonly gap: "auto";
207
+ };
208
+ readonly font: {
209
+ readonly fontWeight: "normal";
210
+ };
211
+ } | {
212
+ readonly gap: {
213
+ readonly display: "grid";
214
+ readonly gap: "var(--spacing-4)";
215
+ };
216
+ readonly font: {
217
+ readonly fontWeight: "700";
218
+ };
219
+ };
220
+ };