aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/ui/badge/ProBadge.tsx2
-rw-r--r--src/components/ui/badge/index.tsx2
-rw-r--r--src/components/ui/button/index.tsx2
-rw-r--r--src/components/ui/error/styles.ts2
-rw-r--r--src/components/ui/headline/index.tsx2
-rw-r--r--src/components/ui/icon/index.tsx2
-rw-r--r--src/components/ui/infobox/index.tsx2
-rw-r--r--src/components/ui/input/styles.ts2
-rw-r--r--src/components/ui/label/styles.ts2
-rw-r--r--src/components/ui/select/index.tsx3
-rw-r--r--src/components/ui/textarea/styles.ts2
-rw-r--r--src/components/ui/toggle/index.tsx2
-rw-r--r--src/components/ui/typings/generic.ts2
-rw-r--r--src/config.ts2
-rw-r--r--src/features/todos/store.js2
-rw-r--r--src/stores/UIStore.ts2
-rw-r--r--src/themes/IStyleTypes.ts7
-rw-r--r--src/themes/dark/index.ts171
-rw-r--r--src/themes/default/index.ts251
-rw-r--r--src/themes/index.ts21
-rw-r--r--src/themes/legacy/index.ts40
21 files changed, 506 insertions, 17 deletions
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';
3import { Component } from 'react'; 3import { Component } from 'react';
4import injectStyle from 'react-jss'; 4import injectStyle from 'react-jss';
5 5
6import { Theme } from '@meetfranz/theme'; 6import { Theme } from '../../../themes';
7import { Icon } from '../icon'; 7import { Icon } from '../icon';
8import { Badge } from './index'; 8import { Badge } from './index';
9import { IWithStyle } from '../typings/generic'; 9import { 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';
2import { Component, ReactNode } from 'react'; 2import { Component, ReactNode } from 'react';
3import injectStyle from 'react-jss'; 3import injectStyle from 'react-jss';
4 4
5import { Theme } from '@meetfranz/theme'; 5import { Theme } from '../../../themes';
6import { IWithStyle } from '../typings/generic'; 6import { IWithStyle } from '../typings/generic';
7 7
8interface IProps extends IWithStyle { 8interface 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';
4import { Component, MouseEvent } from 'react'; 4import { Component, MouseEvent } from 'react';
5import injectStyle, { withTheme } from 'react-jss'; 5import injectStyle, { withTheme } from 'react-jss';
6import Loader from 'react-loader'; 6import Loader from 'react-loader';
7import { Theme } from '@meetfranz/theme';
8 7
8import { Theme } from '../../../themes';
9import { IFormField, IWithStyle } from '../typings/generic'; 9import { IFormField, IWithStyle } from '../typings/generic';
10 10
11type ButtonType = 11type 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 @@
1import { Theme } from '@meetfranz/theme'; 1import { Theme } from '../../../themes';
2 2
3export default (theme: Theme) => ({ 3export default (theme: Theme) => ({
4 message: { 4 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';
2import { Component, createElement, ReactNode } from 'react'; 2import { Component, createElement, ReactNode } from 'react';
3import injectStyle from 'react-jss'; 3import injectStyle from 'react-jss';
4 4
5import { Theme } from '@meetfranz/theme'; 5import { Theme } from '../../../themes';
6import { IWithStyle, Omit } from '../typings/generic'; 6import { IWithStyle, Omit } from '../typings/generic';
7 7
8interface IProps extends IWithStyle { 8interface 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';
3import { Component } from 'react'; 3import { Component } from 'react';
4import injectStyle from 'react-jss'; 4import injectStyle from 'react-jss';
5 5
6import { Theme } from '@meetfranz/theme'; 6import { Theme } from '../../../themes';
7import { IWithStyle } from '../typings/generic'; 7import { IWithStyle } from '../typings/generic';
8 8
9interface IProps extends IWithStyle { 9interface 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';
3import { Component, ReactNode } from 'react'; 3import { Component, ReactNode } from 'react';
4import injectStyle from 'react-jss'; 4import injectStyle from 'react-jss';
5 5
6import { Theme } from '@meetfranz/theme'; 6import { Theme } from '../../../themes';
7import { Icon } from '../icon'; 7import { Icon } from '../icon';
8import { IWithStyle } from '../typings/generic'; 8import { IWithStyle } from '../typings/generic';
9 9
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 @@
1import { Property } from 'csstype'; 1import { Property } from 'csstype';
2 2
3import { Theme } from '@meetfranz/theme'; 3import { Theme } from '../../../themes';
4 4
5const prefixStyles = (theme: Theme) => ({ 5const prefixStyles = (theme: Theme) => ({
6 background: theme.inputPrefixBackground, 6 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 @@
1import { Theme } from '@meetfranz/theme'; 1import { Theme } from '../../../themes';
2 2
3export default (theme: Theme) => ({ 3export default (theme: Theme) => ({
4 content: {}, 4 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';
8import { ChangeEvent, Component, createRef } from 'react'; 8import { ChangeEvent, Component, createRef } from 'react';
9import injectStyle from 'react-jss'; 9import injectStyle from 'react-jss';
10 10
11import { Theme } from '@meetfranz/theme'; 11import { Theme } from '../../../themes';
12
13import { IFormField, IWithStyle } from '../typings/generic'; 12import { IFormField, IWithStyle } from '../typings/generic';
14 13
15import { Error } from '../error'; 14import { 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 @@
1import { Property } from 'csstype'; 1import { Property } from 'csstype';
2 2
3import { Theme } from '@meetfranz/theme'; 3import { Theme } from '../../../themes';
4 4
5export default (theme: Theme) => ({ 5export default (theme: Theme) => ({
6 label: { 6 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';
2import { Property } from 'csstype'; 2import { Property } from 'csstype';
3import { Component, InputHTMLAttributes } from 'react'; 3import { Component, InputHTMLAttributes } from 'react';
4import injectStyle from 'react-jss'; 4import injectStyle from 'react-jss';
5import { Theme } from '@meetfranz/theme';
6 5
6import { Theme } from '../../../themes';
7import { IFormField, IWithStyle } from '../typings/generic'; 7import { IFormField, IWithStyle } from '../typings/generic';
8 8
9import { Error } from '../error'; 9import { 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 @@
1import { Classes } from 'jss'; 1import { Classes } from 'jss';
2 2
3import { Theme } from '@meetfranz/theme'; 3import { Theme } from '../../../themes';
4 4
5export interface IFormField { 5export interface IFormField {
6 showLabel?: boolean; 6 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 @@
2 2
3import ms from 'ms'; 3import ms from 'ms';
4 4
5import { DEFAULT_ACCENT_COLOR } from '@meetfranz/theme'; 5export const DEFAULT_ACCENT_COLOR = '#7266F0';
6 6
7export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks 7export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
8 8
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 @@
1import { ThemeType } from '@meetfranz/theme';
2import { computed, action, observable } from 'mobx'; 1import { computed, action, observable } from 'mobx';
3import localStorage from 'mobx-localstorage'; 2import localStorage from 'mobx-localstorage';
4 3
4import { ThemeType } from '../../themes';
5import { todoActions } from './actions'; 5import { todoActions } from './actions';
6import { 6import {
7 CUSTOM_TODO_SERVICE, 7 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 @@
1import { action, observable, computed, reaction } from 'mobx'; 1import { action, observable, computed, reaction } from 'mobx';
2import { theme, ThemeType } from '@meetfranz/theme';
3import { nativeTheme, systemPreferences } from '@electron/remote'; 2import { nativeTheme, systemPreferences } from '@electron/remote';
4 3
4import { theme, ThemeType } from '../themes';
5import Store from './lib/Store'; 5import Store from './lib/Store';
6import { isMac, isWindows } from '../environment'; 6import { isMac, isWindows } from '../environment';
7 7
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 @@
1export interface IStyleTypes {
2 [index: string]: {
3 accent: string;
4 contrast: string;
5 border?: string;
6 };
7}
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 @@
1import color from 'color';
2import { cloneDeep, merge } from 'lodash';
3
4import makeDefaultThemeConfig from '../default';
5import * as legacyStyles from '../legacy';
6
7export default (brandPrimary: string) => {
8 const defaultStyles = makeDefaultThemeConfig(brandPrimary);
9 let brandPrimaryColor = color(legacyStyles.themeBrandPrimary);
10 try {
11 brandPrimaryColor = color(defaultStyles.brandPrimary);
12 } catch {
13 // Ignore invalid color and fall back to default.
14 }
15
16 const colorBackground = legacyStyles.darkThemeGrayDarkest;
17 const colorText = legacyStyles.darkThemeTextColor;
18 const inputColor = legacyStyles.darkThemeGrayLightest;
19 const inputBackground = legacyStyles.themeGrayDark;
20 const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
21 const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter)
22 .lighten(0.3)
23 .hex();
24 const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
25 const selectColor = inputColor;
26 const drawerBg = color(colorBackground).lighten(0.3).hex();
27
28 const services = merge({}, defaultStyles.services, {
29 listItems: {
30 borderColor: legacyStyles.darkThemeGrayDarker,
31 hoverBgColor: legacyStyles.darkThemeGrayDarker,
32 disabled: {
33 color: legacyStyles.darkThemeGray,
34 },
35 },
36 });
37
38 return {
39 ...defaultStyles,
40
41 colorBackground,
42 colorContentBackground: legacyStyles.darkThemeGrayDarkest,
43 colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo,
44
45 colorHeadline: legacyStyles.darkThemeTextColor,
46 colorText: legacyStyles.darkThemeTextColor,
47
48 defaultContentBorder: legacyStyles.themeGrayDark,
49
50 // Loader
51 colorFullscreenLoaderSpinner: '#FFF',
52 colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest)
53 .alpha(0.5)
54 .rgb()
55 .string(),
56
57 // Input
58 labelColor: legacyStyles.darkThemeTextColor,
59 inputColor,
60 inputBackground,
61 inputBorder,
62 inputPrefixColor,
63 inputPrefixBackground: legacyStyles.darkThemeGray,
64 inputDisabledOpacity: 0.5,
65 inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
66 inputModifierColor: color(legacyStyles.darkThemeGrayLighter)
67 .lighten(0.3)
68 .hex(),
69 inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter)
70 .darken(0.1)
71 .hex(),
72
73 // Toggle
74 toggleBackground: legacyStyles.darkThemeGray,
75 toggleButton: legacyStyles.darkThemeGrayLighter,
76
77 // Button
78 buttonPrimaryTextColor: legacyStyles.darkThemeTextColor,
79
80 buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter,
81 buttonSecondaryTextColor,
82
83 buttonDangerTextColor: legacyStyles.darkThemeTextColor,
84
85 buttonWarningTextColor: legacyStyles.darkThemeTextColor,
86
87 buttonLoaderColor: {
88 primary: '#FFF',
89 secondary: buttonSecondaryTextColor,
90 success: '#FFF',
91 warning: '#FFF',
92 danger: '#FFF',
93 inverted: defaultStyles.brandPrimary,
94 },
95
96 // Select
97 selectBackground: inputBackground,
98 selectBorder: inputBorder,
99 selectColor,
100 selectToggleColor: inputPrefixColor,
101 selectPopupBackground: legacyStyles.darkThemeGrayLight,
102 selectOptionColor: '#FFF',
103 selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight)
104 .darken(0.2)
105 .hex()}`,
106 selectOptionItemHover: color(legacyStyles.darkThemeGrayLight)
107 .darken(0.2)
108 .hex(),
109 selectOptionItemHoverColor: selectColor,
110 selectSearchColor: inputBackground,
111
112 // Modal
113 colorModalOverlayBackground: color(legacyStyles.darkThemeBlack)
114 .alpha(0.9)
115 .rgb()
116 .string(),
117 colorModalBackground: legacyStyles.darkThemeGrayDark,
118
119 // Services
120 services,
121
122 // Service Icon
123 serviceIcon: merge({}, defaultStyles.serviceIcon, {
124 isCustom: {
125 border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
126 },
127 }),
128
129 // Workspaces
130 workspaces: merge({}, defaultStyles.workspaces, {
131 settings: {
132 listItems: cloneDeep(services.listItems),
133 },
134 drawer: {
135 background: drawerBg,
136 addButton: {
137 color: legacyStyles.darkThemeGrayLighter,
138 hoverColor: legacyStyles.darkThemeGraySmoke,
139 },
140 listItem: {
141 border: color(drawerBg).lighten(0.2).hex(),
142 hoverBackground: color(drawerBg).lighten(0.2).hex(),
143 activeBackground: defaultStyles.brandPrimary,
144 name: {
145 color: colorText,
146 activeColor: 'white',
147 },
148 services: {
149 color: color(colorText).darken(0.5).hex(),
150 active: brandPrimaryColor.lighten(0.5).hex(),
151 },
152 },
153 },
154 }),
155
156 // Todos
157 todos: merge({}, defaultStyles.todos, {
158 todosLayer: {
159 borderLeftColor: legacyStyles.darkThemeGrayDarker,
160 },
161 toggleButton: {
162 background: defaultStyles.styleTypes.primary.accent,
163 textColor: defaultStyles.styleTypes.primary.contrast,
164 shadowColor: 'rgba(0, 0, 0, 0.2)',
165 },
166 dragIndicator: {
167 background: legacyStyles.themeGrayLight,
168 },
169 }),
170 };
171};
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 @@
1import color from 'color';
2import { cloneDeep } from 'lodash';
3
4import * as legacyStyles from '../legacy';
5import type { IStyleTypes } from '../IStyleTypes';
6
7export default (brandPrimary: string) => {
8 const brandSuccess = '#5cb85c';
9 const brandInfo = '#5bc0de';
10 const brandWarning = '#FF9F00';
11 const brandDanger = '#d9534f';
12 const uiFontSize = 14;
13 const colorBackground = legacyStyles.themeGrayLighter;
14 const colorContentBackground = '#FFFFFF';
15 const colorText = legacyStyles.themeTextColor;
16 const inputColor = legacyStyles.themeGray;
17 const inputBackground = legacyStyles.themeGrayLightest;
18 const inputHeight = 40;
19 const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
20 const inputPrefixColor = legacyStyles.themeGrayLight;
21 const inputDisabledOpacity = 0.5;
22 const buttonSecondaryTextColor = legacyStyles.themeGray;
23 const selectColor = inputColor;
24 const drawerBg = color(colorBackground).lighten(0.1).hex();
25
26 const styleTypes: IStyleTypes = {
27 primary: {
28 accent: brandPrimary,
29 contrast: '#FFF',
30 },
31 secondary: {
32 accent: legacyStyles.themeGrayLighter,
33 contrast: legacyStyles.themeGray,
34 },
35 success: {
36 accent: brandSuccess,
37 contrast: '#FFF',
38 },
39 warning: {
40 accent: brandWarning,
41 contrast: '#FFF',
42 },
43 danger: {
44 accent: brandDanger,
45 contrast: '#FFF',
46 },
47 inverted: {
48 accent: 'none',
49 contrast: brandPrimary,
50 border: `1px solid ${brandPrimary}`,
51 },
52 };
53
54 const services = {
55 listItems: {
56 padding: 10,
57 height: 57,
58 borderColor: legacyStyles.themeGrayLightest,
59 hoverBgColor: legacyStyles.themeGrayLightest,
60 disabled: {
61 color: legacyStyles.themeGrayLight,
62 },
63 },
64 };
65
66 return {
67 brandPrimary,
68 brandSuccess,
69 brandInfo,
70 brandWarning,
71 brandDanger,
72
73 uiFontSize,
74
75 borderRadius: legacyStyles.themeBorderRadius,
76 borderRadiusSmall: legacyStyles.themeBorderRadiusSmall,
77
78 colorBackground,
79
80 colorContentBackground,
81 colorHeadline: legacyStyles.themeGrayDark,
82
83 colorText,
84
85 defaultContentBorder: color(legacyStyles.themeGrayLighter)
86 .darken(0.1)
87 .rgb()
88 .string(),
89
90 // Subscription Container Component
91 colorSubscriptionContainerBackground: 'none',
92 colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`,
93 colorSubscriptionContainerTitle: brandPrimary,
94 colorSubscriptionContainerActionButtonBackground: brandPrimary,
95 colorSubscriptionContainerActionButtonColor: '#FFF',
96
97 // Loader
98 colorAppLoaderSpinner: '#FFF',
99 colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark,
100 colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter)
101 .alpha(0.8)
102 .rgb()
103 .string(),
104
105 // Input
106 labelColor: legacyStyles.themeGrayLight,
107 inputColor,
108 inputHeight,
109 inputBackground,
110 inputBorder,
111 inputModifierColor: legacyStyles.themeGrayLight,
112 inputPlaceholderColor: color(legacyStyles.themeGrayLight)
113 .lighten(0.3)
114 .hex(),
115 inputPrefixColor,
116 inputPrefixBackground: legacyStyles.themeGrayLighter,
117 inputDisabledOpacity,
118 inputScorePasswordBackground: legacyStyles.themeGrayLighter,
119
120 // Toggle
121 toggleBackground: legacyStyles.themeGrayLighter,
122 toggleButton: legacyStyles.themeGrayLight,
123 toggleButtonActive: brandPrimary,
124 toggleWidth: 40,
125 toggleHeight: 14,
126
127 // Style Types
128 styleTypes,
129
130 // Button
131 buttonPrimaryBackground: brandPrimary,
132 buttonPrimaryTextColor: '#FFF',
133
134 buttonSecondaryBackground: legacyStyles.themeGrayLighter,
135 buttonSecondaryTextColor,
136
137 buttonSuccessBackground: brandSuccess,
138 buttonSuccessTextColor: '#FFF',
139
140 buttonDangerBackground: brandDanger,
141 buttonDangerTextColor: '#FFF',
142
143 buttonWarningBackground: brandWarning,
144 buttonWarningTextColor: '#FFF',
145
146 buttonInvertedBackground: 'none',
147 buttonInvertedTextColor: brandPrimary,
148 buttonInvertedBorder: `1px solid ${brandPrimary}`,
149
150 buttonHeight: inputHeight,
151
152 buttonLoaderColor: {
153 primary: '#FFF',
154 secondary: buttonSecondaryTextColor,
155 success: '#FFF',
156 warning: '#FFF',
157 danger: '#FFF',
158 inverted: brandPrimary,
159 },
160
161 // Select
162 selectBackground: inputBackground,
163 selectBorder: inputBorder,
164 selectHeight: inputHeight,
165 selectColor,
166 selectToggleColor: inputPrefixColor,
167 selectPopupBackground: '#FFF',
168 selectOptionColor: inputColor,
169 selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`,
170 selectOptionItemHover: legacyStyles.themeGrayLighter,
171 selectOptionItemHoverColor: selectColor,
172 selectOptionItemActive: brandPrimary,
173 selectOptionItemActiveColor: '#FFF',
174 selectSearchBackground: legacyStyles.themeGrayLighter,
175 selectSearchColor: inputColor,
176 selectDisabledOpacity: inputDisabledOpacity,
177
178 // Badge
179 badgeFontSize: uiFontSize - 2,
180 badgeBorderRadius: 50,
181
182 // Modal
183 colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(),
184 colorModalBackground: colorContentBackground,
185
186 // Services
187 services,
188
189 // Service Icon
190 serviceIcon: {
191 width: 35,
192 isCustom: {
193 border: `1px solid ${legacyStyles.themeGrayLighter}`,
194 borderRadius: legacyStyles.themeBorderRadius,
195 width: 37,
196 },
197 },
198
199 // Workspaces
200 workspaces: {
201 settings: {
202 listItems: cloneDeep(services.listItems),
203 },
204 drawer: {
205 width: 300,
206 padding: 20,
207 background: drawerBg,
208 buttons: {
209 color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
210 hoverColor: legacyStyles.themeGrayLight,
211 },
212 listItem: {
213 hoverBackground: color(drawerBg).darken(0.01).hex(),
214 activeBackground: legacyStyles.themeGrayLightest,
215 border: color(drawerBg).darken(0.05).hex(),
216 name: {
217 color: colorText,
218 activeColor: colorText,
219 },
220 services: {
221 color: color(colorText).lighten(1.5).hex(),
222 active: color(colorText).lighten(1.5).hex(),
223 },
224 },
225 },
226 switchingIndicator: {
227 spinnerColor: 'white',
228 },
229 },
230
231 // Todos
232 todos: {
233 todosLayer: {
234 borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
235 },
236 toggleButton: {
237 background: styleTypes.primary.accent,
238 textColor: styleTypes.primary.contrast,
239 shadowColor: 'rgba(0, 0, 0, 0.2)',
240 },
241 dragIndicator: {
242 background: legacyStyles.themeGrayLight,
243 },
244 resizeHandler: {
245 backgroundHover: styleTypes.primary.accent,
246 },
247 },
248
249 legacyStyles,
250 };
251};
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 @@
1import makeDarkThemeConfig from './dark';
2import makeDefaultThemeConfig from './default';
3import { themeBrandPrimary } from './legacy';
4
5export enum ThemeType {
6 default = 'default',
7 dark = 'dark',
8}
9
10export function theme(
11 themeId: ThemeType,
12 brandColor: string = themeBrandPrimary,
13) {
14 return themeId === ThemeType.dark
15 ? makeDarkThemeConfig(brandColor)
16 : makeDefaultThemeConfig(brandColor);
17}
18
19const defaultThemeConfigWithDefaultAccentColor = makeDefaultThemeConfig(themeBrandPrimary);
20
21export 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 @@
1import { DEFAULT_ACCENT_COLOR } from '../../config';
2
3/* legacy config, injected into sass */
4export const themeBrandPrimary = DEFAULT_ACCENT_COLOR;
5export const themeBrandSuccess = '#5cb85c';
6export const themeBrandInfo = '#5bc0de';
7export const themeBrandWarning = '#FF9F00';
8export const themeBrandDanger = '#d9534f';
9
10export const themeGrayDark = '#373a3c';
11export const themeGray = '#55595c';
12export const themeGrayLight = '#818a91';
13export const themeGrayLighter = '#eceeef';
14export const themeGrayLightest = '#f7f7f9';
15
16export const themeBorderRadius = '6px';
17export const themeBorderRadiusSmall = '3px';
18
19export const themeSidebarWidth = '68px';
20
21export const themeTextColor = themeGrayDark;
22
23export const themeTransitionTime = '.5s';
24
25export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)';
26
27export const darkThemeBlack = '#1A1A1A';
28
29export const darkThemeGrayDarkest = '#1E1E1E';
30export const darkThemeGrayDarker = '#2D2F31';
31export const darkThemeGrayDark = '#383A3B';
32
33export const darkThemeGray = '#47494B';
34
35export const darkThemeGrayLight = '#515355';
36export const darkThemeGrayLighter = '#8a8b8b';
37export const darkThemeGrayLightest = '#FFFFFF';
38
39export const darkThemeGraySmoke = '#CED0D1';
40export const darkThemeTextColor = '#FFFFFF';
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-11 22:52:54 +0000