rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/internals/Picker/styles/mixin.less

@@ -18,7 +18,7 @@
   // Set border & padding to menu group if  it isn't the first.
   .rs-@{prefix}-menu-group:not(:first-child) {
     margin-top: @picker-group-select-menu-gap;
-    border-top: 1px solid @picker-group-select-menu-lin-color;
+    border-top: 1px solid var(--rs-divider-border);
     padding-top: @picker-group-select-menu-gap;
   }
 }
@@ -27,17 +27,17 @@
 .picker-menu-group-title(@prefix) {
   .rs-@{prefix}-menu-group-title {
     padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
-    padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
+    padding-inline-end: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
     position: relative;
     cursor: pointer;
     color: var(--rs-text-heading);
 
     .rs-@{prefix}-menu-group-caret {
       display: inline-block;
-      margin-left: 2px;
+      margin-inline-start: 2px;
       position: absolute;
       top: @padding-y;
-      right: @padding-x;
+      inset-inline-end: @padding-x;
       color: var(--rs-text-secondary);
     }
   }
@@ -63,11 +63,11 @@
 
 .picker-calendar-cell-content() {
   display: inline-block;
-  font-size: @calendar-table-cell-content-font-size;
-  line-height: @calendar-table-cell-content-line-height;
-  padding: @calendar-table-cell-content-padding;
   cursor: pointer;
-  border-radius: @border-radius;
+  font-size: var(--rs-calendar-cell-font-size);
+  line-height: var(--rs-calendar-cell-line-height);
+  padding: var(--rs-calendar-cell-padding);
+  border-radius: var(--rs-calendar-border-radius);
 
   &:hover {
     background-color: var(--rs-state-hover-bg);
@@ -89,171 +89,11 @@
   background: transparent;
 }
 
-.picker-custom-button-caret-size(@padding-horizontal,@padding-vertical,@clean-btn-margin:2px) {
-  @clean-btn-width: @dropdown-caret-width;
-
-  .rs-picker-toggle-wrapper & {
-    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
-  }
-
-  .rs-picker-has-value.rs-picker-cleanable & {
-    padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
-  }
-
-  .rs-picker-toggle-indicator {
-    .rs-picker-caret-icon,
-    .rs-picker-clean {
-      top: @padding-vertical;
-      right: @padding-horizontal;
-
-      .rs-picker-default & {
-        top: @padding-vertical - @picker-default-toggle-border-width;
-      }
-    }
-
-    .rs-picker-loader{
-      top: @padding-vertical;
-      right: @padding-horizontal;
-    }
-  }
-}
-
-.picker-button-caret-lg() {
-  .picker-custom-button-caret-size(
-    @padding-x-lg,
-    @padding-y-lg,
-    @clean-btn-margin:4px
-  );
-}
-
-.picker-button-caret-md() {
-  .picker-custom-button-caret-size(@padding-x, @padding-y);
-}
-
-.picker-button-caret-sm() {
-  .picker-custom-button-caret-size(@padding-x-sm, @padding-y-sm);
-}
-
-.picker-button-caret-xs() {
-  .picker-custom-button-caret-size(
-    @padding-x-xs,
-    @padding-y-xs,
-    @clean-btn-margin:2px
-  );
-}
-
-.daterange-picker-custom-toggle(@calendar-caret-width: 14px,@padding-horizontal, @top, @clean-btn-margin:2px) {
-  @toggle-clean-padding: 4px;
-  @clean-btn-width: @dropdown-caret-width;
-
-  padding-right: (@padding-horizontal + @calendar-caret-width + @dropdown-caret-padding);
-
-  .rs-picker-toggle-indicator {
-    .rs-picker-clean,
-    .rs-picker-caret-icon {
-      top: @top;
-      right: @padding-horizontal;
-
-      .rs-picker-subtle & {
-        top: @top - @picker-default-toggle-border-width;
-      }
-    }
-  }
-}
-
-.date-picker-button-caret-lg() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-large,
-      @padding-x-lg,
-      @top: 10px,
-      @clean-btn-margin: 4px
-    );
-  }
-}
-
-.date-picker-button-caret-md() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-base,
-      @padding-x,
-      @top: 8px
-    );
-  }
-}
-
-.date-picker-button-caret-sm() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-base,
-      @padding-x-sm,
-      @top: 4px
-    );
-  }
-}
-
-.date-picker-button-caret-xs() {
-  .rs-picker-date &,
-  .rs-picker-daterange & {
-    .daterange-picker-custom-toggle(
-      @calendar-caret-width: @font-size-extra-small,
-      @padding-x-xs,
-      @top: 2px
-    );
-  }
-}
-
-.picker-button-size(@size) {
-  .map-size(@size);
-
-  @padding-name: 'padding-y@{suffix}';
-  @padding-vertical: @@padding-name;
-
-  .rs-picker-default & {
-    .padding-vertical(@padding-vertical - @picker-default-toggle-border-width);
-  }
-}
-
-.picker-default-button-reset-padding-left(@size) {
-  .map-size(@size);
-  @padding-name: 'padding-x@{suffix}';
-  @padding-horizontal: @@padding-name;
-
-  .rs-picker-default & {
-    padding-left: @padding-horizontal - @picker-default-toggle-border-width;
-  }
-}
-
-.input-picker-input-sizes() {
-  @border-width: 2 * @picker-default-toggle-border-width;
-
-  .rs-picker-toggle.rs-btn-lg {
-    height: (@line-height-large-computed + @padding-y-lg*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-md {
-    height: (@line-height-computed + @padding-y*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-sm {
-    height: (@line-height-computed + @padding-y-sm*2 - @border-width);
-  }
-
-  .rs-picker-toggle.rs-btn-xs {
-    height: (@line-height-computed + @padding-y-xs*2 - @border-width);
-  }
-}
-
 // Default picker toggle
 .picker-default-toggle() {
   .rs-picker-default & {
-    .dropdown-toggle();
-
     color: var(--rs-text-primary);
-    border: @picker-default-toggle-border-width solid var(--rs-border-primary);
+    border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
   }
 
   .rs-picker-disabled & {
@@ -271,6 +111,7 @@
 // Subtle picker toggle
 .picker-subtle-toggle {
   .rs-picker-subtle & {
+    --rs-picker-toggle-border-width: 0px;
     .dropdown-toggle();
   }
 

package/internals/Ripple/styles/index.less

@@ -3,7 +3,7 @@
 .rs-ripple {
   position: absolute;
   display: block;
-  border-radius: 50%;
+  border-radius: var(--rs-radius-full);
   background-color: @ripple-bg;
   transform: scale(0);
   transition: 0s;
@@ -22,7 +22,7 @@
     width: 100%;
     height: 100%;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     pointer-events: none;
 
     & when (@enable-ripple-effect = false) {

package/internals/ScrollView/styles/index.less

@@ -54,11 +54,11 @@
     }
     &::-webkit-scrollbar-track {
       background: var(--rs-scrollbar-bg);
-      border-radius: 10px;
+      border-radius: var(--rs-radius-lg);
     }
     &::-webkit-scrollbar-thumb {
       background-color: var(--rs-scrollbar-thumb-bg);
-      border-radius: 6px;
+      border-radius: var(--rs-radius-md);
       border: 3px solid var(--rs-scrollbar-bg);
 
       &:hover {

package/locales/pl_PL/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025011413",
+  "version": "6.0.0-canary-2025031415",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -28,16 +28,16 @@
     "@babel/runtime": "^7.26.0",
     "@juggle/resize-observer": "^3.4.0",
     "@rsuite/icons": "^1.3.0",
-    "@types/lodash": "^4.14.184",
+    "@types/lodash": "^4.17.15",
     "@types/react-window": "^1.8.8",
     "classnames": "^2.3.1",
     "date-fns": "^4.1.0",
     "dom-lib": "^3.3.1",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.21",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.11",
     "rsuite-table": "^5.19.1",
-    "schema-typed": "^2.2.2"
+    "schema-typed": "^2.3.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -59,7 +59,7 @@
   "size-limit": [
     {
       "path": "lib/dist/rsuite.min.js",
-      "limit": "256 kB",
+      "limit": "280 kB",
       "gzip": true
     }
   ]

package/styles/color-modes/dark.less

@@ -80,7 +80,11 @@
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-focus-outline: 3px solid 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-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Kbd
+  --rs-kbd-bg: var(--rs-gray-600);
+  --rs-kbd-text: var(--rs-gray-50);
+  --rs-kbd-border: var(--rs-gray-700);
 
   // Scrollbar
   --rs-scrollbar-bg: transparent;
@@ -90,6 +94,7 @@
   // Button
   --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);
   --rs-btn-default-hover-bg: var(--rs-gray-500);
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-0);
@@ -97,6 +102,7 @@
   --rs-btn-default-disabled-text: var(--rs-gray-400);
   --rs-btn-primary-bg: var(--rs-primary-700);
   --rs-btn-primary-text: var(--rs-gray-0);
+  --rs-btn-primary-border-color: var(--rs-primary-800);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
   --rs-btn-primary-active-bg: var(--rs-primary-400);
   --rs-btn-subtle-text: var(--rs-gray-200);
@@ -174,14 +180,11 @@
   --rs-breadcrumb-item-active-text: #fff;
 
   // Dropdown
-  --rs-dropdown-divider: var(--rs-gray-600);
-  --rs-dropdown-item-bg-hover: var(--rs-gray-600);
-  --rs-dropdown-item-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-dropdown-item-text-active: var(--rs-primary-500);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 3px rgba(0, 0, 0, 0.24);
 
-  // ARIA menu
+  // Menu
+  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active: var(--rs-primary-500);
   --rs-menuitem-active-bg: var(--rs-gray-600);
   --rs-menuitem-active-text: currentColor;
 
@@ -234,20 +237,25 @@
   --rs-sidenav-default-bg: var(--rs-gray-800);
   --rs-sidenav-default-text: var(--rs-gray-200);
   --rs-sidenav-default-selected-text: var(--rs-primary-500);
+  --rs-sidenav-default-selected-bg: var(--rs-gray-700);
   --rs-sidenav-default-hover-bg: var(--rs-gray-700);
   --rs-sidenav-default-hover-text: var(--rs-gray-50);
   --rs-sidenav-default-footer-border: var(--rs-gray-600);
+  --rs-sidenav-default-subnav-border-color: var(--rs-gray-600);
   --rs-sidenav-inverse-bg: var(--rs-primary-700);
   --rs-sidenav-inverse-text: #fff;
-  --rs-sidenav-inverse-selected-bg: var(--rs-primary-400);
+  --rs-sidenav-inverse-selected-bg: var(--rs-primary-600);
   --rs-sidenav-inverse-hover-bg: var(--rs-primary-600);
   --rs-sidenav-inverse-footer-border: var(--rs-primary-600);
+  --rs-sidenav-inverse-subnav-border-color: var(--rs-primary-500);
   --rs-sidenav-subtle-bg: transparent;
   --rs-sidenav-subtle-text: var(--rs-gray-200);
   --rs-sidenav-subtle-selected-text: var(--rs-primary-500);
+  --rs-sidenav-subtle-selected-bg: var(--rs-gray-700);
   --rs-sidenav-subtle-hover-bg: var(--rs-gray-700);
   --rs-sidenav-subtle-hover-text: var(--rs-gray-50);
   --rs-sidenav-subtle-footer-border: var(--rs-gray-600);
+  --rs-sidenav-subtle-subnav-border-color: var(--rs-gray-600);
 
   // Input
   --rs-input-bg: var(--rs-gray-800);
@@ -343,9 +351,6 @@
   --rs-carousel-indicator-hover: var(--rs-gray-0);
   --rs-carousel-indicator-active: var(--rs-primary-500);
 
-  // Panel
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
   // List
   --rs-list-bg: var(--rs-gray-900);
   --rs-list-border: var(--rs-gray-700);
@@ -367,12 +372,6 @@
   --rs-table-scrollbar-thumb-active: var(--rs-gray-100);
   --rs-table-scrollbar-vertical-track: var(--rs-gray-700);
 
-  // Drawer
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
-  // Modal
-  --rs-modal-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
   // Form
   --rs-form-errormessage-text: #fff;
   --rs-form-errormessage-bg: var(--rs-color-red);
@@ -419,7 +418,7 @@
     --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
 
     // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
+    --rs-menuitem-bg-active: fade(@H900-dark, 20);
 
     // ARIA Listboxes
     --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);

package/styles/color-modes/high-contrast.less

@@ -82,7 +82,11 @@
   --rs-state-focus-shadow-slim: 0 0 0 2px var(--rs-gray-0);
   --rs-state-focus-outline: 3px solid 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-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Kbd
+  --rs-kbd-bg: var(--rs-gray-600);
+  --rs-kbd-text: var(--rs-gray-50);
+  --rs-kbd-border: var(--rs-gray-700);
 
   // Scrollbar
   --rs-scrollbar-bg: transparent;
@@ -92,7 +96,7 @@
   // Button
   --rs-btn-default-bg: transparent;
   --rs-btn-default-text: var(--rs-primary-500);
-  --rs-btn-default-border: 1px solid var(--rs-primary-500);
+  --rs-btn-default-border-color: var(--rs-primary-500);
   --rs-btn-default-hover-bg: transparent;
   --rs-btn-default-hover-text: var(--rs-primary-400);
   --rs-btn-default-active-bg: transparent;
@@ -179,14 +183,11 @@
   --rs-breadcrumb-item-active-text: #fff;
 
   // Dropdown
-  --rs-dropdown-divider: var(--rs-gray-600);
-  --rs-dropdown-item-bg-hover: var(--rs-gray-600);
-  --rs-dropdown-item-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
-  --rs-dropdown-item-text-active: var(--rs-primary-500);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 3px rgba(0, 0, 0, 0.24);
 
-  // ARIA menu
+  // Menu
+  --rs-menuitem-bg-active: rgb(from var(--rs-primary-900) r g b / 20%);
+  --rs-menuitem-text-active: var(--rs-primary-500);
   --rs-menuitem-active-bg: transparent;
   --rs-menuitem-active-text: var(--rs-primary-500);
 
@@ -240,21 +241,26 @@
   --rs-sidenav-default-bg: var(--rs-gray-800);
   --rs-sidenav-default-text: var(--rs-gray-50);
   --rs-sidenav-default-selected-text: var(--rs-primary-500);
+  --rs-sidenav-default-selected-bg: transparent;
   --rs-sidenav-default-hover-bg: transparent;
   --rs-sidenav-default-hover-text: var(--rs-primary-500);
-  --rs-sidenav-default-footer-border: var(--rs-gray-50);
+  --rs-sidenav-default-footer-border: var(--rs-gray-500);
+  --rs-sidenav-default-subnav-border-color: var(--rs-gray-500);
   --rs-sidenav-inverse-bg: var(--rs-gray-800);
   --rs-sidenav-inverse-text: var(--rs-gray-50);
   --rs-sidenav-inverse-selected-bg: transparent;
   --rs-sidenav-inverse-selected-text: var(--rs-primary-500);
   --rs-sidenav-inverse-hover-bg: transparent;
-  --rs-sidenav-inverse-footer-border: var(--rs-gray-50);
+  --rs-sidenav-inverse-footer-border: var(--rs-gray-500);
+  --rs-sidenav-inverse-subnav-border-color: var(--rs-gray-500);
   --rs-sidenav-subtle-bg: var(--rs-gray-800);
   --rs-sidenav-subtle-text: var(--rs-gray-50);
   --rs-sidenav-subtle-selected-text: var(--rs-primary-500);
+  --rs-sidenav-subtle-selected-bg: transparent;
   --rs-sidenav-subtle-hover-bg: transparent;
   --rs-sidenav-subtle-hover-text: var(--rs-primary-500);
-  --rs-sidenav-subtle-footer-border: var(--rs-gray-50);
+  --rs-sidenav-subtle-footer-border: var(--rs-gray-500);
+  --rs-sidenav-subtle-subnav-border-color: var(--rs-gray-500);
 
   // Input
   --rs-input-bg: var(--rs-gray-800);
@@ -351,9 +357,6 @@
   --rs-carousel-indicator-hover: var(--rs-gray-0);
   --rs-carousel-indicator-active: var(--rs-primary-500);
 
-  // Panel
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
   // Pagination
   --rs-pagination-item-text: var(--rs-gray-50);
   --rs-pagination-item-current-text: var(--rs-primary-500);
@@ -381,10 +384,8 @@
 
   // Drawer
   --rs-drawer-bg: var(--rs-gray-700);
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Modal
-  --rs-modal-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
   --rs-modal-border: 1px solid var(--rs-gray-100);
 
   // Form
@@ -431,7 +432,7 @@
     --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
 
     // Dropdown
-    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
+    --rs-menuitem-bg-active: fade(@H900-high-contrast, 20);
 
     // Slider
     --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);

package/styles/color-modes/light.less

@@ -76,13 +76,6 @@
   --rs-text-disabled: var(--rs-gray-600);
   --rs-text-error: var(--rs-color-red);
   --rs-text-highlight-bg: #fff6c9;
-  --rs-text-weight-thin: 100;
-  --rs-text-weight-light: 300;
-  --rs-text-weight-regular: 400;
-  --rs-text-weight-medium: 500;
-  --rs-text-weight-semibold: 600;
-  --rs-text-weight-bold: 700;
-  --rs-text-weight-extrabold: 800;
   --rs-border-primary: var(--rs-gray-200);
   --rs-border-secondary: var(--rs-gray-100);
   --rs-bg-card: var(--rs-gray-0);
@@ -95,7 +88,11 @@
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-focus-outline: 3px solid 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-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+
+  // Kbd
+  --rs-kbd-bg: var(--rs-gray-50);
+  --rs-kbd-text: var(--rs-gray-800);
+  --rs-kbd-border: var(--rs-gray-200);
 
   // Scrollbar
   --rs-scrollbar-bg: transparent;
@@ -105,6 +102,7 @@
   // Button
   --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);
   --rs-btn-default-hover-bg: var(--rs-gray-200);
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
@@ -112,6 +110,7 @@
   --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-border-color: var(--rs-primary-600);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
   --rs-btn-primary-active-bg: var(--rs-primary-700);
   --rs-btn-subtle-text: var(--rs-gray-800);
@@ -193,15 +192,12 @@
   --rs-breadcrumb-item-active-text: var(--rs-gray-900);
 
   // Dropdown
-  --rs-dropdown-divider: var(--rs-gray-200);
-  --rs-dropdown-item-bg-hover: rgb(from var(--rs-primary-100) r g b / 50%);
-  --rs-dropdown-item-bg-active: var(--rs-primary-50);
-  --rs-dropdown-item-text-active: var(--rs-primary-700);
+  --rs-menuitem-bg-active: var(--rs-primary-50);
   --rs-dropdown-header-text: var(--rs-gray-500);
-  --rs-dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
 
   // ARIA menu
-  --rs-menuitem-active-bg: rgb(from var(--rs-primary-100) r g b / 50%);
+  --rs-menuitem-text-active: var(--rs-primary-700);
+  --rs-menuitem-active-bg: var(--rs-gray-100);
   --rs-menuitem-active-text: var(--rs-primary-700);
 
   // Steps
@@ -231,7 +227,6 @@
   --rs-navs-pills-item-active-bg: var(--rs-gray-0);
   --rs-navs-pills-item-active-color: var(--rs-gray-900);
   --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
-  --rs-navs-pills-item-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 
   // Navbar
   --rs-navbar-default-bg: var(--rs-gray-50);
@@ -254,20 +249,25 @@
   --rs-sidenav-default-bg: var(--rs-gray-50);
   --rs-sidenav-default-text: var(--rs-gray-800);
   --rs-sidenav-default-selected-text: var(--rs-primary-700);
+  --rs-sidenav-default-selected-bg: var(--rs-gray-200);
   --rs-sidenav-default-hover-bg: var(--rs-gray-200);
-  --rs-sidenav-default-hover-text: var(--rs-gray-800);
+  --rs-sidenav-default-hover-text: var(--rs-gray-900);
   --rs-sidenav-default-footer-border: var(--rs-gray-200);
+  --rs-sidenav-default-subnav-border-color: var(--rs-gray-200);
   --rs-sidenav-inverse-bg: var(--rs-primary-500);
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: var(--rs-primary-700);
   --rs-sidenav-inverse-hover-bg: var(--rs-primary-600);
   --rs-sidenav-inverse-footer-border: var(--rs-primary-600);
+  --rs-sidenav-inverse-subnav-border-color: var(--rs-primary-600);
   --rs-sidenav-subtle-bg: #fff;
   --rs-sidenav-subtle-text: var(--rs-gray-800);
   --rs-sidenav-subtle-selected-text: var(--rs-primary-700);
+  --rs-sidenav-subtle-selected-bg: var(--rs-gray-50);
   --rs-sidenav-subtle-hover-bg: var(--rs-gray-50);
   --rs-sidenav-subtle-hover-text: var(--rs-gray-800);
   --rs-sidenav-subtle-footer-border: var(--rs-gray-200);
+  --rs-sidenav-subtle-subnav-border-color: var(--rs-gray-200);
 
   // Input
   --rs-input-bg: var(--rs-gray-0);
@@ -366,9 +366,6 @@
   --rs-carousel-indicator-hover: var(--rs-gray-0);
   --rs-carousel-indicator-active: var(--rs-primary-500);
 
-  // Panel
-  --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
   // List
   --rs-list-bg: var(--rs-gray-0);
   --rs-list-border: var(--rs-gray-200);
@@ -390,12 +387,6 @@
   --rs-table-scrollbar-thumb-active: var(--rs-gray-900);
   --rs-table-scrollbar-vertical-track: rgb(from var(--rs-gray-200) r g b / 40%);
 
-  // Drawer
-  --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
-  // Modal
-  --rs-modal-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
-
   // Form
   --rs-form-errormessage-text: var(--rs-color-red);
   --rs-form-errormessage-bg: #fff;
@@ -449,12 +440,6 @@
     --rs-message-warning-bg: fade(@yellow-100, 60%);
     --rs-message-error-bg: fade(@red-100, 60%);
 
-    // Dropdown
-    --rs-dropdown-item-bg-hover: fade(@H100, 50%);
-
-    // ARIA menu
-    --rs-menuitem-active-bg: fade(@H100, 50);
-
     // ARIA Listboxes
     --rs-listbox-option-hover-bg: fade(@H100, 50%);
 

package/styles/common.less

@@ -6,10 +6,8 @@
 //  Variables
 @import 'variables.less';
 
-// Color modes
-// FIXME color-modes should not be imported in common
-//       but otherwise it breaks tests
-@import 'color-modes.less';
-
 // Normalize
 @import 'normalize.less';
+
+// Root
+@import 'root.less';

package/styles/index.less

@@ -16,6 +16,7 @@
 @import '../Carousel/styles/index';
 @import '../Cascader/styles/index';
 @import '../CascadeTree/styles/index';
+@import '../Center/styles/index';
 @import '../Checkbox/styles/index';
 @import '../CheckboxGroup/styles/index';
 @import '../CheckPicker/styles/index';
@@ -35,8 +36,6 @@
 @import '../FormGroup/styles/index';
 @import '../FormErrorMessage/styles/index';
 @import '../Grid/styles/index';
-@import '../Row/styles/index';
-@import '../Col/styles/index';
 @import '../Header/styles/index';
 @import '../FormHelpText/styles/index';
 @import '../IconButton/styles/index';
@@ -46,8 +45,10 @@
 @import '../InputNumber/styles/index';
 @import '../InputPicker/styles/index';
 @import '../InlineEdit/styles/index';
+@import '../Kbd/styles/index';
 @import '../List/styles/index';
 @import '../Loader/styles/index';
+@import '../Menu/styles/index';
 @import '../Message/styles/index';
 @import '../Modal/styles/index';
 @import '../MultiCascadeTree/styles/index';
@@ -96,3 +97,4 @@
 @import '../internals/CloseButton/styles/index';
 @import '../internals/Picker/styles/index';
 @import '../internals/SearchBox/styles/index';
+@import '../internals/Box/styles/index';