From ef7b200c74f3c8ef6b34d420cbe39062639cff93 Mon Sep 17 00:00:00 2001 From: S4NKALP Date: Tue, 14 Jul 2026 21:43:04 +0545 Subject: [PATCH] style(src/styles/notification): switch notification background colors to glass tokens --- src/styles/notification/center_base.css | 8 +++--- src/styles/notification/center_expanded.css | 26 +++++++++---------- src/styles/notification/center_overrides.css | 8 +++--- src/styles/notification/center_stack.css | 18 ++++++------- src/styles/notification/notification_base.css | 3 ++- .../notification/notification_buttons.css | 8 +++--- .../notification/notification_close.css | 8 +++--- 7 files changed, 40 insertions(+), 39 deletions(-) diff --git a/src/styles/notification/center_base.css b/src/styles/notification/center_base.css index 046b811..dd38274 100644 --- a/src/styles/notification/center_base.css +++ b/src/styles/notification/center_base.css @@ -1,7 +1,7 @@ #noti-center-box { background-color: transparent; - /* border: 1px solid @outline-a30; */ + /* border: 1px solid @glass-border; */ border-radius: apply(radius-xl); margin-right: 10px; /* padding: 20px; */ @@ -10,10 +10,10 @@ #noti-clear-button { /* min-width: 10px; */ - background-color: @bg-a50; + background-color: @glass-popup; min-height: 25px; min-width: 70px; - border: 1px solid @bg-a90; + border: 1px solid @glass-border; border-radius: apply(radius-md); margin-top: 10px; } @@ -23,5 +23,5 @@ } #noti-clear-button:hover { - background-color: @fg-a10; + background-color: @glass-hover; } diff --git a/src/styles/notification/center_expanded.css b/src/styles/notification/center_expanded.css index 3684030..1c07ab2 100644 --- a/src/styles/notification/center_expanded.css +++ b/src/styles/notification/center_expanded.css @@ -1,7 +1,7 @@ /* Expanded notification group header */ #notification-group-header { - background-color: @bg-a50; - border: 1px solid @bg-a90; + background-color: @glass-popup; + border: 1px solid @glass-border; border-radius: apply(radius-md) apply(radius-md) 0 0; padding: 8px 12px; margin: 2px 0 0 0; @@ -15,8 +15,8 @@ #notification-show-less { background-color: transparent; - color: @fg-a70; - border: 1px solid @fg-a20; + color: @glass-text-secondary; + border: 1px solid @glass-border; border-radius: apply(radius-xs); padding: 2px 8px; font-size: apply(font-xs); @@ -24,14 +24,14 @@ } #notification-show-less:hover { - background-color: alpha(@fg-a40, 0.7); - color: @fg-a90; + background-color: @glass-active; + color: @glass-text; } #notification-close-all { background-color: transparent; - color: @fg-a70; - border: 1px solid @fg-a20; + color: @glass-text-secondary; + border: 1px solid @glass-border; border-radius: apply(radius-xs); padding: 2px 8px; font-size: apply(font-sm); @@ -39,15 +39,15 @@ } #notification-close-all:hover { - background-color: @error-a20; - color: @fg-a90; - border-color: @error-a40; + background-color: @glass-error; + color: @foreground; + border-color: @glass-error; } /* Expanded notification list */ #notification-group-expanded { - border: 1px solid @bg-a90; + border: 1px solid @glass-border; border-top: none; border-radius: 0 0 apply(radius-md) apply(radius-md); - /* background-color: @shadow-a02; */ + /* background-color: @glass-overlay-light; */ } diff --git a/src/styles/notification/center_overrides.css b/src/styles/notification/center_overrides.css index ee71782..e0f5fa0 100644 --- a/src/styles/notification/center_overrides.css +++ b/src/styles/notification/center_overrides.css @@ -6,7 +6,7 @@ font-weight: bold; } #notification-show-less { - background-color: @bg-a50; + background-color: @glass-popup; font-size: apply(font-sm); margin: 10px; border-radius: apply(radius-md); @@ -30,10 +30,10 @@ font-size: apply(font-md); } #notification-centre-notifs { - background-color: @bg-a50; + background-color: @glass-popup; min-height: 40px; padding: 10px; - border: 1px solid @bg-a90; + border: 1px solid @glass-border; border-radius: apply(radius-md); } @@ -51,7 +51,7 @@ border-radius: apply(radius-full); } #notification-close:hover { - background-color: alpha(@bg-a80, 0.8); + background-color: @glass-active; min-width: 23px; min-height: 23px; border-radius: apply(radius-full); diff --git a/src/styles/notification/center_stack.css b/src/styles/notification/center_stack.css index a9be886..bd9658e 100644 --- a/src/styles/notification/center_stack.css +++ b/src/styles/notification/center_stack.css @@ -11,8 +11,8 @@ /* Bottom shadow layer (deepest) - offset to show stacking from below */ #stack-shadow-bottom { - background-color: @bg-a50; - border-top: 1px solid @bg-a90; + background-color: @glass-surface-1; + border-top: 1px solid @glass-divider; border-radius: apply(radius-md); opacity: 1; min-height: 16px; @@ -23,9 +23,9 @@ /* Middle shadow layer */ #stack-shadow-middle { - background-color: @bg-a50; + background-color: @glass-surface-2; - border-top: 1px solid @bg-a90; + border-top: 1px solid @glass-divider; border-radius: apply(radius-md); opacity: 1; min-height: 20px; @@ -36,9 +36,9 @@ /* Main notification content (top layer) */ #stack-main-notification { - background-color: @bg-a50; + background-color: @glass-popup; - border: 1.2px solid @bg-a90; + border: 1.2px solid @glass-border; border-radius: apply(radius-md); padding: 12px; transition: all apply(transition-medium) ease; @@ -46,7 +46,7 @@ /* Hover effects for stacked notifications */ #notification-stack-container:hover #stack-main-notification { - background-color: @fg-a10; + background-color: @glass-active; } #notification-stack-container:hover #stack-shadow-middle { @@ -59,8 +59,8 @@ /* Notification count badge */ #notification-count-label { - background-color: @fg-a20; - color: @fg-a80; + background-color: @glass-selected; + color: @glass-text-secondary; border-radius: 10px; padding: 2px 6px; font-size: apply(font-2xs); diff --git a/src/styles/notification/notification_base.css b/src/styles/notification/notification_base.css index 49ed44f..82a7b7c 100644 --- a/src/styles/notification/notification_base.css +++ b/src/styles/notification/notification_base.css @@ -1,8 +1,9 @@ #notification { padding: 10px; - background-color: @bg-a50; + background-color: @glass-popup; border-radius: apply(radius-sm); margin-top: 10px; margin-right: 10px; + border: 1px solid @glass-border-soft; /* margin: 5px; */ } diff --git a/src/styles/notification/notification_buttons.css b/src/styles/notification/notification_buttons.css index c7bf4d1..8b95042 100644 --- a/src/styles/notification/notification_buttons.css +++ b/src/styles/notification/notification_buttons.css @@ -1,20 +1,20 @@ #notification-close-button { - background-color: alpha(@fg-a40, 0.3); + background-color: @glass-hover; border-radius: apply(radius-sm); } #notification-close-button:hover { - background-color: @primary-a90; + background-color: @glass-active; } #notification-action-buttons button { - background-color: alpha(@fg-a40, 0.3); + background-color: @glass-hover; padding: 4px; border-radius: apply(radius-sm); transition: background-color apply(transition-fast); } #notification-action-buttons button:hover { - background-color: @primary-a90; + background-color: @glass-active; } #notification-action-buttons button:active { diff --git a/src/styles/notification/notification_close.css b/src/styles/notification/notification_close.css index 1ddd16d..8deea84 100644 --- a/src/styles/notification/notification_close.css +++ b/src/styles/notification/notification_close.css @@ -1,5 +1,5 @@ #notif-close-button { - background-color: var(--surface); + background-color: @glass-surface-1; border-radius: apply(radius-lg); padding: 4px; transition: background-color apply(transition-fast); @@ -7,15 +7,15 @@ #notif-close-button:hover, #notif-close-button:focus { - background-color: var(--surface-bright); + background-color: @glass-active; } #notif-close-button:active { - background-color: var(--red-dim); + background-color: @glass-error; } #notif-close-label { - color: var(--red-dim); + color: @glass-error; font-size: 20px; }