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

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 a72e335fc7
commit c3de429225
11 changed files with 86 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/.commonwidgets/configwidgets.js
-1
View File
@@ -135,7 +135,6 @@ export const ConfigMulipleSelection = ({
const widget = Box({ const widget = Box({
tooltipText: desc, tooltipText: desc,
className: 'multipleselection-container spacing-v-3', className: 'multipleselection-container spacing-v-3',
//homogeneous: true,
vertical: true, vertical: true,
children: optionsArr.map((options, grp) => { children: optionsArr.map((options, grp) => {
return Box({ return Box({
.config/ags/scss/_bar.scss
+2 -1
View File
@@ -361,6 +361,7 @@ $bar_ws_width_focus_active: 2.045rem;
.bar-statusicons-active { .bar-statusicons-active {
background-color: $layer0Active; background-color: $layer0Active;
color: $onLayer0Active;
} }
.bar-util-btn { .bar-util-btn {
@@ -391,6 +392,6 @@ $bar_ws_width_focus_active: 2.045rem;
min-height: 1.032rem; min-height: 1.032rem;
min-width: 1.032rem; min-width: 1.032rem;
font-size: 1.032rem; font-size: 1.032rem;
color: $barspacerightOnLayer0; //color: $barspacerightOnLayer0;
padding: 0.205rem 0.341rem; padding: 0.205rem 0.341rem;
} }
.config/ags/scss/_colors.scss
+16 -164
View File
@@ -1,61 +1,6 @@
///////////// COLOR MODIFICATIONS ///////////// $transparency: 0.5;
// 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;
$transparentize_amount: 0.3; $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: 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 // Extended material
$success: #4f6354; $success: #4f6354;
@@ -71,8 +16,12 @@ $onSuccessContainer: #0c1f13;
$onSuccessContainer: #d1e9d6; $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); $background: transparentize($background, $transparency);
$surface: transparentize($surface, $transparency); $surface: transparentize($surface, $transparency);
$surfaceDim: transparentize($surfaceDim, $transparency); $surfaceDim: transparentize($surfaceDim, $transparency);
@@ -87,52 +36,7 @@ $onSuccessContainer: #0c1f13;
$surfaceTint: transparentize($surfaceTint, $transparency); $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 // Others
//$hovercolor: #AA0000;//$surfaceContainerHigh;
//$activecolor: mix($t_surface, $t_onSurface, 30%);
$subtext: $outline; $subtext: $outline;
$actiontext: mix($onBackground, $background, 85%); $actiontext: mix($onBackground, $background, 85%);
$black: black; $black: black;
@@ -141,7 +45,7 @@ $white: white;
// Terminal colors // Terminal colors
$termbg: $surfaceContainerHigh; $termbg: $surfaceContainerHigh;
$termfg: $onSurfaceVariant; $termfg: $onSurfaceVariant;
$term0: $t_background; $term0: $background;
$term1: $error; $term1: $error;
$term2: $inversePrimary; $term2: $inversePrimary;
$term3: $onPrimaryContainer; $term3: $onPrimaryContainer;
@@ -152,17 +56,18 @@ $term7: $onSurfaceVariant;
/// Color mappings for more chaotic, dynamic colors like the average rice /// /// Color mappings for more chaotic, dynamic colors like the average rice ///
// General // General
$layer0: $t_background; $layer0: $background;
$onLayer0: $onBackground; $onLayer0: $onBackground;
$layer0Hover: mix($layer0, $onLayer0, 85%); $layer0Hover: mix($layer0, $onLayer0, 85%);
$layer0Active: mix($layer0, $onLayer0, 70%); $layer0Active: $primary;
$onLayer0Active: $onPrimary;
$onLayer0Inactive: mix($onLayer0, $layer0, 70%); $onLayer0Inactive: mix($onLayer0, $layer0, 70%);
$layer1: $surface; $layer1: $surfaceContainer;
$onLayer1: $onSurface; $onLayer1: $onSurface;
$onLayer1Inactive: mix($onLayer1, $layer1, 45%); $onLayer1Inactive: mix($onLayer1, $layer1, 45%);
$onLayer1: $onSurfaceVariant; $onLayer1: $onSurfaceVariant;
$layer2: $surfaceVariant; $layer2: $secondaryContainer;
$onLayer2: $onSurfaceVariant; $onLayer2: $onSecondaryContainer;
$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); $layer2Hover: mix($layer2, $onSurfaceVariant, 90%);
$layer2Active: mix($layer2, $onSurfaceVariant, 80%); $layer2Active: mix($layer2, $onSurfaceVariant, 80%);
// Elements // Elements
@@ -189,9 +94,9 @@ $battOnLayer1: $onLayer1;
$battLayer2: $secondaryContainer; $battLayer2: $secondaryContainer;
$battOnLayer2: $onSecondaryContainer; $battOnLayer2: $onSecondaryContainer;
$workspaceOnLayer1Inactive: $onLayer1Inactive; $workspaceOnLayer1Inactive: $onLayer1Inactive;
$workspaceLayer3: $secondaryContainer; $workspaceLayer3: $primary;
$workspaceOnLayer3: $onSecondaryContainer; $workspaceOnLayer3: $onPrimary;
$workspaceOnLayer2: $onSurfaceVariant; $workspaceOnLayer2: $onSecondaryContainer;
$trayOnLayer0: $onLayer0; $trayOnLayer0: $onLayer0;
$cheatsheetTitle: $onSecondaryContainer; $cheatsheetTitle: $onSecondaryContainer;
$cheatsheetColors: ( $cheatsheetColors: (
@@ -205,56 +110,3 @@ $cheatsheetColors: (
$onSecondaryContainer $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
// );
.config/ags/scss/_common.scss
+2
View File
@@ -216,11 +216,13 @@ popover {
@include small-rounding; @include small-rounding;
padding: 0rem 0.341rem; padding: 0rem 0.341rem;
border: 0.034rem solid $outlineVariant; border: 0.034rem solid $outlineVariant;
color: $onSurface;
} }
.multipleselection-btn:focus, .multipleselection-btn:focus,
.multipleselection-btn:hover { .multipleselection-btn:hover {
background-color: $hovercolor; background-color: $hovercolor;
color: $onSurface;
} }
.multipleselection-btn-enabled { .multipleselection-btn-enabled {
.config/ags/scss/_dock.scss
+3 -3
View File
@@ -12,11 +12,11 @@
.dock-app-btn:hover, .dock-app-btn:hover,
.dock-app-btn:focus { .dock-app-btn:focus {
background-color: mix($t_surface, $t_onSurface, 95%); background-color: mix($t_surface, $onSurface, 95%);
} }
.dock-app-btn:active { .dock-app-btn:active {
background-color: mix($t_surface, $t_onSurface, 85%); background-color: mix($t_surface, $onSurface, 85%);
} }
.dock-app-icon { .dock-app-icon {
@@ -28,4 +28,4 @@
.dock-separator { .dock-separator {
min-width: 0.068rem; min-width: 0.068rem;
background-color: $surfaceVariant; background-color: $surfaceVariant;
} }
.config/ags/scss/_lib_mixins.scss
+12 -12
View File
@@ -190,24 +190,24 @@ $overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%); $overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);
@mixin elevation-border-softer { @mixin elevation-border-softer {
border-top: 1px solid mix($t_t_surface, $t_onSurface, 90%); border-top: 1px solid mix($t_surface, $onSurface, 90%);
border-left: 1px solid mix($t_t_surface, $t_onSurface, 90%); border-left: 1px solid mix($t_surface, $onSurface, 90%);
border-right: 1px solid mix($t_t_surface, $t_onSurface, 95%); border-right: 1px solid mix($t_surface, $onSurface, 95%);
border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 95%); border-bottom: 1px solid mix($t_surface, $onSurface, 95%);
} }
@mixin elevation-border { @mixin elevation-border {
border-top: 1px solid mix($t_t_surface, $onSurface, 90%); border-top: 1px solid mix($t_surface, $onSurface, 80%);
border-left: 1px solid mix($t_t_surface, $onSurface, 90%); border-left: 1px solid mix($t_surface, $onSurface, 80%);
border-right: 1px solid mix($t_t_surface, $onSurface, 95%); border-right: 1px solid mix($t_surface, $onSurface, 85%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%); border-bottom: 1px solid mix($t_surface, $onSurface, 85%);
} }
@mixin elevation-border-heavier { @mixin elevation-border-heavier {
border-top: 1px solid mix($t_t_surface, $onSurface, 80%); border-top: 1px solid mix($t_surface, $onSurface, 70%);
border-left: 1px solid mix($t_t_surface, $onSurface, 80%); border-left: 1px solid mix($t_surface, $onSurface, 70%);
border-right: 1px solid mix($t_t_surface, $onSurface, 85%); border-right: 1px solid mix($t_surface, $onSurface, 75%);
border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%); border-bottom: 1px solid mix($t_surface, $onSurface, 75%);
} }
@mixin elevation-border-transparent { @mixin elevation-border-transparent {
.config/ags/scss/_material.scss
+46 -46
View File
@@ -1,56 +1,56 @@
$darkmode: True; $darkmode: True;
$transparent: False; $transparent: False;
$primary_paletteKeyColor: #727C35; $primary_paletteKeyColor: #427DA3;
$secondary_paletteKeyColor: #76795C; $secondary_paletteKeyColor: #687987;
$tertiary_paletteKeyColor: #537F73; $tertiary_paletteKeyColor: #7D7195;
$neutral_paletteKeyColor: #78786D; $neutral_paletteKeyColor: #73777B;
$neutral_variant_paletteKeyColor: #77786A; $neutral_variant_paletteKeyColor: #71787E;
$background: #13140D; $background: #101417;
$onBackground: #E4E3D6; $onBackground: #DFE3E8;
$surface: #13140D; $surface: #101417;
$surfaceDim: #13140D; $surfaceDim: #101417;
$surfaceBright: #393A31; $surfaceBright: #353A3E;
$surfaceContainerLowest: #FFFFFF; $surfaceContainerLowest: #FFFFFF;
$surfaceContainerLow: #1B1C14; $surfaceContainerLow: #181C20;
$surfaceContainer: #1F2018; $surfaceContainer: #1C2024;
$surfaceContainerHigh: #2A2B22; $surfaceContainerHigh: #262A2E;
$surfaceContainerHighest: #35352D; $surfaceContainerHighest: #313539;
$onSurface: #E4E3D6; $onSurface: #DFE3E8;
$surfaceVariant: #47483B; $surfaceVariant: #41484D;
$onSurfaceVariant: #C8C7B7; $onSurfaceVariant: #C1C7CE;
$inverseSurface: #E4E3D6; $inverseSurface: #DFE3E8;
$inverseOnSurface: #303129; $inverseOnSurface: #2D3135;
$outline: #919283; $outline: #8B9198;
$outlineVariant: #47483B; $outlineVariant: #41484D;
$shadow: #000000; $shadow: #000000;
$scrim: #000000; $scrim: #000000;
$surfaceTint: #C2CD7C; $surfaceTint: #94CDF7;
$primary: #C2CD7C; $primary: #94CDF7;
$onPrimary: #2D3400; $onPrimary: #00344D;
$primaryContainer: #434B06; $primaryContainer: #004C6D;
$onPrimaryContainer: #DEE995; $onPrimaryContainer: #C8E6FF;
$inversePrimary: #5A631F; $inversePrimary: #246488;
$secondary: #C6C9A7; $secondary: #B7C9D8;
$onSecondary: #2F321A; $onSecondary: #21323F;
$secondaryContainer: #484B31; $secondaryContainer: #384956;
$onSecondaryContainer: #E4E7C3; $onSecondaryContainer: #D3E5F5;
$tertiary: #A2D0C2; $tertiary: #CEC0E8;
$onTertiary: #06372E; $onTertiary: #352B4B;
$tertiaryContainer: #6D9A8D; $tertiaryContainer: #978BB0;
$onTertiaryContainer: #000000; $onTertiaryContainer: #000000;
$error: #FFB4AB; $error: #FFB4AB;
$onError: #690005; $onError: #690005;
$errorContainer: #93000A; $errorContainer: #93000A;
$onErrorContainer: #FFDAD6; $onErrorContainer: #FFDAD6;
$primaryFixed: #DEE995; $primaryFixed: #C8E6FF;
$primaryFixedDim: #C2CD7C; $primaryFixedDim: #94CDF7;
$onPrimaryFixed: #191E00; $onPrimaryFixed: #001E2E;
$onPrimaryFixedVariant: #434B06; $onPrimaryFixedVariant: #004C6D;
$secondaryFixed: #E2E5C2; $secondaryFixed: #D3E5F5;
$secondaryFixedDim: #C6C9A7; $secondaryFixedDim: #B7C9D8;
$onSecondaryFixed: #1A1D07; $onSecondaryFixed: #0B1D29;
$onSecondaryFixedVariant: #46492F; $onSecondaryFixedVariant: #384956;
$tertiaryFixed: #BDECDE; $tertiaryFixed: #E9DDFF;
$tertiaryFixedDim: #A2D0C2; $tertiaryFixedDim: #CEC0E8;
$onTertiaryFixed: #00201A; $onTertiaryFixed: #1F1635;
$onTertiaryFixedVariant: #224E44; $onTertiaryFixedVariant: #4B4163;
.config/ags/scss/_osd.scss
+1
View File
@@ -169,6 +169,7 @@
@include icon-material; @include icon-material;
min-width: 1.705rem; min-width: 1.705rem;
min-height: 1.705rem; min-height: 1.705rem;
color: $onSurface;
&:hover { &:hover {
background-color: $surfaceContainerHigh; background-color: $surfaceContainerHigh;
.config/ags/scss/_osk.scss
+2 -2
View File
@@ -104,11 +104,11 @@ $osk_key_fontsize: 1.091rem;
.osk-control-button:hover, .osk-control-button:hover,
.osk-control-button:focus { .osk-control-button:focus {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 90%); background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
} }
.osk-control-button:active { .osk-control-button:active {
background-color: mix($t_surfaceVariant, $t_onSurfaceVariant, 70%); background-color: mix($t_surfaceVariant, $onSurfaceVariant, 70%);
font-size: $osk_key_fontsize; font-size: $osk_key_fontsize;
} }
.config/ags/scss/_session.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.session-bg { .session-bg {
background-color: mix($t_t_background, $background, 40%); background-color: $t_surface;
} }
.session-button { .session-button {
.config/ags/scss/_sidebars.scss
+1 -1
View File
@@ -128,7 +128,7 @@ $onChatgpt: $onPrimary;
} }
.sidebar-navrail { .sidebar-navrail {
// background-color: $t_surface; // background-color: $surface;
padding: 0rem $rounding_medium; padding: 0rem $rounding_medium;
} }