Merge pull request Expensify#22986 from Expensify/georgia-addLightTheme

Add Light Theme `light.js` and clean up `colors.js`
c3024 · Sep 15, 2023 · cd9e86e · cd9e86e
2 parents ab5d4c4 + 1efe653
commit cd9e86e
Show file tree

Hide file tree

Showing 29 changed files with 247 additions and 240 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.greenHighlightBackground,
-    colorPrimary: colors.greenDefaultButton,
+    appBg: colors.darkHighlightBackground,
+    colorPrimary: colors.darkDefaultButton,
     colorSecondary: colors.green,
-    appContentBg: colors.greenAppBackground,
-    textColor: colors.white,
-    barTextColor: colors.white,
+    appContentBg: colors.darkAppBackground,
+    textColor: colors.darkPrimaryText,
+    barTextColor: colors.darkPrimaryText,
     barSelectedColor: colors.green,
-    barBg: colors.greenAppBackground,
-    appBorderColor: colors.greenBorders,
-    inputBg: colors.greenHighlightBackground,
-    inputBorder: colors.greenBorders,
+    barBg: colors.darkAppBackground,
+    appBorderColor: colors.darkBorders,
+    inputBg: colors.darkHighlightBackground,
+    inputBorder: colors.darkBorders,
     appBorderRadius: 8,
     inputBorderRadius: 8,
 });
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -7,7 +7,7 @@ import Text from '../Text';
 import Icon from '../Icon';
 import * as Illustrations from '../Icon/Illustrations';
 import * as Expensicons from '../Icon/Expensicons';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -56,7 +56,7 @@ function DeeplinkRedirectLoadingIndicator({translate, openLinkInBrowser, session
                 <Icon
                     width={154}
                     height={34}
-                    fill={colors.green}
+                    fill={themeColors.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>

diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 import Text from './Text';
 import * as Localize from '../libs/Localize';
 
@@ -57,7 +57,7 @@ function DotIndicatorMessage(props) {
             <View style={styles.offlineFeedback.errorDot}>
                 <Icon
                     src={Expensicons.DotIndicator}
-                    fill={props.type === 'error' ? colors.red : colors.green}
+                    fill={props.type === 'error' ? themeColors.danger : themeColors.success}
                 />
             </View>
             <View style={styles.offlineFeedback.textContainer}>

diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js
@@ -5,7 +5,7 @@ import {View} from 'react-native';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 import styles from '../styles/styles';
 import stylePropTypes from '../styles/stylePropTypes';
 import * as Localize from '../libs/Localize';
@@ -42,7 +42,7 @@ function FormHelpMessage(props) {
             {props.isError && (
                 <Icon
                     src={Expensicons.DotIndicator}
-                    fill={colors.red}
+                    fill={themeColors.success}
                 />
             )}
             <View style={[styles.flex1, props.isError && styles.ml2]}>

diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
@@ -1,7 +1,7 @@
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler';
 import {View, Animated} from 'react-native';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -14,15 +14,15 @@ import * as Pressables from '../Pressable';
 const types = {
     [CONST.GROWL.SUCCESS]: {
         icon: Expensicons.Checkmark,
-        iconColor: colors.green,
+        iconColor: themeColors.success,
     },
     [CONST.GROWL.ERROR]: {
         icon: Expensicons.Exclamation,
-        iconColor: colors.red,
+        iconColor: themeColors.danger,
     },
     [CONST.GROWL.WARNING]: {
         icon: Expensicons.Exclamation,
-        iconColor: colors.yellow,
+        iconColor: themeColors.warning,
     },
 };
 

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -12,7 +12,6 @@ import * as Expensicons from '../Icon/Expensicons';
 import MultipleAvatars from '../MultipleAvatars';
 import Hoverable from '../Hoverable';
 import DisplayNames from '../DisplayNames';
-import colors from '../../styles/colors';
 import Text from '../Text';
 import SubscriptAvatar from '../SubscriptAvatar';
 import CONST from '../../CONST';
@@ -246,7 +245,7 @@ function OptionRowLHN(props) {
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={colors.red}
+                                            fill={themeColors.danger}
                                         />
                                     </View>
                                 )}

diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import Text from './Text';
 import CONST from '../CONST';
@@ -79,7 +80,7 @@ function MentionSuggestions(props) {
                         size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
                         name={item.icons[0].name}
                         type={item.icons[0].type}
-                        fill={styles.success}
+                        fill={themeColors.success}
                     />
                 </View>
                 <Text

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -14,7 +14,6 @@ import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
-import colors from '../styles/colors';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
@@ -298,7 +297,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? colors.red : colors.green}
+                                            fill={props.brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
                                         />
                                     </View>
                                 )}

diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
@@ -230,7 +230,7 @@ function BaseOptionsList({
     return (
         <View style={listContainerStyles}>
             {isLoading ? (
-                <OptionsListSkeletonView />
+                <OptionsListSkeletonView shouldAnimate />
             ) : (
                 <>
                     {headerMessage ? (

diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js
@@ -60,8 +60,8 @@ class OptionsListSkeletonView extends React.Component {
                     key={`skeletonViewItems${i}`}
                     animate={this.props.shouldAnimate}
                     height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
-                    backgroundColor={themeColors.borderLighter}
-                    foregroundColor={themeColors.border}
+                    backgroundColor={themeColors.skeletonLHNIn}
+                    foregroundColor={themeColors.skeletonLHNOut}
                     style={styles.mr5}
                 >
                     <Circle

diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
@@ -50,7 +50,7 @@ class QRShare extends Component {
             >
                 <View style={styles.expensifyQrLogo}>
                     <ExpensifyWordmark
-                        fill={defaultTheme.borderFocus}
+                        fill={defaultTheme.QRLogo}
                         width="100%"
                         height="100%"
                     />

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
 import CONST from '../../CONST';
@@ -53,7 +54,7 @@ function MoneyReportView(props) {
                         <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
                             <Icon
                                 src={Expensicons.Checkmark}
-                                fill={styles.success}
+                                fill={themeColors.success}
                             />
                         </View>
                     )}

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -33,7 +33,6 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
 import * as StyleUtils from '../../styles/StyleUtils';
-import colors from '../../styles/colors';
 import variables from '../../styles/variables';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
 import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView';
@@ -265,7 +264,7 @@ function MoneyRequestPreview(props) {
                                 {hasFieldErrors && (
                                     <Icon
                                         src={Expensicons.DotIndicator}
-                                        fill={colors.red}
+                                        fill={themeColors.danger}
                                     />
                                 )}
                             </View>

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
@@ -30,7 +30,6 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import * as ReportActionUtils from '../../libs/ReportActionsUtils';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import ReportActionItemImages from './ReportActionItemImages';
-import colors from '../../styles/colors';
 
 const propTypes = {
     /** All the data of the action */
@@ -199,7 +198,7 @@ function ReportPreview(props) {
                             {hasErrors && (
                                 <Icon
                                     src={Expensicons.DotIndicator}
-                                    fill={colors.red}
+                                    fill={themeColors.danger}
                                 />
                             )}
                         </View>

diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -21,8 +21,8 @@ function SkeletonViewLines(props) {
         <SkeletonViewContentLoader
             animate={props.shouldAnimate}
             height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
-            backgroundColor={themeColors.highlightBG}
-            foregroundColor={themeColors.border}
+            backgroundColor={themeColors.skeletonLHNIn}
+            foregroundColor={themeColors.skeletonLHNOut}
             style={styles.mr5}
         >
             <Circle

diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import Icon from '../Icon';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
@@ -33,7 +33,7 @@ function ExpiredValidateCodeModal(props) {
                 <Icon
                     width={variables.modalWordmarkWidth}
                     height={variables.modalWordmarkHeight}
-                    fill={colors.green}
+                    fill={themeColors.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>

diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import Icon from '../Icon';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
@@ -41,7 +41,7 @@ function JustSignedInModal(props) {
                 <Icon
                     width={variables.modalWordmarkWidth}
                     height={variables.modalWordmarkHeight}
-                    fill={colors.green}
+                    fill={themeColors.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>

diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
@@ -4,7 +4,7 @@ import {compose} from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import Icon from '../Icon';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
@@ -71,7 +71,7 @@ function ValidateCodeModal(props) {
                 <Icon
                     width={variables.modalWordmarkWidth}
                     height={variables.modalWordmarkHeight}
-                    fill={colors.green}
+                    fill={themeColors.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>

diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -8,7 +8,7 @@ import * as Session from '../libs/actions/Session';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import Navigation from '../libs/Navigation/Navigation';
 import styles from '../styles/styles';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 import Icon from '../components/Icon';
 import * as Expensicons from '../components/Icon/Expensicons';
 import * as Illustrations from '../components/Icon/Illustrations';
@@ -93,7 +93,7 @@ function LogInWithShortLivedAuthTokenPage(props) {
                 <Icon
                     width={154}
                     height={34}
-                    fill={colors.green}
+                    fill={themeColors.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -11,7 +11,7 @@ import * as Expensicons from '../../components/Icon/Expensicons';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
 import Icon from '../../components/Icon';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import CONST from '../../CONST';
 import withLocalize from '../../components/withLocalize';
 import Text from '../../components/Text';
@@ -146,7 +146,7 @@ function BankAccountStep(props) {
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
                             <Icon
                                 src={Expensicons.Exclamation}
-                                fill={colors.red}
+                                fill={themeColors.danger}
                             />
                             <Text style={[styles.mutedTextLabel, styles.ml4, styles.flex1]}>{props.translate('bankAccount.validateAccountError')}</Text>
                         </View>
@@ -164,7 +164,7 @@ function BankAccountStep(props) {
                             <View style={[styles.ml1]}>
                                 <Icon
                                     src={Expensicons.Lock}
-                                    fill={colors.blue}
+                                    fill={themeColors.BRAND_COLORS.blue400}
                                 />
                             </View>
                         </PressableWithoutFeedback>

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -20,7 +20,7 @@ import CONST from '../../CONST';
 import * as ReportUtils from '../../libs/ReportUtils';
 import Text from '../../components/Text';
 import Tooltip from '../../components/Tooltip';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import reportPropTypes from '../reportPropTypes';
 import ONYXKEYS from '../../ONYXKEYS';
 import ThreeDotsMenu from '../../components/ThreeDotsMenu';
@@ -209,7 +209,7 @@ function HeaderView(props) {
                                 <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                                     <Icon
                                         src={Expensicons.DotIndicator}
-                                        fill={colors.red}
+                                        fill={themeColors.danger}
                                     />
                                 </View>
                             )}

diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
@@ -8,7 +8,7 @@ import TextLink from '../../../components/TextLink';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
-import colors from '../../../styles/colors';
+import themeColors from '../../../styles/themes/default';
 
 const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
 const MAX_IMAGE_HEIGHT = 180;
@@ -99,7 +99,7 @@ function LinkPreviewer(props) {
                         {!_.isEmpty(title) && (
                             <TextLink
                                 fontSize={variables.fontSizeNormal}
-                                style={[styles.mv2, StyleUtils.getTextColorStyle(colors.blueLinkPreview), styles.alignSelfStart]}
+                                style={[styles.mv2, StyleUtils.getTextColorStyle(themeColors.link), styles.alignSelfStart]}
                                 href={url}
                             >
                                 {title}

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
@@ -157,7 +157,7 @@ class SidebarLinks extends React.PureComponent {
                     <Header
                         title={
                             <LogoComponent
-                                fill={defaultTheme.textLight}
+                                fill={defaultTheme.text}
                                 width={variables.lhnLogoWidth}
                                 height={variables.lhnLogoHeight}
                             />