feat: eww font mixin

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

@@ -1,3 +1,10 @@
 .reveal-on-hover {
   padding: 6px 0px;
 }
+
+.reveal-on-click {
+  @include font("medium");
+
+  color: $surface2;
+  padding: 4px 0px;
+}

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

@@ -1,3 +1,23 @@
+@import "mixin";
+
+.widget {
+  @include widget;
+}
+
+.panel-widget {
+  @include widget;
+
+  margin: 6px;
+}
+
+.icon {
+  @include icon;
+}
+
+.popup {
+  @include popup;
+}
+
 .border {
   border: 2px white solid;
 }

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

@@ -1,26 +1,28 @@
+@mixin font($size: "default") {
+  $sizes: (
+    "small": 16px,
+    "medium": 18px,
+    "large": 20px,
+  );
+
+  @if map-has-key($sizes, $size) {
+    font-size: map-get($sizes, $size);
+  } @else {
+    font-size: map-get($sizes, "large");
+  }
+}
+
 @mixin widget() {
-  padding: 0.6em;
+  padding: 0.6em 0.4em;
   margin: 4px 2px;
   border-radius: 8px;
   background-color: $surface0;
 }
 
-.widget {
-  @include widget;
-}
-
-.panel-widget {
-  @include widget;
-  margin: 6px;
-}
-
 @mixin icon() {
-  font-size: 20px;
+  @include font("medium");
-  font-family: "Symbols Nerd Font";
-}
 
-.icon {
+  font-family: "Symbols Nerd Font";
-  @include icon;
 }
 
 @mixin popup() {
@@ -30,7 +32,3 @@
   border-style: solid;
   margin: 10px;
 }
-
-.popup {
-  @include popup;
-}

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

@@ -2,7 +2,7 @@
   @include widget;
 
   label {
-    font-size: 20px;
+    @include font;
   }
 }
 
@@ -10,7 +10,7 @@
   @include widget;
 
   label {
-    font-size: 18px;
+    @include font("small");
   }
 }
 

hypr-configs/hyprland/eww/assets/scss/windows/_vertical-bar.scss

@@ -4,12 +4,6 @@
   background-color: $base;
 }
 
-.revealtouch {
-  font-size: 20px;
-  margin: 5px 0px;
-  color: $surface2;
-}
-
 .bat_scale trough {
   min-height: 50px;
   min-width: 18px;

hypr-configs/hyprland/eww/eww.scss

@@ -1,5 +1,4 @@
 @import "./assets/scss/themes/fullerene.scss";
-@import "./assets/scss/mixin";
 @import "./assets/scss/native";
 @import "./assets/scss/global";
 @import "./assets/scss/modules";

hypr-configs/hyprland/eww/src/-components/_helpers.yuck

@@ -9,13 +9,7 @@
       :transition "slideleft"
       (children :nth 1))))
 
-(defwidget RevealOnHover [var varname ?class ?duration ?transition]
+(defwidget RevealOnHover [var varname ?class ?duration ?transition ?icon]
- (box
-  :class "${class}"
-  :orientation "v"
-  :space-evenly false
-  :valign "end"
-
   (eventbox
     :onhover `${EWW_CMD} update ${varname}=true`
     :onhoverlost `${EWW_CMD} update ${varname}=false`
@@ -23,27 +17,31 @@
     (box
       :space-evenly false
       :orientation "v"
-    (children :nth 0)
+      (label :class "icon" :text icon)
 
       (revealer
         :reveal var
         :transition {transition ?:"slidedown"}
         :duration "500ms"
-     (box :class "reveal-on-hover" (children :nth 1))))))
+        (box :class "reveal-on-hover" (children :nth 0))))
-)
+    ))
 
-
+(defwidget RevealOnClick [var varname ?class ?duration ?transition]
-(defwidget ClickBox [var varname ?class ?duration ?transition]
+  (box
- (box :class "${class} clickbox" :orientation "h" :space-evenly false
+    :orientation "v"
-  (button :onclick "eww update ${varname}=${ var ? false : true }"
+    :class "widget"
-   (children :nth 0))
-
-  (revealer :reveal var
-   :transition {transition ?: "slideleft"}
-   :duration {duration ?: "500ms"}
-
-   (box :class "${class}"
     :space-evenly false
-    (children :nth 1)
+
-    (button :onclick "eww update ${varname}=false" :class "close" (label :text "Close")))))
+    (revealer
+      :reveal var
+      :transition "slideup"
+      :duration "500ms"
+      (box (children :nth 0)))
+
+    (eventbox
+      :cursor "pointer"
+      :onclick `${EWW_CMD} update ${varname}=${!var}`
+
+      (label :angle {var ? 90 : 270} :class "reveal-on-click" :tooltip "touch control" :text "")
       )
+    ))

hypr-configs/hyprland/eww/src/-modules/_media.yuck

@@ -4,7 +4,7 @@
     (box
       :class "widget"
       :orientation "v"
-      :spacing 6
+      :spacing defaultSpacing
 
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"

hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck

@@ -9,11 +9,12 @@
       :class "workspaces"
       :space-evenly false
       :orientation "v"
-      :spacing 6
+      :spacing largeSpacing
 
       (for workspace in {workspacesJson}
         (button
           :onclick "hyprctl dispatch workspace ${workspace.id}"
+
           (box
             :height 25
             :class "workspace ${workspace.id == currentWorkspace ? "workspacethingactive" : "workspacething"}"

hypr-configs/hyprland/eww/src/_definitions.yuck

@@ -1,5 +1,11 @@
-; Global
+; Global Styles
 (defvar animationDuration "500ms")
+(defvar defaultSpacing 8)
+(defvar largeSpacing 6)
+(defvar mediumSpacing 4)
+(defvar smallSpacing 2)
+
+; Global
 (deflisten kbLayout :initial "en" "./scripts/kb-layout/get-active")
 (defpoll thour :initial "0" :interval "60s" "date +'%I'")
 (defpoll tmin :initial "0" :interval "60s" "date +'%M'")

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

@@ -26,7 +26,7 @@
 
     (Logo)
     (Workspaces)
-    ;; (hiddenctl)
+    (hiddenctl)
     ))
 
 (defwidget Middle []
@@ -91,17 +91,9 @@
     (label :text "${EWW_BATTERY.BAT0.capacity}%" :limit-width 3 :show-truncated false)))
 
 (defwidget hiddenctl []
-  (eventbox
+  (RevealOnClick
-    :cursor "pointer"
+    :var reveal3
-    :onclick {reveal3 ? "${EWW_CMD} update reveal3=false" : "${EWW_CMD} update reveal3=true"}
+    :varname "reveal3"
-    (box
-      :orientation "v"
-      :class "widget"
-      :space-evenly false
-      (revealer
-        :reveal reveal3
-        :transition "slideup"
-        :duration "500ms"
     (box
       :class "touch"
       :orientation "v"
@@ -112,31 +104,24 @@
         (label :class "icon" :text "󰀻"))
       (button :onclick "./scripts/touchkey.sh"
         (label :class "icon" :text "󰌌"))))
-      (label :angle {reveal3 ? 90 : 270} :class "revealtouch" :tooltip "touch control" :text "")
+  )
-      (revealer
-        :reveal {!reveal3}
-        :transition "slidedown"
-        ))))
 
 (defwidget Sliders []
   (box
     :class "widget"
     :orientation "v"
     :space-evenly false
-    :spacing 8
+    :spacing defaultSpacing
     :valign "end"
 
     (button :onclick "alacritty -e nmtui" :tooltip wifi_essid 
-      (label :class "icon" :style "font-size: 18px;" :text wifi_icon))
+      (label :class "icon" :text wifi_icon))
 
     (RevealOnHover
       :var revealVolume
       :varname "revealVolume"
-      (box
+      :icon {volumemute == 'false' ? "󰕾" : "󰖁"}
-        :orientation "v"
+
-        :space-evenly false
-        :class "sound"
-        (label :class "icon" :text {volumemute == 'false' ? "󰕾" : "󰖁"}))
       (scale
         :class "volslide"
         :value volume
@@ -150,11 +135,8 @@
     (RevealOnHover
       :var revealMicrophone
       :varname "revealMicrophone"
-      (box
+      :icon {volumemute == 'false' ? "" : "󰖁"}
-        :orientation "v"
+
-        :space-evenly false
-        :class "sound"
-        (label :class "icon" :text {volumemute == 'false' ? "" : "󰖁"}))
       (scale
         :class "volslide"
         :value mic_volume
@@ -168,11 +150,8 @@
     (RevealOnHover
       :var revealBrightness
       :varname "revealBrightness"
-      (box 
+      :icon "󰃞"
-        :orientation "v"
+
-        :space-evenly false
-        :class "bright"
-        (label :class "icon" :text "󰃞"))
       (scale
         :class "brislide"
         :onchange "brightnessctl set {}%"