diff options
-rw-r--r-- | packages/theme/package-lock.json | 2 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 19 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 28 |
3 files changed, 47 insertions, 2 deletions
diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json index e03ce42e3..f188e8d98 100644 --- a/packages/theme/package-lock.json +++ b/packages/theme/package-lock.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/theme", | 2 | "name": "@meetfranz/theme", |
3 | "version": "1.0.0", | 3 | "version": "1.0.1", |
4 | "lockfileVersion": 1, | 4 | "lockfileVersion": 1, |
5 | "requires": true, | 5 | "requires": true, |
6 | "dependencies": { | 6 | "dependencies": { |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 0cc4caa16..bc2db5ca0 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -1,5 +1,6 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | 2 | ||
3 | import * as defaultStyles from '../default'; | ||
3 | import * as legacyStyles from '../legacy'; | 4 | import * as legacyStyles from '../legacy'; |
4 | 5 | ||
5 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | 6 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; |
@@ -28,3 +29,21 @@ export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).da | |||
28 | // Toggle | 29 | // Toggle |
29 | export const toggleBackground = legacyStyles.darkThemeGray; | 30 | export const toggleBackground = legacyStyles.darkThemeGray; |
30 | export const toggleButton = legacyStyles.darkThemeGrayLighter; | 31 | export const toggleButton = legacyStyles.darkThemeGrayLighter; |
32 | |||
33 | // Button | ||
34 | export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor; | ||
35 | |||
36 | export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter; | ||
37 | export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | ||
38 | |||
39 | export const buttonDangerTextColor = legacyStyles.darkThemeTextColor; | ||
40 | |||
41 | export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; | ||
42 | |||
43 | export const buttonLoaderColor = { | ||
44 | primary: '#FFF', | ||
45 | secondary: buttonSecondaryTextColor, | ||
46 | warning: '#FFF', | ||
47 | danger: '#FFF', | ||
48 | inverted: defaultStyles.brandPrimary, | ||
49 | }; | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index ea218cd8f..92b82cff1 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -8,6 +8,8 @@ export const brandInfo = '#5bc0de'; | |||
8 | export const brandWarning = '#FF9F00'; | 8 | export const brandWarning = '#FF9F00'; |
9 | export const brandDanger = '#d9534f'; | 9 | export const brandDanger = '#d9534f'; |
10 | 10 | ||
11 | export const uiFontSize = 14; | ||
12 | |||
11 | export const borderRadius = legacyStyles.themeBorderRadius; | 13 | export const borderRadius = legacyStyles.themeBorderRadius; |
12 | export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall; | 14 | export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall; |
13 | 15 | ||
@@ -33,7 +35,6 @@ export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter) | |||
33 | export const labelColor = legacyStyles.themeGrayLight; | 35 | export const labelColor = legacyStyles.themeGrayLight; |
34 | export const inputColor = legacyStyles.themeGray; | 36 | export const inputColor = legacyStyles.themeGray; |
35 | export const inputHeight = '35px'; | 37 | export const inputHeight = '35px'; |
36 | export const inputFontSize = '14px'; | ||
37 | export const inputBackground = legacyStyles.themeGrayLightest; | 38 | export const inputBackground = legacyStyles.themeGrayLightest; |
38 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | 39 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; |
39 | export const inputModifierColor = legacyStyles.themeGrayLight; | 40 | export const inputModifierColor = legacyStyles.themeGrayLight; |
@@ -49,3 +50,28 @@ export const toggleButton = legacyStyles.themeGrayLight; | |||
49 | export const toggleButtonActive = brandPrimary; | 50 | export const toggleButtonActive = brandPrimary; |
50 | export const toggleWidth = 40; | 51 | export const toggleWidth = 40; |
51 | export const toggleHeight = 14; | 52 | export const toggleHeight = 14; |
53 | |||
54 | // Button | ||
55 | export const buttonPrimaryBackground = brandPrimary; | ||
56 | export const buttonPrimaryTextColor = '#FFF'; | ||
57 | |||
58 | export const buttonSecondaryBackground = legacyStyles.themeGrayLighter; | ||
59 | export const buttonSecondaryTextColor = legacyStyles.themeGray; | ||
60 | |||
61 | export const buttonDangerBackground = brandDanger; | ||
62 | export const buttonDangerTextColor = '#FFF'; | ||
63 | |||
64 | export const buttonWarningBackground = brandWarning; | ||
65 | export const buttonWarningTextColor = '#FFF'; | ||
66 | |||
67 | export const buttonInvertedBackground = 'none'; | ||
68 | export const buttonInvertedTextColor = brandPrimary; | ||
69 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | ||
70 | |||
71 | export const buttonLoaderColor = { | ||
72 | primary: '#FFF', | ||
73 | secondary: buttonSecondaryTextColor, | ||
74 | warning: '#FFF', | ||
75 | danger: '#FFF', | ||
76 | inverted: brandPrimary, | ||
77 | }; | ||