Skip to content

Commit

Permalink
align css var colors and theme color variables, divide light and dark…
Browse files Browse the repository at this point in the history 
… theme colors
  • Loading branch information
@interim17
interim17 committed Nov 21, 2024
1 parent 2a6b563 commit f24d313
Showing 1 changed file with 147 additions and 132 deletions.
279 changes: 147 additions & 132 deletions src/styles/theme/themeConfig.ts
View file
Original file line number Diff line number Diff line change
@@ -1,199 +1,214 @@
import { ThemeConfig } from "antd";

const WHITE = "#ffffff";
// Base colors - updates should match css vars!
const PURE_WHITE = "#ffffff";
const DARK = "#141219";
const DARK_TWO = "#1e1b25";
const DARK_THREE = "#1b181f";
const DARK_THREE = "#25222e";
const DARK_FOUR = "#2f2a3c";
const OFF_WHITE = "#f7f7f7";
const WHITE_SIX = "#e7e7e7";
const WHITE_THREE = "#d8d8d8";
const BABY_PURPLE = "#b59ff6";
const LIGHT_PURPLE = "#e7e4f2";
const DARK_PURPLE = "#3b3649";
const CHARCOAL_GRAY = "#3b3649";
const ALLEN_PURPLE = "#8d87aa";
const GRAYISH_BROWN = "#4a4a4a";
const HIGHLIGHT_GREEN = "#b2d030";
const BLUE = "#0094FF";
const MEDIUM_DARK_GRAY = "#8b8b8b";
const WARM_GRAY = "#979797";
const BACKGROUND_COLOR_LIGHT = "#302c3b";
const TRANSPARENT_WHITE = "rgba(255, 255, 255, 0.65)";
const TRANSPARENT = "transparent";
const OFF_WHITE = "#f7f7f7";
const DEFAULT_GRAY = "#d9d9d9";

// 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 = {

// Light Theme Tokens (Global defaults, Modal, Radio)
const lightTheme = {
// Global Tokens
colorPrimary: BABY_PURPLE,
colorBgBase: WHITE_SIX,
colorBgContainer: OFF_WHITE,
colorBgLayout: WHITE_SIX,
colorText: GRAYISH_BROWN,
colorLink: BLUE,

// Form
labelColor: DARK,

// Input
inputPlaceholderColor: WARM_GRAY,
inputBorderColor: WARM_GRAY,
inputBgColor: OFF_WHITE,
inputHoverColor: BABY_PURPLE,

// Radio
radioPrimaryColor: PURE_WHITE,
radioTextColor: DARK,

// Modal
modalHeaderBg: LIGHT_PURPLE,
modalContentBg: LIGHT_PURPLE,
modalTitleColor: DARK,
};

// Dark Theme Tokens
const darkTheme = {
// Layout
layoutSiderBg: DARK,
layoutTriggerBg: DARK,
layoutTriggerColor: BABY_PURPLE,
layoutFooterBg: DARK_THREE,
layoutLightTriggerColor: GRAYISH_BROWN,

// Menu
menuDarkItemColor: TRANSPARENT_WHITE,
menuDarkSelectedBg: BABY_PURPLE,
menuDarkSelectedColor: PURE_WHITE,

// Button
buttonPrimaryColor: BABY_PURPLE,
buttonDefaultBg: TRANSPARENT,
buttonDefaultColor: WHITE_THREE,
buttonDefaultBorder: DARK_TWO,

// Checkbox
checkboxBorderColor: WARM_GRAY,
checkboxPrimaryColor: WHITE_SIX,
checkboxBgColor: WHITE_SIX,
checkboxMarkColor: DARK,

// Tabs
tabsCardBg: LIGHT_PURPLE,
tabsInkBarColor: DARK_FOUR,
tabsItemHoverColor: DARK_FOUR,
tabsItemActiveColor: DARK_FOUR,
tabsItemSelectedColor: DARK_FOUR,

// Popover
popoverBgColor: CHARCOAL_GRAY,
popoverTextColor: PURE_WHITE,

// Dropdown
dropdownBgColor: CHARCOAL_GRAY,
dropdownTextColor: TRANSPARENT_WHITE,

// Tag
tagDefaultBg: ALLEN_PURPLE,
tagDefaultColor: WHITE_SIX,

// Slider
sliderRailBg: DARK_FOUR,
sliderRailHoverBg: WARM_GRAY,
sliderTrackBg: WHITE_THREE,
sliderHandleColor: WHITE_THREE,
sliderDotBorderColor: WHITE_THREE,
};

export const simulariumTheme = {
token: {
fontFamily:
"'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
colorPrimary: COLOR_PRIMARY,
colorBgBase: COLOR_BG_BASE,
colorBgContainer: COLOR_BG_CONTAINER,
colorBgLayout: COLOR_BG_LAYOUT,
colorText: COLOR_TEXT,
colorSuccess: COLOR_SUCCESS,
colorLink: COLOR_LINK,
// Using light theme tokens for global defaults
// todo: redesign will restrict light theme
// to modals and specific pages
colorPrimary: lightTheme.colorPrimary,
colorBgBase: lightTheme.colorBgBase,
colorBgContainer: lightTheme.colorBgContainer,
colorBgLayout: lightTheme.colorBgLayout,
colorText: lightTheme.colorText,
colorLink: lightTheme.colorLink,
borderRadius: 0,
controlHeight: 32,
controlHeightLG: 40,
controlHeightSM: 24,
},
components: {
Form: {
labelColor: FORM_LABEL_COLOR,
labelColor: lightTheme.labelColor,
verticalLabelPadding: "0 0 4px 0",
labelFontSize: 16,
},
Input: {
colorTextPlaceholder: INPUT_PLACEHOLDER_COLOR,
colorBorder: INPUT_BORDER_COLOR,
colorBgContainer: INPUT_BG_COLOR,
colorPrimaryHover: INPUT_HOVER_COLOR,
hoverBorderColor: INPUT_HOVER_COLOR,
colorTextPlaceholder: lightTheme.inputPlaceholderColor,
colorBorder: lightTheme.inputBorderColor,
colorBgContainer: lightTheme.inputBgColor,
colorPrimaryHover: lightTheme.inputHoverColor,
hoverBorderColor: lightTheme.inputHoverColor,
},
Button: {
colorPrimary: BUTTON_PRIMARY_COLOR,
colorPrimaryHover: BUTTON_PRIMARY_COLOR,
colorPrimary: darkTheme.buttonPrimaryColor,
colorPrimaryHover: darkTheme.buttonPrimaryColor,
algorithm: true,
defaultBg: BUTTON_DEFAULT_BG,
defaultHoverBg: BUTTON_DEFAULT_BG,
defaultActiveBg: BUTTON_DEFAULT_BG,
defaultColor: BUTTON_DEFAULT_COLOR,
defaultBorderColor: BUTTON_DEFAULT_BORDER,
defaultBg: darkTheme.buttonDefaultBg,
defaultHoverBg: darkTheme.buttonDefaultBg,
defaultActiveBg: darkTheme.buttonDefaultBg,
defaultColor: darkTheme.buttonDefaultColor,
defaultBorderColor: darkTheme.buttonDefaultBorder,
borderRadius: 3,
},
Radio: {
colorPrimary: RADIO_PRIMARY_COLOR,
colorText: RADIO_TEXT_COLOR,
colorPrimary: lightTheme.radioPrimaryColor,
colorText: lightTheme.radioTextColor,
},
Layout: {
headerHeight: 60,
headerPadding: 0,
siderBg: LAYOUT_SIDER_BG,
triggerBg: LAYOUT_TRIGGER_BG,
triggerColor: LAYOUT_TRIGGER_COLOR,
footerBg: LAYOUT_FOOTER_BG,
siderBg: darkTheme.layoutSiderBg,
triggerBg: darkTheme.layoutTriggerBg,
triggerColor: darkTheme.layoutTriggerColor,
footerBg: darkTheme.layoutFooterBg,
zeroTriggerWidth: 30,
zeroTriggerHeight: 100,
lightTriggerColor: LAYOUT_LIGHT_TRIGGER_COLOR,
lightTriggerColor: darkTheme.layoutLightTriggerColor,
},
Menu: {
darkItemColor: MENU_DARK_ITEM_COLOR,
darkItemSelectedBg: MENU_DARK_SELECTED_BG,
darkItemSelectedColor: MENU_DARK_SELECTED_COLOR,
darkItemColor: darkTheme.menuDarkItemColor,
darkItemSelectedBg: darkTheme.menuDarkSelectedBg,
darkItemSelectedColor: darkTheme.menuDarkSelectedColor,
},
Modal: {
headerBg: MODAL_HEADER_BG,
contentBg: MODAL_CONTENT_BG,
titleColor: MODAL_TITLE_COLOR,
headerBg: lightTheme.modalHeaderBg,
contentBg: lightTheme.modalContentBg,
titleColor: lightTheme.modalTitleColor,
borderRadiusLG: 6,
},
Checkbox: {
borderRadius: 3,
colorBorder: CHECKBOX_BORDER_COLOR,
colorBorder: darkTheme.checkboxBorderColor,
size: 16,
colorPrimary: CHECKBOX_PRIMARY_COLOR,
colorBgContainer: CHECKBOX_BG_COLOR,
colorWhite: CHECKBOX_MARK_COLOR,
colorPrimaryHover: CHECKBOX_PRIMARY_COLOR,
colorPrimary: darkTheme.checkboxPrimaryColor,
colorBgContainer: darkTheme.checkboxBgColor,
colorWhite: darkTheme.checkboxMarkColor,
colorPrimaryHover: darkTheme.checkboxPrimaryColor,
},
Tabs: {
cardBg: TABS_CARD_BG,
inkBarColor: TABS_INK_BAR_COLOR,
itemHoverColor: TABS_ITEM_HOVER_COLOR,
itemActiveColor: TABS_ITEM_ACTIVE_COLOR,
itemSelectedColor: TABS_ITEM_SELECTED_COLOR,
cardBg: darkTheme.tabsCardBg,
inkBarColor: darkTheme.tabsInkBarColor,
itemHoverColor: darkTheme.tabsItemHoverColor,
itemActiveColor: darkTheme.tabsItemActiveColor,
itemSelectedColor: darkTheme.tabsItemSelectedColor,
horizontalItemMargin: "0 0 0 12",
titleFontSizeLG: 18,
},
Popover: {
colorBgElevated: POPOVER_BG_COLOR,
colorText: POPOVER_TEXT_COLOR,
colorBgElevated: darkTheme.popoverBgColor,
colorText: darkTheme.popoverTextColor,
sizePopupArrow: 8,
},
Dropdown: {
colorBgElevated: DROPDOWN_BG_COLOR,
colorText: DROPDOWN_TEXT_COLOR,
colorBgElevated: darkTheme.dropdownBgColor,
colorText: darkTheme.dropdownTextColor,
},
Tag: {
defaultBg: TAG_DEFAULT_BG,
defaultColor: TAG_DEFAULT_COLOR,
defaultBg: darkTheme.tagDefaultBg,
defaultColor: darkTheme.tagDefaultColor,
},
Slider: {
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,
railBg: darkTheme.sliderRailBg,
railHoverBg: darkTheme.sliderRailHoverBg,
trackBg: darkTheme.sliderTrackBg,
handleColor: darkTheme.sliderHandleColor,
trackHoverBg: darkTheme.sliderTrackBg,
handleActiveColor: darkTheme.sliderHandleColor,
handleActiveOutlineColor: TRANSPARENT,
handleSize: 5.5,
handleSizeHover: 5.5,
dotBorderColor: SLIDER_DOT_BORDER_COLOR,
dotBorderColor: darkTheme.sliderDotBorderColor,
},
},
};
Expand Down

0 comments on commit f24d313

Please sign in to comment.