Merge pull request #32512 from Expensify/georgia-LightModeThemeQA

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,