rsuite 5.60.2 → 5.61.0

package/Radio/styles/index.css

@@ -6,6 +6,7 @@
   --rs-gray-300: #d9d9d9;
   --rs-gray-400: #c5c6c7;
   --rs-gray-500: #a6a6a6;
+  --rs-gray-600: #8e8e93;
   --rs-gray-800: #575757;
   --rs-gray-900: #272c36;
   --rs-primary-500: #3498ff;
@@ -16,7 +17,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #2196f3;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: #fff;
@@ -37,6 +38,7 @@
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #34c3ff;
@@ -47,7 +49,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: var(--rs-gray-800);
@@ -67,6 +69,7 @@
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #ffff00;
@@ -77,7 +80,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-checkbox-checked-bg: var(--rs-primary-500);
   --rs-radio-marker: var(--rs-gray-800);
@@ -117,7 +120,7 @@
   cursor: not-allowed;
 }
 .rs-radio-disabled > .rs-radio-checker > label {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-radio-inline {
@@ -233,9 +236,6 @@
   background-color: var(--rs-radio-checked-bg);
 }
 .rs-radio.rs-radio-disabled.rs-radio-checked .rs-radio-inner::before {
-  opacity: 0.3;
-}
-.rs-theme-high-contrast .rs-radio.rs-radio-disabled.rs-radio-checked .rs-radio-inner::before {
   opacity: 0.5;
 }
 .rs-radio-inner::after {

package/Radio/styles/index.less

@@ -105,11 +105,7 @@
     }
 
     .rs-radio.rs-radio-disabled.rs-radio-checked & {
-      opacity: 0.3;
-
-      .high-contrast-mode({
-        opacity: 0.5;
-      });
+      opacity: 0.5;
     }
   }
 

package/RangeSlider/styles/index.css

@@ -358,7 +358,7 @@
   right: 0;
 }
 .rs-slider-disabled {
-  opacity: 0.3;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 .rs-slider-disabled .rs-slider-bar,

package/Rate/styles/index.css

@@ -138,7 +138,7 @@
           transform: scale(1);
 }
 .rs-rate-disabled {
-  opacity: 0.3;
+  opacity: 0.5;
   outline: none;
 }
 .rs-rate-disabled .rs-rate-character {

package/Rate/styles/index.less

@@ -89,7 +89,7 @@
   }
 
   &-disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     outline: none;
   }
 

package/SelectPicker/styles/index.css

@@ -47,7 +47,8 @@
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-heading: var(--rs-gray-900);
   --rs-text-inverse: var(--rs-gray-50);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
+  --rs-text-highlight-bg: #fff6c9;
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-overlay: var(--rs-gray-0);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
@@ -60,7 +61,7 @@
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
   --rs-btn-default-disabled-bg: var(--rs-gray-50);
-  --rs-btn-default-disabled-text: var(--rs-gray-400);
+  --rs-btn-default-disabled-text: var(--rs-gray-600);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-0);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -89,6 +90,7 @@
   --rs-input-bg: var(--rs-gray-0);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-50);
+  --rs-listbox-option-group-bg: var(--rs-gray-0);
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
   --rs-listbox-option-hover-text: var(--rs-primary-700);
   --rs-listbox-option-selected-text: var(--rs-primary-700);
@@ -159,7 +161,7 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-inverse: var(--rs-gray-800);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-overlay: var(--rs-gray-700);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
@@ -201,6 +203,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-listbox-option-group-bg: var(--rs-gray-700);
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
   --rs-listbox-option-hover-text: currentColor;
   --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -270,7 +273,8 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-inverse: var(--rs-gray-800);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-highlight-bg: var(--rs-primary-500);
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
@@ -285,7 +289,8 @@
   --rs-btn-default-active-bg: transparent;
   --rs-btn-default-active-text: var(--rs-primary-200);
   --rs-btn-default-disabled-bg: transparent;
-  --rs-btn-default-disabled-text: var(--rs-primary-500);
+  --rs-btn-default-disabled-text: var(--rs-primary-900);
+  --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-900);
   --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -314,6 +319,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-listbox-option-group-bg: var(--rs-gray-800);
   --rs-listbox-option-hover-bg: transparent;
   --rs-listbox-option-hover-text: var(--rs-primary-500);
   --rs-listbox-option-selected-text: var(--rs-primary-500);
@@ -440,14 +446,14 @@
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-btn:disabled,
 .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-btn {
@@ -495,7 +501,7 @@
 }
 .rs-theme-high-contrast .rs-btn-primary:disabled,
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
   color: #575757;
@@ -525,7 +531,7 @@
 }
 .rs-theme-high-contrast .rs-btn-subtle:disabled,
 .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-link {
   color: #1675e0;
@@ -556,7 +562,7 @@
 }
 .rs-theme-high-contrast .rs-btn-link:disabled,
 .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-ghost {
   color: #1675e0;
@@ -598,7 +604,7 @@
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-500);
@@ -1579,7 +1585,7 @@ textarea.rs-input {
 .rs-input:disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 textarea.rs-input {
@@ -1780,7 +1786,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled,
 .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn > .rs-icon {
   font-size: 14px;
@@ -1827,16 +1833,16 @@ textarea.rs-input-sm {
   left: inherit;
   right: 1px;
 }
-.rs-input-group-disabled {
+.rs-input-group.rs-input-group-disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
 }
-.rs-input-group-disabled .rs-input,
-.rs-input-group-disabled .rs-input-group-btn,
-.rs-input-group-disabled .rs-input-group-addon {
+.rs-input-group.rs-input-group-disabled .rs-input,
+.rs-input-group.rs-input-group-disabled .rs-input-group-btn,
+.rs-input-group.rs-input-group-disabled .rs-input-group-addon {
   color: inherit;
 }
 .rs-input-group-lg > .rs-input {
@@ -2188,6 +2194,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-input-group-btn:last-child > .rs-btn-group {
   margin-left: -1px;
 }
+.rs-highlight-mark {
+  background-color: #fff6c9;
+  background-color: var(--rs-text-highlight-bg);
+  padding: 0 0.2em;
+  font-weight: bolder;
+  border-radius: 4px;
+}
 .rs-picker-subtle .picker-subtle-toggle {
   position: relative;
   z-index: 5;
@@ -2219,7 +2232,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   display: block;
 }
 .rs-picker-disabled {
-  opacity: 0.3;
+  cursor: not-allowed;
+}
+.rs-picker-disabled .rs-picker-toggle-value,
+.rs-picker-disabled .rs-picker-toggle-indicator,
+.rs-picker-disabled .rs-picker-tag-list .rs-tag {
+  color: #8e8e93 !important;
+  color: var(--rs-text-disabled) !important;
+}
+.rs-picker-disabled .rs-picker-value-count {
+  opacity: 0.5;
 }
 .rs-picker-toggle .rs-picker-toggle-placeholder {
   color: #8e8e93;
@@ -2400,14 +2422,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-toggle:disabled,
 .rs-picker-toggle.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-picker-toggle:disabled,
 .rs-theme-high-contrast .rs-picker-toggle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-picker-toggle {
@@ -2490,7 +2512,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 }
 .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
 .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-picker-subtle .rs-picker-toggle-active {
   background-color: #e5e5ea;
@@ -2975,6 +2997,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup .rs-search-box {
   padding: 6px 12px 6px;
 }
+.rs-picker-popup .rs-highlight .rs-highlight-mark {
+  padding: 0;
+}
 .rs-picker-default .rs-btn,
 .rs-picker-input .rs-btn,
 .rs-picker-default .rs-picker-toggle,
@@ -2989,6 +3014,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: #f7f7fa !important;
   background-color: var(--rs-input-disabled-bg) !important;
 }
+.rs-picker-default.rs-picker-disabled .rs-input-group,
+.rs-picker-input.rs-picker-disabled .rs-input-group {
+  pointer-events: none;
+}
 .rs-check-item {
   display: block;
 }
@@ -3056,6 +3085,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
+.rs-picker-menu-group {
+  background-color: #fff;
+  background-color: var(--rs-listbox-option-group-bg);
+  position: sticky;
+  top: -1px;
+  z-index: 1;
+}
 .rs-picker-select-menu-items {
   overflow-y: auto;
 }

package/Slider/styles/index.css

@@ -358,7 +358,7 @@
   right: 0;
 }
 .rs-slider-disabled {
-  opacity: 0.3;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 .rs-slider-disabled .rs-slider-bar,

package/Slider/styles/index.less

@@ -18,7 +18,7 @@
   }
 
   &-disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     cursor: not-allowed;
 
     .rs-slider-bar,

package/Steps/styles/index.css

@@ -123,7 +123,12 @@
 }
 .rs-steps-item-icon-wrapper > .rs-steps-item-icon {
   width: 100%;
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   text-align: center;
   position: relative;
 }

package/Steps/styles/index.less

@@ -61,7 +61,8 @@
   // Icon content
   > .rs-steps-item-icon {
     width: 100%;
-    display: block;
+    display: flex;
+    justify-content: center;
     text-align: center;
     position: relative;
 

package/Tabs/styles/index.css

@@ -35,7 +35,7 @@
   --rs-violet-500: #673ab7;
   --rs-violet-700: #531ba8;
   --rs-text-primary: var(--rs-gray-800);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-bg-card: var(--rs-gray-0);
   --rs-bg-overlay: var(--rs-gray-0);
@@ -46,7 +46,7 @@
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
   --rs-btn-default-disabled-bg: var(--rs-gray-50);
-  --rs-btn-default-disabled-text: var(--rs-gray-400);
+  --rs-btn-default-disabled-text: var(--rs-gray-600);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-0);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -130,7 +130,7 @@
   --rs-violet-500: #673ab7;
   --rs-violet-700: #531ba8;
   --rs-text-primary: var(--rs-gray-50);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-bg-card: var(--rs-gray-800);
   --rs-bg-overlay: var(--rs-gray-700);
@@ -224,7 +224,7 @@
   --rs-violet-500: #673ab7;
   --rs-violet-700: #531ba8;
   --rs-text-primary: var(--rs-gray-50);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-card: var(--rs-gray-800);
   --rs-bg-overlay: var(--rs-gray-800);
@@ -237,7 +237,8 @@
   --rs-btn-default-active-bg: transparent;
   --rs-btn-default-active-text: var(--rs-primary-200);
   --rs-btn-default-disabled-bg: transparent;
-  --rs-btn-default-disabled-text: var(--rs-primary-500);
+  --rs-btn-default-disabled-text: var(--rs-primary-900);
+  --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-900);
   --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -391,14 +392,14 @@
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-btn:disabled,
 .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-btn {
@@ -446,7 +447,7 @@
 }
 .rs-theme-high-contrast .rs-btn-primary:disabled,
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
   color: #575757;
@@ -476,7 +477,7 @@
 }
 .rs-theme-high-contrast .rs-btn-subtle:disabled,
 .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-link {
   color: #1675e0;
@@ -507,7 +508,7 @@
 }
 .rs-theme-high-contrast .rs-btn-link:disabled,
 .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-ghost {
   color: #1675e0;
@@ -549,7 +550,7 @@
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-500);
@@ -1364,13 +1365,13 @@
   outline: 0;
 }
 .rs-dropdown-item-disabled {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .rs-dropdown-item-disabled .rs-text {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-dropdown-item-disabled:hover,
@@ -1614,7 +1615,7 @@
 .rs-nav-item.rs-nav-item-disabled {
   cursor: not-allowed;
   pointer-events: none;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-nav-item.rs-nav-item-active {