From 21e8a3e7da6e9949b941cbdaee8b8f7ec21258c0 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Tue, 14 Jul 2026 21:42:46 +0545
Subject: [PATCH] chore(src/styles): migrate to glass surface color tokens

Remove legacy color definition blocks and replace with new glass-surface, glass-panel, and interactive state tokens. Update all component styles to reference new variables.
---
 src/styles/constant.css                     | 127 ++++++++++++--------
 src/styles/controlpanel/dialogs.css         |  42 +++----
 src/styles/controlpanel/expanded-player.css |  24 ++--
 src/styles/controlpanel/general.css         |  10 +-
 src/styles/controlpanel/networks.css        |  17 ++-
 src/styles/controlpanel/per_app_volume.css  |  20 ++-
 src/styles/controlpanel/player.css          |  23 ++--
 src/styles/controlpanel/quicksettings.css   |  33 +++--
 src/styles/controlpanel/sliders.css         |   4 +-
 src/styles/main.css                         |   2 +-
 10 files changed, 158 insertions(+), 144 deletions(-)

diff --git a/src/styles/constant.css b/src/styles/constant.css
index 4dd4c42..daab134 100644
--- a/src/styles/constant.css
+++ b/src/styles/constant.css
@@ -17,57 +17,78 @@
 @define font-base 14px;
 @define font-lg 16px;
 
-@define-color bg-hover alpha(@foreground, 0.1);
-@define-color bg-active alpha(@foreground, 0.2);
-@define-color border-subtle alpha(@outline, 0.3);
-@define-color border-strong alpha(@outline, 0.4);
-@define-color shadow-main alpha(@shadow, 0.3);
-@define-color text-dim alpha(@foreground, 0.6);
-@define-color text-muted alpha(@foreground, 0.4);
 
-@define-color bg-a07 alpha(@background, 0.07);
-@define-color bg-a50 alpha(@background, 0.5);
-@define-color bg-a08 alpha(@background, 0.08);
-@define-color bg-a70 alpha(@background, 0.7);
-@define-color bg-a75 alpha(@background, 0.75);
-@define-color bg-a80 alpha(@background, 0.8);
-@define-color bg-a85 alpha(@background, 0.85);
-@define-color bg-a90 alpha(@background, 0.9);
-@define-color bg-a95 alpha(@background, 0.95);
-@define-color error-a20 alpha(@error, 0.2);
-@define-color error-a40 alpha(@error, 0.4);
-@define-color error-a70 alpha(@error, 0.7);
-@define-color fg-a03 alpha(@foreground, 0.03);
-@define-color fg-a05 alpha(@foreground, 0.05);
-@define-color fg-a06 alpha(@foreground, 0.06);
-@define-color fg-a08 alpha(@foreground, 0.08);
-@define-color fg-a09 alpha(@foreground, 0.09);
-@define-color fg-a12 alpha(@foreground, 0.12);
-@define-color fg-a15 alpha(@foreground, 0.15);
-@define-color fg-a18 alpha(@foreground, 0.18);
-@define-color fg-a25 alpha(@foreground, 0.25);
-@define-color fg-a30 alpha(@foreground, 0.3);
-@define-color fg-a50 alpha(@foreground, 0.5);
-@define-color fg-a70 alpha(@foreground, 0.7);
-@define-color fg-a80 alpha(@foreground, 0.8);
-@define-color fg-a85 alpha(@foreground, 0.85);
-@define-color fg-a90 alpha(@foreground, 0.9);
-@define-color fg-a95 alpha(@foreground, 0.95);
-@define-color outline-a40 alpha(@outline, 0.4);
-@define-color outline-a70 alpha(@outline, 0.7);
-@define-color primary-a20 alpha(@primary, 0.2);
-@define-color primary-a30 alpha(@primary, 0.3);
-@define-color primary-a40 alpha(@primary, 0.4);
-@define-color primary-a50 alpha(@primary, 0.5);
-@define-color primary-a60 alpha(@primary, 0.6);
-@define-color primary-a80 alpha(@primary, 0.8);
-@define-color primary-a90 alpha(@primary, 0.9);
-@define-color shadow-a02 alpha(@shadow, 0.02);
-@define-color shadow-a05 alpha(@shadow, 0.05);
-@define-color shadow-a10 alpha(@shadow, 0.1);
-@define-color shadow-a20 alpha(@shadow, 0.2);
-@define-color shadow-a25 alpha(@shadow, 0.25);
-@define-color shadow-a40 alpha(@shadow, 0.4);
-@define-color surface-a05 alpha(@surface, 0.05);
-@define-color surface-a90 alpha(@surface, 0.9);
-@define-color surface-bright-a90 alpha(@surface-bright, 0.9);
+/* Glass Surface Tiers */
+
+@define-color glass-surface-1 alpha(@background, 0.30);
+@define-color glass-surface-2 alpha(@background, 0.45);
+@define-color glass-surface-3 alpha(@background, 0.60);
+@define-color glass-surface-4 alpha(@background, 0.75);
+
+/* Glass Panels */
+
+@define-color glass-panel alpha(@background, 0.50);
+@define-color glass-dock alpha(@background, 0.35);
+@define-color glass-popup alpha(@background, 0.60);
+@define-color glass-card alpha(@background, 0.50);
+@define-color glass-widget alpha(@background, 0.55);
+@define-color glass-dialog alpha(@background, 0.65);
+@define-color glass-tooltip alpha(@background, 0.80);
+@define-color glass-menu alpha(@background, 0.65);
+
+/* Interactive States */
+
+@define-color glass-hover alpha(@foreground, 0.08);
+@define-color glass-active alpha(@foreground, 0.14);
+@define-color glass-selected alpha(@primary, 0.18);
+@define-color glass-focus alpha(@primary, 0.25);
+
+/* Borders */
+
+@define-color glass-border alpha(@outline, 0.18);
+@define-color glass-border-soft alpha(@outline, 0.10);
+@define-color glass-border-strong alpha(@outline, 0.30);
+
+/* Highlights */
+
+@define-color glass-highlight alpha(@foreground, 0.08);
+@define-color glass-highlight-soft alpha(@foreground, 0.04);
+@define-color glass-highlight-strong alpha(@foreground, 0.14);
+
+/* Accent */
+
+@define-color glass-accent @primary;
+@define-color glass-accent-soft alpha(@primary, 0.15);
+@define-color glass-accent-container alpha(@primary, 0.10);
+
+/* Text */
+
+@define-color glass-text @foreground;
+@define-color glass-text-secondary alpha(@foreground, 0.60);
+@define-color glass-text-disabled alpha(@foreground, 0.30);
+
+/* Semantic Status Colors */
+
+@define-color glass-success @secondary;
+@define-color glass-warning @tertiary;
+@define-color glass-error @error;
+@define-color glass-info @primary;
+
+/* Overlay Layers */
+
+@define-color glass-overlay alpha(@shadow, 0.35);
+@define-color glass-overlay-dark alpha(@shadow, 0.60);
+@define-color glass-overlay-light alpha(@shadow, 0.15);
+
+/* Desktop / Wallpaper Integration */
+
+@define-color desktop-selection alpha(@primary, 0.20);
+@define-color desktop-grid alpha(@foreground, 0.06);
+@define-color desktop-shadow alpha(@shadow, 0.30);
+
+/* Utility Components */
+
+@define-color glass-ring alpha(@primary, 0.50);
+@define-color glass-divider alpha(@outline, 0.12);
+@define-color glass-icon alpha(@foreground, 0.70);
+@define-color glass-scrollbar alpha(@foreground, 0.15);
diff --git a/src/styles/controlpanel/dialogs.css b/src/styles/controlpanel/dialogs.css
index 738cb6f..a5ecf07 100644
--- a/src/styles/controlpanel/dialogs.css
+++ b/src/styles/controlpanel/dialogs.css
@@ -5,9 +5,9 @@
 /* WiFi Password Dialog */
 
 #wifi-dialog-background {
-  background-color: @bg-a50;
+  background-color: @glass-dialog;
   border-radius: apply(radius-md);
-  border: 1px solid @fg-a10;
+  border: 1px solid @glass-border;
   padding: 20px;
   min-width: 450px;
 }
@@ -46,8 +46,8 @@
 }
 
 #wifi-dialog-password-entry {
-  background-color: @fg-a10;
-  border: 1px solid @fg-a20;
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-xs);
   padding: 8px 12px;
   color: @foreground;
@@ -55,9 +55,9 @@
 }
 
 #wifi-dialog-password-entry:focus {
-  border-color: @primary;
-  box-shadow: 0 0 0 2px @primary-a30;
-  background-color: @fg-a15;
+  border-color: @glass-ring;
+  box-shadow: 0 0 0 2px @glass-focus;
+  background-color: @glass-hover;
 }
 
 #wifi-dialog-show-password-box {
@@ -74,7 +74,7 @@
 }
 
 #wifi-dialog-show-password-button:hover {
-  background-color: @fg-a10;
+  background-color: @glass-hover;
 }
 
 #wifi-dialog-show-password-button image {
@@ -100,35 +100,35 @@
 }
 
 #wifi-dialog-cancel-button {
-  background-color: @fg-a10;
-  border: 1px solid @fg-a20;
+  background-color: @glass-hover;
+  border: 1px solid @glass-border;
   color: @foreground;
 }
 
 #wifi-dialog-cancel-button:hover {
-  background-color: @fg-a15;
+  background-color: @glass-active;
 }
 
 #wifi-dialog-join-button {
-  background-color: @primary;
-  border: 1px solid @primary;
+  background-color: @glass-accent;
+  border: 1px solid @glass-accent;
   color: @foreground;
 }
 
 #wifi-dialog-join-button:hover {
-  background-color: @secondary;
-  border-color: @secondary;
+  background-color: @glass-accent;
+  border-color: @glass-accent;
 }
 
 #wifi-dialog-join-button.disabled {
   opacity: 0.5;
-  background-color: @bg-a90;
-  border-color: @bg-a90;
-  color: @fg-a80;
+  background-color: @glass-surface-1;
+  border-color: @glass-surface-1;
+  color: @glass-text-secondary;
 }
 
 #wifi-dialog-join-button.disabled:hover {
-  background-color: @bg-a90;
-  border-color: @bg-a90;
-  color: @fg-a80;
+  background-color: @glass-surface-1;
+  border-color: @glass-surface-1;
+  color: @glass-text-secondary;
 }
diff --git a/src/styles/controlpanel/expanded-player.css b/src/styles/controlpanel/expanded-player.css
index d14bba7..54d5df4 100644
--- a/src/styles/controlpanel/expanded-player.css
+++ b/src/styles/controlpanel/expanded-player.css
@@ -22,14 +22,14 @@
   font-weight: 400;
   margin-top: -2px;
   font-size: apply(font-md);
-  color: alpha(@fg-a40, 0.8);
+  color: @glass-text-secondary;
 }
 
 #macos-player-album {
   font-weight: 400;
   margin-top: -4px;
   font-size: apply(font-md);
-  color: alpha(@fg-a40, 0.8);
+  color: @glass-text-secondary;
   margin-bottom: 8px;
 }
 
@@ -45,7 +45,7 @@
 
   min-height: 2px;
   border-radius: apply(radius-2xs);
-  background-color: @fg-a25;
+  background-color: @glass-border;
   border: none;
 }
 
@@ -62,7 +62,7 @@
   min-width: 1px;
   min-height: 8px;
   margin: -3px;
-  box-shadow: 0 1px 3px @shadow-a30;
+  box-shadow: 0 1px 3px @glass-overlay-light;
   transition: all apply(transition-xfast) ease;
 }
 
@@ -70,13 +70,13 @@
   min-width: 4px;
   min-height: 14px;
   margin: -5px;
-  box-shadow: 0 2px 6px @shadow-a40;
+  box-shadow: 0 2px 6px @glass-overlay;
 }
 
 #macos-position-label,
 #macos-length-label {
   font-size: apply(font-xs);
-  color: alpha(@fg-a40, 0.9);
+  color: @glass-text-secondary;
   font-weight: 400;
 }
 
@@ -123,7 +123,7 @@
 }
 
 .macos-switcher-dot {
-  background: @fg-a30;
+  background: @glass-border;
   border-radius: apply(radius-full);
   min-width: 12px;
   min-height: 12px;
@@ -131,12 +131,12 @@
 }
 
 .macos-switcher-dot:hover {
-  background: @fg-a50;
+  background: @glass-active;
 }
 
 .macos-switcher-dot.active {
   background: @foreground;
-  box-shadow: 0 0 0 1px @fg-a30;
+  box-shadow: 0 0 0 1px @glass-border;
 }
 
 #expanded-seek-bar {
@@ -150,7 +150,7 @@
 
   min-height: 2px;
   border-radius: apply(radius-2xs);
-  background-color: @fg-a25;
+  background-color: @glass-border;
   border: none;
 }
 
@@ -167,7 +167,7 @@
   min-width: 1px;
   min-height: 10px;
   margin: -3px;
-  box-shadow: 0 1px 3px @shadow-a30;
+  box-shadow: 0 1px 3px @glass-overlay-light;
   transition: all apply(transition-xfast) ease;
 }
 
@@ -175,5 +175,5 @@
   min-width: 4px;
   min-height: 14px;
   margin: -5px;
-  box-shadow: 0 2px 6px @shadow-a40;
+  box-shadow: 0 2px 6px @glass-overlay;
 }
diff --git a/src/styles/controlpanel/general.css b/src/styles/controlpanel/general.css
index b786097..f06eaf8 100644
--- a/src/styles/controlpanel/general.css
+++ b/src/styles/controlpanel/general.css
@@ -8,23 +8,21 @@
 #separator {
   min-height: 0.09rem;
   margin: 3px 0;
-  background-color: @fg-a20;
+  background-color: @glass-divider;
   border-radius: apply(radius-sm);
 }
 
 
 #control-center-menu {
-  background-color: @bg-a50;
+  background-color: @glass-popup;
   border-radius: apply(radius-md);
-  box-shadow: none;
   margin: 0;
 }
 
 
 #control-center-widgets {
-  background-color: @bg-a50;
-  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
-  border: 1px solid @border-strong;
+  background-color: @glass-card;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-md);
   padding: 0.5rem;
 }
diff --git a/src/styles/controlpanel/networks.css b/src/styles/controlpanel/networks.css
index 8169ea6..84ac69b 100644
--- a/src/styles/controlpanel/networks.css
+++ b/src/styles/controlpanel/networks.css
@@ -7,9 +7,8 @@
 /* macOS-style WiFi interface */
 #wifi-connections,
 #bluetooth-connections {
-  background-color: @bg-a50;
-  box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
-  border: 1px solid @outline-a40;
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-sm);
   padding: 10px;
 }
@@ -23,22 +22,22 @@
 
 #wifi-network-slot button:hover,
 #wifi-network-button:hover {
-  background-color: @fg-a18;
+  background-color: @glass-hover;
   border-radius: apply(radius-sm);
 }
 
 #wifi-network-slot button:hover .wifi-icon-box,
 #wifi-network-button:hover .wifi-icon-box {
-  background-color: @fg-a90;
+  background-color: @glass-text-secondary;
 }
 
 /* WiFi-specific device icon styles */
 #wifi-connections #device-icon {
-  background-color: @fg-a10;
+  background-color: @glass-hover;
 }
 
 #wifi-connections #device-icon.connected {
-  background-color: @primary;
+  background-color: @glass-accent;
   color: @foreground;
 }
 
@@ -49,7 +48,7 @@
 }
 
 #wifi-lock-icon {
-  color: @fg-a60;
+  color: @glass-text-secondary;
   margin-left: 8px;
 }
 
@@ -64,7 +63,7 @@
 }
 
 #wifi-other-button:hover {
-  background-color: @fg-a18;
+  background-color: @glass-hover;
 }
 
 #wifi-other-button:last-child {
diff --git a/src/styles/controlpanel/per_app_volume.css b/src/styles/controlpanel/per_app_volume.css
index 751f6d1..416d210 100644
--- a/src/styles/controlpanel/per_app_volume.css
+++ b/src/styles/controlpanel/per_app_volume.css
@@ -14,9 +14,9 @@
 .app-volume-item {
   margin: 8px 0;
   padding: 8px;
-  background-color: @fg-a05;
+  background-color: @glass-hover;
   border-radius: apply(radius-xs);
-  border: 1px solid @fg-a10;
+  border: 1px solid @glass-border-soft;
 }
 
 .app-name {
@@ -27,25 +27,23 @@
 }
 
 #per-app-volume-button {
-  background-color: @fg-a15;
-  border: 1px solid alpha(@fg-a40, 0.6);
+  background-color: @glass-hover;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-full);
 }
 
 #per-app-volume-button:hover {
-  background-color: @fg-a25;
-  box-shadow: 0 4px 12px @shadow-a20;
+  background-color: @glass-active;
 }
 
 #per-app-volume-button:active {
-  background-color: @fg-a20;
-  box-shadow: 0 1px 3px @shadow-a30;
+  background-color: @glass-selected;
 }
 
 #per-app-volume-icon {
-  background-color: @fg-a15;
+  background-color: @glass-hover;
 
-  border: 2px solid alpha(@fg-a40, 0.6);
+  border: 2px solid @glass-border;
 
   border-radius: apply(radius-full);
 
@@ -57,7 +55,7 @@
 .compact-app-volume-item {
   padding-bottom: 5px;
   padding-right: 14px;
-  border-bottom: 1px solid @fg-a10;
+  border-bottom: 1px solid @glass-divider;
 }
 
 #app-icon {
diff --git a/src/styles/controlpanel/player.css b/src/styles/controlpanel/player.css
index f64f586..c62d5f9 100644
--- a/src/styles/controlpanel/player.css
+++ b/src/styles/controlpanel/player.css
@@ -10,8 +10,8 @@
 }
 
 #player-stack-button:hover {
-  background-color: @bg-a80;
-  box-shadow: inset @fg-a50 0 0 10px;
+  background-color: @glass-hover;
+  box-shadow: inset @glass-highlight 0 0 10px;
 }
 
 #player-stack-button.active {
@@ -24,8 +24,8 @@
   min-width: 320px;
   border-radius: apply(radius-sm);
   margin: 0 6px;
-  background-color: alpha(@background, 0.3);
-  box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border-soft;
 }
 
 #outer-player-box-c {
@@ -35,17 +35,16 @@
 }
 
 #outer-no-player-box-c {
-  background-color: alpha(@background, 0.3);
-  border: 1px solid @outline-a40;
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border;
   min-height: 55px;
   min-width: 345px;
   border-radius: apply(radius-sm);
 }
 
 #box-c {
-  background-color: alpha(@background, 0.3);
-  box-shadow: inset 0 0 0 0.5px alpha(@fg-a40, 0.4);
-  border: 1px solid @outline-a40;
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-md);
   margin-top: 0.5rem;
   margin-left: 4px;
@@ -57,7 +56,7 @@
 
 #player-box:disabled highlight,
 #player-box:disabled progress {
-  background-color: @primary-a60;
+  background-color: @glass-ring;
   background-image: none;
 }
 
@@ -88,7 +87,7 @@
 
 #player-artist-c {
   margin-top: -5px;
-  color: @fg-a40;
+  color: @glass-text-secondary;
   font-size: apply(font-sm);
 }
 #player-artist,
@@ -107,7 +106,7 @@
 }
 
 #player-box #player-controls #button-box .player-button:disabled {
-  color: @fg-a85;
+  color: @glass-text-disabled;
 }
 
 #player-button {
diff --git a/src/styles/controlpanel/quicksettings.css b/src/styles/controlpanel/quicksettings.css
index 616d983..813b979 100644
--- a/src/styles/controlpanel/quicksettings.css
+++ b/src/styles/controlpanel/quicksettings.css
@@ -18,7 +18,7 @@
   font-size: apply(font-sm);
   margin-left: 5px;
   font-weight: 500;
-  color: @fg-a40;
+  color: @glass-text-secondary;
 }
 
 #device-icon {
@@ -27,17 +27,17 @@
   margin-bottom: 2.5px;
   margin-top: 2.5px;
   margin-right: 10px;
-  background-color: @bg-a50;
+  background-color: @glass-hover;
 }
 
 #device-icon.connected {
-  background-color: @primary;
+  background-color: @glass-accent;
 }
 
 #toggle-button {
   min-width: 40px;
   min-height: 22px;
-  background-color: @fg-a30;
+  background-color: @glass-border;
   border-radius: apply(radius-full);
   padding: 3px;
   transition: background-color apply(transition-slow) ease;
@@ -53,14 +53,13 @@
 }
 
 #toggle-button:checked {
-  background-color: @primary;
+  background-color: @glass-accent;
 }
 
 
 .menu {
-  background-color: alpha(@background, 0.3);
-  box-shadow: inset 0 0 0 0.5px alpha(@fg-a40, 0.4);
-  border: 1px solid @outline-a40;
+  background-color: @glass-surface-1;
+  border: 1px solid @glass-border;
   border-radius: apply(radius-md);
   margin: 5px;
   padding: 1rem;
@@ -86,13 +85,13 @@
 #control-center-menu mark indicator {
   background: none;
   background-image: none;
-  color: @fg-a20;
+  color: @glass-text-secondary;
 }
 
 #control-center-menu mark label {
   background: none;
   background-image: none;
-  color: @fg-a20;
+  color: @glass-text-secondary;
 }
 
 #device-button {
@@ -101,21 +100,21 @@
 }
 
 #device-button button:hover {
-  background-color: @fg-a18;
+  background-color: @glass-hover;
   border-radius: apply(radius-sm);
 }
 
 #device-button button:hover #device-icon {
-  background-color: @fg-a25;
+  background-color: @glass-active;
 }
 
 .button-hovered {
-  background-color: @fg-a10;
+  background-color: @glass-hover;
 }
 
 #device-button #battery-label {
   font-size: apply(font-xs);
-  color: @fg-a60;
+  color: @glass-text-secondary;
   margin-right: 4px;
 }
 
@@ -124,13 +123,13 @@
   font-weight: bold;
 }
 .wifi-icon-box {
-  background-color: @fg-a80;
+  background-color: @glass-text-secondary;
   border-radius: apply(radius-full);
   padding: 2px;
 }
 
 .wifi-icon-box-connected {
-  background-color: @primary;
+  background-color: @glass-accent;
   border-radius: apply(radius-full);
   padding: 2px;
 }
@@ -146,7 +145,7 @@
 .status-label {
   font-size: apply(font-xs);
   font-weight: 500;
-  color: @fg-a80;
+  color: @glass-text-secondary;
   font-family: "SF Pro Rounded";
 }
 
diff --git a/src/styles/controlpanel/sliders.css b/src/styles/controlpanel/sliders.css
index 4acb060..cf168b9 100644
--- a/src/styles/controlpanel/sliders.css
+++ b/src/styles/controlpanel/sliders.css
@@ -10,10 +10,10 @@
 
 #volume-widget-icon {
   margin-left: 10px;
-  color: @shadow-a40;
+  color: @glass-text-secondary;
 }
 
 #brightness-widget-icon {
   margin-left: 10px;
-  color: @shadow-a40;
+  color: @glass-text-secondary;
 }
diff --git a/src/styles/main.css b/src/styles/main.css
index c75cfe0..df55fcd 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -8,7 +8,7 @@
 
 * {
     all: unset;
-    color: @foreground;
+    color: @glass-text;
     font-size: unset;
     font-family: "SF Pro Rounded";
 }