From 0c266e915085280411df67507d924c4345974422 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Tue, 16 Jun 2026 22:24:02 +0545
Subject: [PATCH] refactor(src/shared/styles): replace var(--radius-*) with
 apply(radius-*) throughout shared styles

Use apply() to align with the updated CSS variable system and ensure consistent radius theming
---
 src/shared/styles/about.css               |  4 +-
 src/shared/styles/battery-widget.css      | 16 ++---
 src/shared/styles/constant.css            | 19 +++--
 src/shared/styles/controlcenter.css       | 86 +++++++++++------------
 src/shared/styles/dock.css                |  8 +--
 src/shared/styles/dropdown.css            |  4 +-
 src/shared/styles/launcher.css            | 22 +++---
 src/shared/styles/lock.css                |  4 +-
 src/shared/styles/notification-center.css | 32 ++++-----
 src/shared/styles/notification.css        | 16 ++---
 src/shared/styles/osd.css                 |  6 +-
 src/shared/styles/panel.css               |  6 +-
 src/shared/styles/password-dialog.css     |  8 +--
 src/shared/styles/player.css              | 22 +++---
 src/shared/styles/settings.css            | 16 ++---
 src/shared/styles/switcher.css            |  6 +-
 src/shared/styles/tray.css                |  2 +-
 src/shared/styles/widgets.css             | 12 ++--
 18 files changed, 144 insertions(+), 145 deletions(-)

diff --git a/src/shared/styles/about.css b/src/shared/styles/about.css
index 244cf8b..3d4e8a0 100644
--- a/src/shared/styles/about.css
+++ b/src/shared/styles/about.css
@@ -12,7 +12,7 @@
 
 #about-options {
   background-color: alpha(#333, 0.9);
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 2rem;
 }
 
@@ -61,7 +61,7 @@
 
 #more-info-button {
   background-color: #888888;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all 200ms ease-in-out;
diff --git a/src/shared/styles/battery-widget.css b/src/shared/styles/battery-widget.css
index 4f703b7..c042cd2 100644
--- a/src/shared/styles/battery-widget.css
+++ b/src/shared/styles/battery-widget.css
@@ -3,7 +3,7 @@
   /* background-color: alpha(@text-main, 0.09); */
   border: 1px solid @border-subtle;
   box-shadow: inset 0 0 200px 0 @border-subtle;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 
 #battery-widget {
@@ -40,7 +40,7 @@
 
 .battery-status-section {
   /* background: rgba(255, 255, 255, 0.06); */
-  /* border-radius: var(--radius-md); */
+  /* border-radius: apply(radius-md); */
   padding: 2px;
   /* margin: 8px 0; */
   /* border: 1px solid rgba(255, 255, 255, 0.08); */
@@ -56,7 +56,7 @@
 #energy-mode-button-clickable {
   background: transparent;
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   padding: 6px 12px;
   margin: 1px 0;
 }
@@ -66,7 +66,7 @@
 }
 
 #energy-mode-icon {
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   padding: 4px;
   margin-top: -2px;
   margin-bottom: -2px;
@@ -98,12 +98,12 @@
   margin-top: -5px;
   background: alpha(@text-main, 0.1);
   min-height: 30px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 .battery-settings-button {
   margin-top: -5px;
   min-height: 30px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 .battery-settings-button label {
   font-weight: 500;
@@ -133,7 +133,7 @@
 #game-mode-button-clickable {
   background: transparent;
   border: none;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   padding: 6px 12px;
   margin: 1px 0;
   /* min-height: 36px; */
@@ -144,7 +144,7 @@
 }
 
 #game-mode-icon {
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   padding: 4px;
   margin-right: 8px;
   background-color: rgba(255, 255, 255, 0.1);
diff --git a/src/shared/styles/constant.css b/src/shared/styles/constant.css
index 44807eb..8fe1a5a 100644
--- a/src/shared/styles/constant.css
+++ b/src/shared/styles/constant.css
@@ -20,13 +20,12 @@
 @define-color inner-shadow alpha(#000, 0.3);
 
 /* Constants */
-:vars {
-    --radius-xs: 4px;
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 20px;
-    --radius-full: 999px;
-    --transition-fast: 0.15s ease;
-    --transition-slow: 0.3s ease;
-}
\ No newline at end of file
+/* :vars replaced by defines */
+    @define radius-xs 4px;
+    @define radius-sm 8px;
+    @define radius-md 12px;
+    @define radius-lg 16px;
+    @define radius-xl 20px;
+    @define radius-full 999px;
+    @define transition-fast 0.15s;
+    @define transition-slow 0.3s;
diff --git a/src/shared/styles/controlcenter.css b/src/shared/styles/controlcenter.css
index 4f7d1a7..511913d 100644
--- a/src/shared/styles/controlcenter.css
+++ b/src/shared/styles/controlcenter.css
@@ -6,7 +6,7 @@
 
 #control-center-menu {
   background-color: transparent;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   box-shadow: none;
   margin: 0;
 }
@@ -15,7 +15,7 @@
   min-height: 0.09rem;
   margin: 3px 0;
   background-color: alpha(@text-main, 0.2);
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 
 /* #bluetooth-control-window { */
@@ -25,7 +25,7 @@
   /* background-color: alpha(@text-main, 0.09); */
   border: 1px solid @border-subtle;
   box-shadow: inset 0 0 200px 0 @border-subtle;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
 }
 
 #bluetooth-title,
@@ -38,7 +38,7 @@
   background-color: alpha(#010101, 0.01);
   box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
   /* border: 1px solid @border-strong; */
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 0.5rem;
 }
 
@@ -49,7 +49,7 @@
   background-color: @bg-darker;
   box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
   border: 1px solid @border-strong;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
 }
 
 /* Widgets */
@@ -82,7 +82,7 @@
 
 #wifi-dialog-background {
   background-color: alpha(@text-main, 0.05);
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 20px;
   min-width: 450px;
@@ -124,7 +124,7 @@
 #wifi-dialog-password-entry {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 8px 12px;
   color: @text-main;
   font-size: 13px;
@@ -144,7 +144,7 @@
   background-color: transparent;
   border: none;
   padding: 4px;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   min-width: 24px;
   min-height: 24px;
 }
@@ -168,7 +168,7 @@
 
 #wifi-dialog-cancel-button,
 #wifi-dialog-join-button {
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   font-size: 13px;
   font-weight: 500;
   min-width: 80px;
@@ -221,7 +221,7 @@
 /* } */
 
 #device-icon {
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   padding: 5px;
   margin-bottom: 2.5px;
   margin-top: 2.5px;
@@ -245,14 +245,14 @@
   min-width: 40px;
   min-height: 20px;
   background-color: #bababa;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 2px;
   transition: background-color 0.3s ease;
 }
 
 #toggle-button slider {
   background-color: @text-main;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 16px;
   min-height: 8px;
   transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25);
@@ -274,11 +274,11 @@
   background-color: @bg-darker;
   box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
   border: 1px solid @border-strong;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   margin: 5px;
   /* background-color: alpha(@text-dim, 0.1); */
   /* border: 0.5px solid alpha(#000, 0.4); */
-  /* border-radius: var(--radius-sm); */
+  /* border-radius: apply(radius-sm); */
   padding: 1rem;
 }
 
@@ -330,7 +330,7 @@
   min-width: 28px;
   min-height: 28px;
   margin: -2px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   /* background-image: none; */
   /* background-color: transparent; */
   /* min-width: 4px; */
@@ -343,7 +343,7 @@
   min-width: 30px;
   min-height: 30px;
   margin: -3px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   /* background-image: none; */
   /* background-color: transparent; */
   /* min-width: 4px; */
@@ -354,19 +354,19 @@
 #control-center-menu scale {
   background-color: transparent;
   margin-top: 10px;
-  border-radius: var(--radius-xl);
+  border-radius: apply(radius-xl);
 }
 
 #control-center-menu trough {
   min-width: 25px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #control-center-menu highlight {
   background: alpha(@text-main, 0.8);
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 
 #control-center-menu mark indicator {
@@ -389,7 +389,7 @@
   /* background-color: alpha(@text-dim, 0.1); */
   /* box-shadow: inset 0 0 200px 0 @border-subtle; */
   /* border: 0.5px solid alpha(#000, 0.4); */
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   padding: 1rem;
 
   /* padding: 1rem; */
@@ -403,7 +403,7 @@
 #back-button {
   padding: 8px 12px;
   background-color: @hover;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   border: none;
   color: @text-main;
   font-size: 13px;
@@ -420,9 +420,9 @@
   margin: 3px 0;
   padding: 16px;
   background-color: alpha(@text-main, 0.08);
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   border: 1px solid alpha(@text-main, 0.12);
-  transition: background-color var(--transition-fast);
+  transition: background-color apply(transition-fast);
 }
 
 .apple-app-volume-item:hover {
@@ -464,7 +464,7 @@
 #apple-volume-slider slider {
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
   /* border: 2px solid alpha(@accent, 0.8); */
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 20px;
   min-height: 20px;
   margin: -10px;
@@ -500,7 +500,7 @@
   margin: 8px 0;
   padding: 8px;
   background-color: alpha(@text-main, 0.05);
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   border: 1px solid alpha(@text-main, 0.1);
 }
 
@@ -518,14 +518,14 @@
 
 #app-volume-slider trough {
   min-width: 20px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #app-volume-slider highlight {
   background: alpha(#0078d4, 0.8);
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 
 #app-volume-slider slider {
@@ -533,7 +533,7 @@
   padding: 2px;
   min-width: 4px;
   min-height: 18px;
-  border-radius: var(--radius-xl);
+  border-radius: apply(radius-xl);
 }
 
 /* Circle button for per-app volume */
@@ -542,7 +542,7 @@
   border: 1px solid alpha(@text-dim, 0.6);
   /* min-width: 33px; */
   /* min-height: 30px; */
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 
 #per-app-volume-button:hover {
@@ -561,7 +561,7 @@
 
   border: 2px solid alpha(@text-dim, 0.6);
 
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 
   min-width: 30px;
 }
@@ -593,7 +593,7 @@
 #apple-seek-bar slider {
   background: #ffffff;
   border: 1px solid alpha(@accent, 0.8);
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 12px;
   min-height: 12px;
   margin: -4.5px;
@@ -756,7 +756,7 @@
 #macos-control-button {
   background: transparent;
   border: none;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 28px;
   /* Slightly smaller */
   opacity: 0.7;
@@ -764,7 +764,7 @@
   padding: 5px;
   /* Reduced padding */
   color: @text-main;
-  transition: all var(--transition-fast) ease;
+  transition: all apply(transition-fast) ease;
 }
 
 #macos-control-button:hover {
@@ -774,7 +774,7 @@
 #macos-play-button {
   background: transparent;
   border: none;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 36px;
   /* Slightly smaller */
   opacity: 0.7;
@@ -782,7 +782,7 @@
   padding: 7px;
   /* Reduced padding */
   color: @text-main;
-  transition: all var(--transition-fast) ease;
+  transition: all apply(transition-fast) ease;
 }
 
 #macos-play-button:hover {
@@ -798,7 +798,7 @@
 .macos-switcher-dot {
   background: alpha(@text-main, 0.3);
   /* border: none; */
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 12px;
   /* Smaller dots */
   min-height: 12px;
@@ -886,15 +886,15 @@
   background-color: alpha(@text-main, 0.05);
   box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
   border: 1px solid @border-strong;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   /* padding: 0.5rem; */
-  /* border-radius: var(--radius-md); */
+  /* border-radius: apply(radius-md); */
   padding: 10px;
 }
 
 /* WiFi network slots - macOS style */
 #wifi-network-slot button {
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   padding: 4px 4px;
   /* min-width: 280px; */
   margin: 2px 0;
@@ -932,7 +932,7 @@
   padding: 8px 6px;
   margin-bottom: -12px;
   margin-top: -6px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   /* transition: background-color 0.2s ease; */
 }
 
@@ -946,7 +946,7 @@
 
 #device-button {
   /* background-color: #000; */
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 
 .device-slot:hover {
@@ -973,14 +973,14 @@
 
 .wifi-icon-box {
   background-color: #aaaaaa;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   padding: 2px;
   /* margin-right: 8px; */
 }
 
 .wifi-icon-box-connected {
   background-color: @accent;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   padding: 2px;
   /* margin-right: 8px; */
 }
diff --git a/src/shared/styles/dock.css b/src/shared/styles/dock.css
index 8294c75..304a33a 100644
--- a/src/shared/styles/dock.css
+++ b/src/shared/styles/dock.css
@@ -3,8 +3,8 @@
     padding: 4px 4px;
     margin: 4px 4px;
     border: none;
-    border-radius: var(--radius-lg);
-    transition: all var(--transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
+    border-radius: apply(radius-lg);
+    transition: all apply(transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 #dock.shown {
@@ -54,13 +54,13 @@
 #dock_item_icon {
     border-radius: 13px;
     opacity: 0.7;
-    transition: all var(--transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition: all apply(transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
 /* #dock_item_indicator { */
 /*   transition: all 0.15s ease-out; */
 /*   min-height: 4px; */
-/*   border-radius: var(--radius-xs); */
+/*   border-radius: apply(radius-xs); */
 /* } */
 
 #dock_item {
diff --git a/src/shared/styles/dropdown.css b/src/shared/styles/dropdown.css
index aa726ba..f788bbf 100644
--- a/src/shared/styles/dropdown.css
+++ b/src/shared/styles/dropdown.css
@@ -15,7 +15,7 @@
 
 #dropdown-option {
   background-color: transparent;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all 0ms ease-in-out;
@@ -51,7 +51,7 @@
 
 #dropdown-divider-box {
   background-color: transparent;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 0px 10px;
   margin: 2px;
 }
diff --git a/src/shared/styles/launcher.css b/src/shared/styles/launcher.css
index 1af94a7..ba899ca 100644
--- a/src/shared/styles/launcher.css
+++ b/src/shared/styles/launcher.css
@@ -1,7 +1,7 @@
 #launcher {
     background-color: @shadow-color;
     padding: 0;
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
     min-width: 640px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -17,7 +17,7 @@
 #close-button,
 #config-button {
     background-color: transparent;
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
     padding: 6px;
     transition: all 0.15s ease;
 }
@@ -27,13 +27,13 @@
 #config-button:hover,
 #config-button:focus {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
 }
 
 #close-button.focused,
 #config-button.focused {
     background-color: rgba(0, 122, 255, 0.2);
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
     box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
 }
 
@@ -47,7 +47,7 @@
 
 #close-button:active {
     background-color: rgba(255, 255, 255, 0.2);
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
 }
 
 #close-label {
@@ -61,7 +61,7 @@
 
 #config-button:active {
     background-color: rgba(255, 255, 255, 0.2);
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
 }
 
 #config-label {
@@ -134,11 +134,11 @@
 }
 
 #launcher-result-item {
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     padding: 12px 16px;
     margin: 2px 0;
     min-height: 64px;
-    transition: all var(--transition-fast);
+    transition: all apply(transition-fast);
     background: transparent;
 }
 
@@ -156,7 +156,7 @@
 #launcher-result-item:selected,
 #launcher-result-item:hover,
 #launcher-result-item.selected {
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     background-color: alpha(@accent, 0.8);
     padding: 12px 16px;
     margin: 2px 0;
@@ -187,7 +187,7 @@
     min-width: 56px;
     min-height: 56px;
     margin-right: 16px;
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
 }
 
 #result-item-title {
@@ -218,7 +218,7 @@
     background: rgba(255, 255, 255, 0.05);
     color: rgba(255, 255, 255, 0.9);
     padding: 12px;
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     margin-bottom: 8px;
     font-size: 14px;
 }
diff --git a/src/shared/styles/lock.css b/src/shared/styles/lock.css
index a707be7..d3c8c71 100644
--- a/src/shared/styles/lock.css
+++ b/src/shared/styles/lock.css
@@ -12,7 +12,7 @@
 }
 #password-entry {
   background-color: alpha(@text-main, 0.4);
-  border-radius: var(--radius-xl);
+  border-radius: apply(radius-xl);
   color: white;
   min-width: 220px;
   min-height: 40px;
@@ -50,7 +50,7 @@
 
 #face-icon image {
   margin-bottom: 10px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 #face-icon {
   padding-bottom: 10px;
diff --git a/src/shared/styles/notification-center.css b/src/shared/styles/notification-center.css
index d7c0f3f..001b705 100644
--- a/src/shared/styles/notification-center.css
+++ b/src/shared/styles/notification-center.css
@@ -2,7 +2,7 @@
   background-color: transparent;
 
   /* border: 1px solid @border-subtle; */
-  border-radius: var(--radius-xl);
+  border-radius: apply(radius-xl);
   margin-right: 10px;
   /* padding: 20px; */
   /* margin: 6px; */
@@ -14,7 +14,7 @@
   min-height: 25px;
   min-width: 70px;
   border: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   margin-top: 10px;
 }
 
@@ -35,7 +35,7 @@
 #single-notification-content {
   background-color: alpha(#1c2328, 0.05);
   border: 1.5px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 12px;
   transition: all 0.2s ease;
 }
@@ -55,7 +55,7 @@
 #stack-shadow-bottom {
   background-color: alpha(#1c2328, 0.05);
   border-top: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   opacity: 1;
   min-height: 16px;
   margin-left: 20px;
@@ -68,7 +68,7 @@
   background-color: alpha(#1c2328, 0.05);
 
   border-top: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   opacity: 1;
   min-height: 20px;
   margin-left: 10px;
@@ -81,7 +81,7 @@
   background-color: alpha(#1c2328, 0.05);
 
   border: 1.2px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 12px;
   transition: all 0.2s ease;
 }
@@ -104,7 +104,7 @@
 #notification-content-collapsed {
   background-color: alpha(#000, 0.05);
   border: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   padding: 12px;
   margin: 2px 0;
   transition: all 0.2s ease;
@@ -145,7 +145,7 @@
   background-color: transparent;
   color: rgba(255, 255, 255, 0.7);
   border: 1px solid alpha(@text-main, 0.2);
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 2px 8px;
   font-size: 11px;
   margin-right: 8px;
@@ -160,7 +160,7 @@
   background-color: transparent;
   color: rgba(255, 255, 255, 0.7);
   border: 1px solid alpha(@text-main, 0.2);
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 2px 8px;
   font-size: 12px;
   min-width: 24px;
@@ -191,7 +191,7 @@
 .stacked-notification-item {
   background-color: alpha(#000, 0.05);
   border: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -226,7 +226,7 @@
 /* Make expanded notifications clickable with subtle hover effect */
 #expanded-notification-list:hover {
   background-color: alpha(#111, 0.9);
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   transition: background-color 0.2s ease;
 }
 
@@ -239,13 +239,13 @@
   background-color: alpha(#1c2328, 0.05);
   font-size: 12px;
   margin: 10px;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
 }
 
 #notification-close-all {
   margin: 10px 10px 10px 0;
   background-color: alpha(#1c2328, 0.05);
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
 }
 
 #notif-close-button {
@@ -270,7 +270,7 @@
   min-height: 40px;
   padding: 10px;
   border: 1px solid #525155;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
 }
 
 #notification-centre-notifs:last-child {
@@ -284,13 +284,13 @@
 #notification-close-header {
   min-width: 23px;
   min-height: 23px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 #notification-close:hover {
   background-color: alpha(#666, 0.8);
   min-width: 23px;
   min-height: 23px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
 #notification-close-summery:hover .notification-close-header button {
   background-color: transparent;
diff --git a/src/shared/styles/notification.css b/src/shared/styles/notification.css
index 9333e67..a9f91ed 100644
--- a/src/shared/styles/notification.css
+++ b/src/shared/styles/notification.css
@@ -1,7 +1,7 @@
 #notification {
   padding: 10px;
   background-color: alpha(@text-main, 0.03);
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   margin-top: 10px;
   margin-right: 10px;
   /* margin: 5px; */
@@ -9,7 +9,7 @@
 
 #notification-close-button {
   background-color: alpha(@text-dim, 0.3);
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 #notification-close-button:hover {
   background-color: alpha(@accent, 0.9);
@@ -18,8 +18,8 @@
 #notification-action-buttons button {
   background-color: alpha(@text-dim, 0.3);
   padding: 4px;
-  border-radius: var(--radius-sm);
-  transition: background-color var(--transition-fast);
+  border-radius: apply(radius-sm);
+  transition: background-color apply(transition-fast);
 }
 
 #notification-action-buttons button:hover {
@@ -35,11 +35,11 @@
 }
 
 #notification-icon {
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
 }
 
 #notification-image {
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
   color: var(--on-surface);
 }
 
@@ -64,9 +64,9 @@
 
 #notif-close-button {
   background-color: var(--surface);
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
   padding: 4px;
-  transition: background-color var(--transition-fast);
+  transition: background-color apply(transition-fast);
 }
 
 #notif-close-button:hover,
diff --git a/src/shared/styles/osd.css b/src/shared/styles/osd.css
index c45f1e7..f23d697 100644
--- a/src/shared/styles/osd.css
+++ b/src/shared/styles/osd.css
@@ -4,7 +4,7 @@
     margin: 70px;
     min-width: 180px;
     min-height: 200px;
-    border-radius: var(--radius-lg);
+    border-radius: apply(radius-lg);
 }
 
 #osd-container scale {
@@ -16,11 +16,11 @@
     min-height: 15px;
     margin-right: 4px;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    border-radius: var(--radius-lg);
+    border-radius: apply(radius-lg);
 }
 
 #osd-container trough highlight {
-    border-radius: var(--radius-full);
+    border-radius: apply(radius-full);
     background: var(--primary);
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
diff --git a/src/shared/styles/panel.css b/src/shared/styles/panel.css
index e583c08..edb2f19 100644
--- a/src/shared/styles/panel.css
+++ b/src/shared/styles/panel.css
@@ -33,7 +33,7 @@
 #tray-button {
     margin: 5px 0;
     padding: 0 2px;
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
 }
 
 #menubar label,
@@ -45,7 +45,7 @@
 #global-menu {
     margin: 5px 2px;
     padding: 0 5px;
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
 }
 
 #date-time {
@@ -55,7 +55,7 @@
 #workspaces>button {
     margin: 6px 0;
     padding: 0 16px;
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     min-width: 12px;
     border: 1px solid @border;
 }
diff --git a/src/shared/styles/password-dialog.css b/src/shared/styles/password-dialog.css
index 85b7253..c74ad74 100644
--- a/src/shared/styles/password-dialog.css
+++ b/src/shared/styles/password-dialog.css
@@ -4,7 +4,7 @@
 
 #wifi-dialog-background {
   background-color: alpha(@text-main, 0.05);
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 20px;
   min-width: 450px;
@@ -46,7 +46,7 @@
 #wifi-dialog-password-entry {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   padding: 8px 12px;
   color: @text-main;
   font-size: 13px;
@@ -66,7 +66,7 @@
   background-color: transparent;
   border: none;
   padding: 4px;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   min-width: 24px;
   min-height: 24px;
 }
@@ -90,7 +90,7 @@
 
 #wifi-dialog-cancel-button,
 #wifi-dialog-join-button {
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   font-size: 13px;
   font-weight: 500;
   min-width: 80px;
diff --git a/src/shared/styles/player.css b/src/shared/styles/player.css
index 777e807..699858f 100644
--- a/src/shared/styles/player.css
+++ b/src/shared/styles/player.css
@@ -1,5 +1,5 @@
 #player-stack-button {
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   min-width: 7px;
   min-height: 7px;
   margin: 10px 3px;
@@ -17,14 +17,14 @@
 }
 
 #player-stack-button.active {
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   background-color: rgb(221.25, 221.25, 223.65);
 }
 
 #outer-player-box {
   min-height: 110px;
   min-width: 320px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   margin: 0 6px;
   background-color: @shadow-color;
   box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
@@ -33,7 +33,7 @@
 #outer-player-box-c {
   min-height: 55px;
   min-width: 245px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   /* margin: 0 6px; */
   /* background-color: @shadow-color; */
   /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
@@ -41,7 +41,7 @@
 #outer-no-player-box-c {
   min-height: 55px;
   min-width: 345px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
   /* margin: 0 6px; */
   /* background-color: @shadow-color; */
   /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
@@ -50,7 +50,7 @@
   background-color: @bg-darker;
   box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
   border: 1px solid @border-strong;
-  border-radius: var(--radius-md);
+  border-radius: apply(radius-md);
   margin-top: 0.5rem;
   margin-left: 4px;
   margin-right: 4px;
@@ -58,7 +58,7 @@
 
   min-height: 50px;
   min-width: 330px;
-  /* border-radius: var(--radius-sm); */
+  /* border-radius: apply(radius-sm); */
   /* margin: 0 6px 10px; */
   /* border: 0.5px solid alpha(#000, 0.4); */
   /* background-color: alpha(@text-dim, 0.1); */
@@ -142,7 +142,7 @@
   margin-bottom: 10px;
   background-size: cover;
   margin-left: 10px;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
 }
 .album-image {
   min-width: 70px;
@@ -162,17 +162,17 @@
 #seek-bar scale {
   background-color: transparent;
   margin-top: 10px;
-  border-radius: var(--radius-sm);
+  border-radius: apply(radius-sm);
 }
 
 #seek-bar trough {
   min-width: 10px;
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #seek-bar highlight {
   background: alpha(@text-main, 0.8);
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
 }
diff --git a/src/shared/styles/settings.css b/src/shared/styles/settings.css
index dfb2d12..372f746 100644
--- a/src/shared/styles/settings.css
+++ b/src/shared/styles/settings.css
@@ -1,6 +1,6 @@
 #settings-window {
     background-color: var(--background);
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
     border: 1px solid var(--border);
     min-width: 850px;
     min-height: 600px;
@@ -19,7 +19,7 @@
 
 #settings-sidebar-button {
     padding: 10px 15px;
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     margin-bottom: 2px;
 }
 
@@ -53,7 +53,7 @@
 
 #settings-row {
     padding: 12px 15px;
-    border-radius: var(--radius-sm);
+    border-radius: apply(radius-sm);
     background-color: rgba(255, 255, 255, 0.03);
     margin-bottom: 2px;
 }
@@ -71,7 +71,7 @@
 #settings-switch {
     background-color: rgba(255, 255, 255, 0.1);
     padding: 6px 12px;
-    border-radius: var(--radius-xl);
+    border-radius: apply(radius-xl);
     min-width: 50px;
     transition: all 0.2s ease;
 }
@@ -84,7 +84,7 @@
 #settings-entry {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 8px 12px;
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
     border: 1px solid var(--border);
     min-width: 200px;
     color: var(--foreground);
@@ -97,7 +97,7 @@
 #settings-combo {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 4px 8px;
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
     border: 1px solid var(--border);
     min-width: 150px;
     color: var(--foreground);
@@ -113,7 +113,7 @@
 
 #settings-list-tag {
     background-color: rgba(255, 255, 255, 0.08);
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
     padding: 4px 10px;
     margin-right: 5px;
     margin-bottom: 5px;
@@ -141,6 +141,6 @@
     background-color: rgba(255, 255, 255, 0.03);
     border: 1px dashed var(--border);
     padding: 6px 12px;
-    border-radius: var(--radius-xs);
+    border-radius: apply(radius-xs);
     font-size: 13px;
 }
\ No newline at end of file
diff --git a/src/shared/styles/switcher.css b/src/shared/styles/switcher.css
index 17101a5..98ea9e2 100644
--- a/src/shared/styles/switcher.css
+++ b/src/shared/styles/switcher.css
@@ -1,6 +1,6 @@
 #application-switcher-container {
     background-color: var(--shadow);
-    border-radius: var(--radius-xl);
+    border-radius: apply(radius-xl);
     padding: 24px;
 }
 
@@ -17,7 +17,7 @@
 
 #window-button {
     background-color: transparent;
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
 }
 
 #window-button.active {
@@ -39,7 +39,7 @@
 }
 
 #switcher-icon-box {
-    border-radius: var(--radius-md);
+    border-radius: apply(radius-md);
     padding: 4px;
 }
 
diff --git a/src/shared/styles/tray.css b/src/shared/styles/tray.css
index 8979f2c..dbeb333 100644
--- a/src/shared/styles/tray.css
+++ b/src/shared/styles/tray.css
@@ -39,7 +39,7 @@ menu > menuitem:last-child {
 menu > menuitem:hover {
   transition: all 20ms ease-in-out;
   font-size: 13px;
-  border-radius: var(--radius-xs);
+  border-radius: apply(radius-xs);
   color: #222;
   background-color: alpha(#2369ff, 1);
 }
diff --git a/src/shared/styles/widgets.css b/src/shared/styles/widgets.css
index 1a8058c..6523dc8 100644
--- a/src/shared/styles/widgets.css
+++ b/src/shared/styles/widgets.css
@@ -2,8 +2,8 @@
   margin: 5px 5px 20px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: var(--radius-lg);
-  transition: all var(--transition-slow);
+  border-radius: apply(radius-lg);
+  transition: all apply(transition-slow);
   background: #202020;
 }
 
@@ -92,7 +92,7 @@
   margin: 5px 20px 20px 10px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
 }
 
 #calendar-widget {
@@ -148,7 +148,7 @@
   font-weight: 700;
   color: #191919;
   background-color: var(--blue-dim);
-  border-radius: var(--radius-full);
+  border-radius: apply(radius-full);
   min-width: 18px;
   min-height: 16px;
   padding: 2px;
@@ -195,7 +195,7 @@
   margin: 5px 10px 20px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
 }
 
 /* System Info Widget CSS  */
@@ -204,7 +204,7 @@
   margin: 5px 5px 5px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: var(--radius-lg);
+  border-radius: apply(radius-lg);
 }
 
 #ram-progress {