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