diff options
Diffstat (limited to 'packages/theme/src/themes/default/index.ts')
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 0f78928c3..d36558ff0 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -2,6 +2,14 @@ import color from 'color'; | |||
2 | 2 | ||
3 | import * as legacyStyles from '../legacy'; | 3 | import * as legacyStyles from '../legacy'; |
4 | 4 | ||
5 | export interface IStyleTypes { | ||
6 | [index: string]: { | ||
7 | accent: string; | ||
8 | contrast: string; | ||
9 | border?: string; | ||
10 | }; | ||
11 | } | ||
12 | |||
5 | export const brandPrimary = '#3498db'; | 13 | export const brandPrimary = '#3498db'; |
6 | export const brandSuccess = '#5cb85c'; | 14 | export const brandSuccess = '#5cb85c'; |
7 | export const brandInfo = '#5bc0de'; | 15 | export const brandInfo = '#5bc0de'; |
@@ -51,6 +59,35 @@ export const toggleButtonActive = brandPrimary; | |||
51 | export const toggleWidth = 40; | 59 | export const toggleWidth = 40; |
52 | export const toggleHeight = 14; | 60 | export const toggleHeight = 14; |
53 | 61 | ||
62 | // Style Types | ||
63 | export const styleTypes: IStyleTypes = { | ||
64 | primary: { | ||
65 | accent: brandPrimary, | ||
66 | contrast: '#FFF', | ||
67 | }, | ||
68 | secondary: { | ||
69 | accent: legacyStyles.themeGrayLighter, | ||
70 | contrast: legacyStyles.themeGray, | ||
71 | }, | ||
72 | success: { | ||
73 | accent: brandSuccess, | ||
74 | contrast: '#FFF', | ||
75 | }, | ||
76 | warning: { | ||
77 | accent: brandWarning, | ||
78 | contrast: '#FFF', | ||
79 | }, | ||
80 | danger: { | ||
81 | accent: brandDanger, | ||
82 | contrast: '#FFF', | ||
83 | }, | ||
84 | inverted: { | ||
85 | accent: 'none', | ||
86 | contrast: brandPrimary, | ||
87 | border: `1px solid ${brandPrimary}`, | ||
88 | }, | ||
89 | }; | ||
90 | |||
54 | // Button | 91 | // Button |
55 | export const buttonPrimaryBackground = brandPrimary; | 92 | export const buttonPrimaryBackground = brandPrimary; |
56 | export const buttonPrimaryTextColor = '#FFF'; | 93 | export const buttonPrimaryTextColor = '#FFF'; |
@@ -79,3 +116,24 @@ export const buttonLoaderColor = { | |||
79 | danger: '#FFF', | 116 | danger: '#FFF', |
80 | inverted: brandPrimary, | 117 | inverted: brandPrimary, |
81 | }; | 118 | }; |
119 | |||
120 | // Select | ||
121 | export const selectBackground = inputBackground; | ||
122 | export const selectBorder = inputBorder; | ||
123 | export const selectHeight = inputHeight; | ||
124 | export const selectColor = inputColor; | ||
125 | export const selectToggleColor = inputPrefixColor; | ||
126 | export const selectPopupBackground = '#FFF'; | ||
127 | export const selectOptionColor = inputColor; | ||
128 | export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`; | ||
129 | export const selectOptionItemHover = legacyStyles.themeGrayLighter; | ||
130 | export const selectOptionItemHoverColor = selectColor; | ||
131 | export const selectOptionItemActive = brandPrimary; | ||
132 | export const selectOptionItemActiveColor = '#FFF'; | ||
133 | export const selectSearchBackground = legacyStyles.themeGrayLighter; | ||
134 | export const selectSearchColor = inputColor; | ||
135 | export const selectDisabledOpacity = inputDisabledOpacity; | ||
136 | |||
137 | // Badge | ||
138 | export const badgeFontSize = uiFontSize - 2; | ||
139 | export const badgeBorderRadius = 50; | ||