mirror of
https://github.com/nextcloud/server.git
synced 2026-04-04 16:45:22 -04:00
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:
commit
5922fdd504
5 changed files with 18 additions and 15 deletions
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' => [
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue