From f6bd149def20bbc12d4ced1d33ddb3610fc4255b Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 10 Oct 2022 11:16:35 +1100 Subject: [PATCH] feat: added disabled colors and updated buttons --- ts/themes/SessionTheme.tsx | 8 ++++---- ts/themes/colors.tsx | 17 +++++++++++++++-- ts/themes/switchTheme.tsx | 20 ++++++++++++-------- 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 284ae3b93..fc5881b60 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -470,9 +470,9 @@ export const SessionGlobalStyles = createGlobalStyle` --purple-color: ${COLORS.PRIMARY.PURPLE}; --orange-color: ${COLORS.PRIMARY.ORANGE}; --red-color: ${COLORS.PRIMARY.RED}; - /* TODO Theming this should be overridable */ --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --danger-color: ${THEMES.CLASSIC_LIGHT.DANGER}; + --disabled-color: ${THEMES.CLASSIC_LIGHT.DISABLED}; --transparent-color: ${COLORS.TRANSPARENT}; --white-color: ${COLORS.WHITE}; --black-color: ${COLORS.BLACK}; @@ -532,9 +532,8 @@ export const SessionGlobalStyles = createGlobalStyle` --button-outline-text-hover-color: var(--text-primary-color); --button-outline-border-color: var(--text-primary-color); --button-outline-border-hover-color: var(--text-primary-color); - --button-outline-disabled-color: var(--text-secondary-color); + --button-outline-disabled-color: var(--disabled-color); - /* TODO Theming are solid buttons ever disabled? */ /* Solid */ /* TODO Theming - Should Pills have their own colors */ /* Also used for Pills */ @@ -542,13 +541,14 @@ export const SessionGlobalStyles = createGlobalStyle` --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --button-solid-text-color: var(--text-primary-color); --button-solid-text-hover-color: var(--text-primary-color); + /* Solid buttons stay the same and rely on the disabled pointer */ --button-solid-disabled-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; /* TODO Theming - Only light themes have shadows? */ --button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25); /* Simple */ --button-simple-text-color: var(--text-primary-color); - --button-simple-disabled-color: var(--text-primary-color); + --button-simple-disabled-color: var(--disabled-color); /* Icons */ --button-icon-background-color: var(--transparent-color); diff --git a/ts/themes/colors.tsx b/ts/themes/colors.tsx index 5786334c7..bf4e4c590 100644 --- a/ts/themes/colors.tsx +++ b/ts/themes/colors.tsx @@ -41,6 +41,10 @@ const primaryRed = '#FF9C8E'; const dangerLight = '#E12D19'; const dangerDark = '#FF3A3A'; +// Disabled +const disabledLight = '#6D6D6D'; +const disabledDark = '#A1A2A1'; + // Path const pathDefault = primaryGreen; const pathConnecting = primaryOrange; @@ -106,6 +110,7 @@ type ThemeNames = 'CLASSIC_LIGHT' | 'CLASSIC_DARK' | 'OCEAN_LIGHT' | 'OCEAN_DARK type ThemeColors = { PRIMARY: string; DANGER: string; + DISABLED: string; COLOR0: string; COLOR1: string; COLOR2: string; @@ -119,7 +124,8 @@ type Themes = Record; // Classic Light const classicLightPrimary = primaryGreen; -const classicLightDanger = dangerDark; +const classicLightDanger = dangerLight; +const classicLightDisabled = disabledLight; const classicLight0 = '#000000'; const classicLight1 = '#6D6D6D'; const classicLight2 = '#A1A2A1'; @@ -130,7 +136,8 @@ const classicLight6 = '#FFFFFF'; // Classic Dark const classicDarkPrimary = primaryGreen; -const classicDarkDanger = dangerLight; +const classicDarkDanger = dangerDark; +const classicDarkDisabled = disabledDark; const classicDark0 = '#000000'; const classicDark1 = '#1B1B1B'; const classicDark2 = '#2D2D2D'; @@ -142,6 +149,7 @@ const classicDark6 = '#FFFFFF'; // Ocean Light const oceanLightPrimary = primaryBlue; const oceanLightDanger = dangerLight; +const oceanLightDisabled = disabledLight; const oceanLight0 = '#000000'; const oceanLight1 = '#19345D'; const oceanLight2 = '#6A6E90'; @@ -154,6 +162,7 @@ const oceanLight7 = '#FCFFFF'; // Ocean Dark const oceanDarkPrimary = primaryBlue; const oceanDarkDanger = dangerDark; +const oceanDarkDisabled = disabledDark; const oceanDark0 = '#000000'; const oceanDark1 = '#1A1C28'; const oceanDark2 = '#252735'; @@ -166,6 +175,7 @@ const THEMES: Themes = { CLASSIC_LIGHT: { PRIMARY: classicLightPrimary, DANGER: classicLightDanger, + DISABLED: classicLightDisabled, COLOR0: classicLight0, COLOR1: classicLight1, COLOR2: classicLight2, @@ -177,6 +187,7 @@ const THEMES: Themes = { CLASSIC_DARK: { PRIMARY: classicDarkPrimary, DANGER: classicDarkDanger, + DISABLED: classicDarkDisabled, COLOR0: classicDark0, COLOR1: classicDark1, COLOR2: classicDark2, @@ -188,6 +199,7 @@ const THEMES: Themes = { OCEAN_LIGHT: { PRIMARY: oceanLightPrimary, DANGER: oceanLightDanger, + DISABLED: oceanLightDisabled, COLOR0: oceanLight0, COLOR1: oceanLight1, COLOR2: oceanLight2, @@ -200,6 +212,7 @@ const THEMES: Themes = { OCEAN_DARK: { PRIMARY: oceanDarkPrimary, DANGER: oceanDarkDanger, + DISABLED: oceanDarkDisabled, COLOR0: oceanDark0, COLOR1: oceanDark1, COLOR2: oceanDark2, diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 563cbdb5a..de3e2e90d 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -9,6 +9,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { : THEMES.CLASSIC_LIGHT.PRIMARY ); document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_LIGHT.DANGER); + document.documentElement.style.setProperty('--disabled-color', THEMES.CLASSIC_LIGHT.DISABLED); document.documentElement.style.setProperty( '--background-primary-color', @@ -127,7 +128,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-outline-disabled-color', - 'var(--text-secondary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -162,7 +163,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty( '--button-simple-disabled-color', - 'var(--text-primary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -447,6 +448,7 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { : THEMES.CLASSIC_DARK.PRIMARY ); document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_DARK.DANGER); + document.documentElement.style.setProperty('--disabled-color', THEMES.CLASSIC_DARK.DISABLED); document.documentElement.style.setProperty( '--background-primary-color', @@ -559,7 +561,7 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-outline-disabled-color', - 'var(--text-secondary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -592,7 +594,7 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty( '--button-simple-disabled-color', - 'var(--text-primary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -872,6 +874,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { : THEMES.OCEAN_LIGHT.PRIMARY ); document.documentElement.style.setProperty('--danger-color', THEMES.OCEAN_LIGHT.DANGER); + document.documentElement.style.setProperty('--disabled-color', THEMES.OCEAN_LIGHT.DISABLED); document.documentElement.style.setProperty( '--background-primary-color', @@ -984,7 +987,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-outline-disabled-color', - 'var(--text-secondary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -1018,7 +1021,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-simple-disabled-color', - 'var(--text-primary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -1298,6 +1301,7 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { : THEMES.OCEAN_DARK.PRIMARY ); document.documentElement.style.setProperty('--danger-color', THEMES.OCEAN_DARK.DANGER); + document.documentElement.style.setProperty('--disabled-color', THEMES.OCEAN_DARK.DISABLED); document.documentElement.style.setProperty( '--background-primary-color', @@ -1406,7 +1410,7 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-outline-disabled-color', - 'var(--text-primary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty( @@ -1439,7 +1443,7 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { document.documentElement.style.setProperty( '--button-simple-disabled-color', - 'var(--text-primary-color)' + 'var(--disabled-color)' ); document.documentElement.style.setProperty(