rsuite 5.60.2 → 5.62.0

package/Accordion/styles/index.css

@@ -12,11 +12,12 @@
   --rs-primary-400: #59afff;
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-heading: var(--rs-gray-900);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-btn-subtle-hover-bg: var(--rs-gray-200);
   --rs-btn-subtle-hover-text: var(--rs-gray-800);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(9, 9, 9, 0.2);
 }
 .rs-theme-dark {
   --rs-gray-0: #fff;
@@ -31,11 +32,12 @@
   --rs-primary-400: #59d0ff;
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-btn-subtle-hover-bg: var(--rs-gray-500);
   --rs-btn-subtle-hover-text: var(--rs-gray-50);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
@@ -50,11 +52,12 @@
   --rs-primary-400: #fffc30;
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-heading: var(--rs-gray-0);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-btn-subtle-hover-bg: transparent;
   --rs-btn-subtle-hover-text: var(--rs-primary-400);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+  --rs-scroll-view-shadow-color: rgba(0, 0, 0, 0.99);
 }
 /* stylelint-disable */
 *[class*='rs-'] {
@@ -119,6 +122,66 @@
   font-size: 16px;
   line-height: 22px;
 }
+.rs-scroll-view.rs-scroll-view-shadow {
+  overflow: auto;
+  padding: 0px;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before,
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  content: '';
+  position: sticky;
+  width: 100%;
+  height: 2px;
+  visibility: hidden;
+  display: block;
+  z-index: 1;
+}
+.rs-scroll-view.rs-scroll-view-shadow::before {
+  top: -2px;
+  -webkit-box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: 3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: 3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow::after {
+  bottom: -2px;
+  -webkit-box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+  -webkit-box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+          box-shadow: -3px 0 5px rgba(9, 9, 9, 0.2);
+          box-shadow: -3px 0 5px var(--rs-scroll-view-shadow-color);
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::before,
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-middle::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-top::after {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-shadow.rs-scroll-view-thumb-bottom::before {
+  visibility: visible;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar {
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: rgba(87, 87, 87, 0.6);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-800);
+  scrollbar-width: auto;
+  scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--rs-scrollbar-bg);
+  border-radius: 10px;
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--rs-scrollbar-thumb-bg);
+  border-radius: 6px;
+  border: 3px solid var(--rs-scrollbar-bg);
+}
+.rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rs-scrollbar-thumb-hover-bg);
+}
 .rs-panel {
   border-radius: 6px;
   overflow: hidden;
@@ -204,7 +267,7 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 }
 .rs-panel-btn[disabled] {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   background-color: var(--rs-btn-subtle-disabled-bg);
 }
@@ -223,7 +286,7 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
 .rs-panel-title a:active {
   text-decoration: none;
 }
-.rs-panel-header + .rs-panel-collapse .rs-panel-body,
+.rs-panel-header + .rs-panel-body-collapse .rs-panel-body,
 .rs-panel-header + .rs-panel-body {
   padding-top: 0;
 }

package/AutoComplete/styles/index.css

@@ -45,7 +45,8 @@
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-secondary: var(--rs-gray-600);
   --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%);
@@ -58,7 +59,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);
@@ -87,6 +88,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-close-button-hover-color: var(--rs-color-red);
@@ -152,7 +154,7 @@
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
   --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%);
@@ -194,6 +196,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-close-button-hover-color: var(--rs-color-red);
@@ -257,7 +260,8 @@
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
   --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);
@@ -272,7 +276,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);
@@ -301,6 +306,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-close-button-hover-color: var(--rs-color-red);
@@ -388,7 +394,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 {
@@ -538,14 +544,14 @@ textarea.rs-input-sm {
 .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 {
@@ -593,7 +599,7 @@ textarea.rs-input-sm {
 }
 .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;
@@ -623,7 +629,7 @@ textarea.rs-input-sm {
 }
 .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;
@@ -654,7 +660,7 @@ textarea.rs-input-sm {
 }
 .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;
@@ -696,7 +702,7 @@ textarea.rs-input-sm {
 }
 .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);
@@ -1461,7 +1467,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;
@@ -1508,16 +1514,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 {
@@ -2174,6 +2180,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
             transform: rotate(360deg);
   }
 }
+.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;
@@ -2205,7 +2218,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;
@@ -2386,14 +2408,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 {
@@ -2476,7 +2498,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;
@@ -2961,6 +2983,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,
@@ -2975,6 +3000,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;
 }
@@ -3042,6 +3071,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-auto-complete-menu {
   overflow-y: auto;
 }

package/Button/styles/index.css

@@ -2,6 +2,7 @@
 .rs-theme-light {
   --rs-gray-0: #fff;
   --rs-gray-50: #f7f7fa;
+  --rs-gray-100: #f2f2f5;
   --rs-gray-200: #e5e5ea;
   --rs-gray-300: #d9d9d9;
   --rs-gray-400: #c5c6c7;
@@ -23,7 +24,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);
@@ -59,6 +60,7 @@
 .rs-theme-dark {
   --rs-gray-0: #fff;
   --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
@@ -115,6 +117,7 @@
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
   --rs-gray-50: #e9ebf0;
+  --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
@@ -138,7 +141,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);
@@ -277,14 +281,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 {
@@ -332,7 +336,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;
@@ -362,7 +366,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;
@@ -393,7 +397,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;
@@ -435,7 +439,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);

package/Button/styles/mixin.less

@@ -21,7 +21,7 @@
     @rules();
 
     .high-contrast-mode({
-      opacity: 0.5;
+      border-color: var(--rs-btn-default-disabled-boreder-color);
     });
   }
 }

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [5.62.0](https://github.com/rsuite/rsuite/compare/v5.61.0...v5.62.0) (2024-05-24)
+
+
+### Bug Fixes
+
+* **DatePicker:** fix calendar component style issue ([#3816](https://github.com/rsuite/rsuite/issues/3816)) ([f455182](https://github.com/rsuite/rsuite/commit/f455182ffcebb382ad9a3d71149c876aefa84e4a))
+* **DatePicker,DateRangePicker:** fix `renderValue` and `editable` can't coexist ([#3815](https://github.com/rsuite/rsuite/issues/3815)) ([20d4a81](https://github.com/rsuite/rsuite/commit/20d4a817ec70ea3f073ca7763c8abbe66b21a913))
+
+
+### Features
+
+* **Calendar,DatePicker,DateRangePicker:** add support for `weekStart` ([#3814](https://github.com/rsuite/rsuite/issues/3814)) ([9edbbcd](https://github.com/rsuite/rsuite/commit/9edbbcdf1d550e669483c5bca6cad624d5e8cf74))
+* **Panel, Tree, CheckTree:** add support for `scrollShadow` ([#3818](https://github.com/rsuite/rsuite/issues/3818)) ([8183e92](https://github.com/rsuite/rsuite/commit/8183e92d1998cc1945b181b916bce6cefcee3012))
+
+
+
+# [5.61.0](https://github.com/rsuite/rsuite/compare/v5.60.2...v5.61.0) (2024-05-17)
+
+
+### Bug Fixes
+
+* **Steps:** center align inner icon/text ([#3811](https://github.com/rsuite/rsuite/issues/3811)) ([1f284ea](https://github.com/rsuite/rsuite/commit/1f284ea486a019a5f1360a69bb962818b48dbe75))
+* fix the color contrast of form controls in disabled state ([#3809](https://github.com/rsuite/rsuite/issues/3809)) ([211ce5f](https://github.com/rsuite/rsuite/commit/211ce5fe868285d70b59ff944a77b1b86e2bc8b9))
+* **DatePicker, DateRangePicker:** block pointer events when disabled ([#3797](https://github.com/rsuite/rsuite/issues/3797)) ([166fb45](https://github.com/rsuite/rsuite/commit/166fb455a86090e8a7b1c734984f0350aa617af0))
+* **DatePicker,DateRangePicker:** fix the issue that `renderValue` does not work ([#3798](https://github.com/rsuite/rsuite/issues/3798)) ([494c9c6](https://github.com/rsuite/rsuite/commit/494c9c6d052f0384c19144f97a545cf317e58f3b))
+* **DateRangePicker:** fix calendar panel vertical display ([#3806](https://github.com/rsuite/rsuite/issues/3806)) ([0da17e9](https://github.com/rsuite/rsuite/commit/0da17e9dc9f66c7290f5fbf181b9bf2893b3b5ee))
+* **Placeholder.Grid:** fix `active` not working ([#3805](https://github.com/rsuite/rsuite/issues/3805)) ([2e1a4ce](https://github.com/rsuite/rsuite/commit/2e1a4ce523d453074aa3b4ab753dd9ae6f0e696c))
+
+
+### Features
+
+* **Highlight:** add support for Highlight component ([#3810](https://github.com/rsuite/rsuite/issues/3810)) ([876377b](https://github.com/rsuite/rsuite/commit/876377bbcacfbf637f7cd2ef803242f646e5eda6))
+* option group of the picker supports sticking to the top of container ([#3807](https://github.com/rsuite/rsuite/issues/3807)) ([157a2bf](https://github.com/rsuite/rsuite/commit/157a2bfa90334692baad95a80a254dea423f1425))
+
+
+### Performance Improvements
+
+* **DateRangePicker:** improve the performance when typing the date ([#3803](https://github.com/rsuite/rsuite/issues/3803)) ([a384bd0](https://github.com/rsuite/rsuite/commit/a384bd0d1909e588eed87157bab137faa761e937))
+
+
+
 ## [5.60.2](https://github.com/rsuite/rsuite/compare/v5.60.1...v5.60.2) (2024-05-10)
 
 

package/Calendar/styles/index.css

@@ -45,7 +45,7 @@
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-active: var(--rs-primary-700);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-text-error: var(--rs-color-red);
   --rs-border-primary: var(--rs-gray-200);
   --rs-border-secondary: var(--rs-gray-100);
@@ -60,7 +60,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);
@@ -149,7 +149,7 @@
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-active: var(--rs-primary-500);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-700);
@@ -250,7 +250,7 @@
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-active: var(--rs-primary-500);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-800);
@@ -266,7 +266,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);
@@ -414,14 +415,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 {
@@ -469,7 +470,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;
@@ -499,7 +500,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;
@@ -530,7 +531,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;
@@ -572,7 +573,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);
@@ -1480,7 +1481,7 @@
 }
 .rs-theme-high-contrast .rs-calendar-header-error:disabled,
 .rs-theme-high-contrast .rs-calendar-header-error.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-theme-dark .rs-calendar-header-error {
   --rs-btn-subtle-hover-bg: var(--rs-red-600);
@@ -1582,7 +1583,7 @@
 .rs-calendar-table-cell-disabled .rs-calendar-table-header-cell-content:hover,
 .rs-calendar-table-header-cell-disabled .rs-calendar-table-cell-content:hover,
 .rs-calendar-table-header-cell-disabled .rs-calendar-table-header-cell-content:hover {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-calendar-table-cell-disabled .rs-calendar-table-cell-content,
@@ -1793,7 +1794,7 @@
   background-color: var(--rs-state-hover-bg);
 }
 .rs-calendar-month-dropdown-cell:not(.rs-calendar-month-dropdown-cell-active).disabled .rs-calendar-month-dropdown-cell-content {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   background: none;
   text-decoration: line-through;
@@ -1923,7 +1924,7 @@
   outline-offset: 2px;
 }
 .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-disabled {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   background: none;
   cursor: not-allowed;