🎨 ux(hypr): create a file with theme variables to use in the theme config files

also changed some of the shadows and group colors

.config/hypr/hyprlock.conf

@@ -1,7 +1,11 @@
+source = ./themes/luna/colors.conf
+
+$font = JetBrains Mono Nerd Font 10
+
 background {
     monitor =
     path = $HOME/.config/hypr/themes/luna/walls/neon-dim.png
-    color = rgb(b7bdf8)
+    color = rgb($lavenderAlpha)
 
     blur_size = 4
     blur_passes = 3
@@ -19,9 +23,9 @@ input-field {
     dots_size = 0.2
     dots_spacing = 0.64
     dots_center = true
-    outer_color = rgb(b7bdf8)
-    inner_color = rgb(24273a)
-    font_color = rgb(cad3f5)
+    outer_color = rgb($lavenderAlpha)
+    inner_color = rgb($baseAlpha)
+    font_color = rgb($textAlpha)
     fade_on_empty = true
     placeholder_text = <i>Password...</i>
     hide_input = false
@@ -34,9 +38,9 @@ input-field {
 label {
     monitor = DP-1
     text = cmd[update:1000] echo "<b><big> $(date +"%H:%M:%S") </big></b>"
-    color = rgb(cad3f5)
+    color = rgb($textAlpha)
     font_size = 64
-    font_family = JetBrains Mono Nerd Font 10
+    font_family = $font
     position = 0, 16
     halign = center
     valign = center
@@ -45,10 +49,10 @@ label {
 # User label
 label {
     monitor = DP-1
-    text = Hey $USER
-    color = rgb(cad3f5)
+    text = Hey $USER!
+    color = rgb($textAlpha)
     font_size = 20
-    font_family = JetBrains Mono Nerd Font 10
+    font_family = $font
     position = 0, 0
     halign = center
     valign = center
@@ -59,9 +63,9 @@ label {
 label {
     monitor = DP-1
     text = Type to unlock!
-    color = rgb(cad3f5)
+    color = rgb($textAlpha)
     font_size = 16
-    font_family = JetBrains Mono Nerd Font 10
+    font_family = $font
     position = 0, 30
     halign = center
     valign = bottom

.config/hypr/themes/luna/colors.conf

@@ -0,0 +1,61 @@
+$rosewaterAlpha = f4dbd6
+$flamingoAlpha  = f0c6c6
+$pinkAlpha      = f5bde6
+$mauveAlpha     = c6a0f6
+$redAlpha       = ed8796
+$maroonAlpha    = ee99a0
+$peachAlpha     = f5a97f
+$yellowAlpha    = eed49f
+$greenAlpha     = a6da95
+$tealAlpha      = 8bd5ca
+$skyAlpha       = 91d7e3
+$sapphireAlpha  = 7dc4e4
+$blueAlpha      = 8aadf4
+$lavenderAlpha  = b7bdf8
+
+$textAlpha      = cad3f5
+$subtext1Alpha  = b8c0e0
+$subtext0Alpha  = a5adcb
+
+$overlay2Alpha  = 939ab7
+$overlay1Alpha  = 8087a2
+$overlay0Alpha  = 6e738d
+
+$surface2Alpha  = 5b6078
+$surface1Alpha  = 494d64
+$surface0Alpha  = 363a4f
+
+$baseAlpha      = 24273a
+$mantleAlpha    = 1e2030
+$crustAlpha     = 181926
+
+$rosewater = 0xfff4dbd6
+$flamingo  = 0xfff0c6c6
+$pink      = 0xfff5bde6
+$mauve     = 0xffc6a0f6
+$red       = 0xffed8796
+$maroon    = 0xffee99a0
+$peach     = 0xfff5a97f
+$yellow    = 0xffeed49f
+$green     = 0xffa6da95
+$teal      = 0xff8bd5ca
+$sky       = 0xff91d7e3
+$sapphire  = 0xff7dc4e4
+$blue      = 0xff8aadf4
+$lavender  = 0xffb7bdf8
+
+$text      = 0xffcad3f5
+$subtext1  = 0xffb8c0e0
+$subtext0  = 0xffa5adcb
+
+$overlay2  = 0xff939ab7
+$overlay1  = 0xff8087a2
+$overlay0  = 0xff6e738d
+
+$surface2  = 0xff5b6078
+$surface1  = 0xff494d64
+$surface0  = 0xff363a4f
+
+$base      = 0xff24273a
+$mantle    = 0xff1e2030
+$crust     = 0xff181926

.config/hypr/themes/luna/decoration.conf

@@ -1,7 +1,9 @@
+source = ./colors.conf
+
 general {
     border_size = 2
-    col.inactive_border = rgba(b7bdf869)
-    col.active_border = rgba(c6d0f5ee) rgba(b7bdf869) rgba(b7bdf869) rgba(c6d0f5ee) 45deg
+    col.inactive_border = rgba($lavenderAlpha69)
+    col.active_border = rgba($textAlphaee) rgba($lavenderAlpha69) rgba($lavenderAlpha69) rgba($textAlphaee) 45deg
 
     gaps_in = 10
     gaps_out = 20
@@ -27,21 +29,22 @@ decoration {
     dim_strength = 0.05
 
     drop_shadow = yes
-    shadow_range = 100
+    shadow_range = 40
+    shadow_scale = 2
     shadow_render_power = 5
-    col.shadow = 0x53000000
-    col.shadow_inactive = 0x32000000
+    col.shadow = $crust
+    col.shadow_inactive = $surface0
 }
 
 group {
-    col.border_inactive = rgba(b7bdf869)
-    col.border_active = rgba(c6d0f5ee) rgba(b7bdf869) rgba(b7bdf869) rgba(c6d0f5ee) 45deg
+    col.border_inactive = rgba($lavenderAlpha69)
+    col.border_active = rgba($textAlphaee) rgba($lavenderAlpha69) rgba($lavenderAlpha69) rgba($textAlphaee) 45deg
 
     groupbar {
-      col.active = rgba(b7bdf8ff)
-      col.inactive = rgba(c6d0f599)
+      col.active = rgba($lavenderAlphaCC)
+      col.inactive = rgba($subtext1Alpha99)
       font_family = JetBrainsMono Nerd Font
-      font_size = 11
-      text_color = rgba(cad3f5ff)
+      font_size = 10
+      text_color = rgb($baseAlpha)
     }
 }