From 4904cfbe713083ad124ce8c971c72f00fb8f00e5 Mon Sep 17 00:00:00 2001 From: midn8hustlr <4visekh@gmail.com> Date: Sat, 16 Mar 2024 21:00:17 +0530 Subject: [PATCH] Added color Schemes support. Added settings GUI in colorscheme-osd --- .../modules/.commonwidgets/configwidgets.js | 48 +++- .config/ags/modules/indicators/colorscheme.js | 185 +++++++++++++-- .config/ags/modules/overview/miscfunctions.js | 4 +- .config/ags/modules/sideleft/tools/module.js | 2 +- .../modules/sideleft/tools/quickscripts.js | 2 +- .../scripts/color_generation/applycolor.sh | 6 +- .../ags/scripts/color_generation/colorgen.sh | 19 +- .../generate_colors_material.py | 214 ++++++------------ .../scripts/color_generation/switchcolor.sh | 6 +- .../scripts/color_generation/switchwall.sh | 2 +- .config/ags/scss/_colors.scss | 22 +- .config/ags/scss/_common.scss | 27 ++- .config/ags/scss/_material.scss | 84 ++++--- .config/ags/scss/_osd.scss | 81 ++++++- 14 files changed, 485 insertions(+), 217 deletions(-) diff --git a/.config/ags/modules/.commonwidgets/configwidgets.js b/.config/ags/modules/.commonwidgets/configwidgets.js index ba181c604..6e7dced1e 100644 --- a/.config/ags/modules/.commonwidgets/configwidgets.js +++ b/.config/ags/modules/.commonwidgets/configwidgets.js @@ -120,7 +120,53 @@ export const ConfigSegmentedSelection = ({ } +export const ConfigMulipleSelection = ({ + icon, name, desc = '', + optionsArr = [ + [ { name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 } ], + [ { name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 } ], + ], + initIndex = [0, 0], + onChange, + ...rest +}) => { + let lastSelected = initIndex; + let value = optionsArr[initIndex[0]][initIndex[1]].value; + const widget = Box({ + tooltipText: desc, + className: 'multipleselection-container spacing-v-3', + //homogeneous: true, + vertical: true, + children: optionsArr.map((options, grp) => { + return Box({ + className: 'spacing-h-5', + hpack: 'center', + children: options.map((option, id) => { + return Button({ + setup: setupCursorHover, + className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`, + label: option.name, + onClicked: (self) => { + const kidsg = widget.get_children(); + const kids = kidsg.flatMap(widget => widget.get_children()); + kids.forEach(kid => { + kid.toggleClassName('multipleselection-btn-enabled', false); + }); + lastSelected = id; + self.toggleClassName('multipleselection-btn-enabled', true); + onChange(option.value, option.name); + } + }) + }), + }) + }), + ...rest, + }); + return widget; + +} + export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({ className: `gap-${vertical ? 'v' : 'h'}-${size}`, ...rest, -}) \ No newline at end of file +}) diff --git a/.config/ags/modules/indicators/colorscheme.js b/.config/ags/modules/indicators/colorscheme.js index 54ecef8ad..b54a5f290 100644 --- a/.config/ags/modules/indicators/colorscheme.js +++ b/.config/ags/modules/indicators/colorscheme.js @@ -1,51 +1,206 @@ +const { Gio, GLib } = imports.gi; +import Variable from 'resource:///com/github/Aylur/ags/variable.js'; import Widget from 'resource:///com/github/Aylur/ags/widget.js'; - -const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget; +import { ConfigToggle, ConfigMulipleSelection } from '../.commonwidgets/configwidgets.js'; +import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; +const { execAsync } = Utils; +import { setupCursorHover } from '../.widgetutils/cursorhover.js'; import { showColorScheme } from '../../variables.js'; +import { MaterialIcon } from '../.commonwidgets/materialicon.js'; const ColorBox = ({ name = 'Color', ...rest -}) => Box({ +}) => Widget.Box({ ...rest, homogeneous: true, children: [ - Label({ + Widget.Label({ label: `${name}`, }) ] }) -const ColorschemeContent = () => Box({ +const ColorSchemeSettingsRevealer = () => { + const headerButtonIcon = MaterialIcon('expand_more', 'norm'); + const header = Widget.Button({ + className: 'osd-settings-btn-arrow', + onClicked: () => { + content.revealChild = !content.revealChild; + headerButtonIcon.label = content.revealChild ? 'expand_less' : 'expand_more'; + }, + setup: setupCursorHover, + hpack: 'end', + child: headerButtonIcon, + }); + const content = Widget.Revealer({ + revealChild: false, + transition: 'slide_down', + transitionDuration: 200, + child: ColorSchemeSettings(), + setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => { + if (isHoveredColorschemeSettings.value == false) { + setTimeout(() => { + if (isHoveredColorschemeSettings.value == false) + revealer.revealChild = false; + headerButtonIcon.label = 'expand_more'; + }, 1500); + } + }), + }); + return Widget.EventBox({ + onHover: (self) => { + isHoveredColorschemeSettings.setValue(true); + }, + onHoverLost: (self) => { + isHoveredColorschemeSettings.setValue(false); + }, + child: Widget.Box({ + vertical: true, + children: [ + header, + content, + ] + }), + }); +} + +function calculateSchemeInitIndex(optionsArr, searchValue = 'monochrome') { + const flatArray = optionsArr.flatMap(subArray => subArray); + const result = flatArray.findIndex(element => element.value === searchValue); + const rowIndex = Math.floor(result / optionsArr[0].length); + const columnIndex = result % optionsArr[0].length; + return [rowIndex, columnIndex]; +} + +const schemeOptionsArr = [ + [ + { name: 'Tonal Spot', value: 'tonalspot' }, + { name: 'Fruit Salad', value: 'fruitsalad' }, + { name: 'Fidelity', value: 'fidelity' }, + { name: 'Rainbow', value: 'rainbow' }, + ], + [ + { name: 'Neutral', value: 'neutral' }, + { name: 'Monochrome', value: 'monochrome' }, + { name: 'Expressive', value: 'expressive' }, + { name: 'Vibrant', value: 'vibrant' }, + ], + //[ + // { name: 'Content', value: 'content' }, + //] +]; + +const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"'); +const initColorVal = (initColorMode == "dark") ? 1 : 0; +const initTransperancy = Utils.exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"'); +const initTransperancyVal = (initTransperancy == "transparent") ? 1 : 0; +const initScheme = Utils.exec('bash -c "sed -n \'3p\' $HOME/.cache/ags/user/colormode.txt"'); +const initSchemeIndex = calculateSchemeInitIndex(schemeOptionsArr, initScheme); + +const ColorSchemeSettings = () => Widget.Box({ + className: 'osd-colorscheme-settings spacing-v-5', + vertical: true, + vpack: 'center', + children: [ + Widget.Box({ + children: [ + ConfigToggle({ + name: 'Dark Mode', + initValue: initColorVal, + onChange: (self, newValue) => { + let lightdark = newValue == 0 ? "light" : "dark"; + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/${lightdark}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ConfigToggle({ + name: 'Transperancy', + initValue: initTransperancyVal, + onChange: (self, newValue) => { + let transperancy = newValue == 0 ? "opaque" : "transparent"; + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transperancy}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ] + }), + ConfigMulipleSelection({ + hpack: 'center', + vpack: 'center', + optionsArr: schemeOptionsArr, + initIndex: initSchemeIndex, + onChange: (value, name) => { + execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "3s/.*/${value}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) + .then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`])) + .catch(print); + }, + }), + ] +}); + +const ColorschemeContent = () => Widget.Box({ className: 'osd-colorscheme spacing-v-5', vertical: true, hpack: 'center', children: [ - Label({ + Widget.Label({ xalign: 0, className: 'txt-norm titlefont txt', label: 'Colorscheme', + hpack: 'center', }), - Box({ + Widget.Box({ className: 'spacing-h-5', + hpack: 'center', children: [ ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }), - ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }), ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }), - ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }), - ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }), + ColorBox({ name: 'T', className: 'osd-color osd-color-tertiary' }), ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }), - ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }), + ColorBox({ name: 'Sf-i', className: 'osd-color osd-color-inverseSurface' }), + ColorBox({ name: 'E', className: 'osd-color osd-color-error' }), ] - }) + }), + Widget.Box({ + className: 'spacing-h-5', + hpack: 'center', + children: [ + ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }), + ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }), + ColorBox({ name: 'T-c', className: 'osd-color osd-color-tertiaryContainer' }), + ColorBox({ name: 'Sf-c', className: 'osd-color osd-color-surfaceContainer' }), + ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }), + ColorBox({ name: 'E-c', className: 'osd-color osd-color-errorContainer' }), + ] + }), + ColorSchemeSettingsRevealer(), ] }); +const isHoveredColorschemeSettings = Variable(false); + export default () => Widget.Revealer({ transition: 'slide_down', transitionDuration: 200, child: ColorschemeContent(), - setup: (self) => self.hook(showColorScheme, (revealer) => { - revealer.revealChild = showColorScheme.value; - }), + setup: (self) => { + self + .hook(showColorScheme, (revealer) => { + if (showColorScheme.value == true) + revealer.revealChild = true; + else + revealer.revealChild = isHoveredColorschemeSettings.value; + }) + .hook(isHoveredColorschemeSettings, (revealer) => { + if (isHoveredColorschemeSettings.value == false) { + setTimeout(() => { + if (isHoveredColorschemeSettings.value == false) + revealer.revealChild = showColorScheme.value; + }, 2000); + } + }) + }, }) diff --git a/.config/ags/modules/overview/miscfunctions.js b/.config/ags/modules/overview/miscfunctions.js index ca592d01d..c6f89f93e 100644 --- a/.config/ags/modules/overview/miscfunctions.js +++ b/.config/ags/modules/overview/miscfunctions.js @@ -19,7 +19,7 @@ export function launchCustomCommand(command) { execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print); } else if (args[0] == '>color') { // Generate colorscheme from color picker - execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print); + execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh --pick`, `&`]).catch(print); } else if (args[0] == '>light') { // Light mode execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "-l" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`]) @@ -138,4 +138,4 @@ export function ls({ path = '~', silent = false }) { if (!silent) console.log(e); } return contents; -} \ No newline at end of file +} diff --git a/.config/ags/modules/sideleft/tools/module.js b/.config/ags/modules/sideleft/tools/module.js index cf6037e42..bda60bee9 100644 --- a/.config/ags/modules/sideleft/tools/module.js +++ b/.config/ags/modules/sideleft/tools/module.js @@ -53,4 +53,4 @@ export default ({ content, ] }); -} \ No newline at end of file +} diff --git a/.config/ags/modules/sideleft/tools/quickscripts.js b/.config/ags/modules/sideleft/tools/quickscripts.js index 5b3fbec8e..66a53c050 100644 --- a/.config/ags/modules/sideleft/tools/quickscripts.js +++ b/.config/ags/modules/sideleft/tools/quickscripts.js @@ -90,4 +90,4 @@ export default () => SidebarModule({ }) }), }) -}); \ No newline at end of file +}); diff --git a/.config/ags/scripts/color_generation/applycolor.sh b/.config/ags/scripts/color_generation/applycolor.sh index f5aad6a0d..32528d994 100755 --- a/.config/ags/scripts/color_generation/applycolor.sh +++ b/.config/ags/scripts/color_generation/applycolor.sh @@ -1,6 +1,6 @@ #!/usr/bin/env bash -term_alpha=100 #Set this to < 100 make all your terminals transparent +term_alpha=80 #Set this to < 100 make all your terminals transparent # sleep 0 # idk i wanted some delay or colors dont get applied properly if [ ! -d "$HOME"/.cache/ags/user/generated ]; then mkdir -p "$HOME"/.cache/ags/user/generated @@ -52,7 +52,7 @@ get_light_dark() { if [ ! -f "$HOME"/.cache/ags/user/colormode.txt ]; then echo "" > "$HOME"/.cache/ags/user/colormode.txt else - lightdark=$(cat "$HOME"/.cache/ags/user/colormode.txt) # either "" or "-l" + lightdark=$(sed -n '1p' "$HOME/.cache/ags/user/colormode.txt") fi echo "$lightdark" } @@ -163,7 +163,7 @@ apply_gtk() { # Using gradience-cli # Set light/dark preference # And set GTK theme manually as Gradience defaults to light adw-gtk3 # (which is unreadable when broken when you use dark mode) - if [ "$lightdark" = "-l" ]; then + if [ "$lightdark" = "light" ]; then gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3' gsettings set org.gnome.desktop.interface color-scheme 'prefer-light' else diff --git a/.config/ags/scripts/color_generation/colorgen.sh b/.config/ags/scripts/color_generation/colorgen.sh index 15f81adb4..3978bbb71 100755 --- a/.config/ags/scripts/color_generation/colorgen.sh +++ b/.config/ags/scripts/color_generation/colorgen.sh @@ -1,6 +1,5 @@ #!/usr/bin/env bash -source ${HOME}/virtualenvs/my_project_venv/bin/activate # check if no arguments if [ $# -eq 0 ]; then @@ -9,11 +8,15 @@ if [ $# -eq 0 ]; then fi # check if the file ~/.cache/ags/user/colormode.txt exists. if not, create it. else, read it to $lightdark -lightdark="" +lightdark="dark" +transparency="opaque" +materialscheme="tonalspot" if [ ! -f "$HOME/.cache/ags/user/colormode.txt" ]; then - echo "" > "$HOME/.cache/ags/user/colormode.txt" + echo "dark\nopaque\ntonalspot" > "$HOME/.cache/ags/user/colormode.txt" else - lightdark=$(cat "$HOME/.cache/ags/user/colormode.txt") # either "" or "-l" + lightdark=$(sed -n '1p' "$HOME/.cache/ags/user/colormode.txt") + transparency=$(sed -n '2p' "$HOME/.cache/ags/user/colormode.txt") + materialscheme=$(sed -n '3p' "$HOME/.cache/ags/user/colormode.txt") fi backend="material" # color generator backend if [ ! -f "$HOME/.cache/ags/user/colorbackend.txt" ]; then @@ -24,13 +27,17 @@ fi cd "$HOME/.config/ags/scripts/" || exit if [[ "$1" = "#"* ]]; then # this is a color - color_generation/generate_colors_material.py --color "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss + source ${HOME}/virtualenvs/my_project_venv/bin/activate + color_generation/generate_colors_material.py --color "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss + deactivate if [ "$2" = "--apply" ]; then cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss" color_generation/applycolor.sh fi elif [ "$backend" = "material" ]; then - color_generation/generate_colors_material.py --path "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss + source ${HOME}/virtualenvs/my_project_venv/bin/activate + color_generation/generate_colors_material.py --path "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss + deactivate if [ "$2" = "--apply" ]; then cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss" color_generation/applycolor.sh diff --git a/.config/ags/scripts/color_generation/generate_colors_material.py b/.config/ags/scripts/color_generation/generate_colors_material.py index 9edd06ac4..2cdf4b774 100755 --- a/.config/ags/scripts/color_generation/generate_colors_material.py +++ b/.config/ags/scripts/color_generation/generate_colors_material.py @@ -3,159 +3,82 @@ from material_color_utilities_python import * from pathlib import Path import sys import subprocess +import argparse +import os -# Color in hue, chroma, tone form from materialyoucolor.hct import Hct from materialyoucolor.dynamiccolor.material_dynamic_colors import MaterialDynamicColors -# There are 9 different variants of scheme. + +parser = argparse.ArgumentParser(description='Color generation script') +parser.add_argument('--path', type=str, default=None, help='generate colorscheme from image') +parser.add_argument('--color', type=str, default=None, help='generate colorscheme from color') +parser.add_argument('--mode', type=str , choices=['dark', 'light'], default='dark', help='dark or light mode') +parser.add_argument('--scheme', type=str, default=None, help='material scheme to use') +parser.add_argument('--transparency', type=str , choices=['opaque', 'transparent'], default='opaque', help='enable transparency') +parser.add_argument('--debug', action='store_true', default=False, help='debug mode') +args = parser.parse_args() + +export_color_file=os.environ['HOME']+"/.cache/ags/user/color.txt" + +# Default scheme -> Tonal Spot (Android Default) from materialyoucolor.scheme.scheme_tonal_spot import SchemeTonalSpot as Scheme -#from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme -#from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme -#from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme -#from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme -#from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme -#from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme -#from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme -#from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme -# Others you can import: SchemeExpressive, SchemeFruitSalad, SchemeMonochrome, SchemeRainbow, SchemeVibrant, SchemeNeutral, SchemeFidelity and SchemeContent +if args.scheme is not None: + if args.scheme == 'fruitsalad': + from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme + elif args.scheme == 'expressive': + from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme + elif args.scheme == 'monochrome': + from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme + elif args.scheme == 'rainbow': + from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme + elif args.scheme == 'vibrant': + from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme + elif args.scheme == 'neutral': + from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme + elif args.scheme == 'fidelity': + from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme + elif args.scheme == 'content': + from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme -def darken(hex_color, factor=0.7): - if not (hex_color.startswith('#') and len(hex_color) in (4, 7)): - raise ValueError("Invalid hex color format") - hex_color = hex_color.lstrip('#') - rgb = tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4)) - darkened_rgb = tuple(int(max(0, val * factor)) for val in rgb) - darkened_hex = "#{:02X}{:02X}{:02X}".format(*darkened_rgb) - return darkened_hex +def hex_to_argb(hex_color): + color = hex_color.lstrip('#') + if len(color) != 6: + raise ValueError("Invalid color code!") + r = int(color[:2], 16) + g = int(color[2:4], 16) + b = int(color[4:], 16) + a = 255 + argb = (a << 24) | (r << 16) | (g << 8) | b + return argb -img = 0 -newtheme=0 -if len(sys.argv) > 1 and sys.argv[1] == '--path': - # try: - img = Image.open(sys.argv[2]) +def argb_to_hex(argb_value): + r = (argb_value >> 16) & 0xff + g = (argb_value >> 8) & 0xff + b = argb_value & 0xff + hex_r = format(r, '02x') + hex_g = format(g, '02x') + hex_b = format(b, '02x') + hex_color = f"#{hex_r}{hex_g}{hex_b}" + return hex_color + +darkmode = (args.mode == 'dark') +transparent = (args.transparency == 'transparent') +print(f"$darkmode: {darkmode};") +print(f"$transparent: {transparent};") + +if args.path is not None: + img = Image.open(args.path) basewidth = 64 wpercent = (basewidth/float(img.size[0])) hsize = int((float(img.size[1])*float(wpercent))) img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS) - newtheme = themeFromImage(img) argb = sourceColorFromImage(img) + with open(export_color_file, 'w') as file: + file.write(argb_to_hex(argb)) +elif args.color is not None: + argb = hex_to_argb(args.color) - scheme = Scheme(Hct.from_int(argb), True, 0.0) - - # except FileNotFoundError: - # print('[generate_colors_material.py] File not found', file=sys.stderr); - # exit() - # except: - # print('[generate_colors_material.py] Something went wrong', file=sys.stderr); - # exit() -elif len(sys.argv) > 1 and sys.argv[1] == '--color': - colorstr = sys.argv[2] - newtheme = themeFromSourceColor(argbFromHex(colorstr)) -else: - # try: - # imagePath = subprocess.check_output("ags run-js 'wallpaper.get(0)'", shell=True) - imagePath = subprocess.check_output("swww query | awk -F 'image: ' '{print $2}'", shell=True) - imagePath = imagePath[:-1].decode("utf-8") - img = Image.open(imagePath) - basewidth = 64 - wpercent = (basewidth/float(img.size[0])) - hsize = int((float(img.size[1])*float(wpercent))) - img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS) - newtheme = themeFromImage(img) - # except FileNotFoundError: - # print('[generate_colors_material.py] File not found', file=sys.stderr) - # exit() - # except: - # print('[generate_colors_material.py] Something went wrong', file=sys.stderr); - # exit() - -colorscheme=0 -darkmode = True -if("-l" in sys.argv): - darkmode = False - colorscheme = newtheme.get('schemes').get('light') - print('$darkmode: false;') -else: - colorscheme = newtheme.get('schemes').get('dark') - print('$darkmode: true;') - -#primary = hexFromArgb(colorscheme.get_primary()) -#onPrimary = hexFromArgb(colorscheme.get_onPrimary()) -#primaryContainer = hexFromArgb(colorscheme.get_primaryContainer()) -#onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer()) -#secondary = hexFromArgb(colorscheme.get_secondary()) -#onSecondary = hexFromArgb(colorscheme.get_onSecondary()) -#secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer()) -#onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer()) -#tertiary = hexFromArgb(colorscheme.get_tertiary()) -#onTertiary = hexFromArgb(colorscheme.get_onTertiary()) -#tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer()) -#onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer()) -#error = hexFromArgb(colorscheme.get_error()) -#onError = hexFromArgb(colorscheme.get_onError()) -#errorContainer = hexFromArgb(colorscheme.get_errorContainer()) -#onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer()) -#background = hexFromArgb(colorscheme.get_background()) -#onBackground = hexFromArgb(colorscheme.get_onBackground()) -#surface = hexFromArgb(colorscheme.get_surface()) -#onSurface = hexFromArgb(colorscheme.get_onSurface()) -#surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant()) -#onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant()) -#outline = hexFromArgb(colorscheme.get_outline()) -#shadow = hexFromArgb(colorscheme.get_shadow()) -#inverseSurface = hexFromArgb(colorscheme.get_inverseSurface()) -#inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface()) -#inversePrimary = hexFromArgb(colorscheme.get_inversePrimary()) - - -# make material less boring -#if darkmode: -# background = darken(background, 0.6) - -#print('$primary: ' + primary + ';') -#print('$onPrimary: ' + onPrimary + ';') -#print('$primaryContainer: ' + primaryContainer + ';') -#print('$onPrimaryContainer: ' + onPrimaryContainer + ';') -#print('$secondary: ' + secondary + ';') -#print('$onSecondary: ' + onSecondary + ';') -#print('$secondaryContainer: ' + secondaryContainer + ';') -#print('$onSecondaryContainer: ' + onSecondaryContainer + ';') -#print('$tertiary: ' + tertiary + ';') -#print('$onTertiary: ' + onTertiary + ';') -#print('$tertiaryContainer: ' + tertiaryContainer + ';') -#print('$onTertiaryContainer: ' + onTertiaryContainer + ';') -#print('$error: ' + error + ';') -#print('$onError: ' + onError + ';') -#print('$errorContainer: ' + errorContainer + ';') -#print('$onErrorContainer: ' + onErrorContainer + ';') -#print('$colorbarbg: ' + background + ';') -#print('$background: ' + background + ';') -#print('$onBackground: ' + onBackground + ';') -#print('$surface: ' + surface + ';') -#print('$onSurface: ' + onSurface + ';') -#print('$surfaceVariant: ' + surfaceVariant + ';') -#print('$onSurfaceVariant: ' + onSurfaceVariant + ';') -#print('$outline: ' + outline + ';') -#print('$shadow: ' + shadow + ';') -#print('$inverseSurface: ' + inverseSurface + ';') -#print('$inverseOnSurface: ' + inverseOnSurface + ';') -#print('$inversePrimary: ' + inversePrimary + ';') -#print('$indsddsdversePrimary: ' + inversePrimary + ';') - - - -if len(sys.argv) > 4: - if sys.argv[4] == '--debug': - for color in vars(MaterialDynamicColors).keys(): - color_name = getattr(MaterialDynamicColors, color) - if hasattr(color_name, "get_hct"): - rgba = color_name.get_hct(scheme).to_rgba() - r, g, b, a = rgba - hex_color = f"#{r:02X}{g:02X}{b:02X}" - print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color) - - print('\nHey :\n') - +scheme = Scheme(Hct.from_int(argb), darkmode, 0.0) for color in vars(MaterialDynamicColors).keys(): color_name = getattr(MaterialDynamicColors, color) @@ -165,4 +88,11 @@ for color in vars(MaterialDynamicColors).keys(): hex_color = f"#{r:02X}{g:02X}{b:02X}" print('$' + color + ': ' + hex_color + ';') -print('$colorbarbg: ' + '#000000' + ';') +if args.debug == True: + for color in vars(MaterialDynamicColors).keys(): + color_name = getattr(MaterialDynamicColors, color) + if hasattr(color_name, "get_hct"): + rgba = color_name.get_hct(scheme).to_rgba() + r, g, b, a = rgba + hex_color = f"#{r:02X}{g:02X}{b:02X}" + print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color) diff --git a/.config/ags/scripts/color_generation/switchcolor.sh b/.config/ags/scripts/color_generation/switchcolor.sh index 6e7e6b320..628d91158 100755 --- a/.config/ags/scripts/color_generation/switchcolor.sh +++ b/.config/ags/scripts/color_generation/switchcolor.sh @@ -1,6 +1,10 @@ #!/usr/bin/env bash -color=$(hyprpicker --no-fancy) +if [ "$1" == "--pick" ]; then + color=$(hyprpicker --no-fancy) +else + color=$(cut -f1 "${HOME}/.cache/ags/user/color.txt") +fi # Generate colors for ags n stuff "$HOME"/.config/ags/scripts/color_generation/colorgen.sh "${color}" --apply diff --git a/.config/ags/scripts/color_generation/switchwall.sh b/.config/ags/scripts/color_generation/switchwall.sh index 1129ae02b..c46bc65f7 100755 --- a/.config/ags/scripts/color_generation/switchwall.sh +++ b/.config/ags/scripts/color_generation/switchwall.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash if [ "$1" == "--noswitch" ]; then - imgpath=$(swww query | awk -F 'image: ' '{print $2}') + imgpath=$(swww query | awk -F 'image: ' '{print $2}' | head -n 1) # imgpath=$(ags run-js 'wallpaper.get(0)') else # Select and set image (hyprland) diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index b74d52b95..56d69b057 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -1,7 +1,7 @@ ///////////// COLOR MODIFICATIONS ///////////// // Material colors provide excellent readability, but can be uninteresting. // This is an attempt to improve that. -$transparency_enabled: false; +//$transparency_enabled: false; //@if $transparency_enabled ==false { // @if $darkmode ==true { @@ -35,6 +35,7 @@ $transparency_enabled: false; //} // //// Amounts +$transparency: 0.7; $transparentize_amount: 0.3; $transparentize_surface_amount_less: 0.6; $transparentize_surface_amount_less_less: 0.55; @@ -62,7 +63,7 @@ $onSuccess: #ffffff; $successContainer: #d1e8d5; $onSuccessContainer: #0c1f13; -@if $darkmode ==true { +@if $darkmode == True { // Dark variant $success: #b5ccba; $onSuccess: #213528; @@ -70,6 +71,22 @@ $onSuccessContainer: #0c1f13; $onSuccessContainer: #d1e9d6; } +@if $transparent == True { + + $background: transparentize($background, $transparency); + $surface: transparentize($surface, $transparency); + $surfaceDim: transparentize($surfaceDim, $transparency); + $surfaceBright: transparentize($surfaceBright, $transparency); + $surfaceContainerLowest: transparentize($surfaceContainerLowest, $transparency); + $surfaceContainerLow: transparentize($surfaceContainerLow, $transparency); + $surfaceContainer: transparentize($surfaceContainer, $transparency); + $surfaceContainerHigh: transparentize($surfaceContainerHigh, $transparency); + $surfaceContainerHighest: transparentize($surfaceContainerHighest, $transparency); + $surfaceVariant: transparentize($surfaceVariant, $transparency); + $inverseSurface: transparentize($inverseSurface, $transparency); + $surfaceTint: transparentize($surfaceTint, $transparency); +} + // Transparent versions $t_primary: transparentize($primary, $transparentize_amount); $t_onPrimary: transparentize($onPrimary, $transparentize_amount); @@ -89,7 +106,6 @@ $t_error: transparentize($error, $transparentize_amount); $t_onError: transparentize($onError, $transparentize_amount); $t_errorContainer: transparentize($errorContainer, $transparentize_amount); $t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount); -$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount); $t_background: transparentize($background, $transparentize_amount); $t_t_background: transparentize($background, $transparentize_surface_amount_more); $t_onBackground: transparentize($onBackground, $transparentize_amount); diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss index f7530f59b..e562b3371 100644 --- a/.config/ags/scss/_common.scss +++ b/.config/ags/scss/_common.scss @@ -209,6 +209,31 @@ popover { color: $onSecondaryContainer; } +.multipleselection-container { +} + +.multipleselection-btn { + @include small-rounding; + padding: 0rem 0.341rem; + border: 0.034rem solid $outlineVariant; +} + +.multipleselection-btn:focus, +.multipleselection-btn:hover { + background-color: $hovercolor; +} + +.multipleselection-btn-enabled { + background-color: $secondaryContainer; + color: $onSecondaryContainer; +} + +.multipleselection-btn-enabled:hover, +.multipleselection-btn-enabled:focus { + background-color: $secondaryContainer; + color: $onSecondaryContainer; +} + .gap-v-5 { min-height: 0.341rem; } @@ -231,4 +256,4 @@ popover { .gap-h-15 { min-width: 1.023rem; -} \ No newline at end of file +} diff --git a/.config/ags/scss/_material.scss b/.config/ags/scss/_material.scss index cfab8e9f3..54f606e0f 100644 --- a/.config/ags/scss/_material.scss +++ b/.config/ags/scss/_material.scss @@ -1,30 +1,56 @@ -$darkmode: true; -$primary: #e2e2e2; -$onPrimary: #000000; -$primaryContainer: #6b6b6b; -$onPrimaryContainer: #e2e2e2; -$secondary: #e2e2e2; -$onSecondary: #000000; -$secondaryContainer: #313131; -$onSecondaryContainer: #e2e2e2; -$tertiary: #e2e2e2; -$onTertiary: #000000; -$tertiaryContainer: #000000; -$onTertiaryContainer: #e2e2e2; -$error: #e2e2e2; -$onError: #000000; -$errorContainer: #000000; -$onErrorContainer: #e2e2e2; -$colorbarbg: #000000; -$background: #000000; -$onBackground: #e2e2e2; -$surface: #161616; -$onSurface: #e2e2e2; -$surfaceVariant: #242424; -$onSurfaceVariant: #e2e2e2; -$outline: #a1a1a1; +$darkmode: True; +$transparent: False; +$primary_paletteKeyColor: #977126; +$secondary_paletteKeyColor: #877456; +$tertiary_paletteKeyColor: #657E5B; +$neutral_paletteKeyColor: #7E766B; +$neutral_variant_paletteKeyColor: #807667; +$background: #17130B; +$onBackground: #ECE1D4; +$surface: #17130B; +$surfaceDim: #17130B; +$surfaceBright: #3E382F; +$surfaceContainerLowest: #FFFFFF; +$surfaceContainerLow: #201B13; +$surfaceContainer: #241F17; +$surfaceContainerHigh: #2F2921; +$surfaceContainerHighest: #3A342B; +$onSurface: #ECE1D4; +$surfaceVariant: #4E4639; +$onSurfaceVariant: #D1C5B4; +$inverseSurface: #ECE1D4; +$inverseOnSurface: #353027; +$outline: #9A8F80; +$outlineVariant: #4E4639; $shadow: #000000; -$inverseSurface: #e2e2e2; -$inverseOnSurface: #000000; -$inversePrimary: #e2e2e2; - +$scrim: #000000; +$surfaceTint: #EEBF6D; +$primary: #EEBF6D; +$onPrimary: #422C00; +$primaryContainer: #5E4100; +$onPrimaryContainer: #FFDEA9; +$inversePrimary: #7B580D; +$secondary: #DAC3A1; +$onSecondary: #3C2E16; +$secondaryContainer: #57472C; +$onSecondaryContainer: #F9E1BC; +$tertiary: #B4CEA6; +$onTertiary: #203619; +$tertiaryContainer: #7F9873; +$onTertiaryContainer: #000000; +$error: #FFB4AB; +$onError: #690005; +$errorContainer: #93000A; +$onErrorContainer: #FFDAD6; +$primaryFixed: #FFDEA9; +$primaryFixedDim: #EEBF6D; +$onPrimaryFixed: #271900; +$onPrimaryFixedVariant: #5E4100; +$secondaryFixed: #F7DFBB; +$secondaryFixedDim: #DAC3A1; +$onSecondaryFixed: #251A04; +$onSecondaryFixedVariant: #54442A; +$tertiaryFixed: #CFEBC0; +$tertiaryFixedDim: #B4CEA6; +$onTertiaryFixed: #0B2006; +$onTertiaryFixedVariant: #364D2D; diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss index 15119a785..99a279b4a 100644 --- a/.config/ags/scss/_osd.scss +++ b/.config/ags/scss/_osd.scss @@ -10,7 +10,7 @@ .osd-value { @include elevation-border; @include elevation2; - background-color: $t_background; + background-color: $background; border-radius: 1.023rem; padding: 0.625rem 1.023rem; padding-top: 0.313rem; @@ -65,20 +65,27 @@ .osd-colorscheme { border-radius: 1.023rem; - background-color: $t_background; - padding: 1.023rem; + background-color: $background; + padding: 0.313rem 0.626rem; @include elevation2; } +.osd-colorscheme-settings { + background-color: $background; + padding: 0.313rem 0.626rem; + @include small-rounding; +} + .osd-color { - @include full-rounding; + border-radius: 0.650rem; + -gtk-outline-radius: 0.650rem; min-width: 2.727rem; min-height: 1.705rem; padding: 0rem 0.341rem; font-weight: bold; box { - @include full-rounding; + @include small-rounding; margin: 0.409rem; } } @@ -103,26 +110,78 @@ color: $onSecondaryContainer; box { background-color: $onSecondaryContainer; } } + +.osd-color-tertiary { + background-color: $tertiary; + color: $onTertiary; + box { background-color: $onTertiary; } +} +.osd-color-tertiaryContainer { + background-color: $tertiaryContainer; + color: $onTertiaryContainer; + box { background-color: $onTertiaryContainer; } +} + +.osd-color-error { + background-color: $error; + color: $onError; + box { background-color: $onError; } +} +.osd-color-errorContainer { + background-color: $errorContainer; + color: $onErrorContainer; + box { background-color: $onErrorContainer; } +} + +.osd-color-surface { + background-color: $surface; + color: $onSurface; + border: 0.068rem solid $outlineVariant; + box { background-color: $onSurface; } +} + +.osd-color-surfaceContainer { + background-color: $surfaceContainer; + color: $onSurface; + box { background-color: $onSurface; } +} + +.osd-color-inverseSurface { + background-color: $inverseSurface; + color: $inverseOnSurface; + box { background-color: $onSurfaceVariant; } +} + .osd-color-surfaceVariant { background-color: $surfaceVariant; color: $onSurfaceVariant; box { background-color: $onSurfaceVariant; } } -.osd-color-surface { - background-color: $surface; - color: $onSurface; - box { background-color: $onSurface; } -} + .osd-color-background { background-color: $background; color: $onBackground; box { background-color: $onBackground; } } +.osd-settings-btn-arrow { + @include full-rounding; + @include icon-material; + min-width: 1.705rem; + min-height: 1.705rem; + + &:hover { + background-color: $surfaceContainerHigh; + } + &:active { + background-color: $surfaceContainerHighest; + } +} + .osd-show { transition: 200ms cubic-bezier(0.1, 1, 0, 1); } .osd-hide { transition: 190ms cubic-bezier(0.85, 0, 0.15, 1); -} \ No newline at end of file +}