From b168fb7ced4c117a4d4be45bb2f42c30b2a00563 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Mon, 14 Jan 2019 22:26:37 +0100 Subject: Update theme --- packages/theme/src/themes/dark/index.ts | 19 +++++++++++++++++++ packages/theme/src/themes/default/index.ts | 28 +++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) (limited to 'packages/theme/src') 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, +}; -- cgit v1.2.3-54-g00ecf