Merge pull request #35640 from nextcloud/backport/35549/stable25

[stable25] Add new border color variable and adjust primary color for increased contrast
This commit is contained in:
Pytal 2022-12-13 16:14:38 -08:00 committed by GitHub
commit 5922fdd504
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 15 deletions

View file

@ -32,6 +32,7 @@
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
--color-border: #ededed;
--color-border-dark: #dbdbdb;
--color-border-maxcontrast: #949494;
--font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--default-font-size: 15px;
--animation-quick: 100ms;
@ -58,21 +59,21 @@
--image-background-default: url('/core/img/app-background.jpg');
--color-background-plain: #0082c9;
--primary-invert-if-bright: no;
--color-primary: #00639a;
--color-primary: #006aa3;
--color-primary-default: #0082c9;
--color-primary-text: #ffffff;
--color-primary-hover: #3282ae;
--color-primary-light: #e5eff4;
--color-primary-light-text: #00273d;
--color-primary-light-hover: #dbe4e9;
--color-primary-hover: #3287b5;
--color-primary-light: #e5f0f5;
--color-primary-light-text: #002a41;
--color-primary-light-hover: #dbe5ea;
--color-primary-text-dark: #ededed;
--color-primary-element: #00639a;
--color-primary-element: #006aa3;
--color-primary-element-default-hover: #329bd3;
--color-primary-element-text: #ffffff;
--color-primary-element-hover: #3282ae;
--color-primary-element-light: #e5eff4;
--color-primary-element-light-text: #00273d;
--color-primary-element-light-hover: #dbe4e9;
--color-primary-element-hover: #3287b5;
--color-primary-element-light: #e5f0f5;
--color-primary-element-light-text: #002a41;
--color-primary-element-light-hover: #dbe5ea;
--color-primary-element-text-dark: #ededed;
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

View file

@ -46,7 +46,7 @@ class BackgroundService {
// true when the background is bright and need dark icons
public const THEMING_MODE_DARK = 'dark';
public const DEFAULT_COLOR = '#0082c9';
public const DEFAULT_ACCESSIBLE_COLOR = '#00639a';
public const DEFAULT_ACCESSIBLE_COLOR = '#006aa3';
public const SHIPPED_BACKGROUNDS = [
'anatoly-mikhaltsov-butterfly-wing-scale.jpg' => [

View file

@ -91,6 +91,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),
'--background-invert-if-dark' => 'invert(100%)',
'--background-invert-if-bright' => 'no',

View file

@ -157,6 +157,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),
'--font-face' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
'--default-font-size' => '15px',

View file

@ -9,11 +9,11 @@ Feature: app-theming
# The "eventually" part is not really needed here, as the colour is not
# being animated at this point, but there is no need to create a specific
# step just for this.
And I see that the primary color is eventually "#00639a"
And I see that the primary color is eventually "#006aa3"
And I see that the non-plain background color variable is eventually "#0082c9"
When I set the "Color" parameter in the Theming app to "#C9C9C9"
Then I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#00639a"
And I see that the primary color is eventually "#006aa3"
And I see that the non-plain background color variable is eventually "#C9C9C9"
Scenario: resetting the color updates the primary color
@ -23,9 +23,9 @@ Feature: app-theming
And I see that the color selector in the Theming app has loaded
And I set the "Color" parameter in the Theming app to "#C9C9C9"
And I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#00639a"
And I see that the primary color is eventually "#006aa3"
And I see that the non-plain background color variable is eventually "#C9C9C9"
When I reset the "Color" parameter in the Theming app to its default value
Then I see that the parameters in the Theming app are eventually saved
And I see that the primary color is eventually "#00639a"
And I see that the primary color is eventually "#006aa3"
And I see that the non-plain background color variable is eventually "#0082c9"