open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/54656/head
Ferdinand Thiessen 4 months ago
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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 20
      apps/theming/css/default.css
  2. 16
      apps/theming/lib/Themes/DarkHighContrastTheme.php
  3. 25
      apps/theming/lib/Themes/DarkTheme.php
  4. 30
      apps/theming/lib/Themes/DefaultTheme.php
  5. 5
      apps/theming/lib/Themes/HighContrastTheme.php
  6. 8
      apps/theming/tests/Themes/AccessibleThemeTestCase.php
  7. 4
      core/css/apps.scss
  8. 2
      core/css/variables.scss

20
apps/theming/css/default.css
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save