Skip to content

Commit f4c74f5

Browse files
skjnldsvskjnldsv
authored
Merge pull request nextcloud#54492 from nextcloud/feat/status-border-text-colors
2 parents 7c20186 + d79e18a commit f4c74f5

File tree

6 files changed

+102
-79
lines changed

6 files changed

+102
-79
lines changed

‎apps/theming/css/default.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,42 @@
1818
--color-text-maxcontrast: #6b6b6b;
1919
--color-text-maxcontrast-default: #6b6b6b;
2020
--color-text-maxcontrast-background-blur: #595959;
21+
--color-text-error: #c90000;
2122
/** @deprecated use ` --color-main-text` instead */
2223
--color-text-light: var(--color-main-text);
2324
/** @deprecated use `--color-text-maxcontrast` instead */
2425
--color-text-lighter: var(--color-text-maxcontrast);
2526
--color-scrollbar: var(--color-border-maxcontrast) transparent;
2627
--color-error: #FFE7E7;
27-
--color-error-rgb: 255,231,231;
2828
--color-error-hover: #ffc3c3;
2929
--color-error-text: #8A0000;
3030
--color-warning: #FFEEC5;
31-
--color-warning-rgb: 255,238,197;
3231
--color-warning-hover: #ffe4a1;
3332
--color-warning-text: #664700;
3433
--color-success: #D8F3DA;
35-
--color-success-rgb: 216,243,218;
3634
--color-success-hover: #bdebc0;
3735
--color-success-text: #005416;
3836
--color-info: #D5F1FA;
39-
--color-info-rgb: 213,241,250;
4037
--color-info-hover: #b5e6f6;
4138
--color-info-text: #0066AC;
4239
--color-favorite: #A37200;
40+
/** @deprecated use css color functions */
41+
--color-error-rgb: 255,231,231;
42+
/** @deprecated use css color functions */
43+
--color-warning-rgb: 255,238,197;
44+
/** @deprecated use css color functions */
45+
--color-success-rgb: 216,243,218;
46+
/** @deprecated use css color functions */
47+
--color-info-rgb: 213,241,250;
4348
--color-loading-light: #cccccc;
4449
--color-loading-dark: #444444;
4550
--color-box-shadow-rgb: 77,77,77;
4651
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
4752
--color-border: #ededed;
4853
--color-border-dark: #dbdbdb;
4954
--color-border-maxcontrast: #7d7d7d;
55+
--color-border-error: #c90000;
56+
--color-border-success: #099f05;
5057
--font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
5158
--default-font-size: 15px;
5259
--font-size-small: 13px;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ public function getCSSVariables(): array {
6666

6767
'--color-text-maxcontrast' => $colorMainText,
6868
'--color-text-maxcontrast-background-blur' => $colorMainText,
69+
'--color-text-error' => $this->util->lighten($colorError, 65),
6970
'--color-text-light' => $colorMainText,
7071
'--color-text-lighter' => $colorMainText,
7172

@@ -101,6 +102,8 @@ public function getCSSVariables(): array {
101102
'--color-border' => $this->util->lighten($colorMainBackground, 50),
102103
'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
103104
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
105+
'--color-border-error' => $this->util->lighten($colorError, 30),
106+
'--color-border-success' => $this->util->lighten($colorSuccess, 30),
104107
]
105108
);
106109
}

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

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

55-
$colorError = '#FFCCCC';
56-
$colorErrorElement = '#552121';
57-
$colorWarning = '#FFEEC5';
58-
$colorWarningElement = '#3D3010';
59-
$colorSuccess = '#D5F2DC';
60-
$colorSuccessElement = '#11321A';
61-
$colorInfo = '#00AEFF';
62-
$colorInfoElement = '#003553';
55+
$colorError = '#552121';
56+
$colorErrorText = '#FFCCCC';
57+
$colorErrorElement = '#ff6c69';
58+
$colorWarning = '#3D3010';
59+
$colorWarningText = '#FFEEC5';
60+
$colorSuccess = '#11321A';
61+
$colorSuccessText = '#D5F2DC';
62+
$colorSuccessElement = '#3B973B';
63+
$colorInfo = '#003553';
64+
$colorInfoText = '#00AEFF';
6365

6466
return array_merge(
6567
$defaultVariables,
@@ -80,26 +82,28 @@ public function getCSSVariables(): array {
8082
'--color-text-maxcontrast' => $colorTextMaxcontrast,
8183
'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
8284
'--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6),
85+
'--color-text-error' => $colorErrorElement,
8386
'--color-text-light' => 'var(--color-main-text)', // deprecated
8487
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
8588

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),
93-
'--color-warning-text' => $colorWarning,
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),
101-
'--color-info-text' => $colorInfo,
89+
'--color-error' => $colorError,
90+
'--color-error-hover' => $this->util->lighten($colorError, 10),
91+
'--color-error-text' => $colorErrorText,
92+
'--color-warning' => $colorWarning,
93+
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
94+
'--color-warning-text' => $colorWarningText,
95+
'--color-success' => $colorSuccess,
96+
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
97+
'--color-success-text' => $colorSuccessText,
98+
'--color-info' => $colorInfo,
99+
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
100+
'--color-info-text' => $colorInfoText,
102101
'--color-favorite' => '#ffde00',
102+
// deprecated
103+
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
104+
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
105+
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
106+
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
103107

104108
// used for the icon loading animation
105109
'--color-loading-light' => '#777',
@@ -111,6 +115,8 @@ public function getCSSVariables(): array {
111115
'--color-border' => $this->util->lighten($colorMainBackground, 7),
112116
'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
113117
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
118+
'--color-border-error' => $colorErrorElement,
119+
'--color-border-success' => $colorSuccessElement,
114120

115121
'--background-invert-if-dark' => 'invert(100%)',
116122
'--background-invert-if-bright' => 'no',

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

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,16 @@ public function getCSSVariables(): array {
7777
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
7878
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
7979

80-
$colorError = '#8A0000';
81-
$colorErrorElement = '#FFE7E7';
82-
$colorWarning = '#664700';
83-
$colorWarningElement = '#FFEEC5';
84-
$colorSuccess = '#005416';
85-
$colorSuccessElement = '#D8F3DA';
86-
$colorInfo = '#0066AC';
87-
$colorInfoElement = '#D5F1FA';
80+
$colorError = '#FFE7E7';
81+
$colorErrorText = '#8A0000';
82+
$colorErrorElement = '#c90000';
83+
$colorWarning = '#FFEEC5';
84+
$colorWarningText = '#664700';
85+
$colorSuccess = '#D8F3DA';
86+
$colorSuccessText = '#005416';
87+
$colorSuccessElement = '#099f05';
88+
$colorInfo = '#D5F1FA';
89+
$colorInfoText = '#0066AC';
8890

8991
$user = $this->userSession->getUser();
9092
// Chromium based browsers currently (2024) have huge performance issues with blur filters
@@ -126,29 +128,31 @@ public function getCSSVariables(): array {
126128
'--color-text-maxcontrast' => $colorTextMaxcontrast,
127129
'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
128130
'--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7),
131+
'--color-text-error' => $colorErrorElement,
129132
'--color-text-light' => 'var(--color-main-text)', // deprecated
130133
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
131134

132135
'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',
133136

134-
// error/warning/success/info feedback colours
135-
'--color-error' => $colorErrorElement,
136-
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
137-
'--color-error-hover' => $this->util->darken($colorErrorElement, 7),
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, 7),
142-
'--color-warning-text' => $colorWarning,
143-
'--color-success' => $colorSuccessElement,
144-
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
145-
'--color-success-hover' => $this->util->darken($colorSuccessElement, 7),
146-
'--color-success-text' => $colorSuccess,
147-
'--color-info' => $colorInfoElement,
148-
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
149-
'--color-info-hover' => $this->util->darken($colorInfoElement, 7),
150-
'--color-info-text' => $colorInfo,
137+
// error/warning/success/info feedback colors
138+
'--color-error' => $colorError,
139+
'--color-error-hover' => $this->util->darken($colorError, 7),
140+
'--color-error-text' => $colorErrorText,
141+
'--color-warning' => $colorWarning,
142+
'--color-warning-hover' => $this->util->darken($colorWarning, 7),
143+
'--color-warning-text' => $colorWarningText,
144+
'--color-success' => $colorSuccess,
145+
'--color-success-hover' => $this->util->darken($colorSuccess, 7),
146+
'--color-success-text' => $colorSuccessText,
147+
'--color-info' => $colorInfo,
148+
'--color-info-hover' => $this->util->darken($colorInfo, 7),
149+
'--color-info-text' => $colorInfoText,
151150
'--color-favorite' => '#A37200',
151+
// deprecated
152+
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
153+
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
154+
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
155+
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
152156

153157
// used for the icon loading animation
154158
'--color-loading-light' => '#cccccc',
@@ -160,6 +164,8 @@ public function getCSSVariables(): array {
160164
'--color-border' => $this->util->darken($colorMainBackground, 7),
161165
'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
162166
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
167+
'--color-border-error' => $colorErrorElement,
168+
'--color-border-success' => $colorSuccessElement,
163169

164170
'--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
165171
'--default-font-size' => '15px',

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ public function getCSSVariables(): array {
6969

7070
'--color-text-maxcontrast' => $colorMainText,
7171
'--color-text-maxcontrast-background-blur' => $colorMainText,
72+
'--color-text-error' => $this->util->darken($colorError, 65),
7273
'--color-text-light' => $colorMainText,
7374
'--color-text-lighter' => $colorMainText,
7475

@@ -106,6 +107,8 @@ public function getCSSVariables(): array {
106107
'--color-border' => $this->util->darken($colorMainBackground, 50),
107108
'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
108109
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56),
110+
'--color-border-error' => $this->util->darken($colorError, 42),
111+
'--color-border-success' => $this->util->darken($colorSuccess, 55),
109112

110113
// remove the gradient from the app icons
111114
'--header-menu-icon-mask' => 'none',

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

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,6 @@ public static function dataAccessibilityPairs(): array {
6464
],
6565
$elementContrast,
6666
],
67-
// Those two colors are used for borders which will be `color-main-text` on focussed state, thus need 3:1 contrast to it
68-
'success-error-border-colors' => [
69-
[
70-
'--color-error',
71-
'--color-success',
72-
],
73-
[
74-
'--color-main-text',
75-
],
76-
$elementContrast,
77-
],
7867
'primary-element-text' => [
7968
[
8069
'--color-primary-element-text',
@@ -121,21 +110,6 @@ public static function dataAccessibilityPairs(): array {
121110
],
122111
$textContrast,
123112
],
124-
'status-text-on-background' => [
125-
[
126-
'--color-error-text',
127-
'--color-warning-text',
128-
'--color-success-text',
129-
'--color-info-text',
130-
],
131-
[
132-
'--color-main-background',
133-
'--color-background-hover',
134-
'--color-background-dark',
135-
'--color-main-background-blur',
136-
],
137-
$textContrast,
138-
],
139113
'text-on-status-background' => [
140114
[
141115
'--color-main-text',
@@ -161,6 +135,30 @@ public static function dataAccessibilityPairs(): array {
161135
],
162136
$textContrast,
163137
],
138+
'status-border-colors-on-background' => [
139+
[
140+
'--color-border-error',
141+
'--color-border-success',
142+
],
143+
[
144+
'--color-main-background',
145+
'--color-background-hover',
146+
'--color-background-dark',
147+
],
148+
$elementContrast,
149+
],
150+
'error-text-on-background' => [
151+
[
152+
'--color-text-error',
153+
],
154+
[
155+
'--color-main-background',
156+
'--color-background-hover',
157+
'--color-background-dark',
158+
'--color-main-background-blur',
159+
],
160+
$textContrast,
161+
],
164162
'error-text-on-error-background' => [
165163
['--color-error-text'],
166164
[

0 commit comments

Comments
 (0)