Finalize Light Mode / Dark Mode (with new primitives)

.imgbotconfig

@@ -1,7 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
-        "assets/images/empty-state_background-fade-light.png"
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

.storybook/public/index.css

@@ -24,5 +24,5 @@ a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus
 }
 
 .sidebar-container {
-    background: #07271f;
+    background: #072419;
 }

.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,
 });

docs/_sass/_colors.scss

@@ -2,8 +2,8 @@ $color-green400: #03D47C;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-button-background: #1A3D32;
-$color-button-hovered: #2C6755;
-$color-green-highlightBG: #07271F;
+$color-button-hovered: #2A604F;
+$color-green-highlightBG: #072419;
 $color-green-highlightBG-hover: #06231c;
 $color-green-appBG: #061B09;
 $color-green-hover: #00a862;

src/components/LHNOptionsList/OptionRowLHN.js

@@ -158,6 +158,8 @@ function OptionRowLHN(props) {
         optionItem.type === CONST.REPORT.TYPE.CHAT && _.isEmpty(optionItem.chatType) && !optionItem.isThread && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 2;
     const fullTitle = isGroupChat ? getGroupChatName(ReportUtils.getReport(optionItem.reportID)) : optionItem.text;
 
+    const subscriptAvatarBorderColor = props.isFocused ? focusedBackgroundColor : theme.sidebar;
+
     return (
         <OfflineWithFeedback
             pendingAction={optionItem.pendingAction}
@@ -215,7 +217,7 @@ function OptionRowLHN(props) {
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
-                                            backgroundColor={props.isFocused ? theme.activeComponentBG : theme.sidebar}
+                                            backgroundColor={hovered && !props.isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
                                             size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -1,6 +1,5 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback} from 'react';
-import {Image} from 'react-native';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
@@ -18,7 +17,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import exampleCheckImage from './exampleCheckImage';
+import ExampleCheck from './ExampleCheck';
 import StepPropTypes from './StepPropTypes';
 
 const propTypes = {
@@ -27,7 +26,7 @@ const propTypes = {
 
 function BankAccountManualStep(props) {
     const styles = useThemeStyles();
-    const {translate, preferredLocale} = useLocalize();
+    const {translate} = useLocalize();
     const {reimbursementAccount, reimbursementAccountDraft} = props;
 
     const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, 'achData.bankAccountID'));
@@ -95,11 +94,7 @@ function BankAccountManualStep(props) {
                 style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 <Text style={[styles.mb5]}>{translate('bankAccount.checkHelpLine')}</Text>
-                <Image
-                    resizeMode="contain"
-                    style={[styles.exampleCheckImage, styles.mb5]}
-                    source={exampleCheckImage(preferredLocale)}
-                />
+                <ExampleCheck />
                 <InputWrapper
                     InputComponent={TextInput}
                     autoFocus

src/pages/ReimbursementAccount/ExampleCheck.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Image} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+
+function ExampleCheckImage() {
+    const styles = useThemeStyles();
+    const illustrations = useThemeIllustrations();
+    const {preferredLocale} = useLocalize();
+    const isSpanish = (preferredLocale || CONST.LOCALES.DEFAULT) === CONST.LOCALES.ES;
+
+    return (
+        <Image
+            resizeMode="contain"
+            style={[styles.exampleCheckImage, styles.mb5]}
+            source={isSpanish ? illustrations.ExampleCheckES : illustrations.ExampleCheckEN}
+        />
+    );
+}
+
+ExampleCheckImage.displayName = 'ExampleCheckImage';
+export default ExampleCheckImage;

src/styles/StyleUtils.ts

@@ -1036,7 +1036,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle
  * Select the correct color for text.
  */
 function getColoredBackgroundStyle(theme: ThemeColors, isColored: boolean): StyleProp<TextStyle> {
-    return {backgroundColor: isColored ? theme.link : undefined};
+    return {backgroundColor: isColored ? theme.mentionBG : undefined};
 }
 
 function getEmojiReactionBubbleStyle(theme: ThemeColors, isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle {

src/styles/colors.ts

@@ -19,27 +19,26 @@ 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',
-    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',

src/styles/illustrations/dark.ts

@@ -1,8 +1,12 @@
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
+import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
+import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
+import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
 import {Illustrations} from './types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
+    ExampleCheckEN,
+    ExampleCheckES,
 } satisfies Illustrations;
 
 export default illustrations;

src/styles/illustrations/light.ts

@@ -1,8 +1,12 @@
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png';
+import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png';
+import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png';
+import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png';
 import {Illustrations} from './types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
+    ExampleCheckEN,
+    ExampleCheckES,
 } satisfies Illustrations;
 
 export default illustrations;

src/styles/illustrations/types.ts

@@ -2,6 +2,8 @@ import {ImageSourcePropType} from 'react-native';
 
 type Illustrations = {
     EmptyStateBackgroundImage: ImageSourcePropType;
+    ExampleCheckES: ImageSourcePropType;
+    ExampleCheckEN: ImageSourcePropType;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/styles/styles.ts

@@ -2819,7 +2819,7 @@ const styles = (theme: ThemeColors) =>
         smallEditIcon: {
             alignItems: 'center',
             backgroundColor: theme.buttonHoveredBG,
-            borderColor: theme.textReversed,
+            borderColor: theme.appBG,
             borderRadius: 14,
             borderWidth: 3,
             color: theme.textReversed,