Update Light Mode Colors

Expensify · Dec 5, 2023 · 06b4e08 · 06b4e08
1 parent 88d1e18
commit 06b4e08
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 50 deletions.
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -30,16 +30,15 @@ const colors: Record<string, Color> = {
     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
@@ -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
@@ -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,
         },
     },