rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025011413",
+  "version": "6.0.0-canary-20250315",
   "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';

package/styles/mixins/combobox.less

@@ -1,10 +1,6 @@
-.combobox-indicator-icon(@right:@padding-x) {
-  display: flex;
+.combobox-indicator-icon() {
+  display: inline-flex;
   align-items: center;
-  margin-left: 2px;
-  position: absolute;
-  top: @padding-y;
-  right: @right;
   height: @line-height-computed;
-  font-size: 12px;
+  font-size: var(--rs-font-size-sm);
 }

package/styles/mixins/listbox.less

@@ -26,7 +26,8 @@
 }
 
 .listbox-option() {
-  display: block;
+  display: flex;
+  justify-content: space-between;
   padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
   clear: both;
   font-weight: normal;

package/styles/mixins/utilities.less

@@ -102,13 +102,11 @@
 }
 
 .padding-vertical(@padding-vertical) {
-  padding-top: @padding-vertical;
-  padding-bottom: @padding-vertical;
+  padding-block: @padding-vertical;
 }
 
-.padding-horizontal(@padding-vertical) {
-  padding-left: @padding-vertical;
-  padding-right: @padding-vertical;
+.padding-horizontal(@padding-horizontal) {
+  padding-inline: @padding-horizontal;
 }
 
 .icon-bolder(@width:2px) {
@@ -127,7 +125,6 @@
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
   outline: 3px solid var(--rs-color-focus-ring);
-  // box-shadow: var(--rs-state-focus-shadow);
 
   .high-contrast-mode({
     outline-offset: 2px;

package/styles/normalize.less

@@ -124,7 +124,7 @@
 
   // Remove border radius in Chrome 62+
   button {
-    border-radius: 0;
+     border-radius: var(--rs-radius-none);
   }
 
   // Address inconsistent `text-transform` inheritance for `button` and `select`.

package/styles/root.less

@@ -0,0 +1,77 @@
+:root {
+
+  // Font family
+  --rs-font-family-base: @font-family-base;
+  --rs-font-family-monospace: @font-family-monospace;
+
+  // Font size
+  --rs-font-size-2xs: 0.625rem; // 10px
+  --rs-font-size-xs: 0.75rem;   // 12px
+  --rs-font-size-sm: 0.875rem;  // 14px
+  --rs-font-size-md: 1rem;      // 16px
+  --rs-font-size-lg: 1.125rem;  // 18px
+  --rs-font-size-xl: 1.25rem;   // 20px
+  --rs-font-size-2xl: 1.5rem;   // 24px
+  --rs-font-size-3xl: 1.875rem; // 30px
+  --rs-font-size-4xl: 2.25rem;  // 36px
+  --rs-font-size-5xl: 3rem;     // 48px
+  --rs-font-size-6xl: 3.75rem;  // 60px
+
+  // Line height
+  --rs-text-line-height-xs: calc(1 / 0.75);
+  --rs-text-line-height-sm: calc(1.25 / 0.875);
+  --rs-text-line-height-md: calc(1.5 / 1);
+  --rs-text-line-height-lg: calc(1.75 / 1.125);
+  --rs-text-line-height-xl: calc(1.75 / 1.25);
+  --rs-text-line-height-2xl: calc(2 / 1.5);
+  --rs-text-line-height-3xl: calc(2.25 / 1.875);
+  --rs-text-line-height-4xl: calc(2.5 / 2.25);
+  --rs-text-line-height-5xl: 1;
+  --rs-text-line-height-6xl: 1;
+
+  // Spacing
+  --rs-spacing: 0.25rem;    // 4px
+
+  // Scale
+  --rs-scale: 1;
+
+  // Radius
+  --rs-radius-none: 0;
+  --rs-radius-xs: 0.125rem; // 2px
+  --rs-radius-sm: 0.25rem;  // 4px
+  --rs-radius-md: 0.375rem; // 6px
+  --rs-radius-lg: 0.5rem;   // 8px
+  --rs-radius-xl: 0.75rem;  // 12px
+  --rs-radius-2xl: 1rem;    // 16px
+  --rs-radius-3xl: 1.5rem;  // 24px
+  --rs-radius-4xl: 2rem;    // 32px
+  --rs-radius-full: calc(infinity * 1px);
+
+  // Shadows
+  --rs-shadow-none: 0 0 #0000;
+  --rs-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --rs-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 10%);
+  --rs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px 0 rgb(0 0 0 / 10%);
+  --rs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px 0 rgb(0 0 0 / 10%);
+  --rs-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px 0 rgb(0 0 0 / 10%);
+  --rs-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+
+}
+
+// Themes
+:root,
+.rs-theme-light {
+  @import 'color-modes/light';
+}
+
+& when (@enable-dark-mode = true) {
+  .rs-theme-dark {
+    @import 'color-modes/dark';
+  }
+}
+
+& when (@enable-high-contrast = true) {
+  .rs-theme-high-contrast {
+    @import 'color-modes/high-contrast';
+  }
+}

package/styles/scaffolding.less

@@ -7,11 +7,13 @@
 // Body reset
 html {
   -webkit-tap-highlight-color: transparent;
+  font-size: 16px;
+
 }
 
 body {
-  font-family: @font-family-base;
-  font-size: @font-size-base;
+  font-family: var(--rs-font-family-base);
+  font-size: var(--rs-font-size-sm);
   line-height: @line-height-base;
   color: var(--rs-text-primary);
   background-color: var(--rs-body);
@@ -44,7 +46,7 @@ hr {
   margin-top: @line-height-computed;
   margin-bottom: @line-height-computed;
   border: 0;
-  border-top: 1px solid @divider-border-color;
+  border-top: 1px solid var(--rs-divider-border);
 }
 
 [role='button'] {

package/styles/typography.less

@@ -13,40 +13,40 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: @headings-font-family;
-  font-weight: @headings-font-weight;
-  color: @headings-color;
+  font-family: var(--rs-heading-font-family);
+  font-weight: var(--rs-heading-font-weight);
+  color: var(--rs-heading-color);
   margin: 0;
 }
 
 h1 {
-  font-size: @font-size-h1;
-  line-height: @line-height-h1;
+  font-size: var(--rs-heading-h1-font-size);
+  line-height: var(--rs-heading-h1-line-height);
 }
 
 h2 {
-  font-size: @font-size-h2;
-  line-height: @line-height-h2;
+  font-size: var(--rs-heading-h2-font-size);
+  line-height: var(--rs-heading-h2-line-height);
 }
 
 h3 {
-  font-size: @font-size-h3;
-  line-height: @line-height-h3;
+  font-size: var(--rs-heading-h3-font-size);
+  line-height: var(--rs-heading-h3-line-height);
 }
 
 h4 {
-  font-size: @font-size-h4;
-  line-height: @line-height-h4;
+  font-size: var(--rs-heading-h4-font-size);
+  line-height: var(--rs-heading-h4-line-height);
 }
 
 h5 {
-  font-size: @font-size-h5;
-  line-height: @line-height-h5;
+  font-size: var(--rs-heading-h5-font-size);
+  line-height: var(--rs-heading-h5-line-height);
 }
 
 h6 {
-  font-size: @font-size-h6;
-  line-height: @line-height-h6;
+  font-size: var(--rs-heading-h6-font-size);
+  line-height: var(--rs-heading-h6-line-height);
 }
 
 // Body text
@@ -117,7 +117,7 @@ dt {
 }
 
 dd {
-  margin-left: 0; // Undo browser default
+  margin-inline-start: 0; // Undo browser default
   margin-bottom: (@line-height-computed / 2);
 }