[No QA] Core Branding: Add dark theme for internal testing

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}

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 = {
@@ -116,7 +115,7 @@ const defaultProps = {
     shouldShowRightIcon: false,
     icon: null,
     iconRight: Expensicons.ArrowRight,
-    iconFill: colors.white,
+    iconFill: themeColors.textLight,
     iconStyles: [],
     isLoading: false,
     isDisabled: false,
@@ -286,7 +285,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]}
                                 />
                             )}

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>

src/components/FloatingActionButton.js

@@ -62,12 +62,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 (

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>
     );

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';
@@ -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: [
                 {

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';
@@ -81,7 +81,7 @@ const propTypes = {
 const defaultProps = {
     accessibilityHint: '',
     alternateTextAccessibilityLabel: '',
-    backgroundColor: colors.white,
+    backgroundColor: themeColors.appBG,
     hoverStyle: styles.sidebarLinkHover,
     hideAdditionalOptionStates: false,
     showSelectedState: false,
@@ -238,7 +238,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}
                                     />

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" />

src/components/ReportHeaderSkeletonView.js

@@ -7,6 +7,7 @@ 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 +25,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" />

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

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')}

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

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

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',
     };
 }
 

src/styles/colors.js

@@ -1,21 +1,42 @@
+/**
+ * DO NOT import colors.js into files. Use ../themes/default.js instead.
+ */
 export default {
-    white: '#FFFFFF',
-    gray1: '#FAFAFA',
-    gray2: '#ECECEC',
-    gray3: '#C6C9CA',
-    gray4: '#7D8B8F',
     dark: '#0b1b34',
     black: '#000000',
     blue: '#0185ff',
-    blueHover: '#0063bf',
+    blueHover: '#B0D9FF',
     floralwhite: '#fffaf0',
-    green: '#03d47c',
-    greenHover: '#03c775',
-    orange: '#ff7101',
-    pink: '#f68dfe',
-    red: '#fc3826',
-    redHover: '#e13826',
-    redDisabled: '#fea29a',
-    yellow: '#fed607',
+    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 Theme Colors
+    greenAppBackground: '#061B09',
+    greenHighlightBackground: '#002E22',
+    greenBorders: '#1B5744',
+    greenIcons: '#8B9C8F',
+    greenSupportingText: '#C9D3C5',
+    white: '#FFFFFF',
+    blueLink: '#5AB0FF',
+    blueLinkHover: '#B0D9FF',
+    greenDefaultButton: '#184E3D',
+    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',
 };

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';
 
@@ -32,7 +31,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -64,7 +63,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,
@@ -100,7 +99,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty
             };
             modalContainerStyle = {
                 // Shadow Styles
-                shadowColor: colors.black,
+                shadowColor: themeColors.shadow,
                 shadowOffset: {
                     width: 0,
                     height: 0,