chore: control panel widget styles

hypr-configs/hyprland/eww/assets/scss/_global.scss

@@ -1,25 +1,30 @@
-@import "mixin";
+@import "tokens";
 
 .widget {
-  @include widget;
+  padding: get-token(padding, small);
+  margin: get-token(margin, small);
+  border-radius: get-token(border-radius);
+  background-color: $surface0;
 }
 
 .panel-widget {
-  @include widget;
+  @extend .widget;
 
-  margin: 6px;
+  padding: get-token(padding);
+  margin: get-token(margin, large);
+  border-radius: get-token(border-radius);
 }
 
 .icon {
-  @include icon;
+  font-size: get-token(font-sizes);
+  font-family: "Symbols Nerd Font";
 }
 
 .popup {
-  @include popup;
-}
-
-.border {
-  border: 2px white solid;
+  padding: get-token(padding, small);
+  border-radius: get-token(border-radius);
+  margin: get-token(margin);
+  background-color: $surface1;
 }
 
 button {

hypr-configs/hyprland/eww/assets/scss/_mixin.scss

@@ -1,20 +0,0 @@
-@import "tokens";
-
-@mixin widget() {
-  padding: get-token(padding, small);
-  margin: get-token(margin);
-  border-radius: get-token(border-radius);
-  background-color: $surface0;
-}
-
-@mixin icon() {
-  font-size: get-token(font-sizes);
-  font-family: "Symbols Nerd Font";
-}
-
-@mixin popup() {
-  padding: get-token(padding, small);
-  border-radius: get-token(border-radius);
-  margin: get-token(margin);
-  background-color: $surface1;
-}

hypr-configs/hyprland/eww/assets/scss/_modules.scss

@@ -1,30 +1,34 @@
 .clock {
-  @include widget;
+  @extend .widget;
+
+  font-size: get-token(font-sizes);
 }
 
 .language {
-  @include widget;
+  @extend .widget;
 }
 
 .logo {
-  @include widget;
+  @extend .widget;
 
   label {
-    @include icon;
+    @extend .icon;
 
     color: $accent;
   }
 }
 
 .workspaces {
-  @include widget;
+  @extend .widget;
+
+  padding: 12px 6px;
 
   * {
-    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
+    transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
   }
 
   .workspace {
-    border-radius: 4px;
+    border-radius: 6px;
     margin: 0px 6px;
   }
 

hypr-configs/hyprland/eww/src/windows/_control-panel.yuck

@@ -32,12 +32,11 @@
 (defwidget toolbox []
   (eventbox
     :cursor "pointer"
+
     (box
-      :class "tricontrol unbarwidget"
+      :class "tricontrol panel-widget"
       :orientation "h"
-      :space-evenly true
-      :height 60
-      :halign "fill"
+
       (button :onclick "./scripts/pop colourpick" (label :text "󰈊"))
       (button :onclick "./scripts/pop scrop" (label :text "󰆞"))
       (button :onclick "~/.config/eww/themeswitch/scripts/pop" (label :text "")))))

hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck

@@ -25,6 +25,8 @@
     :orientation "v"
     :space-evenly false
     :valign "start"
+    :height 250
+    :vexpand false
 
     (Logo)
     (Workspaces)
@@ -38,7 +40,7 @@
     :valign "center"
     :height 200
 
-    (PlayerCtl)
+    ;; (PlayerCtl)
     ))
 
 (defwidget Bottom []