From a05ef4bb5101e6e8d999ad0d7383b394996fb763 Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 15 Oct 2021 17:20:09 +0530 Subject: chore: move 'packages/themes' into 'src' (no longer an injected package) (#2080) --- src/components/ui/badge/ProBadge.tsx | 2 +- src/components/ui/badge/index.tsx | 2 +- src/components/ui/button/index.tsx | 2 +- src/components/ui/error/styles.ts | 2 +- src/components/ui/headline/index.tsx | 2 +- src/components/ui/icon/index.tsx | 2 +- src/components/ui/infobox/index.tsx | 2 +- src/components/ui/input/styles.ts | 2 +- src/components/ui/label/styles.ts | 2 +- src/components/ui/select/index.tsx | 3 +- src/components/ui/textarea/styles.ts | 2 +- src/components/ui/toggle/index.tsx | 2 +- src/components/ui/typings/generic.ts | 2 +- src/config.ts | 2 +- src/features/todos/store.js | 2 +- src/stores/UIStore.ts | 2 +- src/themes/IStyleTypes.ts | 7 + src/themes/dark/index.ts | 171 ++++++++++++++++++++++++ src/themes/default/index.ts | 251 +++++++++++++++++++++++++++++++++++ src/themes/index.ts | 21 +++ src/themes/legacy/index.ts | 40 ++++++ 21 files changed, 506 insertions(+), 17 deletions(-) create mode 100644 src/themes/IStyleTypes.ts create mode 100644 src/themes/dark/index.ts create mode 100644 src/themes/default/index.ts create mode 100644 src/themes/index.ts create mode 100644 src/themes/legacy/index.ts (limited to 'src') diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx index cb6bc4c98..dc1e76f7f 100644 --- a/src/components/ui/badge/ProBadge.tsx +++ b/src/components/ui/badge/ProBadge.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import { Component } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { Icon } from '../icon'; import { Badge } from './index'; import { IWithStyle } from '../typings/generic'; diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index 6495036ff..61bede937 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx @@ -2,7 +2,7 @@ import classnames from 'classnames'; import { Component, ReactNode } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { IWithStyle } from '../typings/generic'; interface IProps extends IWithStyle { diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 5b8927b51..12e5e4449 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -4,8 +4,8 @@ import { Property } from 'csstype'; import { Component, MouseEvent } from 'react'; import injectStyle, { withTheme } from 'react-jss'; import Loader from 'react-loader'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { IFormField, IWithStyle } from '../typings/generic'; type ButtonType = diff --git a/src/components/ui/error/styles.ts b/src/components/ui/error/styles.ts index ed993ddd5..9da95705a 100644 --- a/src/components/ui/error/styles.ts +++ b/src/components/ui/error/styles.ts @@ -1,4 +1,4 @@ -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; export default (theme: Theme) => ({ message: { diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index 3a3654f02..ea2949102 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx @@ -2,7 +2,7 @@ import classnames from 'classnames'; import { Component, createElement, ReactNode } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { IWithStyle, Omit } from '../typings/generic'; interface IProps extends IWithStyle { diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index fdc48d14a..85bb61d13 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import { Component } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { IWithStyle } from '../typings/generic'; interface IProps extends IWithStyle { diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index e6be83556..87940c4d4 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import { Component, ReactNode } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { Icon } from '../icon'; import { IWithStyle } from '../typings/generic'; diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts index 27426152e..04c1b3991 100644 --- a/src/components/ui/input/styles.ts +++ b/src/components/ui/input/styles.ts @@ -1,6 +1,6 @@ import { Property } from 'csstype'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; const prefixStyles = (theme: Theme) => ({ background: theme.inputPrefixBackground, diff --git a/src/components/ui/label/styles.ts b/src/components/ui/label/styles.ts index 0c9cef8bf..faa44ae5b 100644 --- a/src/components/ui/label/styles.ts +++ b/src/components/ui/label/styles.ts @@ -1,4 +1,4 @@ -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; export default (theme: Theme) => ({ content: {}, diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx index 41cab7818..2605503a3 100644 --- a/src/components/ui/select/index.tsx +++ b/src/components/ui/select/index.tsx @@ -8,8 +8,7 @@ import classnames from 'classnames'; import { ChangeEvent, Component, createRef } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; - +import { Theme } from '../../../themes'; import { IFormField, IWithStyle } from '../typings/generic'; import { Error } from '../error'; diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts index f2267e000..36fc2a82e 100644 --- a/src/components/ui/textarea/styles.ts +++ b/src/components/ui/textarea/styles.ts @@ -1,6 +1,6 @@ import { Property } from 'csstype'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; export default (theme: Theme) => ({ label: { diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index 67b6c3835..7b6ba147f 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx @@ -2,8 +2,8 @@ import classnames from 'classnames'; import { Property } from 'csstype'; import { Component, InputHTMLAttributes } from 'react'; import injectStyle from 'react-jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; import { IFormField, IWithStyle } from '../typings/generic'; import { Error } from '../error'; diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts index 084e0e0a5..65b996d59 100644 --- a/src/components/ui/typings/generic.ts +++ b/src/components/ui/typings/generic.ts @@ -1,6 +1,6 @@ import { Classes } from 'jss'; -import { Theme } from '@meetfranz/theme'; +import { Theme } from '../../../themes'; export interface IFormField { showLabel?: boolean; diff --git a/src/config.ts b/src/config.ts index e1e8230c2..5f95a59f4 100644 --- a/src/config.ts +++ b/src/config.ts @@ -2,7 +2,7 @@ import ms from 'ms'; -import { DEFAULT_ACCENT_COLOR } from '@meetfranz/theme'; +export const DEFAULT_ACCENT_COLOR = '#7266F0'; export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks diff --git a/src/features/todos/store.js b/src/features/todos/store.js index ec06c279d..010a029ff 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js @@ -1,7 +1,7 @@ -import { ThemeType } from '@meetfranz/theme'; import { computed, action, observable } from 'mobx'; import localStorage from 'mobx-localstorage'; +import { ThemeType } from '../../themes'; import { todoActions } from './actions'; import { CUSTOM_TODO_SERVICE, diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index 6ab63c2ee..6a9597006 100644 --- a/src/stores/UIStore.ts +++ b/src/stores/UIStore.ts @@ -1,7 +1,7 @@ import { action, observable, computed, reaction } from 'mobx'; -import { theme, ThemeType } from '@meetfranz/theme'; import { nativeTheme, systemPreferences } from '@electron/remote'; +import { theme, ThemeType } from '../themes'; import Store from './lib/Store'; import { isMac, isWindows } from '../environment'; diff --git a/src/themes/IStyleTypes.ts b/src/themes/IStyleTypes.ts new file mode 100644 index 000000000..48f52daf2 --- /dev/null +++ b/src/themes/IStyleTypes.ts @@ -0,0 +1,7 @@ +export interface IStyleTypes { + [index: string]: { + accent: string; + contrast: string; + border?: string; + }; +} diff --git a/src/themes/dark/index.ts b/src/themes/dark/index.ts new file mode 100644 index 000000000..aa132c743 --- /dev/null +++ b/src/themes/dark/index.ts @@ -0,0 +1,171 @@ +import color from 'color'; +import { cloneDeep, merge } from 'lodash'; + +import makeDefaultThemeConfig from '../default'; +import * as legacyStyles from '../legacy'; + +export default (brandPrimary: string) => { + const defaultStyles = makeDefaultThemeConfig(brandPrimary); + let brandPrimaryColor = color(legacyStyles.themeBrandPrimary); + try { + brandPrimaryColor = color(defaultStyles.brandPrimary); + } catch { + // Ignore invalid color and fall back to default. + } + + const colorBackground = legacyStyles.darkThemeGrayDarkest; + const colorText = legacyStyles.darkThemeTextColor; + const inputColor = legacyStyles.darkThemeGrayLightest; + const inputBackground = legacyStyles.themeGrayDark; + const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; + const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) + .lighten(0.3) + .hex(); + const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; + const selectColor = inputColor; + const drawerBg = color(colorBackground).lighten(0.3).hex(); + + const services = merge({}, defaultStyles.services, { + listItems: { + borderColor: legacyStyles.darkThemeGrayDarker, + hoverBgColor: legacyStyles.darkThemeGrayDarker, + disabled: { + color: legacyStyles.darkThemeGray, + }, + }, + }); + + return { + ...defaultStyles, + + colorBackground, + colorContentBackground: legacyStyles.darkThemeGrayDarkest, + colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo, + + colorHeadline: legacyStyles.darkThemeTextColor, + colorText: legacyStyles.darkThemeTextColor, + + defaultContentBorder: legacyStyles.themeGrayDark, + + // Loader + colorFullscreenLoaderSpinner: '#FFF', + colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) + .alpha(0.5) + .rgb() + .string(), + + // Input + labelColor: legacyStyles.darkThemeTextColor, + inputColor, + inputBackground, + inputBorder, + inputPrefixColor, + inputPrefixBackground: legacyStyles.darkThemeGray, + inputDisabledOpacity: 0.5, + inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, + inputModifierColor: color(legacyStyles.darkThemeGrayLighter) + .lighten(0.3) + .hex(), + inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) + .darken(0.1) + .hex(), + + // Toggle + toggleBackground: legacyStyles.darkThemeGray, + toggleButton: legacyStyles.darkThemeGrayLighter, + + // Button + buttonPrimaryTextColor: legacyStyles.darkThemeTextColor, + + buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter, + buttonSecondaryTextColor, + + buttonDangerTextColor: legacyStyles.darkThemeTextColor, + + buttonWarningTextColor: legacyStyles.darkThemeTextColor, + + buttonLoaderColor: { + primary: '#FFF', + secondary: buttonSecondaryTextColor, + success: '#FFF', + warning: '#FFF', + danger: '#FFF', + inverted: defaultStyles.brandPrimary, + }, + + // Select + selectBackground: inputBackground, + selectBorder: inputBorder, + selectColor, + selectToggleColor: inputPrefixColor, + selectPopupBackground: legacyStyles.darkThemeGrayLight, + selectOptionColor: '#FFF', + selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) + .darken(0.2) + .hex()}`, + selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) + .darken(0.2) + .hex(), + selectOptionItemHoverColor: selectColor, + selectSearchColor: inputBackground, + + // Modal + colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) + .alpha(0.9) + .rgb() + .string(), + colorModalBackground: legacyStyles.darkThemeGrayDark, + + // Services + services, + + // Service Icon + serviceIcon: merge({}, defaultStyles.serviceIcon, { + isCustom: { + border: `1px solid ${legacyStyles.darkThemeGrayDark}`, + }, + }), + + // Workspaces + workspaces: merge({}, defaultStyles.workspaces, { + settings: { + listItems: cloneDeep(services.listItems), + }, + drawer: { + background: drawerBg, + addButton: { + color: legacyStyles.darkThemeGrayLighter, + hoverColor: legacyStyles.darkThemeGraySmoke, + }, + listItem: { + border: color(drawerBg).lighten(0.2).hex(), + hoverBackground: color(drawerBg).lighten(0.2).hex(), + activeBackground: defaultStyles.brandPrimary, + name: { + color: colorText, + activeColor: 'white', + }, + services: { + color: color(colorText).darken(0.5).hex(), + active: brandPrimaryColor.lighten(0.5).hex(), + }, + }, + }, + }), + + // Todos + todos: merge({}, defaultStyles.todos, { + todosLayer: { + borderLeftColor: legacyStyles.darkThemeGrayDarker, + }, + toggleButton: { + background: defaultStyles.styleTypes.primary.accent, + textColor: defaultStyles.styleTypes.primary.contrast, + shadowColor: 'rgba(0, 0, 0, 0.2)', + }, + dragIndicator: { + background: legacyStyles.themeGrayLight, + }, + }), + }; +}; diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts new file mode 100644 index 000000000..80bcba766 --- /dev/null +++ b/src/themes/default/index.ts @@ -0,0 +1,251 @@ +import color from 'color'; +import { cloneDeep } from 'lodash'; + +import * as legacyStyles from '../legacy'; +import type { IStyleTypes } from '../IStyleTypes'; + +export default (brandPrimary: string) => { + const brandSuccess = '#5cb85c'; + const brandInfo = '#5bc0de'; + const brandWarning = '#FF9F00'; + const brandDanger = '#d9534f'; + const uiFontSize = 14; + const colorBackground = legacyStyles.themeGrayLighter; + const colorContentBackground = '#FFFFFF'; + const colorText = legacyStyles.themeTextColor; + const inputColor = legacyStyles.themeGray; + const inputBackground = legacyStyles.themeGrayLightest; + const inputHeight = 40; + const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; + const inputPrefixColor = legacyStyles.themeGrayLight; + const inputDisabledOpacity = 0.5; + const buttonSecondaryTextColor = legacyStyles.themeGray; + const selectColor = inputColor; + const drawerBg = color(colorBackground).lighten(0.1).hex(); + + const styleTypes: IStyleTypes = { + primary: { + accent: brandPrimary, + contrast: '#FFF', + }, + secondary: { + accent: legacyStyles.themeGrayLighter, + contrast: legacyStyles.themeGray, + }, + success: { + accent: brandSuccess, + contrast: '#FFF', + }, + warning: { + accent: brandWarning, + contrast: '#FFF', + }, + danger: { + accent: brandDanger, + contrast: '#FFF', + }, + inverted: { + accent: 'none', + contrast: brandPrimary, + border: `1px solid ${brandPrimary}`, + }, + }; + + const services = { + listItems: { + padding: 10, + height: 57, + borderColor: legacyStyles.themeGrayLightest, + hoverBgColor: legacyStyles.themeGrayLightest, + disabled: { + color: legacyStyles.themeGrayLight, + }, + }, + }; + + return { + brandPrimary, + brandSuccess, + brandInfo, + brandWarning, + brandDanger, + + uiFontSize, + + borderRadius: legacyStyles.themeBorderRadius, + borderRadiusSmall: legacyStyles.themeBorderRadiusSmall, + + colorBackground, + + colorContentBackground, + colorHeadline: legacyStyles.themeGrayDark, + + colorText, + + defaultContentBorder: color(legacyStyles.themeGrayLighter) + .darken(0.1) + .rgb() + .string(), + + // Subscription Container Component + colorSubscriptionContainerBackground: 'none', + colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`, + colorSubscriptionContainerTitle: brandPrimary, + colorSubscriptionContainerActionButtonBackground: brandPrimary, + colorSubscriptionContainerActionButtonColor: '#FFF', + + // Loader + colorAppLoaderSpinner: '#FFF', + colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, + colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter) + .alpha(0.8) + .rgb() + .string(), + + // Input + labelColor: legacyStyles.themeGrayLight, + inputColor, + inputHeight, + inputBackground, + inputBorder, + inputModifierColor: legacyStyles.themeGrayLight, + inputPlaceholderColor: color(legacyStyles.themeGrayLight) + .lighten(0.3) + .hex(), + inputPrefixColor, + inputPrefixBackground: legacyStyles.themeGrayLighter, + inputDisabledOpacity, + inputScorePasswordBackground: legacyStyles.themeGrayLighter, + + // Toggle + toggleBackground: legacyStyles.themeGrayLighter, + toggleButton: legacyStyles.themeGrayLight, + toggleButtonActive: brandPrimary, + toggleWidth: 40, + toggleHeight: 14, + + // Style Types + styleTypes, + + // Button + buttonPrimaryBackground: brandPrimary, + buttonPrimaryTextColor: '#FFF', + + buttonSecondaryBackground: legacyStyles.themeGrayLighter, + buttonSecondaryTextColor, + + buttonSuccessBackground: brandSuccess, + buttonSuccessTextColor: '#FFF', + + buttonDangerBackground: brandDanger, + buttonDangerTextColor: '#FFF', + + buttonWarningBackground: brandWarning, + buttonWarningTextColor: '#FFF', + + buttonInvertedBackground: 'none', + buttonInvertedTextColor: brandPrimary, + buttonInvertedBorder: `1px solid ${brandPrimary}`, + + buttonHeight: inputHeight, + + buttonLoaderColor: { + primary: '#FFF', + secondary: buttonSecondaryTextColor, + success: '#FFF', + warning: '#FFF', + danger: '#FFF', + inverted: brandPrimary, + }, + + // Select + selectBackground: inputBackground, + selectBorder: inputBorder, + selectHeight: inputHeight, + selectColor, + selectToggleColor: inputPrefixColor, + selectPopupBackground: '#FFF', + selectOptionColor: inputColor, + selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`, + selectOptionItemHover: legacyStyles.themeGrayLighter, + selectOptionItemHoverColor: selectColor, + selectOptionItemActive: brandPrimary, + selectOptionItemActiveColor: '#FFF', + selectSearchBackground: legacyStyles.themeGrayLighter, + selectSearchColor: inputColor, + selectDisabledOpacity: inputDisabledOpacity, + + // Badge + badgeFontSize: uiFontSize - 2, + badgeBorderRadius: 50, + + // Modal + colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(), + colorModalBackground: colorContentBackground, + + // Services + services, + + // Service Icon + serviceIcon: { + width: 35, + isCustom: { + border: `1px solid ${legacyStyles.themeGrayLighter}`, + borderRadius: legacyStyles.themeBorderRadius, + width: 37, + }, + }, + + // Workspaces + workspaces: { + settings: { + listItems: cloneDeep(services.listItems), + }, + drawer: { + width: 300, + padding: 20, + background: drawerBg, + buttons: { + color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), + hoverColor: legacyStyles.themeGrayLight, + }, + listItem: { + hoverBackground: color(drawerBg).darken(0.01).hex(), + activeBackground: legacyStyles.themeGrayLightest, + border: color(drawerBg).darken(0.05).hex(), + name: { + color: colorText, + activeColor: colorText, + }, + services: { + color: color(colorText).lighten(1.5).hex(), + active: color(colorText).lighten(1.5).hex(), + }, + }, + }, + switchingIndicator: { + spinnerColor: 'white', + }, + }, + + // Todos + todos: { + todosLayer: { + borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), + }, + toggleButton: { + background: styleTypes.primary.accent, + textColor: styleTypes.primary.contrast, + shadowColor: 'rgba(0, 0, 0, 0.2)', + }, + dragIndicator: { + background: legacyStyles.themeGrayLight, + }, + resizeHandler: { + backgroundHover: styleTypes.primary.accent, + }, + }, + + legacyStyles, + }; +}; diff --git a/src/themes/index.ts b/src/themes/index.ts new file mode 100644 index 000000000..27be4d04b --- /dev/null +++ b/src/themes/index.ts @@ -0,0 +1,21 @@ +import makeDarkThemeConfig from './dark'; +import makeDefaultThemeConfig from './default'; +import { themeBrandPrimary } from './legacy'; + +export enum ThemeType { + default = 'default', + dark = 'dark', +} + +export function theme( + themeId: ThemeType, + brandColor: string = themeBrandPrimary, +) { + return themeId === ThemeType.dark + ? makeDarkThemeConfig(brandColor) + : makeDefaultThemeConfig(brandColor); +} + +const defaultThemeConfigWithDefaultAccentColor = makeDefaultThemeConfig(themeBrandPrimary); + +export type Theme = typeof defaultThemeConfigWithDefaultAccentColor; diff --git a/src/themes/legacy/index.ts b/src/themes/legacy/index.ts new file mode 100644 index 000000000..c6105a4e2 --- /dev/null +++ b/src/themes/legacy/index.ts @@ -0,0 +1,40 @@ +import { DEFAULT_ACCENT_COLOR } from '../../config'; + +/* legacy config, injected into sass */ +export const themeBrandPrimary = DEFAULT_ACCENT_COLOR; +export const themeBrandSuccess = '#5cb85c'; +export const themeBrandInfo = '#5bc0de'; +export const themeBrandWarning = '#FF9F00'; +export const themeBrandDanger = '#d9534f'; + +export const themeGrayDark = '#373a3c'; +export const themeGray = '#55595c'; +export const themeGrayLight = '#818a91'; +export const themeGrayLighter = '#eceeef'; +export const themeGrayLightest = '#f7f7f9'; + +export const themeBorderRadius = '6px'; +export const themeBorderRadiusSmall = '3px'; + +export const themeSidebarWidth = '68px'; + +export const themeTextColor = themeGrayDark; + +export const themeTransitionTime = '.5s'; + +export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; + +export const darkThemeBlack = '#1A1A1A'; + +export const darkThemeGrayDarkest = '#1E1E1E'; +export const darkThemeGrayDarker = '#2D2F31'; +export const darkThemeGrayDark = '#383A3B'; + +export const darkThemeGray = '#47494B'; + +export const darkThemeGrayLight = '#515355'; +export const darkThemeGrayLighter = '#8a8b8b'; +export const darkThemeGrayLightest = '#FFFFFF'; + +export const darkThemeGraySmoke = '#CED0D1'; +export const darkThemeTextColor = '#FFFFFF'; -- cgit v1.2.3-54-g00ecf