From 88d1e18b46a8109634fbb655edf894c8e00397b1 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 5 Dec 2023 12:40:02 -0500 Subject: [PATCH] Rename dark mode product colors --- .storybook/theme.js | 18 ++++----- src/styles/colors.ts | 18 ++++----- src/styles/themes/default.ts | 78 ++++++++++++++++++------------------ src/styles/themes/light.ts | 8 ++-- 4 files changed, 61 insertions(+), 61 deletions(-) diff --git a/.storybook/theme.js b/.storybook/theme.js index 96631764726f..67898fb00943 100644 --- a/.storybook/theme.js +++ b/.storybook/theme.js @@ -7,17 +7,17 @@ export default create({ fontBase: 'ExpensifyNeue-Regular', fontCode: 'monospace', base: 'dark', - appBg: colors.darkHighlightBackground, - colorPrimary: colors.darkDefaultButton, + appBg: colors.productDark200, + colorPrimary: colors.productDark400, colorSecondary: colors.green, - appContentBg: colors.darkAppBackground, - textColor: colors.darkPrimaryText, - barTextColor: colors.darkPrimaryText, + appContentBg: colors.productDark100, + textColor: colors.productDark900, + barTextColor: colors.productDark900, barSelectedColor: colors.green, - barBg: colors.darkAppBackground, - appBorderColor: colors.darkBorders, - inputBg: colors.darkHighlightBackground, - inputBorder: colors.darkBorders, + barBg: colors.productDark100, + appBorderColor: colors.productDark400, + inputBg: colors.productDark200, + inputBorder: colors.productDark400, appBorderRadius: 8, inputBorderRadius: 8, }); diff --git a/src/styles/colors.ts b/src/styles/colors.ts index fbe694e051ee..220db095507d 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -19,15 +19,15 @@ const colors: Record = { transparent: 'transparent', // Dark Mode Theme Colors - darkAppBackground: '#061B09', - darkHighlightBackground: '#07271F', - darkBorders: '#1A3D32', - darkIcons: '#8B9C8F', - darkSupportingText: '#AFBBB0', - darkPrimaryText: '#E7ECE9', - darkDefaultButton: '#184E3D', - darkDefaultButtonHover: '#2C6755', - darkDefaultButtonPressed: '#467164', + productDark100: '#061B09', + productDark200: '#072419', + productDark300: '#0A2E25', + productDark400: '#1A3D32', + productDark500: '#224F41', + productDark600: '#2A604F', + productDark700: '#8B9C8F', + productDark800: '#AFBBB0', + productDark900: '#E7ECE9', // Light Mode Theme Colors lightAppBackground: '#FCFBF9', diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index 59de9b7269a8..d3c8e5f912fa 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -5,26 +5,26 @@ import {type ThemeColors} from './types'; const darkTheme = { // Figma keys - appBG: colors.darkAppBackground, + appBG: colors.productDark100, splashBG: colors.green400, - highlightBG: colors.darkHighlightBackground, - border: colors.darkBorders, - borderLighter: colors.darkDefaultButton, + highlightBG: colors.productDark200, + border: colors.productDark400, + borderLighter: colors.productDark400, borderFocus: colors.green400, - icon: colors.darkIcons, + icon: colors.productDark700, iconMenu: colors.green400, - iconHovered: colors.darkPrimaryText, + iconHovered: colors.productDark900, iconSuccessFill: colors.green400, - iconReversed: colors.darkAppBackground, + iconReversed: colors.productDark100, iconColorfulBackground: `${colors.ivory}cc`, - textSupporting: colors.darkSupportingText, - text: colors.darkPrimaryText, + textSupporting: colors.productDark800, + text: colors.productDark900, textColorfulBackground: colors.ivory, link: colors.blue300, linkHover: colors.blue100, - buttonDefaultBG: colors.darkDefaultButton, - buttonHoveredBG: colors.darkDefaultButtonHover, - buttonPressedBG: colors.darkDefaultButtonPressed, + buttonDefaultBG: colors.productDark400, + buttonHoveredBG: colors.productDark500, + buttonPressedBG: colors.productDark600, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, @@ -37,36 +37,36 @@ const darkTheme = { dangerSection: colors.tangerine800, // Additional keys - overlay: colors.darkBorders, - inverse: colors.darkPrimaryText, + overlay: colors.productDark400, + inverse: colors.productDark900, shadow: colors.black, - componentBG: colors.darkAppBackground, - hoverComponentBG: colors.darkHighlightBackground, - activeComponentBG: colors.darkBorders, + componentBG: colors.productDark100, + hoverComponentBG: colors.productDark200, + activeComponentBG: colors.productDark400, signInSidebar: colors.green800, - sidebar: colors.darkHighlightBackground, - sidebarHover: colors.darkAppBackground, - heading: colors.darkPrimaryText, - textLight: colors.darkPrimaryText, - textDark: colors.darkAppBackground, + sidebar: colors.productDark200, + sidebarHover: colors.productDark100, + heading: colors.productDark900, + textLight: colors.productDark900, + textDark: colors.productDark100, textReversed: colors.lightPrimaryText, - textBackground: colors.darkHighlightBackground, - textMutedReversed: colors.darkIcons, + textBackground: colors.productDark200, + textMutedReversed: colors.productDark700, textError: colors.red, - offline: colors.darkIcons, - modalBackground: colors.darkAppBackground, - cardBG: colors.darkHighlightBackground, - cardBorder: colors.darkHighlightBackground, - spinner: colors.darkSupportingText, + offline: colors.productDark700, + modalBackground: colors.productDark100, + cardBG: colors.productDark200, + cardBorder: colors.productDark200, + spinner: colors.productDark800, unreadIndicator: colors.green400, - placeholderText: colors.darkIcons, + placeholderText: colors.productDark700, heroCard: colors.blue400, - uploadPreviewActivityIndicator: colors.darkHighlightBackground, + uploadPreviewActivityIndicator: colors.productDark200, dropUIBG: 'rgba(6,27,9,0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.darkPrimaryText, - imageCropBackgroundColor: colors.darkIcons, + pickerOptionsTextColor: colors.productDark900, + imageCropBackgroundColor: colors.productDark700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, reactionActiveText: colors.green100, @@ -78,8 +78,8 @@ const darkTheme = { ourMentionBG: colors.green600, tooltipSupportingText: colors.lightSupportingText, tooltipPrimaryText: colors.lightPrimaryText, - skeletonLHNIn: colors.darkBorders, - skeletonLHNOut: colors.darkDefaultButton, + skeletonLHNIn: colors.productDark400, + skeletonLHNOut: colors.productDark400, QRLogo: colors.green400, starDefaultBG: 'rgb(254, 228, 94)', loungeAccessOverlay: colors.blue800, @@ -92,11 +92,11 @@ const darkTheme = { // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs PAGE_THEMES: { [SCREENS.HOME]: { - backgroundColor: colors.darkHighlightBackground, + backgroundColor: colors.productDark200, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.REPORT]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SAVE_THE_WORLD.ROOT]: { @@ -112,7 +112,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.SECURITY]: { @@ -124,7 +124,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.ROOT]: { - backgroundColor: colors.darkHighlightBackground, + backgroundColor: colors.productDark200, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, }, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 1541c0e723d7..82785f2c94cd 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -49,7 +49,7 @@ const lightTheme = { heading: colors.lightPrimaryText, textLight: colors.white, textDark: colors.lightPrimaryText, - textReversed: colors.darkPrimaryText, + textReversed: colors.productDark900, textBackground: colors.lightHighlightBackground, textMutedReversed: colors.lightIcons, textError: colors.red, @@ -76,8 +76,8 @@ const lightTheme = { mentionBG: colors.blue100, ourMentionText: colors.green600, ourMentionBG: colors.green100, - tooltipSupportingText: colors.darkSupportingText, - tooltipPrimaryText: colors.darkPrimaryText, + tooltipSupportingText: colors.productDark800, + tooltipPrimaryText: colors.productDark900, skeletonLHNIn: colors.lightBorders, skeletonLHNOut: colors.lightDefaultButtonPressed, QRLogo: colors.green400, @@ -112,7 +112,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.WALLET]: { - backgroundColor: colors.darkAppBackground, + backgroundColor: colors.productDark100, statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.SECURITY]: {