@lawkit/ui 0.1.3 → 0.1.4

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 (38) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +1532 -1462
  3. package/dist/tokens/src/contracts/theme-contract.css.d.ts +1 -0
  4. package/dist/tokens/src/semantic/color-roles.d.ts +362 -362
  5. package/dist/tokens/src/themes/light-theme.css.d.ts +1 -0
  6. package/dist/ui-v3/src/components/Alert/Alert.css.d.ts +4 -4
  7. package/dist/ui-v3/src/components/Avatar/Avatar.css.d.ts +1 -1
  8. package/dist/ui-v3/src/components/ButtonGroup/ButtonGroup.css.d.ts +5 -5
  9. package/dist/ui-v3/src/components/ButtonTab/ButtonTab.css.d.ts +3 -3
  10. package/dist/ui-v3/src/components/Card/Card.css.d.ts +1 -1
  11. package/dist/ui-v3/src/components/ChartTooltip/ChartTooltip.css.d.ts +4 -4
  12. package/dist/ui-v3/src/components/Checkbox/Checkbox.css.d.ts +2 -2
  13. package/dist/ui-v3/src/components/ChipsNavigation/ChipsNavigation.css.d.ts +2 -2
  14. package/dist/ui-v3/src/components/Collapse/Collapse.css.d.ts +3 -3
  15. package/dist/ui-v3/src/components/DataTable/DataTable.css.d.ts +1 -1
  16. package/dist/ui-v3/src/components/DatePicker/DatePicker.css.d.ts +12 -12
  17. package/dist/ui-v3/src/components/Dropdown/Dropdown.css.d.ts +5 -5
  18. package/dist/ui-v3/src/components/FileUpload/FileUpload.css.d.ts +1 -1
  19. package/dist/ui-v3/src/components/Icon/Icon.css.d.ts +12 -0
  20. package/dist/ui-v3/src/components/Icon/index.d.ts +4 -0
  21. package/dist/ui-v3/src/components/Icon/registry.d.ts +11 -0
  22. package/dist/ui-v3/src/components/Icon/types.d.ts +10 -0
  23. package/dist/ui-v3/src/components/IconButtonGroup/IconButtonGroup.css.d.ts +5 -5
  24. package/dist/ui-v3/src/components/Input/Input.css.d.ts +9 -9
  25. package/dist/ui-v3/src/components/ListGroup/ListGroup.css.d.ts +2 -2
  26. package/dist/ui-v3/src/components/NavigationTab/NavigationTab.css.d.ts +5 -5
  27. package/dist/ui-v3/src/components/NumberInput/NumberInput.css.d.ts +1 -1
  28. package/dist/ui-v3/src/components/Pagination/Pagination.css.d.ts +3 -3
  29. package/dist/ui-v3/src/components/Progress/Progress.css.d.ts +4 -4
  30. package/dist/ui-v3/src/components/Spinner/Spinner.css.d.ts +2 -2
  31. package/dist/ui-v3/src/components/Switch/Switch.css.d.ts +1 -1
  32. package/dist/ui-v3/src/components/Tabs/Tabs.css.d.ts +6 -6
  33. package/dist/ui-v3/src/components/Toast/Toast.css.d.ts +3 -3
  34. package/dist/ui-v3/src/components/TreeView/TreeView.css.d.ts +3 -3
  35. package/dist/ui-v3/src/components/Widget/Widget.css.d.ts +2 -2
  36. package/dist/ui-v3/src/foundations/field/field.css.d.ts +8 -8
  37. package/dist/ui-v3/src/index.d.ts +2 -0
  38. package/package.json +1 -1
package/dist/tokens/src/semantic/color-roles.d.ts CHANGED
@@ -1,408 +1,408 @@
1
1
  export declare const semanticColorRoles: {
2
- readonly surface: {
3
- readonly page: string;
4
- readonly canvas: string;
5
- readonly subtle: string;
6
- readonly raised: string;
7
- readonly disabled: string;
8
- readonly tableHeader: "#f1f4f9";
9
- readonly backdrop: "rgba(0, 0, 0, 0.2)";
2
+ surface: {
3
+ page: `var(--${string})`;
4
+ canvas: `var(--${string})`;
5
+ subtle: `var(--${string})`;
6
+ raised: `var(--${string})`;
7
+ disabled: `var(--${string})`;
8
+ tableHeader: "#f1f4f9";
9
+ backdrop: string;
10
10
  };
11
- readonly text: {
12
- readonly primary: string;
13
- readonly heading: string;
14
- readonly secondary: string;
15
- readonly tertiary: string;
16
- readonly disabled: string;
17
- readonly inverse: string;
18
- readonly placeholder: string;
11
+ text: {
12
+ primary: `var(--${string})`;
13
+ heading: `var(--${string})`;
14
+ secondary: `var(--${string})`;
15
+ tertiary: `var(--${string})`;
16
+ disabled: `var(--${string})`;
17
+ inverse: `var(--${string})`;
18
+ placeholder: `var(--${string})`;
19
19
  };
20
- readonly border: {
21
- readonly subtle: string;
22
- readonly default: string;
23
- readonly strong: string;
24
- readonly focus: string;
25
- readonly input: "#9ea7b8";
26
- readonly primary: string;
27
- readonly secondary: string;
28
- readonly success: "#28c76f";
29
- readonly danger: string;
30
- readonly warning: string;
31
- readonly info: string;
32
- readonly dark: "#4b4b4b";
20
+ border: {
21
+ subtle: `var(--${string})`;
22
+ default: `var(--${string})`;
23
+ strong: `var(--${string})`;
24
+ focus: `var(--${string})`;
25
+ input: "#9ea7b8";
26
+ primary: `var(--${string})`;
27
+ secondary: `var(--${string})`;
28
+ success: string;
29
+ danger: `var(--${string})`;
30
+ warning: `var(--${string})`;
31
+ info: `var(--${string})`;
32
+ dark: string;
33
33
  };
34
- readonly action: {
35
- readonly primary: {
36
- readonly default: string;
37
- readonly hover: string;
38
- readonly active: string;
39
- readonly subtle: "rgba(33, 81, 236, 0.12)";
40
- readonly subtleActive: "rgba(23, 57, 165, 0.12)";
34
+ action: {
35
+ primary: {
36
+ default: `var(--${string})`;
37
+ hover: `var(--${string})`;
38
+ active: `var(--${string})`;
39
+ subtle: "rgba(33, 81, 236, 0.12)";
40
+ subtleActive: "rgba(23, 57, 165, 0.12)";
41
41
  };
42
- readonly secondary: {
43
- readonly default: string;
44
- readonly hover: string;
45
- readonly active: string;
46
- readonly subtle: "rgba(130, 134, 139, 0.12)";
42
+ secondary: {
43
+ default: `var(--${string})`;
44
+ hover: `var(--${string})`;
45
+ active: `var(--${string})`;
46
+ subtle: "rgba(130, 134, 139, 0.12)";
47
47
  };
48
48
  };
49
- readonly status: {
50
- readonly success: {
51
- readonly text: "#006d38";
52
- readonly fill: "rgba(39, 194, 129, 0.12)";
53
- readonly border: "#28c76f";
49
+ status: {
50
+ success: {
51
+ text: "#006d38";
52
+ fill: "rgba(39, 194, 129, 0.12)";
53
+ border: string;
54
54
  };
55
- readonly danger: {
56
- readonly text: "#b12a30";
57
- readonly fill: "rgba(234, 59, 59, 0.12)";
58
- readonly border: string;
55
+ danger: {
56
+ text: "#b12a30";
57
+ fill: "rgba(234, 59, 59, 0.12)";
58
+ border: `var(--${string})`;
59
59
  };
60
- readonly warning: {
61
- readonly text: "#7d5800";
62
- readonly fill: "rgba(240, 175, 35, 0.12)";
63
- readonly border: string;
60
+ warning: {
61
+ text: "#7d5800";
62
+ fill: "rgba(240, 175, 35, 0.12)";
63
+ border: `var(--${string})`;
64
64
  };
65
- readonly info: {
66
- readonly text: "#006876";
67
- readonly fill: "rgba(0, 207, 232, 0.12)";
68
- readonly border: string;
65
+ info: {
66
+ text: "#006876";
67
+ fill: "rgba(0, 207, 232, 0.12)";
68
+ border: `var(--${string})`;
69
69
  };
70
- readonly dark: {
71
- readonly text: "#343434";
72
- readonly fill: "rgba(76, 84, 105, 0.12)";
73
- readonly border: string;
70
+ dark: {
71
+ text: "#343434";
72
+ fill: "rgba(76, 84, 105, 0.12)";
73
+ border: `var(--${string})`;
74
74
  };
75
- readonly scourt: {
76
- readonly blue: {
77
- readonly text: "#003399";
78
- readonly fill: "rgba(0, 51, 153, 0.12)";
75
+ scourt: {
76
+ blue: {
77
+ text: "#003399";
78
+ fill: "rgba(0, 51, 153, 0.12)";
79
79
  };
80
- readonly green: {
81
- readonly text: "#336633";
82
- readonly fill: "rgba(51, 102, 51, 0.12)";
80
+ green: {
81
+ text: "#336633";
82
+ fill: "rgba(51, 102, 51, 0.12)";
83
83
  };
84
- readonly red: {
85
- readonly text: "#660000";
86
- readonly fill: "rgba(102, 0, 0, 0.12)";
84
+ red: {
85
+ text: "#660000";
86
+ fill: "rgba(102, 0, 0, 0.12)";
87
87
  };
88
- readonly yellow: {
89
- readonly text: "#cc6600";
90
- readonly fill: "rgba(204, 102, 0, 0.12)";
88
+ yellow: {
89
+ text: "#cc6600";
90
+ fill: "rgba(204, 102, 0, 0.12)";
91
91
  };
92
- readonly stamp: {
93
- readonly text: "#ff0000";
94
- readonly fill: "rgba(234, 59, 59, 0.12)";
92
+ stamp: {
93
+ text: "#ff0000";
94
+ fill: "rgba(234, 59, 59, 0.12)";
95
95
  };
96
96
  };
97
97
  };
98
- readonly button: {
99
- readonly solid: {
100
- readonly primary: {
101
- readonly background: string;
102
- readonly hover: string;
103
- readonly active: string;
104
- readonly text: string;
105
- };
106
- readonly secondary: {
107
- readonly background: string;
108
- readonly hover: string;
109
- readonly active: string;
110
- readonly text: string;
111
- };
112
- readonly success: {
113
- readonly background: "#28c76f";
114
- readonly hover: "#28c76f";
115
- readonly active: "#006d38";
116
- readonly text: string;
117
- };
118
- readonly danger: {
119
- readonly background: string;
120
- readonly hover: string;
121
- readonly active: string;
122
- readonly text: string;
123
- };
124
- readonly warning: {
125
- readonly background: string;
126
- readonly hover: string;
127
- readonly active: string;
128
- readonly text: string;
129
- };
130
- readonly info: {
131
- readonly background: string;
132
- readonly hover: string;
133
- readonly active: string;
134
- readonly text: string;
135
- };
136
- readonly dark: {
137
- readonly background: string;
138
- readonly hover: string;
139
- readonly active: string;
140
- readonly text: string;
141
- };
142
- readonly neutral: {
143
- readonly background: string;
144
- readonly hover: string;
145
- readonly active: string;
146
- readonly text: string;
147
- };
148
- readonly disabled: {
149
- readonly background: string;
150
- readonly text: string;
98
+ button: {
99
+ solid: {
100
+ primary: {
101
+ background: `var(--${string})`;
102
+ hover: `var(--${string})`;
103
+ active: `var(--${string})`;
104
+ text: `var(--${string})`;
105
+ };
106
+ secondary: {
107
+ background: `var(--${string})`;
108
+ hover: `var(--${string})`;
109
+ active: `var(--${string})`;
110
+ text: `var(--${string})`;
111
+ };
112
+ success: {
113
+ background: string;
114
+ hover: string;
115
+ active: string;
116
+ text: `var(--${string})`;
117
+ };
118
+ danger: {
119
+ background: `var(--${string})`;
120
+ hover: `var(--${string})`;
121
+ active: `var(--${string})`;
122
+ text: `var(--${string})`;
123
+ };
124
+ warning: {
125
+ background: `var(--${string})`;
126
+ hover: `var(--${string})`;
127
+ active: `var(--${string})`;
128
+ text: `var(--${string})`;
129
+ };
130
+ info: {
131
+ background: `var(--${string})`;
132
+ hover: `var(--${string})`;
133
+ active: `var(--${string})`;
134
+ text: `var(--${string})`;
135
+ };
136
+ dark: {
137
+ background: `var(--${string})`;
138
+ hover: `var(--${string})`;
139
+ active: `var(--${string})`;
140
+ text: `var(--${string})`;
141
+ };
142
+ neutral: {
143
+ background: `var(--${string})`;
144
+ hover: `var(--${string})`;
145
+ active: `var(--${string})`;
146
+ text: `var(--${string})`;
147
+ };
148
+ disabled: {
149
+ background: `var(--${string})`;
150
+ text: `var(--${string})`;
151
151
  };
152
152
  };
153
- readonly outline: {
154
- readonly primary: {
155
- readonly border: string;
156
- readonly text: string;
157
- readonly hover: "rgba(33, 81, 236, 0.12)";
158
- readonly active: "rgba(23, 57, 165, 0.12)";
159
- };
160
- readonly secondary: {
161
- readonly border: string;
162
- readonly text: string;
163
- readonly hover: "rgba(130, 134, 139, 0.12)";
164
- readonly active: "rgba(130, 134, 139, 0.12)";
165
- };
166
- readonly success: {
167
- readonly border: "#28c76f";
168
- readonly text: "#006d38";
169
- readonly hover: "rgba(39, 194, 129, 0.12)";
170
- readonly active: "rgba(39, 194, 129, 0.12)";
171
- };
172
- readonly danger: {
173
- readonly border: string;
174
- readonly text: "#b12a30";
175
- readonly hover: "rgba(234, 59, 59, 0.12)";
176
- readonly active: "rgba(234, 59, 59, 0.12)";
177
- };
178
- readonly warning: {
179
- readonly border: string;
180
- readonly text: "#7d5800";
181
- readonly hover: "rgba(240, 175, 35, 0.12)";
182
- readonly active: "rgba(240, 175, 35, 0.12)";
183
- };
184
- readonly info: {
185
- readonly border: string;
186
- readonly text: "#006876";
187
- readonly hover: "rgba(0, 207, 232, 0.12)";
188
- readonly active: "rgba(0, 207, 232, 0.12)";
189
- };
190
- readonly dark: {
191
- readonly border: string;
192
- readonly text: "#343434";
193
- readonly hover: "rgba(76, 84, 105, 0.12)";
194
- readonly active: "rgba(76, 84, 105, 0.12)";
195
- };
196
- readonly neutral: {
197
- readonly border: string;
198
- readonly text: string;
199
- readonly hover: string;
200
- readonly active: string;
201
- };
202
- readonly disabled: {
203
- readonly border: string;
204
- readonly text: string;
205
- readonly hover: string;
206
- readonly active: string;
153
+ outline: {
154
+ primary: {
155
+ border: `var(--${string})`;
156
+ text: `var(--${string})`;
157
+ hover: "rgba(33, 81, 236, 0.12)";
158
+ active: "rgba(23, 57, 165, 0.12)";
159
+ };
160
+ secondary: {
161
+ border: `var(--${string})`;
162
+ text: `var(--${string})`;
163
+ hover: "rgba(130, 134, 139, 0.12)";
164
+ active: "rgba(130, 134, 139, 0.12)";
165
+ };
166
+ success: {
167
+ border: string;
168
+ text: "#006d38";
169
+ hover: "rgba(39, 194, 129, 0.12)";
170
+ active: "rgba(39, 194, 129, 0.12)";
171
+ };
172
+ danger: {
173
+ border: `var(--${string})`;
174
+ text: "#b12a30";
175
+ hover: "rgba(234, 59, 59, 0.12)";
176
+ active: "rgba(234, 59, 59, 0.12)";
177
+ };
178
+ warning: {
179
+ border: `var(--${string})`;
180
+ text: "#7d5800";
181
+ hover: "rgba(240, 175, 35, 0.12)";
182
+ active: "rgba(240, 175, 35, 0.12)";
183
+ };
184
+ info: {
185
+ border: `var(--${string})`;
186
+ text: "#006876";
187
+ hover: "rgba(0, 207, 232, 0.12)";
188
+ active: "rgba(0, 207, 232, 0.12)";
189
+ };
190
+ dark: {
191
+ border: `var(--${string})`;
192
+ text: "#343434";
193
+ hover: "rgba(76, 84, 105, 0.12)";
194
+ active: "rgba(76, 84, 105, 0.12)";
195
+ };
196
+ neutral: {
197
+ border: `var(--${string})`;
198
+ text: `var(--${string})`;
199
+ hover: `var(--${string})`;
200
+ active: `var(--${string})`;
201
+ };
202
+ disabled: {
203
+ border: `var(--${string})`;
204
+ text: `var(--${string})`;
205
+ hover: `var(--${string})`;
206
+ active: `var(--${string})`;
207
207
  };
208
208
  };
209
- readonly gradient: {
210
- readonly primary: {
211
- readonly from: string;
212
- readonly to: string;
213
- readonly hoverFrom: string;
214
- readonly hoverTo: string;
215
- readonly activeFrom: string;
216
- readonly activeTo: string;
217
- readonly disabledFrom: "rgba(33, 81, 236, 0.18)";
218
- readonly disabledTo: "rgba(33, 81, 236, 0.18)";
219
- readonly text: string;
220
- };
221
- readonly secondary: {
222
- readonly from: string;
223
- readonly to: string;
224
- readonly hoverFrom: string;
225
- readonly hoverTo: string;
226
- readonly activeFrom: string;
227
- readonly activeTo: string;
228
- readonly disabledFrom: "rgba(130, 134, 139, 0.18)";
229
- readonly disabledTo: "rgba(130, 134, 139, 0.18)";
230
- readonly text: string;
231
- };
232
- readonly success: {
233
- readonly from: "#28c76f";
234
- readonly to: "#28c76f";
235
- readonly hoverFrom: "#28c76f";
236
- readonly hoverTo: "#28c76f";
237
- readonly activeFrom: "#006d38";
238
- readonly activeTo: "#006d38";
239
- readonly disabledFrom: "rgba(40, 199, 111, 0.18)";
240
- readonly disabledTo: "rgba(40, 199, 111, 0.18)";
241
- readonly text: string;
242
- };
243
- readonly danger: {
244
- readonly from: string;
245
- readonly to: string;
246
- readonly hoverFrom: string;
247
- readonly hoverTo: string;
248
- readonly activeFrom: string;
249
- readonly activeTo: string;
250
- readonly disabledFrom: "rgba(234, 84, 85, 0.18)";
251
- readonly disabledTo: "rgba(234, 84, 85, 0.18)";
252
- readonly text: string;
253
- };
254
- readonly warning: {
255
- readonly from: string;
256
- readonly to: string;
257
- readonly hoverFrom: string;
258
- readonly hoverTo: string;
259
- readonly activeFrom: string;
260
- readonly activeTo: string;
261
- readonly disabledFrom: "rgba(240, 175, 35, 0.18)";
262
- readonly disabledTo: "rgba(240, 175, 35, 0.18)";
263
- readonly text: string;
264
- };
265
- readonly info: {
266
- readonly from: string;
267
- readonly to: string;
268
- readonly hoverFrom: string;
269
- readonly hoverTo: string;
270
- readonly activeFrom: string;
271
- readonly activeTo: string;
272
- readonly disabledFrom: "rgba(0, 207, 232, 0.18)";
273
- readonly disabledTo: "rgba(0, 207, 232, 0.18)";
274
- readonly text: string;
275
- };
276
- readonly dark: {
277
- readonly from: string;
278
- readonly to: string;
279
- readonly hoverFrom: string;
280
- readonly hoverTo: string;
281
- readonly activeFrom: string;
282
- readonly activeTo: string;
283
- readonly disabledFrom: "rgba(75, 75, 75, 0.18)";
284
- readonly disabledTo: "rgba(75, 75, 75, 0.18)";
285
- readonly text: string;
286
- };
287
- readonly neutral: {
288
- readonly from: string;
289
- readonly to: string;
290
- readonly hoverFrom: string;
291
- readonly hoverTo: string;
292
- readonly activeFrom: string;
293
- readonly activeTo: string;
294
- readonly disabledFrom: "rgba(130, 134, 139, 0.18)";
295
- readonly disabledTo: "rgba(130, 134, 139, 0.18)";
296
- readonly text: string;
209
+ gradient: {
210
+ primary: {
211
+ from: `var(--${string})`;
212
+ to: `var(--${string})`;
213
+ hoverFrom: `var(--${string})`;
214
+ hoverTo: `var(--${string})`;
215
+ activeFrom: `var(--${string})`;
216
+ activeTo: `var(--${string})`;
217
+ disabledFrom: string;
218
+ disabledTo: string;
219
+ text: `var(--${string})`;
220
+ };
221
+ secondary: {
222
+ from: `var(--${string})`;
223
+ to: `var(--${string})`;
224
+ hoverFrom: `var(--${string})`;
225
+ hoverTo: `var(--${string})`;
226
+ activeFrom: `var(--${string})`;
227
+ activeTo: `var(--${string})`;
228
+ disabledFrom: string;
229
+ disabledTo: string;
230
+ text: `var(--${string})`;
231
+ };
232
+ success: {
233
+ from: string;
234
+ to: string;
235
+ hoverFrom: string;
236
+ hoverTo: string;
237
+ activeFrom: string;
238
+ activeTo: string;
239
+ disabledFrom: string;
240
+ disabledTo: string;
241
+ text: `var(--${string})`;
242
+ };
243
+ danger: {
244
+ from: `var(--${string})`;
245
+ to: `var(--${string})`;
246
+ hoverFrom: `var(--${string})`;
247
+ hoverTo: `var(--${string})`;
248
+ activeFrom: `var(--${string})`;
249
+ activeTo: `var(--${string})`;
250
+ disabledFrom: string;
251
+ disabledTo: string;
252
+ text: `var(--${string})`;
253
+ };
254
+ warning: {
255
+ from: `var(--${string})`;
256
+ to: `var(--${string})`;
257
+ hoverFrom: `var(--${string})`;
258
+ hoverTo: `var(--${string})`;
259
+ activeFrom: `var(--${string})`;
260
+ activeTo: `var(--${string})`;
261
+ disabledFrom: string;
262
+ disabledTo: string;
263
+ text: `var(--${string})`;
264
+ };
265
+ info: {
266
+ from: `var(--${string})`;
267
+ to: `var(--${string})`;
268
+ hoverFrom: `var(--${string})`;
269
+ hoverTo: `var(--${string})`;
270
+ activeFrom: `var(--${string})`;
271
+ activeTo: `var(--${string})`;
272
+ disabledFrom: string;
273
+ disabledTo: string;
274
+ text: `var(--${string})`;
275
+ };
276
+ dark: {
277
+ from: `var(--${string})`;
278
+ to: `var(--${string})`;
279
+ hoverFrom: `var(--${string})`;
280
+ hoverTo: `var(--${string})`;
281
+ activeFrom: `var(--${string})`;
282
+ activeTo: `var(--${string})`;
283
+ disabledFrom: string;
284
+ disabledTo: string;
285
+ text: `var(--${string})`;
286
+ };
287
+ neutral: {
288
+ from: `var(--${string})`;
289
+ to: `var(--${string})`;
290
+ hoverFrom: `var(--${string})`;
291
+ hoverTo: `var(--${string})`;
292
+ activeFrom: `var(--${string})`;
293
+ activeTo: `var(--${string})`;
294
+ disabledFrom: string;
295
+ disabledTo: string;
296
+ text: `var(--${string})`;
297
297
  };
298
298
  };
299
299
  };
300
- readonly field: {
301
- readonly label: string;
302
- readonly text: string;
303
- readonly placeholder: string;
304
- readonly helper: string;
305
- readonly background: string;
306
- readonly backgroundDisabled: string;
307
- readonly border: "#9ea7b8";
308
- readonly borderHover: string;
309
- readonly borderFocus: string;
310
- readonly icon: string;
300
+ field: {
301
+ label: `var(--${string})`;
302
+ text: `var(--${string})`;
303
+ placeholder: `var(--${string})`;
304
+ helper: `var(--${string})`;
305
+ background: `var(--${string})`;
306
+ backgroundDisabled: `var(--${string})`;
307
+ border: "#9ea7b8";
308
+ borderHover: `var(--${string})`;
309
+ borderFocus: `var(--${string})`;
310
+ icon: `var(--${string})`;
311
311
  };
312
- readonly table: {
313
- readonly headerBackground: "#f1f4f9";
314
- readonly bodyBackground: "#f2f4f6";
315
- readonly border: string;
316
- readonly text: string;
312
+ table: {
313
+ headerBackground: "#f1f4f9";
314
+ bodyBackground: "#f2f4f6";
315
+ border: `var(--${string})`;
316
+ text: `var(--${string})`;
317
317
  };
318
- readonly badge: {
319
- readonly filled: {
320
- readonly primary: {
321
- readonly background: string;
322
- readonly text: string;
318
+ badge: {
319
+ filled: {
320
+ primary: {
321
+ background: `var(--${string})`;
322
+ text: `var(--${string})`;
323
323
  };
324
- readonly neutral: {
325
- readonly background: string;
326
- readonly text: string;
324
+ neutral: {
325
+ background: `var(--${string})`;
326
+ text: `var(--${string})`;
327
327
  };
328
328
  };
329
- readonly outline: {
330
- readonly primary: {
331
- readonly background: string;
332
- readonly border: string;
333
- readonly text: string;
329
+ outline: {
330
+ primary: {
331
+ background: `var(--${string})`;
332
+ border: `var(--${string})`;
333
+ text: `var(--${string})`;
334
334
  };
335
- readonly neutral: {
336
- readonly background: string;
337
- readonly border: string;
338
- readonly text: string;
335
+ neutral: {
336
+ background: `var(--${string})`;
337
+ border: `var(--${string})`;
338
+ text: `var(--${string})`;
339
339
  };
340
340
  };
341
- readonly muted: {
342
- readonly primary: {
343
- readonly background: "rgba(33, 81, 236, 0.12)";
344
- readonly border: string;
345
- readonly text: string;
341
+ muted: {
342
+ primary: {
343
+ background: "rgba(33, 81, 236, 0.12)";
344
+ border: `var(--${string})`;
345
+ text: `var(--${string})`;
346
346
  };
347
- readonly neutral: {
348
- readonly background: "rgba(158, 167, 184, 0.12)";
349
- readonly border: string;
350
- readonly text: string;
347
+ neutral: {
348
+ background: "rgba(158, 167, 184, 0.12)";
349
+ border: `var(--${string})`;
350
+ text: `var(--${string})`;
351
351
  };
352
352
  };
353
353
  };
354
- readonly chip: {
355
- readonly background: string;
356
- readonly border: string;
357
- readonly text: string;
358
- readonly selected: {
359
- readonly basic: {
360
- readonly background: "rgba(33, 81, 236, 0.12)";
361
- readonly border: string;
362
- readonly text: string;
363
- };
364
- readonly check: {
365
- readonly background: "rgba(33, 81, 236, 0.12)";
366
- readonly border: string;
367
- readonly text: string;
368
- };
369
- readonly file: {
370
- readonly background: "rgba(39, 194, 129, 0.12)";
371
- readonly border: "#28c76f";
372
- readonly text: "#006d38";
373
- };
374
- readonly link: {
375
- readonly background: string;
376
- readonly border: string;
377
- readonly text: string;
354
+ chip: {
355
+ background: `var(--${string})`;
356
+ border: `var(--${string})`;
357
+ text: `var(--${string})`;
358
+ selected: {
359
+ basic: {
360
+ background: "rgba(33, 81, 236, 0.12)";
361
+ border: `var(--${string})`;
362
+ text: `var(--${string})`;
363
+ };
364
+ check: {
365
+ background: "rgba(33, 81, 236, 0.12)";
366
+ border: `var(--${string})`;
367
+ text: `var(--${string})`;
368
+ };
369
+ file: {
370
+ background: "rgba(39, 194, 129, 0.12)";
371
+ border: string;
372
+ text: "#006d38";
373
+ };
374
+ link: {
375
+ background: `var(--${string})`;
376
+ border: `var(--${string})`;
377
+ text: `var(--${string})`;
378
378
  };
379
379
  };
380
380
  };
381
- readonly alert: {
382
- readonly info: {
383
- readonly background: "rgba(0, 207, 232, 0.12)";
384
- readonly border: string;
385
- readonly text: string;
386
- readonly icon: "#006876";
381
+ alert: {
382
+ info: {
383
+ background: "rgba(0, 207, 232, 0.12)";
384
+ border: `var(--${string})`;
385
+ text: `var(--${string})`;
386
+ icon: "#006876";
387
387
  };
388
- readonly neutral: {
389
- readonly background: string;
390
- readonly border: string;
391
- readonly text: string;
392
- readonly icon: string;
388
+ neutral: {
389
+ background: `var(--${string})`;
390
+ border: `var(--${string})`;
391
+ text: `var(--${string})`;
392
+ icon: `var(--${string})`;
393
393
  };
394
- readonly action: {
395
- readonly primary: {
396
- readonly background: string;
397
- readonly hover: string;
398
- readonly active: string;
399
- readonly text: string;
400
- };
401
- readonly warning: {
402
- readonly background: string;
403
- readonly hover: string;
404
- readonly active: string;
405
- readonly text: string;
394
+ action: {
395
+ primary: {
396
+ background: `var(--${string})`;
397
+ hover: `var(--${string})`;
398
+ active: `var(--${string})`;
399
+ text: `var(--${string})`;
400
+ };
401
+ warning: {
402
+ background: `var(--${string})`;
403
+ hover: `var(--${string})`;
404
+ active: `var(--${string})`;
405
+ text: `var(--${string})`;
406
406
  };
407
407
  };
408
408
  };