From 24a7c8f2261938c568195fbe29255a5a93a4b63c Mon Sep 17 00:00:00 2001 From: midn8hustlr <4visekh@gmail.com> Date: Fri, 8 Mar 2024 22:08:34 +0530 Subject: [PATCH 1/2] Add materialyoucolor-python, simplify scss --- .../ags/scripts/color_generation/colorgen.sh | 2 + .../generate_colors_material.py | 162 +++++++++++------- .config/ags/scss/_bar.scss | 43 +++-- .config/ags/scss/_colors.scss | 100 +++++------ .config/ags/scss/_lib_mixins.scss | 4 +- .config/ags/scss/_notifications.scss | 60 ++++--- .config/ags/scss/_overview.scss | 28 +-- .config/ags/scss/_sidebars.scss | 87 +++++----- 8 files changed, 265 insertions(+), 221 deletions(-) diff --git a/.config/ags/scripts/color_generation/colorgen.sh b/.config/ags/scripts/color_generation/colorgen.sh index 1748ffb9d..15f81adb4 100755 --- a/.config/ags/scripts/color_generation/colorgen.sh +++ b/.config/ags/scripts/color_generation/colorgen.sh @@ -1,5 +1,7 @@ #!/usr/bin/env bash +source ${HOME}/virtualenvs/my_project_venv/bin/activate + # check if no arguments if [ $# -eq 0 ]; then echo "Usage: colorgen.sh /path/to/image (--apply)" diff --git a/.config/ags/scripts/color_generation/generate_colors_material.py b/.config/ags/scripts/color_generation/generate_colors_material.py index deb34bf83..9edd06ac4 100755 --- a/.config/ags/scripts/color_generation/generate_colors_material.py +++ b/.config/ags/scripts/color_generation/generate_colors_material.py @@ -4,6 +4,21 @@ from pathlib import Path import sys import subprocess +# 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. +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 + 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") @@ -23,6 +38,10 @@ if len(sys.argv) > 1 and sys.argv[1] == '--path': hsize = int((float(img.size[1])*float(wpercent))) img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS) newtheme = themeFromImage(img) + argb = sourceColorFromImage(img) + + scheme = Scheme(Hct.from_int(argb), True, 0.0) + # except FileNotFoundError: # print('[generate_colors_material.py] File not found', file=sys.stderr); # exit() @@ -36,7 +55,7 @@ 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") + imagePath = imagePath[:-1].decode("utf-8") img = Image.open(imagePath) basewidth = 64 wpercent = (basewidth/float(img.size[0])) @@ -60,63 +79,90 @@ 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()) +#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) +#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 + ';') \ No newline at end of file +#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') + + +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 + ': ' + hex_color + ';') + +print('$colorbarbg: ' + '#000000' + ';') diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index f83566092..5ae2501ae 100644 --- a/.config/ags/scss/_bar.scss +++ b/.config/ags/scss/_bar.scss @@ -15,7 +15,7 @@ $bar_subgroup_bg: $surfaceVariant; } .bar-bg { - background-color: $t_background; + background-color: $background; min-height: 2.727rem; } @@ -28,7 +28,7 @@ $bar_subgroup_bg: $surfaceVariant; } .bar-group { - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainer; } .bar-group-pad { @@ -83,27 +83,23 @@ $bar_subgroup_bg: $surfaceVariant; .bar-ws { min-width: $bar_ws_width; - color: mix($onBackground, $background, 40%); - @if $darkmode ==true { - color: mix($onBackground, $background, 45%); - } + color: $outlineVariant; } .bar-ws-active { - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $primary; + color: $onPrimary; } .bar-ws-occupied { - background-color: $bar_subgroup_bg; - color: $onSurfaceVariant; + background-color: $secondaryContainer; + color: $onSecondaryContainer; } .bar-separator { @include full-rounding; min-width: 0.341rem; min-height: 0.341rem; - background-color: mix($t_surface, $t_onSurface, 90%); margin: 0rem 0.341rem; } @@ -119,7 +115,7 @@ $bar_subgroup_bg: $surfaceVariant; .bar-date { @include titlefont; font-size: 1rem; - color: $onBackground; + //color: #AA0000;//$outlineVariant; } .bar-batt { @@ -187,8 +183,8 @@ $bar_subgroup_bg: $surfaceVariant; min-height: 1.77rem; min-width: 1.77rem; border-radius: 10rem; - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $primaryContainer; + color: $onPrimaryContainer; } .bar-music-playstate-txt { @@ -231,7 +227,7 @@ $bar_subgroup_bg: $surfaceVariant; } .corner { - background-color: $t_background; + background-color: $background; @include large-rounding; } @@ -243,7 +239,7 @@ $bar_subgroup_bg: $surfaceVariant; .bar-topdesc { margin-top: -0.136rem; margin-bottom: -0.341rem; - color: $subtext; + color: $outline; } .bar-space-button { @@ -296,11 +292,12 @@ $bar_subgroup_bg: $surfaceVariant; } .bar-statusicons-hover { - background-color: mix($t_background, $t_onBackground, 90%); + background-color: $surfaceContainerHighest; } .bar-statusicons-active { - background-color: mix($t_background, $t_onBackground, 80%); + background-color: $primary; + color: $onPrimary; } .bar-util-btn { @@ -308,14 +305,16 @@ $bar_subgroup_bg: $surfaceVariant; @include element_decel; min-height: 1.77rem; min-width: 1.77rem; - background-color: $bar_subgroup_bg; + background-color: $secondaryContainer; + color: $onSecondaryContainer; } .bar-util-btn:hover, .bar-util-btn:focus { - background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%); + background-color: $primaryContainer; } .bar-util-btn:active { - background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%); -} \ No newline at end of file + background-color: $primary; + color: $onPrimary; +} diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 2cc6ef45b..b74d52b95 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -3,38 +3,38 @@ // This is an attempt to improve that. $transparency_enabled: false; -@if $transparency_enabled ==false { - @if $darkmode ==true { - $primary: mix($primary, white, 70%); - $primaryContainer: mix($primaryContainer, white, 90%); - $background: mix(mix($background, $primary, 94%), #000000, 50%); - $surface: mix($surface, $primaryContainer, 98%); - $surfaceVariant: mix($surfaceVariant, #000000, 75%); - // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%); - } - - @if $darkmode ==false { - $background: mix($background, $primary, 87%); - $surface: mix($surface, $primary, 93%); - $surfaceVariant: mix($surfaceVariant, #ffffff, 25%); - } -} - -@if $transparency_enabled ==true { - @if $darkmode ==true { - $background: mix(mix($background, $primary, 94%), #000000, 50%); - $surface: mix($surface, $primaryContainer, 98%); - $surfaceVariant: mix($surfaceVariant, #000000, 55%); - } - - @if $darkmode ==false { - $background: mix($background, $primary, 94%); - $surface: mix($surface, $primary, 93%); - $surfaceVariant: mix($surfaceVariant, #ffffff, 55%); - } -} - -// Amounts +//@if $transparency_enabled ==false { +// @if $darkmode ==true { +// $primary: mix($primary, white, 70%); +// $primaryContainer: mix($primaryContainer, white, 90%); +// $background: mix(mix($background, $primary, 94%), #000000, 50%); +// $surface: mix($surface, $primaryContainer, 98%); +// $surfaceVariant: mix($surfaceVariant, #000000, 75%); +// // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%); +// } +// +// @if $darkmode ==false { +// $background: mix($background, $primary, 87%); +// $surface: mix($surface, $primary, 93%); +// $surfaceVariant: mix($surfaceVariant, #ffffff, 25%); +// } +//} +// +//@if $transparency_enabled ==true { +// @if $darkmode ==true { +// $background: mix(mix($background, $primary, 94%), #000000, 50%); +// $surface: mix($surface, $primaryContainer, 98%); +// $surfaceVariant: mix($surfaceVariant, #000000, 55%); +// } +// +// @if $darkmode ==false { +// $background: mix($background, $primary, 94%); +// $surface: mix($surface, $primary, 93%); +// $surfaceVariant: mix($surfaceVariant, #ffffff, 55%); +// } +//} +// +//// Amounts $transparentize_amount: 0.3; $transparentize_surface_amount_less: 0.6; $transparentize_surface_amount_less_less: 0.55; @@ -42,19 +42,19 @@ $transparentize_surface_amount: 0.7; $transparentize_surface_amount_more: 0.8; $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount; -@if $darkmode ==true { - // Less transparency - $transparentize_amount: 0.15; - $transparentize_surface_amount_less: 0.5; - $transparentize_surface_amount_less_less: 0.55; - $transparentize_surface_amount: 0.69; - $transparentize_surface_amount_more: 0.9; - $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount; -} - -@if $transparency_enabled ==false { - $transparentize_amount: 0; -} +//@if $darkmode ==true { +// // Less transparency +// $transparentize_amount: 0.15; +// $transparentize_surface_amount_less: 0.5; +// $transparentize_surface_amount_less_less: 0.55; +// $transparentize_surface_amount: 0.69; +// $transparentize_surface_amount_more: 0.9; +// $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount; +//} +// +//@if $transparency_enabled ==false { +// $transparentize_amount: 0; +//} // Extended material $success: #4f6354; @@ -114,13 +114,13 @@ $t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount); // Others -$hovercolor: mix($t_surface, $t_onSurface, 50%); -$activecolor: mix($t_surface, $t_onSurface, 30%); -$subtext: mix($onBackground, $background, 70%); +//$hovercolor: #AA0000;//$surfaceContainerHigh; +//$activecolor: mix($t_surface, $t_onSurface, 30%); +$subtext: $outline; $actiontext: mix($onBackground, $background, 85%); // Terminal colors -$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%); +$termbg: $surfaceContainerHigh; $termfg: $onSurfaceVariant; $term0: $t_background; $term1: $error; @@ -129,4 +129,4 @@ $term3: $onPrimaryContainer; $term4: $onPrimaryContainer; $term5: $onSecondaryContainer; $term6: $primary; -$term7: $onSurfaceVariant; \ No newline at end of file +$term7: $onSurfaceVariant; diff --git a/.config/ags/scss/_lib_mixins.scss b/.config/ags/scss/_lib_mixins.scss index ba5babffc..88f1cda4d 100644 --- a/.config/ags/scss/_lib_mixins.scss +++ b/.config/ags/scss/_lib_mixins.scss @@ -1,6 +1,6 @@ // Common colors -$hovercolor: rgba(128, 128, 128, 0.3); -$activecolor: rgba(128, 128, 128, 0.7); +$hovercolor: $surfaceContainerHigh; +$activecolor: $surfaceContainerHighest; $rounding_small: 0.818rem; $rounding_mediumsmall: 0.955rem; $rounding_medium: 1.159rem; diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss index fa3a4ff05..234072be3 100644 --- a/.config/ags/scss/_notifications.scss +++ b/.config/ags/scss/_notifications.scss @@ -1,4 +1,4 @@ -$notif_surface: $t_background; +$notif_surface: $surfaceContainer; @mixin notif-rounding { @include normal-rounding; @@ -6,7 +6,7 @@ $notif_surface: $t_background; .notif-low { @include notif-rounding; - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainerHigh; color: $onSurfaceVariant; padding: $rounding_small; padding-right: $rounding_small + 0.545rem; @@ -14,7 +14,7 @@ $notif_surface: $t_background; .notif-normal { @include notif-rounding; - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainerHigh; color: $onSurfaceVariant; padding: $rounding_small; padding-right: $rounding_small + 0.545rem; @@ -29,21 +29,23 @@ $notif_surface: $t_background; } .notif-clicked-low { - background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%); + background-color: $surfaceContainerLow; } .notif-clicked-normal { - background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%); + background-color: $surfaceContainerLow; } .notif-clicked-critical { - background-color: mix($secondaryContainer, $onSecondaryContainer, 95%); + background-color: $onSecondary; + color: $onSecondaryContainer; } .popup-notif-low { @include notif-rounding; min-width: 30.682rem; background-color: $notif_surface; + border: 0.034rem solid $outlineVariant; color: $onSurfaceVariant; padding: $rounding_small; padding-right: $rounding_small + 0.545rem; @@ -53,6 +55,7 @@ $notif_surface: $t_background; @include notif-rounding; min-width: 30.682rem; background-color: $notif_surface; + border: 0.034rem solid $outlineVariant; color: $onSurfaceVariant; padding: $rounding_small; padding-right: $rounding_small + 0.545rem; @@ -62,29 +65,31 @@ $notif_surface: $t_background; @include notif-rounding; min-width: 30.682rem; background-color: $secondaryContainer; + border: 0.034rem solid $onSecondaryContainer; color: $onSecondaryContainer; padding: $rounding_small; padding-right: $rounding_small + 0.545rem; } .popup-notif-clicked-low { - background-color: mix($notif_surface, $onBackground, 94%); + background-color: $surfaceContainerLow; } .popup-notif-clicked-normal { - background-color: mix($notif_surface, $onBackground, 94%); + background-color: $surfaceContainerLow; } .popup-notif-clicked-critical { - background-color: mix($secondaryContainer, $onSecondaryContainer, 96%); + background-color: $onSecondary; + color: $onSecondaryContainer; } .notif-body-low { - color: mix($onSurfaceVariant, $surfaceVariant, 67%); + color: $outline; } .notif-body-normal { - color: mix($onSurfaceVariant, $surfaceVariant, 67%); + color: $outline; } .notif-body-critical { @@ -99,23 +104,23 @@ $notif_surface: $t_background; } .notif-icon-material { - background-color: $t_secondaryContainer; + background-color: $secondaryContainer; color: $onSecondaryContainer; } .notif-icon-material-low { - background-color: $t_secondaryContainer; + background-color: $secondaryContainer; color: $onSecondaryContainer; } .notif-icon-material-normal { - background-color: $t_secondaryContainer; + background-color: $secondaryContainer; color: $onSecondaryContainer; } .notif-icon-material-critical { - background-color: $t_onSecondaryContainer; - color: $secondaryContainer; + background-color: $secondary; + color: $onSecondary; } .notif-expand-btn { @@ -163,8 +168,7 @@ $notif_surface: $t_background; .osd-notif { @include notif-rounding; - background-color: transparentize($background, - $transparentize_surface_amount_subtract_surface ); + background-color: $background; min-width: 30.682rem; } @@ -201,43 +205,43 @@ $notif_surface: $t_background; } .notif-action-low { - background-color: mix($t_onSurfaceVariant, $t_surface, 10%); + background-color: $surfaceContainerHighest; color: $onSurfaceVariant; } .notif-action-low:focus, .notif-action-low:hover { - background-color: $hovercolor; + border: 0.040rem solid $outlineVariant; } .notif-action-low:active { - background-color: $activecolor; + background-color: $surfaceBright; } .notif-action-normal { - background-color: mix($t_onSurfaceVariant, $t_surface, 10%); + background-color: $surfaceContainerHighest; color: $onSurfaceVariant; } .notif-action-normal:focus, .notif-action-normal:hover { - background-color: $hovercolor; + border: 0.040rem solid $outlineVariant; } .notif-action-normal:active { - background-color: $activecolor; + background-color: $surfaceBright; } .notif-action-critical { - background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%); + background-color: mix($secondary, $onSecondary, 30%); color: $onSurfaceVariant; } .notif-action-critical:focus, .notif-action-critical:hover { - background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%); + border: 0.040rem solid $outline; } .notif-action-critical:active { - background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%); -} \ No newline at end of file + background-color: mix($secondary, $onSecondary, 40%); +} diff --git a/.config/ags/scss/_overview.scss b/.config/ags/scss/_overview.scss index 8afa43b81..137317abc 100644 --- a/.config/ags/scss/_overview.scss +++ b/.config/ags/scss/_overview.scss @@ -11,7 +11,7 @@ min-height: 3.409rem; padding: 0rem 1.364rem; padding-right: 2.864rem; - background-color: $t_background; + background-color: $background; color: $onBackground; selection { @@ -53,8 +53,8 @@ @include elevation2; min-width: 28.773rem; padding: 0.682rem; - background-color: $t_background; - color: $onBackground; + background-color: $surfaceContainerLow; + color: $onSurface; } .overview-search-results-icon { @@ -97,7 +97,7 @@ @include elevation-border; @include elevation2; padding: 0.341rem; - background-color: $t_background; + background-color: $background; color: $onBackground; } @@ -105,35 +105,37 @@ @include normal-rounding; // @include elevation-border; margin: 0.341rem; - background-color: mix($t_t_surface, $t_onSurface, 93%); + background-color: $surfaceContainerLow; } .overview-tasks-workspace-number { @include mainfont; - color: mix($t_onSurface, $t_surface, 93%); + color: $onSurfaceVariant; } .overview-tasks-window { @include normal-rounding; @include menu_decel; - background-color: $t_surfaceVariant; - color: $onSecondaryContainer; - border: 0.068rem solid $t_t_t_onSecondaryContainer; + background-color: $surfaceContainerHigh; + color: $onSurface; + border: 0.068rem solid $outlineVariant; } .overview-tasks-window:hover, .overview-tasks-window:focus { - background-color: mix($l_t_secondaryContainer, $primary, 95%); + background-color: $secondaryContainer; } .overview-tasks-window:active { - background-color: mix($l_t_secondaryContainer, $primary, 90%); + background-color: $tertiaryContainer; + background-color: mix($secondaryContainer, $hovercolor, 70%); } .overview-tasks-window-selected { - background-color: mix($l_t_secondaryContainer, $primary, 90%); + background-color: $tertiaryContainer; + background-color: mix($secondaryContainer, $hovercolor, 70%); } .overview-tasks-window-dragging { opacity: 0.2; -} \ No newline at end of file +} diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 1989c9cb8..218946e0a 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -1,5 +1,5 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); -$textboxColor: mix($surface, $surfaceVariant, 80%); +$textboxColor: $surfaceContainerHigh; $system: $secondary; $onSystem: $onSecondary; $chatgpt: $primary; @@ -16,7 +16,7 @@ $onChatgpt: $onPrimary; border-radius: $rounding_large - $elevation_margin + 0.068rem; min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED // min-height: 29.591rem; - background-color: $t_background; + background-color: $background; padding: 1.023rem; } @@ -37,7 +37,7 @@ $onChatgpt: $onPrimary; border-radius: $rounding_large - $elevation_margin + 0.068rem; min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED // min-height: 29.591rem; - background-color: $t_background; + background-color: $background; padding: 1.023rem; } @@ -54,12 +54,12 @@ $onChatgpt: $onPrimary; .sidebar-group { @include normal-rounding; @include group-padding; - background-color: $t_surface; + background-color: $surfaceContainer; } .sidebar-group-nopad { @include normal-rounding; - background-color: $t_surface; + background-color: $surfaceContainer; } .sidebar-group-invisible { @@ -73,7 +73,7 @@ $onChatgpt: $onPrimary; .sidebar-togglesbox { @include full-rounding; @include group-padding; - background-color: $t_surface; + background-color: $surfaceContainer; } .sidebar-iconbutton { @@ -96,8 +96,6 @@ $onChatgpt: $onPrimary; .sidebar-button { @include element_decel; padding: 0rem $rounding_small; - background-color: $t_secondaryContainer; - color: $onSecondaryContainer; } .sidebar-button:hover, @@ -206,16 +204,16 @@ $onChatgpt: $onPrimary; @include element_decel; min-width: 0.273rem; min-height: 2.045rem; - background-color: $t_onSurfaceVariant; + background-color: transparentize($onSurfaceVariant, 0.7); } slider:hover, slider:focus { - background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%); + background-color: transparentize($onSurfaceVariant, 0.6); } slider:active { - background-color: mix($onSurfaceVariant, $surfaceVariant, 50%); + background-color: transparentize($onSurface, 0.5); } } @@ -256,7 +254,7 @@ $onChatgpt: $onPrimary; } .sidebar-calendar-btn-othermonth { - color: mix($onSurface, $surface, 50%); + color: $outline; } .sidebar-calendar-header { @@ -267,19 +265,17 @@ $onChatgpt: $onPrimary; @include full-rounding; @include element_decel; padding: 0rem 0.682rem; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $surfaceContainer; + color: $outline; } .sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:focus { background-color: $hovercolor; - color: mix($onSurfaceVariant, $surfaceVariant, 95%); } .sidebar-calendar-monthyear-btn:active { background-color: $activecolor; - color: mix($onSurfaceVariant, $surfaceVariant, 85%); } .sidebar-calendar-monthshift-btn { @@ -287,18 +283,16 @@ $onChatgpt: $onPrimary; @include element_decel; min-width: 2.045rem; min-height: 2.045rem; - background-color: $t_surfaceVariant; - color: $onSurfaceVariant; + background-color: $surfaceContainer; + color: $outline; } .sidebar-calendar-monthshift-btn:hover { background-color: $hovercolor; - color: mix($onSurfaceVariant, $surfaceVariant, 95%); } .sidebar-calendar-monthshift-btn:active { background-color: $activecolor; - color: mix($onSurfaceVariant, $surfaceVariant, 85%); } .sidebar-selector-tab { @@ -337,10 +331,6 @@ $onChatgpt: $onPrimary; padding-right: 0.545rem; } -.sidebar-todo-item-even { - background-color: $t_t_surfaceVariant; -} - .sidebar-todo-item-action { @include element_decel; border-radius: 9999px; @@ -373,7 +363,6 @@ $onChatgpt: $onPrimary; .sidebar-todo-new { @include full-rounding; @include element_decel; - color: $onSecondaryContainer; margin: 0.341rem; padding: 0.205rem 0.545rem; border: 0.068rem solid $onSurface; @@ -381,11 +370,13 @@ $onChatgpt: $onPrimary; .sidebar-todo-new, .sidebar-todo-new:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); + color: $onSecondaryContainer; + background-color: $secondaryContainer; } .sidebar-todo-new:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + color: $onPrimaryContainer; + background-color: $primaryContainer; } .sidebar-todo-add { @@ -399,11 +390,11 @@ $onChatgpt: $onPrimary; .sidebar-todo-add:hover, .sidebar-todo-add:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); + background-color: $surfaceContainerHigh; } .sidebar-todo-add:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + background-color: $surfaceContainerHighest; } .sidebar-todo-add-available { @@ -418,11 +409,11 @@ $onChatgpt: $onPrimary; .sidebar-todo-add-available:hover, .sidebar-todo-add-available:focus { - background-color: mix($primary, $onPrimary, 97%); + background-color: mix($primary, $hovercolor, 70%); } .sidebar-todo-add-available:active { - background-color: mix($primary, $onPrimary, 80%); + background-color: mix($primary, $hovercolor, 40%); } .sidebar-todo-entry { @@ -435,24 +426,24 @@ $onChatgpt: $onPrimary; min-height: 1.773rem; min-width: 0rem; padding: 0.205rem 0.682rem; - border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%); + border: 0.068rem solid $outline; } .sidebar-todo-entry:focus { - border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%); + border: 0.068rem solid $onSurfaceVariant; } .sidebar-module { @include normal-rounding; @include group-padding; - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainer; padding: 0.682rem; } .sidebar-module-btn-arrow { @include full-rounding; @include icon-material; - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainerHigh; min-width: 1.705rem; min-height: 1.705rem; @@ -464,7 +455,7 @@ $onChatgpt: $onPrimary; .sidebar-module-scripts-button { @include full-rounding; @include icon-material; - background-color: $l_l_t_surfaceVariant; + background-color: $surfaceContainer; min-width: 1.705rem; min-height: 1.705rem; @@ -540,7 +531,7 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-apiswitcher { @include full-rounding; @include group-padding; - background-color: $t_surface; + background-color: $surfaceContainer; } .sidebar-chat-apiswitcher-icon { @@ -605,11 +596,11 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-send:hover, .sidebar-chat-send:focus { - background-color: $surfaceVariant; + background-color: $surfaceBright; } .sidebar-chat-send:active { - background-color: mix($surfaceVariant, $onBackground, 80%); + background-color: $surfaceVariant; } .sidebar-chat-send-available { @@ -619,11 +610,11 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-send-available:hover, .sidebar-chat-send-available:focus { - background-color: mix($primary, $onPrimary, 97%); + background-color: mix($primary, $hovercolor, 70%); } .sidebar-chat-send-available:active { - background-color: mix($primary, $onPrimary, 80%); + background-color: mix($primary, $hovercolor, 40%); } .sidebar-chat-message { @@ -683,17 +674,17 @@ $colorpicker_rounding: 0.341rem; background-color: $termbg; color: $termfg; margin: 0rem 0.682rem; - border: 0.068rem solid $t_t_t_onSecondaryContainer; + border: 0.068rem solid $outlineVariant; } .sidebar-chat-codeblock-topbar { @include mainfont; margin: 0.273rem; margin-bottom: 0rem; - background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%); + background-color: $secondaryContainer; color: $onSecondaryContainer; border-radius: $rounding_medium - 0.273rem; - border: 0.068rem solid mix($secondaryContainer, $onSecondaryContainer, 90%); + border: 0.068rem solid $outlineVariant; border-top-left-radius: $rounding_small + 0.068rem; border-top-right-radius: $rounding_small + 0.068rem; padding: 0.341rem 0.477rem; @@ -712,11 +703,11 @@ $colorpicker_rounding: 0.341rem; .sidebar-chat-codeblock-topbar-btn:hover, .sidebar-chat-codeblock-topbar-btn:focus { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); + background-color: mix($secondaryContainer, $onSecondaryContainer, 90%); } .sidebar-chat-codeblock-topbar-btn:active { - background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); + background-color: mix($secondaryContainer, $onSecondaryContainer, 80%); } .sidebar-chat-codeblock-code { @@ -824,11 +815,11 @@ $colorpicker_rounding: 0.341rem; .sidebar-pin-enabled:hover, .sidebar-pin-enabled:focus { - background-color: mix($primary, $onPrimary, 90%); + background-color: mix($primary, $hovercolor, 70%); } .sidebar-pin-enabled:active { - background-color: mix($primary, $onPrimary, 80%); + background-color: mix($primary, $hovercolor, 40%); } .sidebar-waifu-heading { From e703f0009705dd41f9eea3b077a0ad9c891ce742 Mon Sep 17 00:00:00 2001 From: midn8hustlr <4visekh@gmail.com> Date: Sat, 16 Mar 2024 21:00:17 +0530 Subject: [PATCH 2/2] 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 +}