rsuite 5.60.1 → 5.61.0

package/DateRangePicker/styles/index.css

@@ -47,8 +47,9 @@
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-inverse: var(--rs-gray-50);
   --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-text-highlight-bg: #fff6c9;
   --rs-border-primary: var(--rs-gray-200);
   --rs-border-secondary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-0);
@@ -65,7 +66,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);
@@ -94,6 +95,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);
@@ -168,7 +170,7 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-inverse: var(--rs-gray-800);
   --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);
@@ -214,6 +216,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);
@@ -286,7 +289,8 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-inverse: var(--rs-gray-800);
   --rs-text-active: var(--rs-primary-500);
-  --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-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-800);
@@ -305,7 +309,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);
@@ -334,6 +339,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);
@@ -464,14 +470,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 {
@@ -519,7 +525,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;
@@ -549,7 +555,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;
@@ -580,7 +586,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;
@@ -622,7 +628,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);
@@ -1298,7 +1304,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 {
@@ -1499,7 +1505,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;
@@ -1546,16 +1552,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 {
@@ -2201,7 +2207,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 }
 .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);
@@ -2303,7 +2309,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .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,
@@ -2514,7 +2520,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   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;
@@ -2644,7 +2650,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   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;
@@ -2974,6 +2980,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-toggle-wrapper {
   display: inline-block;
   vertical-align: middle;
@@ -2986,7 +2999,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;
@@ -3167,14 +3189,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 {
@@ -3257,7 +3279,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;
@@ -3742,6 +3764,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,
@@ -3756,6 +3781,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;
 }
@@ -3823,6 +3852,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-toolbar {
   padding: 12px;
   border-top: 1px solid #e5e5ea;
@@ -3837,6 +3873,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-date .rs-input-group-addon .rs-btn-close {
   padding: 0;
@@ -3982,6 +4019,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-daterange .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-daterange .rs-input-group-addon .rs-btn-close {
   padding: 0;
@@ -4062,6 +4100,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   left: 50%;
 }
 .rs-picker-daterange-calendar-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
   height: 274px;
   min-width: 492px;
 }

package/DateRangePicker/styles/index.less

@@ -10,6 +10,7 @@
 .rs-picker-daterange {
   .rs-input-group-addon {
     color: var(--rs-text-secondary);
+    cursor: pointer;
 
     .rs-btn-close {
       padding: 0;
@@ -118,6 +119,8 @@
 
 // Calendar group
 .rs-picker-daterange-calendar-group {
+  display: flex;
+  flex-wrap: nowrap;
   height: 274px;
   // Make sure group wrapper can put 2 date-panels even screen width is not enough.
   min-width: 492px;

package/Dropdown/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-overlay: var(--rs-gray-0);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
@@ -45,7 +45,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);
@@ -122,7 +122,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-overlay: var(--rs-gray-700);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
@@ -208,7 +208,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-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
@@ -220,7 +220,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);
@@ -367,14 +368,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 {
@@ -422,7 +423,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;
@@ -452,7 +453,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;
@@ -483,7 +484,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;
@@ -525,7 +526,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);
@@ -1340,13 +1341,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,

package/Highlight/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Highlight",
+  "private": true,
+  "main": "../cjs/Highlight/index.js",
+  "module": "../esm/Highlight/index.js",
+  "types": "../esm/Highlight/index.d.ts"
+}

package/Highlight/styles/index.css

@@ -0,0 +1,8 @@
+.rs-highlight-mark {
+  background-color: var(--rs-text-highlight-bg);
+  padding: 0 0.2em;
+  font-weight: bolder;
+  border-radius: 4px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/Highlight/styles/index.less

@@ -0,0 +1,6 @@
+.rs-highlight-mark {
+  background-color: var(--rs-text-highlight-bg);
+  padding: 0 0.2em;
+  font-weight: bolder;
+  border-radius: 4px;
+}

package/IconButton/styles/index.css

@@ -61,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);
@@ -264,7 +264,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);
@@ -409,14 +410,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 {
@@ -464,7 +465,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;
@@ -494,7 +495,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;
@@ -525,7 +526,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;
@@ -567,7 +568,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);
@@ -1252,7 +1253,7 @@
 }
 .rs-theme-high-contrast .rs-btn-icon-with-text:disabled,
 .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-icon-with-text.rs-btn-primary > .rs-icon {
   background-color: #2589f5;
@@ -1275,7 +1276,7 @@
 }
 .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-primary:disabled,
 .rs-theme-high-contrast .rs-btn-icon-with-text.rs-btn-primary.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-icon-circle {
   border-radius: 50% !important;

package/Input/styles/index.css

@@ -12,7 +12,7 @@
   --rs-primary-500: #3498ff;
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-secondary: var(--rs-gray-600);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-0);
@@ -38,7 +38,7 @@
   --rs-primary-500: #34c3ff;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-800);
@@ -63,7 +63,7 @@
   --rs-primary-500: #ffff00;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-input-bg: var(--rs-gray-800);
@@ -142,7 +142,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 {