Add color variables for text on blurred background

Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2022-09-28 04:21:30 +00:00
parent dc9cd228db
commit 8c4de8f3bc
5 changed files with 12 additions and 2 deletions

View File

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

View File

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

View File

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

View File

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

View File

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