From f743705b4d3f330e7fe568108d90b00546ef3910 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 28 Nov 2024 15:30:10 +0100 Subject: [PATCH] Provide multiple shades of on-primary color --- client/src/app/core/theme/theme.service.ts | 15 ++++++++------- client/src/app/menu/menu.component.scss | 12 ++++++++---- .../abuse-message-modal.component.scss | 4 ++-- .../menu/horizontal-menu.component.scss | 2 +- client/src/sass/application.scss | 6 +++--- client/src/sass/include/_button-mixins.scss | 2 +- client/src/sass/include/_variables.scss | 14 ++++++++++++++ 7 files changed, 37 insertions(+), 18 deletions(-) diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts index 947d91f65..dca51343b 100644 --- a/client/src/app/core/theme/theme.service.ts +++ b/client/src/app/core/theme/theme.service.ts @@ -188,10 +188,11 @@ export class ThemeService { this.oldInjectedProperties = [] - const toProcess: { prefix: string, invertIfDark: boolean, fallbacks?: Record }[] = [ - { prefix: 'primary', invertIfDark: true }, - { prefix: 'bg-secondary', invertIfDark: true }, - { prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' } } + const toProcess: { prefix: string, invertIfDark: boolean, step: number, fallbacks?: Record }[] = [ + { prefix: 'primary', invertIfDark: true, step: 5 }, + { prefix: 'on-primary', invertIfDark: true, step: 0 }, + { prefix: 'bg-secondary', invertIfDark: true, step: 5 }, + { prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5 } ] const darkTheme = this.isDarkTheme(computedStyle) @@ -199,7 +200,7 @@ export class ThemeService { debugLogger('Detected dark theme') } - for (const { prefix, invertIfDark, fallbacks = {} } of toProcess) { + for (const { prefix, invertIfDark, step, fallbacks = {} } of toProcess) { const mainColor = computedStyle.getPropertyValue('--' + prefix) const darkInverter = invertIfDark && darkTheme @@ -227,7 +228,7 @@ export class ThemeService { const existingValue = computedStyle.getPropertyValue(key) if (!existingValue || existingValue === '0') { - const newLuminance = this.buildNewLuminance(lastColorHSL, j, darkInverter) + const newLuminance = this.buildNewLuminance(lastColorHSL, j * step, darkInverter) const newColorHSL = { ...lastColorHSL, l: newLuminance } const newColorStr = this.toHSLStr(newColorHSL) @@ -259,7 +260,7 @@ export class ThemeService { } private buildNewLuminance (base: { l: number }, factor: number, darkInverter: number) { - return Math.max(Math.min(100, Math.round(base.l + (factor * 5 * -1 * darkInverter))), 0) + return Math.max(Math.min(100, Math.round(base.l + (factor * -1 * darkInverter))), 0) } private toHSLStr (c: { h: number, s: number, l: number, a: number }) { diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 58ff5beba..dea1ef76d 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -168,11 +168,11 @@ &:hover, &:focus-visible { - background-color: pvar-fallback(--menu-fg, --bg-secondary-450); + background-color: pvar-fallback(--menu-bg, --bg-secondary-450); } &.active { - background-color: pvar-fallback(--menu-fg, --bg-secondary-500); + background-color: pvar-fallback(--menu-bg, --bg-secondary-500); } my-global-icon { @@ -195,10 +195,14 @@ .about { .description { font-size: 14px; - color: pvar-fallback(--menu-fg, --fg-200) + color: pvar-fallback(--menu-fg, --fg-200); } } +my-button[theme=secondary] { + color: pvar-fallback(--menu-fg, --fg-400); +} + my-button[theme=secondary] ::ng-deep my-global-icon, .menu-link my-global-icon { color: pvar(--secondary-icon-color) !important; @@ -207,7 +211,7 @@ my-button[theme=secondary] ::ng-deep my-global-icon, .collapsed { my-button[theme=secondary] ::ng-deep my-global-icon, .menu-link my-global-icon { - color: pvar(--fg-200) !important; + color: pvar-fallback(--menu-fg, --fg-200) !important; } } diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss index ca7de17f1..3ee4daab1 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss @@ -54,11 +54,11 @@ textarea { &.by-me { .bubble { - color: pvar(--on-primary); + color: pvar(--on-primary-400); background-color: pvar(--primary-400); .date { - color: pvar(--on-primary); + color: pvar(--on-primary-400); } } } diff --git a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss index 953f73944..ddaf67da5 100644 --- a/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss +++ b/client/src/app/shared/shared-main/menu/horizontal-menu.component.scss @@ -91,7 +91,7 @@ h1 { &.active, &.child-active { - color: pvar(--on-primary) !important; + color: pvar(--on-primary-450) !important; background-color: pvar(--primary-450); opacity: .9; } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 033136576..db2a04a39 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -74,7 +74,7 @@ body { --border-primary: #{pvar(--primary)}; - --alert-primary-fg: #{pvar(--on-primary)}; + --alert-primary-fg: #{pvar(--on-primary-200)}; --alert-primary-bg: #{pvar(--primary-200)}; --alert-primary-border-color: #{pvar(--primary-300)}; @@ -113,7 +113,7 @@ body { --input-check-active-fg: #{pvar(--bg)}; --input-check-active-bg: #{pvar(--fg-250)}; - --alert-primary-fg: #{pvar(--on-primary)}; + --alert-primary-fg: #{pvar(--on-primary-200)}; --alert-primary-bg: #{pvar(--primary-200)}; --alert-primary-border-color: #{pvar(--primary-300)}; } @@ -159,7 +159,7 @@ body { } ::selection { - color: pvar(--on-primary); + color: pvar(--on-primary-450); background-color: pvar(--primary-450); } diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss index e7e3c5def..4b9e217a9 100644 --- a/client/src/sass/include/_button-mixins.scss +++ b/client/src/sass/include/_button-mixins.scss @@ -4,7 +4,7 @@ @use '_mixins' as *; @mixin secondary-button ( - $fg: pvar(--fg), + $fg: inherit, $active-bg: pvar(--bg-secondary-500), $hover-bg: pvar(--bg-secondary-450), $border-color: pvar(--bg-secondary-500) diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index e604620e5..8588445fa 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -141,6 +141,20 @@ $variables: ( --bg-secondary-200: var(--bg-secondary-200), --on-primary: var(--on-primary), + --on-primary-700: var(--on-primary-700), + --on-primary-650: var(--on-primary-650), + --on-primary-600: var(--on-primary-600), + --on-primary-550: var(--on-primary-550), + --on-primary-500: var(--on-primary-500), + --on-primary-450: var(--on-primary-450), + --on-primary-400: var(--on-primary-400), + --on-primary-350: var(--on-primary-350), + --on-primary-300: var(--on-primary-300), + --on-primary-250: var(--on-primary-250), + --on-primary-200: var(--on-primary-200), + --on-primary-150: var(--on-primary-150), + --on-primary-100: var(--on-primary-100), + --on-primary-50: var(--on-primary-50), --primary: var(--primary), --primary-700: var(--primary-700),