From c935d5106244c2faa1225199e57a7ab52962f93e Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 4 Nov 2022 12:06:22 -0700
Subject: [PATCH 01/16] 1:1 swap to dark mode colors.

---
 src/styles/colors.js | 49 +++++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/styles/colors.js b/src/styles/colors.js
index f195cd62ebb41..ad692caeec1c9 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,21 +1,38 @@
 export default {
-    white: '#FFFFFF',
-    gray1: '#FAFAFA',
-    gray2: '#ECECEC',
-    gray3: '#C6C9CA',
+    // NOTE: DEPRECATED COLOR NAMES
+    white: '#061B09',
+    gray1: '#002E22',
+    gray2: '#1B5744',
+    gray3: '#8B9C8F',
     gray4: '#7D8B8F',
-    dark: '#0b1b34',
-    black: '#000000',
-    blue: '#0185ff',
-    blueHover: '#0063bf',
+    dark: '#FFFFFF',
+    black: '#FFFFFF',
+    blue: '#5AB0FF',
+    blueHover: '#8DC8FF',
     floralwhite: '#fffaf0',
-    green: '#03d47c',
-    greenHover: '#03c775',
-    orange: '#ff7101',
-    pink: '#f68dfe',
-    red: '#fc3826',
-    redHover: '#e13826',
-    redDisabled: '#fea29a',
-    yellow: '#fed607',
+    green: '#03D47C',
+    greenHover: '#00C271',
+    orange: '#FF7101',
+    pink: '#F68DFE',
+    red: '#F25730',
+    redHover: '#DE4822',
+    redDisabled: '#F25730',
+    yellow: '#FED607',
     transparent: 'transparent',
+
+    // Dark Mode Colors
+    AppBackground: '#061B09',
+    HighlightBackground: '#002E22',
+    Borders: '#1B5744',
+    Icons: '#8B9C8F',
+    SupportingText: '#C9D3C5',
+    Text: '#FFFFFF',
+    DefaultButton: '#184E3D',
+    DefaultButtonHover: '#2C6755',
+    SuccessButton: '#03D47C',
+    SuccessButtonHover: '#00C271',
+    DangerButton: '#F25730',
+    DangerButtonHover: '#DE4822',
+    Link: '#5AB0FF',
+    LinkHover: '#8DC8FF',
 };

From 54bd43f3ca2d15eebc7f561b9322bf390b36f65f Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 13:36:14 -0800
Subject: [PATCH 02/16] Define temp color names in colors.js / use in theme
 file.

---
 src/styles/colors.js         | 35 +++++++-------
 src/styles/themes/default.js | 90 +++++++++++++++++++++---------------
 2 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/styles/colors.js b/src/styles/colors.js
index ad692caeec1c9..58514d0a39b13 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -4,16 +4,16 @@ export default {
     gray1: '#002E22',
     gray2: '#1B5744',
     gray3: '#8B9C8F',
-    gray4: '#7D8B8F',
+    gray4: '#C9D3C5',
     dark: '#FFFFFF',
     black: '#FFFFFF',
     blue: '#5AB0FF',
     blueHover: '#8DC8FF',
     floralwhite: '#fffaf0',
-    green: '#03D47C',
-    greenHover: '#00C271',
     orange: '#FF7101',
     pink: '#F68DFE',
+    green: '#03D47C',
+    greenHover: '#00C271',
     red: '#F25730',
     redHover: '#DE4822',
     redDisabled: '#F25730',
@@ -21,18 +21,19 @@ export default {
     transparent: 'transparent',
 
     // Dark Mode Colors
-    AppBackground: '#061B09',
-    HighlightBackground: '#002E22',
-    Borders: '#1B5744',
-    Icons: '#8B9C8F',
-    SupportingText: '#C9D3C5',
-    Text: '#FFFFFF',
-    DefaultButton: '#184E3D',
-    DefaultButtonHover: '#2C6755',
-    SuccessButton: '#03D47C',
-    SuccessButtonHover: '#00C271',
-    DangerButton: '#F25730',
-    DangerButtonHover: '#DE4822',
-    Link: '#5AB0FF',
-    LinkHover: '#8DC8FF',
+    greenAppBackground: '#061B09',
+    greenHighlightBackground: '#002E22',
+    greenBorders: '#1B5744',
+    greenIcons: '#8B9C8F',
+    greenSupportingText: '#C9D3C5',
+    whiteText: '#FFFFFF',
+    greenDefaultButton: '#184E3D',
+    greenDefaultButtonHover: '#2C6755',
+    greenDefaultButtonPress: '#184E3D',
+    greenSuccess: '#03D47C',
+    greenSuccessHover: '#00C271',
+    redDangerButton: '#F25730',
+    redDangerButtonHover: '#DE4822',
+    blueLink: '#5AB0FF',
+    blueLinkHover: '#8DC8FF',
 };
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 0b64e64484bf3..2b2ab2c0d2072 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,52 +1,66 @@
 import colors from '../colors';
 
 export default {
-    shadow: colors.black,
-    link: colors.blue,
-    linkHover: colors.blueHover,
-    componentBG: colors.white,
-    hoverComponentBG: colors.gray1,
-    activeComponentBG: colors.gray2,
-    appBG: colors.white,
-    heading: colors.dark,
-    sidebar: colors.gray1,
-    sidebarHover: colors.white,
-    border: colors.gray2,
-    borderFocus: colors.blue,
-    icon: colors.gray3,
+    // figma keys
+    appBG: colors.greenAppBackground,
+    highlightBG: colors.greenHighlightBackground,
+    borders: colors.greenBorders,
+    icons: colors.greenIcons,
+    supportingText: colors.greenSupportingText,
+    text: colors.whiteText,
+    defaultButton: colors.greenDefaultButton,
+    defaultButtonHover: colors.greenDefaultButtonHover,
+    successButton: colors.greenSuccess,
+    successButtonHover: colors.greenSuccessHover,
+    dangerButton: colors.red,
+    dangerButtonHover: colors.redHover,
+    link: colors.blueLink,
+    linkHover: colors.blueLinkHover,
+
+    // custom keys
+    inverse: colors.whiteText,
+    shadow: colors.greenAppBackground,
+    componentBG: colors.greenAppBackground,
+    hoverComponentBG: colors.greenHighlightBackground,
+    activeComponentBG: colors.greenBorders,
+    sidebar: colors.greenHighlightBackground,
+    sidebarHover: colors.greenAppBackground,
+    border: colors.greenBorders,
+    borderFocus: colors.blueLink,
+    icon: colors.greenIcons,
     iconHovered: colors.dark,
-    iconSuccessFill: colors.green,
-    iconReversed: colors.white,
-    textSupporting: colors.gray4,
-    text: colors.dark,
+    iconSuccessFill: colors.greenSuccess,
+    iconReversed: colors.greenAppBackground,
+    heading: colors.dark,
+    textSupporting: colors.greenSupportingText,
     textError: colors.red,
-    textSuccess: colors.green,
-    textBackground: colors.gray1,
-    textReversed: colors.white,
-    textMutedReversed: colors.gray3,
-    buttonDefaultBG: colors.gray2,
-    buttonSuccessBG: colors.green,
+    textSuccess: colors.greenSuccess,
+    textBackground: colors.greenHighlightBackground,
+    textReversed: colors.greenAppBackground,
+    textMutedReversed: colors.greenIcons,
+    buttonDefaultBG: colors.greenDefaultButton,
+    buttonSuccessBG: colors.greenSuccess,
     buttonSuccessHoveredBG: colors.greenHover,
     buttonDangerBG: colors.red,
     buttonDangerPressedBG: colors.redHover,
     buttonDangerDisabledBG: colors.redDisabled,
-    online: colors.green,
-    offline: colors.gray3,
+    online: colors.greenSuccess,
+    offline: colors.greenIcons,
     sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
-    opaqueAvatar: 'rgba(011, 027, 052, 0.64)',
-    modalBackdrop: colors.gray3,
-    modalBackground: colors.gray2,
+    opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
+    modalBackdrop: colors.greenIcons,
+    modalBackground: colors.greenBorders,
     badgeDangerBG: colors.red,
     badgeDangerPressedBG: colors.redHover,
-    badgeDefaultBG: colors.gray2,
-    badgeSuccessBG: colors.green,
+    badgeDefaultBG: colors.greenBorders,
+    badgeSuccessBG: colors.greenSuccess,
     badgeSuccessPressedBG: colors.greenHover,
-    buttonDisabledBG: colors.gray2,
-    buttonHoveredBG: colors.gray1,
-    buttonPressedBG: colors.gray2,
-    spinner: colors.gray4,
-    unreadIndicator: colors.green,
-    placeholderText: colors.gray3,
-    heroCard: colors.blue,
-    uploadPreviewActivityIndicator: colors.gray1,
+    buttonDisabledBG: colors.greenBorders,
+    buttonHoveredBG: colors.greenDefaultButtonHover,
+    buttonPressedBG: colors.greenDefaultButtonPress,
+    spinner: colors.greenSupportingText,
+    unreadIndicator: colors.greenSuccess,
+    placeholderText: colors.greenIcons,
+    heroCard: colors.blueLink,
+    uploadPreviewActivityIndicator: colors.greenHighlightBackground,
 };

From 4726435d71079dfc2d0a23a4d171babee328f855 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 14:57:41 -0800
Subject: [PATCH 03/16] Remove colors import from styles.js, replace with
 themeColors

---
 src/styles/styles.js | 59 ++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index f2d7cff023da9..4d7fe06c3bbe2 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3,7 +3,6 @@ import addOutlineWidth from './addOutlineWidth';
 import themeColors from './themes/default';
 import fontWeightBold from './fontWeight/bold';
 import variables from './variables';
-import colors from './colors';
 import spacing from './utilities/spacing';
 import sizing from './utilities/sizing';
 import flex from './utilities/flex';
@@ -22,7 +21,7 @@ import pointerEventsAuto from './pointerEventsAuto';
 import overflowXHidden from './overflowXHidden';
 
 const picker = {
-    backgroundColor: 'transparent',
+    backgroundColor: themeColors.transparent,
     color: themeColors.text,
     fontFamily: fontFamily.GTA,
     fontSize: variables.fontSizeNormal,
@@ -285,11 +284,11 @@ const styles = {
     },
 
     textWhite: {
-        color: colors.white,
+        color: themeColors.appBG,
     },
 
     textBlue: {
-        color: colors.blue,
+        color: themeColors.link,
     },
 
     textUppercase: {
@@ -321,7 +320,7 @@ const styles = {
     },
 
     bgDark: {
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
     },
 
     opacity0: {
@@ -333,7 +332,7 @@ const styles = {
     },
 
     textDanger: {
-        color: colors.red,
+        color: themeColors.dangerButton,
     },
 
     borderRadiusNormal: {
@@ -349,7 +348,7 @@ const styles = {
     },
 
     buttonText: {
-        color: themeColors.heading,
+        color: themeColors.textWhite,
         fontFamily: fontFamily.GTA_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
@@ -478,11 +477,11 @@ const styles = {
     },
 
     buttonSuccessText: {
-        color: themeColors.textReversed,
+        color: themeColors.text,
     },
 
     buttonDangerText: {
-        color: themeColors.textReversed,
+        color: themeColors.text,
     },
 
     hoveredComponentBG: {
@@ -830,12 +829,12 @@ const styles = {
     }),
 
     disabledText: {
-        color: colors.gray3,
+        color: themeColors.icons,
     },
 
     inputDisabled: {
-        backgroundColor: colors.gray1,
-        color: colors.gray3,
+        backgroundColor: themeColors.highlightBG,
+        color: themeColors.icons,
     },
 
     textInputReversed: addOutlineWidth({
@@ -851,7 +850,7 @@ const styles = {
     noOutline: addOutlineWidth({}, 0),
 
     errorOutline: {
-        borderColor: colors.red,
+        borderColor: themeColors.dangerButton,
     },
 
     textLabelSupporting: {
@@ -920,14 +919,14 @@ const styles = {
         fontFamily: fontFamily.GTA,
         fontWeight: fontWeightBold,
         fontSize: variables.fontSizeHero,
-        color: colors.white,
+        color: themeColors.appBG,
         lineHeight: variables.lineHeightHero,
     },
 
     signInPageHeroDescription: {
         fontFamily: fontFamily.GTA,
         fontSize: variables.fontSizeNormal,
-        color: colors.white,
+        color: themeColors.appBG,
     },
 
     signInPageFormContainer: {
@@ -1340,7 +1339,7 @@ const styles = {
     },
 
     chatItemMessageLink: {
-        color: colors.blue,
+        color: themeColors.link,
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA,
         lineHeight: 20,
@@ -1578,7 +1577,7 @@ const styles = {
     horizontalStackedAvatar: {
         height: 28,
         width: 28,
-        backgroundColor: colors.white,
+        backgroundColor: themeColors.appBG,
         borderRadius: 33,
         paddingTop: 2,
     },
@@ -1744,7 +1743,7 @@ const styles = {
         width: 28,
         borderWidth: 2,
         borderStyle: 'solid',
-        borderColor: colors.white,
+        borderColor: themeColors.appBG,
         backgroundColor: themeColors.opaqueAvatar,
         borderRadius: 24,
         zIndex: 6,
@@ -1886,7 +1885,7 @@ const styles = {
     },
 
     notFoundTextHeader: {
-        color: colors.blue,
+        color: themeColors.link,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         fontSize: 150,
@@ -1900,7 +1899,7 @@ const styles = {
     },
 
     notFoundButtonText: {
-        color: colors.blue,
+        color: themeColors.link,
         fontFamily: fontFamily.GTA_BOLD,
         fontWeight: fontWeightBold,
         fontSize: 15,
@@ -1912,7 +1911,7 @@ const styles = {
 
     defaultModalContainer: {
         backgroundColor: themeColors.componentBG,
-        borderColor: colors.transparent,
+        borderColor: themeColors.transparent,
     },
 
     reportActionContextMenuMiniButton: {
@@ -1989,7 +1988,7 @@ const styles = {
         right: 0,
         bottom: 0,
         left: 0,
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
         opacity: 0.5,
     },
 
@@ -2104,11 +2103,11 @@ const styles = {
         justifyContent: 'center',
         borderRadius: 20,
         padding: 15,
-        backgroundColor: colors.green,
+        backgroundColor: themeColors.successButton,
     },
 
     switchInactive: {
-        backgroundColor: colors.gray2,
+        backgroundColor: themeColors.borders,
     },
 
     switchThumb: {
@@ -2117,7 +2116,7 @@ const styles = {
         borderRadius: 11,
         position: 'absolute',
         left: 4,
-        backgroundColor: colors.white,
+        backgroundColor: themeColors.appBG,
     },
 
     radioButtonContainer: {
@@ -2143,7 +2142,7 @@ const styles = {
     },
 
     checkedContainer: {
-        backgroundColor: colors.blue,
+        backgroundColor: themeColors.link,
     },
 
     iouAmountText: {
@@ -2241,7 +2240,7 @@ const styles = {
     },
 
     navigatorFullScreenLoading: {
-        backgroundColor: colors.gray1,
+        backgroundColor: themeColors.highlightBG,
         opacity: 1,
     },
 
@@ -2294,7 +2293,7 @@ const styles = {
     }),
 
     growlNotificationBox: {
-        backgroundColor: colors.dark,
+        backgroundColor: themeColors.inverse,
         borderRadius: variables.componentBorderRadiusNormal,
         alignItems: 'center',
         flexDirection: 'row',
@@ -2666,7 +2665,7 @@ const styles = {
     },
 
     iPhoneXSafeArea: {
-        backgroundColor: colors.black,
+        backgroundColor: themeColors.inverse,
         flex: 1,
     },
 
@@ -2753,7 +2752,7 @@ const styles = {
 
     textPill: {
         ellipsizeMode: 'end',
-        backgroundColor: colors.gray2,
+        backgroundColor: themeColors.borders,
         borderRadius: 10,
         overflow: 'hidden',
         paddingVertical: 2,

From a98a18a4edcfe22b9865d8d60d2e000adf738252 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 17:32:32 -0800
Subject: [PATCH 04/16] WIP clean up color imports for gray1-gray4 and appBG.

---
 .../AvatarCropModal/AvatarCropModal.js        |  5 +--
 src/components/Button.js                      |  5 +--
 src/components/ButtonWithDropdown.js          |  2 +-
 src/components/OptionRow.js                   |  6 +--
 src/libs/Navigation/NavigationRoot.js         |  4 +-
 src/pages/settings/Profile/LoginField.js      |  4 +-
 src/styles/colors.js                          |  1 -
 .../getModalStyles/getBaseModalStyles.js      |  7 ++--
 src/styles/styles.js                          | 18 ++++-----
 src/styles/themes/default.js                  | 38 ++++++++-----------
 10 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index e32057d87301d..fe893d63e451d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -14,7 +14,6 @@ import {
 } from 'react-native-reanimated';
 import CONST from '../../CONST';
 import compose from '../../libs/compose';
-import colors from '../../styles/colors';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import Button from '../Button';
@@ -317,7 +316,7 @@ const AvatarCropModal = (props) => {
                                 rotation={rotation}
                             />
                             <View style={[styles.mt5, styles.justifyContentBetween, styles.alignItemsCenter, styles.flexRow, StyleUtils.getWidthAndHeightStyle(imageContainerSize)]}>
-                                <Icon src={Expensicons.Zoom} fill={colors.gray3} />
+                                <Icon src={Expensicons.Zoom} fill={themeColors.icons} />
                                 <Pressable
                                     style={[styles.mh5, styles.flex1]}
                                     onLayout={initializeSliderContainer}
@@ -328,7 +327,7 @@ const AvatarCropModal = (props) => {
                                 <Button
                                     medium
                                     icon={Expensicons.Rotate}
-                                    iconFill={colors.black}
+                                    iconFill={themeColors.inverse}
                                     iconStyles={[styles.mr0]}
                                     style={[styles.imageCropRotateButton]}
                                     onPress={rotateImage}
diff --git a/src/components/Button.js b/src/components/Button.js
index e50d13abcbb05..a1a494ae42847 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -13,7 +13,6 @@ import HapticFeedback from '../libs/HapticFeedback';
 import withNavigationFallback from './withNavigationFallback';
 import compose from '../libs/compose';
 import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
 import withNavigationFocus from './withNavigationFocus';
 
 const propTypes = {
@@ -113,7 +112,7 @@ const defaultProps = {
     shouldShowRightIcon: false,
     icon: null,
     iconRight: Expensicons.ArrowRight,
-    iconFill: colors.white,
+    iconFill: themeColors.textLight,
     iconStyles: [],
     isLoading: false,
     isDisabled: false,
@@ -281,7 +280,7 @@ class Button extends Component {
                             {this.renderContent()}
                             {this.props.isLoading && (
                                 <ActivityIndicator
-                                    color={(this.props.success || this.props.danger) ? themeColors.textReversed : themeColors.text}
+                                    color={(this.props.success || this.props.danger) ? themeColors.textLight : themeColors.text}
                                     style={[styles.pAbsolute, styles.l0, styles.r0]}
                                 />
                             )}
diff --git a/src/components/ButtonWithDropdown.js b/src/components/ButtonWithDropdown.js
index 8955c3bc83b87..b1306b1a16e18 100644
--- a/src/components/ButtonWithDropdown.js
+++ b/src/components/ButtonWithDropdown.js
@@ -50,7 +50,7 @@ const ButtonWithDropdown = props => (
             onPress={props.onDropdownPress}
             shouldRemoveLeftBorderRadius
             ContentComponent={() => (
-                <Icon src={Expensicons.DownArrow} fill={themeColors.textReversed} />
+                <Icon src={Expensicons.DownArrow} fill={themeColors.textLight} />
             )}
         />
     </View>
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 9e0c56a8cb945..b2cd3a5fdbad0 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -16,7 +16,7 @@ import MultipleAvatars from './MultipleAvatars';
 import Hoverable from './Hoverable';
 import DisplayNames from './DisplayNames';
 import IOUBadge from './IOUBadge';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
 import SelectCircle from './SelectCircle';
@@ -78,7 +78,7 @@ const propTypes = {
 const defaultProps = {
     accessibilityHint: '',
     alternateTextAccessibilityLabel: '',
-    backgroundColor: colors.white,
+    backgroundColor: themeColors.appBG,
     hoverStyle: styles.sidebarLinkHover,
     hideAdditionalOptionStates: false,
     showSelectedState: false,
@@ -233,7 +233,7 @@ const OptionRow = (props) => {
                                 <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
                                     <Icon
                                         src={Expensicons.DotIndicator}
-                                        fill={colors.red}
+                                        fill={themeColors.danger}
                                         height={variables.iconSizeSmall}
                                         width={variables.iconSizeSmall}
                                     />
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 775d89f31b926..2c8b4bf5f55a4 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -6,7 +6,7 @@ import Navigation, {navigationRef} from './Navigation';
 import linkingConfig from './linkingConfig';
 import AppNavigator from './AppNavigator';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import UnreadIndicatorUpdater from '../UnreadIndicatorUpdater';
 import Log from '../Log';
@@ -16,7 +16,7 @@ const navigationTheme = {
     ...DefaultTheme,
     colors: {
         ...DefaultTheme.colors,
-        background: colors.gray1,
+        background: themeColors.appBG,
     },
 };
 
diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js
index a23a5f3ac8d04..37cc424535c4f 100755
--- a/src/pages/settings/Profile/LoginField.js
+++ b/src/pages/settings/Profile/LoginField.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import colors from '../../../styles/colors';
+import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import Icon from '../../../components/Icon';
 import ROUTES from '../../../ROUTES';
@@ -112,7 +112,7 @@ class LoginField extends Component {
                                 style={[styles.mb2]}
                                 onPress={this.onResendClicked}
                                 ContentComponent={() => (this.state.showCheckmarkIcon ? (
-                                    <Icon fill={colors.black} src={Expensicons.Checkmark} />
+                                    <Icon fill={themeColors.inverse} src={Expensicons.Checkmark} />
                                 ) : (
                                     <Text style={styles.buttonSmallText}>
                                         {this.props.translate('common.resend')}
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 58514d0a39b13..ae37b332efe4b 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -16,7 +16,6 @@ export default {
     greenHover: '#00C271',
     red: '#F25730',
     redHover: '#DE4822',
-    redDisabled: '#F25730',
     yellow: '#FED607',
     transparent: 'transparent',
 
diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js
index 3f2b123d2b0be..e7b6df94fc375 100644
--- a/src/styles/getModalStyles/getBaseModalStyles.js
+++ b/src/styles/getModalStyles/getBaseModalStyles.js
@@ -1,5 +1,4 @@
 import CONST from '../../CONST';
-import colors from '../colors';
 import variables from '../variables';
 import themeColors from '../themes/default';
 
@@ -30,7 +29,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.inverse,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -62,7 +61,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.inverse,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -96,7 +95,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.inverse,
                 shadowOffset: {
                     width: 0,
                     height: 0,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4d7fe06c3bbe2..a62d161fda1e5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -284,7 +284,7 @@ const styles = {
     },
 
     textWhite: {
-        color: themeColors.appBG,
+        color: themeColors.textLight,
     },
 
     textBlue: {
@@ -348,7 +348,7 @@ const styles = {
     },
 
     buttonText: {
-        color: themeColors.textWhite,
+        color: themeColors.text,
         fontFamily: fontFamily.GTA_BOLD,
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
@@ -445,7 +445,7 @@ const styles = {
 
     buttonDropdown: {
         borderLeftWidth: 1,
-        borderColor: themeColors.textReversed,
+        borderColor: themeColors.text,
     },
 
     noRightBorderRadius: {
@@ -829,12 +829,12 @@ const styles = {
     }),
 
     disabledText: {
-        color: themeColors.icons,
+        color: themeColors.icon,
     },
 
     inputDisabled: {
         backgroundColor: themeColors.highlightBG,
-        color: themeColors.icons,
+        color: themeColors.icon,
     },
 
     textInputReversed: addOutlineWidth({
@@ -1670,7 +1670,7 @@ const styles = {
     },
 
     avatarInnerText: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeSmall,
         lineHeight: undefined,
         marginLeft: -3,
@@ -1678,7 +1678,7 @@ const styles = {
     },
 
     avatarInnerTextSmall: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeExtraSmall,
         lineHeight: undefined,
         marginLeft: -2,
@@ -1993,7 +1993,7 @@ const styles = {
     },
 
     avatarInnerTextChat: {
-        color: themeColors.textReversed,
+        color: themeColors.textLight,
         fontSize: variables.fontSizeNormal,
         left: 1,
         textAlign: 'center',
@@ -2103,7 +2103,7 @@ const styles = {
         justifyContent: 'center',
         borderRadius: 20,
         padding: 15,
-        backgroundColor: themeColors.successButton,
+        backgroundColor: themeColors.buttonSuccessBG,
     },
 
     switchInactive: {
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 2b2ab2c0d2072..15b56de082787 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,23 +1,17 @@
 import colors from '../colors';
 
 export default {
-    // figma keys
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
     borders: colors.greenBorders,
-    icons: colors.greenIcons,
-    supportingText: colors.greenSupportingText,
     text: colors.whiteText,
-    defaultButton: colors.greenDefaultButton,
-    defaultButtonHover: colors.greenDefaultButtonHover,
-    successButton: colors.greenSuccess,
-    successButtonHover: colors.greenSuccessHover,
-    dangerButton: colors.red,
-    dangerButtonHover: colors.redHover,
+    textLight: colors.whiteText,
+    textDark: colors.appBG,
+    danger: colors.red,
+    dangerHover: colors.redHover,
     link: colors.blueLink,
     linkHover: colors.blueLinkHover,
-
-    // custom keys
+    transparent: colors.transparent,
     inverse: colors.whiteText,
     shadow: colors.greenAppBackground,
     componentBG: colors.greenAppBackground,
@@ -28,38 +22,38 @@ export default {
     border: colors.greenBorders,
     borderFocus: colors.blueLink,
     icon: colors.greenIcons,
-    iconHovered: colors.dark,
-    iconSuccessFill: colors.greenSuccess,
+    iconHovered: colors.whiteText,
+    iconSuccessFill: colors.green,
     iconReversed: colors.greenAppBackground,
-    heading: colors.dark,
+    heading: colors.whiteText,
     textSupporting: colors.greenSupportingText,
     textError: colors.red,
-    textSuccess: colors.greenSuccess,
+    textSuccess: colors.green,
     textBackground: colors.greenHighlightBackground,
     textReversed: colors.greenAppBackground,
     textMutedReversed: colors.greenIcons,
     buttonDefaultBG: colors.greenDefaultButton,
-    buttonSuccessBG: colors.greenSuccess,
+    buttonDefaultHoveredBG: colors.greenDefaultButtonHover,
+    buttonSuccessBG: colors.green,
     buttonSuccessHoveredBG: colors.greenHover,
     buttonDangerBG: colors.red,
-    buttonDangerPressedBG: colors.redHover,
-    buttonDangerDisabledBG: colors.redDisabled,
-    online: colors.greenSuccess,
+    buttonDangerHoveredBG: colors.redHover,
+    buttonDangerPressedBG: colors.redPressed,
+    online: colors.green,
     offline: colors.greenIcons,
-    sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
     opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
     modalBackdrop: colors.greenIcons,
     modalBackground: colors.greenBorders,
     badgeDangerBG: colors.red,
     badgeDangerPressedBG: colors.redHover,
     badgeDefaultBG: colors.greenBorders,
-    badgeSuccessBG: colors.greenSuccess,
+    badgeSuccessBG: colors.green,
     badgeSuccessPressedBG: colors.greenHover,
     buttonDisabledBG: colors.greenBorders,
     buttonHoveredBG: colors.greenDefaultButtonHover,
     buttonPressedBG: colors.greenDefaultButtonPress,
     spinner: colors.greenSupportingText,
-    unreadIndicator: colors.greenSuccess,
+    unreadIndicator: colors.green,
     placeholderText: colors.greenIcons,
     heroCard: colors.blueLink,
     uploadPreviewActivityIndicator: colors.greenHighlightBackground,

From 0bc83d76e92cc41f098a83a37fbc5a2f9ad18bea Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 21:58:50 -0800
Subject: [PATCH 05/16] Clean up themeColors references, particularly
 success/danger colors.

---
 src/components/FloatingActionButton.js        |  4 +-
 src/components/InlineSystemMessage.js         |  2 +-
 src/components/Onfido/BaseOnfidoWeb.js        |  2 +-
 src/libs/Navigation/NavigationRoot.js         |  2 +-
 src/stories/PopoverMenu.stories.js            |  4 +-
 src/styles/addOutlineWidth/index.js           |  2 +-
 .../getModalStyles/getBaseModalStyles.js      |  6 +--
 src/styles/styles.js                          | 46 +++++++++----------
 8 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
index 5ed291898496e..fa5731c9986bf 100644
--- a/src/components/FloatingActionButton.js
+++ b/src/components/FloatingActionButton.js
@@ -64,12 +64,12 @@ class FloatingActionButton extends PureComponent {
 
         const backgroundColor = this.animatedValue.interpolate({
             inputRange: [0, 1],
-            outputRange: [themeColors.buttonSuccessBG, themeColors.buttonDefaultBG],
+            outputRange: [themeColors.success, themeColors.buttonDefaultBG],
         });
 
         const fill = this.animatedValue.interpolate({
             inputRange: [0, 1],
-            outputRange: [themeColors.componentBG, themeColors.heading],
+            outputRange: [themeColors.textLight, themeColors.textDark],
         });
 
         return (
diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js
index 0b6645fe255b6..cad5c6cdeef1d 100644
--- a/src/components/InlineSystemMessage.js
+++ b/src/components/InlineSystemMessage.js
@@ -22,7 +22,7 @@ const InlineSystemMessage = (props) => {
     }
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <Icon src={Expensicons.Exclamation} fill={theme.badgeDangerBG} />
+            <Icon src={Expensicons.Exclamation} fill={theme.danger} />
             <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
         </View>
     );
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index b1114f911abd0..2bbbe00c87745 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -7,7 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import onfidoPropTypes from './onfidoPropTypes';
 import CONST from '../../CONST';
 import variables from '../../styles/variables';
-import colors from '../../styles/colors';
+import themeColors from '../../styles/themes/default';
 import fontWeightBold from '../../styles/fontWeight/bold';
 import fontFamily from '../../styles/fontFamily';
 import Log from '../../libs/Log';
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 2c8b4bf5f55a4..df43bb775b996 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -16,7 +16,7 @@ const navigationTheme = {
     ...DefaultTheme,
     colors: {
         ...DefaultTheme.colors,
-        background: themeColors.appBG,
+        background: themeColors.highlightBG,
     },
 };
 
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index 299ce3fb2d705..fcf8110e93bea 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -3,7 +3,7 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import PopoverMenu from '../components/PopoverMenu';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
-import colors from '../styles/colors';
+import themeColors from '../styles/themes/default';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -25,7 +25,7 @@ const Template = (args) => {
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...args.menuItem}
                 onPress={toggleVisibility}
-                wrapperStyle={isVisible ? [{backgroundColor: colors.gray2}] : []}
+                wrapperStyle={isVisible ? [{backgroundColor: themeColors.border}] : []}
             />
             <SafeAreaProvider>
                 <PopoverMenu
diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
index a25bc887dc103..2a2657b249100 100644
--- a/src/styles/addOutlineWidth/index.js
+++ b/src/styles/addOutlineWidth/index.js
@@ -18,7 +18,7 @@ function withOutlineWidth(obj, val, error = false) {
         ...obj,
         outlineWidth: val,
         outlineStyle: val ? 'auto' : 'none',
-        boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.badgeDangerBG : themeDefault.borderFocus}` : 'none',
+        boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${error ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
     };
 }
 
diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js
index e7b6df94fc375..096a623fd9ac0 100644
--- a/src/styles/getModalStyles/getBaseModalStyles.js
+++ b/src/styles/getModalStyles/getBaseModalStyles.js
@@ -29,7 +29,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: themeColors.inverse,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -61,7 +61,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: themeColors.inverse,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -95,7 +95,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: themeColors.inverse,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a62d161fda1e5..e8bb380889568 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -411,7 +411,7 @@ const styles = {
     },
 
     buttonSuccess: {
-        backgroundColor: themeColors.buttonSuccessBG,
+        backgroundColor: themeColors.success,
         borderWidth: 0,
     },
 
@@ -420,21 +420,21 @@ const styles = {
     },
 
     buttonSuccessHovered: {
-        backgroundColor: themeColors.buttonSuccessHoveredBG,
+        backgroundColor: themeColors.successHover,
         borderWidth: 0,
     },
 
     buttonDanger: {
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderWidth: 0,
     },
 
     buttonDangerDisabled: {
-        backgroundColor: themeColors.buttonDangerDisabledBG,
+        backgroundColor: themeColors.dangerDisabled,
     },
 
     buttonDangerHovered: {
-        backgroundColor: themeColors.buttonDangerPressedBG,
+        backgroundColor: themeColors.dangerHover,
         borderWidth: 0,
     },
 
@@ -582,7 +582,7 @@ const styles = {
     },
 
     badge: {
-        backgroundColor: themeColors.badgeDefaultBG,
+        backgroundColor: themeColors.border,
         borderRadius: 14,
         height: variables.iconSizeNormal,
         flexDirection: 'row',
@@ -591,19 +591,19 @@ const styles = {
     },
 
     badgeSuccess: {
-        backgroundColor: themeColors.badgeSuccessBG,
+        backgroundColor: themeColors.success,
     },
 
     badgeSuccessPressed: {
-        backgroundColor: themeColors.badgeSuccessPressedBG,
+        backgroundColor: themeColors.successHover,
     },
 
     badgeDanger: {
-        backgroundColor: themeColors.badgeDangerBG,
+        backgroundColor: themeColors.danger,
     },
 
     badgeDangerPressed: {
-        backgroundColor: themeColors.badgeDangerPressedBG,
+        backgroundColor: themeColors.dangerPressed,
     },
 
     badgeText: {
@@ -624,7 +624,7 @@ const styles = {
     },
 
     borderColorDanger: {
-        borderColor: themeColors.badgeDangerBG,
+        borderColor: themeColors.danger,
     },
 
     headerText: {
@@ -819,12 +819,12 @@ const styles = {
             cursor: disabled ? 'not-allowed' : 'pointer',
             ...picker,
             ...(focused && {borderColor: themeColors.borderFocus}),
-            ...(error && {borderColor: themeColors.badgeDangerBG}),
+            ...(error && {borderColor: themeColors.danger}),
         },
         inputNative: {
             ...picker,
             ...(focused && {borderColor: themeColors.borderFocus}),
-            ...(error && {borderColor: themeColors.badgeDangerBG}),
+            ...(error && {borderColor: themeColors.danger}),
         },
     }),
 
@@ -887,7 +887,7 @@ const styles = {
     },
 
     formSuccess: {
-        color: themeColors.textSuccess,
+        color: themeColors.success,
         fontSize: variables.fontSizeLabel,
         lineHeight: 18,
         marginBottom: 4,
@@ -984,7 +984,7 @@ const styles = {
 
     statusIndicator: {
         borderColor: themeColors.sidebar,
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderRadius: 6,
         borderWidth: 2,
         position: 'absolute',
@@ -997,7 +997,7 @@ const styles = {
 
     statusIndicatorLarge: {
         borderColor: themeColors.componentBG,
-        backgroundColor: themeColors.buttonDangerBG,
+        backgroundColor: themeColors.danger,
         borderRadius: 8,
         borderWidth: 2,
         position: 'absolute',
@@ -1009,7 +1009,7 @@ const styles = {
     },
 
     statusIndicatorOnline: {
-        backgroundColor: themeColors.online,
+        backgroundColor: themeColors.success,
     },
 
     avatarWithIndicator: {
@@ -1027,7 +1027,7 @@ const styles = {
     },
 
     floatingActionButton: {
-        backgroundColor: themeColors.buttonSuccessBG,
+        backgroundColor: themeColors.success,
         position: 'absolute',
         height: variables.componentSizeLarge,
         width: variables.componentSizeLarge,
@@ -2103,11 +2103,11 @@ const styles = {
         justifyContent: 'center',
         borderRadius: 20,
         padding: 15,
-        backgroundColor: themeColors.buttonSuccessBG,
+        backgroundColor: themeColors.success,
     },
 
     switchInactive: {
-        backgroundColor: themeColors.borders,
+        backgroundColor: themeColors.border,
     },
 
     switchThumb: {
@@ -2298,7 +2298,7 @@ const styles = {
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'space-between',
-        shadowColor: '#000',
+        shadowColor: themeColors.shadow,
         ...spacing.p5,
     },
 
@@ -2700,7 +2700,7 @@ const styles = {
     },
 
     sliderKnob: {
-        backgroundColor: themeColors.badgeSuccessBG,
+        backgroundColor: themeColors.success,
         position: 'absolute',
         height: variables.sliderKnobSize,
         width: variables.sliderKnobSize,
@@ -2752,7 +2752,7 @@ const styles = {
 
     textPill: {
         ellipsizeMode: 'end',
-        backgroundColor: themeColors.borders,
+        backgroundColor: themeColors.border,
         borderRadius: 10,
         overflow: 'hidden',
         paddingVertical: 2,

From 23ee309897c528bae7e109c74972c33bc7f4a9ae Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 22:00:10 -0800
Subject: [PATCH 06/16] Use dark theme for Onfido Component

---
 src/components/Onfido/BaseOnfidoWeb.js | 44 +++++++++++++-------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 2bbbe00c87745..92c868548001a 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -30,29 +30,29 @@ class Onfido extends React.Component {
                 fontWeightTitle: fontWeightBold,
                 fontWeightSubtitle: 400,
                 fontSizeSubtitle: `${variables.fontSizeNormal}px`,
-                colorContentTitle: colors.dark,
-                colorContentSubtitle: colors.dark,
-                colorContentBody: colors.dark,
+                colorContentTitle: themeColors.text,
+                colorContentSubtitle: themeColors.text,
+                colorContentBody: themeColors.text,
                 borderRadiusButton: `${variables.componentBorderRadius}px`,
-                colorBackgroundSurfaceModal: colors.white,
-                colorBorderDocTypeButton: colors.gray2,
-                colorBorderDocTypeButtonHover: colors.blue,
-                colorBackgroundButtonPrimary: colors.green,
-                colorBackgroundButtonPrimaryHover: colors.greenHover,
-                colorBackgroundButtonPrimaryActive: colors.greenHover,
-                colorBorderButtonPrimary: colors.green,
-                colorContentButtonSecondaryText: colors.dark,
-                colorBackgroundButtonSecondary: colors.gray2,
-                colorBackgroundButtonSecondaryHover: colors.gray3,
-                colorBackgroundButtonSecondaryActive: colors.gray3,
-                colorBorderButtonSecondary: colors.gray2,
-                colorBackgroundIcon: colors.white,
-                colorContentLinkTextHover: colors.white,
-                colorBorderLinkUnderline: colors.blue,
-                colorBackgroundLinkHover: colors.blue,
-                colorBackgroundLinkActive: colors.blue,
-                authAccentColor: colors.blue,
-                colorBackgroundInfoPill: colors.blue,
+                colorBackgroundSurfaceModal: themeColors.appBG,
+                colorBorderDocTypeButton: themeColors.border,
+                colorBorderDocTypeButtonHover: themeColors.link,
+                colorBackgroundButtonPrimary: themeColors.success,
+                colorBackgroundButtonPrimaryHover: themeColors.successHover,
+                colorBackgroundButtonPrimaryActive: themeColors.successHover,
+                colorBorderButtonPrimary: themeColors.success,
+                colorContentButtonSecondaryText: themeColors.text,
+                colorBackgroundButtonSecondary: themeColors.border,
+                colorBackgroundButtonSecondaryHover: themeColors.icon,
+                colorBackgroundButtonSecondaryActive: themeColors.icon,
+                colorBorderButtonSecondary: themeColors.border,
+                colorBackgroundIcon: themeColors.appBG,
+                colorContentLinkTextHover: themeColors.appBG,
+                colorBorderLinkUnderline: themeColors.link,
+                colorBackgroundLinkHover: themeColors.link,
+                colorBackgroundLinkActive: themeColors.link,
+                authAccentColor: themeColors.link,
+                colorBackgroundInfoPill: themeColors.link,
             },
             steps: [
                 {

From 16c27f28868c4122422c2ad98a63ba25dc8fccc2 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 22:00:45 -0800
Subject: [PATCH 07/16] Clean up default.js and colors.js files

---
 src/styles/colors.js         | 29 ++++++----------
 src/styles/themes/default.js | 66 ++++++++++++++++--------------------
 2 files changed, 41 insertions(+), 54 deletions(-)

diff --git a/src/styles/colors.js b/src/styles/colors.js
index ae37b332efe4b..aa38e241ac587 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,38 +1,31 @@
 export default {
-    // NOTE: DEPRECATED COLOR NAMES
-    white: '#061B09',
-    gray1: '#002E22',
-    gray2: '#1B5744',
-    gray3: '#8B9C8F',
-    gray4: '#C9D3C5',
-    dark: '#FFFFFF',
-    black: '#FFFFFF',
+    dark: '#0b1b34',
+    black: '#000000',
     blue: '#5AB0FF',
-    blueHover: '#8DC8FF',
+    blueHover: '#B0D9FF',
     floralwhite: '#fffaf0',
     orange: '#FF7101',
     pink: '#F68DFE',
     green: '#03D47C',
     greenHover: '#00C271',
+    greenPressed: '#35DD96',
+    greenDisabled: '80E9BD',
     red: '#F25730',
     redHover: '#DE4822',
+    redPressed: '#F57959',
+    redDisabled: '#F8AA97',
     yellow: '#FED607',
     transparent: 'transparent',
 
-    // Dark Mode Colors
+    // Dark Mode Theme Colors
     greenAppBackground: '#061B09',
     greenHighlightBackground: '#002E22',
     greenBorders: '#1B5744',
     greenIcons: '#8B9C8F',
     greenSupportingText: '#C9D3C5',
-    whiteText: '#FFFFFF',
+    white: '#FFFFFF',
     greenDefaultButton: '#184E3D',
     greenDefaultButtonHover: '#2C6755',
-    greenDefaultButtonPress: '#184E3D',
-    greenSuccess: '#03D47C',
-    greenSuccessHover: '#00C271',
-    redDangerButton: '#F25730',
-    redDangerButtonHover: '#DE4822',
-    blueLink: '#5AB0FF',
-    blueLinkHover: '#8DC8FF',
+    greenDefaultButtonPressed: '#467164',
+    greenDefaultButtonDisabled: '#8BA69E',
 };
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 15b56de082787..23d6aa9141316 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,60 +1,54 @@
 import colors from '../colors';
 
 export default {
+    // Figma keys
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
-    borders: colors.greenBorders,
-    text: colors.whiteText,
-    textLight: colors.whiteText,
-    textDark: colors.appBG,
+    border: colors.greenBorders,
+    borderFocus: colors.blue,
+    icon: colors.greenIcons,
+    iconHovered: colors.white,
+    iconSuccessFill: colors.green,
+    iconReversed: colors.greenAppBackground,
+    textSupporting: colors.greenSupportingText,
+    text: colors.white,
+    link: colors.blue,
+    linkHover: colors.blueHover,
+    buttonDefaultBG: colors.greenDefaultButton,
+    buttonDisabledBG: colors.greenDefaultButtonDisabled,
+    buttonHoveredBG: colors.greenDefaultButtonHover,
+    buttonPressedBG: colors.greenDefaultButtonPressed,
     danger: colors.red,
     dangerHover: colors.redHover,
-    link: colors.blueLink,
-    linkHover: colors.blueLinkHover,
+    dangerPressed: colors.redHover,
+    dangerDisabled: colors.redDisabled,
+    success: colors.green,
+    successHover: colors.greenHover,
+    successPressed: colors.greenPressed,
     transparent: colors.transparent,
-    inverse: colors.whiteText,
-    shadow: colors.greenAppBackground,
+
+    // Additional keys
+    inverse: colors.white,
+    shadow: colors.black,
     componentBG: colors.greenAppBackground,
     hoverComponentBG: colors.greenHighlightBackground,
     activeComponentBG: colors.greenBorders,
     sidebar: colors.greenHighlightBackground,
     sidebarHover: colors.greenAppBackground,
-    border: colors.greenBorders,
-    borderFocus: colors.blueLink,
-    icon: colors.greenIcons,
-    iconHovered: colors.whiteText,
-    iconSuccessFill: colors.green,
-    iconReversed: colors.greenAppBackground,
-    heading: colors.whiteText,
-    textSupporting: colors.greenSupportingText,
-    textError: colors.red,
-    textSuccess: colors.green,
-    textBackground: colors.greenHighlightBackground,
+    heading: colors.white,
+    textLight: colors.white,
+    textDark: colors.greenAppBackground,
     textReversed: colors.greenAppBackground,
+    textBackground: colors.greenHighlightBackground,
     textMutedReversed: colors.greenIcons,
-    buttonDefaultBG: colors.greenDefaultButton,
-    buttonDefaultHoveredBG: colors.greenDefaultButtonHover,
-    buttonSuccessBG: colors.green,
-    buttonSuccessHoveredBG: colors.greenHover,
-    buttonDangerBG: colors.red,
-    buttonDangerHoveredBG: colors.redHover,
-    buttonDangerPressedBG: colors.redPressed,
-    online: colors.green,
+    textError: colors.red,
     offline: colors.greenIcons,
     opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
     modalBackdrop: colors.greenIcons,
     modalBackground: colors.greenBorders,
-    badgeDangerBG: colors.red,
-    badgeDangerPressedBG: colors.redHover,
-    badgeDefaultBG: colors.greenBorders,
-    badgeSuccessBG: colors.green,
-    badgeSuccessPressedBG: colors.greenHover,
-    buttonDisabledBG: colors.greenBorders,
-    buttonHoveredBG: colors.greenDefaultButtonHover,
-    buttonPressedBG: colors.greenDefaultButtonPress,
     spinner: colors.greenSupportingText,
     unreadIndicator: colors.green,
     placeholderText: colors.greenIcons,
-    heroCard: colors.blueLink,
+    heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.greenHighlightBackground,
 };

From 37103eab7ff801b72a6ff22be489f1232531e1dd Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 7 Nov 2022 22:13:22 -0800
Subject: [PATCH 08/16] Fix incorrect themeColors key in styles.js

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index e8bb380889568..69ab472e5f13d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -332,7 +332,7 @@ const styles = {
     },
 
     textDanger: {
-        color: themeColors.dangerButton,
+        color: themeColors.danger,
     },
 
     borderRadiusNormal: {
@@ -850,7 +850,7 @@ const styles = {
     noOutline: addOutlineWidth({}, 0),
 
     errorOutline: {
-        borderColor: themeColors.dangerButton,
+        borderColor: themeColors.danger,
     },
 
     textLabelSupporting: {

From 0ad17a5e6c18f7d307e40faa056d944ce6ade4d8 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 8 Nov 2022 16:37:02 -0800
Subject: [PATCH 09/16] Update Skeleton UI to dark theme colors

---
 src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 3 +++
 src/components/ReportHeaderSkeletonView.js                    | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
index 51b0fe54f73b5..e70fd65cae873 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {Rect, Circle} from 'react-native-svg';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import CONST from '../../CONST';
+import themeColors from '../../styles/themes/default';
 
 const propTypes = {
     /** Number of rows to show in Skeleton UI block */
@@ -12,6 +13,8 @@ const propTypes = {
 const SkeletonViewLines = props => (
     <SkeletonViewContentLoader
         height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+        backgroundColor={themeColors.highlightBG}
+        foregroundColor={themeColors.border}
     >
         <Circle cx="40" cy="26" r="20" />
         <Rect x="67" y="11" width="20%" height="8" />
diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 85f2b955e65d0..19de7e0263e14 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -7,6 +7,8 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import variables from '../styles/variables';
+import themeColors from '../styles/themes/default';
+
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -24,6 +26,8 @@ const ReportHeaderSkeletonView = props => (
             <SkeletonViewContentLoader
                 height={variables.contentHeaderHeight}
                 width={styles.w100.width}
+                backgroundColor={themeColors.highlightBG}
+                foregroundColor={themeColors.border}
             >
                 <Circle cx="20" cy="33" r="20" />
                 <Rect x="55" y="20" width="30%" height="8" />

From 7b87b65462603a325f00ea61ba0ac34f8ab68b9d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 8 Nov 2022 16:50:58 -0800
Subject: [PATCH 10/16] Add blueLink and bring back branded blue in colors.js

---
 src/styles/colors.js         | 4 +++-
 src/styles/themes/default.js | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/styles/colors.js b/src/styles/colors.js
index aa38e241ac587..4eef625ccd9c3 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,7 +1,7 @@
 export default {
     dark: '#0b1b34',
     black: '#000000',
-    blue: '#5AB0FF',
+    blue: '#0185ff',
     blueHover: '#B0D9FF',
     floralwhite: '#fffaf0',
     orange: '#FF7101',
@@ -24,6 +24,8 @@ export default {
     greenIcons: '#8B9C8F',
     greenSupportingText: '#C9D3C5',
     white: '#FFFFFF',
+    blueLink: '#5AB0FF',
+    blueLinkHover: '#B0D9FF',
     greenDefaultButton: '#184E3D',
     greenDefaultButtonHover: '#2C6755',
     greenDefaultButtonPressed: '#467164',
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 23d6aa9141316..bbe4c4d671b4c 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -5,15 +5,15 @@ export default {
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
     border: colors.greenBorders,
-    borderFocus: colors.blue,
+    borderFocus: colors.blueLink,
     icon: colors.greenIcons,
     iconHovered: colors.white,
     iconSuccessFill: colors.green,
     iconReversed: colors.greenAppBackground,
     textSupporting: colors.greenSupportingText,
     text: colors.white,
-    link: colors.blue,
-    linkHover: colors.blueHover,
+    link: colors.blueLink,
+    linkHover: colors.blueLinkHover,
     buttonDefaultBG: colors.greenDefaultButton,
     buttonDisabledBG: colors.greenDefaultButtonDisabled,
     buttonHoveredBG: colors.greenDefaultButtonHover,

From b9844e640f4b83b31882ab103380b9a4fa96b331 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 8 Nov 2022 19:36:18 -0800
Subject: [PATCH 11/16] Add warning yellow to themeColors

---
 src/styles/themes/default.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index bbe4c4d671b4c..3d5004f7616cf 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -5,7 +5,7 @@ export default {
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
     border: colors.greenBorders,
-    borderFocus: colors.blueLink,
+    borderFocus: colors.blue,
     icon: colors.greenIcons,
     iconHovered: colors.white,
     iconSuccessFill: colors.green,
@@ -22,6 +22,7 @@ export default {
     dangerHover: colors.redHover,
     dangerPressed: colors.redHover,
     dangerDisabled: colors.redDisabled,
+    warning: colors.yellow,
     success: colors.green,
     successHover: colors.greenHover,
     successPressed: colors.greenPressed,

From 40ce3410dcc378470a92ecc310dd1d98fec651ed Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 11 Nov 2022 21:47:35 -0800
Subject: [PATCH 12/16] Switch borderFocus to green, remove extra line

---
 src/components/ReportHeaderSkeletonView.js | 1 -
 src/styles/styles.js                       | 2 +-
 src/styles/themes/default.js               | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js
index 19de7e0263e14..fd7818573ffeb 100644
--- a/src/components/ReportHeaderSkeletonView.js
+++ b/src/components/ReportHeaderSkeletonView.js
@@ -9,7 +9,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import variables from '../styles/variables';
 import themeColors from '../styles/themes/default';
 
-
 const propTypes = {
     ...windowDimensionsPropTypes,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 69ab472e5f13d..b750553e498fc 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -439,7 +439,7 @@ const styles = {
     },
 
     buttonDisable: {
-        backgroundColor: themeColors.buttonDisabledBG,
+        backgroundColor: themeColors.buttonDefaultBG,
         borderWidth: 0,
     },
 
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 3d5004f7616cf..824b8bed80a73 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -5,7 +5,7 @@ export default {
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
     border: colors.greenBorders,
-    borderFocus: colors.blue,
+    borderFocus: colors.green,
     icon: colors.greenIcons,
     iconHovered: colors.white,
     iconSuccessFill: colors.green,

From 9c56c219cc4ee0f6636e3beea59e628e02bcfbdb Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 16 Nov 2022 14:16:16 -0800
Subject: [PATCH 13/16] Make oldTheme / darkTheme accessible from  default.js

---
 src/pages/settings/Profile/PronounsPage.js |  2 +-
 src/styles/colors.js                       |  9 ++++
 src/styles/styles.js                       |  1 +
 src/styles/themes/default.js               | 58 +++++++++++++++++++++-
 4 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 796becb03cb3e..72fbbc585d570 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -36,7 +36,7 @@ const PronounsPage = (props) => {
 
             // Add green checkmark icon & bold the timezone text
             customIcon: fullPronounKey === currentPronouns
-                ? {src: Expensicons.Checkmark, color: themeColors.textSuccess}
+                ? {src: Expensicons.Checkmark, color: themeColors.success}
                 : null,
             isUnread: fullPronounKey === currentPronouns,
         };
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 4eef625ccd9c3..7f19b42c46056 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,3 +1,6 @@
+/**
+ * DO NOT import colors.js into files.
+ */
 export default {
     dark: '#0b1b34',
     black: '#000000',
@@ -30,4 +33,10 @@ export default {
     greenDefaultButtonHover: '#2C6755',
     greenDefaultButtonPressed: '#467164',
     greenDefaultButtonDisabled: '#8BA69E',
+
+    // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
+    gray1: '#FAFAFA',
+    gray2: '#ECECEC',
+    gray3: '#C6C9CA',
+    gray4: '#7D8B8F',
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1a047e2233f85..0d4e97012dec6 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -150,6 +150,7 @@ const styles = {
     ...wordBreak,
     ...whiteSpace,
     ...writingDirection,
+    ...themeColors,
 
     rateCol: {
         margin: 0,
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 824b8bed80a73..e618628df1dbc 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,6 +1,6 @@
 import colors from '../colors';
 
-export default {
+const darkTheme = {
     // Figma keys
     appBG: colors.greenAppBackground,
     highlightBG: colors.greenHighlightBackground,
@@ -53,3 +53,59 @@ export default {
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.greenHighlightBackground,
 };
+
+const oldTheme = {
+    shadow: colors.black,
+    link: colors.blue,
+    linkHover: colors.blueHover,
+    componentBG: colors.white,
+    hoverComponentBG: colors.gray1,
+    activeComponentBG: colors.gray2,
+    appBG: colors.white,
+    heading: colors.dark,
+    sidebar: colors.gray1,
+    sidebarHover: colors.white,
+    border: colors.gray2,
+    borderFocus: colors.blue,
+    icon: colors.gray3,
+    iconHovered: colors.dark,
+    iconSuccessFill: colors.green,
+    iconReversed: colors.white,
+    textSupporting: colors.gray4,
+    text: colors.dark,
+    textError: colors.red,
+    textBackground: colors.gray1,
+    textReversed: colors.white,
+    textMutedReversed: colors.gray3,
+    buttonDefaultBG: colors.gray2,
+    offline: colors.gray3,
+    sidebarButtonBG: 'rgba(198, 201, 202, 0.25)',
+    opaqueAvatar: 'rgba(011, 027, 052, 0.64)',
+    modalBackdrop: colors.gray3,
+    modalBackground: colors.gray2,
+    buttonDisabledBG: colors.gray2,
+    buttonHoveredBG: colors.gray1,
+    buttonPressedBG: colors.gray2,
+    spinner: colors.gray4,
+    unreadIndicator: colors.green,
+    placeholderText: colors.gray3,
+    heroCard: colors.blue,
+    uploadPreviewActivityIndicator: colors.gray1,
+
+    // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
+    highlightBG: colors.gray1,
+    danger: colors.red,
+    dangerHover: colors.redHover,
+    dangerPressed: colors.redHover,
+    dangerDisabled: colors.redDisabled,
+    warning: colors.yellow,
+    success: colors.green,
+    successHover: colors.greenHover,
+    successPressed: colors.greenPressed,
+    transparent: colors.transparent,
+    inverse: colors.white,
+    textLight: colors.white,
+    textDark: colors.dark,
+};
+
+export default oldTheme;

From b3f01fe4f628f965c1915ed7639472c4c77cb4f3 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 16 Nov 2022 14:33:10 -0800
Subject: [PATCH 14/16] Fix lint, update splash screen background color

---
 src/styles/themes/default.js | 1 +
 web/splash/splash.js         | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index e618628df1dbc..5019b19baee0b 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import colors from '../colors';
 
 const darkTheme = {
diff --git a/web/splash/splash.js b/web/splash/splash.js
index 1ecc0c5015023..3929c168d86e4 100644
--- a/web/splash/splash.js
+++ b/web/splash/splash.js
@@ -1,5 +1,6 @@
 import './splash.css';
 import newExpensifyLogo from 'logo?raw';
+import themeColors from '../../src/styles/themes/default';
 
 document.addEventListener('DOMContentLoaded', () => {
     const minMilisecondsToWait = 1.5 * 1000;
@@ -8,6 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const splash = document.getElementById('splash');
     const splashLogo = document.querySelector('.splash-logo');
     const root = document.getElementById('root');
+    splash.style.backgroundColor = themeColors.appBG;
 
     splashLogo.innerHTML = newExpensifyLogo;
 

From 61bcfd81b991afafe7bcbfc866838a3afa348721 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 16 Nov 2022 14:41:44 -0800
Subject: [PATCH 15/16] Adding cardBG key for other core branding PRs

---
 src/styles/themes/default.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 5019b19baee0b..ec561b881226c 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -48,6 +48,7 @@ const darkTheme = {
     opaqueAvatar: 'rgba(198, 201, 202, 0.64)',
     modalBackdrop: colors.greenIcons,
     modalBackground: colors.greenBorders,
+    cardBG: colors.greenHighlightBackground,
     spinner: colors.greenSupportingText,
     unreadIndicator: colors.green,
     placeholderText: colors.greenIcons,
@@ -92,6 +93,7 @@ const oldTheme = {
     placeholderText: colors.gray3,
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.gray1,
+    cardBG: colors.gray1,
 
     // Merging new Keys for Dark Mode merge. Delete after new branding is implemented.
     highlightBG: colors.gray1,

From dcc598c08e3100d7192bf12fba0d1a8d4c65a926 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 16 Nov 2022 17:02:32 -0800
Subject: [PATCH 16/16] Specify to use theme/default.js

---
 src/styles/colors.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/colors.js b/src/styles/colors.js
index 7f19b42c46056..b8cd3a2100089 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -1,5 +1,5 @@
 /**
- * DO NOT import colors.js into files.
+ * DO NOT import colors.js into files. Use ../themes/default.js instead.
  */
 export default {
     dark: '#0b1b34',