From f3a690026ba479d3c87a9cdd40b49d4fcd120c49 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Thu, 15 Aug 2024 23:09:18 -0700 Subject: [PATCH] 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 | 11 +++++-- scss/style/bar/systray.scss | 22 -------------- scss/style/common/common.scss | 30 ++++++++++--------- scss/style/common/general.scss | 35 +++++++++++++++++++--- scss/style/menus/menu.scss | 4 --- services/matugen/index.ts | 6 ++++ themes/catppuccin_frappe.json | 6 ++-- themes/catppuccin_latte.json | 6 ++-- themes/catppuccin_macchiato.json | 6 ++-- themes/dracula.json | 6 ++-- themes/gruvbox.json | 6 ++-- themes/nord.json | 6 ++-- themes/rose_pine.json | 5 ++-- themes/rose_pine_moon.json | 5 ++-- themes/tokyo_night.json | 5 ++-- widget/settings/pages/theme/menus/index.ts | 4 +++ widget/settings/pages/theme/menus/media.ts | 3 ++ 17 files changed, 101 insertions(+), 65 deletions(-) diff --git a/options.ts b/options.ts index 6872c3f..0cdb418 100644 --- a/options.ts +++ b/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: { diff --git a/scss/style/bar/systray.scss b/scss/style/bar/systray.scss index 140d763..e69aed6 100644 --- a/scss/style/bar/systray.scss +++ b/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; } diff --git a/scss/style/common/common.scss b/scss/style/common/common.scss index 6968654..38180fb 100644 --- a/scss/style/common/common.scss +++ b/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; diff --git a/scss/style/common/general.scss b/scss/style/common/general.scss index cbedac3..4f908ea 100644 --- a/scss/style/common/general.scss +++ b/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; +} diff --git a/scss/style/menus/menu.scss b/scss/style/menus/menu.scss index 0154fdd..119d779 100644 --- a/scss/style/menus/menu.scss +++ b/scss/style/menus/menu.scss @@ -75,10 +75,6 @@ } } -tooltip label { - font-size: 0.9em; -} - .menu-separator { min-height: .1rem; margin: .6rem 0rem; diff --git a/services/matugen/index.ts b/services/matugen/index.ts index 5145084..10b0988 100644 --- a/services/matugen/index.ts +++ b/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) => { + opt.value = color; +} + export async function generateMatugenColors(): Promise { 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); for (let curColor of Object.keys(defaultColorMap)) { if (defaultColorMap[curColor] === incomingHex) { return matugenVariation[curColor]; diff --git a/themes/catppuccin_frappe.json b/themes/catppuccin_frappe.json index a8060ee..68ca2a5 100644 --- a/themes/catppuccin_frappe.json +++ b/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" } \ No newline at end of file diff --git a/themes/catppuccin_latte.json b/themes/catppuccin_latte.json index 58dd284..4d704ae 100644 --- a/themes/catppuccin_latte.json +++ b/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" } \ No newline at end of file diff --git a/themes/catppuccin_macchiato.json b/themes/catppuccin_macchiato.json index f7c7493..83c8ff6 100644 --- a/themes/catppuccin_macchiato.json +++ b/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" } \ No newline at end of file diff --git a/themes/dracula.json b/themes/dracula.json index b72a398..9555a5f 100644 --- a/themes/dracula.json +++ b/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" } \ No newline at end of file diff --git a/themes/gruvbox.json b/themes/gruvbox.json index 6761189..4c9e934 100644 --- a/themes/gruvbox.json +++ b/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" } \ No newline at end of file diff --git a/themes/nord.json b/themes/nord.json index ce77836..ad32706 100644 --- a/themes/nord.json +++ b/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" } \ No newline at end of file diff --git a/themes/rose_pine.json b/themes/rose_pine.json index 9fe11bf..5abaa1f 100644 --- a/themes/rose_pine.json +++ b/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" } \ No newline at end of file diff --git a/themes/rose_pine_moon.json b/themes/rose_pine_moon.json index 3bcbb22..567ea93 100644 --- a/themes/rose_pine_moon.json +++ b/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" } \ No newline at end of file diff --git a/themes/tokyo_night.json b/themes/tokyo_night.json index e1e2477..0ba9369 100644 --- a/themes/tokyo_night.json +++ b/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" } \ No newline at end of file diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index 4022f78..6ee4c0b 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/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' }), diff --git a/widget/settings/pages/theme/menus/media.ts b/widget/settings/pages/theme/menus/media.ts index de81db4..0c6f9ac 100644 --- a/widget/settings/pages/theme/menus/media.ts +++ b/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 }),