rsuite 5.13.0 → 5.15.0

package/styles/colors/dark.less

@@ -1,105 +1,105 @@
 @plugin '../plugins/palette';
 
 // Highlight levels
-@H050: palette(@primary-color-dark, 50);
-@H100: palette(@primary-color-dark, 100);
-@H200: palette(@primary-color-dark, 200);
-@H300: palette(@primary-color-dark, 300);
-@H400: palette(@primary-color-dark, 400);
-@H500: @primary-color-dark;
-@H600: palette(@primary-color-dark, 600);
-@H700: palette(@primary-color-dark, 700);
-@H800: palette(@primary-color-dark, 800);
-@H900: palette(@primary-color-dark, 900);
+@H050-dark: palette(@primary-color-dark, 50);
+@H100-dark: palette(@primary-color-dark, 100);
+@H200-dark: palette(@primary-color-dark, 200);
+@H300-dark: palette(@primary-color-dark, 300);
+@H400-dark: palette(@primary-color-dark, 400);
+@H500-dark: @primary-color-dark;
+@H600-dark: palette(@primary-color-dark, 600);
+@H700-dark: palette(@primary-color-dark, 700);
+@H800-dark: palette(@primary-color-dark, 800);
+@H900-dark: palette(@primary-color-dark, 900);
 
 // Gray levels
-@B000: #fff;
-@B050: #e9ebf0;
-@B100: #cbced4;
-@B200: #a4a9b3;
-@B300: #858b94;
-@B400: #6a6f76;
-@B500: #5c6066;
-@B600: #3c3f43;
-@B700: #292d33;
-@B800: #1a1d24;
-@B900: #0f131a;
+@B000-dark: #fff;
+@B050-dark: #e9ebf0;
+@B100-dark: #cbced4;
+@B200-dark: #a4a9b3;
+@B300-dark: #858b94;
+@B400-dark: #6a6f76;
+@B500-dark: #5c6066;
+@B600-dark: #3c3f43;
+@B700-dark: #292d33;
+@B800-dark: #1a1d24;
+@B900-dark: #0f131a;
 
 // Secondary palette
 
-@red-50: palette(@red-dark, 50);
-@red-100: palette(@red-dark, 100);
-@red-200: palette(@red-dark, 200);
-@red-300: palette(@red-dark, 300);
-@red-400: palette(@red-dark, 400);
-@red-500: @red-dark;
-@red-600: palette(@red-dark, 600);
-@red-700: palette(@red-dark, 700);
-@red-800: palette(@red-dark, 800);
-@red-900: palette(@red-dark, 900);
+@red-50-dark: palette(@red-dark, 50);
+@red-100-dark: palette(@red-dark, 100);
+@red-200-dark: palette(@red-dark, 200);
+@red-300-dark: palette(@red-dark, 300);
+@red-400-dark: palette(@red-dark, 400);
+@red-500-dark: @red-dark;
+@red-600-dark: palette(@red-dark, 600);
+@red-700-dark: palette(@red-dark, 700);
+@red-800-dark: palette(@red-dark, 800);
+@red-900-dark: palette(@red-dark, 900);
 
-@orange-50: palette(@orange-dark, 50);
-@orange-100: palette(@orange-dark, 100);
-@orange-200: palette(@orange-dark, 200);
-@orange-300: palette(@orange-dark, 300);
-@orange-400: palette(@orange-dark, 400);
-@orange-500: @orange-dark;
-@orange-600: palette(@orange-dark, 600);
-@orange-700: palette(@orange-dark, 700);
-@orange-800: palette(@orange-dark, 800);
-@orange-900: palette(@orange-dark, 900);
+@orange-50-dark: palette(@orange-dark, 50);
+@orange-100-dark: palette(@orange-dark, 100);
+@orange-200-dark: palette(@orange-dark, 200);
+@orange-300-dark: palette(@orange-dark, 300);
+@orange-400-dark: palette(@orange-dark, 400);
+@orange-500-dark: @orange-dark;
+@orange-600-dark: palette(@orange-dark, 600);
+@orange-700-dark: palette(@orange-dark, 700);
+@orange-800-dark: palette(@orange-dark, 800);
+@orange-900-dark: palette(@orange-dark, 900);
 
-@yellow-50: palette(@yellow-dark, 50);
-@yellow-100: palette(@yellow-dark, 100);
-@yellow-200: palette(@yellow-dark, 200);
-@yellow-300: palette(@yellow-dark, 300);
-@yellow-400: palette(@yellow-dark, 400);
-@yellow-500: @yellow-dark;
-@yellow-600: palette(@yellow-dark, 600);
-@yellow-700: palette(@yellow-dark, 700);
-@yellow-800: palette(@yellow-dark, 800);
-@yellow-900: palette(@yellow-dark, 900);
+@yellow-50-dark: palette(@yellow-dark, 50);
+@yellow-100-dark: palette(@yellow-dark, 100);
+@yellow-200-dark: palette(@yellow-dark, 200);
+@yellow-300-dark: palette(@yellow-dark, 300);
+@yellow-400-dark: palette(@yellow-dark, 400);
+@yellow-500-dark: @yellow-dark;
+@yellow-600-dark: palette(@yellow-dark, 600);
+@yellow-700-dark: palette(@yellow-dark, 700);
+@yellow-800-dark: palette(@yellow-dark, 800);
+@yellow-900-dark: palette(@yellow-dark, 900);
 
-@green-50: palette(@green-dark, 50);
-@green-100: palette(@green-dark, 100);
-@green-200: palette(@green-dark, 200);
-@green-300: palette(@green-dark, 300);
-@green-400: palette(@green-dark, 400);
-@green-500: @green-dark;
-@green-600: palette(@green-dark, 600);
-@green-700: palette(@green-dark, 700);
-@green-800: palette(@green-dark, 800);
-@green-900: palette(@green-dark, 900);
+@green-50-dark: palette(@green-dark, 50);
+@green-100-dark: palette(@green-dark, 100);
+@green-200-dark: palette(@green-dark, 200);
+@green-300-dark: palette(@green-dark, 300);
+@green-400-dark: palette(@green-dark, 400);
+@green-500-dark: @green-dark;
+@green-600-dark: palette(@green-dark, 600);
+@green-700-dark: palette(@green-dark, 700);
+@green-800-dark: palette(@green-dark, 800);
+@green-900-dark: palette(@green-dark, 900);
 
-@cyan-50: palette(@cyan-dark, 50);
-@cyan-100: palette(@cyan-dark, 100);
-@cyan-200: palette(@cyan-dark, 200);
-@cyan-300: palette(@cyan-dark, 300);
-@cyan-400: palette(@cyan-dark, 400);
-@cyan-500: @cyan-dark;
-@cyan-600: palette(@cyan-dark, 600);
-@cyan-700: palette(@cyan-dark, 700);
-@cyan-800: palette(@cyan-dark, 800);
-@cyan-900: palette(@cyan-dark, 900);
+@cyan-50-dark: palette(@cyan-dark, 50);
+@cyan-100-dark: palette(@cyan-dark, 100);
+@cyan-200-dark: palette(@cyan-dark, 200);
+@cyan-300-dark: palette(@cyan-dark, 300);
+@cyan-400-dark: palette(@cyan-dark, 400);
+@cyan-500-dark: @cyan-dark;
+@cyan-600-dark: palette(@cyan-dark, 600);
+@cyan-700-dark: palette(@cyan-dark, 700);
+@cyan-800-dark: palette(@cyan-dark, 800);
+@cyan-900-dark: palette(@cyan-dark, 900);
 
-@blue-50: palette(@blue-dark, 50);
-@blue-100: palette(@blue-dark, 100);
-@blue-200: palette(@blue-dark, 200);
-@blue-300: palette(@blue-dark, 300);
-@blue-400: palette(@blue-dark, 400);
-@blue-500: @blue-dark;
-@blue-600: palette(@blue-dark, 600);
-@blue-700: palette(@blue-dark, 700);
-@blue-800: palette(@blue-dark, 800);
-@blue-900: palette(@blue-dark, 900);
+@blue-50-dark: palette(@blue-dark, 50);
+@blue-100-dark: palette(@blue-dark, 100);
+@blue-200-dark: palette(@blue-dark, 200);
+@blue-300-dark: palette(@blue-dark, 300);
+@blue-400-dark: palette(@blue-dark, 400);
+@blue-500-dark: @blue-dark;
+@blue-600-dark: palette(@blue-dark, 600);
+@blue-700-dark: palette(@blue-dark, 700);
+@blue-800-dark: palette(@blue-dark, 800);
+@blue-900-dark: palette(@blue-dark, 900);
 
-@violet-50: palette(@violet-dark, 50);
-@violet-100: palette(@violet-dark, 100);
-@violet-200: palette(@violet-dark, 200);
-@violet-300: palette(@violet-dark, 300);
-@violet-400: palette(@violet-dark, 400);
-@violet-500: @violet-dark;
-@violet-600: palette(@violet-dark, 600);
-@violet-700: palette(@violet-dark, 700);
-@violet-800: palette(@violet-dark, 800);
-@violet-900: palette(@violet-dark, 900);
+@violet-50-dark: palette(@violet-dark, 50);
+@violet-100-dark: palette(@violet-dark, 100);
+@violet-200-dark: palette(@violet-dark, 200);
+@violet-300-dark: palette(@violet-dark, 300);
+@violet-400-dark: palette(@violet-dark, 400);
+@violet-500-dark: @violet-dark;
+@violet-600-dark: palette(@violet-dark, 600);
+@violet-700-dark: palette(@violet-dark, 700);
+@violet-800-dark: palette(@violet-dark, 800);
+@violet-900-dark: palette(@violet-dark, 900);

package/styles/colors/high-contrast.less

@@ -1,105 +1,105 @@
 @plugin '../plugins/palette';
 
 // Highlight levels
-@H050: #fffef2;
-@H100: #fffbc2;
-@H200: #fffa91;
-@H300: #fffa61;
-@H400: #fffc30;
-@H500: #ffff00;
-@H600: #f1f500;
-@H700: #d9e000;
-@H800: #b8c200;
-@H900: #8f9900;
+@H050-high-contrast: #fffef2;
+@H100-high-contrast: #fffbc2;
+@H200-high-contrast: #fffa91;
+@H300-high-contrast: #fffa61;
+@H400-high-contrast: #fffc30;
+@H500-high-contrast: #ffff00;
+@H600-high-contrast: #f1f500;
+@H700-high-contrast: #d9e000;
+@H800-high-contrast: #b8c200;
+@H900-high-contrast: #8f9900;
 
 // Gray levels
-@B000: #fff;
-@B050: #e9ebf0;
-@B100: #cbced4;
-@B200: #a4a9b3;
-@B300: #858b94;
-@B400: #6a6f76;
-@B500: #5c6066;
-@B600: #3c3f43;
-@B700: #292d33;
-@B800: #1a1d24;
-@B900: #0f131a;
+@B000-high-contrast: #fff;
+@B050-high-contrast: #e9ebf0;
+@B100-high-contrast: #cbced4;
+@B200-high-contrast: #a4a9b3;
+@B300-high-contrast: #858b94;
+@B400-high-contrast: #6a6f76;
+@B500-high-contrast: #5c6066;
+@B600-high-contrast: #3c3f43;
+@B700-high-contrast: #292d33;
+@B800-high-contrast: #1a1d24;
+@B900-high-contrast: #0f131a;
 
 // Secondary palette
 
-@red-50: palette(@red-high-contrast, 50);
-@red-100: palette(@red-high-contrast, 100);
-@red-200: palette(@red-high-contrast, 200);
-@red-300: palette(@red-high-contrast, 300);
-@red-400: palette(@red-high-contrast, 400);
-@red-500: @red-high-contrast;
-@red-600: palette(@red-high-contrast, 600);
-@red-700: palette(@red-high-contrast, 700);
-@red-800: palette(@red-high-contrast, 800);
-@red-900: palette(@red-high-contrast, 900);
+@red-50-high-contrast: palette(@red-high-contrast, 50);
+@red-100-high-contrast: palette(@red-high-contrast, 100);
+@red-200-high-contrast: palette(@red-high-contrast, 200);
+@red-300-high-contrast: palette(@red-high-contrast, 300);
+@red-400-high-contrast: palette(@red-high-contrast, 400);
+@red-500-high-contrast: @red-high-contrast;
+@red-600-high-contrast: palette(@red-high-contrast, 600);
+@red-700-high-contrast: palette(@red-high-contrast, 700);
+@red-800-high-contrast: palette(@red-high-contrast, 800);
+@red-900-high-contrast: palette(@red-high-contrast, 900);
 
-@orange-50: palette(@orange-high-contrast, 50);
-@orange-100: palette(@orange-high-contrast, 100);
-@orange-200: palette(@orange-high-contrast, 200);
-@orange-300: palette(@orange-high-contrast, 300);
-@orange-400: palette(@orange-high-contrast, 400);
-@orange-500: @orange-high-contrast;
-@orange-600: palette(@orange-high-contrast, 600);
-@orange-700: palette(@orange-high-contrast, 700);
-@orange-800: palette(@orange-high-contrast, 800);
-@orange-900: palette(@orange-high-contrast, 900);
+@orange-50-high-contrast: palette(@orange-high-contrast, 50);
+@orange-100-high-contrast: palette(@orange-high-contrast, 100);
+@orange-200-high-contrast: palette(@orange-high-contrast, 200);
+@orange-300-high-contrast: palette(@orange-high-contrast, 300);
+@orange-400-high-contrast: palette(@orange-high-contrast, 400);
+@orange-500-high-contrast: @orange-high-contrast;
+@orange-600-high-contrast: palette(@orange-high-contrast, 600);
+@orange-700-high-contrast: palette(@orange-high-contrast, 700);
+@orange-800-high-contrast: palette(@orange-high-contrast, 800);
+@orange-900-high-contrast: palette(@orange-high-contrast, 900);
 
-@yellow-50: palette(@yellow-high-contrast, 50);
-@yellow-100: palette(@yellow-high-contrast, 100);
-@yellow-200: palette(@yellow-high-contrast, 200);
-@yellow-300: palette(@yellow-high-contrast, 300);
-@yellow-400: palette(@yellow-high-contrast, 400);
-@yellow-500: @yellow-high-contrast;
-@yellow-600: palette(@yellow-high-contrast, 600);
-@yellow-700: palette(@yellow-high-contrast, 700);
-@yellow-800: palette(@yellow-high-contrast, 800);
-@yellow-900: palette(@yellow-high-contrast, 900);
+@yellow-50-high-contrast: palette(@yellow-high-contrast, 50);
+@yellow-100-high-contrast: palette(@yellow-high-contrast, 100);
+@yellow-200-high-contrast: palette(@yellow-high-contrast, 200);
+@yellow-300-high-contrast: palette(@yellow-high-contrast, 300);
+@yellow-400-high-contrast: palette(@yellow-high-contrast, 400);
+@yellow-500-high-contrast: @yellow-high-contrast;
+@yellow-600-high-contrast: palette(@yellow-high-contrast, 600);
+@yellow-700-high-contrast: palette(@yellow-high-contrast, 700);
+@yellow-800-high-contrast: palette(@yellow-high-contrast, 800);
+@yellow-900-high-contrast: palette(@yellow-high-contrast, 900);
 
-@green-50: palette(@green-high-contrast, 50);
-@green-100: palette(@green-high-contrast, 100);
-@green-200: palette(@green-high-contrast, 200);
-@green-300: palette(@green-high-contrast, 300);
-@green-400: palette(@green-high-contrast, 400);
-@green-500: @green-high-contrast;
-@green-600: palette(@green-high-contrast, 600);
-@green-700: palette(@green-high-contrast, 700);
-@green-800: palette(@green-high-contrast, 800);
-@green-900: palette(@green-high-contrast, 900);
+@green-50-high-contrast: palette(@green-high-contrast, 50);
+@green-100-high-contrast: palette(@green-high-contrast, 100);
+@green-200-high-contrast: palette(@green-high-contrast, 200);
+@green-300-high-contrast: palette(@green-high-contrast, 300);
+@green-400-high-contrast: palette(@green-high-contrast, 400);
+@green-500-high-contrast: @green-high-contrast;
+@green-600-high-contrast: palette(@green-high-contrast, 600);
+@green-700-high-contrast: palette(@green-high-contrast, 700);
+@green-800-high-contrast: palette(@green-high-contrast, 800);
+@green-900-high-contrast: palette(@green-high-contrast, 900);
 
-@cyan-50: palette(@cyan-high-contrast, 50);
-@cyan-100: palette(@cyan-high-contrast, 100);
-@cyan-200: palette(@cyan-high-contrast, 200);
-@cyan-300: palette(@cyan-high-contrast, 300);
-@cyan-400: palette(@cyan-high-contrast, 400);
-@cyan-500: @cyan-high-contrast;
-@cyan-600: palette(@cyan-high-contrast, 600);
-@cyan-700: palette(@cyan-high-contrast, 700);
-@cyan-800: palette(@cyan-high-contrast, 800);
-@cyan-900: palette(@cyan-high-contrast, 900);
+@cyan-50-high-contrast: palette(@cyan-high-contrast, 50);
+@cyan-100-high-contrast: palette(@cyan-high-contrast, 100);
+@cyan-200-high-contrast: palette(@cyan-high-contrast, 200);
+@cyan-300-high-contrast: palette(@cyan-high-contrast, 300);
+@cyan-400-high-contrast: palette(@cyan-high-contrast, 400);
+@cyan-500-high-contrast: @cyan-high-contrast;
+@cyan-600-high-contrast: palette(@cyan-high-contrast, 600);
+@cyan-700-high-contrast: palette(@cyan-high-contrast, 700);
+@cyan-800-high-contrast: palette(@cyan-high-contrast, 800);
+@cyan-900-high-contrast: palette(@cyan-high-contrast, 900);
 
-@blue-50: palette(@blue-high-contrast, 50);
-@blue-100: palette(@blue-high-contrast, 100);
-@blue-200: palette(@blue-high-contrast, 200);
-@blue-300: palette(@blue-high-contrast, 300);
-@blue-400: palette(@blue-high-contrast, 400);
-@blue-500: @blue-high-contrast;
-@blue-600: palette(@blue-high-contrast, 600);
-@blue-700: palette(@blue-high-contrast, 700);
-@blue-800: palette(@blue-high-contrast, 800);
-@blue-900: palette(@blue-high-contrast, 900);
+@blue-50-high-contrast: palette(@blue-high-contrast, 50);
+@blue-100-high-contrast: palette(@blue-high-contrast, 100);
+@blue-200-high-contrast: palette(@blue-high-contrast, 200);
+@blue-300-high-contrast: palette(@blue-high-contrast, 300);
+@blue-400-high-contrast: palette(@blue-high-contrast, 400);
+@blue-500-high-contrast: @blue-high-contrast;
+@blue-600-high-contrast: palette(@blue-high-contrast, 600);
+@blue-700-high-contrast: palette(@blue-high-contrast, 700);
+@blue-800-high-contrast: palette(@blue-high-contrast, 800);
+@blue-900-high-contrast: palette(@blue-high-contrast, 900);
 
-@violet-50: palette(@violet-high-contrast, 50);
-@violet-100: palette(@violet-high-contrast, 100);
-@violet-200: palette(@violet-high-contrast, 200);
-@violet-300: palette(@violet-high-contrast, 300);
-@violet-400: palette(@violet-high-contrast, 400);
-@violet-500: @violet-high-contrast;
-@violet-600: palette(@violet-high-contrast, 600);
-@violet-700: palette(@violet-high-contrast, 700);
-@violet-800: palette(@violet-high-contrast, 800);
-@violet-900: palette(@violet-high-contrast, 900);
+@violet-50-high-contrast: palette(@violet-high-contrast, 50);
+@violet-100-high-contrast: palette(@violet-high-contrast, 100);
+@violet-200-high-contrast: palette(@violet-high-contrast, 200);
+@violet-300-high-contrast: palette(@violet-high-contrast, 300);
+@violet-400-high-contrast: palette(@violet-high-contrast, 400);
+@violet-500-high-contrast: @violet-high-contrast;
+@violet-600-high-contrast: palette(@violet-high-contrast, 600);
+@violet-700-high-contrast: palette(@violet-high-contrast, 700);
+@violet-800-high-contrast: palette(@violet-high-contrast, 800);
+@violet-900-high-contrast: palette(@violet-high-contrast, 900);

package/styles/variables.less

@@ -2,6 +2,9 @@
 // All variables declared in this file is supposed to be customizable by the user
 // This file is ignored by prettier for better alignment
 // See .prettierignore
+@import 'colors/light.less';
+@import 'colors/dark.less';
+@import 'colors/high-contrast.less';
 
 // Controls
 
@@ -23,17 +26,25 @@
 // Media queries breakpoints
 // Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
-// Extra small screen / phone
-// @screen-xs
-@screen-phone:        480px;
+// Small screen / phone
+// @screen-sm
+@screen-sm:      576px;
 
 // Medium screen / desktop
 // @screen-md
-@screen-desktop:      992px;
+@screen-md:      768px;
 
 // Large screen / wide desktop
 // @screen-lg
-@screen-lg-desktop:   1200px;
+@screen-lg:      992px;
+
+// Extra large devices / extra wide desktop
+// @screen-xl
+@screen-xl:      1200px;
+
+// Extra extra large devices / ultra wide desktop
+// @screen-xxl
+@screen-xxl:     1400px;
 
 
 // Grid system
@@ -48,16 +59,24 @@
 // Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / phone / tablet
-@container-phone:         (480px + @grid-gutter-width);
-@container-sm:            @container-phone;
+@container-phone:                      (540px + @grid-gutter-width);
+@container-sm:                         @container-phone;
 
 // Medium screen / desktop
-@container-desktop:       (940px + @grid-gutter-width);
-@container-md:            @container-desktop;
+@container-desktop:                    (720px + @grid-gutter-width);
+@container-md:                         @container-desktop;
 
 // Large screen / wide desktop
-@container-large-desktop: (1140px + @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;
+
+// Extra large devices / ultra wide desktop
+@container-extra-extra-large-desktop:  (1320px + @grid-gutter-width);
+@container-xxl:                        @container-large-desktop;
 
 // Color system
 
@@ -199,7 +218,6 @@
 @table-header-sort-wrapper-margin-left: 5px;
 
 @table-column-resize-spanner-width:                 3px;
-@table-column-resize-spanner-gap-width:             3px;
 @table-column-resize-spanner-triangle-side-length:  3px;
 
 @table-body-content-padding-vertical:   13px; // @deprecated use @table-cell-padding-y instead
@@ -323,6 +341,9 @@
 @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-item-padding-vertical:    8px; // @deprecated use @dropdown-item-padding-y instead
 @dropdown-item-padding-horizontal:  12px; // @deprecated use @dropdown-item-padding-x instead
 
@@ -400,9 +421,11 @@
 @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;

package/styles/color-modes/common.less

@@ -1,44 +0,0 @@
-& {
-  // Gray levels
-  --rs-gray-50: @B050;
-  --rs-gray-100: @B100;
-  --rs-gray-200: @B200;
-  --rs-gray-300: @B300;
-  --rs-gray-400: @B400;
-  --rs-gray-500: @B500;
-  --rs-gray-600: @B600;
-  --rs-gray-700: @B700;
-  --rs-gray-800: @B800;
-  --rs-gray-900: @B900;
-
-  // Highlight levels
-  --rs-primary-50: @H050;
-  --rs-primary-100: @H100;
-  --rs-primary-200: @H200;
-  --rs-primary-300: @H300;
-  --rs-primary-400: @H400;
-  --rs-primary-500: @H500;
-  --rs-primary-600: @H600;
-  --rs-primary-700: @H700;
-  --rs-primary-800: @H800;
-  --rs-primary-900: @H900;
-
-  // Spectrum levels
-  each(@spectrum, .(@color-name) {
-    @color: @@color-name;
-    @color-name-50: ~'@{color-name}-50';
-    --rs-@{color-name}-50: @@color-name-50;
-
-    each(range(9), {
-      @level: @{index}00;
-      @color-name-level: ~'@{color-name}-@{level}';
-      --rs-@{color-name}-@{level}: @@color-name-level;
-    });
-  });
-
-  // Stateful colors
-  --rs-state-success: @green;
-  --rs-state-info: @blue;
-  --rs-state-warning: @yellow;
-  --rs-state-error: @red;
-}