Provide multiple shades of on-primary color

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<string, string> }[] = [
-      { 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<string, string> }[] = [
+      { 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 }) {

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;
   }
 }
 

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);
       }
     }
   }

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;
   }

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);
 }
 

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)

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),