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

package/styles/variables.less

@@ -8,111 +8,108 @@
 
 // Controls
 
-// Polyfill for IE 11
-@enable-ie-polyfill:    true;
-
 // CSS Resets
-@enable-css-reset:      true;
+@enable-css-reset: true;
 
 // Global button ripple switch
-@enable-ripple-effect:  true;
+@enable-ripple-effect: true;
 
 // Whether include styles for dark mode
-@enable-dark-mode:      true;
+@enable-dark-mode: true;
 
 // Whether include styles for high-contrast mode
-@enable-high-contrast:  true;
+@enable-high-contrast: true;
 
 // Media queries breakpoints
 // Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
 // Small screen / phone
 // @screen-sm
-@screen-sm:      576px;
+@screen-sm: 576px;
 
 // Medium screen / desktop
 // @screen-md
-@screen-md:      768px;
+@screen-md: 768px;
 
 // Large screen / wide desktop
 // @screen-lg
-@screen-lg:      992px;
+@screen-lg: 992px;
 
 // Extra large devices / extra wide desktop
 // @screen-xl
-@screen-xl:      1200px;
+@screen-xl: 1200px;
 
 // Extra extra large devices / ultra wide desktop
 // @screen-xxl
-@screen-xxl:     1400px;
+@screen-xxl: 1400px;
 
 
 // Grid system
 // Define your custom responsive grid.
 
 // Number of columns in the grid.
-@grid-columns:        24;
+@grid-columns: 24;
 // Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:   10px;
+@grid-gutter-width: 12px;
 
 // Container sizes
 // Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / phone / tablet
-@container-phone:                      (540px + @grid-gutter-width);
-@container-sm:                         @container-phone;
+@container-phone: (540px + @grid-gutter-width);
+@container-sm: @container-phone;
 
 // Medium screen / desktop
-@container-desktop:                    (720px + @grid-gutter-width);
-@container-md:                         @container-desktop;
+@container-desktop: (720px + @grid-gutter-width);
+@container-md: @container-desktop;
 
 // Large screen / wide desktop
-@container-large-desktop:              (960px + @grid-gutter-width);
-@container-lg:                         @container-large-desktop;
+@container-large-desktop: (960px + @grid-gutter-width);
+@container-lg: @container-large-desktop;
 
 // Extra large devices / ultra wide desktop
-@container-extra-large-desktop:        (1140px + @grid-gutter-width);
-@container-xl:                         @container-large-desktop;
+@container-extra-large-desktop: (1140px + @grid-gutter-width);
+@container-xl: @container-large-desktop;
 
 // Extra large devices / ultra wide desktop
-@container-extra-extra-large-desktop:  (1320px + @grid-gutter-width);
-@container-xxl:                        @container-large-desktop;
+@container-extra-extra-large-desktop: (1320px + @grid-gutter-width);
+@container-xxl: @container-large-desktop;
 
 // Color system
 
 // Primary palette
-@primary-color:   #3498ff;
+@primary-color: #3498ff;
 
 // Secondary palette
-@red:             #f44336;
-@orange:          #fa8900;
-@yellow:          #ffb300;
-@green:           #4caf50;
-@cyan:            #00bcd4;
-@blue:            #2196f3;
-@violet:          #673ab7;
+@red: #f44336;
+@orange: #fa8900;
+@yellow: #ffb300;
+@green: #4caf50;
+@cyan: #00bcd4;
+@blue: #2196f3;
+@violet: #673ab7;
 
 // Dark mode
-@primary-color-dark:  #34c3ff;
+@primary-color-dark: #34c3ff;
 
-@red-dark:            #f04f43;
-@orange-dark:         #ff9800;
-@yellow-dark:         #ffc757;
-@green-dark:          #58b15b;
-@cyan-dark:           #00bcd4;
-@blue-dark:           #1499ef;
-@violet-dark:         #673ab7;
+@red-dark: #f04f43;
+@orange-dark: #ff9800;
+@yellow-dark: #ffc757;
+@green-dark: #58b15b;
+@cyan-dark: #00bcd4;
+@blue-dark: #1499ef;
+@violet-dark: #673ab7;
 
 // High-contrast mode
 @primary-color-high-contrast: #ffff00;
 
-@red-high-contrast:           #bd1732;
-@orange-high-contrast:        @orange-dark;
-@yellow-high-contrast:        #ffc757;
-@green-high-contrast:         #0d822c;
-@cyan-high-contrast:          @cyan-dark;
-@blue-high-contrast:          #1499ef;
-@violet-high-contrast:        @violet-dark;
+@red-high-contrast: #bd1732;
+@orange-high-contrast: @orange-dark;
+@yellow-high-contrast: #ffc757;
+@green-high-contrast: #0d822c;
+@cyan-high-contrast: @cyan-dark;
+@blue-high-contrast: #1499ef;
+@violet-high-contrast: @violet-dark;
 
 // List for looping
 @spectrum: red, orange, yellow, green, cyan, blue, violet;
@@ -120,68 +117,50 @@
 // Typography
 // Font, line-height, and color for body text, headings, and more.
 
-@font-family-base:      -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+@font-family-base: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
+@font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
 @font-size-extra-large: 18px;
-@font-size-large:       16px;
-@font-size-base:        14px;
-@font-size-small:       12px;
+@font-size-large: 16px;
+@font-size-base: 14px;
+@font-size-small: 12px;
 @font-size-extra-small: 12px;
 
-@font-size-h1: 46px;
-@font-size-h2: 36px;
-@font-size-h3: 28px;
-@font-size-h4: 22px;
-@font-size-h5: 18px;
-@font-size-h6: 16px;
-
-@line-height-h1: 62px;
-@line-height-h2: 50px;
-@line-height-h3: 42px;
-@line-height-h4: 34px;
-@line-height-h5: 24px;
-@line-height-h6: 22px;
 
 // Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:        20px;
-@line-height-large-computed:  22px;
+@line-height-computed: 20px;
+@line-height-large-computed: 22px;
 
 // Unit-less `line-height` for use in components like buttons.
-@line-height-extra-large:     unit((@line-height-large-computed / @font-size-extra-large)); // ~1.222
-@line-height-large:           unit((@line-height-large-computed / @font-size-large)); // ~1.375
-@line-height-base:            unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
-@line-height-small:           unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
-@line-height-extra-small:     unit((@line-height-computed / @font-size-extra-small)); // ~1.6666666666666667
+@line-height-extra-large: unit((@line-height-large-computed / @font-size-extra-large)); // ~1.222
+@line-height-large: unit((@line-height-large-computed / @font-size-large)); // ~1.375
+@line-height-base: unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
+@line-height-small: unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
+@line-height-extra-small: unit((@line-height-computed / @font-size-extra-small)); // ~1.6666666666666667
 
 // By default, this inherits from the `<body>`.
-@headings-font-family:    inherit;
-@headings-font-weight:    bolder;
-@headings-color:          inherit;
-
-
-// Box shadows
-@box-shadow:          0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
+@headings-font-family: inherit;
+@headings-font-weight: bolder;
+@headings-color: inherit;
 
 
 // Spacing
 // Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-@padding-y:         8px;
-@padding-x:         12px;
-@padding-y-lg:      10px;
-@padding-x-lg:      16px;
-@padding-y-sm:      5px;
-@padding-x-sm:      10px;
-@padding-y-xs:      2px;
-@padding-x-xs:      8px;
+@padding-y: 8px;
+@padding-x: 12px;
+@padding-y-lg: 10px;
+@padding-x-lg: 16px;
+@padding-y-sm: 5px;
+@padding-x-sm: 10px;
+@padding-y-xs: 2px;
+@padding-x-xs: 8px;
 
-// Border radius
-@border-radius:       6px;
 
 // Scaffolding
 // Settings for some of the most global styles.
 
-@link-hover-decoration:  underline;
+@link-hover-decoration: underline;
 @link-active-decoration: underline;
 
 // Disabled cursor for form controls and buttons.
@@ -191,133 +170,102 @@
 
 // Table
 
-@table-header-padding-y:                10px;
-@table-header-padding-x:                10px;
-@table-header-font-size:                @font-size-small;
-@table-header-line-height:              @line-height-small;
+@table-header-padding-y: 10px;
+@table-header-padding-x: 10px;
+@table-header-font-size: @font-size-small;
+@table-header-line-height: @line-height-small;
 @table-header-sort-wrapper-margin-left: 5px;
 
-@table-column-resize-spanner-width:                 3px;
-@table-column-resize-spanner-triangle-side-length:  3px;
+@table-column-resize-spanner-width: 3px;
+@table-column-resize-spanner-triangle-side-length: 3px;
 
-@table-cell-padding-y:                  13px;
-@table-cell-padding-x:                  10px;
-@table-cell-hover-color:                var(--rs-primary-500);
+@table-cell-padding-y: 13px;
+@table-cell-padding-x: 10px;
+@table-cell-hover-color: var(--rs-primary-500);
 
-@table-scrollbar-timing-duration:       0.1s;
-@table-scrollbar-width:                 10px;
-@table-scrollbar-handle-width:          8px;
-@table-scrollbar-handle-gap:            (@table-scrollbar-width - @table-scrollbar-handle-width)/2;
+@table-scrollbar-timing-duration: 0.1s;
+@table-scrollbar-width: 10px;
+@table-scrollbar-handle-width: 8px;
+@table-scrollbar-handle-gap: (@table-scrollbar-width - @table-scrollbar-handle-width)/2;
 
-@table-loader-backdrop-color:           var(--rs-loader-backdrop);
-@table-loader-transition:               0.2s ease-in;
+@table-loader-backdrop-color: var(--rs-loader-backdrop);
+@table-loader-transition: 0.2s ease-in;
 
 // Buttons
 
-@btn-font-weight:           normal;
-@btn-border-radius:         @border-radius;
-
-@btn-transition:            color 0.15s ease-out, background-color 0.15s ease-out;
-@btn-disabled-opacity:      0.3;
+@btn-font-weight: normal;
+@btn-transition: color 0.15s ease-out, background-color 0.15s ease-out;
+@btn-disabled-opacity: 0.3;
 
 
 // Ghost Button
-@btn-ghost-border-width:    1px;
+@btn-ghost-border-width: 1px;
 
 // Button with icons (not IconButton)
-@btn-icon-gap:              5px;
+@btn-icon-gap: 5px;
 
 // Button Loading
 @btn-loading-spin-default-diameter: 18px;
-@btn-loading-spin-xs-diameter:      16px;
-@btn-loading-spin-ring-wide:        3px;
+@btn-loading-spin-xs-diameter: 16px;
+@btn-loading-spin-ring-wide: 3px;
 
 // Ripple
 
 @ripple-bg: rgba(0, 0, 0, 0.2);
 
-// Badge
-
-@badge-dot-size:        10px;
-
-// Avatar
-@avatar-size-xxl:         120px;
-@avatar-font-size-xxl:    48px;
-@avatar-size-xl:          90px;
-@avatar-font-size-xl:     36px;
-@avatar-size-lg:          60px;
-@avatar-font-size-lg:     26px;
-@avatar-size:             40px;
-@avatar-font-size:        18px;
-@avatar-size-sm:          30px;
-@avatar-font-size-sm:     14px;
-@avatar-size-xs:          20px;
-@avatar-font-size-xs:     12px;
 
 // Forms
 
 // Form Layout
-@form-group-margin-bottom:            24px;
-@form-control-width:                  300px;
-@form-control-label-width:            170px;
-@form-control-label-margin-right:     12px;
-@form-control-label-margin-bottom:    4px;
-@form-help-text-inline-gap:           10px;
+@form-group-margin-bottom: 24px;
+@form-control-width: 300px;
+@form-control-label-width: 170px;
+@form-control-label-margin-right: 12px;
+@form-control-label-margin-bottom: 4px;
+@form-help-text-inline-gap: 10px;
 
 // Error Message
-@form-error-message-padding-vertical:     4px;
-@form-error-message-padding-horizontal:   8px;
-@form-error-message-height:               (@form-error-message-padding-vertical*2 + @line-height-computed);
-@form-error-message-font-size:            @font-size-small;
-@form-error-message-triangle-width:       6px;
-@form-error-message-triangle-gap:         10px;
-@form-error-message-triangle-vertical:    4px;
-@form-error-message-translate-distance:   2px;
+@form-err-msg-padding-vertical: 4px;
+@form-err-msg-padding-horizontal: 8px;
+@form-err-msg-height: (@form-err-msg-padding-vertical*2 + @line-height-computed);
+@form-err-msg-font-size: @font-size-small;
+@form-err-msg-triangle-width: 6px;
+@form-err-msg-triangle-gap: 10px;
+@form-err-msg-triangle-vertical: 4px;
+@form-err-msg-translate-distance: 2px;
 
 
 // Input
 
-@input-padding-y:               @padding-y;
-@input-padding-x:               @padding-x;
-@input-border-width:            1px;
-@input-transition:              border-color ease-in-out 0.15s;
-
-// This has no effect on `<select>`s  in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius:       @border-radius;
+@input-padding-y: @padding-y;
+@input-padding-x: @padding-x;
+@input-border-width: 1px;
+@input-transition: border-color ease-in-out 0.15s;
 
-@input-height-base:         (@line-height-computed + (@padding-y * 2));
-@input-height-large:        (@line-height-large-computed + (@padding-y-lg * 2));
-@input-height-small:        (@line-height-computed + (@padding-y-sm * 2));
-@input-height-extra-small:  (@line-height-computed + (@padding-y-xs * 2));
-
-
-// Number input
-@number-input-touchspin-font-size: 12px;
+@input-height-base: (@line-height-computed + (@padding-y * 2));
+@input-height-large: (@line-height-large-computed + (@padding-y-lg * 2));
+@input-height-small: (@line-height-computed + (@padding-y-sm * 2));
+@input-height-extra-small: (@line-height-computed + (@padding-y-xs * 2));
 
 // Dropdowns
 // Dropdown menu container and contents.
 
-@dropdown-caret-width:        10px;
-@dropdown-caret-padding:      10px;
+@dropdown-caret-width: 10px;
+@dropdown-caret-padding: 10px;
 
 // Divider color for between dropdown items.
-@dropdown-divider-bg:         @divider-border-color;
-@dropdown-shadow:             0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
-
-@dropdown-menu-radius:        @border-radius;
-@dropdown-menu-padding-y:     @dropdown-menu-radius;
-
+@dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
 
-@dropdown-item-padding-y:     8px;
-@dropdown-item-padding-x:     12px;
+@dropdown-item-padding-y: 8px;
+@dropdown-item-padding-x: 12px;
 
 // Dropdown item content submenu icon
-@dropdown-item-submenu-icon-angle-spacing:              10px;
-@dropdown-item-submenu-icon-angle-width:                5px;
-@dropdown-item-content-submenu-icon-angle-line-height:  @line-height-base;
-@dropdown-item-content-submenu-icon-angle-size:         @font-size-base;
-@dropdown-toggle-padding-right:                         (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
-@dropdown-caret-icon-padding-horizontal:                9px;
+@dropdown-item-submenu-icon-angle-spacing: 10px;
+@dropdown-item-submenu-icon-angle-width: 5px;
+@dropdown-item-content-submenu-icon-angle-line-height: @line-height-base;
+@dropdown-item-content-submenu-icon-angle-size: @font-size-base;
+@dropdown-toggle-padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
+@dropdown-caret-icon-padding-horizontal: 9px;
 
 // DropDownMenu offset value
 @dropdown-max-height: 280px;
@@ -328,163 +276,113 @@
 // Toggle
 
 @toggle-active-scale: 1.2;
-@toggle-transition:   0.15s ease-out;
-
-@toggle-md-height:                      24px;
-@toggle-md-handle-gap:                  3px;
-@toggle-md-min-width:                   44px;
-@toggle-md-inner-font-size:             @font-size-small;
-@toggle-md-handle-diameter:             (@toggle-md-height - @toggle-md-handle-gap*2);
-@toggle-md-inner-line-height-computed:  @toggle-md-height;
-@toggle-md-inner-line-height:           unit((@toggle-md-inner-line-height-computed / @toggle-md-inner-font-size));
-@toggle-md-inner-margin:                @padding-y;
-
-@toggle-sm-height:                      14px;
-@toggle-sm-min-width:                   26px;
-@toggle-sm-handle-gap:                  2px;
-@toggle-sm-inner-margin:                6px;
-@toggle-sm-inner-font-size:             (@font-size-small - 2);
-
-@toggle-lg-height:                      30px;
-@toggle-lg-min-width:                   55px;
-@toggle-lg-handle-gap:                  4px;
-@toggle-lg-inner-margin:                @padding-x-sm;
-@toggle-lg-inner-font-size:             @font-size-base;
+@toggle-transition: 0.15s ease-out;
+
+@toggle-md-height: 24px;
+@toggle-md-handle-gap: 3px;
+@toggle-md-min-width: 44px;
+@toggle-md-handle-diameter: (@toggle-md-height - @toggle-md-handle-gap*2);
+@toggle-md-inner-margin: @padding-y;
+
+@toggle-sm-height: 14px;
+@toggle-sm-min-width: 26px;
+@toggle-sm-handle-gap: 2px;
+@toggle-sm-inner-margin: 6px;
+
+@toggle-lg-height: 30px;
+@toggle-lg-min-width: 55px;
+@toggle-lg-handle-gap: 4px;
+@toggle-lg-inner-margin: @padding-x-sm;
 
 // Navs
 
-@nav-item-transition:             color 0.15s ease-out, background-color 0.15s ease-out;
+@nav-item-transition: color 0.15s ease-out, background-color 0.15s ease-out;
 
 // Tab
-@nav-tab-bar-width:               1px;
+@nav-tab-bar-width: 1px;
 
 // Subtle
-@nav-subtle-bar-width:            2px;
-
-// Divider
-@nav-divider-margin-vertical:     6px;
+@nav-subtle-bar-width: 2px;
 
 // Navbar
-@navbar-item-padding-y:           8px;
-@navbar-item-padding-x:           12px;
+@navbar-item-padding-y: 8px;
+@navbar-item-padding-x: 12px;
 
 // Sidenav
 
-@sidenav-item-caret-size:               16px;
-@sidenav-padding-vertical:              15px;
-@sidenav-children-padding-vertical:     11px;
-@sidenav-padding-horizontal:            20px;
-@sidenav-collapse-in-width:             100%;
-@sidenav-default-width:                 56px;
-@sidenav-compact-width:                 @sidenav-default-width; // TODO Replace sidenav-default-width
-@sidenav-item-height:                   (@sidenav-padding-vertical * 2 + @line-height-computed);
-@sidenav-menu-max-height:               (@sidenav-item-height * 40);
-@sidenav-menu-animation-time:           1.5s;
-@sidenav-footer-height:                 @sidenav-item-height; // Footer is same height as a sidenav item
-@sidenav-level1-item-font-size:         @font-size-large;
-@sidenav-level1-item-line-height:       unit((@line-height-computed / @font-size-large));
-@sidenav-icon-spacing:                  20px;
-@sidenav-icon-width:                    @sidenav-level1-item-font-size;
-@sidenav-dropdown-toggle-caret-width:   20px;
-@sidenav-collapse-transition-config:     0.15s ease-in;
-
-@sidenav-level-retract:                 9px;
-@sidenav-level2-retract:                (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
-@sidenav-level3-retract:                (@sidenav-level2-retract + @sidenav-level-retract); //60 px
-@sidenav-level4-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 2);
-@sidenav-level5-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 3);
-@sidenav-level6-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 4);
+@sidenav-item-caret-size: 14px;
+@sidenav-padding-vertical: 8px;
+@sidenav-padding-horizontal: 8px;
+@sidenav-collapse-in-width: 100%;
+@sidenav-default-width: 52px;
+@sidenav-item-height: (@sidenav-padding-vertical * 2 + @line-height-computed);
+@sidenav-menu-max-height: (@sidenav-item-height * 40);
+@sidenav-menu-animation-time: 1.5s;
+@sidenav-footer-height: @sidenav-item-height; // Footer is same height as a sidenav item
+@sidenav-level1-item-font-size: @font-size-base;
+@sidenav-icon-width: @sidenav-level1-item-font-size;
+@sidenav-dropdown-toggle-caret-width: 20px;
+@sidenav-collapse-transition-config: 0.15s ease-in;
+
+@sidenav-level-retract: 9px;
+@sidenav-level2-retract: (@sidenav-padding-horizontal + @sidenav-icon-width);
 
 // Steps
 
-@steps-icon-diameter:                   30px;
-@steps-icon-size-default-font-size:     12px;
-@steps-icon-spacing:                    10px;
-@steps-item-spacing:                    10px;
+@steps-icon-diameter: 30px;
+@steps-icon-spacing: 10px;
 
 // This space place the steps-icon
-@steps-icon-space-width:                (@steps-icon-diameter + @steps-icon-spacing);
-@steps-icon-size:                       @font-size-large;
-@steps-icon-line-height:                unit(((@steps-icon-diameter - 2px) / @font-size-large));
-@steps-title-font-size:                 @font-size-large;
-@steps-title-line-height:               unit((@steps-icon-diameter / @font-size-large));
-@steps-description-margin-top:          12px;
+@steps-icon-line-height: unit(((@steps-icon-diameter - 2px) / @font-size-large));
+@steps-title-line-height: unit((@steps-icon-diameter / @font-size-large));
 
 // Small
-@small-steps-icon-diameter:             24px;
-@small-steps-icon-space-width:          (@small-steps-icon-diameter + @steps-icon-spacing);
-@small-steps-icon-line-height:          unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
-@small-steps-title-line-height:         unit((@small-steps-icon-diameter / @font-size-base));
-@small-steps-icon-size:                 @font-size-base;
-@small-steps-description-font-size:     @font-size-small;
-@small-steps-description-line-height:   @line-height-small;
-@small-steps-description-margin-top:    12px;
+@small-steps-icon-diameter: 24px;
+@small-steps-icon-line-height: unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
+@small-steps-title-line-height: unit((@small-steps-icon-diameter / @font-size-base));
+@small-steps-description-line-height: @line-height-small;
 
 // Checkbox
-
-@checkbox-width-height:           16px;
-@checkbox-sense-width:            10px;
-@checkbox-border-radius:          3px;
-@checkbox-bg:                     transparent;
+@checkbox-width-height: 16px;
+@checkbox-sense-width: 10px;
+@checkbox-bg: transparent;
 
 // Radio
 
-@radio-width-height:              16px;
-@radio-inner-width-height:        6px;
-@radio-sense-width:               10px;
-@radio-border-radius:             50%;
-@radio-bg:                        transparent;
-@radio-label-padding-horizontal:  10px;
+@radio-width-height: 16px;
+@radio-inner-width-height: 6px;
+@radio-sense-width: 10px;
+@radio-bg: transparent;
+@radio-label-padding-horizontal: 10px;
 
 // Tooltips
 
-@tooltip-max-width:             250px;
-@tooltip-opacity:               1;
-@tooltip-border-radius:         4px;
-@tooltip-arrow-width:           6px;
-@tooltip-translate-distance:    2px;
+@tooltip-max-width: 250px;
+@tooltip-opacity: 1;
+@tooltip-arrow-width: 6px;
+@tooltip-translate-distance: 2px;
 
 // Distance between Arrow and frame.
-@tooltip-arrow-gap-lg:          10px;
-@tooltip-arrow-gap-sm:          4px;
+@tooltip-arrow-gap-lg: 10px;
+@tooltip-arrow-gap-sm: 4px;
 
 
 // Popovers
 
-@popover-max-width:           250px;
-@popover-border-radius:       4px;
-@popover-translate-distance:  2px;
-
-@popover-arrow-width:         6px;
-@popover-arrow-outer-width:   @popover-arrow-width;
+@popover-translate-distance: 2px;
+@popover-arrow-width: 6px;
+@popover-arrow-outer-width: @popover-arrow-width;
 // Distance between Arrow and frame.
-@popover-arrow-gap:           4px;
+@popover-arrow-gap: 4px;
 
 // Modals
 
-// Padding applied to the modal content
-@modal-content-padding:         20px;
-// Margin of modal header and body
-@modal-body-margin:             20px;
-@modal-border-radius:           @border-radius;
-
-@modal-title-font-size:         @font-size-extra-large;
-@modal-title-color:             var(--rs-text-primary);
-@modal-title-line-height:       @line-height-extra-large;
-
-@modal-close-btn-size:          @font-size-small;
-@modal-close-btn-line-height:   @line-height-small;
-@modal-close-btn-color:         var(--rs-text-secondary);
-@modal-close-btn-hover-color:   var(--rs-text-primary);
-
 // Modal sizes
 @modal-lg: 968px;
 @modal-md: 800px;
 @modal-sm: 600px;
 @modal-xs: 400px;
 
-@modal-full-size-margin: 60px;
-
 // Drawer
 
 // Padding applied to the drawer content
@@ -493,9 +391,9 @@
 // Margin of modal header and body
 @drawer-body-margin: 30px;
 
-@drawer-close-btn-size:         @font-size-small;
-@drawer-close-btn-line-height:  @line-height-small;
-@drawer-close-btn-color:        var(--rs-text-primary);
+@drawer-close-btn-size: @font-size-small;
+@drawer-close-btn-line-height: @line-height-small;
+@drawer-close-btn-color: var(--rs-text-primary);
 
 // Drawer sizes
 @drawer-horizontal-lg: @modal-lg;
@@ -514,276 +412,206 @@
 // Message
 // Define alert colors, border radius, and padding.
 
-@message-padding:             20px;
-@message-border-radius:       @border-radius;
-
-@message-title-size:          @font-size-base;
-@message-link-font-weight:    bold;
+@message-padding: 20px;
+@message-title-size: @font-size-base;
+@message-link-font-weight: bold;
 
-@message-icon-size:           16px;
-@message-icon-large-size:     24px;
-@message-icon-margin-right:   10px;
+@message-icon-size: 16px;
+@message-icon-large-size: 24px;
+@message-icon-margin-right: 10px;
 
-@message-close-btn-size:      12px;
-@message-close-btn-padding:   8px 8px 0;
+@message-close-btn-size: 12px;
+@message-close-btn-padding: 8px 8px 0;
 
 // toaster
 
-@toast-ns:          ~'rs-toast';
-@toast-box-shadow:  @box-shadow;
-@toast-spacing:     24px;
+@toast-ns: ~'rs-toast';
+@toast-spacing: 24px;
 
 // Notification
 
-@notify-padding:                20px;
-@notify-border-radius:          @border-radius;
-@notify-box-shadow:             @box-shadow;
-@notify-max-width:              400px;
-@notify-close-btn-font-size:    12px;
-@notify-close-btn-margin:       8px;
-@notify-title-font-size:        @font-size-large;
-@notify-title-icon-size:        24px;
-@notify-title-icon-margin:      10px;
-@notify-title-description-gap:  8px;
+@notify-close-btn-font-size: 12px;
+@notify-close-btn-margin: 8px;
+@notify-title-font-size: @font-size-large;
+@notify-title-icon-size: 24px;
+@notify-title-icon-margin: 10px;
+@notify-title-description-gap: 8px;
 
 // Loaders
 
-@loader-default-diameter:           @loader-sm-diameter;
-@loader-default-content-font-size:  @font-size-small;
+@loader-default-diameter: 1.125rem; // 18px
 
-@loader-lg-diameter:                64px;
-@loader-lg-content-font-size:       @font-size-large;
-
-@loader-md-diameter:                36px;
-@loader-md-content-font-size:       @font-size-base;
-
-@loader-sm-diameter:                18px;
-@loader-sm-content-font-size:       @font-size-base;
-
-@loader-xs-diameter:                16px;
-@loader-xs-content-font-size:       @font-size-small;
 
 // spinner
-@loader-spin-ring-width:            3px;
+@loader-spin-ring-width: 3px;
 
 // spin animation time
-@loader-duration-fast:              0.4s;
-@loader-duration-normal:            0.6s;
-@loader-duration-slow:              0.8s;
-@loader-duration-paused:          paused;
+@loader-duration-fast: 0.4s;
+@loader-duration-normal: 0.6s;
+@loader-duration-slow: 0.8s;
+@loader-duration-paused: paused;
 
 // spacing
-@loader-content-spin-spacing-horizontal:    12px;
-@loader-content-spin-spacing-vertical:      10px;
+@loader-content-spin-spacing-horizontal: 12px;
+@loader-content-spin-spacing-vertical: 10px;
 @loader-content-spin-spacing-horizontal-xs: 10px;
 
 // Progress
 
-@progress-line-padding-vertical:        8px;
-@progress-line-padding-horizontal:      12px;
-@progress-font-size:                    @font-size-large;
-@progress-bar-height:                   10px;
-@progress-element-gap:                  12px;
-@progress-bg-transition:                0.2s ease-in-out;
+@progress-line-padding-vertical: 8px;
+@progress-line-padding-horizontal: 12px;
+@progress-font-size: @font-size-large;
+@progress-bar-height: 10px;
+@progress-element-gap: 12px;
+@progress-bg-transition: 0.2s ease-in-out;
 
 // Uploader
 
-@uploader-file-list-margin-top:             10px;
-@uploader-file-item-icon-font-size:         22px;
-@uploader-file-item-icon-margin:            12px;
-@uploader-file-item-icon-margin-plus:       22px;
-@uploader-base-padding:                     8px;
-@uploader-picture-side-length:              66px;
-@uploader-picture-item-gap:                 10px;
-@uploader-picture-remove-button-radius:     24px;
+@uploader-file-list-margin-top: 10px;
+@uploader-base-padding: 8px;
+@uploader-picture-side-length: 66px;
+@uploader-picture-item-gap: 10px;
+@uploader-picture-remove-button-radius: 24px;
 @uploader-picture-text-preview-side-length: 50px;
 
 // Panel
 
-@panel-padding:                 20px;
-@panel-header-font-size:        16px;
-@panel-split-line-color:        @dropdown-divider-bg;
-@panel-accodion-transition:     0.15s linear;
-@panel-box-shadow:              @box-shadow;
+@panel-padding: 20px;
+@panel-header-font-size: 16px;
+@panel-accodion-transition: 0.15s linear;
 
 // Timeline
 
-@time-line-item-content-margin-left:      12px;
-@time-line-dot-side-length:               10px;
-@time-line-item-padding-left:             (@time-line-item-content-margin-left + @time-line-dot-side-length);
-@time-line-tail-width:                    2px;
-@time-line-item-content-padding-bottom:   18px;
-@time-line-dot-center-gap:                ((@line-height-computed - @time-line-dot-side-length) / 2);
-@time-line-content-side-offset:           (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
-@time-line-alternate-time-offset:         (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
-@time-line-tail-min-height:               (@line-height-computed + @time-line-item-content-padding-bottom); // 20 + 18 = 38
-
-// Tag
+@time-line-item-content-margin-left: 12px;
+@time-line-dot-side-length: 10px;
+@time-line-item-padding-left: (@time-line-item-content-margin-left + @time-line-dot-side-length);
+@time-line-tail-width: 2px;
+@time-line-item-content-padding-bottom: 18px;
+@time-line-dot-center-gap: ((@line-height-computed - @time-line-dot-side-length) / 2);
+@time-line-content-side-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
+@time-line-alternate-time-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
+@time-line-tail-min-height: (@line-height-computed + @time-line-item-content-padding-bottom); // 20 + 18 = 38
 
-@tag-gap: 10px;
 
 // List
 
 @list-border-width: 1px;
 
-// Divider
-
-@divider-horizontal-margin:           24px;
-@divider-with-text-horizontal-margin: 30px;
-@divider-text-space:                  12px;
-@divider-vertical-margin:             12px;
-@divider-border-color:                var(--rs-border-primary); // TODO: Deprecate, use --rs-divider-border
 
 // Pickers
 
 // prefixs
-@picker-prefix:                     ~'rs-picker';
-@select-picker-prefix:              ~'picker-select';
-@check-picker-prefix:               ~'picker-check';
-@calendar-picker-prefix:            ~'calendar';
-@cascader-picker-prefix:            ~'picker-cascader';
-@cascader-multi-picker-prefix:      ~'picker-multi-cascader';
-@tree-picker-prefix:                ~'tree';
-@check-tree-picker-prefix:          ~'check-tree';
-@date-range-picker-prefix:          ~'picker-daterange';
-@date-picker-prefix:                ~'picker-date';
-@input-picker-prefix:               ~'picker-input';
-@multi-input-picker-prefix:         ~'picker-tag';
+@picker-prefix: ~'rs-picker';
+@select-picker-prefix: ~'picker-select';
+@check-picker-prefix: ~'picker-check';
+@calendar-picker-prefix: ~'calendar';
+@cascader-picker-prefix: ~'picker-cascader';
+@cascader-multi-picker-prefix: ~'picker-multi-cascader';
+@tree-picker-prefix: ~'tree';
+@check-tree-picker-prefix: ~'check-tree';
+@input-picker-prefix: ~'picker-input';
+@multi-input-picker-prefix: ~'picker-tag';
 // Calendar Picker Name Space
-@clpns:                             ~'rs-@{calendar-picker-prefix}';
+@clpns: ~'rs-@{calendar-picker-prefix}';
 // Check picker name space
-@ckpns:                             ~'rs-@{check-picker-prefix}';
+@ckpns: ~'rs-@{check-picker-prefix}';
 
-@picker-none-padding:               6px 12px 12px;
-@picker-transition:                 @input-transition;
-@picker-shadow:                     var(--rs-dropdown-shadow);
-@picker-value-count-border-radius:  10px;
-@picker-value-count-padding:        8px;
-@picker-value-count-margin:         4px;
+@picker-none-padding: 6px 12px 12px;
+@picker-transition: @input-transition;
 
 // Picker content width
-@picker-content-min-width:            200px;
-@picker-default-toggle-border-width:  1px;
-@picker-toggle-clean-width:           12px;
-@picker-toggle-clean-right:           30px;
+@picker-content-min-width: 200px;
+@picker-default-toggle-border-width: 1px;
+@picker-toggle-clean-width: 12px;
 
-@picker-menu-padding:                     12px;
+@picker-menu-padding: 12px;
 
-@picker-item-content-padding-vertical:    8px;
-@picker-item-content-padding-horizontal:  @picker-menu-padding;
+@picker-item-content-padding-vertical: 8px;
+@picker-item-content-padding-horizontal: @picker-menu-padding;
 
 // group title
-@picker-group-children-padding-left:    26px;
-@picker-group-select-menu-gap:          6px;
-@picker-group-select-menu-lin-color:    @dropdown-divider-bg;
+@picker-group-children-padding-left: 26px;
+@picker-group-select-menu-gap: 6px;
 
 // Picker
 @picker-select-menu-item-selected-font-weight: bold;
 
 // Check Picker
 
-@picker-check-checkbox-gap:               10px;
+@picker-check-checkbox-gap: 10px;
 @picker-children-check-item-padding-left: 14px;
-@picker-check-item-content-padding-left:  @picker-item-content-padding-horizontal+@checkbox-width-height+ @picker-check-checkbox-gap;
-
-// Tree Picker
+@picker-check-item-content-padding-left: @picker-item-content-padding-horizontal+@checkbox-width-height+ @picker-check-checkbox-gap;
 
-@picker-tree-padding:                 12px;
-@picker-tree-node-padding-vertical:   @padding-y;
-@picker-tree-node-padding-horizontal: @padding-x;
-@picker-tree-node-font-size:          14px;
-@picker-tree-node-line-height:        22px;
-@picker-tree-node-height:             (@line-height-computed + @picker-tree-node-padding-vertical * 2);
-@picker-tree-arrow-down-width:        8px;
-@picker-tree-arrow-down-gap:          8px;
 
 // Calendar
 
-@calendar-header-width:                           280px;
-@calendar-picker-padding:                         10px;
-@calendar-picker-view-padding-top:                4px;
-@calendar-header-title-margin:                    4px;
-@calendar-meridiem-border-width:                  1px;
-@calendar-table-cell-padding:                     1px;
-@calendar-table-cell-content-font-size:           @font-size-base;
-@calendar-table-cell-content-line-height:         @line-height-base;
-@calendar-table-cell-content-padding:             5px;
-@calendar-table-cell-content-today-border-width:  1px;
-@calendar-month-dropdown-row-border-color:        @divider-border-color;
-@calendar-dropdown-top:                           44px; // @calendar-picker-padding + content-height + gap
-@calendar-month-dropdown-border:                  @divider-border-color;
-@calendar-in-menu-content-side-length:            30px;
-@calendar-panel-cell-height:                      100px;
-@calendar-panel-compact-cell-height:              38px;
-@calendar-panel-border-radius:                    6px;
-@calendar-panel-today-active-side-length:         @line-height-computed;
-@calendar-toolbar-border-color:                   @divider-border-color;
+@calendar-header-width: 280px;
+@calendar-picker-padding: 10px;
+@calendar-picker-view-padding-top: 4px;
+@calendar-header-title-margin: 4px;
+@calendar-meridiem-border-width: 1px;
+@calendar-table-cell-padding: 1px;
+@calendar-table-cell-content-font-size: @font-size-base;
+@calendar-table-cell-content-line-height: @line-height-base;
+@calendar-table-cell-content-padding: 5px;
+@calendar-table-cell-content-today-border-width: 1px;
+@calendar-dropdown-top: 44px; // @calendar-picker-padding + content-height + gap
+@calendar-in-menu-content-side-length: 30px;
+@calendar-panel-cell-height: 100px;
+@calendar-panel-compact-cell-height: 38px;
+@calendar-panel-today-active-side-length: @line-height-computed;
 
 // DatePicker
-@datepicker-calendar-padding-y:     12px;
-@datepicker-calendar-padding-x:     12px;
+@datepicker-calendar-padding-y: 12px;
+@datepicker-calendar-padding-x: 12px;
 
-@datepicker-calendar-cell-gap-y:    2px;
-@datepicker-calendar-cell-gap-x:    2px;
+@datepicker-calendar-cell-gap-y: 2px;
+@datepicker-calendar-cell-gap-x: 2px;
 
 // DateRange Picker
 
-@date-range-picker-header-padding-horizontal:     12px;
-@date-range-picker-header-padding-vertical:       8px;
-@date-range-picker-header-font-size:              @font-size-base;
-@date-range-picker-header-line-height:            @line-height-base;
+@date-range-picker-header-padding-horizontal: 12px;
+@date-range-picker-header-padding-vertical: 8px;
+@date-range-picker-header-line-height: @line-height-base;
 
 // Input Picker
 
-@input-picker-toggle-height:            (@line-height-computed + @padding-y * 2); // 20px + 8px*2 = 36px  the same with md button
-@input-picker-toggle-content-height:    (@input-picker-toggle-height - (@picker-default-toggle-border-width * 2));
+@input-picker-toggle-height: (@line-height-computed + @padding-y * 2); // 20px + 8px*2 = 36px  the same with md button
+@input-picker-toggle-content-height: (@input-picker-toggle-height - (@picker-default-toggle-border-width * 2));
 
-// TagPicker
-
-@tag-picker-toggle-content-height:          @input-height-extra-small;
-@tag-picker-content-padding-vertical-all:   (@input-picker-toggle-content-height - @tag-picker-toggle-content-height);
-@tag-picker-content-padding-vertical:       (@tag-picker-content-padding-vertical-all / 2); // (34 -24)/2
-@tag-picker-content-padding-horizontal:     6px;
 
 // Cascader
-@cascader-search-panel-max-height:          300px;
-@cascader-row-content-padding-horizontal:   @picker-item-content-padding-horizontal;
+@cascader-search-panel-max-height: 300px;
+@cascader-row-content-padding-horizontal: @picker-item-content-padding-horizontal;
 
 // Slider
 
-@slider-bar-side-length:              6px;
-@slider-handle-diameter:              12px;
-@slider-handle-border-width:          2px;
-@slider-handle-dragging-box-shadow:   none;
-@slider-calibration-diameter:         8px;
-@slider-calibration-border-width:     2px;
-@slider-mark-margin-top:              9px;
-@slider-handle-transition:            0.15s ease-in-out;
+@slider-bar-side-length: 6px;
+@slider-handle-diameter: 12px;
+@slider-handle-border-width: 2px;
+@slider-calibration-diameter: 8px;
+@slider-calibration-border-width: 2px;
+@slider-mark-margin-top: 9px;
+@slider-handle-transition: 0.15s ease-in-out;
 
 // Breadcrumbs
 
-@breadcrumb-font-size:        @font-size-small;
+@breadcrumb-font-size: @font-size-small;
 @breadcrumb-separator-margin: 4px;
 
 // Carousel
 
-@carousel-animation-duration:       0.3s;
-@carousel-toolbar-wrapper-margin:   17px; // @carousel-handler-margin + @carousel-handler-wrapper-margin = 20px
-@carousel-handler-transition:       background @carousel-animation-duration linear;
-@carousel-handler-margin:           3px;
-@carousel-handler-sense-width:      @carousel-handler-margin;
-@carousel-dot-wrapper-side-length:  1.2vw; // 1.2% of the screen width.
-@carousel-dot-side-length:          10px;
-@carousel-bar-width:                18px;
-@carousel-bar-height:               4px;
-@carousel-bar-active-width:         28px;
-
-// Rate
+@carousel-animation-duration: 0.3s;
+@carousel-toolbar-wrapper-margin: 17px; // @carousel-handler-margin + @carousel-handler-wrapper-margin = 20px
+@carousel-handler-transition: background @carousel-animation-duration linear;
+@carousel-handler-margin: 3px;
+@carousel-handler-sense-width: @carousel-handler-margin;
+@carousel-dot-wrapper-side-length: 1.2vw; // 1.2% of the screen width.
+@carousel-dot-side-length: 10px;
+@carousel-bar-width: 18px;
+@carousel-bar-height: 4px;
+@carousel-bar-active-width: 28px;
 
-@rate-xs-font-size: 18px;
-@rate-sm-font-size: 24px;
-@rate-md-font-size: 30px;
-@rate-lg-font-size: 36px;
 
 //-- Z-index master list
 // Keep this section at the bottom of this file for easier lookup
@@ -794,41 +622,41 @@
 // Note: These variables are not generated into the Customizer.
 //
 
-@zindex-date-range-picker-calendar-dropdown:  1;
+@zindex-date-range-picker-calendar-dropdown: 1;
 @zindex-date-range-picker-table-cell-content: 1;
-@zindex-badge-content:                        1;
-@zindex-message-full:                         3;
-@zindex-dropdown:                             5;
-@zindex-picker-toggle:                        5; // The same with zindex-dropdown
-@zindex-picker-input:                         (@zindex-picker-toggle + 1); // Greater than picker toggle
-@zindex-picker-popup:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
-@zindex-dropdown-a:                           10;
-@zindex-list-helper:                          99;
-@zindex-navbar:                               1000;
-@zindex-navbar-fixed:                         1030;
-@zindex-modal:                                1050;
-@zindex-drawer:                               1050;
-@zindex-drawer-background:                    @zindex-drawer;
-@zindex-popover:                              1060;
-@zindex-tooltip:                              1070;
-@zindex-notification:                         1080;
+@zindex-badge-content: 1;
+@zindex-message-full: 3;
+@zindex-dropdown: 5;
+@zindex-picker-toggle: 5; // The same with zindex-dropdown
+@zindex-picker-input: (@zindex-picker-toggle + 1); // Greater than picker toggle
+@zindex-picker-popup: (@zindex-picker-toggle + 2); // Greater than picker toggle and input
+@zindex-dropdown-a: 10;
+@zindex-list-helper: 99;
+@zindex-navbar: 1000;
+@zindex-navbar-fixed: 1030;
+@zindex-modal: 1050;
+@zindex-drawer: 1050;
+@zindex-drawer-background: @zindex-drawer;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-notification: 1080;
 
 //#==== Uploader
-@zindex-uploader-picture-preview:         1;
+@zindex-uploader-picture-preview: 1;
 @zindex-uploader-picture-loading-wrapper: 2;
-@zindex-uploader-picture-error-wrapper:   3;
-@zindex-uploader-picture-remove-button:   4;
+@zindex-uploader-picture-error-wrapper: 3;
+@zindex-uploader-picture-remove-button: 4;
 
 //#==== Form
 @zindex-form-error-message: 5;
 
 //#==== Table
-@zindex-table-body-row-wrapper:       0;
-@zindex-table-header-row-wrapper:     2;
-@zindex-table-column-resize-spanner:  3;
-@zindex-table-cell-group-fixed:       4;
-@zindex-table-row-cell-group-shadow:  5;
-@zindex-table-mouse-area:             6;
+@zindex-table-body-row-wrapper: 0;
+@zindex-table-header-row-wrapper: 2;
+@zindex-table-column-resize-spanner: 3;
+@zindex-table-cell-group-fixed: 4;
+@zindex-table-row-cell-group-shadow: 5;
+@zindex-table-mouse-area: 6;
 
 //#=== Rate
 @zindex-rate-character-before: 1;