Skip to content

feat: use secondary-like status colors #54439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
susnux merged 4 commits into from
Aug 18, 2025
Merged

feat: use secondary-like status colors #54439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64db537
feat: use secondary-like status colors
susnux Aug 15, 2025
0394f4c
fix: adjust also legacy styles
susnux Aug 15, 2025
04c9015
feat: darken hover colors of primary and secondary
susnux Aug 18, 2025
d779255
chore: recompile stylesheets
susnux Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions apps/theming/css/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@
/** @deprecated use `--color-text-maxcontrast` instead */
--color-text-lighter: var(--color-text-maxcontrast);
--color-scrollbar: var(--color-border-maxcontrast) transparent;
--color-error: #DB0606;
--color-error-rgb: 219,6,6;
--color-error-hover: #df2525;
--color-error-text: #c20505;
--color-warning: #A37200;
--color-warning-rgb: 163,114,0;
--color-warning-hover: #8a6000;
--color-warning-text: #7f5900;
--color-success: #2d7b41;
--color-success-rgb: 45,123,65;
--color-success-hover: #428854;
--color-success-text: #286c39;
--color-info: #0071ad;
--color-info-rgb: 0,113,173;
--color-info-hover: #197fb5;
--color-info-text: #006499;
--color-error: #FFE7E7;
--color-error-rgb: 255,231,231;
--color-error-hover: #ffc3c3;
--color-error-text: #8A0000;
--color-warning: #FFEEC5;
--color-warning-rgb: 255,238,197;
--color-warning-hover: #ffe4a1;
--color-warning-text: #664700;
--color-success: #D8F3DA;
--color-success-rgb: 216,243,218;
--color-success-hover: #bdebc0;
--color-success-text: #005416;
--color-info: #D5F1FA;
--color-info-rgb: 213,241,250;
--color-info-hover: #b5e6f6;
--color-info-text: #0066AC;
--color-favorite: #A37200;
--color-loading-light: #cccccc;
--color-loading-dark: #444444;
Expand Down Expand Up @@ -101,16 +101,16 @@
--color-primary: #00679e;
--color-primary-text: #ffffff;
--color-primary-hover: #3285b1;
--color-primary-light: #e5eff5;
--color-primary-light-text: #00293f;
--color-primary-light-hover: #dbe4ea;
--color-primary-element: #00679e;
--color-primary-element-hover: #005a8a;
--color-primary-element-hover: #00507a;
--color-primary-element-text: #ffffff;
--color-primary-element-text-dark: #f5f5f5;
--color-primary-element-light: #e5eff5;
--color-primary-element-light-hover: #dbe4ea;
--color-primary-element-light-text: #00293f;
--color-primary-element-text-dark: #ededed;
--color-primary-light: #e5eff5;
--color-primary-light-hover: #d9e3e8;
--color-primary-light-text: #00293f;
--color-primary-element-light: var(--color-primary-light);
--color-primary-element-light-text: var(--color-primary-light-text);
--color-primary-element-light-hover: var(--color-primary-light-hover);
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
--color-background-plain: #00679e;
--color-background-plain-text: #ffffff;
Expand Down
27 changes: 14 additions & 13 deletions apps/theming/lib/Themes/CommonThemeTrait.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@ trait CommonThemeTrait {
protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText, bool $highContrast = false): array {
$isBrightColor = $this->util->isBrightColor($colorMainBackground);
$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor, $colorMainBackground, $highContrast);
$colorPrimaryElementText = $this->util->getTextColor($colorPrimaryElement);
$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
$colorPrimaryLightText = $this->util->getTextColor($colorPrimaryLight);
$invertPrimaryTextColor = $this->util->invertTextColor($colorPrimaryElement);

// primary related colours
// primary related colors
return [
// invert filter if primary is too bright
// to be used for legacy reasons only. Use inline
Expand All @@ -44,23 +45,23 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
'--primary-invert-if-dark' => $this->util->invertTextColor($colorPrimaryElement) ? 'no' : 'invert(100%)',

'--color-primary' => $this->primaryColor,
'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
'--color-primary-text' => $this->util->getTextColor($this->primaryColor),
'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
'--color-primary-light' => $colorPrimaryLight,
'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),

// used for buttons, inputs...
'--color-primary-element' => $colorPrimaryElement,
'--color-primary-element-hover' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElement, 4) : $this->util->darken($colorPrimaryElement, 4),
'--color-primary-element-text' => $invertPrimaryTextColor ? '#000000' : '#ffffff',
'--color-primary-element-hover' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElement, 7) : $this->util->darken($colorPrimaryElement, 7),
'--color-primary-element-text' => $colorPrimaryElementText,
// mostly used for disabled states
'--color-primary-element-text-dark' => $invertPrimaryTextColor ? $this->util->lighten('#000000', 4) : $this->util->darken('#ffffff', 4),
'--color-primary-element-text-dark' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElementText, 7) : $this->util->darken($colorPrimaryElementText, 7),

// used for hover/focus states
'--color-primary-element-light' => $colorPrimaryElementLight,
'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
'--color-primary-light' => $colorPrimaryLight,
'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorPrimaryLightText, 90),
'--color-primary-light-text' => $this->util->mix($this->primaryColor, $colorPrimaryLightText, -20),
// deprecated aliases
'--color-primary-element-light' => 'var(--color-primary-light)',
'--color-primary-element-light-text' => 'var(--color-primary-light-text)',
'--color-primary-element-light-hover' => 'var(--color-primary-light-hover)',

// to use like this: background-image: var(--gradient-primary-background);
'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
Expand Down
28 changes: 14 additions & 14 deletions apps/theming/lib/Themes/DarkHighContrastTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ public function getCSSVariables(): array {
$colorMainBackground = '#000000';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));

$colorError = '#ff5252';
$colorWarning = '#ffcc00';
$colorSuccess = '#42a942';
$colorInfo = '#38c0ff';
$colorError = '#750000';
$colorWarning = '#423800';
$colorSuccess = '#1A4020';
$colorInfo = '#004875';

return array_merge(
$defaultVariables,
Expand All @@ -55,8 +55,8 @@ public function getCSSVariables(): array {
'--color-main-background-translucent' => 'rgba(var(--color-main-background-rgb), 1)',
'--color-main-text' => $colorMainText,

'--color-background-dark' => $this->util->lighten($colorMainBackground, 25),
'--color-background-darker' => $this->util->lighten($colorMainBackground, 25),
'--color-background-dark' => $this->util->lighten($colorMainBackground, 20),
'--color-background-darker' => $this->util->lighten($colorMainBackground, 20),

'--color-main-background-blur' => $colorMainBackground,
'--filter-background-blur' => 'none',
Expand All @@ -71,23 +71,23 @@ public function getCSSVariables(): array {

'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->lighten($colorError, 10),
'--color-error-text' => $this->util->lighten($colorError, 25),
'--color-error-hover' => $this->util->lighten($colorError, 4),
'--color-error-text' => $this->util->lighten($colorError, 70),

'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
'--color-warning-text' => $this->util->lighten($colorWarning, 10),
'--color-warning-hover' => $this->util->lighten($colorWarning, 5),
'--color-warning-text' => $this->util->lighten($colorWarning, 65),

'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
'--color-success-text' => $this->util->lighten($colorSuccess, 35),
'--color-success-hover' => $this->util->lighten($colorSuccess, 5),
'--color-success-text' => $this->util->lighten($colorSuccess, 70),

'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
'--color-info-text' => $this->util->lighten($colorInfo, 20),
'--color-info-hover' => $this->util->lighten($colorInfo, 5),
'--color-info-text' => $this->util->lighten($colorInfo, 60),

'--color-scrollbar' => 'auto transparent',

Expand Down
38 changes: 21 additions & 17 deletions apps/theming/lib/Themes/DarkTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,14 @@ public function getCSSVariables(): array {
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));

$colorError = '#FF3333';
$colorWarning = '#FFCC00';
$colorSuccess = '#3B973B';
$colorError = '#FFCCCC';
$colorErrorElement = '#552121';
$colorWarning = '#FFEEC5';
$colorWarningElement = '#3D3010';
$colorSuccess = '#D5F2DC';
$colorSuccessElement = '#11321A';
$colorInfo = '#00AEFF';
$colorInfoElement = '#003553';

return array_merge(
$defaultVariables,
Expand All @@ -79,21 +83,21 @@ public function getCSSVariables(): array {
'--color-text-light' => 'var(--color-main-text)', // deprecated
'--color-text-lighter' => 'var(--color-text-maxcontrast)', // deprecated

'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->lighten($colorError, 10),
'--color-error-text' => $this->util->lighten($colorError, 15),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->lighten($colorWarning, 10),
'--color-error' => $colorErrorElement,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
'--color-error-hover' => $this->util->lighten($colorErrorElement, 10),
'--color-error-text' => $colorError,
'--color-warning' => $colorWarningElement,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
'--color-warning-hover' => $this->util->lighten($colorWarningElement, 10),
'--color-warning-text' => $colorWarning,
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->lighten($colorSuccess, 10),
'--color-success-text' => $this->util->lighten($colorSuccess, 15),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->lighten($colorInfo, 10),
'--color-success' => $colorSuccessElement,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
'--color-success-hover' => $this->util->lighten($colorSuccessElement, 10),
'--color-success-text' => $colorSuccess,
'--color-info' => $colorInfoElement,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
'--color-info-hover' => $this->util->lighten($colorInfoElement, 10),
'--color-info-text' => $colorInfo,
'--color-favorite' => '#ffde00',

Expand Down
45 changes: 24 additions & 21 deletions apps/theming/lib/Themes/DefaultTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,21 @@ public function getMeta(): array {

public function getCSSVariables(): array {
$colorMainText = '#222222';
$colorMainTextRgb = join(',', $this->util->hexToRGB($colorMainText));
// Color that still provides enough contrast for text, so we need a ratio of 4.5:1 on main background AND hover
$colorTextMaxcontrast = '#6b6b6b'; // 4.5 : 1 for hover background and background dark
$colorMainBackground = '#ffffff';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));
$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));

$colorError = '#DB0606';
$colorWarning = '#A37200';
$colorSuccess = '#2d7b41';
$colorInfo = '#0071ad';
$colorError = '#8A0000';
$colorErrorElement = '#FFE7E7';
$colorWarning = '#664700';
$colorWarningElement = '#FFEEC5';
$colorSuccess = '#005416';
$colorSuccessElement = '#D8F3DA';
$colorInfo = '#0066AC';
$colorInfoElement = '#D5F1FA';

$user = $this->userSession->getUser();
// Chromium based browsers currently (2024) have huge performance issues with blur filters
Expand Down Expand Up @@ -129,22 +132,22 @@ public function getCSSVariables(): array {
'--color-scrollbar' => 'var(--color-border-maxcontrast) transparent',

// error/warning/success/info feedback colours
'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->mix($colorError, $colorMainBackground, 75),
'--color-error-text' => $this->util->darken($colorError, 5),
'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->darken($colorWarning, 5),
'--color-warning-text' => $this->util->darken($colorWarning, 7),
'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->mix($colorSuccess, $colorMainBackground, 80),
'--color-success-text' => $this->util->darken($colorSuccess, 4),
'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->mix($colorInfo, $colorMainBackground, 80),
'--color-info-text' => $this->util->darken($colorInfo, 4),
'--color-error' => $colorErrorElement,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorErrorElement)),
'--color-error-hover' => $this->util->darken($colorErrorElement, 7),
'--color-error-text' => $colorError,
'--color-warning' => $colorWarningElement,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarningElement)),
'--color-warning-hover' => $this->util->darken($colorWarningElement, 7),
'--color-warning-text' => $colorWarning,
'--color-success' => $colorSuccessElement,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccessElement)),
'--color-success-hover' => $this->util->darken($colorSuccessElement, 7),
'--color-success-text' => $colorSuccess,
'--color-info' => $colorInfoElement,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfoElement)),
'--color-info-hover' => $this->util->darken($colorInfoElement, 7),
'--color-info-text' => $colorInfo,
'--color-favorite' => '#A37200',

// used for the icon loading animation
Expand Down
24 changes: 12 additions & 12 deletions apps/theming/lib/Themes/HighContrastTheme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ public function getCSSVariables(): array {
$colorMainBackground = '#ffffff';
$colorMainBackgroundRGB = join(',', $this->util->hexToRGB($colorMainBackground));

$colorError = '#D10000';
$colorWarning = '#995900';
$colorSuccess = '#207830';
$colorInfo = '#006DA8';
$colorError = '#FFB3B3';
$colorWarning = '#FFD888';
$colorSuccess = '#C4EDCE';
$colorInfo = '#6BCEFF';

$primaryVariables = $this->generatePrimaryVariables($colorMainBackground, $colorMainText, true);
return array_merge(
Expand Down Expand Up @@ -74,23 +74,23 @@ public function getCSSVariables(): array {

'--color-error' => $colorError,
'--color-error-rgb' => join(',', $this->util->hexToRGB($colorError)),
'--color-error-hover' => $this->util->darken($colorError, 8),
'--color-error-text' => $this->util->darken($colorError, 17),
'--color-error-hover' => $this->util->darken($colorError, 5),
'--color-error-text' => $this->util->darken($colorError, 70),

'--color-warning' => $colorWarning,
'--color-warning-rgb' => join(',', $this->util->hexToRGB($colorWarning)),
'--color-warning-hover' => $this->util->darken($colorWarning, 7),
'--color-warning-text' => $this->util->darken($colorWarning, 13),
'--color-warning-hover' => $this->util->darken($colorWarning, 8),
'--color-warning-text' => $this->util->darken($colorWarning, 65),

'--color-info' => $colorInfo,
'--color-info-rgb' => join(',', $this->util->hexToRGB($colorInfo)),
'--color-info-hover' => $this->util->darken($colorInfo, 7),
'--color-info-text' => $this->util->darken($colorInfo, 15),
'--color-info-hover' => $this->util->darken($colorInfo, 8),
'--color-info-text' => $this->util->darken($colorInfo, 65),

'--color-success' => $colorSuccess,
'--color-success-rgb' => join(',', $this->util->hexToRGB($colorSuccess)),
'--color-success-hover' => $this->util->darken($colorSuccess, 7),
'--color-success-text' => $this->util->darken($colorSuccess, 14),
'--color-success-hover' => $this->util->darken($colorSuccess, 8),
'--color-success-text' => $this->util->darken($colorSuccess, 70),

'--color-favorite' => '#936B06',

Expand Down
9 changes: 9 additions & 0 deletions apps/theming/lib/Util.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ public function invertTextColor(string $color): bool {
return $this->colorContrast($color, '#ffffff') < 4.5;
}

/**
* Get the best text color contrast-wise for the given color.
*
* @since 32.0.0
*/
public function getTextColor(string $color): string {
return $this->invertTextColor($color) ? '#000000' : '#ffffff';
}

/**
* Is this color too bright ?
* @param string $color rgb color value
Expand Down
Loading
Loading