dan/dots-hyprland
1
0
Fork 0
mirror of https://github.com/danbulant/dots-hyprland synced 2026-05-24 12:22:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify scss more, remove transparent colors for better support for transparent mode

Browse source
This commit is contained in:
midn8hustlr 2024-03-17 05:38:55 +05:30
parent 996e18fd74
commit eaa66c4a95
11 changed files with 86 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.config/ags/modules/.commonwidgets/configwidgets.js
View file

@ -135,7 +135,6 @@ export const ConfigMulipleSelection = ({
const widget = Box({
tooltipText: desc,
className: 'multipleselection-container spacing-v-3',
//homogeneous: true,
vertical: true,
children: optionsArr.map((options, grp) => {
return Box({

3
.config/ags/scss/_bar.scss
View file

@ -361,6 +361,7 @@ $bar_ws_width_focus_active: 2.045rem;
.bar-statusicons-active {
background-color: $layer0Active;
color: $onLayer0Active;
}
.bar-util-btn {
@ -391,6 +392,6 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.032rem;
min-width: 1.032rem;
font-size: 1.032rem;
color: $barspacerightOnLayer0;
//color: $barspacerightOnLayer0;
padding: 0.205rem 0.341rem;
}

180
.config/ags/scss/_colors.scss
View file

@ -1,61 +1,6 @@
///////////// COLOR MODIFICATIONS /////////////
// Material colors provide excellent readability, but can be uninteresting.
// 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
$transparency: 0.7;
$transparency: 0.5;
$transparentize_amount: 0.3;
$transparentize_surface_amount_less: 0.6;
$transparentize_surface_amount_less_less: 0.55;
$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;
//}
// Extended material
$success: #4f6354;
@ -71,8 +16,12 @@ $onSuccessContainer: #0c1f13;
$onSuccessContainer: #d1e9d6;
}
@if $transparent == True {
// Transparent versions
$t_background: transparentize($background, $transparentize_amount);
$t_surface: transparentize($surface, $transparentize_surface_amount);
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
@if $transparent == True {
$background: transparentize($background, $transparency);
$surface: transparentize($surface, $transparency);
$surfaceDim: transparentize($surfaceDim, $transparency);
@ -87,52 +36,7 @@ $onSuccessContainer: #0c1f13;
$surfaceTint: transparentize($surfaceTint, $transparency);
}
// Transparent versions
$t_primary: transparentize($primary, $transparentize_amount);
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
$t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
$t_secondary: transparentize($secondary, $transparentize_amount);
$t_onSecondary: transparentize($onSecondary, $transparentize_amount);
$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
$t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
$t_tertiary: transparentize($tertiary, $transparentize_amount);
$t_onTertiary: transparentize($onTertiary, $transparentize_amount);
$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
$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);
$t_surface: transparentize($surface, $transparentize_surface_amount);
$t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
$t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
$t_outline: transparentize($outline, $transparentize_amount);
$t_shadow: transparentize($shadow, $transparentize_amount);
$t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
$t_inverseOnSurface: transparentize($inverseOnSurface, $transparentize_amount);
$t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
// Transparent material (extended)
$t_success: transparentize($error, $transparentize_amount);
$t_onSuccess: transparentize($onError, $transparentize_amount);
$t_successContainer: transparentize($errorContainer, $transparentize_amount);
$t_onSuccessContainer: transparentize($onErrorContainer,
$transparentize_amount);
// Others
//$hovercolor: #AA0000;//$surfaceContainerHigh;
//$activecolor: mix($t_surface, $t_onSurface, 30%);
$subtext: $outline;
$actiontext: mix($onBackground, $background, 85%);
$black: black;
@ -141,7 +45,7 @@ $white: white;
// Terminal colors
$termbg: $surfaceContainerHigh;
$termfg: $onSurfaceVariant;
$term0: $t_background;
$term0: $background;
$term1: $error;
$term2: $inversePrimary;
$term3: $onPrimaryContainer;
@ -152,17 +56,18 @@ $term7: $onSurfaceVariant;
/// Color mappings for more chaotic, dynamic colors like the average rice ///
// General
$layer0: $t_background;
$layer0: $background;
$onLayer0: $onBackground;
$layer0Hover: mix($layer0, $onLayer0, 85%);
$layer0Active: mix($layer0, $onLayer0, 70%);
$layer0Active: $primary;
$onLayer0Active: $onPrimary;
$onLayer0Inactive: mix($onLayer0, $layer0, 70%);
$layer1: $surface;
$layer1: $surfaceContainer;
$onLayer1: $onSurface;
$onLayer1Inactive: mix($onLayer1, $layer1, 45%);
$onLayer1: $onSurfaceVariant;
$layer2: $surfaceVariant;
$onLayer2: $onSurfaceVariant;
$layer2: $secondaryContainer;
$onLayer2: $onSecondaryContainer;
$layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
$layer2Active: mix($layer2, $onSurfaceVariant, 80%);
// Elements
@ -189,9 +94,9 @@ $battOnLayer1: $onLayer1;
$battLayer2: $secondaryContainer;
$battOnLayer2: $onSecondaryContainer;
$workspaceOnLayer1Inactive: $onLayer1Inactive;
$workspaceLayer3: $secondaryContainer;
$workspaceOnLayer3: $onSecondaryContainer;
$workspaceOnLayer2: $onSurfaceVariant;
$workspaceLayer3: $primary;
$workspaceOnLayer3: $onPrimary;
$workspaceOnLayer2: $onSecondaryContainer;
$trayOnLayer0: $onLayer0;
$cheatsheetTitle: $onSecondaryContainer;
$cheatsheetColors: (
@ -205,56 +110,3 @@ $cheatsheetColors: (
$onSecondaryContainer
);
///////////////////// test theme: amarena (kind of) /////////////////////////
// $layer0: #0e1116;
// $onLayer0: #FFFFFF;
// $layer0Hover: mix($layer0, $onLayer0, 85%);
// $layer0Active: mix($layer0, $onLayer0, 70%);
// $layer1: #171c22;
// $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
// $onLayer1: $onSurfaceVariant;
// $layer2: #252c35;
// $onLayer2: $onSurfaceVariant;
// $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
// $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
// $layer3: #1C232A;
// // Bar
// $windowtitleOnLayer0Inactive: #70afa4;
// $windowtitleOnLayer0: #7FE3D1;
// $barspacerightOnLayer0: #7FE3D1;
// $timeOnLayer1: #cc7691;
// $dateOnLayer1: #cc7691;
// $ramOnLayer1: #6DC0D5;
// $ramLayer2: $layer2;
// $ramOnLayer2: #6DC0D5;
// $swapOnLayer1: #CC83C7;
// $swapLayer2: $layer2;
// $swapOnLayer2: #CC83C7;
// $cpuOnLayer1: #FA6295;
// $cpuLayer2: $layer2;
// $cpuOnLayer2: #FA6295;
// $musicOnLayer1: #94CF95;
// $musicLayer2: $layer2;
// $musicOnLayer2: #94CF95;
// $utilsLayer2: $layer2;
// $utilsOnLayer2: #CC83C7;
// $battOnLayer1: #94CF95;
// $battLayer2: $layer2;
// $battOnLayer2: #94CF95;
// $workspaceOnLayer1Inactive: $onLayer1Inactive;
// $workspaceLayer3: #33554f;
// $workspaceOnLayer3: #7FE3D1;
// $workspaceOnLayer2: #7FE3D1;
// $trayOnLayer0: #6DC0D5;
// // Cheatsheet
// $cheatsheetTitle: #6DC0D4;
// $cheatsheetColors: (
// #F692B2,
// #6EC1D6,
// #CD84C8,
// #7FE4D2,
// #94CF95,
// #CD84C8,
// #FB6396,
// #6EC1D6
// );

2
.config/ags/scss/_common.scss
View file

@ -216,11 +216,13 @@ popover {
@include small-rounding;
padding: 0rem 0.341rem;
border: 0.034rem solid $outlineVariant;
color: $onSurface;
}
.multipleselection-btn:focus,
.multipleselection-btn:hover {
background-color: $hovercolor;
color: $onSurface;
}
.multipleselection-btn-enabled {

6
.config/ags/scss/_dock.scss
View file

@ -12,11 +12,11 @@
.dock-app-btn:hover,
.dock-app-btn:focus {
background-color: mix($t_surface, $t_onSurface, 95%);
background-color: mix($t_surface, $onSurface, 95%);
}
.dock-app-btn:active {
background-color: mix($t_surface, $t_onSurface, 85%);
background-color: mix($t_surface, $onSurface, 85%);
}
.dock-app-icon {
@ -28,4 +28,4 @@
.dock-separator {
min-width: 0.068rem;
background-color: $surfaceVariant;
}
}

24
.config/ags/scss/_lib_mixins.scss
View file

@ -190,24 +190,24 @@ $overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
@mixin elevation-border-softer {
border-top: 1px solid mix($t_t_surface, $t_onSurface, 90%);
border-left: 1px solid mix($t_t_surface, $t_onSurface, 90%);
border-right: 1px solid mix($t_t_surface, $t_onSurface, 95%);
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 95%);
border-top: 1px solid mix($t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_surface, $onSurface, 95%);
}
@mixin elevation-border {
border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
border-top: 1px solid mix($t_surface, $onSurface, 80%);
border-left: 1px solid mix($t_surface, $onSurface, 80%);
border-right: 1px solid mix($t_surface, $onSurface, 85%);
border-bottom: 1px solid mix($t_surface, $onSurface, 85%);
}
@mixin elevation-border-heavier {
border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
border-top: 1px solid mix($t_surface, $onSurface, 70%);
border-left: 1px solid mix($t_surface, $onSurface, 70%);
border-right: 1px solid mix($t_surface, $onSurface, 75%);
border-bottom: 1px solid mix($t_surface, $onSurface, 75%);
}
@mixin elevation-border-transparent {

92
.config/ags/scss/_material.scss
View file

@ -1,56 +1,56 @@
$darkmode: True;
$transparent: False;
$primary_paletteKeyColor: #727C35;
$secondary_paletteKeyColor: #76795C;
$tertiary_paletteKeyColor: #537F73;
$neutral_paletteKeyColor: #78786D;
$neutral_variant_paletteKeyColor: #77786A;
$background: #13140D;
$onBackground: #E4E3D6;
$surface: #13140D;
$surfaceDim: #13140D;
$surfaceBright: #393A31;
$primary_paletteKeyColor: #427DA3;
$secondary_paletteKeyColor: #687987;
$tertiary_paletteKeyColor: #7D7195;
$neutral_paletteKeyColor: #73777B;
$neutral_variant_paletteKeyColor: #71787E;
$background: #101417;
$onBackground: #DFE3E8;
$surface: #101417;
$surfaceDim: #101417;
$surfaceBright: #353A3E;
$surfaceContainerLowest: #FFFFFF;
$surfaceContainerLow: #1B1C14;
$surfaceContainer: #1F2018;
$surfaceContainerHigh: #2A2B22;
$surfaceContainerHighest: #35352D;
$onSurface: #E4E3D6;
$surfaceVariant: #47483B;
$onSurfaceVariant: #C8C7B7;
$inverseSurface: #E4E3D6;
$inverseOnSurface: #303129;
$outline: #919283;
$outlineVariant: #47483B;
$surfaceContainerLow: #181C20;
$surfaceContainer: #1C2024;
$surfaceContainerHigh: #262A2E;
$surfaceContainerHighest: #313539;
$onSurface: #DFE3E8;
$surfaceVariant: #41484D;
$onSurfaceVariant: #C1C7CE;
$inverseSurface: #DFE3E8;
$inverseOnSurface: #2D3135;
$outline: #8B9198;
$outlineVariant: #41484D;
$shadow: #000000;
$scrim: #000000;
$surfaceTint: #C2CD7C;
$primary: #C2CD7C;
$onPrimary: #2D3400;
$primaryContainer: #434B06;
$onPrimaryContainer: #DEE995;
$inversePrimary: #5A631F;
$secondary: #C6C9A7;
$onSecondary: #2F321A;
$secondaryContainer: #484B31;
$onSecondaryContainer: #E4E7C3;
$tertiary: #A2D0C2;
$onTertiary: #06372E;
$tertiaryContainer: #6D9A8D;
$surfaceTint: #94CDF7;
$primary: #94CDF7;
$onPrimary: #00344D;
$primaryContainer: #004C6D;
$onPrimaryContainer: #C8E6FF;
$inversePrimary: #246488;
$secondary: #B7C9D8;
$onSecondary: #21323F;
$secondaryContainer: #384956;
$onSecondaryContainer: #D3E5F5;
$tertiary: #CEC0E8;
$onTertiary: #352B4B;
$tertiaryContainer: #978BB0;
$onTertiaryContainer: #000000;
$error: #FFB4AB;
$onError: #690005;
$errorContainer: #93000A;
$onErrorContainer: #FFDAD6;
$primaryFixed: #DEE995;
$primaryFixedDim: #C2CD7C;
$onPrimaryFixed: #191E00;
$onPrimaryFixedVariant: #434B06;
$secondaryFixed: #E2E5C2;
$secondaryFixedDim: #C6C9A7;
$onSecondaryFixed: #1A1D07;
$onSecondaryFixedVariant: #46492F;
$tertiaryFixed: #BDECDE;
$tertiaryFixedDim: #A2D0C2;
$onTertiaryFixed: #00201A;
$onTertiaryFixedVariant: #224E44;
$primaryFixed: #C8E6FF;
$primaryFixedDim: #94CDF7;
$onPrimaryFixed: #001E2E;
$onPrimaryFixedVariant: #004C6D;
$secondaryFixed: #D3E5F5;
$secondaryFixedDim: #B7C9D8;
$onSecondaryFixed: #0B1D29;
$onSecondaryFixedVariant: #384956;
$tertiaryFixed: #E9DDFF;
$tertiaryFixedDim: #CEC0E8;
$onTertiaryFixed: #1F1635;
$onTertiaryFixedVariant: #4B4163;

1
.config/ags/scss/_osd.scss
View file

@ -169,6 +169,7 @@
@include icon-material;
min-width: 1.705rem;
min-height: 1.705rem;
color: $onSurface;
&:hover {
background-color: $surfaceContainerHigh;

4
.config/ags/scss/_osk.scss
View file

@ -104,11 +104,11 @@ $osk_key_fontsize: 1.091rem;
.osk-control-button:hover,
.osk-control-button:focus {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%);
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
}
.osk-control-button:active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%);
background-color: mix($t_surfaceVariant, $onSurfaceVariant, 70%);
font-size: $osk_key_fontsize;
}

2
.config/ags/scss/_session.scss
View file

@ -1,5 +1,5 @@
.session-bg {
background-color: mix($t_t_background, $background, 40%);
background-color: $t_surface;
}
.session-button {

2
.config/ags/scss/_sidebars.scss
View file

@ -128,7 +128,7 @@ $onChatgpt: $onPrimary;
}
.sidebar-navrail {
// background-color: $t_surface;
// background-color: $surface;
padding: 0rem $rounding_medium;
}