rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

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 (247) hide show
  1. package/AutoComplete/styles/index.css +156 -161
  2. package/AvatarGroup/styles/index.css +1 -10
  3. package/Badge/styles/index.css +21 -21
  4. package/Button/styles/index.css +78 -63
  5. package/ButtonGroup/styles/index.css +15 -12
  6. package/ButtonToolbar/styles/index.css +1 -10
  7. package/CHANGELOG.md +9 -0
  8. package/Calendar/styles/index.css +92 -67
  9. package/Card/styles/index.css +7 -7
  10. package/CascadeTree/styles/index.css +8 -9
  11. package/Cascader/styles/index.css +160 -164
  12. package/CheckPicker/styles/index.css +173 -178
  13. package/CheckTree/styles/index.css +175 -180
  14. package/CheckTreePicker/styles/index.css +175 -180
  15. package/Checkbox/styles/index.css +21 -28
  16. package/CheckboxGroup/styles/index.css +1 -1
  17. package/DateInput/styles/index.css +8 -18
  18. package/DatePicker/styles/index.css +173 -168
  19. package/DateRangeInput/styles/index.css +8 -18
  20. package/DateRangePicker/styles/index.css +173 -168
  21. package/Dropdown/styles/index.css +110 -94
  22. package/IconButton/styles/index.css +95 -79
  23. package/InlineEdit/styles/index.css +12 -19
  24. package/Input/styles/index.css +8 -18
  25. package/InputGroup/styles/index.css +31 -38
  26. package/InputNumber/styles/index.css +115 -100
  27. package/InputPicker/styles/index.css +156 -161
  28. package/List/styles/index.css +10 -10
  29. package/Loader/styles/index.css +16 -16
  30. package/Menu/styles/index.css +2 -2
  31. package/Message/styles/index.css +2 -2
  32. package/MultiCascadeTree/styles/index.css +178 -191
  33. package/MultiCascader/styles/index.css +178 -200
  34. package/Nav/styles/index.css +162 -146
  35. package/Navbar/styles/index.css +140 -124
  36. package/NumberInput/styles/index.css +115 -100
  37. package/Pagination/styles/index.css +177 -200
  38. package/PasswordInput/styles/index.css +36 -43
  39. package/PinInput/styles/index.css +12 -22
  40. package/Radio/styles/index.css +22 -29
  41. package/RadioGroup/styles/index.css +11 -11
  42. package/SelectPicker/styles/index.css +156 -161
  43. package/Sidenav/styles/index.css +122 -129
  44. package/Stack/styles/index.css +1 -10
  45. package/Stat/styles/index.css +95 -79
  46. package/Steps/styles/index.css +26 -25
  47. package/Table/styles/index.css +11 -0
  48. package/Tabs/styles/index.css +162 -146
  49. package/Tag/styles/index.css +112 -96
  50. package/TagInput/styles/index.css +174 -179
  51. package/TagPicker/styles/index.css +174 -179
  52. package/TimePicker/styles/index.css +173 -168
  53. package/TimeRangePicker/styles/index.css +173 -168
  54. package/Toggle/styles/index.css +27 -30
  55. package/Tree/styles/index.css +157 -162
  56. package/TreePicker/styles/index.css +157 -162
  57. package/Uploader/styles/index.css +94 -65
  58. package/cjs/Badge/Badge.js +16 -11
  59. package/cjs/Breadcrumb/Breadcrumb.d.ts +2 -2
  60. package/cjs/Button/Button.js +9 -7
  61. package/cjs/ButtonGroup/ButtonGroup.js +7 -7
  62. package/cjs/Card/Card.js +6 -6
  63. package/cjs/Checkbox/Checkbox.js +6 -7
  64. package/cjs/CheckboxGroup/CheckboxGroup.js +3 -4
  65. package/cjs/Dropdown/Dropdown.js +3 -4
  66. package/cjs/Dropdown/DropdownItem.js +4 -4
  67. package/cjs/Dropdown/DropdownMenu.js +9 -10
  68. package/cjs/FormControl/FormControl.d.ts +1 -1
  69. package/cjs/FormControlLabel/FormControlLabel.d.ts +1 -1
  70. package/cjs/FormHelpText/FormHelpText.d.ts +1 -1
  71. package/cjs/IconButton/IconButton.d.ts +1 -1
  72. package/cjs/IconButton/IconButton.js +9 -9
  73. package/cjs/Image/Image.d.ts +1 -1
  74. package/cjs/InlineEdit/InlineEdit.js +3 -2
  75. package/cjs/InputGroup/InputGroup.js +12 -14
  76. package/cjs/InputGroup/InputGroupAddon.d.ts +2 -2
  77. package/cjs/InputPicker/InputAutosize.js +4 -6
  78. package/cjs/List/List.d.ts +1 -1
  79. package/cjs/List/List.js +7 -8
  80. package/cjs/List/ListItem.d.ts +2 -2
  81. package/cjs/List/ListItem.js +4 -4
  82. package/cjs/Loader/Loader.js +8 -7
  83. package/cjs/Menu/MenuSeparator.d.ts +2 -2
  84. package/cjs/Nav/Nav.d.ts +2 -2
  85. package/cjs/Nav/Nav.js +12 -13
  86. package/cjs/Nav/NavDropdownItem.js +4 -4
  87. package/cjs/Nav/NavDropdownMenu.js +10 -13
  88. package/cjs/Nav/NavItem.d.ts +2 -2
  89. package/cjs/Nav/NavItem.js +6 -8
  90. package/cjs/Navbar/Navbar.js +6 -6
  91. package/cjs/Navbar/NavbarDropdown.d.ts +1 -1
  92. package/cjs/Navbar/NavbarDropdown.js +3 -4
  93. package/cjs/Navbar/NavbarDropdownItem.js +4 -4
  94. package/cjs/Navbar/NavbarDropdownMenu.js +8 -11
  95. package/cjs/NumberInput/NumberInput.d.ts +1 -1
  96. package/cjs/Pagination/Pagination.js +3 -2
  97. package/cjs/Pagination/PaginationButton.d.ts +3 -3
  98. package/cjs/Pagination/PaginationButton.js +9 -17
  99. package/cjs/Pagination/PaginationGroup.js +2 -1
  100. package/cjs/Panel/PanelHeader.d.ts +1 -1
  101. package/cjs/Radio/Radio.js +6 -6
  102. package/cjs/RadioGroup/RadioGroup.js +4 -4
  103. package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  104. package/cjs/Sidenav/Sidenav.js +3 -2
  105. package/cjs/Sidenav/SidenavDropdown.js +3 -5
  106. package/cjs/Sidenav/SidenavDropdownItem.js +4 -4
  107. package/cjs/Sidenav/SidenavDropdownMenu.js +10 -13
  108. package/cjs/Sidenav/SidenavItem.d.ts +2 -2
  109. package/cjs/Sidenav/SidenavItem.js +4 -5
  110. package/cjs/Slider/Handle.d.ts +1 -1
  111. package/cjs/Stack/Stack.d.ts +1 -17
  112. package/cjs/Stack/Stack.js +3 -4
  113. package/cjs/Stack/StackItem.d.ts +4 -5
  114. package/cjs/Stack/StackItem.js +4 -10
  115. package/cjs/Steps/StepItem.js +7 -8
  116. package/cjs/Steps/Steps.d.ts +2 -1
  117. package/cjs/Steps/Steps.js +32 -34
  118. package/cjs/Tabs/Tabs.js +1 -1
  119. package/cjs/Tag/Tag.js +5 -2
  120. package/cjs/Toggle/Toggle.d.ts +1 -1
  121. package/cjs/Toggle/Toggle.js +7 -6
  122. package/cjs/Tree/types.d.ts +2 -2
  123. package/cjs/Uploader/Uploader.d.ts +2 -2
  124. package/cjs/internals/Box/Box.d.ts +1 -0
  125. package/cjs/internals/Box/index.d.ts +1 -1
  126. package/cjs/internals/Box/utils.js +5 -4
  127. package/cjs/internals/InputBase/InputBase.d.ts +1 -1
  128. package/cjs/internals/InputBase/InputBase.js +3 -2
  129. package/cjs/internals/Menu/MenuItem.js +1 -1
  130. package/cjs/internals/Overlay/Modal.d.ts +1 -1
  131. package/cjs/internals/Picker/PickerToggle.js +2 -4
  132. package/cjs/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  133. package/cjs/internals/Tree/TreeView.d.ts +2 -2
  134. package/cjs/internals/hooks/useCustom.js +24 -7
  135. package/cjs/internals/styled-system/css-alias.d.ts +7 -0
  136. package/cjs/internals/styled-system/css-alias.js +391 -0
  137. package/cjs/internals/styled-system/css-properties.d.ts +6 -0
  138. package/cjs/internals/styled-system/css-properties.js +30 -0
  139. package/cjs/internals/styled-system/index.d.ts +1 -1
  140. package/cjs/internals/styled-system/index.js +4 -4
  141. package/cjs/internals/styled-system/responsive.d.ts +0 -4
  142. package/cjs/internals/styled-system/responsive.js +12 -33
  143. package/cjs/internals/styled-system/types.d.ts +59 -5
  144. package/cjs/internals/styled-system/useStyled.js +3 -3
  145. package/cjs/internals/types/html.d.ts +6 -6
  146. package/cjs/internals/types/picker.d.ts +1 -1
  147. package/dist/rsuite-no-reset.css +641 -641
  148. package/dist/rsuite-no-reset.min.css +1 -1
  149. package/dist/rsuite.css +641 -641
  150. package/dist/rsuite.js +60 -60
  151. package/dist/rsuite.min.css +1 -1
  152. package/dist/rsuite.min.js +1 -1
  153. package/dist/rsuite.min.js.map +1 -1
  154. package/esm/Badge/Badge.js +16 -11
  155. package/esm/Breadcrumb/Breadcrumb.d.ts +2 -2
  156. package/esm/Button/Button.js +9 -7
  157. package/esm/ButtonGroup/ButtonGroup.js +7 -7
  158. package/esm/Card/Card.js +6 -6
  159. package/esm/Checkbox/Checkbox.js +6 -7
  160. package/esm/CheckboxGroup/CheckboxGroup.js +3 -4
  161. package/esm/Dropdown/Dropdown.js +3 -4
  162. package/esm/Dropdown/DropdownItem.js +4 -4
  163. package/esm/Dropdown/DropdownMenu.js +9 -10
  164. package/esm/FormControl/FormControl.d.ts +1 -1
  165. package/esm/FormControlLabel/FormControlLabel.d.ts +1 -1
  166. package/esm/FormHelpText/FormHelpText.d.ts +1 -1
  167. package/esm/IconButton/IconButton.d.ts +1 -1
  168. package/esm/IconButton/IconButton.js +9 -9
  169. package/esm/Image/Image.d.ts +1 -1
  170. package/esm/InlineEdit/InlineEdit.js +3 -2
  171. package/esm/InputGroup/InputGroup.js +12 -14
  172. package/esm/InputGroup/InputGroupAddon.d.ts +2 -2
  173. package/esm/InputPicker/InputAutosize.js +4 -6
  174. package/esm/List/List.d.ts +1 -1
  175. package/esm/List/List.js +7 -8
  176. package/esm/List/ListItem.d.ts +2 -2
  177. package/esm/List/ListItem.js +4 -4
  178. package/esm/Loader/Loader.js +8 -7
  179. package/esm/Menu/MenuSeparator.d.ts +2 -2
  180. package/esm/Nav/Nav.d.ts +2 -2
  181. package/esm/Nav/Nav.js +12 -13
  182. package/esm/Nav/NavDropdownItem.js +4 -4
  183. package/esm/Nav/NavDropdownMenu.js +10 -13
  184. package/esm/Nav/NavItem.d.ts +2 -2
  185. package/esm/Nav/NavItem.js +6 -8
  186. package/esm/Navbar/Navbar.js +7 -7
  187. package/esm/Navbar/NavbarDropdown.d.ts +1 -1
  188. package/esm/Navbar/NavbarDropdown.js +3 -4
  189. package/esm/Navbar/NavbarDropdownItem.js +4 -4
  190. package/esm/Navbar/NavbarDropdownMenu.js +8 -11
  191. package/esm/NumberInput/NumberInput.d.ts +1 -1
  192. package/esm/Pagination/Pagination.js +3 -2
  193. package/esm/Pagination/PaginationButton.d.ts +3 -3
  194. package/esm/Pagination/PaginationButton.js +9 -16
  195. package/esm/Pagination/PaginationGroup.js +2 -1
  196. package/esm/Panel/PanelHeader.d.ts +1 -1
  197. package/esm/Radio/Radio.js +6 -6
  198. package/esm/RadioGroup/RadioGroup.js +4 -4
  199. package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +1 -1
  200. package/esm/Sidenav/Sidenav.js +3 -2
  201. package/esm/Sidenav/SidenavDropdown.js +3 -5
  202. package/esm/Sidenav/SidenavDropdownItem.js +4 -4
  203. package/esm/Sidenav/SidenavDropdownMenu.js +10 -13
  204. package/esm/Sidenav/SidenavItem.d.ts +2 -2
  205. package/esm/Sidenav/SidenavItem.js +4 -5
  206. package/esm/Slider/Handle.d.ts +1 -1
  207. package/esm/Stack/Stack.d.ts +1 -17
  208. package/esm/Stack/Stack.js +3 -4
  209. package/esm/Stack/StackItem.d.ts +4 -5
  210. package/esm/Stack/StackItem.js +5 -11
  211. package/esm/Steps/StepItem.js +7 -8
  212. package/esm/Steps/Steps.d.ts +2 -1
  213. package/esm/Steps/Steps.js +31 -34
  214. package/esm/Tabs/Tabs.js +1 -1
  215. package/esm/Tag/Tag.js +5 -2
  216. package/esm/Toggle/Toggle.d.ts +1 -1
  217. package/esm/Toggle/Toggle.js +7 -6
  218. package/esm/Tree/types.d.ts +2 -2
  219. package/esm/Uploader/Uploader.d.ts +2 -2
  220. package/esm/internals/Box/Box.d.ts +1 -0
  221. package/esm/internals/Box/index.d.ts +1 -1
  222. package/esm/internals/Box/utils.js +6 -5
  223. package/esm/internals/InputBase/InputBase.d.ts +1 -1
  224. package/esm/internals/InputBase/InputBase.js +3 -2
  225. package/esm/internals/Menu/MenuItem.js +1 -1
  226. package/esm/internals/Overlay/Modal.d.ts +1 -1
  227. package/esm/internals/Picker/PickerToggle.js +2 -4
  228. package/esm/internals/SafeAnchor/SafeAnchor.d.ts +2 -2
  229. package/esm/internals/Tree/TreeView.d.ts +2 -2
  230. package/esm/internals/hooks/useCustom.js +24 -7
  231. package/esm/internals/styled-system/css-alias.d.ts +7 -0
  232. package/esm/internals/styled-system/css-alias.js +387 -0
  233. package/esm/internals/styled-system/css-properties.d.ts +6 -0
  234. package/esm/internals/styled-system/css-properties.js +26 -0
  235. package/esm/internals/styled-system/index.d.ts +1 -1
  236. package/esm/internals/styled-system/index.js +1 -1
  237. package/esm/internals/styled-system/responsive.d.ts +0 -4
  238. package/esm/internals/styled-system/responsive.js +11 -31
  239. package/esm/internals/styled-system/types.d.ts +59 -5
  240. package/esm/internals/styled-system/useStyled.js +3 -3
  241. package/esm/internals/types/html.d.ts +6 -6
  242. package/esm/internals/types/picker.d.ts +1 -1
  243. package/package.json +1 -1
  244. package/cjs/internals/styled-system/css-property.d.ts +0 -6
  245. package/cjs/internals/styled-system/css-property.js +0 -289
  246. package/esm/internals/styled-system/css-property.d.ts +0 -6
  247. package/esm/internals/styled-system/css-property.js +0 -285
package/Checkbox/styles/index.css CHANGED
@@ -35,7 +35,7 @@ body{
35
35
  --rs-body:var(--rs-gray-0);
36
36
  --rs-text-primary:var(--rs-gray-800);
37
37
  --rs-text-disabled:var(--rs-gray-600);
38
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
38
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
39
39
  --rs-checkbox-icon:#fff;
40
40
  --rs-checkbox-border:var(--rs-gray-300);
41
41
  --rs-checkbox-checked-bg:var(--rs-primary-500);
@@ -43,7 +43,7 @@ body{
43
43
  }
44
44
  @supports not (color: rgb(from white r g b)){
45
45
  :root{
46
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
46
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
47
47
  }
48
48
  }
49
49
 
@@ -69,18 +69,11 @@ body{
69
69
  --rs-body:var(--rs-gray-900);
70
70
  --rs-text-primary:var(--rs-gray-50);
71
71
  --rs-text-disabled:var(--rs-gray-400);
72
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
73
72
  --rs-checkbox-icon:var(--rs-gray-800);
74
73
  --rs-checkbox-border:var(--rs-gray-400);
75
74
  --rs-checkbox-checked-bg:var(--rs-primary-500);
76
75
  --rs-checkbox-disabled-bg:var(--rs-gray-500);
77
76
  }
78
- @supports not (color: rgb(from white r g b)){
79
- [data-theme=dark],
80
- .rs-theme-dark{
81
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
82
- }
83
- }
84
77
 
85
78
  [data-theme=high-contrast],
86
79
  .rs-theme-high-contrast{
@@ -104,7 +97,7 @@ body{
104
97
  --rs-body:var(--rs-gray-900);
105
98
  --rs-text-primary:var(--rs-gray-50);
106
99
  --rs-text-disabled:var(--rs-gray-400);
107
- --rs-color-focus-ring:var(--rs-gray-0);
100
+ --rs-focus-ring-color:var(--rs-gray-0);
108
101
  --rs-checkbox-icon:var(--rs-gray-800);
109
102
  --rs-checkbox-border:var(--rs-gray-100);
110
103
  --rs-checkbox-checked-bg:var(--rs-primary-500);
@@ -180,7 +173,7 @@ body{
180
173
  position:relative;
181
174
  align-items:center;
182
175
  }
183
- .rs-checkbox-disabled label{
176
+ .rs-checkbox[data-disabled=true] label{
184
177
  cursor:var(--rs-cursor-disabled);
185
178
  }
186
179
  .rs-checkbox label{
@@ -190,14 +183,14 @@ body{
190
183
  .rs-checkbox-inner::before{
191
184
  border-color:var(--rs-checkbox-checked-bg);
192
185
  }
193
- .rs-checkbox-disabled label{
186
+ .rs-checkbox[data-disabled=true] label{
194
187
  cursor:var(--rs-cursor-disabled);
195
188
  }
196
- .rs-checkbox-disabled > .rs-checkbox-checker > label{
189
+ .rs-checkbox[data-disabled=true] > .rs-checkbox-checker > label{
197
190
  color:var(--rs-text-disabled);
198
191
  }
199
192
  .rs-checkbox [type=checkbox]:focus-visible ~ .rs-checkbox-inner::before{
200
- outline:2px solid var(--rs-color-focus-ring);
193
+ outline:2px solid var(--rs-focus-ring-color);
201
194
  outline-offset:-1px;
202
195
  }
203
196
 
@@ -228,7 +221,7 @@ body{
228
221
  [data-theme=high-contrast] .rs-checkbox-control .rs-checkbox-inner::after, .rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::after{
229
222
  transition:none;
230
223
  }
231
- .rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after, .rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after{
224
+ .rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::after, .rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::after{
232
225
  border:solid var(--rs-checkbox-icon);
233
226
  width:6px;
234
227
  height:9px;
@@ -236,11 +229,11 @@ body{
236
229
  margin-inline-start:5px;
237
230
  opacity:1;
238
231
  }
239
- .rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after{
232
+ .rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::after{
240
233
  border-width:0 2px 2px 0;
241
234
  transform:rotate(45deg) scale(1);
242
235
  }
243
- .rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after{
236
+ .rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::after{
244
237
  border-width:0 0 2px;
245
238
  transform:rotate(0deg) scale(1);
246
239
  width:10px;
@@ -274,7 +267,7 @@ body{
274
267
  [data-theme=high-contrast] .rs-checkbox-control::before, .rs-theme-high-contrast .rs-checkbox-control::before{
275
268
  transition:none;
276
269
  }
277
- .rs-checkbox-checked .rs-checkbox-control::before{
270
+ .rs-checkbox[data-checked=true] .rs-checkbox-control::before{
278
271
  transform:scale(1.5);
279
272
  opacity:0;
280
273
  visibility:visible;
@@ -291,49 +284,49 @@ body{
291
284
  label:hover .rs-checkbox-control .rs-checkbox-inner::before{
292
285
  border-color:var(--rs-checkbox-checked-bg);
293
286
  }
294
- .rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-control .rs-checkbox-inner::before{
287
+ .rs-checkbox[data-disabled=true][data-checked=false] .rs-checkbox-control .rs-checkbox-inner::before{
295
288
  border-color:var(--rs-checkbox-disabled-bg);
296
289
  background-color:var(--rs-checkbox-disabled-bg);
297
290
  }
298
- .rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before{
291
+ .rs-checkbox[data-checked=true] .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox[data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::before{
299
292
  border-color:var(--rs-checkbox-checked-bg);
300
293
  background-color:var(--rs-checkbox-checked-bg);
301
294
  }
302
- .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before{
295
+ .rs-checkbox[data-disabled=true][data-checked=true] .rs-checkbox-control .rs-checkbox-inner::before, .rs-checkbox[data-disabled=true][data-checked=mixed] .rs-checkbox-control .rs-checkbox-inner::before{
303
296
  opacity:0.5;
304
297
  }
305
298
 
306
- .rs-checkbox-red{
299
+ .rs-checkbox[data-color=red]{
307
300
  --rs-checkbox-checked-bg:var(--rs-red-500);
308
301
  --rs-checkbox-border:var(--rs-red-500);
309
302
  }
310
303
 
311
- .rs-checkbox-orange{
304
+ .rs-checkbox[data-color=orange]{
312
305
  --rs-checkbox-checked-bg:var(--rs-orange-500);
313
306
  --rs-checkbox-border:var(--rs-orange-500);
314
307
  }
315
308
 
316
- .rs-checkbox-yellow{
309
+ .rs-checkbox[data-color=yellow]{
317
310
  --rs-checkbox-checked-bg:var(--rs-yellow-500);
318
311
  --rs-checkbox-border:var(--rs-yellow-500);
319
312
  }
320
313
 
321
- .rs-checkbox-green{
314
+ .rs-checkbox[data-color=green]{
322
315
  --rs-checkbox-checked-bg:var(--rs-green-500);
323
316
  --rs-checkbox-border:var(--rs-green-500);
324
317
  }
325
318
 
326
- .rs-checkbox-cyan{
319
+ .rs-checkbox[data-color=cyan]{
327
320
  --rs-checkbox-checked-bg:var(--rs-cyan-500);
328
321
  --rs-checkbox-border:var(--rs-cyan-500);
329
322
  }
330
323
 
331
- .rs-checkbox-blue{
324
+ .rs-checkbox[data-color=blue]{
332
325
  --rs-checkbox-checked-bg:var(--rs-blue-500);
333
326
  --rs-checkbox-border:var(--rs-blue-500);
334
327
  }
335
328
 
336
- .rs-checkbox-violet{
329
+ .rs-checkbox[data-color=violet]{
337
330
  --rs-checkbox-checked-bg:var(--rs-violet-500);
338
331
  --rs-checkbox-border:var(--rs-violet-500);
339
332
  }
package/CheckboxGroup/styles/index.css CHANGED
@@ -107,6 +107,6 @@ body{
107
107
  flex-direction:var(--rs-checkbox-group-direction);
108
108
  gap:var(--rs-checkbox-group-gap);
109
109
  }
110
- .rs-checkbox-group.rs-checkbox-group-inline{
110
+ .rs-checkbox-group[data-inline=true]{
111
111
  --rs-checkbox-group-direction:row;
112
112
  }
package/DateInput/styles/index.css CHANGED
@@ -20,7 +20,6 @@ body{
20
20
  --rs-gray-100:#f2f2f5;
21
21
  --rs-gray-200:#e5e5ea;
22
22
  --rs-gray-400:#b6b7b8;
23
- --rs-gray-500:#939393;
24
23
  --rs-gray-600:#717273;
25
24
  --rs-gray-700:#575757;
26
25
  --rs-gray-800:#343434;
@@ -31,14 +30,14 @@ body{
31
30
  --rs-text-secondary:var(--rs-gray-600);
32
31
  --rs-text-disabled:var(--rs-gray-600);
33
32
  --rs-border-primary:var(--rs-gray-200);
34
- --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
33
+ --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
35
34
  --rs-input-bg:var(--rs-gray-0);
36
35
  --rs-input-focus-border:var(--rs-primary-500);
37
36
  --rs-input-disabled-bg:var(--rs-gray-50);
38
37
  }
39
38
  @supports not (color: rgb(from white r g b)){
40
39
  :root{
41
- --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
40
+ --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
42
41
  }
43
42
  }
44
43
 
@@ -49,7 +48,6 @@ body{
49
48
  --rs-gray-100:#cbced4;
50
49
  --rs-gray-200:#a4a9b3;
51
50
  --rs-gray-400:#6a6f76;
52
- --rs-gray-500:#5c6066;
53
51
  --rs-gray-600:#3c3f43;
54
52
  --rs-gray-700:#292d33;
55
53
  --rs-gray-800:#1a1d24;
@@ -60,17 +58,10 @@ body{
60
58
  --rs-text-secondary:var(--rs-gray-200);
61
59
  --rs-text-disabled:var(--rs-gray-400);
62
60
  --rs-border-primary:var(--rs-gray-600);
63
- --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
64
61
  --rs-input-bg:var(--rs-gray-800);
65
62
  --rs-input-focus-border:var(--rs-primary-500);
66
63
  --rs-input-disabled-bg:var(--rs-gray-700);
67
64
  }
68
- @supports not (color: rgb(from white r g b)){
69
- [data-theme=dark],
70
- .rs-theme-dark{
71
- --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
72
- }
73
- }
74
65
 
75
66
  [data-theme=high-contrast],
76
67
  .rs-theme-high-contrast{
@@ -79,7 +70,6 @@ body{
79
70
  --rs-gray-100:#cbced4;
80
71
  --rs-gray-200:#a4a9b3;
81
72
  --rs-gray-400:#6a6f76;
82
- --rs-gray-500:#5c6066;
83
73
  --rs-gray-600:#3c3f43;
84
74
  --rs-gray-700:#292d33;
85
75
  --rs-gray-800:#1a1d24;
@@ -90,7 +80,7 @@ body{
90
80
  --rs-text-secondary:var(--rs-gray-200);
91
81
  --rs-text-disabled:var(--rs-gray-400);
92
82
  --rs-border-primary:var(--rs-gray-100);
93
- --rs-color-focus-ring:var(--rs-gray-0);
83
+ --rs-focus-ring-color:var(--rs-gray-0);
94
84
  --rs-input-bg:var(--rs-gray-800);
95
85
  --rs-input-focus-border:var(--rs-primary-500);
96
86
  --rs-input-disabled-bg:var(--rs-gray-700);
@@ -211,32 +201,32 @@ body{
211
201
  border-color:var(--rs-input-focus-border);
212
202
  }
213
203
  .rs-input:focus-visible{
214
- outline:2px solid var(--rs-color-focus-ring);
204
+ outline:2px solid var(--rs-focus-ring-color);
215
205
  outline-offset:-1px;
216
206
  }
217
207
  .rs-input:disabled{
218
208
  background-color:var(--rs-input-disabled-bg);
219
209
  color:var(--rs-text-disabled);
220
210
  }
221
- .rs-input.rs-input-xs{
211
+ .rs-input[data-size=xs]{
222
212
  --rs-input-font-size:var(--rs-input-font-size-xs);
223
213
  --rs-input-line-height:var(--rs-input-line-height-xs);
224
214
  --rs-input-padding-block:var(--rs-input-padding-block-xs);
225
215
  --rs-input-padding-inline:var(--rs-input-padding-inline-xs);
226
216
  }
227
- .rs-input.rs-input-sm{
217
+ .rs-input[data-size=sm]{
228
218
  --rs-input-font-size:var(--rs-input-font-size-sm);
229
219
  --rs-input-line-height:var(--rs-input-line-height-sm);
230
220
  --rs-input-padding-block:var(--rs-input-padding-block-sm);
231
221
  --rs-input-padding-inline:var(--rs-input-padding-inline-sm);
232
222
  }
233
- .rs-input.rs-input-md{
223
+ .rs-input[data-size=md]{
234
224
  --rs-input-font-size:var(--rs-input-font-size-md);
235
225
  --rs-input-line-height:var(--rs-input-line-height-md);
236
226
  --rs-input-padding-block:var(--rs-input-padding-block-md);
237
227
  --rs-input-padding-inline:var(--rs-input-padding-inline-md);
238
228
  }
239
- .rs-input.rs-input-lg{
229
+ .rs-input[data-size=lg]{
240
230
  --rs-input-font-size:var(--rs-input-font-size-lg);
241
231
  --rs-input-line-height:var(--rs-input-line-height-lg);
242
232
  --rs-input-padding-block:var(--rs-input-padding-block-lg);