Fix coloring issues and added an option to configure media menu border. (#135)

* Fix coloring issues and added an option to configure media menu border.

* Updated and added options to style radio and check butto ns.

* Update themes to reflect the changes

options.ts

@@ -3,7 +3,7 @@ import { NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options
 import { MatugenScheme, MatugenTheme, MatugenVariation } from "lib/types/options";
 
 // WARN: CHANGING THESE VALUES WILL PREVENT MATUGEN COLOR GENERATION FOR THE CHANGED VALUE
-const colors = {
+export const colors = {
     "rosewater": "#f5e0dc",
     "flamingo": "#f2cdcd",
     "pink": "#f5c2e7",
@@ -226,7 +226,8 @@ const options = mkOptions(OPTIONS, {
                 label: opt(colors.lavender),
                 popover: {
                     text: opt(colors.lavender),
-                    background: opt(secondary_colors.mantle)
+                    background: opt(secondary_colors.mantle),
+                    border: opt(secondary_colors.mantle)
                 },
                 listitems: {
                     passive: opt(colors.text),
@@ -241,6 +242,10 @@ const options = mkOptions(OPTIONS, {
                     disabled: opt(tertiary_colors.surface0),
                     puck: opt(secondary_colors.surface1)
                 },
+                check_radio_button: {
+                    background: opt(colors.surface1),
+                    active: opt(tertiary_colors.lavender)
+                },
                 buttons: {
                     default: opt(colors.lavender),
                     active: opt(secondary_colors.pink),
@@ -268,7 +273,7 @@ const options = mkOptions(OPTIONS, {
                 },
                 tooltip: {
                     background: opt(colors.crust),
-                    text: opt(colors.text)
+                    text: opt(tertiary_colors.lavender)
                 },
                 menu: {
                     media: {

scss/style/bar/systray.scss

@@ -2,28 +2,6 @@
   margin-left: 0.75rem;
 }
 
-.systray-menu {
-  background: $crust;
-}
-
-.systray-menu label {
-  font-weight: bold;
-  color: $text;
-}
-
-.systray-menu separator {
-  background-color: $surface1;
-}
-
-.systray-menu check:not(:checked) {
-  background-color: $surface0;
-  border: 1px solid $lavender;
-}
-
-.systray-menu check:checked {
-  background-color: $lavender;
-}
-
 .systray-icon {
   font-size: 1.3em;
 }

scss/style/common/common.scss

@@ -17,12 +17,16 @@ menu {
     font: initial;
     text-shadow: none;
     border-radius: 6px;
-    &:hover, &:active{
+
-        background-color: $secondary_bg;
+    &:hover,
+    &:active {
+      background-color: $secondary_bg;
     }
+
     &:disabled {
       color: $secondary_bg;
     }
+
     arrow {
       min-height: 16px;
       min-width: 16px;
@@ -30,6 +34,7 @@ menu {
       margin-left: 8px;
     }
   }
+
   separator {
     min-height: 1px;
     margin: 4px 0;
@@ -37,20 +42,20 @@ menu {
   }
 }
 
-menu > arrow {
+menu>arrow {
   min-height: 16px;
   min-width: 16px;
   padding: 4px;
   color: $secondary_bg;
 }
 
-menu > arrow.top {
+menu>arrow.top {
   margin-top: 0;
   border-radius: 6px;
   -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
 }
 
-menu > arrow.bottom {
+menu>arrow.bottom {
   margin-top: 8px;
   margin-bottom: -12px;
   border-radius: 6px;
@@ -88,21 +93,24 @@ radio:active {
   background-color: $primary_bg;
 }
 
-check:checked, check:indeterminate,
+check:checked,
+check:indeterminate,
 radio:checked,
 radio:indeterminate {
   color: $primary_bg;
   background-color: $primary_fg;
 }
 
-check:checked:hover, check:indeterminate:hover,
+check:checked:hover,
+check:indeterminate:hover,
 radio:checked:hover,
 radio:indeterminate:hover {
   box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
   background-color: $primary_fg;
 }
 
-check:checked:active, check:indeterminate:active,
+check:checked:active,
+check:indeterminate:active,
 radio:checked:active,
 radio:indeterminate:active {
   box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
@@ -202,12 +210,6 @@ tooltip {
   box-shadow: none;
 }
 
-tooltip.background {
-  background-color: $crust;
-  color: $text;
-  border-radius: 6px;
-}
-
 separator {
   min-width: 1px;
   min-height: 1px;

scss/style/common/general.scss

@@ -7,20 +7,47 @@ window.popup {
     }
 
     &:hover {
-      background-color: transparentize($bar-menus-popover-text, 0.6);
+      background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
     }
   }
 
   menu {
-    background: $bar-menus-popover-background;
+    border-color: $bar-menus-popover-border;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
   }
 
   separator {
-    background: transparentize($bar-menus-popover-text, 0.7);
+
+    background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
     min-height: 0.075em;
   }
 
   arrow {
-    color: $bar-menus-popover-text;
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
   }
 }
+
+tooltip {
+  * {
+    all: unset;
+  }
+
+  font-size: 1.1em;
+
+  >*>* {
+    padding: 0.6em;
+    border-radius: $bar-menus-border-radius/2;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
+  }
+}
+
+check:not(:checked) {
+  background-color: $bar-menus-check_radio_button-background;
+  border: 1px solid $bar-menus-check_radio_button-active;
+}
+
+check:checked {
+  background-color: $bar-menus-check_radio_button-active;
+  border: 1px solid $bar-menus-check_radio_button-background;
+}

scss/style/menus/menu.scss

@@ -75,10 +75,6 @@
   }
 }
 
-tooltip label {
-  font-size: 0.9em;
-}
-
 .menu-separator {
   min-height: .1rem;
   margin: .6rem 0rem;

services/matugen/index.ts

@@ -4,9 +4,14 @@ import { getMatugenVariations } from "./variations";
 import { bash, dependencies, Notify, isAnImage } from "lib/utils";
 import options from "options";
 import icons from "lib/icons";
+import { Variable } from "types/variable";
 const { scheme_type, contrast } = options.theme.matugen_settings;
 const { matugen } = options.theme;
 
+const updateOptColor = (color: HexColor, opt: Variable<HexColor>) => {
+    opt.value = color;
+}
+
 export async function generateMatugenColors(): Promise<MatugenColors | undefined> {
     if (!matugen.value || !dependencies('matugen')) {
         return;
@@ -43,6 +48,7 @@ export const replaceHexValues = (incomingHex: HexColor, matugenColors: MatugenCo
     }
 
     const matugenVariation = getMatugenVariations(matugenColors, options.theme.matugen_settings.variation.value);
+    updateOptColor(matugenVariation.base, options.theme.bar.menus.menu.media.card.color as Variable<HexColor>);
     for (let curColor of Object.keys(defaultColorMap)) {
         if (defaultColorMap[curColor] === incomingHex) {
             return matugenVariation[curColor];

themes/catppuccin_frappe.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#414559",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#232634",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#292c3c",
-  "theme.bar.menus.menu.media.card.color": "#292c3c",
   "theme.bar.menus.menu.notifications.switch.puck": "#51576d",
   "theme.bar.menus.menu.notifications.switch.disabled": "#414559",
   "theme.bar.menus.menu.notifications.switch.enabled": "#babbf1",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#babbf1",
   "theme.notification.actions.text": "#232634",
   "theme.notification.actions.background": "#babbf1",
-  "theme.notification.background": "#232634"
+  "theme.notification.background": "#232634",
+  "theme.bar.menus.menu.media.card.color": "#292c3c",
+  "theme.bar.menus.check_radio_button.background": "#232534",
+  "theme.bar.menus.check_radio_button.active": "#b9baf1"
 }

themes/catppuccin_latte.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#ccd0da",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#dce0e8",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#eff1f5",
-  "theme.bar.menus.menu.media.card.color": "#eff1f5",
   "theme.bar.menus.menu.notifications.switch.puck": "#bcc0cc",
   "theme.bar.menus.menu.notifications.switch.disabled": "#ccd0da",
   "theme.bar.menus.menu.notifications.switch.enabled": "#7287fd",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#7287fd",
   "theme.notification.actions.text": "#dce0e8",
   "theme.notification.actions.background": "#7287fd",
-  "theme.notification.background": "#dce0e8"
+  "theme.notification.background": "#dce0e8",
+  "theme.bar.menus.menu.media.card.color": "#eff1f5",
+  "theme.bar.menus.check_radio_button.background": "#dcdfe8",
+  "theme.bar.menus.check_radio_button.active": "#7186fd"
 }

themes/catppuccin_macchiato.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#363a4f",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#181926",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#1e2030",
-  "theme.bar.menus.menu.media.card.color": "#1e2030",
   "theme.bar.menus.menu.notifications.switch.puck": "#494d64",
   "theme.bar.menus.menu.notifications.switch.disabled": "#363a4f",
   "theme.bar.menus.menu.notifications.switch.enabled": "#b7bdf8",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#b7bdf8",
   "theme.notification.actions.text": "#181926",
   "theme.notification.actions.background": "#b7bdf8",
-  "theme.notification.background": "#181926"
+  "theme.notification.background": "#181926",
+  "theme.bar.menus.menu.media.card.color": "#1e2030",
+  "theme.bar.menus.check_radio_button.background": "#181826",
+  "theme.bar.menus.check_radio_button.active": "#b7bcf8"
 }

themes/dracula.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#44475a",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#282a36",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#44475a",
-  "theme.bar.menus.menu.media.card.color": "#44475a",
   "theme.bar.menus.menu.notifications.switch.puck": "#44475a",
   "theme.bar.menus.menu.notifications.switch.disabled": "#44475a",
   "theme.bar.menus.menu.notifications.switch.enabled": "#bd93f9",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#bd93f9",
   "theme.notification.actions.text": "#282a36",
   "theme.notification.actions.background": "#bd93f9",
-  "theme.notification.background": "#282a36"
+  "theme.notification.background": "#282a36",
+  "theme.bar.menus.menu.media.card.color": "#44475a",
+  "theme.bar.menus.check_radio_button.background": "#282936",
+  "theme.bar.menus.check_radio_button.active": "#bd93f9"
 }

themes/gruvbox.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#3c3836",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#1d2021",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#1d2021",
-  "theme.bar.menus.menu.media.card.color": "#282828",
   "theme.bar.menus.menu.notifications.switch.puck": "#504945",
   "theme.bar.menus.menu.notifications.switch.disabled": "#3c3836",
   "theme.bar.menus.menu.notifications.switch.enabled": "#83a598",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#83a598",
   "theme.notification.actions.text": "#32302f",
   "theme.notification.actions.background": "#83a598",
-  "theme.notification.background": "#32302f"
+  "theme.notification.background": "#32302f",
+  "theme.bar.menus.menu.media.card.color": "#282828",
+  "theme.bar.menus.check_radio_button.background": "#3c3836",
+  "theme.bar.menus.check_radio_button.active": "#83a598"
 }

themes/nord.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#434c53",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#2e3440",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#3b4252",
-  "theme.bar.menus.menu.media.card.color": "#3b4252",
   "theme.bar.menus.menu.notifications.switch.puck": "#434c53",
   "theme.bar.menus.menu.notifications.switch.disabled": "#434c53",
   "theme.bar.menus.menu.notifications.switch.enabled": "#88c0d0",
@@ -256,5 +255,8 @@
   "theme.notification.label": "#88c0d0",
   "theme.notification.actions.text": "#2e3440",
   "theme.notification.actions.background": "#88c0d0",
-  "theme.notification.background": "#2e3440"
+  "theme.notification.background": "#2e3440",
+  "theme.bar.menus.menu.media.card.color": "#3b4252",
+  "theme.bar.menus.check_radio_button.background": "#2e3440",
+  "theme.bar.menus.check_radio_button.active": "#88c0d0"
 }

themes/rose_pine.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#1f1d2e",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#191724",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#21202e",
-  "theme.bar.menus.menu.media.card.color": "#21202e",
   "theme.bar.menus.menu.notifications.switch.puck": "#26233a",
   "theme.bar.menus.menu.notifications.switch.disabled": "#1f1d2e",
   "theme.bar.menus.menu.notifications.switch.enabled": "#c4a7e7",
@@ -258,5 +257,7 @@
   "theme.notification.actions.background": "#c4a7e7",
   "theme.notification.background": "#1f1d2e",
   "theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#181825",
-  "theme.bar.buttons.workspaces.numbered_active_underline_color": "#f5c2e7"
+  "theme.bar.menus.menu.media.card.color": "#21202e",
+  "theme.bar.menus.check_radio_button.background": "#393452",
+  "theme.bar.menus.check_radio_button.active": "#c4a7e7"
 }

themes/rose_pine_moon.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#2a273f",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#232136",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#2a283e",
-  "theme.bar.menus.menu.media.card.color": "#2a283e",
   "theme.bar.menus.menu.notifications.switch.puck": "#393552",
   "theme.bar.menus.menu.notifications.switch.disabled": "#2a273f",
   "theme.bar.menus.menu.notifications.switch.enabled": "#c4a7e7",
@@ -258,5 +257,7 @@
   "theme.notification.actions.background": "#c4a7e7",
   "theme.notification.background": "#2a273f",
   "theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#181825",
-  "theme.bar.buttons.workspaces.numbered_active_underline_color": "#f5c2e7"
+  "theme.bar.menus.menu.media.card.color": "#2a283e",
+  "theme.bar.menus.check_radio_button.background": "#393452",
+  "theme.bar.menus.check_radio_button.active": "#c4a7e7"
 }

themes/tokyo_night.json

@@ -24,7 +24,6 @@
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.border": "#414868",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.background": "#1a1b26",
   "theme.bar.menus.menu.dashboard.powermenu.confirmation.card": "#24283b",
-  "theme.bar.menus.menu.media.card.color": "#24283b",
   "theme.bar.menus.menu.notifications.switch.puck": "#565f89",
   "theme.bar.menus.menu.notifications.switch.disabled": "#565f89",
   "theme.bar.menus.menu.notifications.switch.enabled": "#bb9af7",
@@ -258,5 +257,7 @@
   "theme.notification.actions.background": "#bb9af7",
   "theme.notification.background": "#1a1b26",
   "theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#181825",
-  "theme.bar.buttons.workspaces.numbered_active_underline_color": "#f5c2e7"
+  "theme.bar.menus.menu.media.card.color": "#24283b",
+  "theme.bar.menus.check_radio_button.background": "#3b4261",
+  "theme.bar.menus.check_radio_button.active": "#bb9af7"
 }

widget/settings/pages/theme/menus/index.ts

@@ -56,6 +56,10 @@ export const MenuTheme = () => {
                 Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }),
 
+                Header('Check/Radio Buttons'),
+                Option({ opt: options.theme.bar.menus.check_radio_button.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.check_radio_button.active, title: 'Active', type: 'color' }),
+
                 Header('Buttons'),
                 Option({ opt: options.theme.bar.menus.buttons.default, title: 'Primary', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.buttons.active, title: 'Active', type: 'color' }),

widget/settings/pages/theme/menus/media.ts

@@ -20,6 +20,9 @@ export const MediaMenuTheme = () => {
                 Header('Background'),
                 Option({ opt: options.theme.bar.menus.menu.media.background.color, title: 'Background', type: 'color' }),
 
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.media.border.color, title: 'Border', type: 'color' }),
+
                 Header('Card/Album Art'),
                 Option({ opt: options.theme.bar.menus.menu.media.card.color, title: 'Color', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.menu.media.card.tint, title: 'Tint', type: 'number', increment: 5, min: 0, max: 100 }),