improved selectedMenu again

src/services/theme_data/pleromafe.js

@@ -117,6 +117,11 @@ export const SLOT_INHERITANCE = {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
+  highlightLightText: {
+    depends: ['lightText'],
+    layer: 'highlight',
+    textColor: true
+  },
   highlightFaintText: {
     depends: ['faint'],
     layer: 'highlight',
@@ -146,6 +151,11 @@ export const SLOT_INHERITANCE = {
     depends: ['bg'],
     opacity: 'popover'
   },
+  popoverLightText: {
+    depends: ['lightText'],
+    layer: 'popover',
+    textColor: true
+  },
   popoverFaintText: {
     depends: ['faint'],
     layer: 'popover',
@@ -178,6 +188,12 @@ export const SLOT_INHERITANCE = {
     variant: 'selectedPost',
     textColor: true
   },
+  selectedPostLightText: {
+    depends: ['highlightLightText'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: true
+  },
   selectedPostFaintLink: {
     depends: ['highlightFaintLink'],
     layer: 'highlight',
@@ -202,9 +218,15 @@ export const SLOT_INHERITANCE = {
   },
 
   selectedMenu: {
-    depends: ['popover'],
+    depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
+  selectedMenuLightText: {
+    depends: ['highlightLightText'],
+    layer: 'selectedMenu',
+    variant: 'selectedMenu',
+    textColor: true
+  },
   selectedMenuFaintText: {
     depends: ['highlightFaintText'],
     layer: 'selectedMenu',
@@ -234,6 +256,45 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
+  selectedMenuPopover: {
+    depends: ['popover'],
+    color: (mod, bg) => brightness(5 * mod, bg).rgb
+  },
+  selectedMenuPopoverLightText: {
+    depends: ['selectedMenuLightText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverFaintText: {
+    depends: ['selectedMenuFaintText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverFaintLink: {
+    depends: ['selectedMenuFaintLink'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: 'preserve'
+  },
+  selectedMenuPopoverText: {
+    depends: ['selectedMenuText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverLink: {
+    depends: ['selectedMenuLink'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: 'preserve'
+  },
+  selectedMenuPopoverIcon: {
+    depends: ['selectedMenuPopover', 'selectedMenuText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   lightText: {
     depends: ['text'],
     color: (mod, text) => brightness(20 * mod, text).rgb

src/services/theme_data/theme_data.service.js

@@ -1,5 +1,5 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlendLayers, getTextColor } from '../color_convert/color_convert.js'
+import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
@@ -318,13 +318,14 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
           opacity
         )
       )
+      const isLightOnDark = relativeLuminance(bg) > 127
+      const mod = isLightOnDark ? 1 : -1
+
       if (value.textColor === 'bw') {
         outputColor = contrastRatio(bg).rgb
       } else {
         let color = { ...colors[deps[0]] }
         if (value.color) {
-          const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
-          const mod = isLightOnDark ? 1 : -1
           color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
         }