mirror of
https://github.com/nextcloud/server.git
synced 2026-02-14 08:14:47 -05:00
Merge pull request #42897 from nextcloud/backport/42887/stable28
[stable28] fix(theming): Make sure `color-border-maxcontrast` fulfills 3:1 contrast
This commit is contained in:
commit
0b9e2fa4bc
6 changed files with 17 additions and 3 deletions
|
|
@ -43,7 +43,7 @@
|
|||
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
|
||||
--color-border: #ededed;
|
||||
--color-border-dark: #dbdbdb;
|
||||
--color-border-maxcontrast: #949494;
|
||||
--color-border-maxcontrast: #7d7d7d;
|
||||
--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';
|
||||
--default-font-size: 15px;
|
||||
--animation-quick: 100ms;
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
|
|||
|
||||
'--color-border' => $this->util->lighten($colorMainBackground, 50),
|
||||
'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
|
||||
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
|
|||
|
||||
'--color-border' => $this->util->lighten($colorMainBackground, 7),
|
||||
'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
|
||||
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 30),
|
||||
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
|
||||
|
||||
'--background-invert-if-dark' => 'invert(100%)',
|
||||
'--background-invert-if-bright' => 'no',
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ class DefaultTheme implements ITheme {
|
|||
|
||||
'--color-border' => $this->util->darken($colorMainBackground, 7),
|
||||
'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
|
||||
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 42),
|
||||
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
|
||||
|
||||
'--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'",
|
||||
'--default-font-size' => '15px',
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
|
|||
|
||||
'--color-border' => $this->util->darken($colorMainBackground, 50),
|
||||
'--color-border-dark' => $this->util->darken($colorMainBackground, 50),
|
||||
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56),
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,18 @@ class AccessibleThemeTestCase extends TestCase {
|
|||
],
|
||||
$elementContrast,
|
||||
],
|
||||
'border-colors' => [
|
||||
[
|
||||
'--color-border-maxcontrast',
|
||||
],
|
||||
[
|
||||
'--color-main-background',
|
||||
'--color-background-hover',
|
||||
'--color-background-dark',
|
||||
'--color-main-background-blur',
|
||||
],
|
||||
$elementContrast,
|
||||
],
|
||||
// Those two colors are used for borders which will be `color-main-text` on focussed state, thus need 3:1 contrast to it
|
||||
'success-error-border-colors' => [
|
||||
[
|
||||
|
|
|
|||
Loading…
Reference in a new issue