upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-03 20:41:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

fix(theming): provide proper element color variables for status colors

Browse source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2025-08-26 12:57:13 +02:00
parent 853835b201
commit 03332a1d13
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
8 changed files with 71 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/theming/css/default.css
View file

@ -18,12 +18,17 @@
--color-text-maxcontrast: #6b6b6b;
--color-text-maxcontrast-default: #6b6b6b;
--color-text-maxcontrast-background-blur: #595959;
--color-text-error: #c90000;
--color-text-error: #bf0000;
--color-text-success: #066e03;
/** @deprecated use ` --color-main-text` instead */
--color-text-light: var(--color-main-text);
/** @deprecated use `--color-text-maxcontrast` instead */
--color-text-lighter: var(--color-text-maxcontrast);
--color-element-error: #c90000;
--color-element-info: #0077C7;
--color-element-success: #099f05;
--color-element-warning: #BF7900;
--color-border: #ededed;
--color-border-dark: #dbdbdb;
--color-border-maxcontrast: #7d7d7d;
--color-border-error: var(--color-element-error);
--color-border-success: var(--color-element-success);
--color-scrollbar: var(--color-border-maxcontrast) transparent;
--color-error: #FFE7E7;
--color-error-hover: #ffc3c3;
@ -50,11 +55,6 @@
--color-loading-dark: #444444;
--color-box-shadow-rgb: 77,77,77;
--color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
--color-border: #ededed;
--color-border-dark: #dbdbdb;
--color-border-maxcontrast: #7d7d7d;
--color-border-error: #c90000;
--color-border-success: #099f05;
--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;
--font-size-small: 13px;

16
apps/theming/lib/Themes/DarkHighContrastTheme.php
View file

@ -68,6 +68,16 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
'--color-text-maxcontrast-background-blur' => $colorMainText,
'--color-text-error' => $this->util->lighten($colorError, 65),
'--color-text-success' => $this->util->lighten($colorSuccess, 65),
'--color-text-warning' => $this->util->lighten($colorWarning, 65),
'--color-element-error' => $this->util->lighten($colorError, 30),
'--color-element-info' => $this->util->lighten($colorInfo, 30),
'--color-element-success' => $this->util->lighten($colorSuccess, 30),
'--color-element-warning' => $this->util->lighten($colorWarning, 30),
'--color-border' => $this->util->lighten($colorMainBackground, 50),
'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
@ -97,12 +107,6 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
'--color-box-shadow-rgb' => $colorMainText,
'--color-box-shadow' => $colorMainText,
'--color-border' => $this->util->lighten($colorMainBackground, 50),
'--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
'--color-border-error' => $this->util->lighten($colorError, 30),
'--color-border-success' => $this->util->lighten($colorSuccess, 30),
]
);
}

25
apps/theming/lib/Themes/DarkTheme.php
View file

@ -54,14 +54,16 @@ class DarkTheme extends DefaultTheme implements ITheme {
$colorError = '#552121';
$colorErrorText = '#FFCCCC';
$colorErrorElement = '#ff6c69';
$colorErrorElement = '#FF5050';
$colorWarning = '#3D3010';
$colorWarningText = '#FFEEC5';
$colorWarningElement = '#FFCC00';
$colorSuccess = '#11321A';
$colorSuccessText = '#D5F2DC';
$colorSuccessElement = '#3B973B';
$colorSuccessElement = '#40A330';
$colorInfo = '#003553';
$colorInfoText = '#00AEFF';
$colorInfoElement = '#0099E0';
return array_merge(
$defaultVariables,
@ -82,8 +84,17 @@ class DarkTheme extends DefaultTheme implements ITheme {
'--color-text-maxcontrast' => $colorTextMaxcontrast,
'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
'--color-text-maxcontrast-background-blur' => $this->util->lighten($colorTextMaxcontrast, 6),
'--color-text-error' => $colorErrorElement,
'--color-text-success' => $this->util->lighten($colorSuccessElement, 10),
'--color-text-error' => $this->util->lighten($colorErrorElement, 6),
'--color-text-success' => $this->util->lighten($colorSuccessElement, 6),
'--color-element-error' => $colorErrorElement,
'--color-element-info' => $colorInfoElement,
'--color-element-success' => $colorSuccessElement,
'--color-element-warning' => $colorWarningElement,
'--color-border' => $this->util->lighten($colorMainBackground, 7),
'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
'--color-error' => $colorError,
'--color-error-hover' => $this->util->lighten($colorError, 10),
@ -111,12 +122,6 @@ class DarkTheme extends DefaultTheme implements ITheme {
'--color-box-shadow' => $colorBoxShadow,
'--color-box-shadow-rgb' => $colorBoxShadowRGB,
'--color-border' => $this->util->lighten($colorMainBackground, 7),
'--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
'--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
'--color-border-error' => $colorErrorElement,
'--color-border-success' => $colorSuccessElement,
'--background-invert-if-dark' => 'invert(100%)',
'--background-invert-if-bright' => 'no',
]

30
apps/theming/lib/Themes/DefaultTheme.php
View file

@ -77,16 +77,23 @@ class DefaultTheme implements ITheme {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
/*
colorX: The background color for e.g. buttons and note-card
colorXText: The text color on that background
colorXElement: When that color needs to have element contrast like borders
*/
$colorError = '#FFE7E7';
$colorErrorText = '#8A0000';
$colorErrorElement = '#c90000';
$colorWarning = '#FFEEC5';
$colorWarningText = '#664700';
$colorWarningElement = '#BF7900';
$colorSuccess = '#D8F3DA';
$colorSuccessText = '#005416';
$colorSuccessElement = '#099f05';
$colorInfo = '#D5F1FA';
$colorInfoText = '#0066AC';
$colorInfoElement = '#0077C7';
$user = $this->userSession->getUser();
// Chromium based browsers currently (2024) have huge performance issues with blur filters
@ -128,10 +135,21 @@ class DefaultTheme implements ITheme {
'--color-text-maxcontrast' => $colorTextMaxcontrast,
'--color-text-maxcontrast-default' => $colorTextMaxcontrast,
'--color-text-maxcontrast-background-blur' => $this->util->darken($colorTextMaxcontrast, 7),
'--color-text-error' => $colorErrorElement,
'--color-text-error' => $this->util->darken($colorErrorElement, 2),
'--color-text-success' => $this->util->darken($colorSuccessElement, 10),
'--color-text-light' => 'var(--color-main-text)', // deprecated
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated
// special colors for elements (providing corresponding contrast) e.g. icons
'--color-element-error' => $colorErrorElement,
'--color-element-info' => $colorInfoElement,
'--color-element-success' => $colorSuccessElement,
'--color-element-warning' => $colorWarningElement,
// border colors
'--color-border' => $this->util->darken($colorMainBackground, 7),
'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
'--color-border-error' => 'var(--color-element-error)',
'--color-border-success' => 'var(--color-element-success)',
'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',
@ -162,12 +180,6 @@ class DefaultTheme implements ITheme {
'--color-box-shadow-rgb' => $colorBoxShadowRGB,
'--color-box-shadow' => 'rgba(var(--color-box-shadow-rgb), 0.5)',
'--color-border' => $this->util->darken($colorMainBackground, 7),
'--color-border-dark' => $this->util->darken($colorMainBackground, 14),
'--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
'--color-border-error' => $colorErrorElement,
'--color-border-success' => $colorSuccessElement,
'--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',
'--font-size-small' => '13px',

5
apps/theming/lib/Themes/HighContrastTheme.php
View file

@ -72,6 +72,11 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
'--color-text-error' => $this->util->darken($colorError, 65),
'--color-text-success' => $this->util->darken($colorSuccess, 70),
'--color-element-error' => $this->util->darken($colorError, 50),
'--color-element-info' => $this->util->darken($colorInfo, 50),
'--color-element-success' => $this->util->darken($colorSuccess, 55),
'--color-element-warning' => $this->util->darken($colorWarning, 50),
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->darken($colorError, 5),

8
apps/theming/tests/Themes/AccessibleThemeTestCase.php
View file

@ -135,10 +135,14 @@ class AccessibleThemeTestCase extends TestCase {
],
$textContrast,
],
'status-border-colors-on-background' => [
'status-element-colors-on-background' => [
[
'--color-border-error',
'--color-border-success',
'--color-element-error',
'--color-element-info',
'--color-element-success',
'--color-element-warning',
],
[
'--color-main-background',
@ -147,7 +151,7 @@ class AccessibleThemeTestCase extends TestCase {
],
$elementContrast,
],
'error-text-on-background' => [
'status-text-on-background' => [
[
'--color-text-error',
'--color-text-success',

4
core/css/apps.scss
View file

@ -25,6 +25,10 @@ html {
}
body {
// Legacy variables deprecated in Nextcloud 20 - to be removed soon
--color-text-light: var(--color-main-text);
--color-text-lighter: var(--color-text-maxcontrast);
// color-background-plain should always be defined.
background-color: var(--color-background-plain, var(--color-main-background));
// user background, or plain color

2
core/css/variables.scss
View file

@ -57,8 +57,6 @@ $color-yellow: #FC0;
// min. color contrast for normal text on white background according to WCAG AA
// (Works as well: color: #000; opacity: 0.57;)
$color-text-maxcontrast: nc-lighten($color-main-text, 33%) !default;
$color-text-light: $color-main-text !default;
$color-text-lighter: $color-text-maxcontrast !default;
$image-logo: url('../img/logo/logo.svg?v=1') !default;
$image-login-background: url('../img/background.png?v=2') !default;