From 2a6b563e9bfcb03499c4649823d3ecb963aca3ce Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Wed, 20 Nov 2024 15:50:17 -0800 Subject: [PATCH] semantic color variables names for config provider --- src/styles/theme/themeConfig.ts | 180 ++++++++++++++++++++++---------- 1 file changed, 122 insertions(+), 58 deletions(-) diff --git a/src/styles/theme/themeConfig.ts b/src/styles/theme/themeConfig.ts index 54450e82..182a28bc 100644 --- a/src/styles/theme/themeConfig.ts +++ b/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,19 +21,82 @@ 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, @@ -40,96 +104,96 @@ export const simulariumTheme: ThemeConfig = { }, 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, }, }, };