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

Implemented Wallpaper Selector and Matugen's Wallpaper based auto-theming. (#73)

Browse Source 
* Implement matugen - WIP

* Added matugen

* Add types and cleanup code

* Matugen implementation updates and added more options such as scheme and contrast.

* Code cleanup and matugen settings renamed for clarity.

* Makon maroon a primary matugen color.

* Updates to handle variations of matugen colors

* Finalizing matugen and wrapping up variations.

* Minor styling updates of the settings dialog.

* Do a swww dependency check.

* Dependency logic update

* Switch shouldn't double trigger notifications now when checking dependency.

* Logic was inverted

* Add matugen to dependency checker.

* Fixed dependency checking conditional

* Update dependency list in readme and check for matugen before doing matugen operations

* Styling fixes

* OSD Fix

* Remove unused code from wallpaper service.

* Color fixes for matugen.

* Nix updates for new dependencies

* Change default wallpaper to empty.

* Added custom notification service for startup, cleaned up code and updated readme.
This commit is contained in:
Jas Singh
2024-08-07 21:43:31 -07:00
committed by GitHub
parent d743c98a6a
commit f5b75edbed
31 changed files with 1315 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
scss/matugen/index.ts Normal file
View File

@@ -0,0 +1,53 @@
import { defaultColorMap } from "lib/types/defaults/options";
import { HexColor, MatugenColors } from "lib/types/options";
import { getMatugenVariations } from "./variations";
import { bash, dependencies, Notify, isAnImage } from "lib/utils";
import options from "options";
import icons from "lib/icons";
const { scheme_type, contrast } = options.theme.matugen_settings;
const { matugen } = options.theme;
export async function generateMatugenColors(): Promise<MatugenColors | undefined> {
if (!matugen.value || !dependencies('matugen')) {
return;
}
const wallpaperPath = options.wallpaper.image.value;
try {
if (!wallpaperPath.length || !isAnImage(wallpaperPath)) {
Notify({
summary: "Matugen Failed",
body: "Please select a wallpaper in 'Theming > General' first.",
iconName: icons.ui.warning,
timeout: 7000
})
return;
}
const normalizedContrast = contrast.value > 1 ? 1
: contrast.value < -1 ? -1
: contrast.value
const contents = await bash(`matugen image ${wallpaperPath} -t scheme-${scheme_type.value} --contrast ${normalizedContrast} --json hex`);
return JSON.parse(contents).colors[options.theme.matugen_settings.mode.value];
} catch (error) {
const errMsg = `An error occurred while generating matugen colors: ${error}`;
console.error(errMsg);
return;
}
}
export const replaceHexValues = (incomingHex: HexColor, matugenColors: MatugenColors): HexColor => {
if (!options.theme.matugen.value) {
return incomingHex;
}
const matugenVariation = getMatugenVariations(matugenColors, options.theme.matugen_settings.variation.value);
for (let curColor of Object.keys(defaultColorMap)) {
if (defaultColorMap[curColor] === incomingHex) {
return matugenVariation[curColor];
}
}
return incomingHex;
}

562
scss/matugen/variations.ts Normal file
View File

@@ -0,0 +1,562 @@
import { MatugenColors, MatugenVariation } from "lib/types/options";
/*
* NOTE: This maps the values of the default colors to the values generated by Matugen.
* Each of the variations are carefully tested and curated to make sure that colors don't
* have weird luminocity overlaps (light on light, dark on dark).
*/
export const getMatugenVariations = (matugenColors: MatugenColors, variation: MatugenVariation) => {
const matVtns = {
"standard_1": {
"rosewater": matugenColors.secondary,
"flamingo": matugenColors.secondary,
"pink": matugenColors.tertiary,
"mauve": matugenColors.primary,
"red": matugenColors.tertiary,
"maroon": matugenColors.primary,
"peach": matugenColors.tertiary,
"yellow": matugenColors.secondary,
"green": matugenColors.primary,
"teal": matugenColors.secondary,
"sky": matugenColors.secondary,
"sapphire": matugenColors.primary,
"blue": matugenColors.primary,
"lavender": matugenColors.primary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.primary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.tertiary,
"pink2": matugenColors.tertiary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"overlay1_2": matugenColors.outline,
"text2": matugenColors.on_background,
"lavender2": matugenColors.primary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.primary,
"mauve2": matugenColors.primary,
"green2": matugenColors.primary,
"surface2_2": matugenColors.surface,
"sky2": matugenColors.secondary,
"teal2": matugenColors.secondary,
"yellow2": matugenColors.secondary,
"pink3": matugenColors.tertiary,
"red3": matugenColors.tertiary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.primary,
"mauve3": matugenColors.primary,
"green3": matugenColors.primary,
"sky3": matugenColors.secondary,
"teal3": matugenColors.secondary,
"yellow3": matugenColors.secondary,
"maroon3": matugenColors.primary,
"crust3": matugenColors.surface_dim,
},
"standard_2": {
"rosewater": matugenColors.primary,
"flamingo": matugenColors.primary,
"pink": matugenColors.tertiary,
"mauve": matugenColors.secondary,
"red": matugenColors.tertiary,
"maroon": matugenColors.secondary,
"peach": matugenColors.tertiary,
"yellow": matugenColors.primary,
"green": matugenColors.secondary,
"teal": matugenColors.primary,
"sky": matugenColors.primary,
"sapphire": matugenColors.secondary,
"blue": matugenColors.secondary,
"lavender": matugenColors.secondary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.tertiary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.tertiary,
"pink2": matugenColors.tertiary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"overlay1_2": matugenColors.outline,
"text2": matugenColors.on_background,
"lavender2": matugenColors.secondary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.secondary,
"surface2_2": matugenColors.surface,
"mauve2": matugenColors.secondary,
"green2": matugenColors.secondary,
"sky2": matugenColors.primary,
"teal2": matugenColors.primary,
"yellow2": matugenColors.primary,
"pink3": matugenColors.tertiary,
"red3": matugenColors.tertiary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.secondary,
"mauve3": matugenColors.secondary,
"green3": matugenColors.secondary,
"sky3": matugenColors.primary,
"teal3": matugenColors.primary,
"yellow3": matugenColors.primary,
"maroon3": matugenColors.secondary,
"crust3": matugenColors.surface_dim,
},
"standard_3": {
"rosewater": matugenColors.secondary,
"flamingo": matugenColors.secondary,
"pink": matugenColors.secondary,
"mauve": matugenColors.primary,
"red": matugenColors.secondary,
"maroon": matugenColors.primary,
"peach": matugenColors.secondary,
"yellow": matugenColors.secondary,
"green": matugenColors.primary,
"teal": matugenColors.secondary,
"sky": matugenColors.secondary,
"sapphire": matugenColors.primary,
"blue": matugenColors.primary,
"lavender": matugenColors.primary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.secondary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.secondary,
"pink2": matugenColors.secondary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"surface2_2": matugenColors.surface,
"overlay1_2": matugenColors.outline,
"text2": matugenColors.on_background,
"lavender2": matugenColors.primary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.primary,
"mauve2": matugenColors.primary,
"green2": matugenColors.primary,
"sky2": matugenColors.secondary,
"teal2": matugenColors.secondary,
"yellow2": matugenColors.secondary,
"pink3": matugenColors.secondary,
"red3": matugenColors.secondary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.primary,
"mauve3": matugenColors.primary,
"green3": matugenColors.primary,
"sky3": matugenColors.secondary,
"teal3": matugenColors.secondary,
"yellow3": matugenColors.secondary,
"maroon3": matugenColors.primary,
"crust3": matugenColors.surface_dim,
},
"vivid_1": {
"rosewater": matugenColors.surface,
"flamingo": matugenColors.surface,
"pink": matugenColors.surface,
"mauve": matugenColors.surface,
"red": matugenColors.surface,
"maroon": matugenColors.surface,
"peach": matugenColors.surface,
"yellow": matugenColors.surface,
"green": matugenColors.surface,
"teal": matugenColors.surface,
"sky": matugenColors.surface,
"sapphire": matugenColors.surface,
"blue": matugenColors.surface,
"lavender": matugenColors.surface,
"text": matugenColors.surface,
"subtext1": matugenColors.primary_container,
"subtext2": matugenColors.primary_container,
"overlay2": matugenColors.primary_container,
"overlay1": matugenColors.primary_container,
"overlay0": matugenColors.primary_container,
"surface2": matugenColors.surface_container_high,
"surface1": matugenColors.surface_container_high,
"surface0": matugenColors.surface_container_high,
"base2": matugenColors.primary,
"base": matugenColors.primary,
"mantle": matugenColors.surface_container_low,
"crust": matugenColors.surface_container_lowest,
"red2": matugenColors.primary_container,
"pink2": matugenColors.primary_container,
"mantle2": matugenColors.primary,
"surface1_2": matugenColors.primary,
"surface0_2": matugenColors.primary,
"overlay1_2": matugenColors.surface_container_high,
"text2": matugenColors.outline,
"lavender2": matugenColors.primary_container,
"crust2": matugenColors.primary,
"maroon2": matugenColors.primary_container,
"mauve2": matugenColors.primary_container,
"surface2_2": matugenColors.primary_container,
"green2": matugenColors.primary_container,
"sky2": matugenColors.primary_container,
"teal2": matugenColors.primary_container,
"yellow2": matugenColors.primary_container,
"pink3": matugenColors.primary_fixed,
"red3": matugenColors.primary,
"mantle3": matugenColors.primary,
"surface0_3": matugenColors.primary,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.primary,
"lavender3": matugenColors.primary,
"mauve3": matugenColors.primary,
"green3": matugenColors.primary_fixed,
"sky3": matugenColors.primary,
"teal3": matugenColors.primary,
"yellow3": matugenColors.primary_fixed,
"maroon3": matugenColors.primary_fixed,
"crust3": matugenColors.primary,
},
"vivid_2": {
"rosewater": matugenColors.surface,
"flamingo": matugenColors.surface,
"pink": matugenColors.surface,
"mauve": matugenColors.surface,
"red": matugenColors.surface,
"maroon": matugenColors.surface,
"peach": matugenColors.surface,
"yellow": matugenColors.surface,
"green": matugenColors.surface,
"teal": matugenColors.surface,
"sky": matugenColors.surface,
"sapphire": matugenColors.surface,
"blue": matugenColors.surface,
"lavender": matugenColors.surface,
"text": matugenColors.surface,
"subtext1": matugenColors.secondary_container,
"subtext2": matugenColors.secondary_container,
"overlay2": matugenColors.secondary_container,
"overlay1": matugenColors.secondary_container,
"overlay0": matugenColors.secondary_container,
"surface2": matugenColors.surface_container_high,
"surface1": matugenColors.surface_container_high,
"surface0": matugenColors.surface_container_high,
"base2": matugenColors.secondary,
"base": matugenColors.secondary,
"mantle": matugenColors.surface_container_low,
"crust": matugenColors.surface_container_lowest,
"red2": matugenColors.secondary_container,
"pink2": matugenColors.secondary_container,
"surface2_2": matugenColors.primary_container,
"mantle2": matugenColors.secondary,
"surface1_2": matugenColors.secondary,
"surface0_2": matugenColors.secondary,
"overlay1_2": matugenColors.surface_container_high,
"text2": matugenColors.outline,
"lavender2": matugenColors.secondary_container,
"crust2": matugenColors.secondary,
"maroon2": matugenColors.secondary_container,
"mauve2": matugenColors.secondary_container,
"green2": matugenColors.secondary_container,
"sky2": matugenColors.secondary_container,
"teal2": matugenColors.secondary_container,
"yellow2": matugenColors.secondary_container,
"pink3": matugenColors.secondary_fixed,
"red3": matugenColors.secondary,
"mantle3": matugenColors.secondary,
"surface0_3": matugenColors.secondary,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.secondary,
"lavender3": matugenColors.secondary,
"mauve3": matugenColors.secondary,
"green3": matugenColors.secondary_fixed,
"sky3": matugenColors.secondary,
"teal3": matugenColors.secondary,
"yellow3": matugenColors.secondary_fixed,
"maroon3": matugenColors.secondary_fixed,
"crust3": matugenColors.secondary,
},
"vivid_3": {
"rosewater": matugenColors.surface,
"flamingo": matugenColors.surface,
"pink": matugenColors.surface,
"mauve": matugenColors.surface,
"red": matugenColors.surface,
"maroon": matugenColors.surface,
"peach": matugenColors.surface,
"yellow": matugenColors.surface,
"green": matugenColors.surface,
"teal": matugenColors.surface,
"sky": matugenColors.surface,
"sapphire": matugenColors.surface,
"blue": matugenColors.surface,
"lavender": matugenColors.surface,
"text": matugenColors.surface,
"subtext1": matugenColors.tertiary_container,
"subtext2": matugenColors.tertiary_container,
"overlay2": matugenColors.tertiary_container,
"overlay1": matugenColors.tertiary_container,
"overlay0": matugenColors.tertiary_container,
"surface2": matugenColors.surface_container_high,
"surface1": matugenColors.surface_container_high,
"surface0": matugenColors.surface_container_high,
"base2": matugenColors.tertiary,
"base": matugenColors.tertiary,
"mantle": matugenColors.surface_container_low,
"crust": matugenColors.surface_container_lowest,
"red2": matugenColors.tertiary_container,
"pink2": matugenColors.tertiary_container,
"mantle2": matugenColors.tertiary,
"surface1_2": matugenColors.tertiary,
"surface0_2": matugenColors.tertiary,
"overlay1_2": matugenColors.surface_container_high,
"text2": matugenColors.outline,
"lavender2": matugenColors.tertiary_container,
"surface2_2": matugenColors.primary_container,
"crust2": matugenColors.tertiary,
"maroon2": matugenColors.tertiary_container,
"mauve2": matugenColors.tertiary_container,
"green2": matugenColors.tertiary_container,
"sky2": matugenColors.tertiary_container,
"teal2": matugenColors.tertiary_container,
"yellow2": matugenColors.tertiary_container,
"pink3": matugenColors.tertiary_fixed,
"red3": matugenColors.tertiary,
"mantle3": matugenColors.tertiary,
"surface0_3": matugenColors.tertiary,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.tertiary,
"lavender3": matugenColors.tertiary,
"mauve3": matugenColors.tertiary,
"green3": matugenColors.tertiary_fixed,
"sky3": matugenColors.tertiary,
"teal3": matugenColors.tertiary,
"yellow3": matugenColors.tertiary_fixed,
"maroon3": matugenColors.tertiary_fixed,
"crust3": matugenColors.tertiary,
},
"monochrome_1": {
"rosewater": matugenColors.primary,
"flamingo": matugenColors.primary,
"pink": matugenColors.primary,
"mauve": matugenColors.primary,
"red": matugenColors.primary,
"maroon": matugenColors.primary,
"peach": matugenColors.primary,
"yellow": matugenColors.primary,
"green": matugenColors.primary,
"teal": matugenColors.primary,
"sky": matugenColors.primary,
"sapphire": matugenColors.primary,
"blue": matugenColors.primary,
"lavender": matugenColors.primary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.primary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.primary,
"pink2": matugenColors.primary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"surface2_2": matugenColors.surface,
"overlay1_2": matugenColors.outline,
"text2": matugenColors.on_background,
"lavender2": matugenColors.primary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.primary,
"mauve2": matugenColors.primary,
"green2": matugenColors.primary,
"sky2": matugenColors.primary,
"teal2": matugenColors.primary,
"yellow2": matugenColors.primary,
"pink3": matugenColors.primary,
"red3": matugenColors.primary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.primary,
"mauve3": matugenColors.primary,
"green3": matugenColors.primary,
"sky3": matugenColors.primary,
"teal3": matugenColors.primary,
"yellow3": matugenColors.primary,
"maroon3": matugenColors.primary,
"crust3": matugenColors.surface_dim,
},
"monochrome_2": {
"rosewater": matugenColors.secondary,
"flamingo": matugenColors.secondary,
"pink": matugenColors.secondary,
"mauve": matugenColors.secondary,
"red": matugenColors.secondary,
"maroon": matugenColors.secondary,
"peach": matugenColors.secondary,
"yellow": matugenColors.secondary,
"green": matugenColors.secondary,
"teal": matugenColors.secondary,
"sky": matugenColors.secondary,
"sapphire": matugenColors.secondary,
"blue": matugenColors.secondary,
"lavender": matugenColors.secondary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.secondary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.secondary,
"pink2": matugenColors.secondary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"overlay1_2": matugenColors.outline,
"surface2_2": matugenColors.surface,
"text2": matugenColors.on_background,
"lavender2": matugenColors.secondary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.secondary,
"mauve2": matugenColors.secondary,
"green2": matugenColors.secondary,
"sky2": matugenColors.secondary,
"teal2": matugenColors.secondary,
"yellow2": matugenColors.secondary,
"pink3": matugenColors.secondary,
"red3": matugenColors.secondary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.secondary,
"mauve3": matugenColors.secondary,
"green3": matugenColors.secondary,
"sky3": matugenColors.secondary,
"teal3": matugenColors.secondary,
"yellow3": matugenColors.secondary,
"maroon3": matugenColors.secondary,
"crust3": matugenColors.surface_dim,
},
"monochrome_3": {
"rosewater": matugenColors.tertiary,
"flamingo": matugenColors.tertiary,
"pink": matugenColors.tertiary,
"mauve": matugenColors.tertiary,
"red": matugenColors.tertiary,
"maroon": matugenColors.tertiary,
"peach": matugenColors.tertiary,
"yellow": matugenColors.tertiary,
"green": matugenColors.tertiary,
"teal": matugenColors.tertiary,
"sky": matugenColors.tertiary,
"sapphire": matugenColors.tertiary,
"blue": matugenColors.tertiary,
"lavender": matugenColors.tertiary,
"text": matugenColors.on_background,
"subtext1": matugenColors.outline,
"subtext2": matugenColors.outline,
"overlay2": matugenColors.outline,
"overlay1": matugenColors.outline,
"overlay0": matugenColors.outline,
"surface2": matugenColors.outline,
"surface1": matugenColors.surface_bright,
"surface0": matugenColors.surface_bright,
"base2": matugenColors.inverse_on_surface,
"base": matugenColors.inverse_on_surface,
"mantle": matugenColors.surface_dim,
"crust": matugenColors.surface_dim,
"notifications_closer": matugenColors.tertiary,
"notifications_background": matugenColors.surface_dim,
"dashboard_btn_text": matugenColors.surface_dim,
"red2": matugenColors.tertiary,
"pink2": matugenColors.tertiary,
"mantle2": matugenColors.surface_dim,
"surface1_2": matugenColors.inverse_on_surface,
"surface0_2": matugenColors.surface_bright,
"overlay1_2": matugenColors.outline,
"text2": matugenColors.on_background,
"lavender2": matugenColors.tertiary,
"crust2": matugenColors.surface_dim,
"maroon2": matugenColors.tertiary,
"surface2_2": matugenColors.surface,
"mauve2": matugenColors.tertiary,
"green2": matugenColors.tertiary,
"sky2": matugenColors.tertiary,
"teal2": matugenColors.tertiary,
"yellow2": matugenColors.tertiary,
"pink3": matugenColors.tertiary,
"red3": matugenColors.tertiary,
"mantle3": matugenColors.inverse_on_surface,
"surface0_3": matugenColors.outline,
"surface2_3": matugenColors.outline,
"overlay1_3": matugenColors.outline,
"lavender3": matugenColors.tertiary,
"mauve3": matugenColors.tertiary,
"green3": matugenColors.tertiary,
"sky3": matugenColors.tertiary,
"teal3": matugenColors.tertiary,
"yellow3": matugenColors.tertiary,
"maroon3": matugenColors.tertiary,
"crust3": matugenColors.surface_dim,
},
};
return matVtns[variation];
}

46
scss/options_trackers.ts Normal file
View File

@@ -0,0 +1,46 @@
import icons from "lib/icons";
import { Notify, isAnImage } from "lib/utils";
import options from "options";
import Wallpaper from "services/Wallpaper";
const { matugen } = options.theme;
const { mode, scheme_type, contrast } = options.theme.matugen_settings;
const ensureMatugenWallpaper = (): void => {
const wallpaperPath = options.wallpaper.image.value;
if (matugen.value && (!options.wallpaper.image.value.length || !isAnImage(wallpaperPath))) {
Notify({
summary: "Matugen Failed",
body: "Please select a wallpaper in 'Theming > General' first.",
iconName: icons.ui.warning,
timeout: 7000
})
matugen.value = false;
}
}
export const initializeTrackers = (resetCssFunc: Function) => {
matugen.connect("changed", () => {
ensureMatugenWallpaper();
options.resetTheme();
})
mode.connect("changed", () => {
options.resetTheme();
})
scheme_type.connect("changed", () => {
options.resetTheme();
})
contrast.connect("changed", () => {
options.resetTheme();
})
Wallpaper.connect("changed", () => {
if (options.theme.matugen.value) {
options.resetTheme();
resetCssFunc();
}
})
}

60
scss/style.ts
View File

@@ -1,7 +1,8 @@
/* eslint-disable max-len */
import { type Opt } from "lib/option"
import options from "options"
import { bash, dependencies } from "lib/utils"
import options from "options";
import { bash, dependencies } from "lib/utils";
import { MatugenColors } from "lib/types/options";
import { initializeTrackers } from "./options_trackers";
import { generateMatugenColors, replaceHexValues } from "./matugen/index";
const deps = [
"font",
@@ -10,53 +11,58 @@ const deps = [
"bar.position",
"bar.battery.charging",
"bar.battery.blocks",
]
];
const $ = (name: string, value: string | Opt<any>) => `$${name}: ${value};`
function extractVariables(theme: any, prefix: string = ""): string[] {
let result: string[] = [];
function extractVariables(theme: typeof options.theme, prefix = "", matugenColors: MatugenColors | undefined) {
let result = [] as string[];
for (let key in theme) {
if (theme.hasOwnProperty(key)) {
const value = theme[key];
const newPrefix = prefix ? `${prefix}-${key}` : key;
const isColor = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value.value);
const replacedValue = isColor && matugenColors !== undefined ? replaceHexValues(value.value, matugenColors) : value.value;
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
// Check if the object contains an Opt value or is a nested object
if (typeof value.value !== 'undefined') {
result.push($(`${newPrefix}`, `${value.value}`));
result.push(`$${newPrefix}: ${replacedValue};`);
} else {
result = result.concat(extractVariables(value, newPrefix));
result = result.concat(extractVariables(value, newPrefix, matugenColors));
}
} else if (typeof value === 'function' && value.name === 'opt') {
result.push($(`${newPrefix}`, value));
result.push(`$${newPrefix}: ${replacedValue};`);
}
}
}
return result;
}
const variables = () => [
...extractVariables(options.theme),
];
async function resetCss() {
if (!dependencies("sass"))
return
if (!dependencies("sass")) return;
try {
const matugenColors = await generateMatugenColors();
const variables = [
...extractVariables(options.theme, '', matugenColors),
];
const vars = `${TMP}/variables.scss`
const css = `${TMP}/main.css`
const scss = `${TMP}/entry.scss`
const localScss = `${App.configDir}/scss/main.scss`;
await Utils.writeFile(variables().join("\n"), vars)
const imports = [vars].map(f => `@import '${f}';`)
const themeVariables = variables;
const integratedVariables = themeVariables;
const imports = [vars].map(f => `@import '${f}';`);
await Utils.writeFile(integratedVariables.join("\n"), vars);
let mainScss = Utils.readFile(localScss);
mainScss = `${imports}\n${mainScss}`;
await Utils.writeFile(mainScss, scss)
await Utils.writeFile(mainScss, scss);
await bash(`sass --load-path=${App.configDir}/scss/ ${scss} ${css}`);
@@ -64,10 +70,12 @@ async function resetCss() {
} catch (error) {
error instanceof Error
? logError(error)
: console.error(error)
: console.error(error);
}
}
Utils.monitorFile(`${App.configDir}/scss/style`, resetCss)
options.handler(deps, resetCss)
await resetCss()
initializeTrackers(resetCss);
Utils.monitorFile(`${App.configDir}/scss/style`, resetCss);
options.handler(deps, resetCss);
await resetCss();

2
scss/style/bar/workspace.scss
View File

@@ -42,7 +42,7 @@
}
&.underline {
border-bottom: 0.1em solid $pink;
border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_text_color;
}
&.highlight {

9
scss/style/menus/audiomenu.scss
View File

@@ -62,6 +62,11 @@
}
}
.menu-active-percentage.playback,
.menu-active-percentage.input {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-volume-text);
}
.menu-active-button {
.menu-active-icon.playback,
@@ -120,7 +125,7 @@
.menu-button-name.playback,
.menu-button-name.input {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-volume-listitems-active);
}
}
}
@@ -165,4 +170,4 @@
.menu-items-section.playback {
border-radius: 0em;
}
}

2
scss/style/menus/dashboard.scss
View File

@@ -44,7 +44,7 @@
}
image {
color: $base;
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
font-size: 1.5em;
}

50
scss/style/menus/energy.scss
View File

@@ -17,8 +17,9 @@
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
}
.power-profile-item {
margin-bottom: 0.5em;
.power-profile-item {
color: if($bar-menus-monochrome, $bar-menus-listitems-passive, $bar-menus-menu-battery-listitems-passive);
margin-bottom: 0.5em;
label {
margin-left: 1em;
@@ -31,40 +32,43 @@
color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
}
&:hover {
label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
&:hover {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
label {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
image {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
}
&.active {
image {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
&.active {
color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
image {
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
}
}
}
.brightness-container {
padding-bottom: 1em;
}
.brightness-slider-icon {
font-size: 1.4em;
min-width: 1em;
min-height: 1em;
color: $overlay2;
}
.brightness-slider-icon {
font-size: 1.4em;
min-width: 1em;
min-height: 1em;
color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
}
.brightness-slider-label {
font-size: 0.9em;
min-width: 2.5em;
font-weight: bold;
margin-bottom: 0.2em;
}
.brightness-slider-label {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-battery-text);
font-size: 0.9em;
min-width: 2.5em;
font-weight: bold;
margin-bottom: 0.2em;
}
.menu-slider.brightness {
trough {

1
scss/style/menus/network.scss
View File

@@ -108,6 +108,7 @@
}
.menu-icon-button.network.disconnect {
color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
margin: 0em;
margin-top: -0.2em;
margin-left: 1em;

38
scss/style/settings/dialog.scss
View File

@@ -2,7 +2,7 @@ window.settings-dialog {
background-color: $bar-menus-cards;
color: $bar-menus-text;
$padding: 1em;
$padding: 0.5em;
$primary_bg: $bar-menus-background;
$spacing: 0.4em;
$radius: 0.5em;
@@ -10,10 +10,14 @@ window.settings-dialog {
$border: none;
$fg: $bar-menus-text;
.settings-dialog-box {
min-width: 75em;
}
.header {
background-color: $bar-menus-background;
background-color: transparentize($bar-menus-background, 0.1);
border-bottom-left-radius: $bar-menus-border-radius/2;
border-bottom-right-radius: $bar-menus-border-radius/2;
padding: $padding;
button {
@@ -57,7 +61,7 @@ window.settings-dialog {
.group {
.group-title {
color: $primary-bg;
color: $bar-menus-text;
margin-bottom: $spacing*.5;
}
@@ -178,7 +182,7 @@ window.settings-dialog {
}
padding: 0.35em 0.35em;
background: $surface1;
background: transparentize($bar-menus-background, 0.6);
margin-right: 1em;
}
}
@@ -194,6 +198,7 @@ window.settings-dialog {
}
.pager-button {
color: transparentize($bar-menus-text, 0.4);
margin: 0.5em 0.75em;
&.category label {
@@ -201,11 +206,17 @@ window.settings-dialog {
}
&:hover {
color: $bar-menus-iconbuttons-active;
label {
text-decoration: underline;
color: $bar-menus-text;
}
}
&.active {
color: $bar-menus-iconbuttons-active;
label {
text-decoration: underline;
color: $bar-menus-text;
}
}
}
@@ -219,7 +230,7 @@ window.settings-dialog {
.paged-container {
.reset-options {
color: $bar-menus-iconbuttons-passive;
color: $bar-menus-text;
image:disabled {
color: $bar-menus-buttons-disabled;
@@ -227,7 +238,7 @@ window.settings-dialog {
&:hover {
image {
color: $bar-menus-buttons-active;
color: transparentize($bar-menus-text, 0.5);
}
}
}
@@ -246,7 +257,8 @@ window.settings-dialog {
}
selection {
background: $bar-menus-background;
background: $bar-menus-label;
color: $bar-menus-cards;
}
switch {
@@ -272,6 +284,12 @@ window.settings-dialog {
dialog {
background: $bar-menus-cards;
color: $bar-menus-text;
:selected {
background: transparentize($bar-menus-label, 0.2);
color: transparentize($bar-menus-cards, 0.2);
}
headerbar {
border-bottom: 0.075em solid $bar-menus-border-color;