From 06b4e08fa8c71dbaf9e40f51d23f44795d774445 Mon Sep 17 00:00:00 2001 From: Georgia Monahan Date: Tue, 5 Dec 2023 14:11:39 -0500 Subject: [PATCH] Update Light Mode Colors --- src/styles/colors.ts | 19 +++++---- src/styles/themes/default.ts | 6 +-- src/styles/themes/light.ts | 74 ++++++++++++++++++------------------ 3 files changed, 49 insertions(+), 50 deletions(-) diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 220db095507d..35d93f060c86 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -30,16 +30,15 @@ const colors: Record = { productDark900: '#E7ECE9', // Light Mode Theme Colors - lightAppBackground: '#FCFBF9', - lightHighlightBackground: '#F8F4F0', - lightBorders: '#EBE6DF', - lightBordersLighter: '#2B5548', - lightIcons: '#A2A9A3', - lightSupportingText: '#76847E', - lightPrimaryText: '#002E22', - lightDefaultButton: '#EEEBE7', - lightDefaultButtonHover: '#E3DFD9', - lightDefaultButtonPressed: '#D2CCC3', + productLight100: '#FCFBF9', + productLight200: '#F8F4F0', + productLight300: '#F2EDE7', + productLight400: '#E6E1DA', + productLight500: '#D8D1C7', + productLight600: '#C7BFB3', + productLight700: '#A2A9A3', + productLight800: '#76847E', + productLight900: '#002E22', // Brand Colors from Figma blue100: '#B0D9FF', diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index d3c8e5f912fa..74b18cd3806e 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -49,7 +49,7 @@ const darkTheme = { heading: colors.productDark900, textLight: colors.productDark900, textDark: colors.productDark100, - textReversed: colors.lightPrimaryText, + textReversed: colors.productLight900, textBackground: colors.productDark200, textMutedReversed: colors.productDark700, textError: colors.red, @@ -76,8 +76,8 @@ const darkTheme = { mentionBG: colors.blue600, ourMentionText: colors.green100, ourMentionBG: colors.green600, - tooltipSupportingText: colors.lightSupportingText, - tooltipPrimaryText: colors.lightPrimaryText, + tooltipSupportingText: colors.productLight800, + tooltipPrimaryText: colors.productLight900, skeletonLHNIn: colors.productDark400, skeletonLHNOut: colors.productDark400, QRLogo: colors.green400, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 82785f2c94cd..c1f85fb77c2d 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -5,26 +5,26 @@ import {type ThemeColors} from './types'; const lightTheme = { // Figma keys - appBG: colors.lightAppBackground, + appBG: colors.productLight100, splashBG: colors.green400, - highlightBG: colors.lightHighlightBackground, - border: colors.lightBorders, - borderLighter: colors.lightDefaultButtonPressed, + highlightBG: colors.productLight200, + border: colors.productLight400, + borderLighter: colors.productLight600, borderFocus: colors.green400, - icon: colors.lightIcons, + icon: colors.productLight700, iconMenu: colors.green400, - iconHovered: colors.lightPrimaryText, + iconHovered: colors.productLight900, iconSuccessFill: colors.green400, - iconReversed: colors.lightAppBackground, + iconReversed: colors.productLight100, iconColorfulBackground: `${colors.ivory}cc`, - textSupporting: colors.lightSupportingText, - text: colors.lightPrimaryText, + textSupporting: colors.productLight800, + text: colors.productLight900, textColorfulBackground: colors.ivory, link: colors.blue600, linkHover: colors.blue500, - buttonDefaultBG: colors.lightDefaultButton, - buttonHoveredBG: colors.lightDefaultButtonHover, - buttonPressedBG: colors.lightDefaultButtonPressed, + buttonDefaultBG: colors.productLight400, + buttonHoveredBG: colors.productLight500, + buttonPressedBG: colors.productLight600, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, @@ -37,36 +37,36 @@ const lightTheme = { dangerSection: colors.tangerine800, // Additional keys - overlay: colors.lightBorders, - inverse: colors.lightPrimaryText, + overlay: colors.productLight400, + inverse: colors.productLight900, shadow: colors.black, - componentBG: colors.lightAppBackground, - hoverComponentBG: colors.lightHighlightBackground, - activeComponentBG: colors.lightBorders, + componentBG: colors.productLight100, + hoverComponentBG: colors.productLight200, + activeComponentBG: colors.productLight400, signInSidebar: colors.green800, - sidebar: colors.lightHighlightBackground, - sidebarHover: colors.lightBorders, - heading: colors.lightPrimaryText, + sidebar: colors.productLight200, + sidebarHover: colors.productLight400, + heading: colors.productLight900, textLight: colors.white, - textDark: colors.lightPrimaryText, + textDark: colors.productLight900, textReversed: colors.productDark900, - textBackground: colors.lightHighlightBackground, - textMutedReversed: colors.lightIcons, + textBackground: colors.productLight200, + textMutedReversed: colors.productLight700, textError: colors.red, - offline: colors.lightIcons, - modalBackground: colors.lightAppBackground, - cardBG: colors.lightHighlightBackground, - cardBorder: colors.lightHighlightBackground, - spinner: colors.lightSupportingText, + offline: colors.productLight700, + modalBackground: colors.productLight100, + cardBG: colors.productLight200, + cardBorder: colors.productLight200, + spinner: colors.productLight800, unreadIndicator: colors.green400, - placeholderText: colors.lightIcons, + placeholderText: colors.productLight700, heroCard: colors.blue400, - uploadPreviewActivityIndicator: colors.lightHighlightBackground, + uploadPreviewActivityIndicator: colors.productLight200, dropUIBG: 'rgba(252, 251, 249, 0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', checkBox: colors.green400, - pickerOptionsTextColor: colors.lightPrimaryText, - imageCropBackgroundColor: colors.lightIcons, + pickerOptionsTextColor: colors.productLight900, + imageCropBackgroundColor: colors.productLight700, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green100, reactionActiveText: colors.green600, @@ -78,8 +78,8 @@ const lightTheme = { ourMentionBG: colors.green100, tooltipSupportingText: colors.productDark800, tooltipPrimaryText: colors.productDark900, - skeletonLHNIn: colors.lightBorders, - skeletonLHNOut: colors.lightDefaultButtonPressed, + skeletonLHNIn: colors.productLight400, + skeletonLHNOut: colors.productLight600, QRLogo: colors.green400, starDefaultBG: 'rgb(254, 228, 94)', loungeAccessOverlay: colors.blue800, @@ -92,11 +92,11 @@ const lightTheme = { // 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.lightHighlightBackground, + backgroundColor: colors.productLight200, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, [SCREENS.REPORT]: { - backgroundColor: colors.lightAppBackground, + backgroundColor: colors.productLight100, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, [SCREENS.SAVE_THE_WORLD.ROOT]: { @@ -124,7 +124,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, }, [SCREENS.SETTINGS.ROOT]: { - backgroundColor: colors.lightHighlightBackground, + backgroundColor: colors.productLight200, statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, }, },