💄 some eww ricing

hosts/neodymium/home/wayland/eww/eww.scss

@@ -1,31 +1,90 @@
 * {
   all: unset; // Unsets everything so you can style everything from scratch
+  font-family: "FiraCode Nerd Font";
 }
 
 // Global Styles
+
+@import "mocha.scss";
+
 .bar {
-  background-color: #3a3a3a;
-  color: #b0b4bc;
-  padding: 10px;
+  background-color: $mantle;
+  color: $text;
+}
+
+// Workspace Styles
+
+$colors: $rosewater, $flamingo, $pink, $mauve, $red, $maroon, $peach, $yellow, $green, $teal;
+
+.workspace {
+
+  @for $i from 1 through 10 {
+    &.entry-#{$i} {
+      .text {
+        opacity: 0.3;
+        padding: 0 5px;
+        color: $crust;
+        background-color: nth($colors, $i);
+
+        &.active {
+          opacity: 1;
+        }
+
+        &.empty {
+          color: transparent;
+        }
+      }
+
+      .seperator {
+        opacity: 0.3;
+        font-size: 19px;
+        margin-top: -1px;
+
+        &.active {
+          opacity: 1;
+        }
+
+        &.up {
+
+          @if $i ==10 {
+            color: nth($colors, 10);
+          }
+
+          @else {
+            color: nth($colors, $i);
+          }
+        }
+
+        &.down {
+          margin-left: -12px;
+
+          @if $i ==10 {
+            color: transparent;
+          }
+
+          @else {
+            color: nth($colors, $i + 1);
+          }
+        }
+      }
+    }
+  }
 }
 
 // Styles on classes (see eww.yuck for more information)
 
 .sidestuff slider {
   all: unset;
-  color: #ffd5cd;
 }
 
 .metric scale trough highlight {
   all: unset;
-  background-color: #D35D6E;
-  color: #000000;
+  background-color: $blue;
   border-radius: 10px;
 }
 
 .metric scale trough {
   all: unset;
-  background-color: #4e4e4e;
   border-radius: 50px;
   min-height: 3px;
   min-width: 50px;
@@ -35,21 +94,17 @@
 
 .metric scale trough highlight {
   all: unset;
-  background-color: #D35D6E;
+  background-color: #5d96d3;
   color: #000000;
   border-radius: 10px;
 }
 
 .metric scale trough {
   all: unset;
-  background-color: #4e4e4e;
+  background-color: $surface0;
   border-radius: 50px;
   min-height: 3px;
   min-width: 50px;
   margin-left: 10px;
   margin-right: 20px;
 }
-
-.workspace-entry.active {
-  color: #D35D6E;
-}

hosts/neodymium/home/wayland/eww/eww.yuck

@@ -1,3 +1,21 @@
+(defwindow bar
+  :monitor 0
+  :windowtype "dock"
+  :exclusive true
+  :geometry (geometry
+    :x "0%"
+    :y "0%"
+    :width "100%"
+    :height "22px"
+    :anchor "top center"
+  )
+  :reserve (struts
+    :side "top"
+    :distance "4%"
+  )
+  (bar)
+)
+
 (defwidget bar []
   (centerbox
     :orientation "h"
@@ -7,7 +25,6 @@
   )
 )
 
-
 (defwidget sidestuff []
   (box
     :class "sidestuff"
@@ -49,7 +66,6 @@
   (eventbox :class "workspaces-widget"
     (box
       :space-evenly false
-      :spacing 10
       (label
         :text "${workspaces}${active_workspace}"
         :visible false
@@ -58,16 +74,27 @@
         (eventbox
           :onclick "hyprctl dispatch workspace ${workspace.id}"
           (box
-            :class "workspace-entry ${workspace.id == active_workspace ? "active" : ""} ${workspace.windows > 0 ? "occupied" : "empty"}"
+            :class "workspace entry-${workspace.id}"
+            :space-evenly false
             (label
+              :class "text ${workspace.id == active_workspace ? "active" : "unactive"} ${workspace.windows > 0 ? "occupied" : "empty"}"
               :text "${workspace.id}"
             )
+            (label
+              :class "seperator up ${workspace.id == active_workspace  ? "active" : "unactive"}"
+              :text ""
+            )
+            (label
+              :class "seperator down ${workspace.id == active_workspace - 1  ? "active" : "unactive"}"
+              :text ""
             )
           )
         )
       )
     )
   )
+)
+
 
 
 (defwidget metric [label value onchange]
@@ -99,21 +126,3 @@
   :interval "1s"
   "date '+%Y-%m-%d %H:%M:%S'"
 )
-
-(defwindow bar
-  :monitor 0
-  :windowtype "dock"
-  :exclusive true
-  :geometry (geometry
-    :x "0%"
-    :y "0%"
-    :width "100%"
-    :height "22px"
-    :anchor "top center"
-  )
-  :reserve (struts
-    :side "top"
-    :distance "4%"
-  )
-  (bar)
-)

hosts/neodymium/home/wayland/eww/mocha.scss

@@ -0,0 +1,26 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;