Redesign Eww bars

modules/home/wayland/apps/dunst/default.nix

@@ -12,7 +12,7 @@
           width = "400";
           scale = "0";
           origin = "top-right";
-          offset = "4x40";
+          offset = "${config.colorScheme.colors.gaps-bar}x${config.colorScheme.colors.gaps-screen}";
           notification_limit = "0";
           progress_bar = "true";
           progress_bar_height = "10";
@@ -44,8 +44,8 @@
           max_icon_size = 64;
 
           icon_path =
-            "/usr/share/icons/gnome/128x128/status/:/usr/share/icons/gnome/128x128/devices/";
+            "${pkgs.tela-circle-icon-theme}/share/icons/Tela-circle-dark/32/status:${pkgs.tela-circle-icon-theme}/share/icons/Tela-circle-dark/32/device ";
-          icon_theme = "Papirus, Adwaita";
+          icon_theme = "Tela-circle-dark";
           enable_recursive_icon_lookup = "true";
 
           sticky_history = "yes";
@@ -56,7 +56,7 @@
           always_run_script = "true";
           title = "Dunst";
           class = "Dunst";
-          corner_radius = "10";
+          corner_radius = "${config.colorScheme.colors.border-radius}";
           ignore_dbusclose = "false";
           layer = "top";
           force_xwayland = "true";

modules/home/wayland/apps/eww/bar/css/_clock.scss

@@ -0,0 +1,54 @@
+.calendar-win {
+  @include window;
+  background-color: $bg;
+  color: $fg;
+  padding: .2em;
+}
+
+calendar {
+  padding: 5pt;
+
+  :selected {
+    color: $base0C;
+  }
+
+  .header {
+    color: $base05;
+  }
+
+  .highlight {
+    color: $base0C;
+    font-weight: bold;
+  }
+
+  .button {
+    color: $base0C;
+  }
+
+  :indeterminate {
+    color: $base03;
+  }
+}
+
+
+.hour, .month {
+  font-weight: bolder;
+}
+
+.minute, .month {
+  margin-top: -4pt;
+}
+
+.minute, .hour, .day, .month {
+  font-size: 20pt;
+}
+
+.date {
+  color: $base0C;
+  background-color: $base01;
+  border-radius: $border-radius;
+}
+
+.datetime {
+  padding: $border-width;
+}

modules/home/wayland/apps/eww/bar/css/_net.scss

@@ -0,0 +1,8 @@
+
+.net {
+    color: $base07;
+}
+
+.blt {
+    color: $base0C;
+}

modules/home/wayland/apps/eww/bar/css/_sys.scss

@@ -0,0 +1,31 @@
+
+.cpubar {
+color: $base0C;
+}
+
+.gpubar {
+color: $base0E;
+}
+
+.membar {
+color: $base08;
+}
+    
+.batbar {
+color: $base0B;
+}
+
+.cpubar,
+.gpubar,
+.membar,
+.batbar {
+    background-color: $bg;
+    margin: $gaps-window 0;
+}
+
+
+.icon-text {
+padding: 5pt;
+font-size: 5pt;
+font-weight: 900;
+}

modules/home/wayland/apps/eww/bar/eww.scss

@@ -0,0 +1,96 @@
+@import 'css/colors';
+
+@mixin rounding {
+  border-radius: $border-radius;
+}
+
+@mixin window {
+  border: $border-width solid $base04;
+  margin: $gaps-screen $gaps-screen $gaps-screen;
+  @include rounding;
+}
+
+
+@import 'css/sys';
+@import 'css/net';
+@import 'css/clock';
+
+* {
+  all: unset;
+  font-family: "IBM Plex Mono";
+  transition: 200ms ease;
+}
+
+.bar {
+  color: $fg;
+
+  label {
+    font-size: 1.2rem;
+  }
+}
+
+tooltip {
+  background: $base01;
+  border: $border-width solid $base04;
+  border-radius: $border-radius;
+
+  label {
+    font-size: 1rem;
+  }
+}
+
+.icon,
+.icon label { font-family: Material Design Icons; }
+
+.ws {
+  border-radius: $border-radius;
+  margin: $gaps-window;
+}
+
+.focused {
+  background-color: $bg;
+  border-radius: 1rem;
+  margin: .3rem;
+  padding: .25rem;
+}
+
+.module {
+  background: $base01;
+  border-radius: $border-radius;
+  border-color: $base03;
+  border-style: solid;
+  border-width: $border-width;
+  border-right-style: none;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  padding: 0 $gaps-window;
+  margin: $gaps-screen 0;
+}
+
+scale trough {
+  background-color: $bg1;
+  border-radius: 24px;
+  margin: 0 1rem;
+  min-height: 10px;
+  min-width: 70px;
+}
+
+.grey {
+  background-color: $base02;
+}
+
+.red {
+  background-color: $base0F;
+}
+
+.orange {
+  background-color: $base08;
+}
+
+.green {
+  background-color: $base0B;
+}
+
+.blue {
+  background-color: $base0C;
+}

modules/home/wayland/apps/eww/bar/eww.yuck

@@ -0,0 +1,56 @@
+(include "./modules/workspaces.yuck")
+
+
+(include "./modules/sys.yuck")
+(include "./modules/net.yuck")
+(include "./modules/clock.yuck")
+
+(include "./windows/calendar.yuck")
+
+
+(defwidget left []
+  (box
+    :space-evenly false
+    :orientation "v"
+    :halign "end"
+    :valign "start"
+    (workspaces)))
+
+(defwidget right []
+  (box
+    :space-evenly false
+    :orientation "v"
+    :halign "end"
+    :valign "end"
+    (sys)
+    (net)
+    (clock)))
+
+(defwidget center []
+  (box
+    :space-evenly false
+    :orientation "v"
+    :halign "end"
+    :valign "center"
+   ))
+
+(defwidget bar-box []
+  (centerbox
+    :orientation "v"
+    :class "bar"
+    (left)
+    (center)
+    (right)))
+
+
+(defwindow bar
+    :monitor 0
+    :geometry (geometry
+      :x "0%"
+      :y "0%"
+      :width "20px"
+      :height "100%"
+      :anchor "right center")
+    :stacking "fg"
+    :exclusive true
+  (bar-box))

modules/home/wayland/apps/eww/bar/modules/clock.yuck

@@ -0,0 +1,31 @@
+(defvar date_rev false)
+
+(defwidget clock []
+  (box
+    :class "module datetime"
+    (eventbox
+      :onhover "${EWW_CMD} update date_rev=true"
+      :onhoverlost "${EWW_CMD} update date_rev=false"
+      (overlay
+        (box
+          :orientation "v"
+          (button
+            :class "hour" hour)
+          (button
+            :class "minute" minute))
+        (revealer
+          :reveal date_rev
+            (box
+              :class "date"
+              :orientation "v"
+              (button
+                :onclick "${EWW_CMD} open --toggle calendar"
+                :class "day" day)
+              (button
+                :onclick "${EWW_CMD} open --toggle calendar"
+                :class "month" month)))))))
+
+(defpoll hour	:interval "15s"	"date '+%H'")
+(defpoll minute	:interval "15s"	"date '+%M'")
+(defpoll day	:interval "15s"	"date '+%d'")
+(defpoll month	:interval "15s"	"date '+%m'")

modules/home/wayland/apps/eww/bar/modules/net.yuck

@@ -0,0 +1,16 @@
+(deflisten net "scripts/net/net")
+
+(defwidget net []
+  (box
+    :class "module"
+    :orientation "v"
+    (button
+      :class "net"
+      :tooltip {net.name}
+      {net.icon})
+
+    (button
+      :class "blt"
+      (label :class "icon-text" :text "B"))
+  )
+)

modules/home/wayland/apps/eww/bar/modules/sys.yuck

@@ -0,0 +1,38 @@
+(deflisten cpu "scripts/sys/cpu")
+(deflisten gpu "scripts/sys/gpu")
+(deflisten memory "scripts/sys/memory")
+
+(deflisten battery "scripts/sys/battery")
+
+(defwidget sys []
+  (box
+    :class "module"
+    :orientation "v"
+    (circular-progress
+      :value {EWW_CPU.avg}
+      :class "cpubar"
+      :thickness 6
+      (label :class "icon-text" :text "C"))
+
+    (circular-progress
+      :value {gpu.devices[0].GRBM2.CommandProcessor-Graphics.value}
+      :class "gpubar"
+      :thickness 6
+      (label :class "icon-text" :text "G"))
+
+    (circular-progress
+      :value {memory.percent}
+      :class "membar"
+      :thickness 6
+      (label :class "icon-text" :text "M"))
+
+    (circular-progress
+      :value {battery.percentage}
+      :class "batbar"
+      :visible {battery.visible}
+      :style "color: ${battery.color};"
+      :thickness 6
+      (label :class "icon-text" :text "B"))
+      
+  )
+)

modules/home/wayland/apps/eww/bar/modules/workspaces.yuck

@@ -0,0 +1,16 @@
+(deflisten workspace "scripts/workspaces")
+
+(defwidget workspaces []
+  (eventbox
+		:onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
+		(box
+			:class "module workspaces"
+            :orientation "v"
+		  (for ws in workspace
+		    (button
+					:onclick "hyprctl dispatch workspace ${ws.number}"
+					:class "ws icon ${ws.color}"
+					; :tooltip {ws.tooltip}
+					(box
+						:class `${ws.focused ? "focused" : ""}`
+						:height 3))))))

modules/home/wayland/apps/eww/bar/scripts/net/net

@@ -0,0 +1,72 @@
+#!/usr/bin/env bash
+
+function get_time_ms {
+  date -u +%s%3N
+}
+
+icons=("󰤯" "󰤟" "󰤢" "󰤥" "󰤨")
+
+function toggle() {
+  status=$(rfkill | grep wlan | awk '{print $4}')
+
+  if [ "$status" = "unblocked" ]; then
+    rfkill block wlan
+  else
+    rfkill unblock wlan
+  fi
+}
+
+function gen_wifi() {
+  signal=$(cat /proc/net/wireless | head -n3 | tail -n1 | awk '{print $3}')
+  level=$(awk -v n="$signal" 'BEGIN{print int((n-1)/20)}')
+  if [ "$level" -gt 4 ]; then
+    level=4
+  fi
+
+  icon=${icons[$level]}
+  ip="-"
+  class="net-connected"
+  name=$(wpa_cli status | grep \^ssid= | sed 's/ssid=//g')
+}
+
+function gen_ethernet() {
+  icon="󰈀"
+  class="net-connected"
+  ip=""
+  name=Wired
+}
+
+function make_content() {
+  local ethernet wifi
+  ethernet=$(ip link | rg "^[0-9]+: en[po]+" | head -n1 | sed 's/[a-zA-Z0-9_,><:\ -]*state //g' | sed 's/ mode [a-zA-Z0-9 ]*//g')
+  wifi=$(wpa_cli status | rg "^wpa_state=" | sed 's/wpa_state=//g')
+
+  # test ethernet first
+  if [[ $ethernet == "UP" ]]; then
+    gen_ethernet
+  elif [[ $wifi == "COMPLETED" ]]; then
+    gen_wifi
+  else
+    icon="󰤮"
+    ip="-"
+    class="net-disconnected"
+    name="Disconnected"
+  fi
+
+  echo '{"icon": "'$icon'", "name": "'$name'", "ip": "'$ip'", "class": "'$class'"}'
+}
+
+if [ "$1" = "toggle" ]; then
+  toggle
+else
+  last_time=$(get_time_ms)
+  make_content
+  ip monitor | while read -r _; do
+    current_time=$(get_time_ms)
+    delta=$((current_time - last_time))
+    if [[ $delta -gt 50 ]]; then
+      make_content
+      last_time=$(get_time_ms)
+    fi
+  done
+fi

modules/home/wayland/apps/eww/bar/scripts/sys/battery

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+
+icons=("󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹")
+num_icons=$(awk -v n="${#icons[@]}" 'BEGIN{print 100 / n}')
+BATTERY="/sys/class/power_supply/BAT0"
+
+geticon() {
+  level=$(awk -v n="$CAPACITY" -v c="$num_icons" 'BEGIN{print int(n/c-1)}')
+  echo "${icons[$level]}"
+}
+
+status() {
+  if [ "$STATE" = "Charging" ]; then
+    echo -n "charging"
+
+    if [ "$RATE" -gt 0 ]; then
+      echo ", $(gettime) left"
+    else
+      echo ""
+    fi
+  elif [ "$STATE" = "Discharging" ]; then
+    echo "$(gettime)h left"
+  else
+    echo "fully charged"
+  fi
+}
+
+color() {
+  [ "$CAPACITY" -le 20 ] && echo '#f38ba8' || echo '#a6e3a1'
+}
+
+wattage() {
+  awk -v rate="$RATE" -v uw="1000000" 'BEGIN{print sprintf("%.1f W", rate/uw)}'
+}
+
+gettime() {
+  FULL=$(cat $BATTERY/energy_full)
+  NOW=$(cat $BATTERY/energy_now)
+
+  if [ "$RATE" -gt 0 ]; then
+    if [ "$STATE" = "Discharging" ]; then
+      EX="$NOW / $RATE"
+    else
+      EX="($FULL - $NOW) / $RATE"
+    fi
+    date -u -d@"$(awk -v ex="$EX" 'BEGIN{print ex * 3600}')" +%H:%M
+  fi
+}
+
+if [ -d "$BATTERY" ]; then
+  while true; do
+    RATE=$(cat $BATTERY/power_now)
+    CAPACITY=$(cat $BATTERY/capacity)
+    STATE=$(cat $BATTERY/status)
+
+    echo '{ "visible": true, "icon": "'$(geticon)'", "percentage": '$CAPACITY', "wattage": "'$(wattage)'", "status": "'$(status)'", "color": "'$(color)'" }'
+    sleep 15
+  done
+else
+  echo '{ "visible": false,  "icon": "", "percentage": 0, "wattage": "", "status": "", "color": "#a6e3a1" }'
+fi

modules/home/wayland/apps/eww/bar/scripts/sys/cpu

@@ -0,0 +1 @@
+#!/usr/bin/env bash

modules/home/wayland/apps/eww/bar/scripts/sys/gpu

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+amdgpu_top -J -s 5000 | sed 's/ //g' 

modules/home/wayland/apps/eww/bar/scripts/workspaces

@@ -0,0 +1,86 @@
+#!/usr/bin/env bash
+
+colors=("blue" "blue" "green" "red")
+empty="grey"
+
+# get initial focused workspace
+focusedws=$(hyprctl -j monitors | jaq -r '.[] | select(.focused == true) | .activeWorkspace.id')
+
+declare -A o=([1]=0 [2]=0 [3]=0 [4]=0 [5]=0 [6]=0 [7]=0 [8]=0 [9]=0 [10]=0)
+declare -A monitormap
+declare -A workspaces
+
+# set color for each workspace
+status() {
+  if [ "${o[$1]}" -eq 1 ]; then
+    mon=${monitormap[${workspaces[$1]}]}
+    echo -n "${colors[$mon]}"
+  else
+    echo -n "$empty"
+  fi
+}
+
+# handle workspace create/destroy
+workspace_event() {
+  while read -r k v; do workspaces[$k]="$v"; done < <(hyprctl -j workspaces | jaq -jr '.[] | .id, " ", .monitor, "\n"')
+}
+# handle monitor (dis)connects
+monitor_event() {
+  while read -r k v; do monitormap["$k"]=$v; done < <(hyprctl -j monitors | jaq -jr '.[] | .name, " ", .id, "\n"')
+}
+
+# get all apps titles in a workspace
+applist() {
+  ws="$1"
+
+  apps=$(hyprctl -j clients | jaq -jr '.[] | select(.workspace.id == '"$ws"') | .title + "\\n"')
+  echo -En "${apps%"\n"}"
+}
+
+# generate the json for eww
+generate() {
+  echo -n '['
+
+  for i in {1..10}; do
+    echo -n ''"$([ "$i" -eq 1 ] || echo ,)" '{"number": "'"$i"'", "color": "'"$(status "$i")"'", "focused": '"$([ "$focusedws" = "$i" ] && echo "true" || echo "false")"'}' #, "tooltip": "'$(applist "$i")'" }'
+  done
+
+  echo ']'
+}
+
+# setup
+
+# add monitors
+monitor_event
+
+# add workspaces
+workspace_event
+
+# check occupied workspaces
+for num in "${!workspaces[@]}"; do
+  o[$num]=1
+done
+# generate initial widget
+generate
+
+# main loop
+socat -u UNIX-CONNECT:/tmp/hypr/"$HYPRLAND_INSTANCE_SIGNATURE"/.socket2.sock - | rg --line-buffered "workspace|mon(itor)?" | while read -r line; do
+  case ${line%>>*} in
+  "workspace")
+    focusedws=${line#*>>}
+    ;;
+  "focusedmon")
+    focusedws=${line#*,}
+    ;;
+  "createworkspace")
+    o[${line#*>>}]=1
+    ;;
+  "destroyworkspace")
+    o[${line#*>>}]=0
+    ;;
+  "monitor"*)
+    monitor_event
+    ;;
+  esac
+  generate
+done

modules/home/wayland/apps/eww/bar/windows/calendar.yuck

@@ -0,0 +1,14 @@
+(defwidget calendar-win []
+  (box
+    :class "calendar-win"
+    (calendar)))
+
+(defwindow calendar
+  :monitor 0
+  :geometry (geometry
+    :x "0%"
+    :y "0%"
+  	:anchor "bottom right"
+    :width "0px"
+    :height "0px")
+  (calendar-win))

modules/home/wayland/apps/eww/bar_old/scripts/brightness

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+
+function get_time_ms {
+  date -u +%s%3N
+}
+
+icons=("󰛩" "󱩒" "󰛨")
+
+gen_output() {
+  icon="${icons[$(awk -v n="$(brillo)" 'BEGIN{print int(n/34)}')]}"
+  prcnt=$(brillo | xargs printf "%.*f\n" "0")
+  echo '{"percent": '$prcnt', "icon": "'$icon'"}'
+}
+
+if [[ $(brillo 2>/dev/stdout 1>/dev/null | head -n1 | awk '{print $1}') == "No" ]]; then
+  echo  '{"percent":  100, "icon": "󰛨"}'
+elif [ "$1" = "" ]; then
+  # initial
+  last_time=$(get_time_ms)
+  gen_output
+
+  udevadm monitor | rg --line-buffered "backlight" | while read -r _; do
+    current_time=$(get_time_ms)
+    delta=$((current_time - last_time))
+    if [[ $delta -gt 50 ]]; then
+      gen_output
+      last_time=$(get_time_ms)
+    fi
+  done
+fi

modules/home/wayland/apps/eww/bar_old/scripts/flightmode

@@ -0,0 +1,23 @@
+#!/bin/sh
+
+icon() {
+  [ "$STATUS" = "no" ] && echo "󰀞" || echo "󰀝"
+}
+
+toggle() {
+  if [ "$STATUS" = "no" ]; then
+    rfkill block all
+  else
+    rfkill unblock all
+  fi
+}
+
+if [ "$1" = "toggle" ]; then
+  toggle
+else
+  icon
+  rfkill event | while read -r _; do
+    STATUS="$(rfkill list | sed -n 2p | awk '{print $3}')"
+    icon
+  done
+fi

modules/home/wayland/apps/eww/bar_old/scripts/powermode

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+icon() {
+  [ "$STATUS" = "no" ] && echo "󰌪" || echo "󱐋"
+}
+
+toggle() {
+  if [ "$STATUS" = "no" ]; then
+    echo ""
+  else
+    echo ""
+  fi
+}
+
+if [ "$1" = "toggle" ]; then
+  toggle
+  icon
+else
+  icon
+fi

modules/home/wayland/apps/eww/bar_old/scripts/sys/battery

@@ -57,5 +57,5 @@ if [ -d "$BATTERY" ]; then
     sleep 5
   done
 else
-  echo '{ "icon": "", "percentage": 0, "wattage": "", "status": "", "color": "#a6e3a1" }'
+  echo '{ "icon": "", "percentage": 0.0, "wattage": "", "status": "", "color": "#a6e3a1" }'
 fi

modules/home/wayland/apps/eww/bar_old/scripts/sys/memory

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+total="$(free --si | rg Mem | awk '{print $2}')"
+
+human() {
+  awk -v mem="$1" 'BEGIN{print sprintf("%.1f%s", mem/1000/(mem > 1000000 ? 1000 : 1), mem > 1000000 ? "G" : "M")}'
+}
+
+free --si -s 3 | rg --line-buffered Mem | while read -r line; do
+  used=$(echo "$line" | awk '{print $3}')
+  perc=$(awk -v used="$used" -v total="$total" 'BEGIN{print sprintf("%.f", used/total*100)}')
+
+  echo '{"total": "'$(human "$total")'", "used": "'$(human "$used")'", "percent": '$perc'}'
+done

modules/home/wayland/apps/eww/bar_old/scripts/sys/volume

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+
+function get_time_ms {
+  date -u +%s%3N
+}
+
+volicons=("󰕿" "󰖀" "󰕾")
+
+vol() {
+  wpctl get-volume @DEFAULT_AUDIO_"$1"@ | awk '{print int($2*100)}'
+}
+ismuted() {
+  wpctl get-volume @DEFAULT_AUDIO_"$1"@ | rg -qi muted
+  echo -n $?
+}
+setvol() {
+  wpctl set-volume @DEFAULT_AUDIO_"$1"@ "$(awk -v n="$2" 'BEGIN{print (n / 100)}')"
+}
+setmute() {
+  wpctl set-mute @DEFAULT_AUDIO_"$1"@ toggle
+}
+
+gen_output() {
+  percent="$(vol "SINK")"
+  lvl=$(awk -v n="$percent" 'BEGIN{print int(n/34)}')
+  ismuted=$(ismuted "SINK")
+
+  if [ "$ismuted" = 1 ]; then
+    icon="${volicons[$lvl]}"
+  else
+    icon="󰝟"
+  fi
+
+  echo '{"icon": "'$icon'", "percent": '$(vol "SINK")', "microphone": '$(vol "SOURCE")'}'
+}
+
+if [ "$1" = "mute" ]; then
+  if [ "$2" != "SOURCE" ] && [ "$2" != "SINK" ]; then
+    echo "Can only mute SINK or SOURCE"
+    exit 1
+  fi
+  setmute "$2"
+elif [ "$1" = "setvol" ]; then
+  if [ "$2" != "SOURCE" ] && [ "$2" != "SINK" ]; then
+    echo "Can only set volume for SINK or SOURCE"
+    exit 1
+  elif [ "$3" -lt 0 ] || [ "$3" -gt 100 ]; then
+    echo "Volume must be between 0 and 100"
+    exit 1
+  fi
+  setvol "$2" "$3"
+else
+  last_time=$(get_time_ms)
+  gen_output
+
+  pw-cli -m 2>/dev/null | rg --line-buffered "PipeWire:Interface:Client" | while read -r event; do
+    current_time=$(get_time_ms)
+    delta=$((current_time - last_time))
+    if [[ $delta -gt 50 ]]; then
+      gen_output
+      last_time=$(get_time_ms)
+    fi
+  done
+fi

modules/home/wayland/apps/eww/default.nix

@@ -8,7 +8,7 @@
         filter = name: _type:
           let baseName = baseNameOf (toString name);
           in !(lib.hasSuffix ".nix" baseName) && (baseName != "_colors.scss");
-        src = lib.cleanSource ./.;
+        src = lib.cleanSource ./bar/.;
       };
 
       recursive = true;
@@ -38,6 +38,12 @@
       $bg: $base00;
       $bg1: $base01;
       $border: $base03;
+
+      $border-radius: ${config.colorScheme.colors.border-radius}px;
+      $border-width: ${config.colorScheme.colors.border-width}px;
+
+      $gaps-screen: ${config.colorScheme.colors.gaps-screen}px;
+      $gaps-window: ${config.colorScheme.colors.gaps-window}px;
     '';
   };
 }

modules/home/wayland/apps/waybar/default.nix

@@ -23,21 +23,23 @@ in {
       style = ''
          * {
           border: none;
-          border-radius: ${config.colorScheme.colors.radius};
+          border-radius: ${config.colorScheme.colors.border-radius}pt;
           font-family:'Monospace','Material Design Icons','Openmoji';
           font-size: 13pt;
           color: #${config.colorScheme.colors.base07};
         }
 
         window#waybar {
-          background: transparent; 
+          background: transparent;
+          padding-top: ${config.colorScheme.colors.gaps-screen}pt;
+          padding-bottom: ${config.colorScheme.colors.gaps-screen}pt;
         }
 
         tooltip {
           background: #${config.colorScheme.colors.base01};
-          border-radius: ${config.colorScheme.colors.radius};
+          border-radius: ${config.colorScheme.colors.border-radius}pt;
-          border-color: #${config.colorScheme.colors.base04};
+          border-color: #${config.colorScheme.colors.base03};
-          border-width: 2px;
+          border-width: ${config.colorScheme.colors.border-width}pt;
           border-style: solid;
           font-size: 13pt;
         }
@@ -47,15 +49,8 @@ in {
         }
 
         #workspaces {
-          background: #${config.colorScheme.colors.base01};
           font-size: 64pt;
-          margin-top: 6pt;
+
-          margin-bottom: 10pt;
-          border-top-right-radius: 0px;
-          border-bottom-right-radius: 0px;
-          border-top: 2px solid #${config.colorScheme.colors.base04};
-          border-left: 2px solid #${config.colorScheme.colors.base04};
-          border-bottom: 2px solid #${config.colorScheme.colors.base04};
         }
 
         #workspaces button {
@@ -79,6 +74,7 @@ in {
           color: #${config.colorScheme.colors.base04};
         }
 
+        #workspaces,
         #network, 
         #pulseaudio,
         #backlight, #battery,
@@ -88,21 +84,22 @@ in {
         #clock, #clock.date, #clock.time
         { 
           background: #${config.colorScheme.colors.base01};
-          margin-bottom: 4pt;
+          margin-bottom: ${config.colorScheme.colors.gaps-window}pt;
           padding-top: 2px;
           padding-left: 2px;
           padding-bottom: 2px;
           border-top-right-radius: 0px;
           border-bottom-right-radius: 0px;
-          border-top: 2px solid #${config.colorScheme.colors.base04};
+          border-top: ${config.colorScheme.colors.border-width}px solid #${config.colorScheme.colors.base03};
-          border-left: 2px solid #${config.colorScheme.colors.base04};
+          border-left: ${config.colorScheme.colors.border-width}px solid #${config.colorScheme.colors.base03};
-          border-bottom: 2px solid #${config.colorScheme.colors.base04};
+          border-bottom: ${config.colorScheme.colors.border-width}px solid #${config.colorScheme.colors.base03};
         }
 
         #custom-powermenu {          
           margin-bottom: 0pt;
           border-bottom-left-radius: 0px;
           border-bottom: none;
+          padding-bottom: 0px;
         }
       '';
       settings = [{

modules/home/wayland/apps/waylock/default.nix

@@ -60,8 +60,10 @@
       }
 
       button {
-          border-radius:7px;
+          border-radius:${config.colorscheme.colors.border-radius}px;
-          border: 2px solid #${config.colorscheme.colors.base03};
+          border-width: ${config.colorscheme.colors.border-width}px;
+          border-style: solid;
+          border-color: #${config.colorscheme.colors.base04};
           color: #${config.colorscheme.colors.base07};
           padding: 20px;
           background-color: alpha(#${config.colorscheme.colors.base00},0.8);
@@ -74,7 +76,10 @@
 
       button:focus {
           background-color: alpha(#${config.colorscheme.colors.base02},1.0);
-          border: 2px solid #${config.colorscheme.colors.base05};
+          border-radius:${config.colorscheme.colors.border-radius}px;
+          border-width: ${config.colorscheme.colors.border-width}px;
+          border-color: #${config.colorscheme.colors.base04};
+          border-style: solid;
       }
 
     '';

modules/home/wayland/apps/wofi/default.nix

@@ -23,7 +23,7 @@
     xdg.configFile."wofi/style.css".text = ''
       window {
         margin: 0px;
-        border-radius:7px;
+        border-radius: ${config.colorscheme.colors.border-radius}px;
         background-color: #${config.colorscheme.colors.base00};
       }
 
@@ -51,8 +51,10 @@
       #outer-box {
         margin: 0px;
         padding: 3px;
-        border-radius: 7px;
+        border-radius: ${config.colorscheme.colors.border-radius}px;
-        border: 2px solid #${config.colorscheme.colors.base03};
+        border-width: ${config.colorscheme.colors.border-width}px;
+        border-color: #${config.colorscheme.colors.base04};
+        border-style: solid;
       }
 
       #text:selected {

modules/home/wayland/hyprland/config.nix

@@ -33,18 +33,18 @@
         }
                         
         general {
-            gaps_in = 4
+            gaps_in = ${config.colorScheme.colors.gaps-window}
-            gaps_out = 8
+            gaps_out = ${config.colorScheme.colors.gaps-screen}
-            border_size = 2
+            border_size = ${config.colorScheme.colors.border-width}
                                       
-            # col.active_border = rgb(${config.colorScheme.colors.base05})
+            col.active_border = rgb(${config.colorScheme.colors.base04})
-            # col.inactive_border = rgb(${config.colorScheme.colors.base03})
+            col.inactive_border = rgb(${config.colorScheme.colors.base03})
                           
             layout = dwindle
         }
                         
         decoration {
-            rounding = 4
+            rounding = ${config.colorScheme.colors.border-radius}
                           
             blur {
                 enabled = true

modules/shared/colors/default.nix

@@ -1,5 +1,9 @@
-{ ... }: { 
+{ config, ... }: { 
     imports = [ ./sorahiro_soft.nix ];
 
-    colorScheme.colors.radius = "#8px";
+    colorScheme.colors.border-radius = "#8";
+    colorScheme.colors.border-width = "#2";
+    colorScheme.colors.gaps-screen = "#8";
+    colorScheme.colors.gaps-window = "#4";
+    colorScheme.colors.gaps-bar = "#32";
 }