rewrite ui in hy, with python astal bindings

style/colors.scss

@@ -0,0 +1,31 @@
+$bg: #161616;
+$bg-alt-1: #262626;
+$bg-alt-2: #393939;
+
+$fg: #f2f4f8;
+
+$hl: #FF7EB6;
+$hl-alt-1: #33B1FF;
+$hl-alt-2: #42be65;
+
+$icon-color: #f2f4f8;
+$button-hover-color: #FF7EB6;
+
+$battery-dial-bg: #42be65;
+$battery-dial-fg: #161616;
+
+$volume-dial-bg: #33B1FF;
+$volume-dial-fg: #161616;
+
+$brightness-dial-bg: #33B1FF;
+$brightness-dial-fg: #161616;
+
+$ws-active: #FF7EB6;
+$ws-inactive: $bg;
+
+$mpd-progress-primary: #FF7Eb6;
+
+$resource-dial-fg-cpu: #FF7eb6;
+$resource-dial-fg-mem: #FF7eb6;
+$resource-dial-fg-tmp: #FF7eb6;
+$resource-dial-fg-fan: #FF7eb6;

style/mixins.scss

@@ -0,0 +1,27 @@
+@mixin dial($_fg, $_bg, $margin, $padding, $font-size, $icon-font-size) {
+  color: $_fg;
+  background-color: $_bg;
+  margin: $margin;
+  padding: $padding;
+  font-size: $font-size;
+
+  label, icon {
+    font-family: 'Symbols Nerd Font Mono';
+    font-size: $icon-font-size;
+    color: $icon-color;
+  }
+}
+
+@mixin bar-dial($_fg, $_bg) {
+  @include dial($_fg, $_bg, 0px, 0px, 5px, 16px)
+}
+
+@mixin panel-dial($_fg, $_bg) {
+  @include dial($_fg, $_bg, 0px, 10px, 8px, 32px);
+  margin-left: 10px;
+  border-radius: 10px;
+  .resource-dial {
+    min-width: 96px;
+    min-height: 96px;
+  }
+}

style/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss","widgets/bar.scss","colors.scss","mixins.scss","widgets/notifications.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE;;;AAKE;EACE,YATG;EAUH,YCVD;EDWC;EACA;;AAEA;EACE;EACA;EACA;EACA,kBCjBG;;ADmBH;EACE,kBCnBC;;ADsBH;EACE,kBCnBL;;ADyBD;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA,YClDC;;ADqDH;EACE;EACA,YC/Ba;;ADqCrB;EACE,YA/DK;EAgEL,YChEC;;ADkED;EACE;;AAEE;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA,YChFD;;ADmFD;EACE,YC9ED;;ADoFP;EACE;EACA;;AACA;EACE;EACA;EE/FN,ODYgB;ECXhB,kBDYgB;ECXhB,QAY0B;EAX1B,SAW+B;EAV/B,WAUoC;;AARpC;EACE;EACA,WAMuC;EALvC;;AF2FA;EACE,YCrGK;EDsGL;EACA;EACA;;AAGF;EACE;EACA,YC9GD;;ADgHC;EACE;EACA;;;AGhHJ;EACE;EACA;EACA,YFLD;;AEOC;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE,YFpBG;;AEsBH;EACE;EACA,kBFlBC;;AEsBL;EACE;;AAEA;EACE,YFzBC;;AE4BH;EACE,YF/BL","file":"style.css"}

style/style.scss

@@ -0,0 +1,9 @@
+* {
+  all: unset;
+}
+
+@import 'colors.scss';
+@import 'mixins.scss';
+
+@import './widgets/bar.scss';
+@import './widgets/notifications.scss';

style/widgets/bar.scss

@@ -0,0 +1,119 @@
+$height: 50px;
+
+bar {
+  background: transparent;
+}
+
+centerbox {
+  > box.left {
+    box.workspaces {
+      min-height: $height;
+      background: $bg;
+      padding: 5px;
+      padding-top: 15px;
+
+      box > button {
+        min-width: 10px;
+        min-height: 10px;
+        margin: 5px;
+        background-color: $bg-alt-1;
+
+        &.occupied {
+          background-color: $bg-alt-2;
+        }
+
+        &.focused {
+          background-color: $hl;
+        }
+      }
+
+    }
+
+    stack > box.player {
+      min-width: 250px;
+      min-height: 60px;
+      background-position: 50% 50%;
+      background-size: cover;
+      border: 4px solid #161616;
+
+      > box {
+        > button {
+          margin: 3px 10px;
+        }
+      }
+
+      > .media-progress {
+        min-width: 242px;
+        min-height: 2px;
+        background: transparent;
+
+        trough {
+          min-height: 2px;
+          background: $bg-alt-1;
+        }
+
+        highlight {
+          min-height: 2px;
+          background: $mpd-progress-primary;
+        }
+      }
+    }
+  }
+
+  > box.right {
+    min-height: $height;
+    background: $bg;
+
+    box.sliders {
+      margin: 5px;
+      box.volume-slider {
+        > button {
+          font-size: 20px; 
+          margin: 5px;
+        }
+        
+        > .volume-slider { /* selecting this as `slider` doesn't work, for some reason.*/
+          min-width: 120px;
+          min-height: 10px;
+
+          & trough {
+            min-height: 10px;
+            min-width: 120px;
+            background: $bg-alt-1;
+          }
+
+          & highlight {
+            background: $hl-alt-1;
+          }
+        }
+      } 
+    }
+
+    .battery-container {
+      padding-left: 10px;
+      padding-right: 10px;
+      .battery-dial {
+        min-width: 40px;
+        min-height: 40px;
+        @include bar-dial($battery-dial-bg, $battery-dial-fg);
+      }    
+    }  
+
+    separator {
+      background: $bg-alt-1;
+      padding: 1px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    box.clock {
+      margin: 10px;
+      background: $bg;
+      
+      .datetime {
+        margin: 1px;
+        font-size: 10pt;
+      }
+    }
+  }
+}

style/widgets/notifications.scss

@@ -0,0 +1,44 @@
+.notifications {
+  > * {
+    > button > box {
+      margin: 10px 15px;
+      border: 1px solid $fg;
+      background: $bg;
+
+      .title {
+        font-family: 'tewi';
+        font-size: 22px;
+        min-width: 16rem;
+      }
+
+      .icon {
+        min-width: 64px;
+        min-height: 64px;
+        margin: 5px;
+        font-size: 58px;
+      }
+
+      .timeout-bar {
+        background: $bg-alt-1;
+
+        > trough > progress {
+          background-image: none;
+          background-color: $hl-alt-1;
+        }
+      }
+
+      .urgency-indicator {
+        min-width: 25px;
+
+        &.NORMAL, &.LOW {
+          background: $hl-alt-2;
+        }
+
+        &.CRITICAL {
+          background: $hl;
+        }
+      }
+    }
+  }
+}
+