From b1d187da0f831a31d87f0e73ab28216d86394327 Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Tue, 7 Jun 2022 19:38:48 +0800
Subject: [PATCH] feat(less): expose primary palette variables (#2532)

---
 src/styles/color-modes/common.less        |  44 ---
 src/styles/color-modes/dark.less          | 407 ++++++++++++----------
 src/styles/color-modes/high-contrast.less | 403 +++++++++++----------
 src/styles/color-modes/light.less         |  45 ++-
 src/styles/colors/dark.less               | 182 +++++-----
 src/styles/colors/high-contrast.less      | 182 +++++-----
 src/styles/variables.less                 |   3 +
 stylelint.config.js                       |   2 +-
 8 files changed, 672 insertions(+), 596 deletions(-)
 delete mode 100644 src/styles/color-modes/common.less

diff --git a/src/styles/color-modes/common.less b/src/styles/color-modes/common.less
deleted file mode 100644
index 0ee8c843c..000000000
--- a/src/styles/color-modes/common.less
+++ /dev/null
@@ -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;
-}
diff --git a/src/styles/color-modes/dark.less b/src/styles/color-modes/dark.less
index 87c343c60..f8cdb296e 100644
--- a/src/styles/color-modes/dark.less
+++ b/src/styles/color-modes/dark.less
@@ -1,83 +1,122 @@
-@import '../colors/dark';
-
 // see https://rsuitejs.com/design/dark
 & {
-  @import (multiple) 'common';
+  // Gray levels
+  --rs-gray-50: @B050-dark;
+  --rs-gray-100: @B100-dark;
+  --rs-gray-200: @B200-dark;
+  --rs-gray-300: @B300-dark;
+  --rs-gray-400: @B400-dark;
+  --rs-gray-500: @B500-dark;
+  --rs-gray-600: @B600-dark;
+  --rs-gray-700: @B700-dark;
+  --rs-gray-800: @B800-dark;
+  --rs-gray-900: @B900-dark;
+
+  // Highlight levels
+  --rs-primary-50: @H050-dark;
+  --rs-primary-100: @H100-dark;
+  --rs-primary-200: @H200-dark;
+  --rs-primary-300: @H300-dark;
+  --rs-primary-400: @H400-dark;
+  --rs-primary-500: @H500-dark;
+  --rs-primary-600: @H600-dark;
+  --rs-primary-700: @H700-dark;
+  --rs-primary-800: @H800-dark;
+  --rs-primary-900: @H900-dark;
+
+  // Spectrum levels
+  each(@spectrum, .(@color-name) {
+      @color: @@color-name;
+      @color-name-50: ~'@{color-name}-50-dark';
+      --rs-@{color-name}-50: @@color-name-50;
+  
+      each(range(9), {
+        @level: @{index}00;
+        @color-name-level: ~'@{color-name}-@{level}-dark';
+        --rs-@{color-name}-@{level}: @@color-name-level;
+      });
+    });
+
+  // Stateful colors
+  --rs-state-success: @green-dark;
+  --rs-state-info: @blue-dark;
+  --rs-state-warning: @yellow-dark;
+  --rs-state-error: @red-dark;
 
   // Reset
-  --rs-body: @B900;
+  --rs-body: @B900-dark;
 
   // Misc
-  --rs-text-link: @H500;
-  --rs-text-link-hover: @H400;
-  --rs-text-link-active: @H300;
-  --rs-text-primary: @B050;
-  --rs-text-secondary: @B200;
-  --rs-text-tertiary: @B300;
-  --rs-text-heading: @B000;
-  --rs-text-inverse: @B800;
-  --rs-text-heading-inverse: @B900;
-  --rs-text-active: @H500;
-  --rs-text-disabled: @B500;
-  --rs-border-primary: @B600;
-  --rs-border-secondary: @B700;
-  --rs-bg-card: @B800;
-  --rs-bg-overlay: @B700;
-  --rs-bg-well: @B900;
-  --rs-bg-active: @H700;
-  --rs-bg-backdrop: fade(@B900, 80%);
-  --rs-state-hover-bg: @B600;
-  --rs-color-focus-ring: 0 0 0 3px fade(@H500, 25%);
-  --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
-  --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+  --rs-text-link: @H500-dark;
+  --rs-text-link-hover: @H400-dark;
+  --rs-text-link-active: @H300-dark;
+  --rs-text-primary: @B050-dark;
+  --rs-text-secondary: @B200-dark;
+  --rs-text-tertiary: @B300-dark;
+  --rs-text-heading: @B000-dark;
+  --rs-text-inverse: @B800-dark;
+  --rs-text-heading-inverse: @B900-dark;
+  --rs-text-active: @H500-dark;
+  --rs-text-disabled: @B500-dark;
+  --rs-border-primary: @B600-dark;
+  --rs-border-secondary: @B700-dark;
+  --rs-bg-card: @B800-dark;
+  --rs-bg-overlay: @B700-dark;
+  --rs-bg-well: @B900-dark;
+  --rs-bg-active: @H700-dark;
+  --rs-bg-backdrop: fade(@B900-dark, 80%);
+  --rs-state-hover-bg: @B600-dark;
+  --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
+  --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
+  --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Button
-  --rs-btn-default-bg: @B600;
-  --rs-btn-default-text: @B050;
-  --rs-btn-default-hover-bg: @B500;
-  --rs-btn-default-active-bg: @B300;
-  --rs-btn-default-active-text: @B000;
-  --rs-btn-default-disabled-bg: @B600;
-  --rs-btn-default-disabled-text: @B500;
-  --rs-btn-primary-bg: @H700;
-  --rs-btn-primary-text: @B000;
-  --rs-btn-primary-hover-bg: @H600;
-  --rs-btn-primary-active-bg: @H400;
-  --rs-btn-subtle-text: @B200;
-  --rs-btn-subtle-hover-bg: @B700;
-  --rs-btn-subtle-hover-text: @B050;
-  --rs-btn-subtle-active-bg: @B400;
-  --rs-btn-subtle-active-text: @B000;
-  --rs-btn-subtle-disabled-text: @B500;
-  --rs-btn-ghost-border: @H500;
-  --rs-btn-ghost-text: @H500;
-  --rs-btn-ghost-hover-border: @H400;
-  --rs-btn-ghost-hover-text: @H400;
-  --rs-btn-ghost-active-border: @H200;
-  --rs-btn-ghost-active-text: @H200;
-  --rs-btn-link-text: @H500;
-  --rs-btn-link-hover-text: @H400;
-  --rs-btn-link-active-text: @H200;
+  --rs-btn-default-bg: @B600-dark;
+  --rs-btn-default-text: @B050-dark;
+  --rs-btn-default-hover-bg: @B500-dark;
+  --rs-btn-default-active-bg: @B300-dark;
+  --rs-btn-default-active-text: @B000-dark;
+  --rs-btn-default-disabled-bg: @B600-dark;
+  --rs-btn-default-disabled-text: @B500-dark;
+  --rs-btn-primary-bg: @H700-dark;
+  --rs-btn-primary-text: @B000-dark;
+  --rs-btn-primary-hover-bg: @H600-dark;
+  --rs-btn-primary-active-bg: @H400-dark;
+  --rs-btn-subtle-text: @B200-dark;
+  --rs-btn-subtle-hover-bg: @B700-dark;
+  --rs-btn-subtle-hover-text: @B050-dark;
+  --rs-btn-subtle-active-bg: @B400-dark;
+  --rs-btn-subtle-active-text: @B000-dark;
+  --rs-btn-subtle-disabled-text: @B500-dark;
+  --rs-btn-ghost-border: @H500-dark;
+  --rs-btn-ghost-text: @H500-dark;
+  --rs-btn-ghost-hover-border: @H400-dark;
+  --rs-btn-ghost-hover-text: @H400-dark;
+  --rs-btn-ghost-active-border: @H200-dark;
+  --rs-btn-ghost-active-text: @H200-dark;
+  --rs-btn-link-text: @H500-dark;
+  --rs-btn-link-hover-text: @H400-dark;
+  --rs-btn-link-active-text: @H200-dark;
 
   // Icon Button
-  --rs-iconbtn-addon: @B500;
-  --rs-iconbtn-activated-addon: @B400;
-  --rs-iconbtn-pressed-addon: @B200;
-  --rs-iconbtn-primary-addon: @H600;
-  --rs-iconbtn-primary-activated-addon: @H500;
-  --rs-iconbtn-primary-pressed-addon: @H400;
+  --rs-iconbtn-addon: @B500-dark;
+  --rs-iconbtn-activated-addon: @B400-dark;
+  --rs-iconbtn-pressed-addon: @B200-dark;
+  --rs-iconbtn-primary-addon: @H600-dark;
+  --rs-iconbtn-primary-activated-addon: @H500-dark;
+  --rs-iconbtn-primary-pressed-addon: @H400-dark;
 
   // Divider
-  --rs-divider-border: @B600;
+  --rs-divider-border: @B600-dark;
 
   // Loader
-  --rs-loader-ring: fade(@B050, 30);
-  --rs-loader-rotor: @B000;
-  --rs-loader-backdrop: fade(@B900, 83%);
-  --rs-loader-ring-inverse: fade(@B050, 80);
-  --rs-loader-rotor-inverse: @B500;
-  --rs-loader-backdrop-inverse: fade(@B000, 90);
+  --rs-loader-ring: fade(@B050-dark, 30);
+  --rs-loader-rotor: @B000-dark;
+  --rs-loader-backdrop: fade(@B900-dark, 83%);
+  --rs-loader-ring-inverse: fade(@B050-dark, 80);
+  --rs-loader-rotor-inverse: @B500-dark;
+  --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
 
   // Message
   --rs-message-success-header: #fff;
@@ -88,9 +127,9 @@
   --rs-message-info-text: #fff;
   --rs-message-info-icon: #fff;
   --rs-message-info-bg: @blue-500;
-  --rs-message-warning-header: @B900;
-  --rs-message-warning-text: @B900;
-  --rs-message-warning-icon: @B900;
+  --rs-message-warning-header: @B900-dark;
+  --rs-message-warning-text: @B900-dark;
+  --rs-message-warning-icon: @B900-dark;
   --rs-message-warning-bg: @yellow-500;
   --rs-message-error-header: #fff;
   --rs-message-error-text: #fff;
@@ -98,185 +137,185 @@
   --rs-message-error-bg: @red-500;
 
   // Tooltip
-  --rs-tooltip-bg: @B500;
-  --rs-tooltip-text: @B000;
+  --rs-tooltip-bg: @B500-dark;
+  --rs-tooltip-text: @B000-dark;
 
   // Progress
-  --rs-progress-bg: @B700;
-  --rs-progress-bar: @H500;
+  --rs-progress-bg: @B700-dark;
+  --rs-progress-bar: @H500-dark;
   --rs-progress-bar-success: @green;
   --rs-progress-bar-fail: @red;
 
   // Placeholder
-  --rs-placeholder: @B600;
-  --rs-placeholder-active: lighten(@B600, 5%);
+  --rs-placeholder: @B600-dark;
+  --rs-placeholder-active: lighten(@B600-dark, 5%);
 
   // Dropdown
-  --rs-dropdown-divider: @B600;
-  --rs-dropdown-item-bg-hover: @B600;
-  --rs-dropdown-item-bg-active: fade(@H900, 20);
-  --rs-dropdown-item-text-active: @H500;
-  --rs-dropdown-header-text: @B500;
+  --rs-dropdown-divider: @B600-dark;
+  --rs-dropdown-item-bg-hover: @B600-dark;
+  --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
+  --rs-dropdown-item-text-active: @H500-dark;
+  --rs-dropdown-header-text: @B500-dark;
   --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
-  --rs-menuitem-active-bg: @B600;
+  --rs-menuitem-active-bg: @B600-dark;
   --rs-menuitem-active-text: currentColor;
 
   // Steps
-  --rs-steps-border: @B200;
-  --rs-steps-state-finish: @H500;
-  --rs-steps-border-state-finish: @H500;
-  --rs-steps-state-wait: @B200;
-  --rs-steps-state-process: @H700;
+  --rs-steps-border: @B200-dark;
+  --rs-steps-state-finish: @H500-dark;
+  --rs-steps-border-state-finish: @H500-dark;
+  --rs-steps-state-wait: @B200-dark;
+  --rs-steps-state-process: @H700-dark;
   --rs-steps-state-error: @red;
   --rs-steps-border-state-error: @red;
-  --rs-steps-icon-state-process: @H500;
+  --rs-steps-icon-state-process: @H500-dark;
   --rs-steps-icon-state-error: @red;
 
   // Navs
-  --rs-navs-text: @B200;
-  --rs-navs-text-hover: @B100;
-  --rs-navs-bg-hover: @B400;
-  --rs-navs-text-active: @B000;
-  --rs-navs-bg-active: @B400;
-  --rs-navs-tab-border: @B600;
-  --rs-navs-subtle-border: @B600;
-  --rs-navs-selected: @H500;
+  --rs-navs-text: @B200-dark;
+  --rs-navs-text-hover: @B100-dark;
+  --rs-navs-bg-hover: @B400-dark;
+  --rs-navs-text-active: @B000-dark;
+  --rs-navs-bg-active: @B400-dark;
+  --rs-navs-tab-border: @B600-dark;
+  --rs-navs-subtle-border: @B600-dark;
+  --rs-navs-selected: @H500-dark;
 
   // Navbar
-  --rs-navbar-default-bg: @B800;
-  --rs-navbar-default-text: @B200;
-  --rs-navbar-default-selected-text: @H500;
-  --rs-navbar-default-hover-bg: @B700;
-  --rs-navbar-default-hover-text: @B050;
-  --rs-navbar-inverse-bg: @H700;
+  --rs-navbar-default-bg: @B800-dark;
+  --rs-navbar-default-text: @B200-dark;
+  --rs-navbar-default-selected-text: @H500-dark;
+  --rs-navbar-default-hover-bg: @B700-dark;
+  --rs-navbar-default-hover-text: @B050-dark;
+  --rs-navbar-inverse-bg: @H700-dark;
   --rs-navbar-inverse-text: #fff;
-  --rs-navbar-inverse-selected-bg: @H400;
-  --rs-navbar-inverse-hover-bg: @H600;
+  --rs-navbar-inverse-selected-bg: @H400-dark;
+  --rs-navbar-inverse-hover-bg: @H600-dark;
   --rs-navbar-inverse-hover-text: #fff;
   --rs-navbar-subtle-bg: transparent;
-  --rs-navbar-subtle-text: @B200;
-  --rs-navbar-subtle-selected-text: @H500;
-  --rs-navbar-subtle-hover-bg: @B700;
-  --rs-navbar-subtle-hover-text: @B050;
+  --rs-navbar-subtle-text: @B200-dark;
+  --rs-navbar-subtle-selected-text: @H500-dark;
+  --rs-navbar-subtle-hover-bg: @B700-dark;
+  --rs-navbar-subtle-hover-text: @B050-dark;
 
   // Sidenav
-  --rs-sidenav-default-bg: @B800;
-  --rs-sidenav-default-text: @B200;
-  --rs-sidenav-default-selected-text: @H500;
-  --rs-sidenav-default-hover-bg: @B700;
-  --rs-sidenav-default-hover-text: @B050;
-  --rs-sidenav-default-footer-border: @B600;
-  --rs-sidenav-inverse-bg: @H700;
+  --rs-sidenav-default-bg: @B800-dark;
+  --rs-sidenav-default-text: @B200-dark;
+  --rs-sidenav-default-selected-text: @H500-dark;
+  --rs-sidenav-default-hover-bg: @B700-dark;
+  --rs-sidenav-default-hover-text: @B050-dark;
+  --rs-sidenav-default-footer-border: @B600-dark;
+  --rs-sidenav-inverse-bg: @H700-dark;
   --rs-sidenav-inverse-text: #fff;
-  --rs-sidenav-inverse-selected-bg: @H400;
-  --rs-sidenav-inverse-hover-bg: @H600;
-  --rs-sidenav-inverse-footer-border: @H600;
+  --rs-sidenav-inverse-selected-bg: @H400-dark;
+  --rs-sidenav-inverse-hover-bg: @H600-dark;
+  --rs-sidenav-inverse-footer-border: @H600-dark;
   --rs-sidenav-subtle-bg: transparent;
-  --rs-sidenav-subtle-text: @B200;
-  --rs-sidenav-subtle-selected-text: @H500;
-  --rs-sidenav-subtle-hover-bg: @B700;
-  --rs-sidenav-subtle-hover-text: @B050;
-  --rs-sidenav-subtle-footer-border: @B600;
+  --rs-sidenav-subtle-text: @B200-dark;
+  --rs-sidenav-subtle-selected-text: @H500-dark;
+  --rs-sidenav-subtle-hover-bg: @B700-dark;
+  --rs-sidenav-subtle-hover-text: @B050-dark;
+  --rs-sidenav-subtle-footer-border: @B600-dark;
 
   // Input
-  --rs-input-bg: @B800;
-  --rs-input-focus-border: @H500;
-  --rs-input-disabled-bg: @B700;
+  --rs-input-bg: @B800-dark;
+  --rs-input-focus-border: @H500-dark;
+  --rs-input-disabled-bg: @B700-dark;
 
   // ARIA Listboxes
-  --rs-listbox-option-hover-bg: @B600;
+  --rs-listbox-option-hover-bg: @B600-dark;
   --rs-listbox-option-hover-text: currentColor;
-  --rs-listbox-option-selected-text: @H500;
-  --rs-listbox-option-selected-bg: fade(@H900, 20%);
-  --rs-listbox-option-disabled-text: @B500;
-  --rs-listbox-option-disabled-selected-text: @H200;
+  --rs-listbox-option-selected-text: @H500-dark;
+  --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);
+  --rs-listbox-option-disabled-text: @B500-dark;
+  --rs-listbox-option-disabled-selected-text: @H200-dark;
 
   // Checkbox
-  --rs-checkbox-icon: @B800;
-  --rs-checkbox-border: @B400;
-  --rs-checkbox-checked-bg: @H500;
-  --rs-checkbox-disabled-bg: @B500;
+  --rs-checkbox-icon: @B800-dark;
+  --rs-checkbox-border: @B400-dark;
+  --rs-checkbox-checked-bg: @H500-dark;
+  --rs-checkbox-disabled-bg: @B500-dark;
 
   // Radio
-  --rs-radio-marker: @B800;
-  --rs-radio-border: @B400;
-  --rs-radio-checked-bg: @H500;
-  --rs-radio-disabled-bg: @B500;
+  --rs-radio-marker: @B800-dark;
+  --rs-radio-border: @B400-dark;
+  --rs-radio-checked-bg: @H500-dark;
+  --rs-radio-disabled-bg: @B500-dark;
 
   // Rate
-  --rs-rate-symbol: @B600;
+  --rs-rate-symbol: @B600-dark;
   --rs-rate-symbol-checked: @yellow-500;
 
   // Toggle
-  --rs-toggle-bg: @B400;
+  --rs-toggle-bg: @B400-dark;
   --rs-toggle-thumb: #fff;
-  --rs-toggle-hover-bg: @B300;
-  --rs-toggle-disabled-bg: @B600;
-  --rs-toggle-disabled-thumb: @B500;
-  --rs-toggle-checked-bg: @H700;
+  --rs-toggle-hover-bg: @B300-dark;
+  --rs-toggle-disabled-bg: @B600-dark;
+  --rs-toggle-disabled-thumb: @B500-dark;
+  --rs-toggle-checked-bg: @H700-dark;
   --rs-toggle-checked-thumb: #fff;
-  --rs-toggle-checked-hover-bg: @H600;
-  --rs-toggle-checked-disabled-bg: @H900;
-  --rs-toggle-checked-disabled-thumb: @B300;
+  --rs-toggle-checked-hover-bg: @H600-dark;
+  --rs-toggle-checked-disabled-bg: @H900-dark;
+  --rs-toggle-checked-disabled-thumb: @B300-dark;
 
   // Slider
-  --rs-slider-bar: @B600;
-  --rs-slider-hover-bar: @B600;
-  --rs-slider-thumb-border: @H500;
-  --rs-slider-thumb-bg: @B700;
-  --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25);
-  --rs-slider-progress: @H500;
+  --rs-slider-bar: @B600-dark;
+  --rs-slider-hover-bar: @B600-dark;
+  --rs-slider-thumb-border: @H500-dark;
+  --rs-slider-thumb-bg: @B700-dark;
+  --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-dark, 25);
+  --rs-slider-progress: @H500-dark;
 
   // Uploader
-  --rs-uploader-item-bg: @B300;
-  --rs-uploader-item-hover-bg: @B600;
-  --rs-uploader-overlay-bg: fade(@B600, 80);
-  --rs-uploader-dnd-bg: @B700;
-  --rs-uploader-dnd-border: @B200;
-  --rs-uploader-dnd-hover-border: @H500;
+  --rs-uploader-item-bg: @B300-dark;
+  --rs-uploader-item-hover-bg: @B600-dark;
+  --rs-uploader-overlay-bg: fade(@B600-dark, 80);
+  --rs-uploader-dnd-bg: @B700-dark;
+  --rs-uploader-dnd-border: @B200-dark;
+  --rs-uploader-dnd-hover-border: @H500-dark;
 
   // Avatar
-  --rs-avatar-bg: @B400;
-  --rs-avatar-text: @B000;
+  --rs-avatar-bg: @B400-dark;
+  --rs-avatar-text: @B000-dark;
 
   // Badge
   --rs-badge-bg: @red;
-  --rs-badge-text: @B000;
+  --rs-badge-text: @B000-dark;
 
   // Tag
-  --rs-tag-bg: @B600;
+  --rs-tag-bg: @B600-dark;
   --rs-tag-close: @red;
 
   // Carousel
-  --rs-carousel-bg: @B600;
-  --rs-carousel-indicator: fade(@B000, 40);
-  --rs-carousel-indicator-hover: @B000;
-  --rs-carousel-indicator-active: @H500;
+  --rs-carousel-bg: @B600-dark;
+  --rs-carousel-indicator: fade(@B000-dark, 40);
+  --rs-carousel-indicator-hover: @B000-dark;
+  --rs-carousel-indicator-active: @H500-dark;
 
   // 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: @B900;
-  --rs-list-border: @B700;
-  --rs-list-hover-bg: @B600;
-  --rs-list-placeholder-bg: fade(@H900, 20%);
-  --rs-list-placeholder-border: @H500;
+  --rs-list-bg: @B900-dark;
+  --rs-list-border: @B700-dark;
+  --rs-list-hover-bg: @B600-dark;
+  --rs-list-placeholder-bg: fade(@H900-dark, 20%);
+  --rs-list-placeholder-border: @H500-dark;
 
   // Timeline
-  --rs-timeline-indicator-bg: @B500;
-  --rs-timeline-indicator-active-bg: @H500;
+  --rs-timeline-indicator-bg: @B500-dark;
+  --rs-timeline-indicator-active-bg: @H500-dark;
 
   // Table
   --rs-table-shadow: rgba(9, 9, 9, 0.99);
-  --rs-table-sort: @H500;
-  --rs-table-resize: @H500;
-  --rs-table-scrollbar-track: @B700;
-  --rs-table-scrollbar-thumb: @B200;
-  --rs-table-scrollbar-thumb-active: @B100;
-  --rs-table-scrollbar-vertical-track: @B700;
+  --rs-table-sort: @H500-dark;
+  --rs-table-resize: @H500-dark;
+  --rs-table-scrollbar-track: @B700-dark;
+  --rs-table-scrollbar-thumb: @B200-dark;
+  --rs-table-scrollbar-thumb-active: @B100-dark;
+  --rs-table-scrollbar-vertical-track: @B700-dark;
 
   // Drawer
   --rs-drawer-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
@@ -290,15 +329,15 @@
   --rs-form-errormessage-border: @red;
 
   // Picker
-  --rs-picker-value: @H500;
-  --rs-picker-count-bg: @H700;
+  --rs-picker-value: @H500-dark;
+  --rs-picker-count-bg: @H700-dark;
   --rs-picker-count-text: #fff;
 
   // Calendar
-  --rs-calendar-today-bg: @H700;
+  --rs-calendar-today-bg: @H700-dark;
   --rs-calendar-today-text: #fff;
-  --rs-calendar-range-bg: fade(@H900, 50%);
-  --rs-calendar-time-unit-bg: @B600;
+  --rs-calendar-range-bg: fade(@H900-dark, 50%);
+  --rs-calendar-time-unit-bg: @B600-dark;
   --rs-calendar-date-selected-text: #fff;
 
   // Popover
diff --git a/src/styles/color-modes/high-contrast.less b/src/styles/color-modes/high-contrast.less
index 96dae61f8..a9041a0d2 100644
--- a/src/styles/color-modes/high-contrast.less
+++ b/src/styles/color-modes/high-contrast.less
@@ -1,86 +1,125 @@
-@import '../colors/high-contrast';
-
 // see https://rsuitejs.com/design/dark
 & {
-  @import (multiple) 'common';
+  // Gray levels
+  --rs-gray-50: @B050-high-contrast;
+  --rs-gray-100: @B100-high-contrast;
+  --rs-gray-200: @B200-high-contrast;
+  --rs-gray-300: @B300-high-contrast;
+  --rs-gray-400: @B400-high-contrast;
+  --rs-gray-500: @B500-high-contrast;
+  --rs-gray-600: @B600-high-contrast;
+  --rs-gray-700: @B700-high-contrast;
+  --rs-gray-800: @B800-high-contrast;
+  --rs-gray-900: @B900-high-contrast;
+
+  // Highlight levels
+  --rs-primary-50: @H050-high-contrast;
+  --rs-primary-100: @H100-high-contrast;
+  --rs-primary-200: @H200-high-contrast;
+  --rs-primary-300: @H300-high-contrast;
+  --rs-primary-400: @H400-high-contrast;
+  --rs-primary-500: @H500-high-contrast;
+  --rs-primary-600: @H600-high-contrast;
+  --rs-primary-700: @H700-high-contrast;
+  --rs-primary-800: @H800-high-contrast;
+  --rs-primary-900: @H900-high-contrast;
+
+  // Spectrum levels
+  each(@spectrum, .(@color-name) {
+      @color: @@color-name;
+      @color-name-50: ~'@{color-name}-50-high-contrast';
+      --rs-@{color-name}-50: @@color-name-50;
+  
+      each(range(9), {
+        @level: @{index}00;
+        @color-name-level: ~'@{color-name}-@{level}-high-contrast';
+        --rs-@{color-name}-@{level}: @@color-name-level;
+      });
+    });
+
+  // Stateful colors
+  --rs-state-success: @green-high-contrast;
+  --rs-state-info: @blue-high-contrast;
+  --rs-state-warning: @yellow-high-contrast;
+  --rs-state-error: @red-high-contrast;
 
   // Reset
-  --rs-body: @B900;
+  --rs-body: @B900-high-contrast;
 
   // Misc
-  --rs-text-link: @H500;
-  --rs-text-link-hover: @H400;
-  --rs-text-link-active: @H300;
-  --rs-text-primary: @B050;
-  --rs-text-secondary: @B200;
-  --rs-text-tertiary: @B300;
-  --rs-text-heading: @B000;
-  --rs-text-inverse: @B800;
-  --rs-text-heading-inverse: @B900;
-  --rs-text-active: @H500;
-  --rs-text-disabled: @B500;
-  --rs-border-primary: @B100;
-  --rs-border-secondary: @B700;
-  --rs-bg-card: @B800;
-  --rs-bg-overlay: @B800;
-  --rs-bg-well: @B900;
-  --rs-bg-active: @H500;
-  --rs-bg-backdrop: fade(@B900, 80%);
-  --rs-state-hover-bg: @B600;
-  --rs-color-focus-ring: @B000;
-  --rs-state-focus-shadow: 0 0 0 3px @B900, 0 0 0 5px @B000;
-  --rs-state-focus-shadow-slim: 0 0 0 2px @B000;
-  --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+  --rs-text-link: @H500-high-contrast;
+  --rs-text-link-hover: @H400-high-contrast;
+  --rs-text-link-active: @H300-high-contrast;
+  --rs-text-primary: @B050-high-contrast;
+  --rs-text-secondary: @B200-high-contrast;
+  --rs-text-tertiary: @B300-high-contrast;
+  --rs-text-heading: @B000-high-contrast;
+  --rs-text-inverse: @B800-high-contrast;
+  --rs-text-heading-inverse: @B900-high-contrast;
+  --rs-text-active: @H500-high-contrast;
+  --rs-text-disabled: @B500-high-contrast;
+  --rs-border-primary: @B100-high-contrast;
+  --rs-border-secondary: @B700-high-contrast;
+  --rs-bg-card: @B800-high-contrast;
+  --rs-bg-overlay: @B800-high-contrast;
+  --rs-bg-well: @B900-high-contrast;
+  --rs-bg-active: @H500-high-contrast;
+  --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
+  --rs-state-hover-bg: @B600-high-contrast;
+  --rs-color-focus-ring: @B000-high-contrast;
+  --rs-state-focus-shadow: 0 0 0 3px @B900-high-contrast, 0 0 0 5px @B000-high-contrast;
+  --rs-state-focus-shadow-slim: 0 0 0 2px @B000-high-contrast;
+  --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
   --rs-shadow-overlay: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
 
   // Button
   --rs-btn-default-bg: transparent;
-  --rs-btn-default-text: @H500;
-  --rs-btn-default-border: 1px solid @H500;
+  --rs-btn-default-text: @H500-high-contrast;
+  --rs-btn-default-border: 1px solid @H500-high-contrast;
   --rs-btn-default-hover-bg: transparent;
-  --rs-btn-default-hover-text: @H400;
+  --rs-btn-default-hover-text: @H400-high-contrast;
   --rs-btn-default-active-bg: transparent;
-  --rs-btn-default-active-text: @H200;
+  --rs-btn-default-active-text: @H200-high-contrast;
   --rs-btn-default-disabled-bg: transparent;
-  --rs-btn-default-disabled-text: @H500;
-  --rs-btn-primary-bg: @H500;
-  --rs-btn-primary-text: @B900;
-  --rs-btn-primary-hover-bg: @H400;
-  --rs-btn-primary-active-bg: @H200;
-  --rs-btn-subtle-text: @H500;
+  --rs-btn-default-disabled-text: @H500-high-contrast;
+  --rs-btn-primary-bg: @H500-high-contrast;
+  --rs-btn-primary-text: @B900-high-contrast;
+  --rs-btn-primary-hover-bg: @H400-high-contrast;
+  --rs-btn-primary-active-bg: @H200-high-contrast;
+  --rs-btn-subtle-text: @H500-high-contrast;
   --rs-btn-subtle-hover-bg: transparent;
-  --rs-btn-subtle-hover-text: @H400;
+  --rs-btn-subtle-hover-text: @H400-high-contrast;
   --rs-btn-subtle-active-bg: transparent;
-  --rs-btn-subtle-active-text: @H200;
-  --rs-btn-subtle-disabled-text: @B500;
-  --rs-btn-ghost-border: @H500;
-  --rs-btn-ghost-text: @H500;
-  --rs-btn-ghost-hover-border: @H400;
-  --rs-btn-ghost-hover-text: @H400;
-  --rs-btn-ghost-active-border: @H200;
-  --rs-btn-ghost-active-text: @H200;
-  --rs-btn-link-text: @H500;
-  --rs-btn-link-hover-text: @H400;
-  --rs-btn-link-active-text: @H200;
+  --rs-btn-subtle-active-text: @H200-high-contrast;
+  --rs-btn-subtle-disabled-text: @B500-high-contrast;
+  --rs-btn-ghost-border: @H500-high-contrast;
+  --rs-btn-ghost-text: @H500-high-contrast;
+  --rs-btn-ghost-hover-border: @H400-high-contrast;
+  --rs-btn-ghost-hover-text: @H400-high-contrast;
+  --rs-btn-ghost-active-border: @H200-high-contrast;
+  --rs-btn-ghost-active-text: @H200-high-contrast;
+  --rs-btn-link-text: @H500-high-contrast;
+  --rs-btn-link-hover-text: @H400-high-contrast;
+  --rs-btn-link-active-text: @H200-high-contrast;
 
   // Icon Button
   --rs-iconbtn-addon: transparent;
   --rs-iconbtn-activated-addon: transparent;
   --rs-iconbtn-pressed-addon: transparent;
-  --rs-iconbtn-primary-addon: @H400;
-  --rs-iconbtn-primary-activated-addon: @H300;
-  --rs-iconbtn-primary-pressed-addon: @H100;
+  --rs-iconbtn-primary-addon: @H400-high-contrast;
+  --rs-iconbtn-primary-activated-addon: @H300-high-contrast;
+  --rs-iconbtn-primary-pressed-addon: @H100-high-contrast;
 
   // Divider
-  --rs-divider-border: @B600;
+  --rs-divider-border: @B600-high-contrast;
 
   // Loader
-  --rs-loader-ring: fade(@B050, 30);
-  --rs-loader-rotor: @B000;
-  --rs-loader-backdrop: fade(@B900, 83%);
-  --rs-loader-ring-inverse: fade(@B050, 80);
-  --rs-loader-rotor-inverse: @B500;
-  --rs-loader-backdrop-inverse: fade(@B000, 90);
+  --rs-loader-ring: fade(@B050-high-contrast, 30);
+  --rs-loader-rotor: @B000-high-contrast;
+  --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
+  --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
+  --rs-loader-rotor-inverse: @B500-high-contrast;
+  --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
 
   // Message
   --rs-message-success-header: #fff;
@@ -105,200 +144,200 @@
   --rs-message-error-border: @red-300;
 
   // Tooltip
-  --rs-tooltip-bg: @B800;
-  --rs-tooltip-text: @B000;
+  --rs-tooltip-bg: @B800-high-contrast;
+  --rs-tooltip-text: @B000-high-contrast;
 
   // Progress
-  --rs-progress-bg: @B700;
-  --rs-progress-bar: @H500;
+  --rs-progress-bg: @B700-high-contrast;
+  --rs-progress-bar: @H500-high-contrast;
   --rs-progress-bar-success: @green;
   --rs-progress-bar-fail: @red;
 
   // Placeholder
-  --rs-placeholder: @B600;
-  --rs-placeholder-active: lighten(@B600, 5%);
+  --rs-placeholder: @B600-high-contrast;
+  --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
 
   // Dropdown
-  --rs-dropdown-divider: @B600;
-  --rs-dropdown-item-bg-hover: @B600;
-  --rs-dropdown-item-bg-active: fade(@H900, 20);
-  --rs-dropdown-item-text-active: @H500;
-  --rs-dropdown-header-text: @B500;
+  --rs-dropdown-divider: @B600-high-contrast;
+  --rs-dropdown-item-bg-hover: @B600-high-contrast;
+  --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
+  --rs-dropdown-item-text-active: @H500-high-contrast;
+  --rs-dropdown-header-text: @B500-high-contrast;
   --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
   --rs-menuitem-active-bg: transparent;
-  --rs-menuitem-active-text: @H500;
+  --rs-menuitem-active-text: @H500-high-contrast;
 
   // Steps
-  --rs-steps-border: @B200;
-  --rs-steps-state-finish: @H500;
-  --rs-steps-border-state-finish: @H500;
-  --rs-steps-state-wait: @B200;
-  --rs-steps-state-process: @H700;
+  --rs-steps-border: @B200-high-contrast;
+  --rs-steps-state-finish: @H500-high-contrast;
+  --rs-steps-border-state-finish: @H500-high-contrast;
+  --rs-steps-state-wait: @B200-high-contrast;
+  --rs-steps-state-process: @H700-high-contrast;
   --rs-steps-state-error: @red;
   --rs-steps-border-state-error: @red;
-  --rs-steps-icon-state-process: @H500;
+  --rs-steps-icon-state-process: @H500-high-contrast;
   --rs-steps-icon-state-error: @red;
 
   // Navs
-  --rs-navs-text: @B200;
-  --rs-navs-text-hover: @H500;
+  --rs-navs-text: @B200-high-contrast;
+  --rs-navs-text-hover: @H500-high-contrast;
   --rs-navs-bg-hover: transparent;
-  --rs-navs-text-active: @H500;
-  --rs-navs-bg-active: @B400;
-  --rs-navs-tab-border: @B600;
-  --rs-navs-subtle-border: @B600;
-  --rs-navs-selected: @H500;
+  --rs-navs-text-active: @H500-high-contrast;
+  --rs-navs-bg-active: @B400-high-contrast;
+  --rs-navs-tab-border: @B600-high-contrast;
+  --rs-navs-subtle-border: @B600-high-contrast;
+  --rs-navs-selected: @H500-high-contrast;
 
   // Navbar
-  --rs-navbar-default-bg: @B800;
-  --rs-navbar-default-text: @B050;
-  --rs-navbar-default-selected-text: @H500;
+  --rs-navbar-default-bg: @B800-high-contrast;
+  --rs-navbar-default-text: @B050-high-contrast;
+  --rs-navbar-default-selected-text: @H500-high-contrast;
   --rs-navbar-default-hover-bg: transparent;
-  --rs-navbar-default-hover-text: @H500;
-  --rs-navbar-inverse-bg: @B800;
-  --rs-navbar-inverse-text: @B050;
+  --rs-navbar-default-hover-text: @H500-high-contrast;
+  --rs-navbar-inverse-bg: @B800-high-contrast;
+  --rs-navbar-inverse-text: @B050-high-contrast;
   --rs-navbar-inverse-selected-bg: transparent;
-  --rs-navbar-inverse-selected-text: @H500;
+  --rs-navbar-inverse-selected-text: @H500-high-contrast;
   --rs-navbar-inverse-hover-bg: transparent;
-  --rs-navbar-inverse-hover-text: @H500;
-  --rs-navbar-subtle-bg: @B800;
-  --rs-navbar-subtle-text: @B050;
-  --rs-navbar-subtle-selected-text: @H500;
+  --rs-navbar-inverse-hover-text: @H500-high-contrast;
+  --rs-navbar-subtle-bg: @B800-high-contrast;
+  --rs-navbar-subtle-text: @B050-high-contrast;
+  --rs-navbar-subtle-selected-text: @H500-high-contrast;
   --rs-navbar-subtle-hover-bg: transparent;
-  --rs-navbar-subtle-hover-text: @H500;
+  --rs-navbar-subtle-hover-text: @H500-high-contrast;
 
   // Sidenav
-  --rs-sidenav-default-bg: @B800;
-  --rs-sidenav-default-text: @B050;
-  --rs-sidenav-default-selected-text: @H500;
+  --rs-sidenav-default-bg: @B800-high-contrast;
+  --rs-sidenav-default-text: @B050-high-contrast;
+  --rs-sidenav-default-selected-text: @H500-high-contrast;
   --rs-sidenav-default-hover-bg: transparent;
-  --rs-sidenav-default-hover-text: @H500;
-  --rs-sidenav-default-footer-border: @B050;
-  --rs-sidenav-inverse-bg: @B800;
-  --rs-sidenav-inverse-text: @B050;
+  --rs-sidenav-default-hover-text: @H500-high-contrast;
+  --rs-sidenav-default-footer-border: @B050-high-contrast;
+  --rs-sidenav-inverse-bg: @B800-high-contrast;
+  --rs-sidenav-inverse-text: @B050-high-contrast;
   --rs-sidenav-inverse-selected-bg: transparent;
-  --rs-sidenav-inverse-selected-text: @H500;
+  --rs-sidenav-inverse-selected-text: @H500-high-contrast;
   --rs-sidenav-inverse-hover-bg: transparent;
-  --rs-sidenav-inverse-footer-border: @B050;
-  --rs-sidenav-subtle-bg: @B800;
-  --rs-sidenav-subtle-text: @B050;
-  --rs-sidenav-subtle-selected-text: @H500;
+  --rs-sidenav-inverse-footer-border: @B050-high-contrast;
+  --rs-sidenav-subtle-bg: @B800-high-contrast;
+  --rs-sidenav-subtle-text: @B050-high-contrast;
+  --rs-sidenav-subtle-selected-text: @H500-high-contrast;
   --rs-sidenav-subtle-hover-bg: transparent;
-  --rs-sidenav-subtle-hover-text: @H500;
-  --rs-sidenav-subtle-footer-border: @B050;
+  --rs-sidenav-subtle-hover-text: @H500-high-contrast;
+  --rs-sidenav-subtle-footer-border: @B050-high-contrast;
 
   // Input
-  --rs-input-bg: @B800;
-  --rs-input-focus-border: @H500;
-  --rs-input-disabled-bg: @B700;
+  --rs-input-bg: @B800-high-contrast;
+  --rs-input-focus-border: @H500-high-contrast;
+  --rs-input-disabled-bg: @B700-high-contrast;
 
   // ARIA Listboxes
   --rs-listbox-option-hover-bg: transparent;
-  --rs-listbox-option-hover-text: @H500;
-  --rs-listbox-option-selected-text: @H500;
+  --rs-listbox-option-hover-text: @H500-high-contrast;
+  --rs-listbox-option-selected-text: @H500-high-contrast;
   --rs-listbox-option-selected-bg: transparent;
-  --rs-listbox-option-disabled-text: @B500;
-  --rs-listbox-option-disabled-selected-text: @H200;
+  --rs-listbox-option-disabled-text: @B500-high-contrast;
+  --rs-listbox-option-disabled-selected-text: @H200-high-contrast;
 
   // Checkbox
-  --rs-checkbox-icon: @B800;
-  --rs-checkbox-border: @B100;
-  --rs-checkbox-checked-bg: @H500;
-  --rs-checkbox-disabled-bg: @B500;
+  --rs-checkbox-icon: @B800-high-contrast;
+  --rs-checkbox-border: @B100-high-contrast;
+  --rs-checkbox-checked-bg: @H500-high-contrast;
+  --rs-checkbox-disabled-bg: @B500-high-contrast;
 
   // Radio
-  --rs-radio-marker: @B800;
-  --rs-radio-border: @B100;
-  --rs-radio-checked-bg: @H500;
-  --rs-radio-disabled-bg: @B500;
+  --rs-radio-marker: @B800-high-contrast;
+  --rs-radio-border: @B100-high-contrast;
+  --rs-radio-checked-bg: @H500-high-contrast;
+  --rs-radio-disabled-bg: @B500-high-contrast;
 
   // Rate
-  --rs-rate-symbol: @B100;
-  --rs-rate-symbol-checked: @H500;
+  --rs-rate-symbol: @B100-high-contrast;
+  --rs-rate-symbol-checked: @H500-high-contrast;
 
   // Toggle
-  --rs-toggle-bg: @B800;
-  --rs-toggle-thumb: @B100;
-  --rs-toggle-hover-bg: @B800;
-  --rs-toggle-disabled-bg: @B800;
-  --rs-toggle-disabled-thumb: @B300;
-  --rs-toggle-checked-bg: @H500;
-  --rs-toggle-checked-thumb: @B800;
-  --rs-toggle-checked-hover-bg: @H400;
-  --rs-toggle-checked-disabled-bg: @H900;
-  --rs-toggle-checked-disabled-thumb: @B800;
+  --rs-toggle-bg: @B800-high-contrast;
+  --rs-toggle-thumb: @B100-high-contrast;
+  --rs-toggle-hover-bg: @B800-high-contrast;
+  --rs-toggle-disabled-bg: @B800-high-contrast;
+  --rs-toggle-disabled-thumb: @B300-high-contrast;
+  --rs-toggle-checked-bg: @H500-high-contrast;
+  --rs-toggle-checked-thumb: @B800-high-contrast;
+  --rs-toggle-checked-hover-bg: @H400-high-contrast;
+  --rs-toggle-checked-disabled-bg: @H900-high-contrast;
+  --rs-toggle-checked-disabled-thumb: @B800-high-contrast;
 
   // Slider
-  --rs-slider-bar: @B600;
-  --rs-slider-hover-bar: @B600;
-  --rs-slider-thumb-border: @H500;
-  --rs-slider-thumb-bg: @B700;
-  --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25);
-  --rs-slider-progress: @H500;
+  --rs-slider-bar: @B600-high-contrast;
+  --rs-slider-hover-bar: @B600-high-contrast;
+  --rs-slider-thumb-border: @H500-high-contrast;
+  --rs-slider-thumb-bg: @B700-high-contrast;
+  --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
+  --rs-slider-progress: @H500-high-contrast;
 
   // Uploader
-  --rs-uploader-item-bg: @B300;
-  --rs-uploader-item-hover-bg: @B800;
-  --rs-uploader-item-hover-text: @H500;
-  --rs-uploader-overlay-bg: fade(@B600, 80);
-  --rs-uploader-dnd-bg: @B700;
-  --rs-uploader-dnd-border: @B200;
-  --rs-uploader-dnd-hover-border: @H500;
+  --rs-uploader-item-bg: @B300-high-contrast;
+  --rs-uploader-item-hover-bg: @B800-high-contrast;
+  --rs-uploader-item-hover-text: @H500-high-contrast;
+  --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
+  --rs-uploader-dnd-bg: @B700-high-contrast;
+  --rs-uploader-dnd-border: @B200-high-contrast;
+  --rs-uploader-dnd-hover-border: @H500-high-contrast;
 
   // Avatar
-  --rs-avatar-bg: @B400;
-  --rs-avatar-text: @B000;
+  --rs-avatar-bg: @B400-high-contrast;
+  --rs-avatar-text: @B000-high-contrast;
 
   // Badge
   --rs-badge-bg: @red-500;
-  --rs-badge-text: @B000;
+  --rs-badge-text: @B000-high-contrast;
 
   // Tag
-  --rs-tag-bg: @B600;
+  --rs-tag-bg: @B600-high-contrast;
   --rs-tag-close: @red;
 
   // Carousel
-  --rs-carousel-bg: @B600;
-  --rs-carousel-indicator: fade(@B000, 40);
-  --rs-carousel-indicator-hover: @B000;
-  --rs-carousel-indicator-active: @H500;
+  --rs-carousel-bg: @B600-high-contrast;
+  --rs-carousel-indicator: fade(@B000-high-contrast, 40);
+  --rs-carousel-indicator-hover: @B000-high-contrast;
+  --rs-carousel-indicator-active: @H500-high-contrast;
 
   // 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: @B050;
-  --rs-pagination-item-current-text: @H500;
+  --rs-pagination-item-text: @B050-high-contrast;
+  --rs-pagination-item-current-text: @H500-high-contrast;
 
   // List
   --rs-list-bg: transparent;
-  --rs-list-border: @B700;
-  --rs-list-hover-bg: @B600;
-  --rs-list-placeholder-bg: fade(@H900, 20%);
-  --rs-list-placeholder-border: @H500;
+  --rs-list-border: @B700-high-contrast;
+  --rs-list-hover-bg: @B600-high-contrast;
+  --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
+  --rs-list-placeholder-border: @H500-high-contrast;
 
   // Timeline
-  --rs-timeline-indicator-bg: @B500;
-  --rs-timeline-indicator-active-bg: @H500;
+  --rs-timeline-indicator-bg: @B500-high-contrast;
+  --rs-timeline-indicator-active-bg: @H500-high-contrast;
 
   // Table
   --rs-table-shadow: rgba(9, 9, 9, 0.99);
-  --rs-table-sort: @H500;
-  --rs-table-resize: @H500;
-  --rs-table-scrollbar-track: @B700;
-  --rs-table-scrollbar-thumb: @B200;
-  --rs-table-scrollbar-thumb-active: @B100;
-  --rs-table-scrollbar-vertical-track: @B700;
+  --rs-table-sort: @H500-high-contrast;
+  --rs-table-resize: @H500-high-contrast;
+  --rs-table-scrollbar-track: @B700-high-contrast;
+  --rs-table-scrollbar-thumb: @B200-high-contrast;
+  --rs-table-scrollbar-thumb-active: @B100-high-contrast;
+  --rs-table-scrollbar-vertical-track: @B700-high-contrast;
 
   // Drawer
-  --rs-drawer-bg: @B700;
+  --rs-drawer-bg: @B700-high-contrast;
   --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 @B100;
+  --rs-modal-border: 1px solid @B100-high-contrast;
 
   // Form
   --rs-form-errormessage-text: #fff;
@@ -306,16 +345,16 @@
   --rs-form-errormessage-border: @red-500;
 
   // Picker
-  --rs-picker-value: @H500;
-  --rs-picker-count-bg: @H500;
-  --rs-picker-count-text: @B900;
+  --rs-picker-value: @H500-high-contrast;
+  --rs-picker-count-bg: @H500-high-contrast;
+  --rs-picker-count-text: @B900-high-contrast;
 
   // Calendar
-  --rs-calendar-today-bg: @H500;
-  --rs-calendar-today-text: @B900;
-  --rs-calendar-range-bg: fade(@H900, 50%);
-  --rs-calendar-time-unit-bg: @B900;
-  --rs-calendar-date-selected-text: @B900;
+  --rs-calendar-today-bg: @H500-high-contrast;
+  --rs-calendar-today-text: @B900-high-contrast;
+  --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
+  --rs-calendar-time-unit-bg: @B900-high-contrast;
+  --rs-calendar-date-selected-text: @B900-high-contrast;
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
diff --git a/src/styles/color-modes/light.less b/src/styles/color-modes/light.less
index 565981805..eff479a8f 100644
--- a/src/styles/color-modes/light.less
+++ b/src/styles/color-modes/light.less
@@ -1,8 +1,47 @@
-@import '../colors/light';
-
 // see https://rsuitejs.com/design/default
 & {
-  @import (multiple) 'common';
+  // 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;
 
   // Reset
   --rs-body: @B000;
diff --git a/src/styles/colors/dark.less b/src/styles/colors/dark.less
index 35bc99f3a..75e5ed46b 100644
--- a/src/styles/colors/dark.less
+++ b/src/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);
diff --git a/src/styles/colors/high-contrast.less b/src/styles/colors/high-contrast.less
index fa7400f83..f33883b87 100644
--- a/src/styles/colors/high-contrast.less
+++ b/src/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);
diff --git a/src/styles/variables.less b/src/styles/variables.less
index 04f11c8a9..fec50062b 100644
--- a/src/styles/variables.less
+++ b/src/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
 
diff --git a/stylelint.config.js b/stylelint.config.js
index b5e835e8d..ed81362da 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -27,7 +27,7 @@ module.exports = {
     'function-no-unknown': [
       true,
       {
-        ignoreFunctions: ['floor']
+        ignoreFunctions: ['fade', 'floor', 'lighten']
       }
     ],