From 49bd527e28ebd41f895838ca88b86b135d89bcd1 Mon Sep 17 00:00:00 2001
From: hesam-init <hesam.init@gmail.com>
Date: Mon, 1 Jul 2024 18:33:10 +0330
Subject: [PATCH] feat: eww design tokens

---
 .../hyprland/eww/assets/scss/_components.scss |  2 -
 .../hyprland/eww/assets/scss/_mixin.scss      | 32 ++++---------
 .../hyprland/eww/assets/scss/_modules.scss    |  8 ----
 .../hyprland/eww/assets/scss/_tokens.scss     | 46 +++++++++++++++++++
 .../eww/src/-components/_helpers.yuck         |  6 +--
 .../hyprland/eww/src/-modules/_media.yuck     |  2 +-
 .../eww/src/-modules/_workspaces.yuck         |  8 ++--
 .../hyprland/eww/src/_definitions.yuck        | 15 ++++--
 .../eww/src/windows/_vertical-bar.yuck        | 14 ++++--
 9 files changed, 82 insertions(+), 51 deletions(-)
 create mode 100644 hypr-configs/hyprland/eww/assets/scss/_tokens.scss

diff --git a/hypr-configs/hyprland/eww/assets/scss/_components.scss b/hypr-configs/hyprland/eww/assets/scss/_components.scss
index a4764b8..e9f8970 100644
--- a/hypr-configs/hyprland/eww/assets/scss/_components.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/_components.scss
@@ -3,8 +3,6 @@
 }
 
 .reveal-on-click {
-  @include font("medium");
-
   color: $surface2;
   padding: 4px 0px;
 }
diff --git a/hypr-configs/hyprland/eww/assets/scss/_mixin.scss b/hypr-configs/hyprland/eww/assets/scss/_mixin.scss
index 3917f72..770e793 100644
--- a/hypr-configs/hyprland/eww/assets/scss/_mixin.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/_mixin.scss
@@ -1,34 +1,20 @@
-@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");
-  }
-}
+@import "tokens";
 
 @mixin widget() {
-  padding: 0.6em 0.4em;
-  margin: 4px 2px;
-  border-radius: 8px;
+  padding: get-token(padding, small);
+  margin: get-token(margin);
+  border-radius: get-token(border-radius);
   background-color: $surface0;
 }
 
 @mixin icon() {
-  @include font("medium");
-
+  font-size: get-token(font-sizes);
   font-family: "Symbols Nerd Font";
 }
 
 @mixin popup() {
-  background-color: $base;
-  padding: 8px;
-  border-radius: 12px;
-  border-style: solid;
-  margin: 10px;
+  padding: get-token(padding, small);
+  border-radius: get-token(border-radius);
+  margin: get-token(margin);
+  background-color: $surface1;
 }
diff --git a/hypr-configs/hyprland/eww/assets/scss/_modules.scss b/hypr-configs/hyprland/eww/assets/scss/_modules.scss
index 0088571..e09802a 100644
--- a/hypr-configs/hyprland/eww/assets/scss/_modules.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/_modules.scss
@@ -1,17 +1,9 @@
 .clock {
   @include widget;
-
-  label {
-    @include font;
-  }
 }
 
 .language {
   @include widget;
-
-  label {
-    @include font("small");
-  }
 }
 
 .logo {
diff --git a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss
new file mode 100644
index 0000000..0809476
--- /dev/null
+++ b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss
@@ -0,0 +1,46 @@
+$design-tokens: (
+  font-sizes: (
+    small: 16px,
+    default: 18px,
+    large: 20px,
+  ),
+  padding: (
+    small: 8px,
+    default: 10px,
+    large: 12px,
+  ),
+  margin: (
+    small: 2px,
+    default: 4px,
+    large: 6px,
+  ),
+  border-radius: (
+    small: 6px,
+    default: 8px,
+    large: 12px,
+  ),
+);
+
+@function get-token($category, $key: null) {
+  $tokens: map-get($design-tokens, $category);
+
+  @if $tokens == null {
+    @error "Category `#{$category}` not found in design tokens.";
+  }
+
+  @if $key == null {
+    @if map-has-key($tokens, default) {
+      $key: default;
+    } @else {
+      @error "Default key not found in category `#{$category}`.";
+    }
+  }
+
+  $value: map-get($tokens, $key);
+
+  @if $value == null {
+    @error "Token `#{$key}` not found in category `#{$category}`.";
+  }
+
+  @return $value;
+}
diff --git a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck
index 6959ce1..57cec14 100644
--- a/hypr-configs/hyprland/eww/src/-components/_helpers.yuck
+++ b/hypr-configs/hyprland/eww/src/-components/_helpers.yuck
@@ -9,7 +9,7 @@
       :transition "slideleft"
       (children :nth 1))))
 
-(defwidget RevealOnHover [var varname ?class ?duration ?transition ?icon]
+(defwidget RevealOnHover [var varname ?icon ?class ?duration ?transition]
   (eventbox
     :onhover `${EWW_CMD} update ${varname}=true`
     :onhoverlost `${EWW_CMD} update ${varname}=false`
@@ -22,7 +22,7 @@
       (revealer
         :reveal var
         :transition {transition ?:"slidedown"}
-        :duration "500ms"
+        :duration animation-duration-default
         (box :class "reveal-on-hover" (children :nth 0))))
     ))
 
@@ -35,7 +35,7 @@
     (revealer
       :reveal var
       :transition "slideup"
-      :duration "500ms"
+      :duration animation-duration-fast
       (box (children :nth 0)))
 
     (eventbox
diff --git a/hypr-configs/hyprland/eww/src/-modules/_media.yuck b/hypr-configs/hyprland/eww/src/-modules/_media.yuck
index b9ad381..78601b7 100644
--- a/hypr-configs/hyprland/eww/src/-modules/_media.yuck
+++ b/hypr-configs/hyprland/eww/src/-modules/_media.yuck
@@ -4,7 +4,7 @@
     (box
       :class "widget"
       :orientation "v"
-      :spacing defaultSpacing
+      :spacing spacing-default
 
       (eventbox
         :onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
diff --git a/hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck b/hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck
index 75de54c..44b5135 100644
--- a/hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck
+++ b/hypr-configs/hyprland/eww/src/-modules/_workspaces.yuck
@@ -9,20 +9,20 @@
       :class "workspaces"
       :space-evenly false
       :orientation "v"
-      :spacing largeSpacing
+      :spacing spacing-default
 
       (for workspace in {workspacesJson}
         (button
           :onclick "hyprctl dispatch workspace ${workspace.id}"
 
           (box
-            :height 25
+            :height 20
             :class "workspace ${workspace.id == currentWorkspace ? "workspacethingactive" : "workspacething"}"
 
             (revealer
               :reveal { workspace.id == currentWorkspace}
-              :transition "slideup"
-              :duration 500
+              :transition "slidedown"
+              :duration animation-duration-default
 
               (box
                 :height 40))))))))
diff --git a/hypr-configs/hyprland/eww/src/_definitions.yuck b/hypr-configs/hyprland/eww/src/_definitions.yuck
index 6e6549d..b764542 100644
--- a/hypr-configs/hyprland/eww/src/_definitions.yuck
+++ b/hypr-configs/hyprland/eww/src/_definitions.yuck
@@ -1,9 +1,14 @@
 ; Global Styles
-(defvar animationDuration "500ms")
-(defvar defaultSpacing 8)
-(defvar largeSpacing 6)
-(defvar mediumSpacing 4)
-(defvar smallSpacing 2)
+(defvar animation-duration-default "600ms")
+(defvar animation-duration-slow "1000ms")
+(defvar animation-duration-fast "400ms")
+(defvar animation-duration-very-fast "200ms")
+
+(defvar spacing-default 8)
+(defvar spacing-large 16)
+(defvar spacing-medium 8)
+(defvar spacing-small 4)
+(defvar spacing-tiny 2)
 
 ; Global
 (deflisten kbLayout :initial "en" "./scripts/kb-layout/get-active")
diff --git a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck
index a54fa70..e5d9de2 100644
--- a/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck
+++ b/hypr-configs/hyprland/eww/src/windows/_vertical-bar.yuck
@@ -7,6 +7,8 @@
     (revealer
       :transition "slideleft"
       :reveal revealControlpanel
+      :duration animation-duration-default
+
       (ControlPanel))
 
     (centerbox
@@ -26,7 +28,7 @@
 
     (Logo)
     (Workspaces)
-    (hiddenctl)
+    ;; (Shortcuts)
     ))
 
 (defwidget Middle []
@@ -34,7 +36,7 @@
     :orientation "v"
     :space-evenly false
     :valign "center"
-    :height 240
+    :height 200
 
     (PlayerCtl)
     ))
@@ -90,14 +92,16 @@
         :text "󱐋"))
     (label :text "${EWW_BATTERY.BAT0.capacity}%" :limit-width 3 :show-truncated false)))
 
-(defwidget hiddenctl []
+(defwidget Shortcuts []
   (RevealOnClick
     :var reveal3
     :varname "reveal3"
+
     (box
       :class "touch"
       :orientation "v"
-      :spacing 5
+      :spacing spacing-default
+
       (button :onclick "swaymsg kill"
         (label :class "icon" :text "󰅙"))
       (button :onclick "wofi --show=drun -i -I"
@@ -111,7 +115,7 @@
     :class "widget"
     :orientation "v"
     :space-evenly false
-    :spacing defaultSpacing
+    :spacing spacing-default
     :valign "end"
 
     (button :onclick "alacritty -e nmtui" :tooltip wifi_essid