From 2e68e8e8b5a60e5b50eab7cf2ab1b9e9115e84db Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Fri, 2 Dec 2022 00:58:08 +0000 Subject: [PATCH 1/2] Add new border color variable for increased contrast Signed-off-by: Christopher Ng (cherry picked from commit 24ffe328452e0e247017894ea9d49944470fd2bc) --- apps/theming/css/default.css | 1 + apps/theming/lib/Themes/DarkTheme.php | 1 + apps/theming/lib/Themes/DefaultTheme.php | 1 + 3 files changed, 3 insertions(+) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 0d3f3402fce87..5e8cd6b985dcb 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -32,6 +32,7 @@ --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); --color-border: #ededed; --color-border-dark: #dbdbdb; + --color-border-maxcontrast: #949494; --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --default-font-size: 15px; --animation-quick: 100ms; diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index ecd4c7d3fd69a..588f8f5a8a69e 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -91,6 +91,7 @@ public function getCSSVariables(): array { '--color-border' => $this->util->lighten($colorMainBackground, 7), '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), + '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 30), '--background-invert-if-dark' => 'invert(100%)', '--background-invert-if-bright' => 'no', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 94b71eb9d12a8..167b3c05f6256 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -157,6 +157,7 @@ public function getCSSVariables(): array { '--color-border' => $this->util->darken($colorMainBackground, 7), '--color-border-dark' => $this->util->darken($colorMainBackground, 14), + '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 42), '--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", '--default-font-size' => '15px', From bf0af98e090f88c9fcbc5e64cc89ca78d3abb2c6 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Tue, 6 Dec 2022 01:13:30 +0000 Subject: [PATCH 2/2] Lighten default color slightly for increased contrast Signed-off-by: Christopher Ng (cherry picked from commit 1c753c2b154297c01ff28bed93f8fa2c0b38dd8f) --- apps/theming/css/default.css | 20 +++++++++---------- .../theming/lib/Service/BackgroundService.php | 2 +- tests/acceptance/features/app-theming.feature | 8 ++++---- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 5e8cd6b985dcb..1d8925323695b 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -59,21 +59,21 @@ --image-background-default: url('/core/img/app-background.jpg'); --color-background-plain: #0082c9; --primary-invert-if-bright: no; - --color-primary: #00639a; + --color-primary: #006aa3; --color-primary-default: #0082c9; --color-primary-text: #ffffff; - --color-primary-hover: #3282ae; - --color-primary-light: #e5eff4; - --color-primary-light-text: #00273d; - --color-primary-light-hover: #dbe4e9; + --color-primary-hover: #3287b5; + --color-primary-light: #e5f0f5; + --color-primary-light-text: #002a41; + --color-primary-light-hover: #dbe5ea; --color-primary-text-dark: #ededed; - --color-primary-element: #00639a; + --color-primary-element: #006aa3; --color-primary-element-default-hover: #329bd3; --color-primary-element-text: #ffffff; - --color-primary-element-hover: #3282ae; - --color-primary-element-light: #e5eff4; - --color-primary-element-light-text: #00273d; - --color-primary-element-light-hover: #dbe4e9; + --color-primary-element-hover: #3287b5; + --color-primary-element-light: #e5f0f5; + --color-primary-element-light-text: #002a41; + --color-primary-element-light-hover: #dbe5ea; --color-primary-element-text-dark: #ededed; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); } diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php index 3daac7e7215dc..d49878b11b020 100644 --- a/apps/theming/lib/Service/BackgroundService.php +++ b/apps/theming/lib/Service/BackgroundService.php @@ -46,7 +46,7 @@ class BackgroundService { // true when the background is bright and need dark icons public const THEMING_MODE_DARK = 'dark'; public const DEFAULT_COLOR = '#0082c9'; - public const DEFAULT_ACCESSIBLE_COLOR = '#00639a'; + public const DEFAULT_ACCESSIBLE_COLOR = '#006aa3'; public const SHIPPED_BACKGROUNDS = [ 'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [ diff --git a/tests/acceptance/features/app-theming.feature b/tests/acceptance/features/app-theming.feature index 7a660ed52da1f..7b734f7f3183b 100644 --- a/tests/acceptance/features/app-theming.feature +++ b/tests/acceptance/features/app-theming.feature @@ -9,11 +9,11 @@ Feature: app-theming # The "eventually" part is not really needed here, as the colour is not # being animated at this point, but there is no need to create a specific # step just for this. - And I see that the primary color is eventually "#00639a" + And I see that the primary color is eventually "#006aa3" And I see that the non-plain background color variable is eventually "#0082c9" When I set the "Color" parameter in the Theming app to "#C9C9C9" Then I see that the parameters in the Theming app are eventually saved - And I see that the primary color is eventually "#00639a" + And I see that the primary color is eventually "#006aa3" And I see that the non-plain background color variable is eventually "#C9C9C9" Scenario: resetting the color updates the primary color @@ -23,9 +23,9 @@ Feature: app-theming And I see that the color selector in the Theming app has loaded And I set the "Color" parameter in the Theming app to "#C9C9C9" And I see that the parameters in the Theming app are eventually saved - And I see that the primary color is eventually "#00639a" + And I see that the primary color is eventually "#006aa3" And I see that the non-plain background color variable is eventually "#C9C9C9" When I reset the "Color" parameter in the Theming app to its default value Then I see that the parameters in the Theming app are eventually saved - And I see that the primary color is eventually "#00639a" + And I see that the primary color is eventually "#006aa3" And I see that the non-plain background color variable is eventually "#0082c9"