@recursica/mui-adapter 0.18.0 → 0.19.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 (54) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/SETUP.md +1 -1
  3. package/dist/mui-adapter.cjs +172 -23
  4. package/dist/mui-adapter.cjs.map +1 -1
  5. package/dist/mui-adapter.css +1 -1
  6. package/dist/mui-adapter.js +12963 -4694
  7. package/dist/mui-adapter.js.map +1 -1
  8. package/dist/src/components/Tree/Tree.d.ts +9 -5
  9. package/llms.txt +2 -0
  10. package/package.json +6 -1
  11. package/src/components/Accordion/Accordion.module.css +98 -62
  12. package/src/components/Autocomplete/Autocomplete.module.css +50 -47
  13. package/src/components/Autocomplete/Autocomplete.tsx +2 -2
  14. package/src/components/Avatar/Avatar.module.css +7 -7
  15. package/src/components/Badge/Badge.module.css +8 -8
  16. package/src/components/Button/Button.module.css +25 -43
  17. package/src/components/Card/Card.module.css +3 -3
  18. package/src/components/Checkbox/Checkbox.module.css +57 -16
  19. package/src/components/Chip/Chip.module.css +32 -20
  20. package/src/components/Dropdown/Dropdown.module.css +47 -44
  21. package/src/components/Dropdown/Dropdown.tsx +2 -2
  22. package/src/components/FormControlWrapper/FormControlWrapper.module.css +12 -12
  23. package/src/components/HoverCard/HoverCard.module.css +1 -1
  24. package/src/components/Label/Label.module.css +20 -3
  25. package/src/components/Layer/USAGE.md +50 -0
  26. package/src/components/Link/Link.module.css +18 -71
  27. package/src/components/Loader/Loader.module.css +3 -3
  28. package/src/components/Menu/Menu.module.css +33 -41
  29. package/src/components/Modal/Modal.module.css +27 -11
  30. package/src/components/NumberInput/NumberInput.module.css +39 -37
  31. package/src/components/NumberInput/NumberInput.tsx +2 -2
  32. package/src/components/Pagination/Pagination.module.css +10 -43
  33. package/src/components/Panel/Panel.module.css +3 -3
  34. package/src/components/Radio/Radio.module.css +32 -15
  35. package/src/components/ReadOnlyField/ReadOnlyField.module.css +1 -1
  36. package/src/components/RecursicaThemeProvider/USAGE.md +60 -0
  37. package/src/components/SegmentedControl/SegmentedControl.module.css +37 -29
  38. package/src/components/Slider/Slider.module.css +51 -35
  39. package/src/components/Stepper/Stepper.module.css +3 -3
  40. package/src/components/Switch/Switch.module.css +27 -11
  41. package/src/components/Tabs/Tabs.module.css +309 -166
  42. package/src/components/TextArea/TextArea.module.css +36 -21
  43. package/src/components/TextArea/TextArea.tsx +2 -2
  44. package/src/components/TextField/TextField.module.css +38 -33
  45. package/src/components/TextField/TextField.tsx +2 -2
  46. package/src/components/Timeline/IMPLEMENTATION_NOTES.md +5 -0
  47. package/src/components/Timeline/Timeline.module.css +35 -34
  48. package/src/components/Toast/Toast.module.css +24 -11
  49. package/src/components/Tooltip/Tooltip.module.css +4 -2
  50. package/src/components/Tree/IMPLEMENTATION_NOTES.md +21 -0
  51. package/src/components/Tree/Tree.module.css +204 -39
  52. package/src/components/Tree/Tree.stories.tsx +81 -4
  53. package/src/components/Tree/Tree.tsx +214 -13
  54. package/src/components/Tree/USAGE.md +40 -3
package/src/components/Tabs/Tabs.module.css CHANGED
@@ -1,4 +1,4 @@
1
- /*
1
+ /*
2
2
  Recursica Tabs CSS module natively binding to Figma variables.
3
3
  */
4
4
 
@@ -6,7 +6,7 @@
6
6
  width: 100%;
7
7
  }
8
8
 
9
- /*
9
+ /*
10
10
  Mantine Tabs Anatomy:
11
11
  .root
12
12
  .list (container for tabs)
@@ -15,97 +15,75 @@
15
15
  */
16
16
 
17
17
  /* ---------------------------------
18
- ORIENTATION & SPACING
18
+ VARIANTS
19
+ Sizing, geometry, colors, and typography are all scoped per style (default/outline/pills) in
20
+ the token schema now — nothing is shared flat across variants anymore. Content-alignment,
21
+ space-between-tabs, and the tabs-content-gap remain additionally scoped per orientation.
19
22
  --------------------------------- */
20
23
 
21
- /* Horizontal Orientation */
22
- .root[data-orientation="horizontal"] {
24
+ .root[data-variant="default"][data-orientation] {
23
25
  --tabs-element-gap: var(
24
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_element-gap
26
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_element-gap
25
27
  );
26
28
  --tabs-horizontal-padding: var(
27
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_horizontal-padding
28
- );
29
- --tabs-icon-size: var(
30
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_icon-size
31
- );
32
- --tabs-space-between-tabs: var(
33
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_space-between-tabs
29
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_horizontal-padding
34
30
  );
35
31
  --tabs-vertical-padding: var(
36
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_vertical-padding
37
- );
38
- --tabs-content-alignment: var(
39
- --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_tab-content-alignment
40
- );
41
- }
42
-
43
- .root[data-orientation="horizontal"] .list {
44
- gap: var(--tabs-space-between-tabs);
45
- width: 100%;
46
- }
47
-
48
- /* Vertical Orientation */
49
- .root[data-orientation="vertical"] {
50
- --tabs-element-gap: var(
51
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_element-gap
52
- );
53
- --tabs-horizontal-padding: var(
54
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_horizontal-padding
32
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_vertical-padding
55
33
  );
56
34
  --tabs-icon-size: var(
57
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_icon-size
58
- );
59
- --tabs-space-between-tabs: var(
60
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_space-between-tabs
35
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_icon-size
61
36
  );
62
- --tabs-vertical-padding: var(
63
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_vertical-padding
37
+ --tabs-min-width: var(
38
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_min-width
64
39
  );
65
- --tabs-content-alignment: var(
66
- --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_tab-content-alignment
40
+ --tabs-max-width: var(
41
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_max-width
67
42
  );
68
- }
69
43
 
70
- .root[data-orientation="vertical"] .list {
71
- gap: var(--tabs-space-between-tabs);
72
- }
73
-
74
- /* ---------------------------------
75
- VARIANTS
76
- --------------------------------- */
77
-
78
- .root[data-variant="default"][data-orientation] {
79
44
  --tabs-active-border-size: var(
80
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_border-size
45
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_border-size
81
46
  ) !important;
82
47
  --tabs-inactive-border-size: var(
83
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_inactive_border-size
48
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_border-size
84
49
  ) !important;
85
50
  --tabs-border-radius: var(
86
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_border-radius
51
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_properties_border-radius
87
52
  ) !important;
88
53
  --tabs-border-color: var(
89
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_inactive_colors_border-color
54
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_border-color
90
55
  ) !important;
91
56
  --tabs-color: var(
92
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_border-color
57
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_border-color
93
58
  ) !important;
94
- --tabs-hover-color: var(
95
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-color
59
+ }
60
+
61
+ .root[data-variant="default"][data-orientation="horizontal"] {
62
+ --tabs-content-alignment: var(
63
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_orientation_horizontal_properties_tab-content-alignment
96
64
  );
97
- --tabs-hover-opacity: var(
98
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-opacity
65
+ --tabs-space-between-tabs: var(
66
+ --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_space-between-tabs
99
67
  );
100
68
  }
101
-
102
69
  .root[data-variant="default"][data-orientation="horizontal"] .list {
70
+ gap: var(--tabs-space-between-tabs);
71
+ width: 100%;
103
72
  margin-bottom: var(
104
73
  --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_tabs-content-gap
105
74
  );
106
75
  }
107
76
 
77
+ .root[data-variant="default"][data-orientation="vertical"] {
78
+ --tabs-content-alignment: var(
79
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_orientation_vertical_properties_tab-content-alignment
80
+ );
81
+ --tabs-space-between-tabs: var(
82
+ --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_space-between-tabs
83
+ );
84
+ }
108
85
  .root[data-variant="default"][data-orientation="vertical"] .list {
86
+ gap: var(--tabs-space-between-tabs);
109
87
  margin-right: var(
110
88
  --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_tabs-content-gap
111
89
  );
@@ -113,36 +91,68 @@
113
91
 
114
92
  /* Outline Variant */
115
93
  .root[data-variant="outline"][data-orientation] {
94
+ --tabs-element-gap: var(
95
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_element-gap
96
+ );
97
+ --tabs-horizontal-padding: var(
98
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_horizontal-padding
99
+ );
100
+ --tabs-vertical-padding: var(
101
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_vertical-padding
102
+ );
103
+ --tabs-icon-size: var(
104
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_icon-size
105
+ );
106
+ --tabs-min-width: var(
107
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_min-width
108
+ );
109
+ --tabs-max-width: var(
110
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_max-width
111
+ );
112
+
116
113
  --tabs-active-border-size: var(
117
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_border-size
114
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_border-size
118
115
  ) !important;
119
116
  --tabs-inactive-border-size: var(
120
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_inactive_border-size
117
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_border-size
121
118
  ) !important;
122
119
  --tabs-border-radius: var(
123
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_border-radius
120
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_properties_border-radius
124
121
  ) !important;
125
122
  --tabs-border-color: var(
126
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_inactive_colors_border-color
123
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_border-color
127
124
  ) !important;
128
125
  --tabs-color: var(
129
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_border-color
126
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_border-color
130
127
  ) !important;
131
- --tabs-hover-color: var(
132
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-color
128
+ }
129
+
130
+ .root[data-variant="outline"][data-orientation="horizontal"] {
131
+ --tabs-content-alignment: var(
132
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_orientation_horizontal_properties_tab-content-alignment
133
133
  );
134
- --tabs-hover-opacity: var(
135
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-opacity
134
+ --tabs-space-between-tabs: var(
135
+ --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_space-between-tabs
136
136
  );
137
137
  }
138
-
139
138
  .root[data-variant="outline"][data-orientation="horizontal"] .list {
139
+ gap: var(--tabs-space-between-tabs);
140
+ width: 100%;
140
141
  margin-bottom: var(
141
142
  --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_tabs-content-gap
142
143
  );
143
144
  }
144
145
 
146
+ .root[data-variant="outline"][data-orientation="vertical"] {
147
+ --tabs-content-alignment: var(
148
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_orientation_vertical_properties_tab-content-alignment
149
+ );
150
+ --tabs-space-between-tabs: var(
151
+ --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_space-between-tabs
152
+ );
153
+ }
145
154
  .root[data-variant="outline"][data-orientation="vertical"] .list {
155
+ gap: var(--tabs-space-between-tabs);
146
156
  margin-right: var(
147
157
  --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_tabs-content-gap
148
158
  );
@@ -150,30 +160,62 @@
150
160
 
151
161
  /* Pills Variant */
152
162
  .root[data-variant="pills"][data-orientation] {
163
+ --tabs-element-gap: var(
164
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_element-gap
165
+ );
166
+ --tabs-horizontal-padding: var(
167
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_horizontal-padding
168
+ );
169
+ --tabs-vertical-padding: var(
170
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_vertical-padding
171
+ );
172
+ --tabs-icon-size: var(
173
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_icon-size
174
+ );
175
+ --tabs-min-width: var(
176
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_min-width
177
+ );
178
+ --tabs-max-width: var(
179
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_max-width
180
+ );
181
+
153
182
  --tabs-active-border-size: var(
154
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_active_border-size
183
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_border-size
155
184
  );
156
185
  --tabs-inactive-border-size: var(
157
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_inactive_border-size
186
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_border-size
158
187
  );
159
188
  --tabs-border-radius: var(
160
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_border-radius
189
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_properties_border-radius
161
190
  );
162
- --tabs-hover-color: var(
163
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-color
191
+ }
192
+
193
+ .root[data-variant="pills"][data-orientation="horizontal"] {
194
+ --tabs-content-alignment: var(
195
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_orientation_horizontal_properties_tab-content-alignment
164
196
  );
165
- --tabs-hover-opacity: var(
166
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-opacity
197
+ --tabs-space-between-tabs: var(
198
+ --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_space-between-tabs
167
199
  );
168
200
  }
169
-
170
201
  .root[data-variant="pills"][data-orientation="horizontal"] .list {
202
+ gap: var(--tabs-space-between-tabs);
203
+ width: 100%;
171
204
  margin-bottom: var(
172
205
  --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_tabs-content-gap
173
206
  );
174
207
  }
175
208
 
209
+ .root[data-variant="pills"][data-orientation="vertical"] {
210
+ --tabs-content-alignment: var(
211
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_orientation_vertical_properties_tab-content-alignment
212
+ );
213
+ --tabs-space-between-tabs: var(
214
+ --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_space-between-tabs
215
+ );
216
+ }
176
217
  .root[data-variant="pills"][data-orientation="vertical"] .list {
218
+ gap: var(--tabs-space-between-tabs);
177
219
  margin-right: var(
178
220
  --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_tabs-content-gap
179
221
  );
@@ -183,8 +225,8 @@
183
225
  TAB ELEMENT
184
226
  --------------------------------- */
185
227
  .root .tab {
186
- min-width: var(--recursica_ui-kit_components_tabs_properties_min-width);
187
- max-width: var(--recursica_ui-kit_components_tabs_properties_max-width);
228
+ min-width: var(--tabs-min-width);
229
+ max-width: var(--tabs-max-width);
188
230
  padding: var(--tabs-vertical-padding) var(--tabs-horizontal-padding);
189
231
  gap: var(--tabs-element-gap);
190
232
  display: flex;
@@ -192,63 +234,10 @@
192
234
  justify-content: var(--tabs-content-alignment);
193
235
  cursor: pointer;
194
236
  position: relative;
195
-
196
- /* Typography (Inactive by default) */
197
- font-family: var(
198
- --recursica_ui-kit_components_tabs_properties_inactive-text_font-family
199
- );
200
- font-size: var(
201
- --recursica_ui-kit_components_tabs_properties_inactive-text_font-size
202
- );
203
- font-style: var(
204
- --recursica_ui-kit_components_tabs_properties_inactive-text_font-style
205
- );
206
- font-weight: var(
207
- --recursica_ui-kit_components_tabs_properties_inactive-text_font-weight
208
- );
209
- letter-spacing: var(
210
- --recursica_ui-kit_components_tabs_properties_inactive-text_letter-spacing
211
- );
212
- line-height: var(
213
- --recursica_ui-kit_components_tabs_properties_inactive-text_line-height
214
- );
215
- text-decoration: var(
216
- --recursica_ui-kit_components_tabs_properties_inactive-text_text-decoration
217
- );
218
- text-transform: var(
219
- --recursica_ui-kit_components_tabs_properties_inactive-text_text-transform
220
- );
221
237
  }
222
238
 
223
239
  /* Hover effect (moved to bottom for specificity, see end of file) */
224
240
 
225
- .root .tab[data-active] {
226
- font-family: var(
227
- --recursica_ui-kit_components_tabs_properties_active-text_font-family
228
- );
229
- font-size: var(
230
- --recursica_ui-kit_components_tabs_properties_active-text_font-size
231
- );
232
- font-style: var(
233
- --recursica_ui-kit_components_tabs_properties_active-text_font-style
234
- );
235
- font-weight: var(
236
- --recursica_ui-kit_components_tabs_properties_active-text_font-weight
237
- );
238
- letter-spacing: var(
239
- --recursica_ui-kit_components_tabs_properties_active-text_letter-spacing
240
- );
241
- line-height: var(
242
- --recursica_ui-kit_components_tabs_properties_active-text_line-height
243
- );
244
- text-decoration: var(
245
- --recursica_ui-kit_components_tabs_properties_active-text_text-decoration
246
- );
247
- text-transform: var(
248
- --recursica_ui-kit_components_tabs_properties_active-text_text-transform
249
- );
250
- }
251
-
252
241
  /* Icon support */
253
242
  .root .tab svg {
254
243
  width: var(--tabs-icon-size);
@@ -261,13 +250,6 @@
261
250
  cursor: not-allowed;
262
251
  }
263
252
 
264
- /* ---------------------------------
265
- COLORS
266
- Because colors are defined per-layer and theme via generic variable structures,
267
- we rely on Mantine injecting the correct data-variant attributes, but we must
268
- map the colors in our CSS. Recursica handles dark/light automatically via root.
269
- --------------------------------- */
270
-
271
253
  /* ---------------------------------
272
254
  BORDER RADIUS GEOMETRY
273
255
  --------------------------------- */
@@ -303,98 +285,257 @@
303
285
  border-radius: var(--tabs-border-radius) 0 0 var(--tabs-border-radius);
304
286
  }
305
287
 
306
- /* Default Variant Colors */
288
+ /* ---------------------------------
289
+ COLORS & TYPOGRAPHY
290
+ Because colors are defined per-layer and theme via generic variable structures,
291
+ we rely on Mantine injecting the correct data-variant attributes, but we must
292
+ map the colors in our CSS. Recursica handles dark/light automatically via root.
293
+ Typography is now scoped per style (not shared flat across variants), so each
294
+ variant repeats its own inactive/active text rules.
295
+ --------------------------------- */
296
+
297
+ /* Default Variant Colors & Typography */
307
298
  .root[data-variant="default"] .tab {
308
299
  background-color: var(
309
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_inactive_colors_background
300
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_background-color
310
301
  );
311
302
  color: var(
312
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_inactive_colors_text-color
303
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_text-color
304
+ );
305
+
306
+ font-family: var(
307
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-family
308
+ );
309
+ font-size: var(
310
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-size
311
+ );
312
+ font-style: var(
313
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-style
314
+ );
315
+ font-weight: var(
316
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_font-weight
317
+ );
318
+ letter-spacing: var(
319
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_letter-spacing
320
+ );
321
+ line-height: var(
322
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_line-height
323
+ );
324
+ text-decoration: var(
325
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_text-decoration
326
+ );
327
+ text-transform: var(
328
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_text_text-transform
313
329
  );
314
330
  }
315
331
  .root[data-variant="default"] .tab svg {
316
332
  color: var(
317
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_inactive_colors_icon-color
333
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_inactive_properties_colors_icon-color
318
334
  );
319
335
  }
320
336
 
321
337
  .root[data-variant="default"] .tab[data-active] {
322
338
  background-color: var(
323
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_background
339
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_background-color
324
340
  );
325
341
  color: var(
326
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_text-color
342
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_text-color
343
+ );
344
+
345
+ font-family: var(
346
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-family
347
+ );
348
+ font-size: var(
349
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-size
350
+ );
351
+ font-style: var(
352
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-style
353
+ );
354
+ font-weight: var(
355
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_font-weight
356
+ );
357
+ letter-spacing: var(
358
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_letter-spacing
359
+ );
360
+ line-height: var(
361
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_line-height
362
+ );
363
+ text-decoration: var(
364
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_text-decoration
365
+ );
366
+ text-transform: var(
367
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_text_text-transform
327
368
  );
328
369
  }
329
370
  .root[data-variant="default"] .tab[data-active] svg {
330
371
  color: var(
331
- --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_icon-color
372
+ --recursica_ui-kit_components_tabs-item_variants_styles_default_variants_selection-states_active_properties_colors_icon-color
332
373
  );
333
374
  }
334
375
 
335
- /* Outline Variant Colors */
376
+ /* Outline Variant Colors & Typography */
336
377
  .root[data-variant="outline"] .tab {
337
378
  background-color: var(
338
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_inactive_colors_background
379
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_background-color
339
380
  );
340
381
  color: var(
341
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_inactive_colors_text-color
382
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_text-color
383
+ );
384
+
385
+ font-family: var(
386
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-family
387
+ );
388
+ font-size: var(
389
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-size
390
+ );
391
+ font-style: var(
392
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-style
393
+ );
394
+ font-weight: var(
395
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_font-weight
396
+ );
397
+ letter-spacing: var(
398
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_letter-spacing
399
+ );
400
+ line-height: var(
401
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_line-height
402
+ );
403
+ text-decoration: var(
404
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_text-decoration
405
+ );
406
+ text-transform: var(
407
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_text_text-transform
342
408
  );
343
409
  }
344
410
  .root[data-variant="outline"] .tab svg {
345
411
  color: var(
346
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_inactive_colors_icon-color
412
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_inactive_properties_colors_icon-color
347
413
  );
348
414
  }
349
415
 
350
416
  .root[data-variant="outline"] .tab[data-active] {
351
417
  background-color: var(
352
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_background
418
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_background-color
353
419
  );
354
420
  color: var(
355
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_text-color
421
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_text-color
422
+ );
423
+
424
+ font-family: var(
425
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-family
426
+ );
427
+ font-size: var(
428
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-size
429
+ );
430
+ font-style: var(
431
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-style
432
+ );
433
+ font-weight: var(
434
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_font-weight
435
+ );
436
+ letter-spacing: var(
437
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_letter-spacing
438
+ );
439
+ line-height: var(
440
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_line-height
441
+ );
442
+ text-decoration: var(
443
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_text-decoration
444
+ );
445
+ text-transform: var(
446
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_text_text-transform
356
447
  );
357
448
  }
358
449
  .root[data-variant="outline"] .tab[data-active] svg {
359
450
  color: var(
360
- --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_icon-color
451
+ --recursica_ui-kit_components_tabs-item_variants_styles_outline_variants_selection-states_active_properties_colors_icon-color
361
452
  );
362
453
  }
363
454
 
364
- /* Pills Variant Colors */
455
+ /* Pills Variant Colors & Typography */
365
456
  .root[data-variant="pills"] .tab {
366
457
  background-color: var(
367
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_inactive_colors_background
458
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_background-color
368
459
  );
369
460
  color: var(
370
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_inactive_colors_text-color
461
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_text-color
371
462
  );
372
463
  border: var(--tabs-inactive-border-size) solid
373
464
  var(
374
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_inactive_colors_border-color
465
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_border-color
375
466
  );
467
+
468
+ font-family: var(
469
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-family
470
+ );
471
+ font-size: var(
472
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-size
473
+ );
474
+ font-style: var(
475
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-style
476
+ );
477
+ font-weight: var(
478
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_font-weight
479
+ );
480
+ letter-spacing: var(
481
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_letter-spacing
482
+ );
483
+ line-height: var(
484
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_line-height
485
+ );
486
+ text-decoration: var(
487
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_text-decoration
488
+ );
489
+ text-transform: var(
490
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_text_text-transform
491
+ );
376
492
  }
377
493
  .root[data-variant="pills"] .tab svg {
378
494
  color: var(
379
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_inactive_colors_icon-color
495
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_inactive_properties_colors_icon-color
380
496
  );
381
497
  }
382
498
 
383
499
  .root[data-variant="pills"] .tab[data-active] {
384
500
  background-color: var(
385
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_active_colors_background
501
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_background-color
386
502
  );
387
503
  color: var(
388
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_active_colors_text-color
504
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_text-color
389
505
  );
390
506
  border: var(--tabs-active-border-size) solid
391
507
  var(
392
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_active_colors_border-color
508
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_border-color
393
509
  );
510
+
511
+ font-family: var(
512
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-family
513
+ );
514
+ font-size: var(
515
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-size
516
+ );
517
+ font-style: var(
518
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-style
519
+ );
520
+ font-weight: var(
521
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_font-weight
522
+ );
523
+ letter-spacing: var(
524
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_letter-spacing
525
+ );
526
+ line-height: var(
527
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_line-height
528
+ );
529
+ text-decoration: var(
530
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_text-decoration
531
+ );
532
+ text-transform: var(
533
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_text_text-transform
534
+ );
394
535
  }
395
536
  .root[data-variant="pills"] .tab[data-active] svg {
396
537
  color: var(
397
- --recursica_ui-kit_components_tabs_variants_styles_pills_properties_active_colors_icon-color
538
+ --recursica_ui-kit_components_tabs-item_variants_styles_pills_variants_selection-states_active_properties_colors_icon-color
398
539
  );
399
540
  }
400
541
 
@@ -403,14 +544,16 @@
403
544
  /* Recursica doesn't define panel colors intrinsically, leaves it to child content */
404
545
  }
405
546
 
406
- /* Hover state uses a pseudo-element to apply opacity to the background without fading the text */
547
+ /* Hover state uses a pseudo-element to apply opacity to the background without fading the text.
548
+ No per-variant hover-color/hover-opacity tokens exist anymore; use the generic overlay tokens
549
+ shared across components instead. */
407
550
  .root[data-variant] .tab:not([data-active]):hover::before {
408
551
  content: "";
409
552
  position: absolute;
410
553
  inset: 0;
411
554
  border-radius: inherit;
412
- background-color: var(--tabs-hover-color);
413
- opacity: var(--tabs-hover-opacity);
555
+ background-color: var(--recursica_brand_states_hover_color);
556
+ opacity: var(--recursica_brand_states_hover_opacity);
414
557
  pointer-events: none;
415
558
  z-index: 0;
416
559
  }