semantic color variables names for config provider

src/styles/theme/themeConfig.ts

@@ -3,6 +3,7 @@ import { ThemeConfig } from "antd";
 const WHITE = "#ffffff";
 const DARK = "#141219";
 const DARK_TWO = "#1e1b25";
+const DARK_THREE = "#1b181f";
 const DARK_FOUR = "#2f2a3c";
 const WHITE_SIX = "#e7e7e7";
 const WHITE_THREE = "#d8d8d8";
@@ -20,116 +21,179 @@ const TRANSPARENT_WHITE = "rgba(255, 255, 255, 0.65)";
 const TRANSPARENT = "transparent";
 const OFF_WHITE = "#f7f7f7";
 const DEFAULT_GRAY = "#d9d9d9";
-const DARK_THREE = "#1b181f";
+
+// Semantic Color Variables
+const COLOR_PRIMARY = BABY_PURPLE;
+const COLOR_BG_BASE = WHITE_SIX;
+const COLOR_BG_CONTAINER = OFF_WHITE;
+const COLOR_BG_LAYOUT = WHITE_SIX;
+const COLOR_TEXT = GRAYISH_BROWN;
+const COLOR_SUCCESS = HIGHLIGHT_GREEN;
+const COLOR_LINK = BLUE;
+
+const FORM_LABEL_COLOR = DARK;
+
+const INPUT_PLACEHOLDER_COLOR = MEDIUM_DARK_GRAY;
+const INPUT_BORDER_COLOR = MEDIUM_DARK_GRAY;
+const INPUT_BG_COLOR = OFF_WHITE;
+const INPUT_HOVER_COLOR = BABY_PURPLE;
+
+const BUTTON_PRIMARY_COLOR = BABY_PURPLE;
+const BUTTON_DEFAULT_BG = TRANSPARENT;
+const BUTTON_DEFAULT_COLOR = DEFAULT_GRAY;
+const BUTTON_DEFAULT_BORDER = DARK_TWO;
+
+const RADIO_PRIMARY_COLOR = WHITE;
+const RADIO_TEXT_COLOR = DARK;
+
+const LAYOUT_SIDER_BG = DARK;
+const LAYOUT_TRIGGER_BG = DARK;
+const LAYOUT_TRIGGER_COLOR = BABY_PURPLE;
+const LAYOUT_FOOTER_BG = DARK_THREE;
+const LAYOUT_LIGHT_TRIGGER_COLOR = GRAYISH_BROWN;
+
+const MENU_DARK_ITEM_COLOR = TRANSPARENT_WHITE;
+const MENU_DARK_SELECTED_BG = BABY_PURPLE;
+const MENU_DARK_SELECTED_COLOR = WHITE;
+
+const MODAL_HEADER_BG = LIGHT_PURPLE;
+const MODAL_CONTENT_BG = LIGHT_PURPLE;
+const MODAL_TITLE_COLOR = DARK;
+
+const CHECKBOX_BORDER_COLOR = MEDIUM_DARK_GRAY;
+const CHECKBOX_PRIMARY_COLOR = WHITE_SIX;
+const CHECKBOX_BG_COLOR = WHITE_SIX;
+const CHECKBOX_MARK_COLOR = DARK;
+
+const TABS_CARD_BG = LIGHT_PURPLE;
+const TABS_INK_BAR_COLOR = DARK_FOUR;
+const TABS_ITEM_HOVER_COLOR = DARK_FOUR;
+const TABS_ITEM_ACTIVE_COLOR = DARK_FOUR;
+const TABS_ITEM_SELECTED_COLOR = DARK_FOUR;
+
+const POPOVER_BG_COLOR = DARK_PURPLE;
+const POPOVER_TEXT_COLOR = WHITE;
+
+const DROPDOWN_BG_COLOR = DARK_PURPLE;
+const DROPDOWN_TEXT_COLOR = TRANSPARENT_WHITE;
+
+const TAG_DEFAULT_BG = ALLEN_PURPLE;
+const TAG_DEFAULT_COLOR = WHITE_SIX;
+
+const SLIDER_RAIL_BG = BACKGROUND_COLOR_LIGHT;
+const SLIDER_RAIL_HOVER_BG = WARM_GRAY;
+const SLIDER_TRACK_BG = WHITE_THREE;
+const SLIDER_HANDLE_COLOR = WHITE_THREE;
+const SLIDER_DOT_BORDER_COLOR = WHITE_THREE;
 
 export const simulariumTheme: ThemeConfig = {
     token: {
         fontFamily:
             "'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        colorPrimary: BABY_PURPLE,
-        colorBgBase: WHITE_SIX,
-        colorBgContainer: OFF_WHITE,
-        colorBgLayout: WHITE_SIX,
-        colorText: GRAYISH_BROWN,
-        colorSuccess: HIGHLIGHT_GREEN,
-        colorLink: BLUE,
+        colorPrimary: COLOR_PRIMARY,
+        colorBgBase: COLOR_BG_BASE,
+        colorBgContainer: COLOR_BG_CONTAINER,
+        colorBgLayout: COLOR_BG_LAYOUT,
+        colorText: COLOR_TEXT,
+        colorSuccess: COLOR_SUCCESS,
+        colorLink: COLOR_LINK,
         borderRadius: 0,
         controlHeight: 32,
         controlHeightLG: 40,
         controlHeightSM: 24,
     },
     components: {
         Form: {
-            labelColor: DARK,
+            labelColor: FORM_LABEL_COLOR,
             verticalLabelPadding: "0 0 4px 0",
             labelFontSize: 16,
         },
         Input: {
-            colorTextPlaceholder: MEDIUM_DARK_GRAY,
-            colorBorder: MEDIUM_DARK_GRAY,
-            colorBgContainer: OFF_WHITE,
-            colorPrimaryHover: BABY_PURPLE,
-            hoverBorderColor: BABY_PURPLE,
+            colorTextPlaceholder: INPUT_PLACEHOLDER_COLOR,
+            colorBorder: INPUT_BORDER_COLOR,
+            colorBgContainer: INPUT_BG_COLOR,
+            colorPrimaryHover: INPUT_HOVER_COLOR,
+            hoverBorderColor: INPUT_HOVER_COLOR,
         },
         Button: {
-            colorPrimary: BABY_PURPLE,
-            colorPrimaryHover: BABY_PURPLE,
+            colorPrimary: BUTTON_PRIMARY_COLOR,
+            colorPrimaryHover: BUTTON_PRIMARY_COLOR,
             algorithm: true,
-            defaultBg: TRANSPARENT,
-            defaultHoverBg: TRANSPARENT,
-            defaultActiveBg: TRANSPARENT,
-            defaultColor: DEFAULT_GRAY,
-            defaultBorderColor: DARK_TWO,
+            defaultBg: BUTTON_DEFAULT_BG,
+            defaultHoverBg: BUTTON_DEFAULT_BG,
+            defaultActiveBg: BUTTON_DEFAULT_BG,
+            defaultColor: BUTTON_DEFAULT_COLOR,
+            defaultBorderColor: BUTTON_DEFAULT_BORDER,
             borderRadius: 3,
         },
         Radio: {
-            colorPrimary: WHITE,
-            colorText: DARK,
+            colorPrimary: RADIO_PRIMARY_COLOR,
+            colorText: RADIO_TEXT_COLOR,
         },
         Layout: {
-            headerHeight: 60, // todo: align. also defined in constants.css as --header-height
+            headerHeight: 60,
             headerPadding: 0,
-            siderBg: DARK,
-            triggerBg: DARK,
-            triggerColor: BABY_PURPLE,
-            footerBg: DARK_THREE,
+            siderBg: LAYOUT_SIDER_BG,
+            triggerBg: LAYOUT_TRIGGER_BG,
+            triggerColor: LAYOUT_TRIGGER_COLOR,
+            footerBg: LAYOUT_FOOTER_BG,
             zeroTriggerWidth: 30,
             zeroTriggerHeight: 100,
-            lightTriggerColor: GRAYISH_BROWN,
+            lightTriggerColor: LAYOUT_LIGHT_TRIGGER_COLOR,
         },
         Menu: {
-            darkItemColor: TRANSPARENT_WHITE,
-            darkItemSelectedBg: BABY_PURPLE,
-            darkItemSelectedColor: WHITE,
+            darkItemColor: MENU_DARK_ITEM_COLOR,
+            darkItemSelectedBg: MENU_DARK_SELECTED_BG,
+            darkItemSelectedColor: MENU_DARK_SELECTED_COLOR,
         },
         Modal: {
-            headerBg: LIGHT_PURPLE,
-            contentBg: LIGHT_PURPLE,
-            titleColor: DARK,
+            headerBg: MODAL_HEADER_BG,
+            contentBg: MODAL_CONTENT_BG,
+            titleColor: MODAL_TITLE_COLOR,
             borderRadiusLG: 6,
         },
         Checkbox: {
             borderRadius: 3,
-            colorBorder: MEDIUM_DARK_GRAY, // indeterminate border color
+            colorBorder: CHECKBOX_BORDER_COLOR,
             size: 16,
-            colorPrimary: WHITE_SIX, // background of checked box
-            colorBgContainer: WHITE_SIX, // background of checked and indeterminate box
-            colorWhite: DARK, // color of the checked checkmark WHY????
-            colorPrimaryHover: WHITE_SIX,
+            colorPrimary: CHECKBOX_PRIMARY_COLOR,
+            colorBgContainer: CHECKBOX_BG_COLOR,
+            colorWhite: CHECKBOX_MARK_COLOR,
+            colorPrimaryHover: CHECKBOX_PRIMARY_COLOR,
         },
         Tabs: {
-            cardBg: LIGHT_PURPLE,
-            inkBarColor: DARK_FOUR,
-            itemHoverColor: DARK_FOUR,
-            itemActiveColor: DARK_FOUR,
-            itemSelectedColor: DARK_FOUR,
+            cardBg: TABS_CARD_BG,
+            inkBarColor: TABS_INK_BAR_COLOR,
+            itemHoverColor: TABS_ITEM_HOVER_COLOR,
+            itemActiveColor: TABS_ITEM_ACTIVE_COLOR,
+            itemSelectedColor: TABS_ITEM_SELECTED_COLOR,
             horizontalItemMargin: "0 0 0 12",
             titleFontSizeLG: 18,
         },
         Popover: {
-            colorBgElevated: DARK_PURPLE, // colorPicker and title tooltip
-            colorText: WHITE,
+            colorBgElevated: POPOVER_BG_COLOR,
+            colorText: POPOVER_TEXT_COLOR,
             sizePopupArrow: 8,
         },
         Dropdown: {
-            colorBgElevated: DARK_PURPLE,
-            colorText: TRANSPARENT_WHITE,
+            colorBgElevated: DROPDOWN_BG_COLOR,
+            colorText: DROPDOWN_TEXT_COLOR,
         },
         Tag: {
-            defaultBg: ALLEN_PURPLE,
-            defaultColor: WHITE_SIX,
+            defaultBg: TAG_DEFAULT_BG,
+            defaultColor: TAG_DEFAULT_COLOR,
         },
         Slider: {
-            railBg: BACKGROUND_COLOR_LIGHT,
-            railHoverBg: WARM_GRAY,
-            trackBg: WHITE_THREE,
-            handleColor: WHITE_THREE,
-            trackHoverBg: WHITE_THREE,
-            handleActiveColor: WHITE_THREE,
+            railBg: SLIDER_RAIL_BG,
+            railHoverBg: SLIDER_RAIL_HOVER_BG,
+            trackBg: SLIDER_TRACK_BG,
+            handleColor: SLIDER_HANDLE_COLOR,
+            trackHoverBg: SLIDER_TRACK_BG,
+            handleActiveColor: SLIDER_HANDLE_COLOR,
             handleActiveOutlineColor: TRANSPARENT,
             handleSize: 5.5,
             handleSizeHover: 5.5,
-            dotBorderColor: WHITE_THREE,
+            dotBorderColor: SLIDER_DOT_BORDER_COLOR,
         },
     },
 };