rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250424

package/InputNumber/styles/index.css

@@ -94,6 +94,7 @@
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
+  --rs-border-secondary: var(--rs-gray-100);
   --rs-color-focus-ring: 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);
@@ -211,7 +212,8 @@
   --rs-text-secondary: var(--rs-gray-200);
   --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-border-secondary: var(--rs-gray-700);
+  --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);
@@ -250,7 +252,7 @@
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --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);
   }
@@ -327,6 +329,7 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
+  --rs-border-secondary: var(--rs-gray-700);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
@@ -413,15 +416,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);
@@ -508,10 +508,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1184,18 +1182,14 @@
 .rs-theme-high-contrast .rs-input-group {
   transition: none;
 }
-.rs-input-group:not(.rs-input-group-disabled):hover,
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
   border-color: var(--rs-input-focus-border);
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
-.rs-theme-high-contrast .rs-input-group:focus-within {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input-group .rs-input-group {
   outline: none !important;
@@ -1204,7 +1198,7 @@
 .rs-input-group .rs-input-group-btn {
   height: var(--rs-input-group-input-height);
 }
-.rs-input-group .rs-input-number,
+.rs-input-group .rs-number-input,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
 .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
@@ -1338,33 +1332,40 @@
   border-radius: var(--rs-radius-none);
   font-size: var(--rs-input-group-font-size);
 }
-.rs-input-number {
+.rs-number-input {
   --rs-number-input-touchspin-font-size: var(--rs-font-size-xs);
   --rs-number-input-touchspin-height-xs: calc(calc(24px - 2px) / 2);
   --rs-number-input-touchspin-height-sm: calc(calc(30px - 2px) / 2);
   --rs-number-input-touchspin-height-md: calc(calc(36px - 2px) / 2);
   --rs-number-input-touchspin-height-lg: calc(calc(42px - 2px) / 2);
-  background-color: var(--rs-input-bg);
 }
-.rs-input-number.rs-input-group-xs {
+.rs-number-input.rs-input-group {
+  width: auto;
+}
+.rs-number-input.rs-input-group-xs {
   --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-xs);
+  --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - 0px);
 }
-.rs-input-number.rs-input-group-sm {
+.rs-number-input.rs-input-group-sm {
   --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-sm);
+  --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - 2px);
 }
-.rs-input-number.rs-input-group-md {
+.rs-number-input.rs-input-group-md {
   --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-md);
+  --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - 4px);
 }
-.rs-input-number.rs-input-group-lg {
+.rs-number-input.rs-input-group-lg {
   --rs-number-input-touchspin-height: var(--rs-number-input-touchspin-height-lg);
+  --rs-number-input-icon-height: calc(var(--rs-number-input-touchspin-height) - 6px);
 }
-.rs-input-number-btn-group-vertical {
+.rs-number-input-btn-group-vertical {
+  border-left: 1px solid var(--rs-border-secondary);
   position: relative;
   width: 20px;
   flex: 0 0 20px;
   display: block;
 }
-.rs-input-number-btn-group-vertical > .rs-btn {
+.rs-number-input-btn-group-vertical > .rs-btn {
   display: block;
   float: none;
   width: 100%;
@@ -1372,30 +1373,30 @@
   position: relative;
   border: none;
 }
-.rs-input-number .rs-input-number-touchspin-up,
-.rs-input-number .rs-input-number-touchspin-down {
+.rs-number-input .rs-number-input-touchspin-up,
+.rs-number-input .rs-number-input-touchspin-down {
   position: relative;
   border-radius: var(--rs-radius-none);
   padding: 0;
   box-shadow: none !important;
   height: var(--rs-number-input-touchspin-height);
 }
-.rs-input-number .rs-input-number-touchspin-up > .rs-icon,
-.rs-input-number .rs-input-number-touchspin-down > .rs-icon {
+.rs-number-input .rs-number-input-touchspin-up > .rs-icon,
+.rs-number-input .rs-number-input-touchspin-down > .rs-icon {
   width: 100%;
   font-size: var(--rs-number-input-touchspin-font-size);
   color: var(--rs-text-secondary);
-  height: var(--rs-number-input-touchspin-height);
+  height: var(--rs-number-input-icon-height);
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.rs-input-number input[type='number'] {
+.rs-number-input input[type='number'] {
   -webkit-appearance: textfield;
      -moz-appearance: textfield;
           appearance: textfield;
 }
-.rs-input-number input[type='number']::-webkit-inner-spin-button {
+.rs-number-input input[type='number']::-webkit-inner-spin-button {
   /* stylelint-disable */
   -webkit-appearance: none;
 }

package/InputNumber/styles/index.less

@@ -1,67 +1 @@
-@import '../../styles/common';
-@import '../../Input/styles/index';
-@import '../../InputGroup/styles/index';
-@import 'mixin';
-
-.rs-input-number {
-  --rs-number-input-touchspin-font-size: var(--rs-font-size-xs);
-  --rs-number-input-touchspin-height-xs: calc(calc(@input-height-extra-small - 2px) / 2);
-  --rs-number-input-touchspin-height-sm: calc(calc(@input-height-small - 2px) / 2);
-  --rs-number-input-touchspin-height-md: calc(calc(@input-height-base - 2px) / 2);
-  --rs-number-input-touchspin-height-lg: calc(calc(@input-height-large - 2px) / 2);
-
-  background-color: var(--rs-input-bg);
-
-  @sizes: xs, sm, md, lg;
-  each(@sizes, .(@size) {
-    &.rs-input-group-@{size} {
-      --rs-number-input-touchspin-height: var(~'--rs-number-input-touchspin-height-@{size}');
-    }
-  });
-
-  &-btn-group-vertical {
-    position: relative;
-    width: 20px;
-    flex: 0 0 20px;
-    display: block;
-
-    & > .rs-btn {
-      display: block;
-      float: none;
-      width: 100%;
-      max-width: 100%;
-      position: relative;
-      border: none;
-    }
-  }
-
-  .rs-input-number-touchspin-up,
-  .rs-input-number-touchspin-down {
-    position: relative;
-     border-radius: var(--rs-radius-none);
-    padding: 0;
-    box-shadow: none !important;
-    height: var(--rs-number-input-touchspin-height);
-
-    > .rs-icon {
-      width: 100%;
-      font-size: var(--rs-number-input-touchspin-font-size);
-      color: var(--rs-text-secondary);
-      height: var(--rs-number-input-touchspin-height);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  // Reset Input Number styling
-  // Reference https://stackoverflow.com/questions/26024771/styling-a-input-type-number#answer-40189766
-  input[type='number'] {
-    appearance: textfield;
-
-    &::-webkit-inner-spin-button {
-      /* stylelint-disable */
-      -webkit-appearance: none;
-    }
-  }
-}
+@import '../../NumberInput/styles/index.less';

package/InputPicker/styles/index.css

@@ -106,8 +106,7 @@
   --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%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) 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);
@@ -152,7 +151,6 @@
   --rs-listbox-option-selected-text: var(--rs-primary-700);
   --rs-listbox-option-selected-bg: var(--rs-primary-50);
   --rs-listbox-option-disabled-text: var(--rs-gray-400);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-700);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: #fff;
@@ -163,7 +161,6 @@
   :root,
   .rs-theme-light {
     --rs-color-focus-ring: rgba(52, 152, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
     --rs-loader-ring: rgba(247, 247, 250, 0.8);
     --rs-loader-backdrop: rgba(255, 255, 255, 0.9);
     --rs-loader-ring-inverse: rgba(247, 247, 250, 0.3);
@@ -250,9 +247,8 @@
   --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%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) 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);
@@ -297,15 +293,13 @@
   --rs-listbox-option-selected-text: var(--rs-primary-500);
   --rs-listbox-option-selected-bg: rgb(from var(--rs-primary-900) r g b / 20%);
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-500);
   --rs-picker-count-bg: var(--rs-primary-700);
   --rs-picker-count-text: #fff;
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
-    --rs-color-focus-ring: 0 0 0 3px rgba(52, 195, 255, 0.25);
-    --rs-state-focus-shadow: 0 0 0 3px rgba(52, 195, 255, 0.25);
+    --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-backdrop: rgba(15, 19, 26, 0.83);
     --rs-loader-ring-inverse: rgba(233, 235, 240, 0.8);
@@ -394,8 +388,7 @@
   --rs-border-primary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
   --rs-btn-default-border-color: var(--rs-primary-500);
@@ -441,7 +434,6 @@
   --rs-listbox-option-selected-text: var(--rs-primary-500);
   --rs-listbox-option-selected-bg: transparent;
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
-  --rs-close-button-hover-color: var(--rs-color-red);
   --rs-picker-value: var(--rs-primary-500);
   --rs-picker-count-bg: var(--rs-primary-500);
   --rs-picker-count-text: var(--rs-gray-900);
@@ -496,15 +488,12 @@
 .rs-input::placeholder {
   color: var(--rs-text-secondary);
 }
-.rs-input:focus,
-.rs-input:hover:not(:disabled) {
-  border-color: var(--rs-input-focus-border);
-}
 .rs-input:focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  border-color: var(--rs-input-focus-border);
 }
-.rs-theme-high-contrast .rs-input:focus {
-  outline-offset: 2px;
+.rs-input:focus-visible {
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input:disabled {
   background-color: var(--rs-input-disabled-bg);
@@ -589,17 +578,13 @@
 .rs-theme-high-contrast .rs-picker-select-menu-item:hover,
 .rs-theme-high-contrast .rs-picker-select-menu-item:focus,
 .rs-theme-high-contrast .rs-picker-select-menu-item.rs-picker-select-menu-item-focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item:hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-picker-select-menu-item.rs-picker-select-menu-item-focus {
-  outline-offset: 2px;
-}
 .rs-picker-select-menu-item.rs-picker-select-menu-item-active {
   font-weight: bold;
   color: var(--rs-listbox-option-selected-text);
@@ -671,10 +656,8 @@
   border-color: var(--rs-btn-default-border-color);
 }
 .rs-btn:focus-visible {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-btn:focus-visible {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-btn:hover {
   color: var(--rs-btn-default-hover-text);
@@ -1589,18 +1572,14 @@
 .rs-theme-high-contrast .rs-input-group {
   transition: none;
 }
-.rs-input-group:not(.rs-input-group-disabled):hover,
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
   border-color: var(--rs-input-focus-border);
 }
 .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
 .rs-input-group:focus-within {
-  outline: 3px solid var(--rs-color-focus-ring);
-}
-.rs-theme-high-contrast .rs-input-group:not(.rs-input-group-disabled).rs-input-group-focus,
-.rs-theme-high-contrast .rs-input-group:focus-within {
-  outline-offset: 2px;
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-input-group .rs-input-group {
   outline: none !important;
@@ -1609,7 +1588,7 @@
 .rs-input-group .rs-input-group-btn {
   height: var(--rs-input-group-input-height);
 }
-.rs-input-group .rs-input-number,
+.rs-input-group .rs-number-input,
 .rs-input-group .rs-input-group-addon,
 .rs-input-group .rs-input-group-btn,
 .rs-input-group .rs-picker[data-picker='date'] .rs-picker-toggle {
@@ -1759,15 +1738,6 @@
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
-.rs-btn-close:hover,
-.rs-btn-close:focus {
-  color: var(--rs-close-button-hover-color);
-}
-.rs-btn-close:hover svg path,
-.rs-btn-close:focus svg path {
-  stroke: var(--rs-close-button-hover-color);
-  stroke-width: 1;
-}
 .rs-picker[data-variant='subtle'] .picker-subtle-toggle {
   --rs-picker-toggle-border-width: 0px;
   position: relative;
@@ -1776,12 +1746,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .picker-subtle-toggle:active::after {
   display: none;
@@ -1791,6 +1759,7 @@
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
+  --rs-picker-toggle-border-color: var(--rs-border-primary);
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
@@ -1810,6 +1779,9 @@
 .rs-picker[data-disabled='true'] .rs-picker-value-count {
   opacity: 0.5;
 }
+.rs-picker[data-disabled='true'] .rs-picker-toggle {
+  pointer-events: none;
+}
 .rs-picker-toggle .rs-picker-toggle-placeholder {
   color: var(--rs-text-secondary);
 }
@@ -1832,13 +1804,14 @@
 .rs-picker-value-separator {
   margin: 0 var(--rs-spacing) 0 0;
 }
-.rs-picker:not([data-disabled='true']):hover,
 .rs-picker.rs-picker-focused {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker-toggle-active,
 .rs-picker.rs-picker-focused {
-  box-shadow: var(--rs-state-focus-shadow);
+  --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 .rs-picker-label.rs-input-group-addon {
   color: var(--rs-text-primary);
@@ -1947,12 +1920,13 @@
 }
 [data-variant='default'] .rs-picker-toggle {
   color: var(--rs-text-primary);
-  border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
+  border-width: var(--rs-picker-toggle-border-width);
+  border-color: var(--rs-picker-toggle-border-color);
+  border-style: solid;
 }
 [data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker-toggle [data-variant='default']:not([data-disabled='true']):hover,
 .rs-picker-toggle [data-variant='default']:not([data-disabled='true']):focus {
   border-color: var(--rs-input-focus-border);
 }
@@ -1964,12 +1938,10 @@
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle {
   cursor: not-allowed;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active {
   background: none;
 }
-.rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:hover::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:focus::after,
 .rs-picker[data-variant='subtle'][data-disabled='true'] .rs-picker-toggle:active::after {
   display: none;
@@ -2022,12 +1994,7 @@
 .rs-theme-high-contrast .rs-picker-toggle {
   transition: none;
 }
-.rs-picker-toggle .rs-picker[data-variant='default']:hover,
-:not([data-disabled='true']) .rs-picker-toggle:hover,
-.rs-picker-toggle .rs-picker[data-variant='default']:focus,
-:not([data-disabled='true']) .rs-picker-toggle:focus,
-.rs-picker-toggle .rs-picker[data-variant='default']-active,
-:not([data-disabled='true']) .rs-picker-toggle-active {
+.rs-picker-toggle .rs-picker[data-variant='default']:focus {
   border-color: var(--rs-input-focus-border);
 }
 .rs-picker[data-variant='subtle'] .rs-picker-toggle {
@@ -2088,15 +2055,13 @@
   align-items: center;
 }
 .rs-picker-toggle-indicator .rs-picker-clean {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  font-size: var(--rs-font-size-sm);
-  background: inherit;
   color: var(--rs-text-secondary);
   transition: 0.2s color linear;
   cursor: pointer;
 }
+.rs-picker-toggle-indicator .rs-picker-clean:hover {
+  color: var(--rs-text-primary);
+}
 .rs-picker-toggle-indicator .rs-picker-clean.rs-btn-close {
   padding: 0;
 }
@@ -2134,17 +2099,13 @@
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline: 3px solid var(--rs-color-focus-ring);
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
   outline-offset: -3px;
   outline-width: 2px;
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-check-item.rs-check-item-focus {
-  outline-offset: 2px;
-}
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item:focus .rs-check-tree-node-text-wrapper,
 .rs-theme-high-contrast .rs-check-item.rs-check-item-focus .rs-check-tree-node-text-wrapper {

package/Message/styles/index.css

@@ -18,6 +18,7 @@
   --rs-font-size-5xl: 3rem;
   --rs-text-line-height-sm: calc(1.25 / 0.875);
   --rs-text-line-height-md: calc(1.5 / 1);
+  --rs-spacing: 0.25rem;
   --rs-radius-none: 0;
   --rs-radius-md: 0.375rem;
   --rs-radius-full: calc(infinity * 1px);
@@ -83,7 +84,6 @@
   --rs-message-error-icon-border: var(--rs-red-200);
   --rs-message-error-bg: rgb(from var(--rs-red-100) r g b / 60%);
   --rs-message-error-border: var(--rs-color-red);
-  --rs-close-button-hover-color: var(--rs-color-red);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -150,7 +150,6 @@
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-500);
   --rs-message-error-border: var(--rs-red-800);
-  --rs-close-button-hover-color: var(--rs-color-red);
 }
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
@@ -208,7 +207,6 @@
   --rs-message-error-icon: #fff;
   --rs-message-error-bg: var(--rs-red-900);
   --rs-message-error-border: var(--rs-red-300);
-  --rs-close-button-hover-color: var(--rs-color-red);
 }
 @keyframes notificationMoveIn {
   0% {
@@ -267,24 +265,16 @@
 .rs-btn-close .rs-icon {
   vertical-align: bottom;
 }
-.rs-btn-close:hover,
-.rs-btn-close:focus {
-  color: var(--rs-close-button-hover-color);
-}
-.rs-btn-close:hover svg path,
-.rs-btn-close:focus svg path {
-  stroke: var(--rs-close-button-hover-color);
-  stroke-width: 1;
-}
 .rs-message {
   --rs-message-font-size: var(--rs-font-size-sm);
   --rs-message-line-height: var(--rs-text-line-height-sm);
   --rs-message-border-radius: var(--rs-radius-md);
   --rs-message-icon-size: var(--rs-font-size-md);
-  --rs-message-padding: 1.25rem;
+  --rs-message-padding: calc(var(--rs-spacing) * 4);
   --rs-message-header-color: var(--rs-text-heading);
   --rs-message-body-color: var(--rs-text-primary);
   --rs-message-icon-color: var(--rs-text-secondary);
+  --rs-message-spacing: calc(var(--rs-spacing) * 2);
   border-radius: var(--rs-message-border-radius);
   font-size: var(--rs-message-font-size);
   line-height: var(--rs-message-line-height);
@@ -333,6 +323,7 @@
   padding: var(--rs-message-padding);
   display: flex;
   align-items: baseline;
+  gap: var(--rs-message-spacing);
 }
 .rs-message.rs-message-has-title {
   --rs-message-icon-size: var(--rs-font-size-2xl);
@@ -359,7 +350,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: 20px;
+  gap: calc(var(--rs-spacing) * 4);
 }
 .rs-message.rs-message-centered .rs-message-icon {
   align-self: center;
@@ -377,7 +368,6 @@
 .rs-message-icon {
   align-self: center;
   font-size: 0;
-  margin-inline-end: 10px;
 }
 .rs-message-icon .rs-icon {
   font-size: var(--rs-message-icon-size);

package/Message/styles/index.less

@@ -13,10 +13,11 @@
   --rs-message-line-height: var(--rs-text-line-height-sm);
   --rs-message-border-radius: var(--rs-radius-md);
   --rs-message-icon-size: var(--rs-font-size-md);
-  --rs-message-padding: 1.25rem;
+  --rs-message-padding: calc(var(--rs-spacing) * 4);
   --rs-message-header-color: var(--rs-text-heading);
   --rs-message-body-color: var(--rs-text-primary);
   --rs-message-icon-color: var(--rs-text-secondary);
+  --rs-message-spacing: calc(var(--rs-spacing) * 2);
 
   border-radius: var(--rs-message-border-radius);
   font-size: var(--rs-message-font-size);
@@ -50,6 +51,7 @@
     padding: var(--rs-message-padding);
     display: flex;
     align-items: baseline;
+    gap: var(--rs-message-spacing);
   }
 
   // Message with a title
@@ -84,7 +86,7 @@
       flex-direction: column;
       align-items: center;
       text-align: center;
-      gap: 20px;
+      gap: calc(var(--rs-spacing) * 4);
     }
 
     .rs-message-icon {
@@ -108,7 +110,6 @@
   &-icon {
     align-self: center;
     font-size: 0; // remove whitespace before svg
-    margin-inline-end: 10px;
 
     // Icon
     .rs-icon {