From 27ebaea10c3b7868379150d0e44e17baefb3eb00 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Mon, 5 Jun 2023 17:28:19 -0700 Subject: enh(theming): Error contrast Signed-off-by: Christopher Ng --- apps/theming/css/default.css | 1 + apps/theming/lib/Themes/DarkTheme.php | 7 +++++++ apps/theming/lib/Themes/DefaultTheme.php | 11 +++++++---- 3 files changed, 15 insertions(+), 4 deletions(-) (limited to 'apps') diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index e97e4e98216..a305faba543 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -20,6 +20,7 @@ --color-error: #e9322d; --color-error-rgb: 233,50,45; --color-error-hover: #ed5a56; + --color-error-text: #e7201b; --color-warning: #eca700; --color-warning-rgb: 236,167,0; --color-warning-hover: #efb832; diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index 588f8f5a8a6..6c90c8e5aa5 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -59,6 +59,8 @@ class DarkTheme extends DefaultTheme implements ITheme { $colorBoxShadow = $this->util->darken($colorMainBackground, 70); $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); + $colorError = '#e9322d'; + return array_merge( $defaultVariables, $this->generatePrimaryVariables($colorMainBackground, $colorMainText), @@ -82,6 +84,11 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-text-light' => $this->util->darken($colorMainText, 10), '--color-text-lighter' => $this->util->darken($colorMainText, 20), + '--color-error' => $colorError, + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), + '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 60), + '--color-error-text' => $this->util->lighten($colorError, 3), + // used for the icon loading animation '--color-loading-light' => '#777', '--color-loading-dark' => '#CCC', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 3fcaa7cf58f..3df6ce081f1 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -109,6 +109,8 @@ class DefaultTheme implements ITheme { $colorBoxShadow = $this->util->darken($colorMainBackground, 70); $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); + $colorError = '#e9322d'; + $variables = [ '--color-main-background' => $colorMainBackground, '--color-main-background-rgb' => $colorMainBackgroundRGB, @@ -137,10 +139,11 @@ class DefaultTheme implements ITheme { '--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)', - // info/warning/success feedback colours - '--color-error' => '#e9322d', - '--color-error-rgb' => join(',', $this->util->hexToRGB('#e9322d')), - '--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60), + // error/warning/success/info feedback colours + '--color-error' => $colorError, + '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), + '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 60), + '--color-error-text' => $this->util->darken($colorError, 4), '--color-warning' => '#eca700', '--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')), '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), -- cgit v1.2.3 From fe098ff6fb1d1fbbfbc5bb2774237b529f49b08d Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Mon, 5 Jun 2023 17:28:19 -0700 Subject: enh(theming): Warning contrast Signed-off-by: Christopher Ng --- apps/theming/css/default.css | 7 ++++--- apps/theming/lib/Themes/DarkTheme.php | 5 +++++ apps/theming/lib/Themes/DefaultTheme.php | 8 +++++--- 3 files changed, 14 insertions(+), 6 deletions(-) (limited to 'apps') diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index a305faba543..cb4a12fce10 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -21,9 +21,10 @@ --color-error-rgb: 233,50,45; --color-error-hover: #ed5a56; --color-error-text: #e7201b; - --color-warning: #eca700; - --color-warning-rgb: 236,167,0; - --color-warning-hover: #efb832; + --color-warning: #c28900; + --color-warning-rgb: 194,137,0; + --color-warning-hover: #cea032; + --color-warning-text: #996c00; --color-success: #46ba61; --color-success-rgb: 70,186,97; --color-success-hover: #6ac780; diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index 6c90c8e5aa5..85e4d4708cc 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -60,6 +60,7 @@ class DarkTheme extends DefaultTheme implements ITheme { $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); $colorError = '#e9322d'; + $colorWarning = '#c28900'; return array_merge( $defaultVariables, @@ -88,6 +89,10 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 60), '--color-error-text' => $this->util->lighten($colorError, 3), + '--color-warning' => $colorWarning, + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), + '--color-warning-hover' => $this->util->mix($colorWarning, $colorMainBackground, 60), + '--color-warning-text' => $colorWarning, // used for the icon loading animation '--color-loading-light' => '#777', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 3df6ce081f1..3238ed00564 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -110,6 +110,7 @@ class DefaultTheme implements ITheme { $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); $colorError = '#e9322d'; + $colorWarning = '#c28900'; $variables = [ '--color-main-background' => $colorMainBackground, @@ -144,9 +145,10 @@ class DefaultTheme implements ITheme { '--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)), '--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 60), '--color-error-text' => $this->util->darken($colorError, 4), - '--color-warning' => '#eca700', - '--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')), - '--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60), + '--color-warning' => $colorWarning, + '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), + '--color-warning-hover' => $this->util->mix($colorWarning, $colorMainBackground, 60), + '--color-warning-text' => $this->util->darken($colorWarning, 8), '--color-success' => '#46ba61', '--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')), '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), -- cgit v1.2.3 From 187ff8358476e53cdd34a45843dbf2f0eb427ed9 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Mon, 5 Jun 2023 17:28:19 -0700 Subject: enh(theming): Success contrast Signed-off-by: Christopher Ng --- apps/theming/css/default.css | 7 ++++--- apps/theming/lib/Themes/DarkTheme.php | 5 +++++ apps/theming/lib/Themes/DefaultTheme.php | 8 +++++--- 3 files changed, 14 insertions(+), 6 deletions(-) (limited to 'apps') diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index cb4a12fce10..4b6c7cd6099 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -25,9 +25,10 @@ --color-warning-rgb: 194,137,0; --color-warning-hover: #cea032; --color-warning-text: #996c00; - --color-success: #46ba61; - --color-success-rgb: 70,186,97; - --color-success-hover: #6ac780; + --color-success: #3fa857; + --color-success-rgb: 63,168,87; + --color-success-hover: #65b978; + --color-success-text: #318344; --color-info: #006aa3; --color-info-rgb: 0,106,163; --color-info-hover: #3287b5; diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index 85e4d4708cc..0d40bda6b09 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -61,6 +61,7 @@ class DarkTheme extends DefaultTheme implements ITheme { $colorError = '#e9322d'; $colorWarning = '#c28900'; + $colorSuccess = '#3fa857'; return array_merge( $defaultVariables, @@ -93,6 +94,10 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), '--color-warning-hover' => $this->util->mix($colorWarning, $colorMainBackground, 60), '--color-warning-text' => $colorWarning, + '--color-success' => $colorSuccess, + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), + '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60), + '--color-success-text' => $colorSuccess, // used for the icon loading animation '--color-loading-light' => '#777', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 3238ed00564..432dc900182 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -111,6 +111,7 @@ class DefaultTheme implements ITheme { $colorError = '#e9322d'; $colorWarning = '#c28900'; + $colorSuccess = '#3fa857'; $variables = [ '--color-main-background' => $colorMainBackground, @@ -149,9 +150,10 @@ class DefaultTheme implements ITheme { '--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)), '--color-warning-hover' => $this->util->mix($colorWarning, $colorMainBackground, 60), '--color-warning-text' => $this->util->darken($colorWarning, 8), - '--color-success' => '#46ba61', - '--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')), - '--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60), + '--color-success' => $colorSuccess, + '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), + '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60), + '--color-success-text' => $this->util->darken($colorSuccess, 10), '--color-info' => '#006aa3', '--color-info-rgb' => join(',', $this->util->hexToRGB('#006aa3')), '--color-info-hover' => $this->util->mix('#006aa3', $colorMainBackground, 60), -- cgit v1.2.3 From 27f9154594411225ec438735983058b28e756844 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Mon, 5 Jun 2023 17:28:19 -0700 Subject: enh(theming): Info contrast Signed-off-by: Christopher Ng --- apps/theming/css/default.css | 1 + apps/theming/lib/Themes/DarkTheme.php | 5 +++++ apps/theming/lib/Themes/DefaultTheme.php | 8 +++++--- 3 files changed, 11 insertions(+), 3 deletions(-) (limited to 'apps') diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 4b6c7cd6099..e4f0652472d 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -32,6 +32,7 @@ --color-info: #006aa3; --color-info-rgb: 0,106,163; --color-info-hover: #3287b5; + --color-info-text: #006aa3; --color-loading-light: #cccccc; --color-loading-dark: #444444; --color-box-shadow-rgb: 77,77,77; diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index 0d40bda6b09..5500bae3b6d 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -62,6 +62,7 @@ class DarkTheme extends DefaultTheme implements ITheme { $colorError = '#e9322d'; $colorWarning = '#c28900'; $colorSuccess = '#3fa857'; + $colorInfo = '#006aa3'; return array_merge( $defaultVariables, @@ -98,6 +99,10 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60), '--color-success-text' => $colorSuccess, + '--color-info' => $colorInfo, + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), + '--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 60), + '--color-info-text' => $this->util->lighten($colorInfo, 9), // used for the icon loading animation '--color-loading-light' => '#777', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 432dc900182..e73b2c03fda 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -112,6 +112,7 @@ class DefaultTheme implements ITheme { $colorError = '#e9322d'; $colorWarning = '#c28900'; $colorSuccess = '#3fa857'; + $colorInfo = '#006aa3'; $variables = [ '--color-main-background' => $colorMainBackground, @@ -154,9 +155,10 @@ class DefaultTheme implements ITheme { '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60), '--color-success-text' => $this->util->darken($colorSuccess, 10), - '--color-info' => '#006aa3', - '--color-info-rgb' => join(',', $this->util->hexToRGB('#006aa3')), - '--color-info-hover' => $this->util->mix('#006aa3', $colorMainBackground, 60), + '--color-info' => $colorInfo, + '--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)), + '--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 60), + '--color-info-text' => $colorInfo, // used for the icon loading animation '--color-loading-light' => '#cccccc', -- cgit v1.2.3