update styling

style.scss

@@ -7,33 +7,48 @@ $surface1: #494d64;
 $surface2: #5b6078;
 
 $rosewater: #f4dbd6;
+$flamingo: #dd7878;
+$pink: #ea76cb;
+$mauve: #8839ef;
 
-* {
+:root {
-  color: $rosewater;
   font-family: JetBrainsMono Nerd Font;
+  color: $mauve;
 }
 
 button {
   all: initial;
+
+  font-family: inherit;
+
+  label:hover {
+    color: $base;
+    background: $rosewater;
+  }
 }
 
-window.Bar {
+label {
-  background: transparent;
+  all: initial;
-  font-weight: bold;
 
-  > centerbox {
+  font-family: inherit;
-    background: rgba($color: $base, $alpha: 0.75);
+  color: $mauve;
-    border-bottom: 1px solid $rosewater;
+  padding: 4px 12px;
+  background: $surface0;
+  border-radius: 8px;
+}
 
-    > box {
+.no-styles {
-      margin: 6px;
+  all: initial;
-      & > * {
+}
-        margin: 0 4px;
-      }
-    }
-  }
 
-  .Arch {
+.active {
+  label {
+    background: $rosewater;
+    color: $base;
+  }
+}
+
+.Arch {
   -gtk-icon-size: 24px;
   padding: 4px 8px 4px 8px;
   border-radius: 8px;
@@ -43,47 +58,20 @@ window.Bar {
     background: $rosewater;
     color: $base;
   }
-  }
+}
 
-  .Pywal {
+.Pywal {
+  label {
     font-size: 18px;
-    padding: 4px 18px 4px 12px;
+    padding: 6px 16px 6px 10px;
-    border-radius: 8px;
-    background: $surface0;
-
-    &:hover {
-      background: $rosewater;
-      color: $base;
-    }
   }
+}
 
-  .Tray > * {
+.Tray > * {
   margin: 0 4px;
-  }
+}
 
-  .Button {
+.WirePlumberMenu {
-    padding: 4px 12px;
-    border-radius: 8px;
-    background: $surface0;
-
-    &:hover {
-      background: $rosewater;
-      color: $base;
-    }
-  }
-
-  .Label {
-    padding: 4px 12px;
-    border-radius: 8px;
-    background: $surface0;
-  }
-
-  .Button-Active {
-    background: $rosewater;
-    color: $base;
-  }
-
-  .WirePlumberMenu {
   contents {
     all: initial;
   }
@@ -96,9 +84,20 @@ window.Bar {
     padding: 12px;
     border-radius: 8px;
     background: rgba($color: $base, $alpha: 0.9);
+  }
+}
 
+window.Bar {
+  background: transparent;
+
+  > centerbox {
+    background: rgba($color: $base, $alpha: 0.75);
+    border-bottom: 1px solid $rosewater;
+
+    > box {
+      margin: 6px;
       & > * {
-        margin: 2px 0;
+        margin: 0 4px;
       }
     }
   }

widget/Calendar.tsx

@@ -8,7 +8,6 @@ function Calendar() {
   return (
     <menubutton hexpand halign={Gtk.Align.END}>
       <label
-        cssClasses={["Button"]}
         cursor={Gdk.Cursor.new_from_name("pointer", null)}
         label={time().as((t) => ` ${t}`)}
         tooltip_text={date().as((d) => `󰸗  ${d}`)}

widget/Hyprland/client.tsx

@@ -6,6 +6,7 @@ const hyprland = Hyprland.get_default();
 function Client() {
   return (
     <label
+      cssClasses={["no-styles"]}
       label={bind(hyprland, "focused_client").as((fc) => fc.initialTitle)}
     />
   );

widget/Internet.tsx

@@ -23,7 +23,6 @@ function Internet() {
   return (
     <box>
       <label
-        cssClasses={["Label"]}
         label={bind(network, "wifi").as(
           (w) => `${icon(w.strength)} ${w.strength}%`,
         )}

widget/Memory.tsx

@@ -7,12 +7,7 @@ const Memory = function () {
     (value) => Number(value),
   );
 
-  return (
+  return <label label={bind(usage).as((usage) => ` ${usage.toFixed()}%`)} />;
-    <label
-      cssClasses={["Label"]}
-      label={bind(usage).as((usage) => `  ${usage.toFixed()} %`)}
-    />
-  );
 };
 
 export default Memory;

widget/SwayNC.tsx

@@ -37,7 +37,6 @@ const SwayNC = function () {
   return (
     <button
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
-      cssClasses={["Button"]}
       onClicked={() => exec("swaync-client -t -sw")}
       label={options().as((options) => Icon(options?.alt ?? "none"))}
     ></button>

widget/Tray.tsx

@@ -12,7 +12,7 @@ const Tray = function () {
   }
 
   return (
-    <box cssClasses={["Tray", "Label"]}>
+    <box cssClasses={["Tray"]}>
       {bind(trayItems).as((items) =>
         items.map((item) => {
           return (

widget/WirePlumber.tsx

@@ -30,7 +30,6 @@ const WirePlumber = function () {
           label={bind(defaultSpeaker, "volume").as(
             (volume) => `  ${Math.floor(volume * 100)}%`,
           )}
-          cssClasses={["Button"]}
           hasTooltip={true}
           tooltipText={bind(defaultSpeaker, "description").as(
             (description) => description,
@@ -41,8 +40,7 @@ const WirePlumber = function () {
             {speakers.map((speaker) => (
               <button
                 cssClasses={bind(speaker, "is_default").as((is_default) => [
-                  "Button",
+                  is_default ? "active" : "",
-                  is_default ? "Button-Active" : "",
                 ])}
                 cursor={Gdk.Cursor.new_from_name("pointer", null)}
                 onClicked={() => speaker.set_is_default(true)}