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

separate scss color vars for bar elements (1) (#327)

Browse Source
This commit is contained in:
end-4
2024-03-14 12:06:33 +07:00
parent ee7fdc9ab4
commit d3761d1d0d
7 changed files with 191 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/ags/modules/bar/normal/music.js
+33 -32
View File
@@ -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({ const resourceCircProg = AnimatedCircProg({
className: 'bar-batt-circprog', className: `${circprogClassName}`,
vpack: 'center', vpack: 'center',
hpack: 'center', hpack: 'center',
}); });
@@ -47,7 +47,7 @@ const BarResource = (name, icon, command) => {
children: [Overlay({ children: [Overlay({
child: Box({ child: Box({
vpack: 'center', vpack: 'center',
className: 'bar-batt', className: `${iconClassName}`,
homogeneous: true, homogeneous: true,
children: [ children: [
MaterialIcon(icon, 'small'), MaterialIcon(icon, 'small'),
@@ -57,10 +57,10 @@ const BarResource = (name, icon, command) => {
})] })]
}); });
const resourceLabel = Label({ const resourceLabel = Label({
className: 'txt-smallie txt-onSurfaceVariant', className: `txt-smallie ${textClassName}`,
}); });
const widget = Box({ const widget = Box({
className: 'spacing-h-4 txt-onSurfaceVariant', className: `spacing-h-4 ${textClassName}`,
children: [ children: [
resourceProgress, resourceProgress,
resourceLabel, resourceLabel,
@@ -135,8 +135,8 @@ export default () => {
}); });
const trackTitle = Label({ const trackTitle = Label({
hexpand: true, hexpand: true,
className: 'txt-smallie txt-onSurfaceVariant', className: 'txt-smallie bar-music-txt',
truncate: 'end', truncate: 'end',
maxWidthChars: 10, // Doesn't matter, just needs to be non negative maxWidthChars: 10, // Doesn't matter, just needs to be non negative
setup: (self) => self.hook(Mpris, label => { setup: (self) => self.hook(Mpris, label => {
const mpris = Mpris.getPlayer(''); const mpris = Mpris.getPlayer('');
@@ -178,31 +178,32 @@ export default () => {
onScrollDown: () => execAsync(CUSTOM_MODULE_SCROLLDOWN_SCRIPT).catch(print), onScrollDown: () => execAsync(CUSTOM_MODULE_SCROLLDOWN_SCRIPT).catch(print),
}) })
}); });
} else { } else return BarGroup({
return BarGroup({ child: Box({
child: Box({ children: [
children: [ BarResource('RAM Usage', 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
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({ Revealer({
revealChild: true, revealChild: true,
transition: 'slide_left', transition: 'slide_left',
transitionDuration: userOptions.animations.durationLarge, transitionDuration: userOptions.animations.durationLarge,
child: Box({ child: Box({
className: 'spacing-h-10 margin-left-10', className: 'spacing-h-10 margin-left-10',
children: [ children: [
BarResource('Swap Usage', 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`), 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}'`), '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); setup: (self) => self.hook(Mpris, label => {
}), const mpris = Mpris.getPlayer('');
}) self.revealChild = (!mpris);
], }),
}) })
}); ],
} })
});
} }
return EventBox({ return EventBox({
onScrollUp: (self) => switchToRelativeWorkspace(self, -1), onScrollUp: (self) => switchToRelativeWorkspace(self, -1),
.config/ags/modules/bar/normal/system.js
+4 -4
View File
@@ -30,21 +30,21 @@ const BatBatteryProgress = () => {
const BarClock = () => Widget.Box({ const BarClock = () => Widget.Box({
vpack: 'center', vpack: 'center',
className: 'spacing-h-4 txt-onSurfaceVariant bar-clock-box', className: 'spacing-h-4 bar-clock-box',
children: [ children: [
Widget.Label({ Widget.Label({
className: 'bar-clock', className: 'bar-time',
label: GLib.DateTime.new_now_local().format(userOptions.time.format), label: GLib.DateTime.new_now_local().format(userOptions.time.format),
setup: (self) => self.poll(userOptions.time.interval, label => { setup: (self) => self.poll(userOptions.time.interval, label => {
label.label = GLib.DateTime.new_now_local().format(userOptions.time.format); label.label = GLib.DateTime.new_now_local().format(userOptions.time.format);
}), }),
}), }),
Widget.Label({ Widget.Label({
className: 'txt-norm', className: 'txt-norm txt-onLayer1',
label: '•', label: '•',
}), }),
Widget.Label({ Widget.Label({
className: 'txt-smallie', className: 'txt-smallie bar-date',
label: GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong), label: GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong),
setup: (self) => self.poll(userOptions.time.dateInterval, (label) => { setup: (self) => self.poll(userOptions.time.dateInterval, (label) => {
label.label = GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong); label.label = GLib.DateTime.new_now_local().format(userOptions.time.dateFormatLong);
.config/ags/scss/_bar.scss
+109 -84
View File
@@ -1,12 +1,8 @@
// Made to be pixel-perfect with 11pt font size // Made to be pixel-perfect with 11pt font size
// 1rem = 11pt = 14.6666666667px // 1rem = 11pt = 14.6666666667px
$black: black;
$white: white;
$bar_ws_width: 1.774rem; $bar_ws_width: 1.774rem;
$bar_ws_width_focus: 0.614rem; $bar_ws_width_focus: 0.614rem;
$bar_ws_width_focus_active: 2.045rem; $bar_ws_width_focus_active: 2.045rem;
$bar_subgroup_bg: $surfaceVariant;
@mixin bar-group-rounding { @mixin bar-group-rounding {
@include small-rounding; @include small-rounding;
@@ -17,12 +13,12 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.bar-bg { .bar-bg {
background-color: $t_background; background-color: $layer0;
min-height: 2.727rem; min-height: 2.727rem;
} }
.bar-bg-focus { .bar-bg-focus {
background-color: $t_background; background-color: $layer0;
min-height: 1.364rem; min-height: 1.364rem;
} }
@@ -39,7 +35,7 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.bar-group { .bar-group {
background-color: $l_l_t_surfaceVariant; background-color: $layer1;
} }
.bar-group-pad { .bar-group-pad {
@@ -88,70 +84,57 @@ $bar_subgroup_bg: $surfaceVariant;
border-bottom-right-radius: 1.364rem; border-bottom-right-radius: 1.364rem;
} }
.bar-sidemodule {
min-width: 26rem;
}
.bar-ws-width { .bar-ws-width {
min-width: 18.341rem; min-width: 18.341rem;
} }
.bar-ws { .bar-ws {
min-width: $bar_ws_width; min-width: $bar_ws_width;
color: mix($onBackground, $background, 40%); color: $workspaceOnLayer1Inactive;
@if $darkmode ==true {
color: mix($onBackground, $background, 45%);
}
} }
.bar-ws-active { .bar-ws-active {
background-color: $secondaryContainer; background-color: $workspaceSecondaryContainer;
color: $onSecondaryContainer; color: $workspaceOnSecondaryContainer;
} }
.bar-ws-occupied { .bar-ws-occupied {
background-color: $bar_subgroup_bg; background-color: $layer2;
color: $onSurfaceVariant; color: $workspaceOnSurfaceVariant;
} }
// Focus is the bar mode name, not the workspace state! // Focus is the bar mode name, not the workspace state!
.bar-ws-focus { .bar-ws-focus {
background-color: $bar_subgroup_bg; background-color: $layer2;
min-width: $bar_ws_width_focus; min-width: $bar_ws_width_focus;
} }
.bar-ws-focus-active { .bar-ws-focus-active {
min-width: $bar_ws_width_focus_active; min-width: $bar_ws_width_focus_active;
background-color: $onBackground; background-color: $layer2;
} }
.bar-ws-focus-occupied { .bar-ws-focus-occupied {
background-color: mix($onBackground, $background, 40%); background-color: $layer2;
@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;
} }
.bar-clock-box { .bar-clock-box {
margin: 0rem 0.682rem; margin: 0rem 0.682rem;
} }
.bar-clock { .bar-time {
@include titlefont; @include titlefont;
font-size: 1.2727rem; font-size: 1.2727rem;
color: $timeOnLayer1;
} }
.bar-date { .bar-date {
@include titlefont; color: $dateOnLayer1;
font-size: 1rem;
color: $onBackground;
} }
.bar-batt { .bar-batt {
@@ -164,20 +147,6 @@ $bar_subgroup_bg: $surfaceVariant;
color: $onSecondaryContainer; 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 { .bar-batt-circprog {
@include fluent_decel_long; @include fluent_decel_long;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
@@ -192,9 +161,79 @@ $bar_subgroup_bg: $surfaceVariant;
color: $errorContainer; color: $errorContainer;
} }
.bar-batt-circprog-full {
// background-color: $successContainer; .bar-batt-low {
// color: $onSuccessContainer; 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 { .bar-music-playstate {
@@ -202,8 +241,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: $musicSecondaryContainer;
color: $onSecondaryContainer; color: $musicOnSecondaryContainer;
} }
.bar-music-circprog { .bar-music-circprog {
@@ -211,16 +250,16 @@ $bar_subgroup_bg: $surfaceVariant;
min-width: 0.068rem; // line width min-width: 0.068rem; // line width
min-height: 1.636rem; min-height: 1.636rem;
padding: 0rem; padding: 0rem;
background-color: $secondaryContainer; background-color: $musicSecondaryContainer;
color: $onSecondaryContainer; color: $musicOnSecondaryContainer;
} }
.bar-music-playstate-playing { .bar-music-playstate-playing {
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: $musicSecondaryContainer;
color: $onSecondaryContainer; color: $musicOnSecondaryContainer;
} }
.bar-music-playstate-txt { .bar-music-playstate-txt {
@@ -228,6 +267,10 @@ $bar_subgroup_bg: $surfaceVariant;
@include icon-material; @include icon-material;
} }
.bar-music-txt {
color: $musicOnLayer1;
}
.bar-music-cover { .bar-music-cover {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -240,11 +283,6 @@ $bar_subgroup_bg: $surfaceVariant;
min-width: 34.091rem; 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 { .bar-music-hide-false {
@include menu_decel; @include menu_decel;
transition-duration: 100ms; transition-duration: 100ms;
@@ -263,7 +301,7 @@ $bar_subgroup_bg: $surfaceVariant;
} }
.corner { .corner {
background-color: $t_background; background-color: $layer0;
@include large-rounding; @include large-rounding;
} }
@@ -275,7 +313,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: $windowtitleOnLayer1Inactive;
} }
.bar-space-button { .bar-space-button {
@@ -287,15 +325,6 @@ $bar_subgroup_bg: $surfaceVariant;
padding: 0rem 0.682rem; 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 { .bar-space-button-leftmost {
box { box {
margin: 0rem 0.682rem; margin: 0rem 0.682rem;
@@ -327,12 +356,8 @@ $bar_subgroup_bg: $surfaceVariant;
padding: 0rem 0.614rem; padding: 0rem 0.614rem;
} }
.bar-statusicons-hover {
background-color: mix($t_background, $t_onBackground, 90%);
}
.bar-statusicons-active { .bar-statusicons-active {
background-color: mix($t_background, $t_onBackground, 80%); background-color: $layer0Active;
} }
.bar-util-btn { .bar-util-btn {
@@ -340,16 +365,17 @@ $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: $layer2;
color: $onLayer2;
} }
.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: $layer2Hover;
} }
.bar-util-btn:active { .bar-util-btn:active {
background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%); background-color: $layer2Active;
} }
.bar-bluetooth-device { .bar-bluetooth-device {
@@ -358,7 +384,6 @@ $bar_subgroup_bg: $surfaceVariant;
min-height: 1.032rem; min-height: 1.032rem;
min-width: 1.032rem; min-width: 1.032rem;
font-size: 1.032rem; font-size: 1.032rem;
background-color: $surface; color: $onLayer0;
color: $onSurface;
padding: 0.205rem 0.341rem; padding: 0.205rem 0.341rem;
} }
.config/ags/scss/_colors.scss
+39 -1
View File
@@ -116,6 +116,8 @@ $hovercolor: mix($t_surface, $t_onSurface, 50%);
$activecolor: mix($t_surface, $t_onSurface, 30%); $activecolor: mix($t_surface, $t_onSurface, 30%);
$subtext: mix($onBackground, $background, 70%); $subtext: mix($onBackground, $background, 70%);
$actiontext: mix($onBackground, $background, 85%); $actiontext: mix($onBackground, $background, 85%);
$black: black;
$white: white;
// Terminal colors // Terminal colors
$termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%); $termbg: mix($t_surfaceVariant, $t_onSurfaceVariant, 80%);
@@ -127,4 +129,40 @@ $term3: $onPrimaryContainer;
$term4: $onPrimaryContainer; $term4: $onPrimaryContainer;
$term5: $onSecondaryContainer; $term5: $onSecondaryContainer;
$term6: $primary; $term6: $primary;
$term7: $onSurfaceVariant; $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;
.config/ags/scss/_lib_classes.scss
+4
View File
@@ -50,6 +50,10 @@
color: $onSurfaceVariant; color: $onSurfaceVariant;
} }
.txt-onLayer1 {
color: $onLayer1;
}
.txt-shadow { .txt-shadow {
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69); text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
margin: 10px; margin: 10px;
.config/ags/services/messages.js
+1 -1
View File
@@ -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 APP_NAME = "illogical-impulse";
const FIRST_RUN_NOTIF_TITLE = "Welcome!"; const FIRST_RUN_NOTIF_TITLE = "Welcome!";
const FIRST_RUN_NOTIF_BODY = `Looks like this is your first run. For a list of keybinds, hit <span foreground="#c06af1" font_weight="bold">Super + /</span>.`; const FIRST_RUN_NOTIF_BODY = `Looks like this is your first run. For a list of keybinds, hit <span foreground="#c06af1" font_weight="bold">Super + /</span>.`;
export async function firstRunWelcome() { export async function firstRunWelcome() {
if (!fileExists(FIRST_RUN_PATH)) { if (!fileExists(FIRST_RUN_PATH)) {
Utils.writeFile(FIRST_RUN_FILE_CONTENT, FIRST_RUN_PATH) Utils.writeFile(FIRST_RUN_FILE_CONTENT, FIRST_RUN_PATH)
.config/ags/user_options.js
+1 -1
View File
@@ -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) // 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 // Options listed in this file will override the default ones in the above file
// Here's an example // Here's an example
'keybinds': { 'keybinds': {
'sidebar': { 'sidebar': {
'pin': "Ctrl+p", 'pin': "Ctrl+p",
'nextTab': "Ctrl+Page_Down", 'nextTab': "Ctrl+Page_Down",