Add color variables for text on blurred background

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Oct 8, 2022 · 888d35b · 888d35b
1 parent 6347436
commit 888d35b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git 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/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
@@ -54,6 +54,7 @@ public function getCSSVariables(): array {
  $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 @@ public function getCSSVariables(): array {
  '--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
@@ -97,6 +97,7 @@ public function getMediaQuery(): string {
  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 @@ public function getCSSVariables(): array {
 
  // 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),