no clue

bar/bar.yuck

@@ -12,7 +12,7 @@
 
 (defwidget bar-left []
   (box :class "bar-left" :space-evenly false :halign "start"
-    (bat) (cpu) (temp) (mem) (disk)))
+    (bat) (sep) (cpu) (sep) (temp) (sep) (mem) (sep) (disk)))
 
 (defwidget bar-center [monitor]
   (box :class "bar-center" :space-evenly false
@@ -20,5 +20,5 @@
 
 (defwidget bar-right []
   (box :class "bar-right" :space-evenly false :halign "end"
-    (brightness) (vol) (net) (date) (time)))
+    (brightness) (vol) (net) (sep) (date) (time)))
 

bar/widget.yuck

@@ -50,13 +50,16 @@
   (box :class "text mod"
     poll))
 
-(defwidget circle [value ?icon class]
-  (box :class "mod"
+(defwidget circle [value icon class]
+  (box :class "mod circle-progress"
+    (label :text icon
+           :class "${class}")
       (circular-progress :value value
-                       :width 30
-                       :class "circle-bar ${class}"
+                         :width 25
+                         :class "circle-bar ${class} bg"
                          :thickness 4
-                       :start-at 75
-      (label :text {icon ?: ""}
-             :class "circle ${class}"))))
+                         :start-at 75)))
+
+(defwidget sep []
+  (label :text "" :class "sep"))
 

bar/widgets/info.yuck

@@ -6,7 +6,7 @@
 (defwidget vol []
   (hover-metric :icon {vol < 33 ? "" : vol < 66 ? "" : "󰕾"}
                 :value vol
-                :class "green"
+                :class "purple"
                 :revealname "vol_reveal"
                 :reveal vol_reveal
                 :onchange "wpctl set-volume @DEFAULT_SINK@ {}% && eww update vol={}"))
@@ -15,7 +15,7 @@
 (defwidget brightness []
   (hover-metric :icon ""
                 :value bright
-                :class "yellow"
+                :class "magenta"
                 :revealname "bright_reveal"
                 :reveal bright_reveal
                 :onchange "light -S {}%"))
@@ -24,7 +24,7 @@
 (defwidget net []
   (hover-text :icon " "
               :value net
-              :class "cyan"
+              :class "blue"
               :revealname "net_reveal"
               :reveal net_reveal))
 

bar/widgets/sys.yuck

@@ -1,21 +1,21 @@
 (defwidget cpu []
   (circle :value {EWW_CPU.avg}
           :icon ""
-          :class "cyan"))
+          :class "blue"))
 
 (defwidget temp []
   (circle :value {EWW_TEMPS.CORETEMP_PACKAGE_ID_0}
           :icon ""
-          :class "magenta"))
+          :class "purple"))
 
 (defwidget mem []
   (circle :value {EWW_RAM.used_mem_perc}
           :icon ""
-          :class "yellow"))
+          :class "magenta"))
 
 (defwidget disk []
-  (circle :value {round((1 - (EWW_DISK["/"].free / EWW_DISK["/"].total)) * 100, 0)}
-          :icon ""
+  (circle :value "${round((1 - (EWW_DISK["/"].free / EWW_DISK["/"].total)) * 100, 0)}"
+          :icon ""
           :class "red"))
 
 (defpoll bat_stat :interval "30s" "cat /")
@@ -24,9 +24,9 @@
   (circle :value {EWW_BATTERY.BAT0.capacity}
           ;; :icon "⏻"
           :icon {
-            EWW_BATTERY.BAT0.status == "Charging" ? "󱐋"
+            EWW_BATTERY.BAT0.status == "Charging" ? "󰂄"
             : EWW_BATTERY.BAT0.status == "Not charging" ? ""
-            : "󰁹"
+            : EWW_BATTERY.BAT0.capacity < 15 ? "󰂃" : "󰁹"
           }
-          :class "green")))
+          :class "cyan")))
 

bar/widgets/wss.yuck

@@ -3,9 +3,9 @@
 ;; (deflisten wslist1
 ;;   "scripts/getwsss DP-")
 (deflisten wslist0
-  "scripts/getwss 0")
+  "scripts/wmws 0")
 (deflisten wslist1
-  "scripts/getwss 1")
+  "scripts/wmws 1")
 (defwidget workspaces [monitor]
   (box :class "workspaces"
     (for entry in {monitor == 0 ? wslist0 : wslist1}

eww.scss

@@ -9,30 +9,39 @@ $magenta: #F5C2E7;
 $cyan: #94E2D5;
 
 $magenta3: #e6aaee;
+$black3: #686B80;
 $purple: #b0b0e8;
 
 $text: $white;
 $mod-bg: #505060;
 $trough: #464666;
-$bg: rgba(#1e1e2e, .7);
+$bg: #2e2e3e;
 $hover-bg: $black;
 
+$bg-darken: 40%;
+$bg-desat: 50%;
+
+
 * {
   all: unset;
 }
 
 .bar {
-  margin-top: 10px;
+  margin-top: 15px;
   color: $text;
   font-size: 20px;
-  font-family: "Symbols Nerd Font", "Comic Code Ligatures";
+  font-family: "Symbols Nerd Font Mono", "Comic Code Ligatures";
   margin-left: 15px;
   margin-right: 15px;
 }
 
+.bar-right, .bar-left, .bar-center {
+    background-color: rgba($bg, 0.8);
+    border-radius: 20px;
+}
+
 .mod {
-  padding-left: 10px;
-  padding-right: 10px;
+  margin: 5px 10px;
 }
 
 .metric scale trough highlight {
@@ -48,83 +57,91 @@ $hover-bg: $black;
   margin-left: 10px;
 }
 
-.workspaces button:hover {
-  background-color: $hover-bg;
-}
-
 .workspaces {
   // un... un bro momento
-  .id1 {
-    font-size: 15px;
-  }
-  .id2 {
-    font-size: 16px;
-  }
-  .id3 {
-    font-size: 15px;
-  }
-  .id6 {
-    font-size: 13px;
-  }
-  .id7 {
-    font-size: 14px;
-  }
-  .id8 {
-    font-size: 15px;
-  }
-
   button {
-    padding: 0 7px;
-    margin: 0 3px;
-    border-radius: 50%;
-    color: $text;
-    border: 2px solid;
-    border-color: $black2;
+    padding: 0 10px;
+    color: $black3;
+  }
+  button:hover {
+    color: $black
   }
   button.focused {
-    border-color: $magenta3;
-    color: $purple;
+    color: $magenta;
   }
   button.urgent {
-    background-color: $magenta;
-    color: $black;
+    color: $yellow;
   }
 }
 
+.sep {
+    font-size: 10px;
+    color: $black2;
+}
+
 .circle {
-  font-size: 14px;
+  font-size: 6px;
   margin: 8px;
 }
 
+.circle-progress {
+  border-radius: 20px;
+}
+
+.circle-bar {
+  background-color: $trough;
+  margin-left: 5px;
+}
+
 .red {
   color: $red;
 }
 
+.red.bg {
+  background-color: desaturate(darken($red, $bg-darken), $bg-desat);
+}
+
 .green {
   color: $green;
 }
 
+.green.bg {
+  background-color: desaturate(darken($green, $bg-darken), $bg-desat);
+}
+
 .yellow {
   color: $yellow;
 }
 
+.yellow.bg {
+  background-color: desaturate(darken($yellow, $bg-darken), $bg-desat);
+}
+
 .blue {
   color: $blue;
 }
 
+.blue.bg {
+  background-color: desaturate(darken($blue, $bg-darken), $bg-desat);
+}
+
 .magenta {
   color: $magenta;
 }
 
+.magenta.bg {
+  background-color: desaturate(darken($magenta, $bg-darken), $bg-desat);
+}
+
 .cyan {
   color: $cyan;
 }
 
+.cyan.bg {
+  background-color: desaturate(darken($cyan, $bg-darken), $bg-desat);
+}
+
 .purple {
   color: $purple;
 }
 
-.circle-bar {
-  background-color: $bg;
-}
-

eww.yuck

@@ -1,5 +1,14 @@
 (include "bar/bar.yuck")
 
+(defwindow bar
+  :exclusive true
+  :geometry (geometry :x "0%"
+                      :y "0%"
+                      :width "100%"
+                      :height "30px"
+                      :anchor "top center")
+  (bar :monitor 0))
+
 (defwindow bar-eDP
   :monitor 0
   :exclusive true