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

package/ButtonGroup/styles/index.css

@@ -110,49 +110,52 @@ body{
   z-index:2;
 }
 
-.rs-btn-group:not(.rs-btn-group-vertical) > .rs-btn{
+.rs-btn-group:not([data-vertical=true]) > .rs-btn{
   float:inline-start;
 }
-.rs-btn-group:not(.rs-btn-group-vertical) > .rs-btn:not(:last-child){
+.rs-btn-group:not([data-vertical=true]) > .rs-btn:not(:last-child){
   border-end-end-radius:0;
   border-start-end-radius:0;
 }
-.rs-btn-group:not(.rs-btn-group-vertical) > .rs-btn:not(:first-child){
+.rs-btn-group:not([data-vertical=true]) > .rs-btn:not(:first-child){
   border-end-start-radius:0;
   border-start-start-radius:0;
 }
-.rs-btn-group:not(.rs-btn-group-vertical) > .rs-btn-ghost + .rs-btn-ghost{
+.rs-btn-group:not([data-vertical=true]) > .rs-btn[data-appearance=ghost] + .rs-btn[data-appearance=ghost]{
   margin-inline-start:-1px;
 }
-.rs-btn-group:not(.rs-btn-group-vertical).rs-btn-group-divided > .rs-btn:not(:last-child){
+.rs-btn-group:not([data-vertical=true])[data-divided=true] > .rs-btn:not(:last-child){
   border-right-width:1px;
 }
 
-.rs-btn-group-vertical > .rs-btn{
+.rs-btn-group[data-vertical=true] > .rs-btn{
   display:block;
   width:100%;
   max-width:100%;
 }
-.rs-btn-group-vertical > .rs-btn:not(:last-child){
+.rs-btn-group[data-vertical=true] > .rs-btn:not(:last-child){
   border-end-end-radius:0;
   border-end-start-radius:0;
 }
-.rs-btn-group-vertical > .rs-btn:not(:first-child){
+.rs-btn-group[data-vertical=true] > .rs-btn:not(:first-child){
   border-start-end-radius:0;
   border-start-start-radius:0;
 }
-.rs-btn-group-vertical > .rs-btn-ghost + .rs-btn-ghost{
+.rs-btn-group[data-vertical=true] > .rs-btn[data-appearance=ghost] + .rs-btn[data-appearance=ghost]{
   margin-top:-1px;
 }
-.rs-btn-group-vertical.rs-btn-group-divided > .rs-btn:not(:last-child){
+.rs-btn-group[data-vertical=true][data-divided=true] > .rs-btn:not(:last-child){
   border-bottom-width:1px;
 }
+.rs-btn-group[data-vertical=true][data-block=true]{
+  width:100%;
+}
 
-.rs-btn-group-justified{
+.rs-btn-group[data-justified=true]{
   display:flex;
   width:100%;
 }
-.rs-btn-group-justified > .rs-btn{
+.rs-btn-group[data-justified=true] > .rs-btn{
   flex:1 1 1%;
   overflow:hidden;
   text-overflow:ellipsis;

package/ButtonToolbar/styles/index.css

@@ -106,9 +106,6 @@ body{
   --rs-stack-direction:row;
   --rs-stack-align:center;
   --rs-stack-justify:flex-start;
-  --rs-stack-item-grow:0;
-  --rs-stack-item-shrink:1;
-  --rs-stack-item-basis:auto;
 }
 
 .rs-stack{
@@ -135,7 +132,7 @@ body{
   --rs-stack-align:center;
   flex-direction:row-reverse;
 }
-.rs-stack-wrap{
+.rs-stack[data-wrap=true]{
   flex-wrap:wrap;
 }
 .rs-stack-xs-column{
@@ -221,12 +218,6 @@ body{
   }
 }
 
-.rs-stack-item{
-  align-self:var(--rs-stack-item-align-self);
-  order:var(--rs-stack-item-order);
-  flex:var(--rs-stack-item-flex, var(--rs-stack-item-grow) var(--rs-stack-item-shrink) var(--rs-stack-item-basis));
-}
-
 .rs-btn-toolbar{
   line-height:0;
 }

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.83.1](https://github.com/rsuite/rsuite/compare/v5.83.0...v5.83.1) (2025-06-27)
+
+
+### Bug Fixes
+
+* allow TimePicker and TimeRangePicker locale prop to override global locale ([#4333](https://github.com/rsuite/rsuite/issues/4333)) ([6f66dfd](https://github.com/rsuite/rsuite/commit/6f66dfdc570c930b99e2954bc339446707947b92))
+
+
+
 # [5.83.0](https://github.com/rsuite/rsuite/compare/v5.82.0...v5.83.0) (2025-06-19)
 
 

package/Calendar/styles/index.css

@@ -97,7 +97,7 @@ body{
   --rs-bg-well:var(--rs-gray-50);
   --rs-bg-active:var(--rs-primary-500);
   --rs-state-hover-bg:var(--rs-primary-50);
-  --rs-color-focus-ring:rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-focus-ring-color:rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-btn-default-bg:var(--rs-gray-50);
   --rs-btn-default-text:var(--rs-gray-800);
   --rs-btn-default-border-color:var(--rs-gray-200);
@@ -141,7 +141,7 @@ body{
 }
 @supports not (color: rgb(from white r g b)){
   :root{
-    --rs-color-focus-ring:rgba(52, 152, 255, 0.25);
+    --rs-focus-ring-color:rgba(52, 152, 255, 0.25);
     --rs-loader-ring:rgba(247, 247, 250, 0.8);
     --rs-loader-ring-inverse:rgba(247, 247, 250, 0.3);
     --rs-listbox-option-hover-bg:rgba(#CCE9FF, 0.5);
@@ -232,7 +232,6 @@ body{
   --rs-bg-well:var(--rs-gray-900);
   --rs-bg-active:var(--rs-primary-700);
   --rs-state-hover-bg:var(--rs-gray-600);
-  --rs-color-focus-ring:0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-btn-default-bg:var(--rs-gray-600);
   --rs-btn-default-text:var(--rs-gray-50);
   --rs-btn-default-border-color:var(--rs-gray-700);
@@ -277,7 +276,6 @@ body{
 @supports not (color: rgb(from white r g b)){
   [data-theme=dark],
   .rs-theme-dark{
-    --rs-color-focus-ring:0 0 0 2px rgba(52, 195, 255, 0.25);
     --rs-loader-ring:rgba(233, 235, 240, 0.3);
     --rs-loader-ring-inverse:rgba(233, 235, 240, 0.8);
     --rs-calendar-range-bg:rgba(#006199, 0.5);
@@ -367,7 +365,7 @@ body{
   --rs-bg-well:var(--rs-gray-900);
   --rs-bg-active:var(--rs-primary-500);
   --rs-state-hover-bg:var(--rs-gray-600);
-  --rs-color-focus-ring:var(--rs-gray-0);
+  --rs-focus-ring-color:var(--rs-gray-0);
   --rs-btn-default-bg:transparent;
   --rs-btn-default-text:var(--rs-primary-500);
   --rs-btn-default-border-color:var(--rs-primary-500);
@@ -578,7 +576,7 @@ body{
   border-color:var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
 }
 .rs-btn:hover{
@@ -586,16 +584,16 @@ body{
   background-color:var(--rs-btn-default-hover-bg);
   text-decoration:none;
 }
-.rs-btn:active, .rs-btn.rs-btn-active{
+.rs-btn:active, .rs-btn.rs-btn[data-active=true]{
   color:var(--rs-btn-default-active-text);
   background-color:var(--rs-btn-default-active-bg);
 }
-.rs-btn:disabled, .rs-btn.rs-btn-disabled{
+.rs-btn:disabled, .rs-btn.rs-btn[data-disabled=true]{
   cursor:var(--rs-cursor-disabled);
   color:var(--rs-btn-default-disabled-text);
   background-color:var(--rs-btn-default-disabled-bg);
 }
-[data-theme=high-contrast] .rs-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn-disabled, .rs-theme-high-contrast .rs-btn.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn:disabled, .rs-theme-high-contrast .rs-btn:disabled, [data-theme=high-contrast] .rs-btn.rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn.rs-btn[data-disabled=true]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 .rs-btn{
@@ -608,28 +606,35 @@ body{
             mask-image:radial-gradient(white, black);
   }
 }
-.rs-btn.rs-btn-lg{
+.rs-btn{
+  --rs-btn-size:var(--rs-btn-size-md);
+  --rs-btn-font-size:var(--rs-btn-font-size-md);
+  --rs-btn-line-height:var(--rs-btn-line-height-md);
+  --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
+  --rs-btn-padding-block:var(--rs-btn-padding-block-md);
+}
+.rs-btn[data-size=lg]{
   --rs-btn-size:var(--rs-btn-size-lg);
   --rs-btn-font-size:var(--rs-btn-font-size-lg);
   --rs-btn-line-height:var(--rs-btn-line-height-lg);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-lg);
   --rs-btn-padding-block:var(--rs-btn-padding-block-lg);
 }
-.rs-btn.rs-btn-md{
+.rs-btn[data-size=md]{
   --rs-btn-size:var(--rs-btn-size-md);
   --rs-btn-font-size:var(--rs-btn-font-size-md);
   --rs-btn-line-height:var(--rs-btn-line-height-md);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-md);
   --rs-btn-padding-block:var(--rs-btn-padding-block-md);
 }
-.rs-btn.rs-btn-sm{
+.rs-btn[data-size=sm]{
   --rs-btn-size:var(--rs-btn-size-sm);
   --rs-btn-font-size:var(--rs-btn-font-size-sm);
   --rs-btn-line-height:var(--rs-btn-line-height-sm);
   --rs-btn-padding-inline:var(--rs-btn-padding-inline-sm);
   --rs-btn-padding-block:var(--rs-btn-padding-block-sm);
 }
-.rs-btn.rs-btn-xs{
+.rs-btn[data-size=xs]{
   --rs-btn-size:var(--rs-btn-size-xs);
   --rs-btn-font-size:var(--rs-btn-font-size-xs);
   --rs-btn-line-height:var(--rs-btn-line-height-xs);
@@ -647,101 +652,121 @@ body{
   margin-inline-start:var(--rs-btn-icon-gap);
 }
 
-.rs-btn-primary{
+.rs-btn[data-appearance=primary]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   border-color:var(--rs-btn-primary-border-color);
 }
-.rs-btn-primary:hover{
+.rs-btn[data-appearance=primary]:hover{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-hover-bg);
 }
-.rs-btn-primary:active, .rs-btn-primary.rs-btn-active{
+.rs-btn[data-appearance=primary]:active, .rs-btn[data-appearance=primary].rs-btn[data-active=true]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-active-bg);
 }
-.rs-btn-primary:disabled, .rs-btn-primary.rs-btn-disabled{
+.rs-btn[data-appearance=primary]:disabled, .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
   color:var(--rs-btn-primary-text);
   background-color:var(--rs-btn-primary-bg);
   opacity:0.3;
 }
-[data-theme=high-contrast] .rs-btn-primary:disabled, .rs-theme-high-contrast .rs-btn-primary:disabled, [data-theme=high-contrast] .rs-btn-primary.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=primary]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=primary].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=primary].rs-btn[data-disabled=true]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-subtle, .rs-calendar-header-error{
+.rs-btn[data-appearance=subtle],
+.rs-btn-subtle,
+.rs-calendar-header-error{
   color:var(--rs-btn-subtle-text);
   background-color:transparent;
 }
-.rs-btn-subtle:hover, .rs-calendar-header-error:hover{
+.rs-btn[data-appearance=subtle]:hover,
+.rs-btn-subtle:hover,
+.rs-calendar-header-error:hover{
   color:var(--rs-btn-subtle-hover-text);
   background-color:var(--rs-btn-subtle-hover-bg);
 }
-.rs-btn-subtle:active, .rs-calendar-header-error:active, .rs-btn-subtle.rs-btn-active, .rs-btn-active.rs-calendar-header-error{
+.rs-btn[data-appearance=subtle]:active, .rs-btn[data-appearance=subtle].rs-btn[data-active=true],
+.rs-btn-subtle:active,
+.rs-calendar-header-error:active,
+.rs-btn-subtle.rs-btn[data-active=true],
+.rs-btn[data-active=true].rs-calendar-header-error{
   color:var(--rs-btn-subtle-active-text);
   background-color:var(--rs-btn-subtle-active-bg);
 }
-.rs-btn-subtle:disabled, .rs-calendar-header-error:disabled, .rs-btn-subtle.rs-btn-disabled, .rs-btn-disabled.rs-calendar-header-error{
+.rs-btn[data-appearance=subtle]:disabled, .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+.rs-btn-subtle:disabled,
+.rs-calendar-header-error:disabled,
+.rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-btn[data-disabled=true].rs-calendar-header-error{
   color:var(--rs-btn-subtle-disabled-text);
   background:none;
 }
-[data-theme=high-contrast] .rs-btn-subtle:disabled, [data-theme=high-contrast] .rs-calendar-header-error:disabled, .rs-theme-high-contrast .rs-btn-subtle:disabled, .rs-theme-high-contrast .rs-calendar-header-error:disabled, [data-theme=high-contrast] .rs-btn-subtle.rs-btn-disabled, [data-theme=high-contrast] .rs-btn-disabled.rs-calendar-header-error, .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-disabled.rs-calendar-header-error{
+[data-theme=high-contrast] .rs-btn[data-appearance=subtle]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=subtle]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=subtle].rs-btn[data-disabled=true],
+[data-theme=high-contrast] .rs-btn-subtle:disabled,
+[data-theme=high-contrast] .rs-calendar-header-error:disabled,
+.rs-theme-high-contrast .rs-btn-subtle:disabled,
+.rs-theme-high-contrast .rs-calendar-header-error:disabled,
+[data-theme=high-contrast] .rs-btn-subtle.rs-btn[data-disabled=true],
+[data-theme=high-contrast] .rs-btn[data-disabled=true].rs-calendar-header-error,
+.rs-theme-high-contrast .rs-btn-subtle.rs-btn[data-disabled=true],
+.rs-theme-high-contrast .rs-btn[data-disabled=true].rs-calendar-header-error{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-link{
+.rs-btn[data-appearance=link]{
   color:var(--rs-btn-link-text);
   background-color:transparent;
 }
-.rs-btn-link:hover{
+.rs-btn[data-appearance=link]:hover{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   -webkit-text-decoration:var(--rs-link-hover-decoration);
           text-decoration:var(--rs-link-hover-decoration);
 }
-.rs-btn-link:active, .rs-btn-link.rs-btn-active{
+.rs-btn[data-appearance=link]:active, .rs-btn[data-appearance=link].rs-btn[data-active=true]{
   color:var(--rs-btn-link-active-text);
   background-color:transparent;
 }
-.rs-btn-link:disabled, .rs-btn-link.rs-btn-disabled{
+.rs-btn[data-appearance=link]:disabled, .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
   color:var(--rs-btn-link-hover-text);
   background-color:transparent;
   text-decoration:none;
   opacity:0.3;
 }
-[data-theme=high-contrast] .rs-btn-link:disabled, .rs-theme-high-contrast .rs-btn-link:disabled, [data-theme=high-contrast] .rs-btn-link.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=link]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=link]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=link].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=link].rs-btn[data-disabled=true]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-ghost{
+.rs-btn[data-appearance=ghost]{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   border:var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
   padding-inline:calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));
 }
-.rs-btn-ghost:hover{
+.rs-btn[data-appearance=ghost]:hover{
   color:var(--rs-btn-ghost-hover-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-hover-border);
   box-shadow:0 0 0 1px var(--rs-btn-ghost-hover-border);
 }
-.rs-btn-ghost:active, .rs-btn-ghost.rs-btn-active{
+.rs-btn[data-appearance=ghost]:active, .rs-btn[data-appearance=ghost].rs-btn[data-active=true]{
   color:var(--rs-btn-ghost-active-text);
   background-color:transparent;
   border-color:var(--rs-btn-ghost-active-border);
 }
-.rs-btn-ghost:disabled, .rs-btn-ghost.rs-btn-disabled{
+.rs-btn[data-appearance=ghost]:disabled, .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
   color:var(--rs-btn-ghost-text);
   background-color:transparent;
   opacity:0.3;
   border-color:var(--rs-btn-ghost-border);
   box-shadow:var(--rs-shadow-none);
 }
-[data-theme=high-contrast] .rs-btn-ghost:disabled, .rs-theme-high-contrast .rs-btn-ghost:disabled, [data-theme=high-contrast] .rs-btn-ghost.rs-btn-disabled, .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled{
+[data-theme=high-contrast] .rs-btn[data-appearance=ghost]:disabled, .rs-theme-high-contrast .rs-btn[data-appearance=ghost]:disabled, [data-theme=high-contrast] .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true], .rs-theme-high-contrast .rs-btn[data-appearance=ghost].rs-btn[data-disabled=true]{
   border-color:var(--rs-btn-default-disabled-border-color);
 }
 
-.rs-btn-red{
+.rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-500);
   --rs-btn-primary-hover-bg:var(--rs-red-700);
   --rs-btn-primary-active-bg:var(--rs-red-800);
@@ -760,7 +785,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-800);
   --rs-btn-link-active-text:var(--rs-red-900);
 }
-[data-theme=dark] .rs-btn-red, .rs-theme-dark .rs-btn-red{
+[data-theme=dark] .rs-btn[data-color=red], .rs-theme-dark .rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-700);
   --rs-btn-primary-hover-bg:var(--rs-red-500);
   --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -779,7 +804,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-red-400);
   --rs-btn-link-active-text:var(--rs-red-200);
 }
-[data-theme=high-contrast] .rs-btn-red, .rs-theme-high-contrast .rs-btn-red{
+[data-theme=high-contrast] .rs-btn[data-color=red], .rs-theme-high-contrast .rs-btn[data-color=red]{
   --rs-btn-primary-bg:var(--rs-red-700);
   --rs-btn-primary-hover-bg:var(--rs-red-600);
   --rs-btn-primary-active-bg:var(--rs-red-400);
@@ -798,7 +823,7 @@ body{
   --rs-btn-link-active-text:var(--rs-red-200);
 }
 
-.rs-btn-orange{
+.rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-500);
   --rs-btn-primary-hover-bg:var(--rs-orange-700);
   --rs-btn-primary-active-bg:var(--rs-orange-800);
@@ -817,7 +842,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-800);
   --rs-btn-link-active-text:var(--rs-orange-900);
 }
-[data-theme=dark] .rs-btn-orange, .rs-theme-dark .rs-btn-orange{
+[data-theme=dark] .rs-btn[data-color=orange], .rs-theme-dark .rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-700);
   --rs-btn-primary-hover-bg:var(--rs-orange-500);
   --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -836,7 +861,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-orange-400);
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
-[data-theme=high-contrast] .rs-btn-orange, .rs-theme-high-contrast .rs-btn-orange{
+[data-theme=high-contrast] .rs-btn[data-color=orange], .rs-theme-high-contrast .rs-btn[data-color=orange]{
   --rs-btn-primary-bg:var(--rs-orange-700);
   --rs-btn-primary-hover-bg:var(--rs-orange-600);
   --rs-btn-primary-active-bg:var(--rs-orange-400);
@@ -855,7 +880,7 @@ body{
   --rs-btn-link-active-text:var(--rs-orange-200);
 }
 
-.rs-btn-yellow{
+.rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-500);
   --rs-btn-primary-hover-bg:var(--rs-yellow-700);
   --rs-btn-primary-active-bg:var(--rs-yellow-800);
@@ -874,7 +899,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-800);
   --rs-btn-link-active-text:var(--rs-yellow-900);
 }
-[data-theme=dark] .rs-btn-yellow, .rs-theme-dark .rs-btn-yellow{
+[data-theme=dark] .rs-btn[data-color=yellow], .rs-theme-dark .rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-700);
   --rs-btn-primary-hover-bg:var(--rs-yellow-500);
   --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -893,7 +918,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-yellow-400);
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
-[data-theme=high-contrast] .rs-btn-yellow, .rs-theme-high-contrast .rs-btn-yellow{
+[data-theme=high-contrast] .rs-btn[data-color=yellow], .rs-theme-high-contrast .rs-btn[data-color=yellow]{
   --rs-btn-primary-bg:var(--rs-yellow-700);
   --rs-btn-primary-hover-bg:var(--rs-yellow-600);
   --rs-btn-primary-active-bg:var(--rs-yellow-400);
@@ -912,7 +937,7 @@ body{
   --rs-btn-link-active-text:var(--rs-yellow-200);
 }
 
-.rs-btn-green{
+.rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-500);
   --rs-btn-primary-hover-bg:var(--rs-green-700);
   --rs-btn-primary-active-bg:var(--rs-green-800);
@@ -931,7 +956,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-800);
   --rs-btn-link-active-text:var(--rs-green-900);
 }
-[data-theme=dark] .rs-btn-green, .rs-theme-dark .rs-btn-green{
+[data-theme=dark] .rs-btn[data-color=green], .rs-theme-dark .rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-700);
   --rs-btn-primary-hover-bg:var(--rs-green-500);
   --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -950,7 +975,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-green-400);
   --rs-btn-link-active-text:var(--rs-green-200);
 }
-[data-theme=high-contrast] .rs-btn-green, .rs-theme-high-contrast .rs-btn-green{
+[data-theme=high-contrast] .rs-btn[data-color=green], .rs-theme-high-contrast .rs-btn[data-color=green]{
   --rs-btn-primary-bg:var(--rs-green-700);
   --rs-btn-primary-hover-bg:var(--rs-green-600);
   --rs-btn-primary-active-bg:var(--rs-green-400);
@@ -969,7 +994,7 @@ body{
   --rs-btn-link-active-text:var(--rs-green-200);
 }
 
-.rs-btn-cyan{
+.rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-500);
   --rs-btn-primary-hover-bg:var(--rs-cyan-700);
   --rs-btn-primary-active-bg:var(--rs-cyan-800);
@@ -988,7 +1013,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-800);
   --rs-btn-link-active-text:var(--rs-cyan-900);
 }
-[data-theme=dark] .rs-btn-cyan, .rs-theme-dark .rs-btn-cyan{
+[data-theme=dark] .rs-btn[data-color=cyan], .rs-theme-dark .rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-700);
   --rs-btn-primary-hover-bg:var(--rs-cyan-500);
   --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1007,7 +1032,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-cyan-400);
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
-[data-theme=high-contrast] .rs-btn-cyan, .rs-theme-high-contrast .rs-btn-cyan{
+[data-theme=high-contrast] .rs-btn[data-color=cyan], .rs-theme-high-contrast .rs-btn[data-color=cyan]{
   --rs-btn-primary-bg:var(--rs-cyan-700);
   --rs-btn-primary-hover-bg:var(--rs-cyan-600);
   --rs-btn-primary-active-bg:var(--rs-cyan-400);
@@ -1026,7 +1051,7 @@ body{
   --rs-btn-link-active-text:var(--rs-cyan-200);
 }
 
-.rs-btn-blue{
+.rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-500);
   --rs-btn-primary-hover-bg:var(--rs-blue-700);
   --rs-btn-primary-active-bg:var(--rs-blue-800);
@@ -1045,7 +1070,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-800);
   --rs-btn-link-active-text:var(--rs-blue-900);
 }
-[data-theme=dark] .rs-btn-blue, .rs-theme-dark .rs-btn-blue{
+[data-theme=dark] .rs-btn[data-color=blue], .rs-theme-dark .rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-700);
   --rs-btn-primary-hover-bg:var(--rs-blue-500);
   --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1064,7 +1089,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-blue-400);
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
-[data-theme=high-contrast] .rs-btn-blue, .rs-theme-high-contrast .rs-btn-blue{
+[data-theme=high-contrast] .rs-btn[data-color=blue], .rs-theme-high-contrast .rs-btn[data-color=blue]{
   --rs-btn-primary-bg:var(--rs-blue-700);
   --rs-btn-primary-hover-bg:var(--rs-blue-600);
   --rs-btn-primary-active-bg:var(--rs-blue-400);
@@ -1083,7 +1108,7 @@ body{
   --rs-btn-link-active-text:var(--rs-blue-200);
 }
 
-.rs-btn-violet{
+.rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-500);
   --rs-btn-primary-hover-bg:var(--rs-violet-700);
   --rs-btn-primary-active-bg:var(--rs-violet-800);
@@ -1102,7 +1127,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-800);
   --rs-btn-link-active-text:var(--rs-violet-900);
 }
-[data-theme=dark] .rs-btn-violet, .rs-theme-dark .rs-btn-violet{
+[data-theme=dark] .rs-btn[data-color=violet], .rs-theme-dark .rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-700);
   --rs-btn-primary-hover-bg:var(--rs-violet-500);
   --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1121,7 +1146,7 @@ body{
   --rs-btn-link-hover-text:var(--rs-violet-400);
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
-[data-theme=high-contrast] .rs-btn-violet, .rs-theme-high-contrast .rs-btn-violet{
+[data-theme=high-contrast] .rs-btn[data-color=violet], .rs-theme-high-contrast .rs-btn[data-color=violet]{
   --rs-btn-primary-bg:var(--rs-violet-700);
   --rs-btn-primary-hover-bg:var(--rs-violet-600);
   --rs-btn-primary-active-bg:var(--rs-violet-400);
@@ -1140,20 +1165,20 @@ body{
   --rs-btn-link-active-text:var(--rs-violet-200);
 }
 
-.rs-btn-block{
+.rs-btn[data-block=true]{
   width:100%;
 }
-.rs-btn-block + .rs-btn-block{
+.rs-btn[data-block=true] + .rs-btn[data-block=true]{
   margin-top:5px;
 }
 
-.rs-btn-loading{
+.rs-btn[data-loading=true]{
   color:transparent !important;
   position:relative;
   cursor:default;
   pointer-events:none;
 }
-.rs-btn-loading > .rs-btn-spin::before, .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-loading=true] > .rs-btn-spin::after{
   content:"";
   position:absolute;
   width:var(--rs-btn-loading-spin-default-diameter);
@@ -1166,29 +1191,29 @@ body{
   border-radius:var(--rs-radius-full);
   z-index:1;
 }
-.rs-btn-xs .rs-btn-loading > .rs-btn-spin::before, .rs-btn-xs .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-btn[data-size=xs] .rs-btn[data-loading=true] > .rs-btn-spin::after{
   width:var(--rs-btn-loading-spin-xs-diameter);
   height:var(--rs-btn-loading-spin-xs-diameter);
 }
-.rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-loading=true] > .rs-btn-spin::before{
   border:var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
   border-color:rgba(248, 247, 250, 0.3);
 }
-[data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::before{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::before{
   border-color:var(--rs-loader-ring-inverse);
 }
-.rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-loading=true] > .rs-btn-spin::after{
   border-width:var(--rs-btn-loading-spin-ring-wide);
   border-color:var(--rs-loader-rotor) transparent transparent;
   border-style:solid;
   animation:buttonSpin 0.6s infinite linear;
 }
-.rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
+.rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
   border-top-color:#fff;
 }
-[data-theme=high-contrast] .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn-primary .rs-btn-loading > .rs-btn-spin::after{
+[data-theme=high-contrast] .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after, .rs-theme-high-contrast .rs-btn[data-appearance=primary] .rs-btn[data-loading=true] > .rs-btn-spin::after{
   border-top-color:var(--rs-loader-rotor-inverse);
 }
 @keyframes buttonSpin{
@@ -1776,7 +1801,7 @@ body{
   color:var(--rs-listbox-option-hover-text);
 }
 [data-theme=high-contrast] .rs-calendar-time-dropdown-cell:hover, .rs-theme-high-contrast .rs-calendar-time-dropdown-cell:hover{
-  outline:2px solid var(--rs-color-focus-ring);
+  outline:2px solid var(--rs-focus-ring-color);
   outline-offset:-1px;
   outline-offset:-3px;
   outline-width:2px;
@@ -1793,7 +1818,7 @@ body{
     color:var(--rs-listbox-option-hover-text);
   }
   [data-theme=high-contrast] .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover, .rs-theme-high-contrast .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-active:hover{
-    outline:2px solid var(--rs-color-focus-ring);
+    outline:2px solid var(--rs-focus-ring-color);
     outline-offset:-1px;
     outline-offset:-3px;
     outline-width:2px;

package/Card/styles/index.css

@@ -130,26 +130,26 @@ body{
   position:relative;
   width:var(--rs-card-width);
 }
-.rs-card-bordered{
+.rs-card[data-bordered=true]{
   border:1px solid var(--rs-border-primary);
   background-color:var(--rs-card-bg);
 }
-.rs-card-shaded,.rs-card-shaded-hover:hover{
+.rs-card[data-shaded=true],.rs-card[data-shaded=hover]:hover{
   box-shadow:var(--rs-card-shadow);
 }
-.rs-card-shaded-hover:hover{
+.rs-card[data-shaded=hover]:hover{
   cursor:pointer;
 }
-.rs-card-sm{
+.rs-card[data-size=sm]{
   --rs-card-padding:calc(var(--rs-spacing) * 2);
 }
-.rs-card-md{
+.rs-card[data-size=md]{
   --rs-card-padding:calc(var(--rs-spacing) * 4);
 }
-.rs-card-lg{
+.rs-card[data-size=lg]{
   --rs-card-padding:calc(var(--rs-spacing) * 6);
 }
-.rs-card-row{
+.rs-card[data-direction=row]{
   flex-direction:row;
 }
 .rs-card-header{