refactor(styles): Refactor styles for dark mode icon-shadow and SCSS variables

src/styles/_overview.scss

@@ -14,7 +14,7 @@
 .search-entry {
   color: vars.$aurora-overview-search-fg;
   background-color: vars.$aurora-overview-search-bg;
-  selection-background-color: #3584e4;
+  selection-background-color: vars.$aurora-accent;
   selected-color: #ffffff;
 
   &:hover {
@@ -23,7 +23,7 @@
 
   &:focus {
     background-color: vars.$aurora-overview-search-focus-bg;
-    box-shadow: inset 0 0 0 2px rgba(53, 132, 228, 0.7);
+    box-shadow: inset 0 0 0 2px vars.$aurora-accent-focus-ring;
   }
 
   &:insensitive {
@@ -171,8 +171,8 @@
 .app-well-app:drop .overview-icon,
 .overview-tile:drop .overview-icon,
 .grid-search-result:drop .overview-icon {
-  border: 2px solid rgba(53, 132, 228, 0.8);
-  background-color: rgba(53, 132, 228, 0.2);
+  border: 2px solid vars.$aurora-accent-drop-border;
+  background-color: vars.$aurora-accent-drop-bg;
 }
 
 .app-well-app .overview-icon,
@@ -221,8 +221,8 @@
 }
 
 .app-folder-dialog {
-  background-color: #fafafb;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  background-color: vars.$aurora-overview-bg;
+  box-shadow: vars.$aurora-surface-shadow;
 
   .folder-name-container {
     .folder-name-label {
@@ -239,7 +239,7 @@
 
       &:focus {
         background-color: vars.$aurora-overview-search-focus-bg;
-        box-shadow: inset 0 0 0 2px rgba(53, 132, 228, 0.7);
+        box-shadow: inset 0 0 0 2px vars.$aurora-accent-focus-ring;
       }
 
       StLabel.hint-text {

src/styles/_switcher.scss

@@ -9,8 +9,8 @@
   color: vars.$aurora-overview-fg !important;
   background-color: vars.$aurora-overview-bg !important;
   border-radius: 28px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: vars.$aurora-surface-shadow;
+  border: vars.$aurora-surface-border;
 }
 
 .switcher-list {

src/styles/_tray-icons.scss

@@ -22,14 +22,8 @@
   padding: 3px;
   min-width: 0;
 
-  @if vars.$variant == 'light' {
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-  } @else {
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
+  &:hover {
+    background-color: vars.$aurora-tray-chevron-hover-bg;
   }
 }
 
@@ -38,22 +32,12 @@
   padding: 3px;
   min-width: 0;
 
-  @if vars.$variant == 'light' {
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-
-    &:active {
-      background-color: rgba(0, 0, 0, 0.12);
-    }
-  } @else {
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.08);
-    }
+  &:hover {
+    background-color: vars.$aurora-tray-icon-hover-bg;
+  }
 
-    &:active {
-      background-color: rgba(255, 255, 255, 0.15);
-    }
+  &:active {
+    background-color: vars.$aurora-tray-icon-active-bg;
   }
 }
 
@@ -65,7 +49,7 @@
 .aurora-tray-attention-badge {
   z-position: 1;
   border-radius: 999px;
-  background-color: #3584e4;
+  background-color: vars.$aurora-accent;
 }
 
 .aurora-tray-menu {
@@ -76,12 +60,6 @@
   border-radius: 6px;
   padding: 4px 8px;
   font-size: 0.85em;
-
-  @if vars.$variant == 'light' {
-    background-color: rgba(0, 0, 0, 0.75);
-    color: #ffffff;
-  } @else {
-    background-color: rgba(30, 30, 30, 0.92);
-    color: #eeeeee;
-  }
+  background-color: vars.$aurora-tray-tooltip-bg;
+  color: vars.$aurora-tray-tooltip-fg;
 }

src/styles/_variables.scss

@@ -37,6 +37,23 @@ $aurora-tooltip-bg: rgba(0, 0, 0, 0.9);
 $aurora-tooltip-fg: palette.$light-1;
 $aurora-tooltip-border: 1px solid rgba(255, 255, 255, 0.1);
 
+// GNOME Blue accent (used where -st-accent-color CSS custom property is unavailable)
+$aurora-accent: #3584e4;
+$aurora-accent-focus-ring: rgba(53, 132, 228, 0.7);
+$aurora-accent-drop-border: rgba(53, 132, 228, 0.8);
+$aurora-accent-drop-bg: rgba(53, 132, 228, 0.2);
+
+// Shared surface decoration
+$aurora-surface-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+$aurora-surface-border: 1px solid rgba(0, 0, 0, 0.05);
+
+// Tray (dark defaults)
+$aurora-tray-chevron-hover-bg: rgba(255, 255, 255, 0.1);
+$aurora-tray-icon-hover-bg: rgba(255, 255, 255, 0.08);
+$aurora-tray-icon-active-bg: rgba(255, 255, 255, 0.15);
+$aurora-tray-tooltip-bg: rgba(30, 30, 30, 0.92);
+$aurora-tray-tooltip-fg: #eeeeee;
+
 @if $variant == 'light' {
   $aurora-panel-bg: palette.$light-0;
   $aurora-panel-fg: palette.$dark-1;
@@ -59,6 +76,12 @@ $aurora-tooltip-border: 1px solid rgba(255, 255, 255, 0.1);
   $aurora-tooltip-fg: palette.$dark-1;
   $aurora-tooltip-border: 1px solid rgba(0, 0, 0, 0.1);
 
+  $aurora-tray-chevron-hover-bg: rgba(0, 0, 0, 0.08);
+  $aurora-tray-icon-hover-bg: rgba(0, 0, 0, 0.06);
+  $aurora-tray-icon-active-bg: rgba(0, 0, 0, 0.12);
+  $aurora-tray-tooltip-bg: rgba(0, 0, 0, 0.75);
+  $aurora-tray-tooltip-fg: #ffffff;
+
   $aurora-dash-bg: palette.$light-0;
   $aurora-dash-icon-color: palette.$dark-1;
   $aurora-dash-separator-color: color.adjust(palette.$dark-1, $alpha: -0.9);

src/styles/_xwayland-indicator.scss

@@ -1,11 +1,11 @@
+@use 'variables' as vars;
+
 .xwayland-indicator-badge {
-  // Ensure the badge is drawn on top of the icon it overlays
   z-position: 1;
-
-  // Slight shadow to keep the icon readable on any background
-  icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-
-  // Add some spacing so it's not fully flush to the corner
   margin-left: 6px;
   margin-top: 6px;
+
+  @if vars.$variant == 'dark' {
+    icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  }
 }