From 5e542eed4fe267e5360f8619727cf30b72925c94 Mon Sep 17 00:00:00 2001 From: S4NKALP Date: Fri, 17 Jul 2026 22:28:10 +0545 Subject: [PATCH] style: replace raw colors.css refs with glass tokens from constant.css Replace @foreground, @primary, @error, @outline, @shadow, @secondary and their var() equivalents with semantic glass-* tokens across 22 files. Colors without glass equivalents (@on-primary, @cyan, etc.) left as-is. --- src/styles/controlpanel/dialogs.css | 18 ++++++------ src/styles/controlpanel/expanded-player.css | 16 +++++------ src/styles/controlpanel/networks.css | 4 +-- src/styles/controlpanel/per_app_volume.css | 4 +-- src/styles/controlpanel/player.css | 2 +- src/styles/controlpanel/quicksettings.css | 4 +-- src/styles/notification/center_expanded.css | 4 +-- .../notification/notification_buttons.css | 8 +++--- .../notification/notification_close.css | 2 +- .../notification/notification_content.css | 2 +- src/styles/widgets/about.css | 2 +- src/styles/widgets/desktop-widgets.css | 28 +++++++++---------- src/styles/widgets/dropdown.css | 2 +- src/styles/widgets/pomodoro.css | 18 ++++++------ src/styles/widgets/todo.css | 26 ++++++++--------- src/styles/window/battery.css | 2 +- src/styles/window/lock.css | 4 +-- src/styles/window/panel.css | 8 +++--- src/styles/window/screencapture.css | 2 +- src/styles/window/settings.css | 6 ++-- src/styles/window/spotlight.css | 16 +++++------ src/styles/window/switcher.css | 2 +- 22 files changed, 90 insertions(+), 90 deletions(-) diff --git a/src/styles/controlpanel/dialogs.css b/src/styles/controlpanel/dialogs.css index a5ecf07..b017b46 100644 --- a/src/styles/controlpanel/dialogs.css +++ b/src/styles/controlpanel/dialogs.css @@ -17,18 +17,18 @@ } #wifi-dialog-icon { - color: @primary; + color: @glass-accent; margin-right: 4px; } #wifi-dialog-title { - color: @foreground; + color: @glass-text; font-size: apply(font-base); font-weight: 500; } #wifi-dialog-error { - color: @error; + color: @glass-error; font-size: apply(font-sm); font-weight: 500; /* margin-bottom: 8px; */ @@ -39,7 +39,7 @@ } #wifi-dialog-password-label { - color: @foreground; + color: @glass-text; font-size: apply(font-md); font-weight: 500; margin-bottom: 4px; @@ -50,7 +50,7 @@ border: 1px solid @glass-border; border-radius: apply(radius-xs); padding: 8px 12px; - color: @foreground; + color: @glass-text; font-size: apply(font-md); } @@ -78,11 +78,11 @@ } #wifi-dialog-show-password-button image { - color: @foreground; + color: @glass-text; } #wifi-dialog-show-password-label { - color: @foreground; + color: @glass-text; font-size: apply(font-sm); } @@ -102,7 +102,7 @@ #wifi-dialog-cancel-button { background-color: @glass-hover; border: 1px solid @glass-border; - color: @foreground; + color: @glass-text; } #wifi-dialog-cancel-button:hover { @@ -112,7 +112,7 @@ #wifi-dialog-join-button { background-color: @glass-accent; border: 1px solid @glass-accent; - color: @foreground; + color: @glass-text; } #wifi-dialog-join-button:hover { diff --git a/src/styles/controlpanel/expanded-player.css b/src/styles/controlpanel/expanded-player.css index 54d5df4..9ba02c1 100644 --- a/src/styles/controlpanel/expanded-player.css +++ b/src/styles/controlpanel/expanded-player.css @@ -14,7 +14,7 @@ #macos-player-title { font-weight: 600; font-size: apply(font-lg); - color: @foreground; + color: @glass-text; margin-bottom: 2px; } @@ -50,13 +50,13 @@ } #macos-seek-bar highlight { - background: @foreground; + background: @glass-text; border-radius: apply(radius-2xs); border: none; } #macos-seek-bar slider { - background: @foreground; + background: @glass-text; border: none; border-radius: 20%; min-width: 1px; @@ -93,7 +93,7 @@ opacity: 0.7; min-height: 28px; padding: 5px; - color: @foreground; + color: @glass-text; transition: all apply(transition-fast) ease; } @@ -109,7 +109,7 @@ opacity: 0.7; min-height: 36px; padding: 7px; - color: @foreground; + color: @glass-text; transition: all apply(transition-fast) ease; } @@ -135,7 +135,7 @@ } .macos-switcher-dot.active { - background: @foreground; + background: @glass-text; box-shadow: 0 0 0 1px @glass-border; } @@ -155,13 +155,13 @@ } #expanded-seek-bar highlight { - background: @foreground; + background: @glass-text; border-radius: apply(radius-2xs); border: none; } #expanded-seek-bar slider { - background: @foreground; + background: @glass-text; border: none; border-radius: 20%; min-width: 1px; diff --git a/src/styles/controlpanel/networks.css b/src/styles/controlpanel/networks.css index 84ac69b..9a5d364 100644 --- a/src/styles/controlpanel/networks.css +++ b/src/styles/controlpanel/networks.css @@ -38,11 +38,11 @@ #wifi-connections #device-icon.connected { background-color: @glass-accent; - color: @foreground; + color: @glass-text; } #wifi-network-name { - color: @foreground; + color: @glass-text; font-size: apply(font-base); font-weight: 500; } diff --git a/src/styles/controlpanel/per_app_volume.css b/src/styles/controlpanel/per_app_volume.css index 416d210..778d525 100644 --- a/src/styles/controlpanel/per_app_volume.css +++ b/src/styles/controlpanel/per_app_volume.css @@ -22,7 +22,7 @@ .app-name { font-size: apply(font-md); font-weight: 500; - color: @foreground; + color: @glass-text; margin-bottom: 5px; } @@ -73,5 +73,5 @@ padding-left: 5px; margin-top: -2px; font-weight: bold; - color: @foreground; + color: @glass-text; } diff --git a/src/styles/controlpanel/player.css b/src/styles/controlpanel/player.css index c62d5f9..c6b2f82 100644 --- a/src/styles/controlpanel/player.css +++ b/src/styles/controlpanel/player.css @@ -16,7 +16,7 @@ #player-stack-button.active { border-radius: apply(radius-xs); - background-color: @foreground; + background-color: @glass-text; } #outer-player-box { diff --git a/src/styles/controlpanel/quicksettings.css b/src/styles/controlpanel/quicksettings.css index 813b979..2e3e901 100644 --- a/src/styles/controlpanel/quicksettings.css +++ b/src/styles/controlpanel/quicksettings.css @@ -7,7 +7,7 @@ } .icon { - background-color: @primary; + background-color: @glass-accent; font-size: 15px; padding: 20px 20px; } @@ -44,7 +44,7 @@ } #toggle-button slider { - background-color: @foreground; + background-color: @glass-text; border-radius: apply(radius-full); min-width: 16px; min-height: 16px; diff --git a/src/styles/notification/center_expanded.css b/src/styles/notification/center_expanded.css index 1c07ab2..73f1d6a 100644 --- a/src/styles/notification/center_expanded.css +++ b/src/styles/notification/center_expanded.css @@ -8,7 +8,7 @@ } #notification-group-title { - color: @foreground; + color: @glass-text; font-weight: bold; font-size: apply(font-base); } @@ -40,7 +40,7 @@ #notification-close-all:hover { background-color: @glass-error; - color: @foreground; + color: @glass-text; border-color: @glass-error; } diff --git a/src/styles/notification/notification_buttons.css b/src/styles/notification/notification_buttons.css index 13bc476..6cfea7f 100644 --- a/src/styles/notification/notification_buttons.css +++ b/src/styles/notification/notification_buttons.css @@ -34,11 +34,11 @@ } #notification-action-buttons button:active { - background-color: var(--primary); + background-color: @glass-accent; } #notification-action-buttons button:active #button-label { - color: var(--shadow); + color: @glass-overlay-dark; } .mac-options-button { @@ -77,8 +77,8 @@ menu.mac-context-menu { } .mac-context-menu menuitem:hover { - background-color: var(--primary); - color: var(--shadow); + background-color: @glass-accent; + color: @glass-overlay-dark; } .mac-header-pill { diff --git a/src/styles/notification/notification_close.css b/src/styles/notification/notification_close.css index 8deea84..f6ac0af 100644 --- a/src/styles/notification/notification_close.css +++ b/src/styles/notification/notification_close.css @@ -20,5 +20,5 @@ } #notif-close-button:active #notif-close-label { - color: var(--shadow); + color: @glass-overlay-dark; } diff --git a/src/styles/notification/notification_content.css b/src/styles/notification/notification_content.css index 9157261..70c14f8 100644 --- a/src/styles/notification/notification_content.css +++ b/src/styles/notification/notification_content.css @@ -18,7 +18,7 @@ } #notification-app-name { - color: var(--outline); + color: @glass-border; font-weight: bold; } diff --git a/src/styles/widgets/about.css b/src/styles/widgets/about.css index 40cb143..e7458b1 100644 --- a/src/styles/widgets/about.css +++ b/src/styles/widgets/about.css @@ -31,5 +31,5 @@ font-size: apply(font-sm); margin: 0px; font-weight: 400; - color: @foreground; + color: @glass-text; } diff --git a/src/styles/widgets/desktop-widgets.css b/src/styles/widgets/desktop-widgets.css index d8ebaf1..75d7266 100644 --- a/src/styles/widgets/desktop-widgets.css +++ b/src/styles/widgets/desktop-widgets.css @@ -45,15 +45,15 @@ /* Weather Condition Gradients */ .weather-clear { - background: linear-gradient(135deg, @primary 0%, @cyan 100%); + background: linear-gradient(135deg, @glass-accent 0%, @cyan 100%); } .weather-mostly-clear { - background: linear-gradient(135deg, @primary 0%, @primary 100%); + background: linear-gradient(135deg, @glass-accent 0%, @glass-accent 100%); } .weather-partly-cloudy { - background: linear-gradient(135deg, @outline 0%, #bac8e0 100%); + background: linear-gradient(135deg, @glass-border 0%, #bac8e0 100%); } .weather-overcast { @@ -61,7 +61,7 @@ } .weather-fog { - background: linear-gradient(135deg, @outline 0%, @foreground 100%); + background: linear-gradient(135deg, @glass-border 0%, @glass-text 100%); } .weather-light-rain { @@ -78,11 +78,11 @@ .weather-snow, .weather-heavy-snow { - background: linear-gradient(135deg, @secondary 0%, @cyan 100%); + background: linear-gradient(135deg, @glass-success 0%, @cyan 100%); } .weather-storm { - background: linear-gradient(135deg, @background 0%, @surface-bright 50%, @outline 100%); + background: linear-gradient(135deg, @background 0%, @surface-bright 50%, @glass-border 100%); } /* Calendar Widget */ @@ -102,7 +102,7 @@ #calendar-month { font-size: apply(font-lg); font-weight: 600; - color: @primary; + color: @glass-accent; margin-bottom: 6px; } @@ -113,7 +113,7 @@ #calendar-day-header { font-size: apply(font-sm); font-weight: 600; - color: @foreground; + color: @glass-text; min-width: 18px; min-height: 10px; } @@ -130,7 +130,7 @@ font-size: apply(font-sm); margin: 1.4px 0px 1.4px 0px; font-weight: 500; - color: @foreground; + color: @glass-text; min-width: 18px; min-height: 10px; } @@ -147,7 +147,7 @@ font-size: apply(font-sm); font-weight: 700; color: @on-primary; - background-color: @primary; + background-color: @glass-accent; border-radius: apply(radius-full); min-width: 18px; min-height: 16px; @@ -170,7 +170,7 @@ #day label, #month label { - color: var(--foreground); + color: @glass-text; padding: 5px; margin-top: 10px; font-size: 30px; @@ -187,7 +187,7 @@ } #day label { - color: alpha(@primary, 0.9); + color: alpha(@glass-accent, 0.9); } #date-container { @@ -216,7 +216,7 @@ #progress { background-color: transparent; - border: solid 8px @primary; + border: solid 8px @glass-accent; } @@ -231,7 +231,7 @@ #info-value { font-size: apply(font-sm); font-weight: 600; - color: @foreground; + color: @glass-text; } #info-container { diff --git a/src/styles/widgets/dropdown.css b/src/styles/widgets/dropdown.css index 1c00a8e..40efb6f 100644 --- a/src/styles/widgets/dropdown.css +++ b/src/styles/widgets/dropdown.css @@ -33,7 +33,7 @@ #dropdown-option-label { font-size: apply(font-md); margin: 0px; - color: @foreground; + color: @glass-text; font-weight: 400; } diff --git a/src/styles/widgets/pomodoro.css b/src/styles/widgets/pomodoro.css index b286711..1ffe0fb 100644 --- a/src/styles/widgets/pomodoro.css +++ b/src/styles/widgets/pomodoro.css @@ -15,7 +15,7 @@ #pomodoro-time { font-size: 38px; font-weight: 800; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } @@ -29,15 +29,15 @@ #pomodoro-title { font-size: 14px; font-weight: 700; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } /* Base progress bar color */ #pomodoro-progress { background-color: transparent; - color: alpha(@primary, 0.3); - border-color: @primary; + color: alpha(@glass-accent, 0.3); + border-color: @glass-accent; } /* Short break color */ @@ -50,8 +50,8 @@ /* Long break color */ #pomodoro-progress-long { background-color: transparent; - color: alpha(@error, 0.3); - border-color: @error; + color: alpha(@glass-error, 0.3); + border-color: @glass-error; } #pomodoro-phase-btn { @@ -69,12 +69,12 @@ } #pomodoro-phase-btn.active { - background-color: @primary; + background-color: @glass-accent; color: white; } #pomodoro-start-btn { - background-color: @primary; + background-color: @glass-accent; color: white; border-radius: apply(radius-sm); padding: 6px 20px; @@ -83,7 +83,7 @@ } #pomodoro-start-btn:hover { - background-color: alpha(@primary, 0.8); + background-color: alpha(@glass-accent, 0.8); } #pomodoro-reset-btn, #pomodoro-secondary-btn { diff --git a/src/styles/widgets/todo.css b/src/styles/widgets/todo.css index f4e66d7..63e3937 100644 --- a/src/styles/widgets/todo.css +++ b/src/styles/widgets/todo.css @@ -21,7 +21,7 @@ #todo-title { font-size: 16px; font-weight: 700; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } @@ -41,7 +41,7 @@ #new-todo-entry { background: transparent; border: none; - color: @foreground; + color: @glass-text; font-size: 13px; font-family: "SF Pro Rounded"; min-height: 24px; @@ -88,8 +88,8 @@ /* === Progress Ring === */ #todo-progress-ring { background-color: transparent; - color: alpha(@foreground, 0.15); - border-color: @foreground; + color: alpha(@glass-text, 0.15); + border-color: @glass-text; } /* === Checkbox === */ @@ -111,7 +111,7 @@ #todo-text { font-size: 14px; font-weight: 500; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } @@ -134,7 +134,7 @@ } #todo-options-btn:hover { - color: @foreground; + color: @glass-text; background-color: @glass-hover; border-radius: apply(radius-sm); } @@ -149,7 +149,7 @@ } #clear-completed-button:hover { - color: @foreground; + color: @glass-text; } #todo-footer { @@ -176,7 +176,7 @@ #todo-opt-title { font-size: 14px; font-weight: 700; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } @@ -202,8 +202,8 @@ } #todo-color-swatch.selected { - border-color: @foreground; - box-shadow: 0 0 0 2px alpha(@foreground, 0.2); + border-color: @glass-text; + box-shadow: 0 0 0 2px alpha(@glass-text, 0.2); } /* === Deadline Pill === */ @@ -215,7 +215,7 @@ #todo-deadline-value { font-size: 12px; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; min-width: 70px; } @@ -244,7 +244,7 @@ #todo-spin-value { font-size: 12px; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } @@ -254,7 +254,7 @@ border-radius: apply(radius-full); padding: 6px 12px; font-size: 11px; - color: @foreground; + color: @glass-text; font-family: "SF Pro Rounded"; } diff --git a/src/styles/window/battery.css b/src/styles/window/battery.css index cfb8cdc..22b360c 100644 --- a/src/styles/window/battery.css +++ b/src/styles/window/battery.css @@ -89,7 +89,7 @@ } .battery-settings-button label { font-weight: 500; - color: @foreground; + color: @glass-text; } #energy-mode-button:first-child { margin-top: 0; diff --git a/src/styles/window/lock.css b/src/styles/window/lock.css index 1671e78..9f71e3c 100644 --- a/src/styles/window/lock.css +++ b/src/styles/window/lock.css @@ -7,14 +7,14 @@ } #lock-notch-stack { - background-color: @shadow; + background-color: @glass-overlay-dark; border-radius: 0 0 apply(radius-lg) apply(radius-lg); min-width: 200px; min-height: 34px; } #lock-notch-corner { - background-color: @shadow; + background-color: @glass-overlay-dark; border-radius: 0; min-width: 20px; min-height: 20px; diff --git a/src/styles/window/panel.css b/src/styles/window/panel.css index 44b3c69..4865c20 100644 --- a/src/styles/window/panel.css +++ b/src/styles/window/panel.css @@ -48,7 +48,7 @@ padding: 0 16px; border-radius: apply(radius-sm); min-width: 12px; - border: 1px solid @outline; + border: 1px solid @glass-border; } #workspaces>button.active { @@ -56,7 +56,7 @@ } #workspaces>button.active label { - color: @foreground; + color: @glass-text; } #workspaces>button.active:hover { @@ -92,7 +92,7 @@ } #panel-notch-stack { - background-color: @shadow; + background-color: @glass-overlay-dark; border-radius: 0 0 apply(radius-lg) apply(radius-lg); min-width: 200px; min-height: 34px; @@ -100,7 +100,7 @@ #panel-notch-corner { - background-color: @shadow; + background-color: @glass-overlay-dark; border-radius: 0; min-width: 20px; min-height: 20px; diff --git a/src/styles/window/screencapture.css b/src/styles/window/screencapture.css index a094a41..83f6e61 100644 --- a/src/styles/window/screencapture.css +++ b/src/styles/window/screencapture.css @@ -72,7 +72,7 @@ #sc-options-label { font-size: apply(font-sm); font-weight: 500; - color: @foreground; + color: @glass-text; } #sc-options-arrow { diff --git a/src/styles/window/settings.css b/src/styles/window/settings.css index 13215f1..26bfa01 100644 --- a/src/styles/window/settings.css +++ b/src/styles/window/settings.css @@ -54,7 +54,7 @@ font-size: 24px; font-weight: 700; margin-bottom: 20px; - color: @foreground; + color: @glass-text; } #settings-row { @@ -98,7 +98,7 @@ border-radius: apply(radius-xs); border: 1px solid @glass-border; min-width: 200px; - color: @foreground; + color: @glass-text; } #settings-entry:focus { @@ -111,7 +111,7 @@ border-radius: apply(radius-xs); border: 1px solid @glass-border; min-width: 150px; - color: @foreground; + color: @glass-text; } #settings-combo:hover { diff --git a/src/styles/window/spotlight.css b/src/styles/window/spotlight.css index 87dd781..3bb041f 100644 --- a/src/styles/window/spotlight.css +++ b/src/styles/window/spotlight.css @@ -11,7 +11,7 @@ } .app-search-entry { - color: @foreground; + color: @glass-text; } .app-search-header { @@ -43,7 +43,7 @@ } .app-title { - color: @foreground; + color: @glass-text; font-size: apply(font-base); font-weight: 600; } @@ -59,13 +59,13 @@ } .calc-result-text { - color: @foreground; + color: @glass-text; font-size: apply(font-lg); font-weight: bold; } .power-menu-name { - color: @foreground; + color: @glass-text; font-size: apply(font-lg); font-weight: 600; } @@ -96,7 +96,7 @@ } .emoji-name { - color: var(--foreground); + color: @glass-text; font-size: 14px; font-weight: normal; } @@ -106,7 +106,7 @@ } .emoji-no-results-text { - color: darker(var(--foreground)); + color: @glass-text-secondary; font-size: 14px; font-style: italic; } @@ -116,7 +116,7 @@ } .clipboard-no-results-text { - color: darker(var(--foreground)); + color: @glass-text-secondary; font-size: 14px; font-style: italic; } @@ -142,7 +142,7 @@ } .clipboard-content { - color: var(--foreground); + color: @glass-text; font-size: 14px; font-weight: normal; margin-left: 1rem; diff --git a/src/styles/window/switcher.css b/src/styles/window/switcher.css index 9d96b59..113dd47 100644 --- a/src/styles/window/switcher.css +++ b/src/styles/window/switcher.css @@ -30,7 +30,7 @@ } #app-switcher-item-label { - color: @foreground; + color: @glass-text; font-size: 15px; font-weight: 600; margin-top: -2px;