kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

Add materialyoucolor-python, simplify scss

Browse Source
This commit is contained in:
midn8hustlr
2024-03-08 22:08:34 +05:30
parent e1b81d6d30
commit 36e706be01
8 changed files with 265 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/scripts/color_generation/colorgen.sh
+2
View File
@@ -1,5 +1,7 @@
#!/usr/bin/env bash #!/usr/bin/env bash
source ${HOME}/virtualenvs/my_project_venv/bin/activate
# check if no arguments # check if no arguments
if [ $# -eq 0 ]; then if [ $# -eq 0 ]; then
echo "Usage: colorgen.sh /path/to/image (--apply)" echo "Usage: colorgen.sh /path/to/image (--apply)"
.config/ags/scripts/color_generation/generate_colors_material.py
+103 -57
View File
@@ -4,6 +4,21 @@ from pathlib import Path
import sys import sys
import subprocess 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): def darken(hex_color, factor=0.7):
if not (hex_color.startswith('#') and len(hex_color) in (4, 7)): if not (hex_color.startswith('#') and len(hex_color) in (4, 7)):
raise ValueError("Invalid hex color format") 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))) hsize = int((float(img.size[1])*float(wpercent)))
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS) img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
newtheme = themeFromImage(img) newtheme = themeFromImage(img)
argb = sourceColorFromImage(img)
scheme = Scheme(Hct.from_int(argb), True, 0.0)
# except FileNotFoundError: # except FileNotFoundError:
# print('[generate_colors_material.py] File not found', file=sys.stderr); # print('[generate_colors_material.py] File not found', file=sys.stderr);
# exit() # exit()
@@ -60,63 +79,90 @@ else:
colorscheme = newtheme.get('schemes').get('dark') colorscheme = newtheme.get('schemes').get('dark')
print('$darkmode: true;') print('$darkmode: true;')
primary = hexFromArgb(colorscheme.get_primary()) #primary = hexFromArgb(colorscheme.get_primary())
onPrimary = hexFromArgb(colorscheme.get_onPrimary()) #onPrimary = hexFromArgb(colorscheme.get_onPrimary())
primaryContainer = hexFromArgb(colorscheme.get_primaryContainer()) #primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer()) #onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
secondary = hexFromArgb(colorscheme.get_secondary()) #secondary = hexFromArgb(colorscheme.get_secondary())
onSecondary = hexFromArgb(colorscheme.get_onSecondary()) #onSecondary = hexFromArgb(colorscheme.get_onSecondary())
secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer()) #secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer()) #onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
tertiary = hexFromArgb(colorscheme.get_tertiary()) #tertiary = hexFromArgb(colorscheme.get_tertiary())
onTertiary = hexFromArgb(colorscheme.get_onTertiary()) #onTertiary = hexFromArgb(colorscheme.get_onTertiary())
tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer()) #tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer()) #onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
error = hexFromArgb(colorscheme.get_error()) #error = hexFromArgb(colorscheme.get_error())
onError = hexFromArgb(colorscheme.get_onError()) #onError = hexFromArgb(colorscheme.get_onError())
errorContainer = hexFromArgb(colorscheme.get_errorContainer()) #errorContainer = hexFromArgb(colorscheme.get_errorContainer())
onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer()) #onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
background = hexFromArgb(colorscheme.get_background()) #background = hexFromArgb(colorscheme.get_background())
onBackground = hexFromArgb(colorscheme.get_onBackground()) #onBackground = hexFromArgb(colorscheme.get_onBackground())
surface = hexFromArgb(colorscheme.get_surface()) #surface = hexFromArgb(colorscheme.get_surface())
onSurface = hexFromArgb(colorscheme.get_onSurface()) #onSurface = hexFromArgb(colorscheme.get_onSurface())
surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant()) #surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant()) #onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
outline = hexFromArgb(colorscheme.get_outline()) #outline = hexFromArgb(colorscheme.get_outline())
shadow = hexFromArgb(colorscheme.get_shadow()) #shadow = hexFromArgb(colorscheme.get_shadow())
inverseSurface = hexFromArgb(colorscheme.get_inverseSurface()) #inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface()) #inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
inversePrimary = hexFromArgb(colorscheme.get_inversePrimary()) #inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
# make material less boring # make material less boring
if darkmode: #if darkmode:
background = darken(background, 0.6) # background = darken(background, 0.6)
print('$primary: ' + primary + ';') #print('$primary: ' + primary + ';')
print('$onPrimary: ' + onPrimary + ';') #print('$onPrimary: ' + onPrimary + ';')
print('$primaryContainer: ' + primaryContainer + ';') #print('$primaryContainer: ' + primaryContainer + ';')
print('$onPrimaryContainer: ' + onPrimaryContainer + ';') #print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
print('$secondary: ' + secondary + ';') #print('$secondary: ' + secondary + ';')
print('$onSecondary: ' + onSecondary + ';') #print('$onSecondary: ' + onSecondary + ';')
print('$secondaryContainer: ' + secondaryContainer + ';') #print('$secondaryContainer: ' + secondaryContainer + ';')
print('$onSecondaryContainer: ' + onSecondaryContainer + ';') #print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
print('$tertiary: ' + tertiary + ';') #print('$tertiary: ' + tertiary + ';')
print('$onTertiary: ' + onTertiary + ';') #print('$onTertiary: ' + onTertiary + ';')
print('$tertiaryContainer: ' + tertiaryContainer + ';') #print('$tertiaryContainer: ' + tertiaryContainer + ';')
print('$onTertiaryContainer: ' + onTertiaryContainer + ';') #print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
print('$error: ' + error + ';') #print('$error: ' + error + ';')
print('$onError: ' + onError + ';') #print('$onError: ' + onError + ';')
print('$errorContainer: ' + errorContainer + ';') #print('$errorContainer: ' + errorContainer + ';')
print('$onErrorContainer: ' + onErrorContainer + ';') #print('$onErrorContainer: ' + onErrorContainer + ';')
print('$colorbarbg: ' + background + ';') #print('$colorbarbg: ' + background + ';')
print('$background: ' + background + ';') #print('$background: ' + background + ';')
print('$onBackground: ' + onBackground + ';') #print('$onBackground: ' + onBackground + ';')
print('$surface: ' + surface + ';') #print('$surface: ' + surface + ';')
print('$onSurface: ' + onSurface + ';') #print('$onSurface: ' + onSurface + ';')
print('$surfaceVariant: ' + surfaceVariant + ';') #print('$surfaceVariant: ' + surfaceVariant + ';')
print('$onSurfaceVariant: ' + onSurfaceVariant + ';') #print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
print('$outline: ' + outline + ';') #print('$outline: ' + outline + ';')
print('$shadow: ' + shadow + ';') #print('$shadow: ' + shadow + ';')
print('$inverseSurface: ' + inverseSurface + ';') #print('$inverseSurface: ' + inverseSurface + ';')
print('$inverseOnSurface: ' + inverseOnSurface + ';') #print('$inverseOnSurface: ' + inverseOnSurface + ';')
print('$inversePrimary: ' + inversePrimary + ';') #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' + ';')
.config/ags/scss/_bar.scss
+20 -21
View File
@@ -15,7 +15,7 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.bar-bg { .bar-bg {
background-color: $t_background; background-color: $background;
min-height: 2.727rem; min-height: 2.727rem;
} }
@@ -28,7 +28,7 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.bar-group { .bar-group {
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainer;
} }
.bar-group-pad { .bar-group-pad {
@@ -83,27 +83,23 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-ws { .bar-ws {
min-width: $bar_ws_width; min-width: $bar_ws_width;
color: mix($onBackground, $background, 40%); color: $outlineVariant;
@if $darkmode ==true {
color: mix($onBackground, $background, 45%);
}
} }
.bar-ws-active { .bar-ws-active {
background-color: $secondaryContainer; background-color: $primary;
color: $onSecondaryContainer; color: $onPrimary;
} }
.bar-ws-occupied { .bar-ws-occupied {
background-color: $bar_subgroup_bg; background-color: $secondaryContainer;
color: $onSurfaceVariant; color: $onSecondaryContainer;
} }
.bar-separator { .bar-separator {
@include full-rounding; @include full-rounding;
min-width: 0.341rem; min-width: 0.341rem;
min-height: 0.341rem; min-height: 0.341rem;
background-color: mix($t_surface, $t_onSurface, 90%);
margin: 0rem 0.341rem; margin: 0rem 0.341rem;
} }
@@ -119,7 +115,7 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-date { .bar-date {
@include titlefont; @include titlefont;
font-size: 1rem; font-size: 1rem;
color: $onBackground; //color: #AA0000;//$outlineVariant;
} }
.bar-batt { .bar-batt {
@@ -187,8 +183,8 @@ $bar_subgroup_bg: $surfaceVariant;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
border-radius: 10rem; border-radius: 10rem;
background-color: $secondaryContainer; background-color: $primaryContainer;
color: $onSecondaryContainer; color: $onPrimaryContainer;
} }
.bar-music-playstate-txt { .bar-music-playstate-txt {
@@ -231,7 +227,7 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.corner { .corner {
background-color: $t_background; background-color: $background;
@include large-rounding; @include large-rounding;
} }
@@ -243,7 +239,7 @@ $bar_subgroup_bg: $surfaceVariant;
.bar-topdesc { .bar-topdesc {
margin-top: -0.136rem; margin-top: -0.136rem;
margin-bottom: -0.341rem; margin-bottom: -0.341rem;
color: $subtext; color: $outline;
} }
.bar-space-button { .bar-space-button {
@@ -296,11 +292,12 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.bar-statusicons-hover { .bar-statusicons-hover {
background-color: mix($t_background, $t_onBackground, 90%); background-color: $surfaceContainerHighest;
} }
.bar-statusicons-active { .bar-statusicons-active {
background-color: mix($t_background, $t_onBackground, 80%); background-color: $primary;
color: $onPrimary;
} }
.bar-util-btn { .bar-util-btn {
@@ -308,14 +305,16 @@ $bar_subgroup_bg: $surfaceVariant;
@include element_decel; @include element_decel;
min-height: 1.77rem; min-height: 1.77rem;
min-width: 1.77rem; min-width: 1.77rem;
background-color: $bar_subgroup_bg; background-color: $secondaryContainer;
color: $onSecondaryContainer;
} }
.bar-util-btn:hover, .bar-util-btn:hover,
.bar-util-btn:focus { .bar-util-btn:focus {
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%); background-color: $primaryContainer;
} }
.bar-util-btn:active { .bar-util-btn:active {
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%); background-color: $primary;
color: $onPrimary;
} }
.config/ags/scss/_colors.scss
+49 -49
View File
@@ -3,38 +3,38 @@
// This is an attempt to improve that. // This is an attempt to improve that.
$transparency_enabled: false; $transparency_enabled: false;
@if $transparency_enabled ==false { //@if $transparency_enabled ==false {
@if $darkmode ==true { // @if $darkmode ==true {
$primary: mix($primary, white, 70%); // $primary: mix($primary, white, 70%);
$primaryContainer: mix($primaryContainer, white, 90%); // $primaryContainer: mix($primaryContainer, white, 90%);
$background: mix(mix($background, $primary, 94%), #000000, 50%); // $background: mix(mix($background, $primary, 94%), #000000, 50%);
$surface: mix($surface, $primaryContainer, 98%); // $surface: mix($surface, $primaryContainer, 98%);
$surfaceVariant: mix($surfaceVariant, #000000, 75%); // $surfaceVariant: mix($surfaceVariant, #000000, 75%);
// $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%); // // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
} // }
//
@if $darkmode ==false { // @if $darkmode ==false {
$background: mix($background, $primary, 87%); // $background: mix($background, $primary, 87%);
$surface: mix($surface, $primary, 93%); // $surface: mix($surface, $primary, 93%);
$surfaceVariant: mix($surfaceVariant, #ffffff, 25%); // $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
} // }
} //}
//
@if $transparency_enabled ==true { //@if $transparency_enabled ==true {
@if $darkmode ==true { // @if $darkmode ==true {
$background: mix(mix($background, $primary, 94%), #000000, 50%); // $background: mix(mix($background, $primary, 94%), #000000, 50%);
$surface: mix($surface, $primaryContainer, 98%); // $surface: mix($surface, $primaryContainer, 98%);
$surfaceVariant: mix($surfaceVariant, #000000, 55%); // $surfaceVariant: mix($surfaceVariant, #000000, 55%);
} // }
//
@if $darkmode ==false { // @if $darkmode ==false {
$background: mix($background, $primary, 94%); // $background: mix($background, $primary, 94%);
$surface: mix($surface, $primary, 93%); // $surface: mix($surface, $primary, 93%);
$surfaceVariant: mix($surfaceVariant, #ffffff, 55%); // $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
} // }
} //}
//
// Amounts //// Amounts
$transparentize_amount: 0.3; $transparentize_amount: 0.3;
$transparentize_surface_amount_less: 0.6; $transparentize_surface_amount_less: 0.6;
$transparentize_surface_amount_less_less: 0.55; $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_more: 0.8;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount; $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
@if $darkmode ==true { //@if $darkmode ==true {
// Less transparency // // Less transparency
$transparentize_amount: 0.15; // $transparentize_amount: 0.15;
$transparentize_surface_amount_less: 0.5; // $transparentize_surface_amount_less: 0.5;
$transparentize_surface_amount_less_less: 0.55; // $transparentize_surface_amount_less_less: 0.55;
$transparentize_surface_amount: 0.69; // $transparentize_surface_amount: 0.69;
$transparentize_surface_amount_more: 0.9; // $transparentize_surface_amount_more: 0.9;
$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount; // $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
} //}
//
@if $transparency_enabled ==false { //@if $transparency_enabled ==false {
$transparentize_amount: 0; // $transparentize_amount: 0;
} //}
// Extended material // Extended material
$success: #4f6354; $success: #4f6354;
@@ -114,13 +114,13 @@ $t_onSuccessContainer: transparentize($onErrorContainer,
$transparentize_amount); $transparentize_amount);
// Others // Others
$hovercolor: mix($t_surface, $t_onSurface, 50%); //$hovercolor: #AA0000;//$surfaceContainerHigh;
$activecolor: mix($t_surface, $t_onSurface, 30%); //$activecolor: mix($t_surface, $t_onSurface, 30%);
$subtext: mix($onBackground, $background, 70%); $subtext: $outline;
$actiontext: mix($onBackground, $background, 85%); $actiontext: mix($onBackground, $background, 85%);
// Terminal colors // Terminal colors
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%); $termbg: $surfaceContainerHigh;
$termfg: $onSurfaceVariant; $termfg: $onSurfaceVariant;
$term0: $t_background; $term0: $t_background;
$term1: $error; $term1: $error;
.config/ags/scss/_lib_mixins.scss
+2 -2
View File
@@ -1,6 +1,6 @@
// Common colors // Common colors
$hovercolor: rgba(128, 128, 128, 0.3); $hovercolor: $surfaceContainerHigh;
$activecolor: rgba(128, 128, 128, 0.7); $activecolor: $surfaceContainerHighest;
$rounding_small: 0.818rem; $rounding_small: 0.818rem;
$rounding_mediumsmall: 0.955rem; $rounding_mediumsmall: 0.955rem;
$rounding_medium: 1.159rem; $rounding_medium: 1.159rem;
.config/ags/scss/_notifications.scss
+31 -27
View File
@@ -1,4 +1,4 @@
$notif_surface: $t_background; $notif_surface: $surfaceContainer;
@mixin notif-rounding { @mixin notif-rounding {
@include normal-rounding; @include normal-rounding;
@@ -6,7 +6,7 @@ $notif_surface: $t_background;
.notif-low { .notif-low {
@include notif-rounding; @include notif-rounding;
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -14,7 +14,7 @@ $notif_surface: $t_background;
.notif-normal { .notif-normal {
@include notif-rounding; @include notif-rounding;
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainerHigh;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -29,21 +29,23 @@ $notif_surface: $t_background;
} }
.notif-clicked-low { .notif-clicked-low {
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%); background-color: $surfaceContainerLow;
} }
.notif-clicked-normal { .notif-clicked-normal {
background-color: mix($l_l_t_surfaceVariant, $t_onSurfaceVariant, 85%); background-color: $surfaceContainerLow;
} }
.notif-clicked-critical { .notif-clicked-critical {
background-color: mix($secondaryContainer, $onSecondaryContainer, 95%); background-color: $onSecondary;
color: $onSecondaryContainer;
} }
.popup-notif-low { .popup-notif-low {
@include notif-rounding; @include notif-rounding;
min-width: 30.682rem; min-width: 30.682rem;
background-color: $notif_surface; background-color: $notif_surface;
border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -53,6 +55,7 @@ $notif_surface: $t_background;
@include notif-rounding; @include notif-rounding;
min-width: 30.682rem; min-width: 30.682rem;
background-color: $notif_surface; background-color: $notif_surface;
border: 0.034rem solid $outlineVariant;
color: $onSurfaceVariant; color: $onSurfaceVariant;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
@@ -62,29 +65,31 @@ $notif_surface: $t_background;
@include notif-rounding; @include notif-rounding;
min-width: 30.682rem; min-width: 30.682rem;
background-color: $secondaryContainer; background-color: $secondaryContainer;
border: 0.034rem solid $onSecondaryContainer;
color: $onSecondaryContainer; color: $onSecondaryContainer;
padding: $rounding_small; padding: $rounding_small;
padding-right: $rounding_small + 0.545rem; padding-right: $rounding_small + 0.545rem;
} }
.popup-notif-clicked-low { .popup-notif-clicked-low {
background-color: mix($notif_surface, $onBackground, 94%); background-color: $surfaceContainerLow;
} }
.popup-notif-clicked-normal { .popup-notif-clicked-normal {
background-color: mix($notif_surface, $onBackground, 94%); background-color: $surfaceContainerLow;
} }
.popup-notif-clicked-critical { .popup-notif-clicked-critical {
background-color: mix($secondaryContainer, $onSecondaryContainer, 96%); background-color: $onSecondary;
color: $onSecondaryContainer;
} }
.notif-body-low { .notif-body-low {
color: mix($onSurfaceVariant, $surfaceVariant, 67%); color: $outline;
} }
.notif-body-normal { .notif-body-normal {
color: mix($onSurfaceVariant, $surfaceVariant, 67%); color: $outline;
} }
.notif-body-critical { .notif-body-critical {
@@ -99,23 +104,23 @@ $notif_surface: $t_background;
} }
.notif-icon-material { .notif-icon-material {
background-color: $t_secondaryContainer; background-color: $secondaryContainer;
color: $onSecondaryContainer; color: $onSecondaryContainer;
} }
.notif-icon-material-low { .notif-icon-material-low {
background-color: $t_secondaryContainer; background-color: $secondaryContainer;
color: $onSecondaryContainer; color: $onSecondaryContainer;
} }
.notif-icon-material-normal { .notif-icon-material-normal {
background-color: $t_secondaryContainer; background-color: $secondaryContainer;
color: $onSecondaryContainer; color: $onSecondaryContainer;
} }
.notif-icon-material-critical { .notif-icon-material-critical {
background-color: $t_onSecondaryContainer; background-color: $secondary;
color: $secondaryContainer; color: $onSecondary;
} }
.notif-expand-btn { .notif-expand-btn {
@@ -163,8 +168,7 @@ $notif_surface: $t_background;
.osd-notif { .osd-notif {
@include notif-rounding; @include notif-rounding;
background-color: transparentize($background, background-color: $background;
$transparentize_surface_amount_subtract_surface );
min-width: 30.682rem; min-width: 30.682rem;
} }
@@ -201,43 +205,43 @@ $notif_surface: $t_background;
} }
.notif-action-low { .notif-action-low {
background-color: mix($t_onSurfaceVariant, $t_surface, 10%); background-color: $surfaceContainerHighest;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
.notif-action-low:focus, .notif-action-low:focus,
.notif-action-low:hover { .notif-action-low:hover {
background-color: $hovercolor; border: 0.040rem solid $outlineVariant;
} }
.notif-action-low:active { .notif-action-low:active {
background-color: $activecolor; background-color: $surfaceBright;
} }
.notif-action-normal { .notif-action-normal {
background-color: mix($t_onSurfaceVariant, $t_surface, 10%); background-color: $surfaceContainerHighest;
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
.notif-action-normal:focus, .notif-action-normal:focus,
.notif-action-normal:hover { .notif-action-normal:hover {
background-color: $hovercolor; border: 0.040rem solid $outlineVariant;
} }
.notif-action-normal:active { .notif-action-normal:active {
background-color: $activecolor; background-color: $surfaceBright;
} }
.notif-action-critical { .notif-action-critical {
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%); background-color: mix($secondary, $onSecondary, 30%);
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
.notif-action-critical:focus, .notif-action-critical:focus,
.notif-action-critical:hover { .notif-action-critical:hover {
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%); border: 0.040rem solid $outline;
} }
.notif-action-critical:active { .notif-action-critical:active {
background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%); background-color: mix($secondary, $onSecondary, 40%);
} }
.config/ags/scss/_overview.scss
+14 -12
View File
@@ -11,7 +11,7 @@
min-height: 3.409rem; min-height: 3.409rem;
padding: 0rem 1.364rem; padding: 0rem 1.364rem;
padding-right: 2.864rem; padding-right: 2.864rem;
background-color: $t_background; background-color: $background;
color: $onBackground; color: $onBackground;
selection { selection {
@@ -53,8 +53,8 @@
@include elevation2; @include elevation2;
min-width: 28.773rem; min-width: 28.773rem;
padding: 0.682rem; padding: 0.682rem;
background-color: $t_background; background-color: $surfaceContainerLow;
color: $onBackground; color: $onSurface;
} }
.overview-search-results-icon { .overview-search-results-icon {
@@ -97,7 +97,7 @@
@include elevation-border; @include elevation-border;
@include elevation2; @include elevation2;
padding: 0.341rem; padding: 0.341rem;
background-color: $t_background; background-color: $background;
color: $onBackground; color: $onBackground;
} }
@@ -105,33 +105,35 @@
@include normal-rounding; @include normal-rounding;
// @include elevation-border; // @include elevation-border;
margin: 0.341rem; margin: 0.341rem;
background-color: mix($t_t_surface, $t_onSurface, 93%); background-color: $surfaceContainerLow;
} }
.overview-tasks-workspace-number { .overview-tasks-workspace-number {
@include mainfont; @include mainfont;
color: mix($t_onSurface, $t_surface, 93%); color: $onSurfaceVariant;
} }
.overview-tasks-window { .overview-tasks-window {
@include normal-rounding; @include normal-rounding;
@include menu_decel; @include menu_decel;
background-color: $t_surfaceVariant; background-color: $surfaceContainerHigh;
color: $onSecondaryContainer; color: $onSurface;
border: 0.068rem solid $t_t_t_onSecondaryContainer; border: 0.068rem solid $outlineVariant;
} }
.overview-tasks-window:hover, .overview-tasks-window:hover,
.overview-tasks-window:focus { .overview-tasks-window:focus {
background-color: mix($l_t_secondaryContainer, $primary, 95%); background-color: $secondaryContainer;
} }
.overview-tasks-window:active { .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 { .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 { .overview-tasks-window-dragging {
.config/ags/scss/_sidebars.scss
+39 -48
View File
@@ -1,5 +1,5 @@
$sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%); $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
$textboxColor: mix($surface, $surfaceVariant, 80%); $textboxColor: $surfaceContainerHigh;
$system: $secondary; $system: $secondary;
$onSystem: $onSecondary; $onSystem: $onSecondary;
$chatgpt: $primary; $chatgpt: $primary;
@@ -16,7 +16,7 @@ $onChatgpt: $onPrimary;
border-radius: $rounding_large - $elevation_margin + 0.068rem; border-radius: $rounding_large - $elevation_margin + 0.068rem;
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
// min-height: 29.591rem; // min-height: 29.591rem;
background-color: $t_background; background-color: $background;
padding: 1.023rem; padding: 1.023rem;
} }
@@ -37,7 +37,7 @@ $onChatgpt: $onPrimary;
border-radius: $rounding_large - $elevation_margin + 0.068rem; border-radius: $rounding_large - $elevation_margin + 0.068rem;
min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
// min-height: 29.591rem; // min-height: 29.591rem;
background-color: $t_background; background-color: $background;
padding: 1.023rem; padding: 1.023rem;
} }
@@ -54,12 +54,12 @@ $onChatgpt: $onPrimary;
.sidebar-group { .sidebar-group {
@include normal-rounding; @include normal-rounding;
@include group-padding; @include group-padding;
background-color: $t_surface; background-color: $surfaceContainer;
} }
.sidebar-group-nopad { .sidebar-group-nopad {
@include normal-rounding; @include normal-rounding;
background-color: $t_surface; background-color: $surfaceContainer;
} }
.sidebar-group-invisible { .sidebar-group-invisible {
@@ -73,7 +73,7 @@ $onChatgpt: $onPrimary;
.sidebar-togglesbox { .sidebar-togglesbox {
@include full-rounding; @include full-rounding;
@include group-padding; @include group-padding;
background-color: $t_surface; background-color: $surfaceContainer;
} }
.sidebar-iconbutton { .sidebar-iconbutton {
@@ -96,8 +96,6 @@ $onChatgpt: $onPrimary;
.sidebar-button { .sidebar-button {
@include element_decel; @include element_decel;
padding: 0rem $rounding_small; padding: 0rem $rounding_small;
background-color: $t_secondaryContainer;
color: $onSecondaryContainer;
} }
.sidebar-button:hover, .sidebar-button:hover,
@@ -206,16 +204,16 @@ $onChatgpt: $onPrimary;
@include element_decel; @include element_decel;
min-width: 0.273rem; min-width: 0.273rem;
min-height: 2.045rem; min-height: 2.045rem;
background-color: $t_onSurfaceVariant; background-color: transparentize($onSurfaceVariant, 0.7);
} }
slider:hover, slider:hover,
slider:focus { slider:focus {
background-color: mix($t_onSurfaceVariant, $onSurfaceVariant, 80%); background-color: transparentize($onSurfaceVariant, 0.6);
} }
slider:active { slider:active {
background-color: mix($onSurfaceVariant, $surfaceVariant, 50%); background-color: transparentize($onSurface, 0.5);
} }
} }
@@ -256,7 +254,7 @@ $onChatgpt: $onPrimary;
} }
.sidebar-calendar-btn-othermonth { .sidebar-calendar-btn-othermonth {
color: mix($onSurface, $surface, 50%); color: $outline;
} }
.sidebar-calendar-header { .sidebar-calendar-header {
@@ -267,19 +265,17 @@ $onChatgpt: $onPrimary;
@include full-rounding; @include full-rounding;
@include element_decel; @include element_decel;
padding: 0rem 0.682rem; padding: 0rem 0.682rem;
background-color: $t_surfaceVariant; background-color: $surfaceContainer;
color: $onSurfaceVariant; color: $outline;
} }
.sidebar-calendar-monthyear-btn:hover, .sidebar-calendar-monthyear-btn:hover,
.sidebar-calendar-monthyear-btn:focus { .sidebar-calendar-monthyear-btn:focus {
background-color: $hovercolor; background-color: $hovercolor;
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
} }
.sidebar-calendar-monthyear-btn:active { .sidebar-calendar-monthyear-btn:active {
background-color: $activecolor; background-color: $activecolor;
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
} }
.sidebar-calendar-monthshift-btn { .sidebar-calendar-monthshift-btn {
@@ -287,18 +283,16 @@ $onChatgpt: $onPrimary;
@include element_decel; @include element_decel;
min-width: 2.045rem; min-width: 2.045rem;
min-height: 2.045rem; min-height: 2.045rem;
background-color: $t_surfaceVariant; background-color: $surfaceContainer;
color: $onSurfaceVariant; color: $outline;
} }
.sidebar-calendar-monthshift-btn:hover { .sidebar-calendar-monthshift-btn:hover {
background-color: $hovercolor; background-color: $hovercolor;
color: mix($onSurfaceVariant, $surfaceVariant, 95%);
} }
.sidebar-calendar-monthshift-btn:active { .sidebar-calendar-monthshift-btn:active {
background-color: $activecolor; background-color: $activecolor;
color: mix($onSurfaceVariant, $surfaceVariant, 85%);
} }
.sidebar-selector-tab { .sidebar-selector-tab {
@@ -337,10 +331,6 @@ $onChatgpt: $onPrimary;
padding-right: 0.545rem; padding-right: 0.545rem;
} }
.sidebar-todo-item-even {
background-color: $t_t_surfaceVariant;
}
.sidebar-todo-item-action { .sidebar-todo-item-action {
@include element_decel; @include element_decel;
border-radius: 9999px; border-radius: 9999px;
@@ -373,7 +363,6 @@ $onChatgpt: $onPrimary;
.sidebar-todo-new { .sidebar-todo-new {
@include full-rounding; @include full-rounding;
@include element_decel; @include element_decel;
color: $onSecondaryContainer;
margin: 0.341rem; margin: 0.341rem;
padding: 0.205rem 0.545rem; padding: 0.205rem 0.545rem;
border: 0.068rem solid $onSurface; border: 0.068rem solid $onSurface;
@@ -381,11 +370,13 @@ $onChatgpt: $onPrimary;
.sidebar-todo-new, .sidebar-todo-new,
.sidebar-todo-new:focus { .sidebar-todo-new:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); color: $onSecondaryContainer;
background-color: $secondaryContainer;
} }
.sidebar-todo-new:active { .sidebar-todo-new:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); color: $onPrimaryContainer;
background-color: $primaryContainer;
} }
.sidebar-todo-add { .sidebar-todo-add {
@@ -399,11 +390,11 @@ $onChatgpt: $onPrimary;
.sidebar-todo-add:hover, .sidebar-todo-add:hover,
.sidebar-todo-add:focus { .sidebar-todo-add:focus {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%); background-color: $surfaceContainerHigh;
} }
.sidebar-todo-add:active { .sidebar-todo-add:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 80%); background-color: $surfaceContainerHighest;
} }
.sidebar-todo-add-available { .sidebar-todo-add-available {
@@ -418,11 +409,11 @@ $onChatgpt: $onPrimary;
.sidebar-todo-add-available:hover, .sidebar-todo-add-available:hover,
.sidebar-todo-add-available:focus { .sidebar-todo-add-available:focus {
background-color: mix($primary, $onPrimary, 97%); background-color: mix($primary, $hovercolor, 70%);
} }
.sidebar-todo-add-available:active { .sidebar-todo-add-available:active {
background-color: mix($primary, $onPrimary, 80%); background-color: mix($primary, $hovercolor, 40%);
} }
.sidebar-todo-entry { .sidebar-todo-entry {
@@ -435,24 +426,24 @@ $onChatgpt: $onPrimary;
min-height: 1.773rem; min-height: 1.773rem;
min-width: 0rem; min-width: 0rem;
padding: 0.205rem 0.682rem; padding: 0.205rem 0.682rem;
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 50%); border: 0.068rem solid $outline;
} }
.sidebar-todo-entry:focus { .sidebar-todo-entry:focus {
border: 0.068rem solid mix($onSurfaceVariant, $surfaceVariant, 90%); border: 0.068rem solid $onSurfaceVariant;
} }
.sidebar-module { .sidebar-module {
@include normal-rounding; @include normal-rounding;
@include group-padding; @include group-padding;
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainer;
padding: 0.682rem; padding: 0.682rem;
} }
.sidebar-module-btn-arrow { .sidebar-module-btn-arrow {
@include full-rounding; @include full-rounding;
@include icon-material; @include icon-material;
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainerHigh;
min-width: 1.705rem; min-width: 1.705rem;
min-height: 1.705rem; min-height: 1.705rem;
@@ -464,7 +455,7 @@ $onChatgpt: $onPrimary;
.sidebar-module-scripts-button { .sidebar-module-scripts-button {
@include full-rounding; @include full-rounding;
@include icon-material; @include icon-material;
background-color: $l_l_t_surfaceVariant; background-color: $surfaceContainer;
min-width: 1.705rem; min-width: 1.705rem;
min-height: 1.705rem; min-height: 1.705rem;
@@ -540,7 +531,7 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-apiswitcher { .sidebar-chat-apiswitcher {
@include full-rounding; @include full-rounding;
@include group-padding; @include group-padding;
background-color: $t_surface; background-color: $surfaceContainer;
} }
.sidebar-chat-apiswitcher-icon { .sidebar-chat-apiswitcher-icon {
@@ -605,11 +596,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-send:hover, .sidebar-chat-send:hover,
.sidebar-chat-send:focus { .sidebar-chat-send:focus {
background-color: $surfaceVariant; background-color: $surfaceBright;
} }
.sidebar-chat-send:active { .sidebar-chat-send:active {
background-color: mix($surfaceVariant, $onBackground, 80%); background-color: $surfaceVariant;
} }
.sidebar-chat-send-available { .sidebar-chat-send-available {
@@ -619,11 +610,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-send-available:hover, .sidebar-chat-send-available:hover,
.sidebar-chat-send-available:focus { .sidebar-chat-send-available:focus {
background-color: mix($primary, $onPrimary, 97%); background-color: mix($primary, $hovercolor, 70%);
} }
.sidebar-chat-send-available:active { .sidebar-chat-send-available:active {
background-color: mix($primary, $onPrimary, 80%); background-color: mix($primary, $hovercolor, 40%);
} }
.sidebar-chat-message { .sidebar-chat-message {
@@ -683,17 +674,17 @@ $colorpicker_rounding: 0.341rem;
background-color: $termbg; background-color: $termbg;
color: $termfg; color: $termfg;
margin: 0rem 0.682rem; margin: 0rem 0.682rem;
border: 0.068rem solid $t_t_t_onSecondaryContainer; border: 0.068rem solid $outlineVariant;
} }
.sidebar-chat-codeblock-topbar { .sidebar-chat-codeblock-topbar {
@include mainfont; @include mainfont;
margin: 0.273rem; margin: 0.273rem;
margin-bottom: 0rem; margin-bottom: 0rem;
background-color: mix($t_secondaryContainer, $t_onSurfaceVariant, 30%); background-color: $secondaryContainer;
color: $onSecondaryContainer; color: $onSecondaryContainer;
border-radius: $rounding_medium - 0.273rem; 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-left-radius: $rounding_small + 0.068rem;
border-top-right-radius: $rounding_small + 0.068rem; border-top-right-radius: $rounding_small + 0.068rem;
padding: 0.341rem 0.477rem; padding: 0.341rem 0.477rem;
@@ -712,11 +703,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-chat-codeblock-topbar-btn:hover, .sidebar-chat-codeblock-topbar-btn:hover,
.sidebar-chat-codeblock-topbar-btn:focus { .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 { .sidebar-chat-codeblock-topbar-btn:active {
background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 60%); background-color: mix($secondaryContainer, $onSecondaryContainer, 80%);
} }
.sidebar-chat-codeblock-code { .sidebar-chat-codeblock-code {
@@ -824,11 +815,11 @@ $colorpicker_rounding: 0.341rem;
.sidebar-pin-enabled:hover, .sidebar-pin-enabled:hover,
.sidebar-pin-enabled:focus { .sidebar-pin-enabled:focus {
background-color: mix($primary, $onPrimary, 90%); background-color: mix($primary, $hovercolor, 70%);
} }
.sidebar-pin-enabled:active { .sidebar-pin-enabled:active {
background-color: mix($primary, $onPrimary, 80%); background-color: mix($primary, $hovercolor, 40%);
} }
.sidebar-waifu-heading { .sidebar-waifu-heading {