From 9f192cdc56ea568a30418e768a53e11d83646231 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Tue, 14 Jul 2026 21:43:22 +0545
Subject: [PATCH] refactor(styles/widgets): update CSS color variables to use
 glass theming

---
 src/styles/widgets/about.css           | 15 ++++----
 src/styles/widgets/desktop-widgets.css | 34 ++++++++++--------
 src/styles/widgets/dropdown.css        | 11 +++---
 src/styles/widgets/other.css           |  6 ++--
 src/styles/widgets/pomodoro.css        | 19 +++++-----
 src/styles/widgets/todo.css            | 50 +++++++++++++-------------
 src/styles/widgets/tray.css            | 12 +++----
 7 files changed, 72 insertions(+), 75 deletions(-)

diff --git a/src/styles/widgets/about.css b/src/styles/widgets/about.css
index 1f6dfa6..40cb143 100644
--- a/src/styles/widgets/about.css
+++ b/src/styles/widgets/about.css
@@ -1,33 +1,30 @@
 #about-menu {
-  background-color: @bg-a50;
+  background-color: @glass-card;
 
-  box-shadow:
-    inset 0 -0.5px 0 0.5px alpha(@bg-a90, 0.7),
-    inset 0 0.5px 0 0.5px @outline-a70;
-  border: 1px solid @outline-a30;
+  border: 1px solid @glass-border;
   border-top: none;
   border-radius: 1.25rem;
   padding: 2rem;
 }
 
 #vendor-label {
-  color: @fg-a40;
+  color: @glass-text-secondary;
   margin-top: -1rem;
 }
 
 #info-label {
-  color: @fg-a60;
+  color: @glass-text-secondary;
 }
 
 #more-info-button {
-  background-color: @fg-a40;
+  background-color: @glass-hover;
   border-radius: apply(radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all apply(transition-medium) ease-in-out;
 }
 #more-info-button:hover {
-  background-color: @primary;
+  background-color: @glass-accent;
 }
 
 #more-info-button label {
diff --git a/src/styles/widgets/desktop-widgets.css b/src/styles/widgets/desktop-widgets.css
index 46ba10e..d8ebaf1 100644
--- a/src/styles/widgets/desktop-widgets.css
+++ b/src/styles/widgets/desktop-widgets.css
@@ -4,7 +4,8 @@
   min-height: 170px;
   border-radius: apply(radius-lg);
   transition: all apply(transition-slow);
-  background: @surface;
+  background: @glass-widget;
+  border: 1px solid @glass-border-soft;
 }
 
 /* Base Weather Layout */
@@ -13,7 +14,7 @@
 }
 
 #city {
-  color: @fg-a85;
+  color: @glass-text;
   font-weight: 600;
   font-size: 18px;
 }
@@ -39,7 +40,7 @@
 #feels-like {
   font-weight: 500;
   font-size: 15px;
-  color: @fg-a80;
+  color: @glass-text;
 }
 
 /* Weather Condition Gradients */
@@ -56,7 +57,7 @@
 }
 
 .weather-overcast {
-  background: linear-gradient(135deg, @bg-a80 0%, @bg-a80 100%);
+  background: linear-gradient(135deg, @glass-surface-4 0%, @glass-surface-4 100%);
 }
 
 .weather-fog {
@@ -64,15 +65,15 @@
 }
 
 .weather-light-rain {
-  background: linear-gradient(135deg, @on-primary 0%, @bg-a90 100%);
+  background: linear-gradient(135deg, @on-primary 0%, @glass-dialog 100%);
 }
 
 .weather-rain {
-  background: linear-gradient(135deg, @bg-a70 0%, @on-tertiary 100%);
+  background: linear-gradient(135deg, @glass-surface-3 0%, @on-tertiary 100%);
 }
 
 .weather-heavy-rain {
-  background: linear-gradient(135deg, @surface 0%, @bg-a90 100%);
+  background: linear-gradient(135deg, @surface 0%, @glass-dialog 100%);
 }
 
 .weather-snow,
@@ -86,11 +87,12 @@
 
 /* Calendar Widget */
 #calendar-box-widget {
-  background: linear-gradient(to bottom, @surface, @background);
+  background: @glass-widget;
   margin: 5px 20px 20px 10px;
   min-width: 170px;
   min-height: 170px;
   border-radius: apply(radius-lg);
+  border: 1px solid @glass-border-soft;
 }
 
 #calendar-widget {
@@ -119,7 +121,7 @@
 #calendar-day-header-weekend {
   font-size: apply(font-sm);
   font-weight: 600;
-  color: @fg-a50;
+  color: @glass-text-secondary;
   min-width: 18px;
   min-height: 10px;
 }
@@ -136,7 +138,7 @@
 #calendar-day-weekend {
   font-size: apply(font-sm);
   font-weight: 500;
-  color: @fg-a50;
+  color: @glass-text-secondary;
   min-width: 18px;
   min-height: 16px;
 }
@@ -172,12 +174,12 @@
   padding: 5px;
   margin-top: 10px;
   font-size: 30px;
-  color: @fg-a90;
+  color: @glass-text;
   font-weight: 600;
 }
 
 #date label {
-  color: @fg-a90;
+  color: @glass-text;
 
   margin-top: -10px;
   font-size: 90px;
@@ -189,20 +191,22 @@
 }
 
 #date-container {
-  background: linear-gradient(to bottom, @surface, @background);
+  background: @glass-widget;
   margin: 5px 10px 20px 5px;
   min-width: 170px;
   min-height: 170px;
   border-radius: apply(radius-lg);
+  border: 1px solid @glass-border-soft;
 }
 
 /* System Info Widget CSS  */
 #info-box-widget {
-  background: linear-gradient(to bottom, @surface, @background);
+  background: @glass-widget;
   margin: 5px 5px 5px 5px;
   min-width: 170px;
   min-height: 170px;
   border-radius: apply(radius-lg);
+  border: 1px solid @glass-border-soft;
 }
 
 #progress-label {
@@ -220,7 +224,7 @@
 #info-text {
   font-size: apply(font-md);
   font-weight: 500;
-  color: @fg-a60;
+  color: @glass-text-secondary;
   min-width: 32px;
 }
 
diff --git a/src/styles/widgets/dropdown.css b/src/styles/widgets/dropdown.css
index 02d15bd..1c00a8e 100644
--- a/src/styles/widgets/dropdown.css
+++ b/src/styles/widgets/dropdown.css
@@ -6,9 +6,8 @@
 }
 
 #dropdown-options {
-  background-color: @bg-a50;
-  box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
-  border: 1px solid @outline-a40;
+  background-color: @glass-menu;
+  border: 1px solid @glass-border;
   border-radius: 0.75rem;
   padding: 0.5rem;
 }
@@ -24,7 +23,7 @@
 #dropdown-option:hover {
   color: @on-primary;
   transition: all 20ms ease-in-out;
-  background-color: @primary;
+  background-color: @glass-accent;
 }
 
 #dropdown-option:hover #dropdown-option-label {
@@ -48,7 +47,7 @@
 
 #dropdown-option-keybind {
   font-weight: 500;
-  color: @fg-a80;
+  color: @glass-text-secondary;
 }
 
 /* Divider */
@@ -60,6 +59,6 @@
   margin: 2px;
 }
 #dropdown-divider {
-  border-bottom: 1px solid alpha(@fg-a80, 0.3);
+  border-bottom: 1px solid @glass-divider;
   margin: 2px 0;
 }
diff --git a/src/styles/widgets/other.css b/src/styles/widgets/other.css
index 4bca6fc..979a559 100644
--- a/src/styles/widgets/other.css
+++ b/src/styles/widgets/other.css
@@ -12,14 +12,14 @@
 
 
 .flat-scale trough {
-    background-color: alpha(@bg-a80, 0.5);
+    background-color: @glass-surface-1;
     min-height: 25px;
     border-radius: apply(radius-full);
-    border: 1px solid alpha(@bg-a75, 0.3);
+    border: 1px solid @glass-border-soft;
 }
 
 .flat-scale highlight {
-    background-color: @fg-a80;
+    background-color: @glass-text-secondary;
     min-height: 25px;
     border-radius: apply(radius-full);
 }
diff --git a/src/styles/widgets/pomodoro.css b/src/styles/widgets/pomodoro.css
index 7f40653..b286711 100644
--- a/src/styles/widgets/pomodoro.css
+++ b/src/styles/widgets/pomodoro.css
@@ -1,11 +1,10 @@
 
 #pomodoro-popup {
-    background-color: @bg-a50;
+    background-color: @glass-card;
     border-radius: apply(radius-md);
-    box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
     padding: 15px;
     margin-right: 20px;
-    border: 1px solid @border-strong;
+    border: 1px solid @glass-border;
 }
 
 #pomodoro-container {
@@ -23,7 +22,7 @@
 #pomodoro-cycle {
     font-size: 13px;
     font-weight: 500;
-    color: @fg-a60;
+    color: @glass-text-secondary;
     font-family: "SF Pro Rounded";
 }
 
@@ -56,7 +55,7 @@
 }
 
 #pomodoro-phase-btn {
-    background-color: @fg-a18;
+    background-color: @glass-highlight-strong;
     color: alpha(@theme_fg_color, 0.7);
     border-radius: apply(radius-sm);
     padding: 5px 14px;
@@ -65,7 +64,7 @@
 }
 
 #pomodoro-phase-btn:hover {
-    background-color: @fg-a25;
+    background-color: @glass-active;
     color: @theme_fg_color;
 }
 
@@ -88,7 +87,7 @@
 }
 
 #pomodoro-reset-btn, #pomodoro-secondary-btn {
-    background-color: @fg-a18;
+    background-color: @glass-highlight-strong;
     color: @theme_fg_color;
     border-radius: apply(radius-sm);
     padding: 6px 15px;
@@ -97,11 +96,11 @@
 }
 
 #pomodoro-reset-btn:hover, #pomodoro-secondary-btn:hover {
-    background-color: @fg-a25;
+    background-color: @glass-active;
 }
 
 #pomodoro-spin-box {
-    background-color: @fg-a18;
+    background-color: @glass-highlight-strong;
     border-radius: apply(radius-sm);
     padding: 2px;
 }
@@ -118,5 +117,5 @@
 }
 
 #pomodoro-spin-btn:hover {
-    background-color: @fg-a25;
+    background-color: @glass-active;
 }
diff --git a/src/styles/widgets/todo.css b/src/styles/widgets/todo.css
index 123caea..f4e66d7 100644
--- a/src/styles/widgets/todo.css
+++ b/src/styles/widgets/todo.css
@@ -1,12 +1,11 @@
 
 /* === Main Todo List === */
 #todo-list-menu {
-    background-color: @bg-a50;
+    background-color: @glass-card;
     border-radius: apply(radius-md);
-    box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
     padding: 15px;
     margin-right: 20px;
-    border: 1px solid @border-strong;
+    border: 1px solid @glass-border;
 }
 
 #todo-main-container {
@@ -28,13 +27,13 @@
 
 #todo-stats {
     font-size: 12px;
-    color: @fg-a60;
+    color: @glass-text-secondary;
     font-family: "SF Pro Rounded";
 }
 
 /* === Add Task Section === */
 #todo-add-section {
-    background-color: @fg-a18;
+    background-color: @glass-hover;
     border-radius: apply(radius-sm);
     padding: 8px 10px;
 }
@@ -49,11 +48,11 @@
 }
 
 #new-todo-entry placeholder {
-    color: @fg-a40;
+    color: @glass-text-disabled;
 }
 
 #add-todo-button {
-    background-color: @primary;
+    background-color: @glass-accent;
     border-radius: apply(radius-full);
     padding: 6px;
     min-width: 24px;
@@ -61,7 +60,7 @@
 }
 
 #add-todo-button:hover {
-    background-color: alpha(@primary, 0.8);
+    background-color: alpha(@glass-accent, 0.8);
 }
 
 /* === Todo Items === */
@@ -77,12 +76,12 @@
 }
 
 #todo-item:hover {
-    background-color: alpha(@fg-a10, 0.3);
+    background-color: @glass-hover;
 }
 
 #todo-divider {
     min-height: 1px;
-    background-color: alpha(@fg-a20, 0.5);
+    background-color: @glass-highlight-soft;
     margin: 0 4px;
 }
 
@@ -104,7 +103,7 @@
 }
 
 #todo-checkbox:hover {
-    background-color: alpha(@fg-a18, 0.5);
+    background-color: @glass-hover;
     border-radius: apply(radius-sm);
 }
 
@@ -125,7 +124,7 @@
     min-width: 24px;
     min-height: 24px;
     font-size: 16px;
-    color: @fg-a40;
+    color: @glass-text-secondary;
     opacity: 0;
     transition: opacity 0.2s ease;
 }
@@ -136,7 +135,7 @@
 
 #todo-options-btn:hover {
     color: @foreground;
-    background-color: alpha(@fg-a18, 0.5);
+    background-color: @glass-hover;
     border-radius: apply(radius-sm);
 }
 
@@ -145,7 +144,7 @@
     background: transparent;
     border: none;
     font-size: 12px;
-    color: @fg-a40;
+    color: @glass-text-disabled;
     padding: 4px;
 }
 
@@ -155,19 +154,18 @@
 
 #todo-footer {
     font-size: 11px;
-    color: @fg-a40;
+    color: @glass-text-secondary;
     font-family: "SF Pro Rounded";
     margin-top: 4px;
 }
 
 /* === Options Popover === */
 #todo-options-popover {
-    background-color: @bg-a50;
+    background-color: @glass-card;
     border-radius: apply(radius-md);
-    box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
     padding: 10px;
     margin-right: 20px;
-    border: 1px solid @border-strong;
+    border: 1px solid @glass-border;
     min-width: 340px;
 }
 
@@ -184,13 +182,13 @@
 
 #todo-opt-subtitle {
     font-size: 11px;
-    color: @fg-a60;
+    color: @glass-text-secondary;
     font-family: "SF Pro Rounded";
 }
 
 /* === Color Swatches === */
 #todo-color-swatch {
-    background-color: @fg-a18;
+    background-color: @glass-hover;
     border-radius: apply(radius-full);
     padding: 0;
     min-width: 28px;
@@ -200,7 +198,7 @@
 }
 
 #todo-color-swatch:hover {
-    border-color: alpha(@foreground, 0.3);
+    border-color: @glass-border;
 }
 
 #todo-color-swatch.selected {
@@ -210,7 +208,7 @@
 
 /* === Deadline Pill === */
 #todo-deadline-pill {
-    background-color: @fg-a18;
+    background-color: @glass-hover;
     border-radius: apply(radius-full);
     padding: 6px 12px;
 }
@@ -224,7 +222,7 @@
 
 /* === Stepper (reuse pomodoro style) === */
 #todo-spin-box {
-    background-color: @fg-a10;
+    background-color: @glass-hover;
     border-radius: apply(radius-sm);
     padding: 2px;
 }
@@ -241,7 +239,7 @@
 }
 
 #todo-spin-btn:hover {
-    background-color: @fg-a25;
+    background-color: @glass-active;
 }
 
 #todo-spin-value {
@@ -252,7 +250,7 @@
 
 /* === Preset Buttons === */
 #todo-preset-btn {
-    background-color: @fg-a18;
+    background-color: @glass-hover;
     border-radius: apply(radius-full);
     padding: 6px 12px;
     font-size: 11px;
@@ -261,5 +259,5 @@
 }
 
 #todo-preset-btn:hover {
-    background-color: @fg-a25;
+    background-color: @glass-active;
 }
diff --git a/src/styles/widgets/tray.css b/src/styles/widgets/tray.css
index 8f1dccd..564d647 100644
--- a/src/styles/widgets/tray.css
+++ b/src/styles/widgets/tray.css
@@ -1,7 +1,7 @@
 tooltip {
-  border: @bg-a90 solid 1px;
+  border: 1px solid @glass-border;
   border-radius: 0.75rem;
-  background-color: @bg-a50;
+  background-color: @glass-tooltip;
 }
 
 @keyframes tooltipShow {
@@ -20,17 +20,17 @@ tooltip > * {
 }
 
 menu {
-  border: @bg-a90 solid 1px;
+  border: 1px solid @glass-border;
   border-radius: 0.75rem;
   transition: all apply(transition-xfast) ease-in-out;
-  background-color: @bg-a50;
+  background-color: @glass-menu;
 }
 
 menu > menuitem {
   padding: 5px 10px;
   margin: 1px 2px;
   font-size: apply(font-md);
-  border-bottom: @bg-a90 solid 1px;
+  border-bottom: 1px solid @glass-divider;
 }
 
 menu > menuitem:last-child {
@@ -41,7 +41,7 @@ menu > menuitem:hover {
   font-size: apply(font-md);
   border-radius: apply(radius-xs);
   color: @on-primary;
-  background-color: @primary;
+  background-color: @glass-accent;
 }
 
 menu > menuitem:hover > label {