Skip to content

Commit 295d8d5

Browse files
susnuxsusnux
committed
feat: use secondary-like status colors
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent 64c5200 commit 295d8d5

File tree

6 files changed

+105
-81
lines changed

6 files changed

+105
-81
lines changed

‎apps/theming/css/default.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@
2323
/** @deprecated use `--color-text-maxcontrast` instead */
2424
--color-text-lighter: var(--color-text-maxcontrast);
2525
--color-scrollbar: var(--color-border-maxcontrast) transparent;
26-
--color-error: #DB0606;
27-
--color-error-rgb: 219,6,6;
28-
--color-error-hover: #df2525;
29-
--color-error-text: #c20505;
30-
--color-warning: #A37200;
31-
--color-warning-rgb: 163,114,0;
32-
--color-warning-hover: #8a6000;
33-
--color-warning-text: #7f5900;
34-
--color-success: #2d7b41;
35-
--color-success-rgb: 45,123,65;
36-
--color-success-hover: #428854;
37-
--color-success-text: #286c39;
38-
--color-info: #0071ad;
39-
--color-info-rgb: 0,113,173;
40-
--color-info-hover: #197fb5;
41-
--color-info-text: #006499;
26+
--color-error: #FFE7E7;
27+
--color-error-rgb: 255,231,231;
28+
--color-error-hover: #ffeaea;
29+
--color-error-text: #8A0000;
30+
--color-warning: #FFEEC5;
31+
--color-warning-rgb: 255,238,197;
32+
--color-warning-hover: #ffe7ac;
33+
--color-warning-text: #664700;
34+
--color-success: #D8F3DA;
35+
--color-success-rgb: 216,243,218;
36+
--color-success-hover: #dbf4dd;
37+
--color-success-text: #005416;
38+
--color-info: #D5F1FA;
39+
--color-info-rgb: 213,241,250;
40+
--color-info-hover: #d9f2fa;
41+
--color-info-text: #0066AC;
4242
--color-favorite: #A37200;
4343
--color-loading-light: #cccccc;
4444
--color-loading-dark: #444444;

‎apps/theming/lib/Themes/DarkHighContrastTheme.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ public function getCSSVariables(): array {
4141
$colorMainBackground = '#000000';
4242
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
4343

44-
$colorError = '#ff5252';
45-
$colorWarning = '#ffcc00';
46-
$colorSuccess = '#42a942';
47-
$colorInfo = '#38c0ff';
44+
$colorError = '#B60000';
45+
$colorWarning = '#665500';
46+
$colorSuccess = '#276027';
47+
$colorInfo = '#005990';
4848

4949
return array_merge(
5050
$defaultVariables,
@@ -72,22 +72,22 @@ public function getCSSVariables(): array {
7272
'--color-error' => $colorError,
7373
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
7474
'--color-error-hover' => $this->util->lighten($colorError, 10),
75-
'--color-error-text' => $this->util->lighten($colorError, 25),
75+
'--color-error-text' => $this->util->lighten($colorError, 50),
7676

7777
'--color-warning' => $colorWarning,
7878
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
79-
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
80-
'--color-warning-text' => $this->util->lighten($colorWarning, 10),
79+
'--color-warning-hover' => $this->util->lighten($colorWarning, 5),
80+
'--color-warning-text' => $this->util->lighten($colorWarning, 40),
8181

8282
'--color-success' => $colorSuccess,
8383
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
8484
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
85-
'--color-success-text' => $this->util->lighten($colorSuccess, 35),
85+
'--color-success-text' => $this->util->lighten($colorSuccess, 40),
8686

8787
'--color-info' => $colorInfo,
8888
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
8989
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
90-
'--color-info-text' => $this->util->lighten($colorInfo, 20),
90+
'--color-info-text' => $this->util->lighten($colorInfo, 40),
9191

9292
'--color-scrollbar' => 'auto transparent',
9393

‎apps/theming/lib/Themes/DarkTheme.php‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,14 @@ public function getCSSVariables(): array {
5252
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
5353
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
5454

55-
$colorError = '#FF3333';
56-
$colorWarning = '#FFCC00';
57-
$colorSuccess = '#3B973B';
55+
$colorError = '#FFCCCC';
56+
$colorErrorElement = '#552121';
57+
$colorWarning = '#FFEEC5';
58+
$colorWarningElement = '#3D3010';
59+
$colorSuccess = '#D5F2DC';
60+
$colorSuccessElement = '#11321A';
5861
$colorInfo = '#00AEFF';
62+
$colorInfoElement = '#003553';
5963

6064
return array_merge(
6165
$defaultVariables,
@@ -79,21 +83,21 @@ public function getCSSVariables(): array {
7983
'--color-text-light' => 'var(--color-main-text)', // deprecated
8084
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
8185

82-
'--color-error' => $colorError,
83-
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
84-
'--color-error-hover' => $this->util->lighten($colorError, 10),
85-
'--color-error-text' => $this->util->lighten($colorError, 15),
86-
'--color-warning' => $colorWarning,
87-
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
88-
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
86+
'--color-error' => $colorErrorElement,
87+
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
88+
'--color-error-hover' => $this->util->lighten($colorErrorElement, 10),
89+
'--color-error-text' => $colorError,
90+
'--color-warning' => $colorWarningElement,
91+
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
92+
'--color-warning-hover' => $this->util->lighten($colorWarningElement, 10),
8993
'--color-warning-text' => $colorWarning,
90-
'--color-success' => $colorSuccess,
91-
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
92-
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
93-
'--color-success-text' => $this->util->lighten($colorSuccess, 15),
94-
'--color-info' => $colorInfo,
95-
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
96-
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
94+
'--color-success' => $colorSuccessElement,
95+
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
96+
'--color-success-hover' => $this->util->lighten($colorSuccessElement, 10),
97+
'--color-success-text' => $colorSuccess,
98+
'--color-info' => $colorInfoElement,
99+
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
100+
'--color-info-hover' => $this->util->lighten($colorInfoElement, 10),
97101
'--color-info-text' => $colorInfo,
98102
'--color-favorite' => '#ffde00',
99103

‎apps/theming/lib/Themes/DefaultTheme.php‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,21 @@ public function getMeta(): array {
7070

7171
public function getCSSVariables(): array {
7272
$colorMainText = '#222222';
73-
$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
7473
// Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover
7574
$colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark
7675
$colorMainBackground = '#ffffff';
7776
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
7877
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
7978
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
8079

81-
$colorError = '#DB0606';
82-
$colorWarning = '#A37200';
83-
$colorSuccess = '#2d7b41';
84-
$colorInfo = '#0071ad';
80+
$colorError = '#8A0000';
81+
$colorErrorElement = '#FFE7E7';
82+
$colorWarning = '#664700';
83+
$colorWarningElement = '#FFEEC5';
84+
$colorSuccess = '#005416';
85+
$colorSuccessElement = '#D8F3DA';
86+
$colorInfo = '#0066AC';
87+
$colorInfoElement = '#D5F1FA';
8588

8689
$user = $this->userSession->getUser();
8790
// Chromium based browsers currently (2024) have huge performance issues with blur filters
@@ -129,22 +132,22 @@ public function getCSSVariables(): array {
129132
'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',
130133

131134
// error/warning/success/info feedback colours
132-
'--color-error' => $colorError,
133-
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
134-
'--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75),
135-
'--color-error-text' => $this->util->darken($colorError, 5),
136-
'--color-warning' => $colorWarning,
137-
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
138-
'--color-warning-hover' => $this->util->darken($colorWarning, 5),
139-
'--color-warning-text' => $this->util->darken($colorWarning, 7),
140-
'--color-success' => $colorSuccess,
141-
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
142-
'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80),
143-
'--color-success-text' => $this->util->darken($colorSuccess, 4),
144-
'--color-info' => $colorInfo,
145-
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
146-
'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
147-
'--color-info-text' => $this->util->darken($colorInfo, 4),
135+
'--color-error' => $colorErrorElement,
136+
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
137+
'--color-error-hover' => $this->util->mix($colorErrorElement, $colorMainBackground, 75),
138+
'--color-error-text' => $colorError,
139+
'--color-warning' => $colorWarningElement,
140+
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
141+
'--color-warning-hover' => $this->util->darken($colorWarningElement, 5),
142+
'--color-warning-text' => $colorWarning,
143+
'--color-success' => $colorSuccessElement,
144+
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
145+
'--color-success-hover' => $this->util->mix($colorSuccessElement, $colorMainBackground, 80),
146+
'--color-success-text' => $colorSuccess,
147+
'--color-info' => $colorInfoElement,
148+
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
149+
'--color-info-hover' => $this->util->mix($colorInfoElement, $colorMainBackground, 80),
150+
'--color-info-text' => $colorInfo,
148151
'--color-favorite' => '#A37200',
149152

150153
// used for the icon loading animation

‎apps/theming/lib/Themes/HighContrastTheme.php‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ public function getCSSVariables(): array {
4141
$colorMainBackground = '#ffffff';
4242
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
4343

44-
$colorError = '#D10000';
45-
$colorWarning = '#995900';
46-
$colorSuccess = '#207830';
47-
$colorInfo = '#006DA8';
44+
$colorError = '#FF5E5E';
45+
$colorWarning = '#E08800';
46+
$colorSuccess = '#30B050';
47+
$colorInfo = '#00A2F2';
4848

4949
$primaryVariables = $this->generatePrimaryVariables($colorMainBackground, $colorMainText, true);
5050
return array_merge(
@@ -75,22 +75,22 @@ public function getCSSVariables(): array {
7575
'--color-error' => $colorError,
7676
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
7777
'--color-error-hover' => $this->util->darken($colorError, 8),
78-
'--color-error-text' => $this->util->darken($colorError, 17),
78+
'--color-error-text' => $this->util->darken($colorError, 35),
7979

8080
'--color-warning' => $colorWarning,
8181
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
8282
'--color-warning-hover' => $this->util->darken($colorWarning, 7),
83-
'--color-warning-text' => $this->util->darken($colorWarning, 13),
83+
'--color-warning-text' => $this->util->darken($colorWarning, 35),
8484

8585
'--color-info' => $colorInfo,
8686
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
8787
'--color-info-hover' => $this->util->darken($colorInfo, 7),
88-
'--color-info-text' => $this->util->darken($colorInfo, 15),
88+
'--color-info-text' => $this->util->darken($colorInfo, 35),
8989

9090
'--color-success' => $colorSuccess,
9191
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
9292
'--color-success-hover' => $this->util->darken($colorSuccess, 7),
93-
'--color-success-text' => $this->util->darken($colorSuccess, 14),
93+
'--color-success-text' => $this->util->darken($colorSuccess, 35),
9494

9595
'--color-favorite' => '#936B06',
9696

‎apps/theming/tests/Themes/AccessibleThemeTestCase.php‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,8 @@ public static function dataAccessibilityPairs(): array {
3939
],
4040
$elementContrast,
4141
],
42-
'status color elements on background' => [
42+
'favorite elements on background' => [
4343
[
44-
'--color-error',
45-
'--color-error-hover',
46-
'--color-warning',
47-
'--color-warning-hover',
48-
'--color-info',
49-
'--color-info-hover',
50-
'--color-success',
51-
'--color-success-hover',
5244
'--color-favorite',
5345
],
5446
[
@@ -129,7 +121,7 @@ public static function dataAccessibilityPairs(): array {
129121
],
130122
$textContrast,
131123
],
132-
'status-text' => [
124+
'status-text-on-background' => [
133125
[
134126
'--color-error-text',
135127
'--color-warning-text',
@@ -144,6 +136,31 @@ public static function dataAccessibilityPairs(): array {
144136
],
145137
$textContrast,
146138
],
139+
'text-on-status-background' => [
140+
[
141+
'--color-main-text',
142+
'--color-text-maxcontrast',
143+
],
144+
[
145+
'--color-error',
146+
'--color-info',
147+
'--color-success',
148+
'--color-warning',
149+
],
150+
$textContrast,
151+
],
152+
'text-on-status-background-hover' => [
153+
[
154+
'--color-main-text',
155+
],
156+
[
157+
'--color-error-hover',
158+
'--color-info-hover',
159+
'--color-success-hover',
160+
'--color-warning-hover',
161+
],
162+
$textContrast,
163+
],
147164
];
148165
}
149166

0 commit comments

Comments
 (0)