diff --git a/.config/ags/modules/bar/normal/music.js b/.config/ags/modules/bar/normal/music.js index bef38e79..ea9c3540 100644 --- a/.config/ags/modules/bar/normal/music.js +++ b/.config/ags/modules/bar/normal/music.js @@ -36,9 +36,9 @@ const BarGroup = ({ child }) => Box({ ] }); -const BarResource = (name, icon, command) => { +const BarResource = (name, icon, command, circprogClassName = 'bar-batt-circprog', textClassName = 'txt-onSurfaceVariant', iconClassName = 'bar-batt') => { const resourceCircProg = AnimatedCircProg({ - className: 'bar-batt-circprog', + className: `${circprogClassName}`, vpack: 'center', hpack: 'center', }); @@ -47,7 +47,7 @@ const BarResource = (name, icon, command) => { children: [Overlay({ child: Box({ vpack: 'center', - className: 'bar-batt', + className: `${iconClassName}`, homogeneous: true, children: [ MaterialIcon(icon, 'small'), @@ -57,10 +57,10 @@ const BarResource = (name, icon, command) => { })] }); const resourceLabel = Label({ - className: 'txt-smallie txt-onSurfaceVariant', + className: `txt-smallie ${textClassName}`, }); const widget = Box({ - className: 'spacing-h-4 txt-onSurfaceVariant', + className: `spacing-h-4 ${textClassName}`, children: [ resourceProgress, resourceLabel, @@ -135,8 +135,8 @@ export default () => { }); const trackTitle = Label({ hexpand: true, - className: 'txt-smallie txt-onSurfaceVariant', - truncate: 'end', + className: 'txt-smallie bar-music-txt', + truncate: 'end', maxWidthChars: 10, // Doesn't matter, just needs to be non negative setup: (self) => self.hook(Mpris, label => { const mpris = Mpris.getPlayer(''); @@ -178,31 +178,32 @@ export default () => { onScrollDown: () => execAsync(CUSTOM_MODULE_SCROLLDOWN_SCRIPT).catch(print), }) }); - } else { - return BarGroup({ - child: Box({ - children: [ - BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`), - Revealer({ - revealChild: true, - transition: 'slide_left', - transitionDuration: userOptions.animations.durationLarge, - child: Box({ - className: 'spacing-h-10 margin-left-10', - children: [ - BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`), - BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`), - ] - }), - setup: (self) => self.hook(Mpris, label => { - const mpris = Mpris.getPlayer(''); - self.revealChild = (!mpris); - }), - }) - ], - }) - }); - } + } else return BarGroup({ + child: Box({ + children: [ + BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`, + 'bar-ram-circprog', 'bar-ram-txt', 'bar-ram-icon'), + Revealer({ + revealChild: true, + transition: 'slide_left', + transitionDuration: userOptions.animations.durationLarge, + child: Box({ + className: 'spacing-h-10 margin-left-10', + children: [ + BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`, + 'bar-swap-circprog', 'bar-swap-txt', 'bar-swap-icon'), + BarResource('CPU Usage', 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`, + 'bar-cpu-circprog', 'bar-cpu-txt', 'bar-cpu-icon'), + ] + }), + setup: (self) => self.hook(Mpris, label => { + const mpris = Mpris.getPlayer(''); + self.revealChild = (!mpris); + }), + }) + ], + }) + }); } return EventBox({ onScrollUp: (self) => switchToRelativeWorkspace(self, -1), diff --git a/.config/ags/modules/bar/normal/system.js b/.config/ags/modules/bar/normal/system.js index d7b0d909..50ece299 100644 --- a/.config/ags/modules/bar/normal/system.js +++ b/.config/ags/modules/bar/normal/system.js @@ -30,21 +30,21 @@ const BatBatteryProgress = () => { const BarClock = () => Widget.Box({ vpack: 'center', - className: 'spacing-h-4 txt-onSurfaceVariant bar-clock-box', + className: 'spacing-h-4 bar-clock-box', children: [ Widget.Label({ - className: 'bar-clock', + className: 'bar-time', label: GLib.DateTime.new_now_local().format(userOptions.time.format), setup: (self) => self.poll(userOptions.time.interval, label => { label.label = GLib.DateTime.new_now_local().format(userOptions.time.format); }), }), Widget.Label({ - className: 'txt-norm', + className: 'txt-norm txt-onLayer1', label: '•', }), Widget.Label({ - className: 'txt-smallie', + className: 'txt-smallie bar-date', label: GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong), setup: (self) => self.poll(userOptions.time.dateInterval, (label) => { label.label = GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong); diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index e209a457..8f3e4244 100644 --- a/.config/ags/scss/_bar.scss +++ b/.config/ags/scss/_bar.scss @@ -1,12 +1,8 @@ // Made to be pixel-perfect with 11pt font size // 1rem = 11pt = 14.6666666667px - -$black: black; -$white: white; $bar_ws_width: 1.774rem; $bar_ws_width_focus: 0.614rem; $bar_ws_width_focus_active: 2.045rem; -$bar_subgroup_bg: $surfaceVariant; @mixin bar-group-rounding { @include small-rounding; @@ -17,12 +13,12 @@ $bar_subgroup_bg: $surfaceVariant; } .bar-bg { - background-color: $t_background; + background-color: $layer0; min-height: 2.727rem; } .bar-bg-focus { - background-color: $t_background; + background-color: $layer0; min-height: 1.364rem; } @@ -39,7 +35,7 @@ $bar_subgroup_bg: $surfaceVariant; } .bar-group { - background-color: $l_l_t_surfaceVariant; + background-color: $layer1; } .bar-group-pad { @@ -88,70 +84,57 @@ $bar_subgroup_bg: $surfaceVariant; border-bottom-right-radius: 1.364rem; } +.bar-sidemodule { + min-width: 26rem; +} + .bar-ws-width { min-width: 18.341rem; } .bar-ws { min-width: $bar_ws_width; - color: mix($onBackground, $background, 40%); - - @if $darkmode ==true { - color: mix($onBackground, $background, 45%); - } + color: $workspaceOnLayer1Inactive; } .bar-ws-active { - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $workspaceSecondaryContainer; + color: $workspaceOnSecondaryContainer; } .bar-ws-occupied { - background-color: $bar_subgroup_bg; - color: $onSurfaceVariant; + background-color: $layer2; + color: $workspaceOnSurfaceVariant; } // Focus is the bar mode name, not the workspace state! .bar-ws-focus { - background-color: $bar_subgroup_bg; + background-color: $layer2; min-width: $bar_ws_width_focus; } .bar-ws-focus-active { min-width: $bar_ws_width_focus_active; - background-color: $onBackground; + background-color: $layer2; } .bar-ws-focus-occupied { - background-color: mix($onBackground, $background, 40%); - - @if $darkmode ==true { - background-color: mix($onBackground, $background, 45%); - } -} - -.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; + background-color: $layer2; } .bar-clock-box { margin: 0rem 0.682rem; } -.bar-clock { +.bar-time { @include titlefont; font-size: 1.2727rem; + color: $timeOnLayer1; } .bar-date { - @include titlefont; - font-size: 1rem; - color: $onBackground; + color: $dateOnLayer1; } .bar-batt { @@ -164,20 +147,6 @@ $bar_subgroup_bg: $surfaceVariant; color: $onSecondaryContainer; } -.bar-sidemodule { - min-width: 26rem; -} - -.bar-batt-low { - background-color: $error; - color: $errorContainer; -} - -.bar-batt-full { - // background-color: $successContainer; - // color: $onSuccessContainer; -} - .bar-batt-circprog { @include fluent_decel_long; min-width: 0.068rem; // line width @@ -192,9 +161,79 @@ $bar_subgroup_bg: $surfaceVariant; color: $errorContainer; } -.bar-batt-circprog-full { - // background-color: $successContainer; - // color: $onSuccessContainer; + +.bar-batt-low { + background-color: $error; + color: $errorContainer; +} + +.bar-ram-icon { + @include full-rounding; + @include element_decel; + min-height: 1.77rem; + min-width: 1.77rem; + border-radius: 10rem; + background-color: $ramSecondaryContainer; + color: $ramOnSecondaryContainer; +} + +.bar-ram-circprog { + @include fluent_decel_long; + min-width: 0.068rem; // line width + min-height: 1.636rem; + padding: 0rem; + background-color: $ramSecondaryContainer; + color: $ramOnSecondaryContainer; +} + +.bar-ram-txt { + color: $ramOnLayer1; +} + +.bar-swap-icon { + @include full-rounding; + @include element_decel; + min-height: 1.77rem; + min-width: 1.77rem; + border-radius: 10rem; + background-color: $swapSecondaryContainer; + color: $swapOnSecondaryContainer; +} + +.bar-swap-circprog { + @include fluent_decel_long; + min-width: 0.068rem; // line width + min-height: 1.636rem; + padding: 0rem; + background-color: $swapSecondaryContainer; + color: $swapOnSecondaryContainer; +} + +.bar-swap-txt { + color: $swapOnLayer1; +} + +.bar-cpu-icon { + @include full-rounding; + @include element_decel; + min-height: 1.77rem; + min-width: 1.77rem; + border-radius: 10rem; + background-color: $cpuSecondaryContainer; + color: $cpuOnSecondaryContainer; +} + +.bar-cpu-circprog { + @include fluent_decel_long; + min-width: 0.068rem; // line width + min-height: 1.636rem; + padding: 0rem; + background-color: $cpuSecondaryContainer; + color: $cpuOnSecondaryContainer; +} + +.bar-cpu-txt { + color: $cpuOnLayer1; } .bar-music-playstate { @@ -202,8 +241,8 @@ $bar_subgroup_bg: $surfaceVariant; min-height: 1.77rem; min-width: 1.77rem; border-radius: 10rem; - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $musicSecondaryContainer; + color: $musicOnSecondaryContainer; } .bar-music-circprog { @@ -211,16 +250,16 @@ $bar_subgroup_bg: $surfaceVariant; min-width: 0.068rem; // line width min-height: 1.636rem; padding: 0rem; - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $musicSecondaryContainer; + color: $musicOnSecondaryContainer; } .bar-music-playstate-playing { min-height: 1.77rem; min-width: 1.77rem; border-radius: 10rem; - background-color: $secondaryContainer; - color: $onSecondaryContainer; + background-color: $musicSecondaryContainer; + color: $musicOnSecondaryContainer; } .bar-music-playstate-txt { @@ -228,6 +267,10 @@ $bar_subgroup_bg: $surfaceVariant; @include icon-material; } +.bar-music-txt { + color: $musicOnLayer1; +} + .bar-music-cover { background-position: center; background-repeat: no-repeat; @@ -240,11 +283,6 @@ $bar_subgroup_bg: $surfaceVariant; min-width: 34.091rem; } -.bar-music-extended-ctl-bg { - border-radius: 1.364rem; - background-color: rgba(30, 30, 30, 0.6); -} - .bar-music-hide-false { @include menu_decel; transition-duration: 100ms; @@ -263,7 +301,7 @@ $bar_subgroup_bg: $surfaceVariant; } .corner { - background-color: $t_background; + background-color: $layer0; @include large-rounding; } @@ -275,7 +313,7 @@ $bar_subgroup_bg: $surfaceVariant; .bar-topdesc { margin-top: -0.136rem; margin-bottom: -0.341rem; - color: $subtext; + color: $windowtitleOnLayer1Inactive; } .bar-space-button { @@ -287,15 +325,6 @@ $bar_subgroup_bg: $surfaceVariant; padding: 0rem 0.682rem; } -.bar-space-button:hover>box:first-child, -.bar-space-button:focus>box:first-child { - background-color: $hovercolor; -} - -.bar-space-button:active>box:first-child { - background-color: $activecolor; -} - .bar-space-button-leftmost { box { margin: 0rem 0.682rem; @@ -327,12 +356,8 @@ $bar_subgroup_bg: $surfaceVariant; padding: 0rem 0.614rem; } -.bar-statusicons-hover { - background-color: mix($t_background, $t_onBackground, 90%); -} - .bar-statusicons-active { - background-color: mix($t_background, $t_onBackground, 80%); + background-color: $layer0Active; } .bar-util-btn { @@ -340,16 +365,17 @@ $bar_subgroup_bg: $surfaceVariant; @include element_decel; min-height: 1.77rem; min-width: 1.77rem; - background-color: $bar_subgroup_bg; + background-color: $layer2; + color: $onLayer2; } .bar-util-btn:hover, .bar-util-btn:focus { - background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%); + background-color: $layer2Hover; } .bar-util-btn:active { - background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%); + background-color: $layer2Active; } .bar-bluetooth-device { @@ -358,7 +384,6 @@ $bar_subgroup_bg: $surfaceVariant; min-height: 1.032rem; min-width: 1.032rem; font-size: 1.032rem; - background-color: $surface; - color: $onSurface; + color: $onLayer0; padding: 0.205rem 0.341rem; } \ No newline at end of file diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 3db57ab7..2286d526 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -116,6 +116,8 @@ $hovercolor: mix($t_surface, $t_onSurface, 50%); $activecolor: mix($t_surface, $t_onSurface, 30%); $subtext: mix($onBackground, $background, 70%); $actiontext: mix($onBackground, $background, 85%); +$black: black; +$white: white; // Terminal colors $termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%); @@ -127,4 +129,40 @@ $term3: $onPrimaryContainer; $term4: $onPrimaryContainer; $term5: $onSecondaryContainer; $term6: $primary; -$term7: $onSurfaceVariant; \ No newline at end of file +$term7: $onSurfaceVariant; + +/// Color mappings for more chaotic, dynamic colors like the average rice /// +// General +$layer0: $t_background; +$onLayer0: $onBackground; +$layer0Active: mix($t_background, $t_onBackground, 80%); +$layer1: $surface; +$onLayer1Inactive: mix($onBackground, $background, 45%); +$onLayer1: $onSurfaceVariant; +$layer2: $surfaceVariant; +$onLayer2: $onSurfaceVariant; +$layer2Hover: mix($layer2, $onSurfaceVariant, 90%); +$layer2Active: mix($layer2, $onSurfaceVariant, 80%); +// Elements +// For now they just use Material colors. I'll make a proper theme later +$windowtitleOnLayer1Inactive: $onLayer1; +$timeOnLayer1: $onLayer1; +$dateOnLayer1: $onLayer1; +$ramOnLayer1: $onLayer1; +$ramSecondaryContainer: $secondaryContainer; +$ramOnSecondaryContainer: $onSecondaryContainer; +$swapOnLayer1: $onLayer1; +$swapSecondaryContainer: $secondaryContainer; +$swapOnSecondaryContainer: $onSecondaryContainer; +$cpuOnLayer1: $onLayer1; +$cpuSecondaryContainer: $secondaryContainer; +$cpuOnSecondaryContainer: $onSecondaryContainer; +$musicOnLayer1: $onLayer1; +$musicSecondaryContainer: $secondaryContainer; +$musicOnSecondaryContainer: $onSecondaryContainer; + +$workspaceOnLayer1Inactive: $onLayer1Inactive; +$workspaceSecondaryContainer: $secondaryContainer; +$workspaceOnSecondaryContainer: $onSecondaryContainer; +$workspaceOnSurfaceVariant: $onSurfaceVariant; + diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss index 988dee7a..69262e7a 100644 --- a/.config/ags/scss/_lib_classes.scss +++ b/.config/ags/scss/_lib_classes.scss @@ -50,6 +50,10 @@ color: $onSurfaceVariant; } +.txt-onLayer1 { + color: $onLayer1; +} + .txt-shadow { text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69); margin: 10px; diff --git a/.config/ags/services/messages.js b/.config/ags/services/messages.js index 816813e8..ad84bad8 100644 --- a/.config/ags/services/messages.js +++ b/.config/ags/services/messages.js @@ -13,7 +13,7 @@ const FIRST_RUN_FILE_CONTENT = "Just a file to confirm that you have been greete const APP_NAME = "illogical-impulse"; const FIRST_RUN_NOTIF_TITLE = "Welcome!"; const FIRST_RUN_NOTIF_BODY = `Looks like this is your first run. For a list of keybinds, hit Super + /.`; - + export async function firstRunWelcome() { if (!fileExists(FIRST_RUN_PATH)) { Utils.writeFile(FIRST_RUN_FILE_CONTENT, FIRST_RUN_PATH) diff --git a/.config/ags/user_options.js b/.config/ags/user_options.js index 085f37ef..b23d80ed 100644 --- a/.config/ags/user_options.js +++ b/.config/ags/user_options.js @@ -3,7 +3,7 @@ const userConfigOptions = { // For every option, see ~/.config/ags/modules/.configuration/user_options.js (vscode users ctrl+click this file://./modules/.configuration/user_options.js) // Options listed in this file will override the default ones in the above file // Here's an example - 'keybinds': { + 'keybinds': { 'sidebar': { 'pin': "Ctrl+p", 'nextTab': "Ctrl+Page_Down",