✨ ags,hypr: initial code!

ags/style/_bar.scss

@@ -0,0 +1,47 @@
+@use "./_wal";
+
+.bar-container {
+  padding: 6px;
+  padding-bottom: 0px;
+  .bar-centerbox > * {
+    background: rgba($color: wal.$background, $alpha: .6);
+    padding: 6px;
+    border-radius: 18px;
+  }
+}
+
+label {
+  font-size: 12px;
+  font-family: "Cantarell", "Noto Sans";
+  font-weight: 500;
+}
+
+.workspaces {
+  & button {
+    transition: 80ms linear;
+    padding: 0 12px;
+    background: wal.$color1;
+    margin: 3px 2px;
+
+    &.focus {
+      background: wal.$foreground;
+      padding: 0 20px;
+    }
+  }
+}
+
+.logo button {
+  $padding-inline: 12px;
+  padding-left: $padding-inline;
+  padding-right: calc($padding-inline + 3.9px);
+
+  & label {
+    font-size: 14px;
+  }
+}
+
+.cc-toggle button {
+  $padding-inline: 12px;
+  padding-left: $padding-inline;
+  padding-right: calc($padding-inline + 2px);
+}

ags/style/_wal.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/joaov/wallpapers/Garden Kita.png";
+
+// Special
+$background: #101212;
+$foreground: #c3c3c3;
+$cursor: #c3c3c3;
+
+// 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;