LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Jas Singh
2024-08-15 23:09:18 -07:00
committed by GitHub
parent 0ba89aae4a
commit f3a690026b
17 changed files with 101 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
options.ts
View File

@@ -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: {

22
scss/style/bar/systray.scss
View File

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

30
scss/style/common/common.scss
View File

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

35
scss/style/common/general.scss
View File

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

4
scss/style/menus/menu.scss
View File

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

6
services/matugen/index.ts
View File

@@ -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];

6
themes/catppuccin_frappe.json
View File

@@ -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"
}

6
themes/catppuccin_latte.json
View File

@@ -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"
}

6
themes/catppuccin_macchiato.json
View File

@@ -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"
}

6
themes/dracula.json
View File

@@ -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"
}

6
themes/gruvbox.json
View File

@@ -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"
}

6
themes/nord.json
View File

@@ -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"
}

5
themes/rose_pine.json
View File

@@ -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"
}

5
themes/rose_pine_moon.json
View File

@@ -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"
}

5
themes/tokyo_night.json
View File

@@ -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"
}

4
widget/settings/pages/theme/menus/index.ts
View File

@@ -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' }),

3
widget/settings/pages/theme/menus/media.ts
View File

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