diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-25 13:57:28 +0200 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-27 12:56:23 +0200 |
| commit | 3676295f7b13852ec328e32f510aefd4c7b709c7 (patch) | |
| tree | 77236e44d27adfac9bb54c5bdae7210fbf333c88 /apps/theming/lib | |
| parent | be129a7d1f256a9a6aeaadbd9355c088fe0df929 (diff) | |
| download | nextcloud-server-3676295f7b13852ec328e32f510aefd4c7b709c7.tar.gz nextcloud-server-3676295f7b13852ec328e32f510aefd4c7b709c7.zip | |
fix(theming): Ensure all text colors have enough contrast for accessibility
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps/theming/lib')
| -rw-r--r-- | apps/theming/lib/Service/BackgroundService.php | 2 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/CommonThemeTrait.php | 6 | ||||
| -rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 4 |
3 files changed, 6 insertions, 6 deletions
diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php index d5bc4296b5b..3886bf855c4 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 = '#006aa3'; + public const DEFAULT_ACCESSIBLE_COLOR = '#006889'; public const BACKGROUND_SHIPPED = 'shipped'; public const BACKGROUND_CUSTOM = 'custom'; diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 9b516bf6c70..3460c7e68eb 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -64,15 +64,15 @@ trait CommonThemeTrait { // used for buttons, inputs... '--color-primary-element' => $colorPrimaryElement, - '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 75), + '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 81), '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', + // mostly used for disabled states + '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 6), // used for hover/focus states '--color-primary-element-light' => $colorPrimaryElementLight, '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), '--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20), - // mostly used for disabled states - '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), // to use like this: background-image: var(--gradient-primary-background); '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index 0c2594ebe7f..e2bd31548ca 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -104,7 +104,7 @@ class DefaultTheme implements ITheme { $colorMainText = '#222222'; $colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText)); // Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover - $colorTextMaxcontrast = '#707070'; // 4.54 : 1 for hover background + $colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark $colorMainBackground = '#ffffff'; $colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground)); $colorBoxShadow = $this->util->darken($colorMainBackground, 70); @@ -151,7 +151,7 @@ class DefaultTheme implements ITheme { '--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-warning-text' => $this->util->darken($colorWarning, 10), '--color-success' => $colorSuccess, '--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)), '--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 78), |