✨ ags(bar): add lots of widgets ❤️

ags/style/_bar.scss

@@ -1,27 +1,67 @@
-@use "./_wal";
+@use "./wal";
+@use "./mixins";
 
 .bar-container {
   padding: 6px;
   padding-bottom: 0px;
-  .bar-centerbox > * {
+
+  & * {
+    all: unset;
+    transition: 120ms linear;
+
+    menu {
+      padding: 4px;
+      background: wal.$background;
+      border-radius: 14px;
+
+      & > separator {
+        margin: 0 4px;
+        color: wal.$background;
+      }
+
+      & > menuitem {
+        padding: 8px 0px;
+        border-radius: 10px;
+        font-size: 12px;
+        font-weight: 600;
+
+        &:hover {
+          background: wal.$color1;
+        }
+      }
+    }
+
+    button {
+      padding: 6px 8px;
+      border-radius: 12px;
+
+      &:hover {
+        background: wal.$color1;
+      }
+    }
+  }
+  & > .bar-centerbox > * {
     background: rgba($color: wal.$background, $alpha: .6);
     padding: 6px;
     border-radius: 18px;
   }
 }
 
-label {
+.bar-container label {
   font-size: 12px;
   font-family: "Cantarell", "Noto Sans";
   font-weight: 500;
 }
 
 .workspaces {
+  padding: 2px 2px;
   & button {
+    all: unset;
+    border-radius: 16px;
     transition: 80ms linear;
     padding: 0 12px;
     background: wal.$color1;
-    margin: 3px 2px;
+    margin: 1px 2px;
 
     &.focus {
       background: wal.$foreground;
@@ -30,6 +70,30 @@ label {
   }
 }
 
+.focused-window {
+  padding: 0 6px;
+
+  & > .icon {
+    margin-right: 6px;
+  }
+
+  & > .text-content {
+    & > .class {
+      font-size: 9px;
+      font-weight: 500;
+      font-family: monospace;
+      color: adjust-hue($color: wal.$foreground, $degrees: 100deg);
+      margin-top: 1px;
+    }
+    
+    & > .title {
+      font-size: 11.5px;
+      font-weight: 500;
+      margin-top: -2px;
+    }
+  }
+}
+
 .logo button {
   $padding-inline: 12px;
   padding-left: $padding-inline;
@@ -40,6 +104,39 @@ label {
   }
 }
 
+.tray {
+  padding: 0 6px;
+
+  & .item {
+    all: unset;
+
+    &:hover {
+      background: none;
+    }
+
+    margin: 0 6px;
+    padding: 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.audio {
+  & .sink .icon {
+    margin-right: 6px;
+  }
+
+  & .source .icon {
+    margin-right: 4px;
+  }
+}
+
 .cc-toggle button {
   $padding-inline: 12px;
   padding-left: $padding-inline;

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Garden Kita.png";
+$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png";
 
 // Special
-$background: #101212;
-$foreground: #c3c3c3;
-$cursor: #c3c3c3;
+$background: #0a0a0c;
+$foreground: #c1c1c2;
+$cursor: #c1c1c2;
 
 // Colors
-$color0: #101212;
-$color1: #59662a;
-$color2: #517047;
-$color3: #87863c;
-$color4: #707b48;
-$color5: #4b6266;
-$color6: #84876e;
-$color7: #8e9898;
-$color8: #596d6d;
-$color9: #778839;
-$color10: #6C965F;
-$color11: #B4B350;
-$color12: #96A460;
-$color13: #658388;
-$color14: #B0B493;
-$color15: #c3c3c3;
+$color0: #0a0a0c;
+$color1: #935d6d;
+$color2: #967e84;
+$color3: #ac8486;
+$color4: #bcae7a;
+$color5: #a49c9c;
+$color6: #bcb79c;
+$color7: #8a8a96;
+$color8: #565669;
+$color9: #C57C92;
+$color10: #C9A9B0;
+$color11: #E6B1B3;
+$color12: #FBE8A3;
+$color13: #DBD1D0;
+$color14: #FBF5D1;
+$color15: #c1c1c2;