From 8c4de8f3bc402fbfe5dce3f131a266b2f6018662 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 28 Sep 2022 04:21:30 +0000 Subject: Add color variables for text on blurred background Signed-off-by: Christopher Ng --- apps/theming/css/default.css | 2 ++ apps/theming/lib/Themes/DarkHighContrastTheme.php | 1 + apps/theming/lib/Themes/DarkTheme.php | 5 ++++- apps/theming/lib/Themes/DefaultTheme.php | 5 ++++- apps/theming/lib/Themes/HighContrastTheme.php | 1 + 5 files changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 19d02a53f9b..da4814d66ef 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -13,6 +13,8 @@ --color-placeholder-dark: #cccccc; --color-main-text: #222222; --color-text-maxcontrast: #767676; + --color-text-maxcontrast-default: #767676; + --color-text-maxcontrast-background-blur: #646464; --color-text-light: #222222; --color-text-lighter: #767676; --color-scrollbar: rgba(34,34,34, .15); diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php index f219c3b3e87..57d49ff4231 100644 --- a/apps/theming/lib/Themes/DarkHighContrastTheme.php +++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php @@ -75,6 +75,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme { '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 45), '--color-text-maxcontrast' => $colorMainText, + '--color-text-maxcontrast-background-blur' => $colorMainText, '--color-text-light' => $colorMainText, '--color-text-lighter' => $colorMainText, diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index b615cbcaa4b..ecd4c7d3fd6 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -54,6 +54,7 @@ class DarkTheme extends DefaultTheme implements ITheme { $colorMainText = '#D8D8D8'; $colorMainBackground = '#171717'; $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); + $colorTextMaxcontrast = $this->util->darken($colorMainText, 30); $colorBoxShadow = $this->util->darken($colorMainBackground, 70); $colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow)); @@ -75,7 +76,9 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-placeholder-light' => $this->util->lighten($colorMainBackground, 10), '--color-placeholder-dark' => $this->util->lighten($colorMainBackground, 20), - '--color-text-maxcontrast' => $this->util->darken($colorMainText, 30), + '--color-text-maxcontrast' => $colorTextMaxcontrast, + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, + '--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 2), '--color-text-light' => $this->util->darken($colorMainText, 10), '--color-text-lighter' => $this->util->darken($colorMainText, 20), diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 413902d7813..e295d5d880a 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -97,6 +97,7 @@ class DefaultTheme implements ITheme { public function getCSSVariables(): array { $colorMainText = '#222222'; $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); + $colorTextMaxcontrast = $this->util->lighten($colorMainText, 33); $colorMainBackground = '#ffffff'; $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); $colorBoxShadow = $this->util->darken($colorMainBackground, 70); @@ -126,7 +127,9 @@ class DefaultTheme implements ITheme { // max contrast for WCAG compliance '--color-main-text' => $colorMainText, - '--color-text-maxcontrast' => $this->util->lighten($colorMainText, 33), + '--color-text-maxcontrast' => $colorTextMaxcontrast, + '--color-text-maxcontrast-default' => $colorTextMaxcontrast, + '--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7), '--color-text-light' => $colorMainText, '--color-text-lighter' => $this->util->lighten($colorMainText, 33), diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php index fda02058446..d73fa4b7ea0 100644 --- a/apps/theming/lib/Themes/HighContrastTheme.php +++ b/apps/theming/lib/Themes/HighContrastTheme.php @@ -75,6 +75,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme { '--color-placeholder-dark' => $this->util->darken($colorMainBackground, 45), '--color-text-maxcontrast' => $colorMainText, + '--color-text-maxcontrast-background-blur' => $colorMainText, '--color-text-light' => $colorMainText, '--color-text-lighter' => $colorMainText, -- cgit v1.2.3