Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

feat: use secondary-like status colors 

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/54439/head
Ferdinand Thiessen 2 months ago
parent
c519e4a22a
commit
64db537b76
No known key found for this signature in database GPG Key ID: 45FAE7268762B400
6 changed files with 139 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      apps/theming/css/default.css
  2. 28
      apps/theming/lib/Themes/DarkHighContrastTheme.php
  3. 38
      apps/theming/lib/Themes/DarkTheme.php
  4. 45
      apps/theming/lib/Themes/DefaultTheme.php
  5. 24
      apps/theming/lib/Themes/HighContrastTheme.php
  6. 63
      apps/theming/tests/Themes/AccessibleThemeTestCase.php

32
apps/theming/css/default.css
View File

@ -23,22 +23,22 @@
/** @deprecated use `--color-text-maxcontrast` instead */
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: var(--color-border-maxcontrast) transparent;
--color-error: #DB0606;
--color-error-rgb: 219,6,6;
--color-error-hover: #df2525;
--color-error-text: #c20505;
--color-warning: #A37200;
--color-warning-rgb: 163,114,0;
--color-warning-hover: #8a6000;
--color-warning-text: #7f5900;
--color-success: #2d7b41;
--color-success-rgb: 45,123,65;
--color-success-hover: #428854;
--color-success-text: #286c39;
--color-info: #0071ad;
--color-info-rgb: 0,113,173;
--color-info-hover: #197fb5;
--color-info-text: #006499;
--color-error: #FFE7E7;
--color-error-rgb: 255,231,231;
--color-error-hover: #ffeaea;
--color-error-text: #8A0000;
--color-warning: #FFEEC5;
--color-warning-rgb: 255,238,197;
--color-warning-hover: #ffe7ac;
--color-warning-text: #664700;
--color-success: #D8F3DA;
--color-success-rgb: 216,243,218;
--color-success-hover: #dbf4dd;
--color-success-text: #005416;
--color-info: #D5F1FA;
--color-info-rgb: 213,241,250;
--color-info-hover: #d9f2fa;
--color-info-text: #0066AC;
--color-favorite: #A37200;
--color-loading-light: #cccccc;
--color-loading-dark: #444444;

28
apps/theming/lib/Themes/DarkHighContrastTheme.php
View File

@ -41,10 +41,10 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
$colorMainBackground = '#000000';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
$colorError = '#ff5252';
$colorWarning = '#ffcc00';
$colorSuccess = '#42a942';
$colorInfo = '#38c0ff';
$colorError = '#750000';
$colorWarning = '#423800';
$colorSuccess = '#1A4020';
$colorInfo = '#004875';
return array_merge(
$defaultVariables,
@ -55,8 +55,8 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)',
'--color-main-text' => $colorMainText,
'--color-background-dark' => $this->util->lighten($colorMainBackground, 25),
'--color-background-darker' => $this->util->lighten($colorMainBackground, 25),
'--color-background-dark' => $this->util->lighten($colorMainBackground, 20),
'--color-background-darker' => $this->util->lighten($colorMainBackground, 20),
'--color-main-background-blur' => $colorMainBackground,
'--filter-background-blur' => 'none',
@ -71,23 +71,23 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->lighten($colorError, 10),
'--color-error-text' => $this->util->lighten($colorError, 25),
'--color-error-hover' => $this->util->lighten($colorError, 4),
'--color-error-text' => $this->util->lighten($colorError, 70),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
'--color-warning-text' => $this->util->lighten($colorWarning, 10),
'--color-warning-hover' => $this->util->lighten($colorWarning, 5),
'--color-warning-text' => $this->util->lighten($colorWarning, 65),
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
'--color-success-text' => $this->util->lighten($colorSuccess, 35),
'--color-success-hover' => $this->util->lighten($colorSuccess, 5),
'--color-success-text' => $this->util->lighten($colorSuccess, 70),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
'--color-info-text' => $this->util->lighten($colorInfo, 20),
'--color-info-hover' => $this->util->lighten($colorInfo, 5),
'--color-info-text' => $this->util->lighten($colorInfo, 60),
'--color-scrollbar' => 'auto transparent',

38
apps/theming/lib/Themes/DarkTheme.php
View File

@ -52,10 +52,14 @@ class DarkTheme extends DefaultTheme implements ITheme {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
$colorError = '#FF3333';
$colorWarning = '#FFCC00';
$colorSuccess = '#3B973B';
$colorError = '#FFCCCC';
$colorErrorElement = '#552121';
$colorWarning = '#FFEEC5';
$colorWarningElement = '#3D3010';
$colorSuccess = '#D5F2DC';
$colorSuccessElement = '#11321A';
$colorInfo = '#00AEFF';
$colorInfoElement = '#003553';
return array_merge(
$defaultVariables,
@ -79,21 +83,21 @@ class DarkTheme extends DefaultTheme implements ITheme {
'--color-text-light' => 'var(--color-main-text)', // deprecated
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->lighten($colorError, 10),
'--color-error-text' => $this->util->lighten($colorError, 15),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
'--color-error' => $colorErrorElement,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
'--color-error-hover' => $this->util->lighten($colorErrorElement, 10),
'--color-error-text' => $colorError,
'--color-warning' => $colorWarningElement,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
'--color-warning-hover' => $this->util->lighten($colorWarningElement, 10),
'--color-warning-text' => $colorWarning,
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
'--color-success-text' => $this->util->lighten($colorSuccess, 15),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
'--color-success' => $colorSuccessElement,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
'--color-success-hover' => $this->util->lighten($colorSuccessElement, 10),
'--color-success-text' => $colorSuccess,
'--color-info' => $colorInfoElement,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
'--color-info-hover' => $this->util->lighten($colorInfoElement, 10),
'--color-info-text' => $colorInfo,
'--color-favorite' => '#ffde00',

45
apps/theming/lib/Themes/DefaultTheme.php
View File

@ -70,7 +70,6 @@ class DefaultTheme implements ITheme {
public function getCSSVariables(): array {
$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 = '#6b6b6b'; // 4.5 : 1 for hover background and background dark
$colorMainBackground = '#ffffff';
@ -78,10 +77,14 @@ class DefaultTheme implements ITheme {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
$colorError = '#DB0606';
$colorWarning = '#A37200';
$colorSuccess = '#2d7b41';
$colorInfo = '#0071ad';
$colorError = '#8A0000';
$colorErrorElement = '#FFE7E7';
$colorWarning = '#664700';
$colorWarningElement = '#FFEEC5';
$colorSuccess = '#005416';
$colorSuccessElement = '#D8F3DA';
$colorInfo = '#0066AC';
$colorInfoElement = '#D5F1FA';
$user = $this->userSession->getUser();
// Chromium based browsers currently (2024) have huge performance issues with blur filters
@ -129,22 +132,22 @@ class DefaultTheme implements ITheme {
'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',
// error/warning/success/info feedback colours
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75),
'--color-error-text' => $this->util->darken($colorError, 5),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->darken($colorWarning, 5),
'--color-warning-text' => $this->util->darken($colorWarning, 7),
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80),
'--color-success-text' => $this->util->darken($colorSuccess, 4),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
'--color-info-text' => $this->util->darken($colorInfo, 4),
'--color-error' => $colorErrorElement,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
'--color-error-hover' => $this->util->darken($colorErrorElement, 7),
'--color-error-text' => $colorError,
'--color-warning' => $colorWarningElement,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
'--color-warning-hover' => $this->util->darken($colorWarningElement, 7),
'--color-warning-text' => $colorWarning,
'--color-success' => $colorSuccessElement,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
'--color-success-hover' => $this->util->darken($colorSuccessElement, 7),
'--color-success-text' => $colorSuccess,
'--color-info' => $colorInfoElement,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
'--color-info-hover' => $this->util->darken($colorInfoElement, 7),
'--color-info-text' => $colorInfo,
'--color-favorite' => '#A37200',
// used for the icon loading animation

24
apps/theming/lib/Themes/HighContrastTheme.php
View File

@ -41,10 +41,10 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
$colorMainBackground = '#ffffff';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
$colorError = '#D10000';
$colorWarning = '#995900';
$colorSuccess = '#207830';
$colorInfo = '#006DA8';
$colorError = '#FFB3B3';
$colorWarning = '#FFD888';
$colorSuccess = '#C4EDCE';
$colorInfo = '#6BCEFF';
$primaryVariables = $this->generatePrimaryVariables($colorMainBackground, $colorMainText, true);
return array_merge(
@ -74,23 +74,23 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->darken($colorError, 8),
'--color-error-text' => $this->util->darken($colorError, 17),
'--color-error-hover' => $this->util->darken($colorError, 5),
'--color-error-text' => $this->util->darken($colorError, 70),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->darken($colorWarning, 7),
'--color-warning-text' => $this->util->darken($colorWarning, 13),
'--color-warning-hover' => $this->util->darken($colorWarning, 8),
'--color-warning-text' => $this->util->darken($colorWarning, 65),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->darken($colorInfo, 7),
'--color-info-text' => $this->util->darken($colorInfo, 15),
'--color-info-hover' => $this->util->darken($colorInfo, 8),
'--color-info-text' => $this->util->darken($colorInfo, 65),
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->darken($colorSuccess, 7),
'--color-success-text' => $this->util->darken($colorSuccess, 14),
'--color-success-hover' => $this->util->darken($colorSuccess, 8),
'--color-success-text' => $this->util->darken($colorSuccess, 70),
'--color-favorite' => '#936B06',

63
apps/theming/tests/Themes/AccessibleThemeTestCase.php
View File

@ -21,7 +21,7 @@ class AccessibleThemeTestCase extends TestCase {
protected static bool $WCAGaaa = false;
public static function dataAccessibilityPairs(): array {
$textContrast = self::$WCAGaaa ? 7.0 : 4.5;
$textContrast = static::$WCAGaaa ? 7.0 : 4.5;
$elementContrast = 3.0;
return [
@ -39,16 +39,8 @@ class AccessibleThemeTestCase extends TestCase {
],
$elementContrast,
],
'status color elements on background' => [
'favorite elements on background' => [
[
'--color-error',
'--color-error-hover',
'--color-warning',
'--color-warning-hover',
'--color-info',
'--color-info-hover',
'--color-success',
'--color-success-hover',
'--color-favorite',
],
[
@ -129,7 +121,7 @@ class AccessibleThemeTestCase extends TestCase {
],
$textContrast,
],
'status-text' => [
'status-text-on-background' => [
[
'--color-error-text',
'--color-warning-text',
@ -144,6 +136,55 @@ class AccessibleThemeTestCase extends TestCase {
],
$textContrast,
],
'text-on-status-background' => [
[
'--color-main-text',
'--color-text-maxcontrast',
],
[
'--color-error',
'--color-info',
'--color-success',
'--color-warning',
],
$textContrast,
],
'text-on-status-background-hover' => [
[
'--color-main-text',
],
[
'--color-error-hover',
'--color-info-hover',
'--color-success-hover',
'--color-warning-hover',
],
$textContrast,
],
'error-text-on-error-background' => [
['--color-error-text'],
[
'--color-error',
'--color-error-hover',
],
$textContrast,
],
'warning-text-on-warning-background' => [
['--color-warning-text'],
[
'--color-warning',
'--color-warning-hover',
],
$textContrast,
],
'success-text-on-success-background' => [
['--color-success-text'],
[
'--color-success',
'--color-success-hover',
],
$textContrast,
],
];
}

Write Preview
Loading…
Cancel
Save