diff --git a/.storybook/theme.js b/.storybook/theme.js index 0867f6a830b5..96631764726f 100644 --- 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 index e31429af61b6..61614c7e49e6 100644 --- 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 diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.js index ac550f34de3f..b3528b43dc75 100644 --- 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) { diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js index df8befe5af30..39242511937d 100644 --- 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 && ( )} diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 60bd1bf00587..70cadd5efd8e 100644 --- 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 index 75be8c67fbf1..f5a293701454 100644 --- 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) { )} diff --git a/src/components/MentionSuggestions.js b/src/components/MentionSuggestions.js index 4b0129635269..11df8a597ded 100644 --- 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} /> { )} diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js index 47efa1a5ac9e..9c139a04dfbb 100644 --- a/src/components/OptionsList/BaseOptionsList.js +++ b/src/components/OptionsList/BaseOptionsList.js @@ -230,7 +230,7 @@ function BaseOptionsList({ return ( {isLoading ? ( - + ) : ( <> {headerMessage ? ( diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index ffe9652e3945..15c66affe84d 100644 --- 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} > diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js index 5b4eaaa37884..68eecf11d5bf 100644 --- 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) { )} diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 02da03225062..a5a499169cbd 100644 --- 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 && ( )} diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 6c2810ed4be8..1f60dddef6ec 100644 --- 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 && ( )} diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index f87ae176e3ac..ddaa46e0b731 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -21,8 +21,8 @@ function SkeletonViewLines(props) { diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js index 40b25e4a19e0..e96505470eba 100644 --- 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) { diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js index 344c3107b8cf..eabb21eea4a9 100644 --- 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) { diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js index 1679d3aa8b5d..62eff262611d 100644 --- 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) { diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 8e718e193efe..147e0cb76932 100644 --- 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) { {props.translate('bankAccount.validateAccountError')} @@ -164,7 +164,7 @@ function BankAccountStep(props) { diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 74994e4dc9d0..8d389a8c8581 100644 --- 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) { )} diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js index 7c88e9d54126..4fcbb0dc0569 100644 --- 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) && ( {title} diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index c91509e62aba..c38ac9e01ccb 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -157,7 +157,7 @@ class SidebarLinks extends React.PureComponent {
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 0701adb83313..ec06bb07c3fe 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -13,7 +13,6 @@ import spacing from './utilities/spacing'; import * as UserUtils from '../libs/UserUtils'; import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; -import * as NumberUtils from '../libs/NumberUtils'; type ColorValue = ValueOf; type AvatarSizeName = ValueOf; @@ -572,36 +571,6 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle | CSSProper }; } -/** - * Get the random promo color and image for Login page - */ -function getLoginPagePromoStyle(): ViewStyle | CSSProperties { - const promos = [ - { - backgroundColor: colors.green, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg`, - }, - { - backgroundColor: colors.orange, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg`, - }, - { - backgroundColor: colors.pink, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg`, - }, - { - backgroundColor: colors.blue, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`, - }, - { - backgroundColor: colors.ivory, - backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/cpa-card.svg`, - redirectUri: `${CONST.USE_EXPENSIFY_URL}/accountants`, - }, - ]; - return promos[NumberUtils.generateRandomInt(0, 4)]; -} - /** * Generate the styles for the ReportActionItem wrapper view. */ @@ -614,7 +583,7 @@ function getReportActionItemStyle(isHovered = false, isLoading = false): ViewSty backgroundColor: isHovered ? themeColors.hoverComponentBG : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android - colors.transparent, + themeColors.transparent, opacity: isLoading ? 0.5 : 1, ...styles.cursorInitial, }; @@ -987,7 +956,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number, shouldIncl * Select the correct color for text. */ function getColoredBackgroundStyle(isColored: boolean): ViewStyle | CSSProperties { - return {backgroundColor: isColored ? colors.blueLink : undefined}; + return {backgroundColor: isColored ? themeColors.link : undefined}; } function getEmojiReactionBubbleStyle(isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle | CSSProperties { @@ -1035,7 +1004,7 @@ function getEmojiReactionCounterTextStyle(hasUserReacted: boolean): TextStyle | return {color: themeColors.reactionActiveText}; } - return {color: themeColors.textLight}; + return {color: themeColors.text}; } /** @@ -1272,7 +1241,6 @@ export { getModalPaddingStyles, getFontFamilyMonospace, getEmojiPickerStyle, - getLoginPagePromoStyle, getReportActionItemStyle, getMiniReportActionContextMenuWrapperStyle, getKeyboardShortcutsModalWidth, diff --git a/src/styles/colors.js b/src/styles/colors.js index 2c70cb4a8a78..9ac3226a1b80 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -2,44 +2,44 @@ * DO NOT import colors.js into files. Use ../themes/default.js instead. */ export default { - dark: '#0b1b34', black: '#000000', - blue: '#0185ff', - blueHover: '#B0D9FF', + white: '#FFFFFF', ivory: '#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 Theme Colors - greenAppBackground: '#061B09', - greenHighlightBackground: '#07271F', - greenBorders: '#1A3D32', - greenBordersLighter: '#2B5548', - greenIcons: '#8B9C8F', - greenSupportingText: '#AFBBB0', - white: '#E7ECE9', - blueLink: '#5AB0FF', - blueLinkHover: '#B0D9FF', - blueLinkPreview: '#2EAAE2', - greenDefaultButton: '#184E3D', - greenDefaultButtonHover: '#2C6755', - greenDefaultButtonPressed: '#467164', - greenDefaultButtonDisabled: '#8BA69E', - midnight: '#002140', + darkAppBackground: '#061B09', + darkHighlightBackground: '#07271F', + darkBorders: '#1A3D32', + darkIcons: '#8B9C8F', + darkSupportingText: '#AFBBB0', + darkPrimaryText: '#E7ECE9', + darkDefaultButton: '#184E3D', + darkDefaultButtonHover: '#2C6755', + darkDefaultButtonPressed: '#467164', + + // Light Mode Theme Colors + lightAppBackground: '#FCFBF9', + lightHighlightBackground: '#F8F4F0', + lightBorders: '#EBE6DF', + lightBordersLighter: '#2B5548', + lightIcons: '#A2A9A3', + lightSupportingText: '#76847E', + lightPrimaryText: '#002E22', + lightDefaultButton: '#EEEBE7', + lightDefaultButtonHover: '#E3DFD9', + lightDefaultButtonPressed: '#D2CCC3', // Brand Colors from Figma blue100: '#B0D9FF', blue200: '#8DC8FF', + blue300: '#5AB0FF', blue400: '#0185FF', blue500: '#0676DE', blue600: '#0164BF', @@ -48,41 +48,46 @@ export default { green100: '#B1F2D6', green200: '#8EECC4', + green300: '#5BE3AA', green400: '#03D47C', + green500: '#00B268', green600: '#008C59', green700: '#085239', green800: '#002E22', + yellow100: '#FFF2B2', yellow200: '#FFED8F', + yellow300: '#FEE45E', yellow400: '#FED607', + yellow500: '#E4BC07', + yellow600: '#D18000', yellow700: '#722B03', yellow800: '#401102', + tangerine100: '#FFD7B0', tangerine200: '#FFC68C', + tangerine300: '#FFA75A', tangerine400: '#FF7101', + tangerine500: '#F25730', + tangerine600: '#BF3013', tangerine700: '#780505', tangerine800: '#400000', + pink100: '#FCDCFF', pink200: '#FBCCFF', + pink300: '#F9B5FE', pink400: '#F68DFE', + pink500: '#E96DF2', pink600: '#CF4CD9', pink700: '#712A76', pink800: '#49225B', + ice100: '#DFFDFE', ice200: '#CCF7FF', + ice300: '#A5FBFF', ice400: '#50EEF6', ice500: '#4ED7DE', + ice600: '#4BA6A6', ice700: '#28736D', ice800: '#134038', - - orange800: '#400000', - - // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR. - gray1: '#FAFAFA', - gray2: '#ECECEC', - gray3: '#C6C9CA', - gray4: '#7D8B8F', - oldRed: '#fc3826', - oldRedHover: '#e13826', - oldRedDisabled: '#fea29a', }; diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts index 3f9de9c78b97..97402467ab4c 100644 --- a/src/styles/getTooltipStyles.ts +++ b/src/styles/getTooltipStyles.ts @@ -2,7 +2,6 @@ import {CSSProperties} from 'react'; import {TextStyle, View, ViewStyle} from 'react-native'; import spacing from './utilities/spacing'; import styles from './styles'; -import colors from './colors'; import themeColors from './themes/default'; import fontFamily from './fontFamily'; import variables from './variables'; @@ -267,13 +266,13 @@ export default function getTooltipStyles( pointerStyle: { width: 0, height: 0, - backgroundColor: colors.transparent, + backgroundColor: themeColors.transparent, borderStyle: 'solid', borderLeftWidth: POINTER_WIDTH / 2, borderRightWidth: POINTER_WIDTH / 2, borderTopWidth: POINTER_HEIGHT, - borderLeftColor: colors.transparent, - borderRightColor: colors.transparent, + borderLeftColor: themeColors.transparent, + borderRightColor: themeColors.transparent, borderTopColor: themeColors.heading, ...pointerAdditionalStyle, }, diff --git a/src/styles/styles.js b/src/styles/styles.js index 57c88eb366ec..0fba61f1e8d9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -26,7 +26,6 @@ import * as Browser from '../libs/Browser'; import cursor from './utilities/cursor'; import userSelect from './utilities/userSelect'; import textUnderline from './utilities/textUnderline'; -import Colors from './colors'; // touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {}; @@ -815,8 +814,8 @@ const styles = (theme) => ({ borderRadius: 28, borderStyle: 'solid', borderWidth: 8, - backgroundColor: Colors.greenHighlightBackground, - borderColor: Colors.greenAppBackground, + backgroundColor: theme.highlightBG, + borderColor: theme.appBG, }, permissionView: { @@ -1550,7 +1549,7 @@ const styles = (theme) => ({ top: 0, bottom: 0, right: 0, - backgroundColor: Colors.black, + backgroundColor: theme.shadow, opacity: current.progress.interpolate({ inputRange: [0, 1], outputRange: [0, variables.overlayOpacity], @@ -3429,7 +3428,7 @@ const styles = (theme) => ({ }, fontColorReactionLabel: { - color: '#586A64', + color: theme.tooltipSupportingText, }, reactionEmojiTitle: { @@ -3438,7 +3437,7 @@ const styles = (theme) => ({ }, textReactionSenders: { - color: theme.dark, + color: theme.tooltipPrimaryText, ...wordBreak.breakWord, }, @@ -3949,13 +3948,13 @@ const styles = (theme) => ({ }, mapDirection: { - lineColor: Colors.green, + lineColor: theme.success, lineWidth: 7, }, mapDirectionLayer: { layout: {'line-join': 'round', 'line-cap': 'round'}, - paint: {'line-color': Colors.green, 'line-width': 7}, + paint: {'line-color': theme.success, 'line-width': 7}, }, mapPendingView: { diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 5f69a7746cdc..7c43e140f0b1 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -5,71 +5,68 @@ import ROUTES from '../../ROUTES'; const darkTheme = { // Figma keys - appBG: colors.greenAppBackground, - splashBG: colors.green, - highlightBG: colors.greenHighlightBackground, - border: colors.greenBorders, - borderLighter: colors.greenBordersLighter, - borderFocus: colors.green, - icon: colors.greenIcons, - iconMenu: colors.green, - iconHovered: colors.white, - iconSuccessFill: colors.green, - iconReversed: colors.greenAppBackground, + appBG: colors.darkAppBackground, + splashBG: colors.green400, + highlightBG: colors.darkHighlightBackground, + border: colors.darkBorders, + borderLighter: colors.darkDefaultButton, + borderFocus: colors.green400, + icon: colors.darkIcons, + iconMenu: colors.green400, + iconHovered: colors.darkPrimaryText, + iconSuccessFill: colors.green400, + iconReversed: colors.darkAppBackground, iconColorfulBackground: `${colors.ivory}cc`, - textSupporting: colors.greenSupportingText, - text: colors.white, + textSupporting: colors.darkSupportingText, + text: colors.darkPrimaryText, textColorfulBackground: colors.ivory, - link: colors.blueLink, - linkHover: colors.blueLinkHover, - buttonDefaultBG: colors.greenDefaultButton, - buttonDisabledBG: colors.greenDefaultButtonDisabled, - buttonHoveredBG: colors.greenDefaultButtonHover, - buttonPressedBG: colors.greenDefaultButtonPressed, + link: colors.blue300, + linkHover: colors.blue100, + buttonDefaultBG: colors.darkDefaultButton, + buttonHoveredBG: colors.darkDefaultButtonHover, + buttonPressedBG: colors.darkDefaultButtonPressed, danger: colors.red, dangerHover: colors.redHover, dangerPressed: colors.redHover, - warning: colors.yellow, - success: colors.green, + warning: colors.yellow400, + success: colors.green400, successHover: colors.greenHover, successPressed: colors.greenPressed, transparent: colors.transparent, - midtone: colors.green700, signInPage: colors.green800, - dark: colors.midnight, // Additional keys - overlay: colors.greenHighlightBackground, - inverse: colors.white, + overlay: colors.darkHighlightBackground, + inverse: colors.darkPrimaryText, shadow: colors.black, - componentBG: colors.greenAppBackground, - hoverComponentBG: colors.greenHighlightBackground, - activeComponentBG: colors.greenBorders, + componentBG: colors.darkAppBackground, + hoverComponentBG: colors.darkHighlightBackground, + activeComponentBG: colors.darkBorders, signInSidebar: colors.green800, - sidebar: colors.greenHighlightBackground, - sidebarHover: colors.greenAppBackground, - heading: colors.white, - textLight: colors.white, - textDark: colors.greenAppBackground, - textReversed: colors.greenAppBackground, - textBackground: colors.greenHighlightBackground, - textMutedReversed: colors.greenIcons, + sidebar: colors.darkHighlightBackground, + sidebarHover: colors.darkAppBackground, + heading: colors.darkPrimaryText, + textLight: colors.darkPrimaryText, + textDark: colors.darkAppBackground, + textReversed: colors.lightPrimaryText, + textBackground: colors.darkHighlightBackground, + textMutedReversed: colors.darkIcons, textError: colors.red, - offline: colors.greenIcons, - modalBackdrop: colors.greenHighlightBackground, - modalBackground: colors.greenAppBackground, - cardBG: colors.greenHighlightBackground, - cardBorder: colors.greenHighlightBackground, - spinner: colors.greenSupportingText, - unreadIndicator: colors.green, - placeholderText: colors.greenIcons, - heroCard: colors.blue, - uploadPreviewActivityIndicator: colors.greenHighlightBackground, + offline: colors.darkIcons, + modalBackdrop: colors.darkHighlightBackground, + modalBackground: colors.darkAppBackground, + cardBG: colors.darkHighlightBackground, + cardBorder: colors.darkHighlightBackground, + spinner: colors.darkSupportingText, + unreadIndicator: colors.green400, + placeholderText: colors.darkIcons, + heroCard: colors.blue400, + uploadPreviewActivityIndicator: colors.darkHighlightBackground, dropUIBG: 'rgba(6,27,9,0.92)', receiptDropUIBG: 'rgba(3, 212, 124, 0.84)', - checkBox: colors.green, - pickerOptionsTextColor: colors.white, - imageCropBackgroundColor: colors.greenIcons, + checkBox: colors.green400, + pickerOptionsTextColor: colors.darkPrimaryText, + imageCropBackgroundColor: colors.darkIcons, fallbackIconColor: colors.green700, reactionActiveBackground: colors.green600, reactionActiveText: colors.green100, @@ -79,6 +76,11 @@ const darkTheme = { mentionBG: colors.blue600, ourMentionText: colors.green100, ourMentionBG: colors.green600, + tooltipSupportingText: colors.lightSupportingText, + tooltipPrimaryText: colors.lightPrimaryText, + skeletonLHNIn: colors.darkBorders, + skeletonLHNOut: colors.darkDefaultButton, + QRLogo: colors.green400, starDefaultBG: 'rgb(254, 228, 94)', }; @@ -86,66 +88,8 @@ darkTheme.PAGE_BACKGROUND_COLORS = { [SCREENS.HOME]: darkTheme.sidebar, [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, - [ROUTES.I_KNOW_A_TEACHER]: colors.orange800, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, [ROUTES.SETTINGS_SECURITY]: colors.ice500, }; -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, - iconMenu: colors.gray3, - iconHovered: colors.dark, - iconSuccessFill: colors.green, - iconReversed: colors.white, - textSupporting: colors.gray4, - text: colors.dark, - textError: colors.oldRed, - textBackground: colors.gray1, - textReversed: colors.white, - textMutedReversed: colors.gray3, - buttonDefaultBG: colors.gray2, - offline: colors.gray3, - 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, - dropUIBG: 'rgba(6,27,9,0.92)', - cardBG: colors.gray1, - cardBorder: colors.gray1, - checkBox: colors.blue, - overlay: colors.gray1, - - // Merging new Keys for Dark Mode merge. Delete after new branding is implemented. - highlightBG: colors.gray1, - danger: colors.oldRed, - dangerHover: colors.oldRedHover, - dangerPressed: colors.oldRedHover, - dangerDisabled: colors.oldRedDisabled, - warning: colors.yellow, - success: colors.green, - successHover: colors.greenHover, - successPressed: colors.greenPressed, - transparent: colors.transparent, - inverse: colors.dark, - textLight: colors.white, - textDark: colors.dark, -}; - export default darkTheme; diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js new file mode 100644 index 000000000000..7961403fbdf0 --- /dev/null +++ b/src/styles/themes/light.js @@ -0,0 +1,94 @@ +import colors from '../colors'; +import SCREENS from '../../SCREENS'; +import ROUTES from '../../ROUTES'; + +const lightTheme = { + // Figma keys + appBG: colors.lightAppBackground, + splashBG: colors.green400, + highlightBG: colors.lightHighlightBackground, + border: colors.lightBorders, + borderLighter: colors.lightDefaultButtonPressed, + borderFocus: colors.green400, + icon: colors.lightIcons, + iconMenu: colors.green400, + iconHovered: colors.lightPrimaryText, + iconSuccessFill: colors.green400, + iconReversed: colors.lightAppBackground, + iconColorfulBackground: `${colors.ivory}cc`, + textColorfulBackground: colors.ivory, + textSupporting: colors.lightSupportingText, + text: colors.lightPrimaryText, + link: colors.blue600, + linkHover: colors.blue500, + buttonDefaultBG: colors.lightDefaultButton, + buttonHoveredBG: colors.lightDefaultButtonHover, + buttonPressedBG: colors.lightDefaultButtonPressed, + danger: colors.red, + dangerHover: colors.redHover, + dangerPressed: colors.redHover, + warning: colors.yellow400, + success: colors.green400, + successHover: colors.greenHover, + successPressed: colors.greenPressed, + transparent: colors.transparent, + signInPage: colors.green800, + + // Additional keys + overlay: colors.lightHighlightBackground, + inverse: colors.lightPrimaryText, + shadow: colors.black, + componentBG: colors.lightAppBackground, + hoverComponentBG: colors.lightHighlightBackground, + activeComponentBG: colors.lightBorders, + signInSidebar: colors.green800, + sidebar: colors.lightHighlightBackground, + sidebarHover: colors.lightBorders, + heading: colors.lightPrimaryText, + textLight: colors.white, + textDark: colors.lightPrimaryText, + textReversed: colors.darkPrimaryText, + textBackground: colors.lightHighlightBackground, + textMutedReversed: colors.lightIcons, + textError: colors.red, + offline: colors.lightIcons, + modalBackdrop: colors.lightHighlightBackground, + modalBackground: colors.lightAppBackground, + cardBG: colors.lightHighlightBackground, + cardBorder: colors.lightHighlightBackground, + spinner: colors.lightSupportingText, + unreadIndicator: colors.green400, + placeholderText: colors.lightIcons, + heroCard: colors.blue400, + uploadPreviewActivityIndicator: colors.lightHighlightBackground, + dropUIBG: 'rgba(252, 251, 249, 0.92)', + dropTransparentOverlay: 'rgba(255,255,255,0)', + checkBox: colors.green400, + pickerOptionsTextColor: colors.lightPrimaryText, + imageCropBackgroundColor: colors.lightIcons, + fallbackIconColor: colors.green700, + reactionActiveBackground: colors.green100, + reactionActiveText: colors.green600, + badgeAdHoc: colors.pink600, + badgeAdHocHover: colors.pink700, + mentionText: colors.blue600, + mentionBG: colors.blue100, + ourMentionText: colors.green600, + ourMentionBG: colors.green100, + tooltipSupportingText: colors.darkSupportingText, + tooltipPrimaryText: colors.darkPrimaryText, + skeletonLHNIn: colors.lightBorders, + skeletonLHNOut: colors.lightDefaultButtonPressed, + QRLogo: colors.green400, + starDefaultBG: 'rgb(254, 228, 94)', +}; + +lightTheme.PAGE_BACKGROUND_COLORS = { + [SCREENS.HOME]: lightTheme.sidebar, + [SCREENS.SETTINGS.PREFERENCES]: colors.blue500, + [SCREENS.SETTINGS.WORKSPACES]: colors.pink800, + [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800, + [ROUTES.SETTINGS_SECURITY]: colors.ice500, +}; + +export default lightTheme;