Merge pull request #38211 from nextcloud/enh/a11y-ryg-color

nextcloud · Jun 6, 2023 · 3ef53a2 · 3ef53a2
2 parents fd7d0e2 + 27f9154
commit 3ef53a2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 19 deletions.
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
@@ -20,15 +20,19 @@
   --color-error: #e9322d;
   --color-error-rgb: 233,50,45;
   --color-error-hover: #ed5a56;
-  --color-warning: #eca700;
-  --color-warning-rgb: 236,167,0;
-  --color-warning-hover: #efb832;
-  --color-success: #46ba61;
-  --color-success-rgb: 70,186,97;
-  --color-success-hover: #6ac780;
+  --color-error-text: #e7201b;
+  --color-warning: #c28900;
+  --color-warning-rgb: 194,137,0;
+  --color-warning-hover: #cea032;
+  --color-warning-text: #996c00;
+  --color-success: #3fa857;
+  --color-success-rgb: 63,168,87;
+  --color-success-hover: #65b978;
+  --color-success-text: #318344;
   --color-info: #006aa3;
   --color-info-rgb: 0,106,163;
   --color-info-hover: #3287b5;
+  --color-info-text: #006aa3;
   --color-loading-light: #cccccc;
   --color-loading-dark: #444444;
   --color-box-shadow-rgb: 77,77,77;

diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
@@ -59,6 +59,11 @@ public function getCSSVariables(): array {
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
+		$colorError = '#e9322d';
+		$colorWarning = '#c28900';
+		$colorSuccess = '#3fa857';
+		$colorInfo = '#006aa3';
+
 		return array_merge(
 			$defaultVariables,
 			$this->generatePrimaryVariables($colorMainBackground, $colorMainText),
@@ -82,6 +87,23 @@ public function getCSSVariables(): array {
 				'--color-text-light' => $this->util->darken($colorMainText, 10),
 				'--color-text-lighter' => $this->util->darken($colorMainText, 20),
 
+				'--color-error' => $colorError,
+				'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
+				'--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 60),
+				'--color-error-text' => $this->util->lighten($colorError, 3),
+				'--color-warning' => $colorWarning,
+				'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
+				'--color-warning-hover' => $this->util->mix($colorWarning, $colorMainBackground, 60),
+				'--color-warning-text' => $colorWarning,
+				'--color-success' => $colorSuccess,
+				'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+				'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60),
+				'--color-success-text' => $colorSuccess,
+				'--color-info' => $colorInfo,
+				'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+				'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 60),
+				'--color-info-text' => $this->util->lighten($colorInfo, 9),
+
 				// used for the icon loading animation
 				'--color-loading-light' => '#777',
 				'--color-loading-dark' => '#CCC',

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -109,6 +109,11 @@ public function getCSSVariables(): array {
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
+		$colorError = '#e9322d';
+		$colorWarning = '#c28900';
+		$colorSuccess = '#3fa857';
+		$colorInfo = '#006aa3';
+
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
@@ -137,19 +142,23 @@ public function getCSSVariables(): array {
 
 			'--color-scrollbar' => 'rgba(' . $colorMainTextRgb . ', .15)',
 
-			// info/warning/success feedback colours
-			'--color-error' => '#e9322d',
-			'--color-error-rgb' => join(',', $this->util->hexToRGB('#e9322d')),
-			'--color-error-hover' => $this->util->mix('#e9322d', $colorMainBackground, 60),
-			'--color-warning' => '#eca700',
-			'--color-warning-rgb' => join(',', $this->util->hexToRGB('#eca700')),
-			'--color-warning-hover' => $this->util->mix('#eca700', $colorMainBackground, 60),
-			'--color-success' => '#46ba61',
-			'--color-success-rgb' => join(',', $this->util->hexToRGB('#46ba61')),
-			'--color-success-hover' => $this->util->mix('#46ba61', $colorMainBackground, 60),
-			'--color-info' => '#006aa3',
-			'--color-info-rgb' => join(',', $this->util->hexToRGB('#006aa3')),
-			'--color-info-hover' => $this->util->mix('#006aa3', $colorMainBackground, 60),
+			// 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, 60),
+			'--color-error-text' => $this->util->darken($colorError, 4),
+			'--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-success' => $colorSuccess,
+			'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
+			'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 60),
+			'--color-success-text' => $this->util->darken($colorSuccess, 10),
+			'--color-info' => $colorInfo,
+			'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
+			'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 60),
+			'--color-info-text' => $colorInfo,
 
 			// used for the icon loading animation
 			'--color-loading-light' => '#cccccc',