Rename dark mode product colors

Expensify · Dec 5, 2023 · 88d1e18 · 88d1e18
1 parent 0a4db44
commit 88d1e18
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 61 deletions.
diff --git 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
@@ -19,15 +19,15 @@ const colors: Record<string, Color> = {
     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
@@ -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
@@ -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]: {