Update theme

2 files changed, 46 insertions, 1 deletions

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 @@
 import color from 'color';
 
+import * as defaultStyles from '../default';
 import * as legacyStyles from '../legacy';
 
 export const colorBackground = legacyStyles.darkThemeGrayDarkest;
@@ -28,3 +29,21 @@ export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).da
 // Toggle
 export const toggleBackground = legacyStyles.darkThemeGray;
 export const toggleButton = legacyStyles.darkThemeGrayLighter;
+
+// Button
+export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter;
+export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonDangerTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonLoaderColor = {
+  primary: '#FFF',
+  secondary: buttonSecondaryTextColor,
+  warning: '#FFF',
+  danger: '#FFF',
+  inverted: defaultStyles.brandPrimary,
+};
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';
 export const brandWarning = '#FF9F00';
 export const brandDanger = '#d9534f';
 
+export const uiFontSize = 14;
+
 export const borderRadius = legacyStyles.themeBorderRadius;
 export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
 
@@ -33,7 +35,6 @@ export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter)
 export const labelColor = legacyStyles.themeGrayLight;
 export const inputColor = legacyStyles.themeGray;
 export const inputHeight = '35px';
-export const inputFontSize = '14px';
 export const inputBackground = legacyStyles.themeGrayLightest;
 export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
 export const inputModifierColor = legacyStyles.themeGrayLight;
@@ -49,3 +50,28 @@ export const toggleButton = legacyStyles.themeGrayLight;
 export const toggleButtonActive = brandPrimary;
 export const toggleWidth = 40;
 export const toggleHeight = 14;
+
+// Button
+export const buttonPrimaryBackground = brandPrimary;
+export const buttonPrimaryTextColor = '#FFF';
+
+export const buttonSecondaryBackground = legacyStyles.themeGrayLighter;
+export const buttonSecondaryTextColor = legacyStyles.themeGray;
+
+export const buttonDangerBackground = brandDanger;
+export const buttonDangerTextColor = '#FFF';
+
+export const buttonWarningBackground = brandWarning;
+export const buttonWarningTextColor = '#FFF';
+
+export const buttonInvertedBackground = 'none';
+export const buttonInvertedTextColor = brandPrimary;
+export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
+
+export const buttonLoaderColor = {
+  primary: '#FFF',
+  secondary: buttonSecondaryTextColor,
+  warning: '#FFF',
+  danger: '#FFF',
+  inverted: brandPrimary,
+};