keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: added disabled colors and updated buttons

Browse Source
pull/2522/head
William Grant 3 years ago
parent 5a0928cb17
commit f6bd149def
3 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File

8
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -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);

17
ts/themes/colors.tsx
Unescape Escape View File

@ -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<ThemeNames, ThemeColors>;
// 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,

20
ts/themes/switchTheme.tsx
Unescape Escape View File

@ -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(

Write Preview
Loading…
Cancel
Save