style: migrate to Adwaita CSS variables for theme integration

data/style/style.scss

 :root {
-  --cc-bg: rgba(46, 46, 46, 0.7);
-
-  --noti-border-color: rgba(255, 255, 255, 0.15);
-  --noti-bg: 48, 48, 48;
-  --noti-bg-alpha: 0.8;
-  --noti-bg-darker: rgb(38, 38, 38);
-  --noti-bg-hover: rgb(56, 56, 56);
-  --noti-bg-focus: rgba(68, 68, 68, 0.6);
-  --noti-close-bg: rgb(78, 78, 78);
-  --noti-close-bg-hover: rgb(94, 94, 94);
-
-  --text-color: rgb(255, 255, 255);
-  --text-color-disabled: rgb(150, 150, 150);
-
-  --bg-selected: rgb(0, 128, 255);
-
   --notification-icon-size: 64px;
   --notification-app-icon-size: calc(var(--notification-icon-size) / 3);
   --notification-group-icon-size: 32px;
 
-  --border: 1px solid var(--noti-border-color);
   --border-radius: 12px;
 
-  --notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
-    0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
-  --font-size-body: 15px;
-  --font-size-summary: 16px;
-
-  /* Deprecated variables (because of their typos). Keeeping them around for backwards compatibility. */
   --hover-tranistion: background 0.15s ease-in-out;
   --group-collapse-tranistion: opacity 400ms ease-in-out;
-
   --hover-transition: var(--hover-tranistion);
   --group-collapse-transition: var(--group-collapse-tranistion);
 }
@@ -44,10 +20,21 @@ notificationwindow, blankwindow {
   background: transparent;
 }
 
+.blank-window {
+  background: transparent;
+}
+
+.floating-notifications {
+  background: transparent;
+
+  .notification {
+    box-shadow: none;
+  }
+}
+
 .close-button {
-  /* The notification Close Button */
-  background: var(--noti-close-bg);
-  color: var(--text-color);
+  background: unquote("alpha(var(--window-bg-color), 0.6)");
+  color: var(--window-fg-color);
   text-shadow: none;
   padding: 0;
   border-radius: 100%;
@@ -60,7 +47,7 @@ notificationwindow, blankwindow {
 
   &:hover {
     box-shadow: none;
-    background: var(--noti-close-bg-hover);
+    background: unquote("alpha(var(--window-bg-color), 0.4)");
     transition: var(--hover-tranistion);
     border: none;
   }
@@ -71,52 +58,50 @@ notificationwindow, blankwindow {
   outline: none;
 
   &:focus {
-    background: var(--noti-bg-focus);
+    background: none;
   }
 
   .notification-background {
-    padding: 6px 12px;
+    padding: 5px 0;
 
     .close-button {}
 
     .notification {
-      /* The actual notification */
-      border-radius: var(--border-radius);
-      border: var(--border);
+      border-radius: var(--window-radius);
+      border: 1px solid var(--border-color);
       padding: 0;
       transition: var(--hover-tranistion);
-      background: rgba(var(--noti-bg), var(--noti-bg-alpha));
+      background: var(--dialog-bg-color);
+      box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
 
       &.low {
-        /* Low Priority Notification */
+        border-left: 4px solid var(--success-bg-color);
       }
 
       &.normal {
-        /* Normal Priority Notification */
+        border-left: 4px solid var(--blue-3);
       }
 
       &.critical {
-        /* Critical Priority Notification */
+        border-left: 4px solid var(--error-bg-color);
       }
 
       .notification-default-action {
-        /* The large action that also displays the notification summary and body */
-        padding: $margin / 2;
+        padding: 10px;
         margin: 0;
         box-shadow: none;
         background: transparent;
         border: none;
-        color: var(--text-color);
+        color: var(--window-fg-color);
         transition: var(--hover-tranistion);
-        border-radius: var(--border-radius);
+        border-radius: var(--window-radius);
 
         &:hover {
           -gtk-icon-filter: none;
-          background: var(--noti-bg-hover);
+          background: unquote("alpha(var(--window-fg-color), 0.05)");
         }
 
         &:not(:only-child) {
-          /* When alternative actions are visible */
           border-bottom-left-radius: 0px;
           border-bottom-right-radius: 0px;
         }
@@ -128,16 +113,13 @@ notificationwindow, blankwindow {
           padding: 0;
 
           .image {
-            /* Notification Primary Image */
             -gtk-icon-filter: none;
             -gtk-icon-size: var(--notification-icon-size);
-            border-radius: 100px;
-            /* Size in px */
-            margin: $margin;
+            border-radius: var(--window-radius);
+            margin: 0px 10px 0px 0px;
           }
 
           .app-icon {
-            /* Notification app icon (only visible when the primary image is set) */
             -gtk-icon-filter: none;
             -gtk-icon-size: var(--notification-app-icon-size);
             -gtk-icon-shadow: 0 1px 4px black;
@@ -146,79 +128,68 @@ notificationwindow, blankwindow {
 
           .text-box {
             label {
-              /* Fixes base GTK 4 CSS setting a filter of opacity 50% for some odd reason */
               filter: none;
             }
 
             .summary {
-              /* Notification summary/title */
-              font-size: var(--font-size-summary);
               font-weight: bold;
               background: transparent;
-              color: var(--text-color);
+              color: var(--window-fg-color);
               text-shadow: none;
             }
 
             .time {
-              /* Notification time-ago */
-              font-size: var(--font-size-summary);
               font-weight: bold;
               background: transparent;
-              color: var(--text-color);
+              color: var(--window-fg-color);
               text-shadow: none;
-              margin-right: 30px;
+              margin-right: 20px;
             }
 
             .body {
-              /* Notification body */
-              font-size: var(--font-size-body);
               font-weight: normal;
               background: transparent;
-              color: var(--text-color);
+              color: var(--window-fg-color);
               text-shadow: none;
             }
           }
 
           progressbar {
-            /* The optional notification progress bar */
             margin-top: $margin;
           }
 
           .body-image {
-            /* The "extra" optional bottom notification image */
             margin-top: $margin;
             background-color: white;
             -gtk-icon-filter: none;
           }
 
           .inline-reply {
-            /* The inline reply section */
             margin-top: $margin;
 
             .inline-reply-entry {
-              background: var(--noti-bg-darker);
-              color: var(--text-color);
-              caret-color: var(--text-color);
-              border: var(--border);
+              background: var(--view-bg-color);
+              color: var(--window-fg-color);
+              caret-color: var(--window-fg-color);
+              border: 1px solid var(--border-color);
               border-radius: var(--border-radius);
             }
 
             .inline-reply-button {
               margin-left: 4px;
-              background: rgba(var(--noti-bg), var(--noti-bg-alpha));
-              border: var(--border);
+              background: var(--dialog-bg-color);
+              border: 1px solid var(--border-color);
               border-radius: var(--border-radius);
-              color: var(--text-color);
+              color: var(--window-fg-color);
 
               &:disabled {
                 background: initial;
-                color: var(--text-color-disabled);
-                border: var(--border);
+                color: unquote("alpha(var(--window-fg-color), 0.5)");
                 border-color: transparent;
               }
 
               &:hover {
-                background: var(--noti-bg-hover);
+                background: unquote("alpha(var(--window-fg-color), 0.05)");
               }
             }
           }
@@ -233,13 +204,19 @@ notificationwindow, blankwindow {
       }
 
       .notification-action {
-        /* The alternative actions below the default action */
         margin: $margin / 2;
         padding: 0;
 
         &>button {
-          border-radius: var(--border-radius);
-          color: var(--text-color);
+          border-radius: var(--window-radius);
+          color: var(--window-fg-color);
+          background: unquote("alpha(var(--window-bg-color), 0.4)");
+          border: 1px solid var(--border-color);
+
+          &:hover {
+            background: unquote("alpha(var(--window-bg-color), 0.2)");
+            border: 2px solid var(--accent-bg-color);
+          }
         }
       }
     }
@@ -247,81 +224,79 @@ notificationwindow, blankwindow {
 }
 
 .notification-group {
-  /* Styling only for Grouped Notifications */
   transition: opacity 200ms ease-in-out;
 
   &:focus {
-    background: var(--noti-bg-focus);
-  }
-
-  &.low {
-    /* Low Priority Group */
-  }
-
-  &.normal {
-    /* Low Priority Group */
+    background: none;
   }
 
-  &.critical {
-    /* Low Priority Group */
-  }
-
-  /* The groups close button */
   .notification-group-close-button .close-button {
+    background: unquote("alpha(var(--window-bg-color), 0.4)");
+    box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
     margin: $margin * 1.5 $margin * 2.5;
+
+    &:hover {
+      background: unquote("alpha(var(--window-bg-color), 0.8)");
+    }
   }
 
   %header {
     margin: 0 $margin * 2;
-    color: var(--text-color);
+    color: var(--window-fg-color);
   }
 
   .notification-group-headers {
-    /* Notification Group Headers */
     @extend %header;
 
     .notification-group-icon {
-      color: var(--text-color);
+      color: var(--window-fg-color);
       -gtk-icon-size: var(--notification-group-icon-size);
     }
 
     .notification-group-header {
-      color: var(--text-color);
+      color: var(--window-fg-color);
     }
   }
 
   .notification-group-buttons {
-    /* Notification Group Buttons */
     @extend %header;
+    padding: 5px;
   }
 
   &.collapsed {
-
-    /* When another group is expanded, lower the opacity of the collapsed ones */
     &.not-expanded {
       opacity: 0.4;
     }
 
-    .notification-row {
+    .notification-row:not(:last-child) {
       .notification {
-        background-color: rgba(var(--noti-bg), 1);
+        background-color: var(--window-bg-color);
       }
+    }
 
-      &:not(:last-child) {
-
-        /* Top notification in stack */
-        /* Set lower stacked notifications opacity to 0 */
+    .notification-row:not(:last-child) {
         .notification-action,
         .notification-default-action {
           opacity: 0;
         }
-      }
+
+        .notification.low {
+          border-left: 3px solid unquote("alpha(var(--success-bg-color), 0.5)");
+        }
+
+        .notification.normal {
+          border-left: 3px solid unquote("alpha(var(--blue-3), 0.5)");
+        }
+
+        .notification.critical {
+          border-left: 3px solid unquote("alpha(var(--error-bg-color), 0.5)");
+        }
     }
 
     &:hover {
       .notification-row:not(:only-child) {
         .notification {
-          background-color: var(--noti-bg-hover);
+          background-color: var(--dialog-bg-color);
         }
       }
     }
@@ -329,53 +304,31 @@ notificationwindow, blankwindow {
 }
 
 .control-center {
-  /* The Control Center which contains the old notifications + widgets */
-  background: var(--cc-bg);
-  color: var(--text-color);
-  border-radius: var(--border-radius);
+  background: var(--window-bg-color);
+  color: var(--window-fg-color);
+  border-radius: var(--window-radius);
+  box-shadow: 0 0 10px 0 var(--headerbar-shade-color);
 
   .control-center-list-placeholder {
-    /* The placeholder when there are no notifications */
     opacity: 0.5;
   }
 
   .control-center-list {
-    /* List of notifications */
     background: transparent;
+    margin: 0px 15px;
 
     .notification {
-      box-shadow: var(--notification-shadow);
-
       .notification-default-action,
       .notification-action {
         transition: var(--group-collapse-tranistion), var(--hover-tranistion);
-
-        &:hover {
-          background-color: var(--noti-bg-hover);
-        }
       }
     }
   }
 }
 
-.blank-window {
-  /* Window behind control center and on all other monitors */
-  background: transparent;
-}
-
-.floating-notifications {
-  background: transparent;
-
-  .notification {
-    box-shadow: none;
-  }
-}
-
 /*** Widgets ***/
 .widget {
-  margin: $margin;
-  padding: $margin;
-  border-radius: var(--border-radius);
+  padding: 0;
 }
 
 /* Title widget */

data/style/widgets/backlight.scss

 .widget-backlight {
+  padding: 0px 10px;
+  margin: 5px 15px;
+  border-radius: var(--window-radius);
+
+  &.expanded {
+    background: var(--dialog-bg-color);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
+  }
+}
+
+.widget-backlight .image-button {
+  background: transparent;
 }

data/style/widgets/inhibitors.scss

 .widget-inhibitors {
-  & > label {
-    margin-right: $margin;
+  background: transparent;
+  padding: 0px;
+  margin: 10px 15px;
+
+  &>label {
     font-size: 1.5rem;
+    margin-right: $margin;
   }
 
-  & > button {
+  &>button {
+    background: var(--dialog-bg-color);
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
     margin-left: $margin;
-    border-radius: var(--border-radius);
+
+    &:hover {
+      background: unquote("alpha(var(--dialog-bg-color), 0.5)");
+      border: 1px solid var(--accent-bg-color);
+    }
   }
 }
-

data/style/widgets/label.scss

 .widget-label {
-  & > label {
+  margin: 5px 15px;
+
+  &>label {
     font-size: 1.1rem;
   }
 }

data/style/widgets/mpris.scss

 :root {
-  --mpris-album-art-overlay: rgba(0, 0, 0, 0.55);
-  --mpris-button-hover: rgba(0, 0, 0, 0.5);
-  --mpris-album-art-icon-size: 96px;
-  --mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
+  --mpris-album-art-icon-size: 64px;
 }
 
 .widget-mpris {
   padding: 0;
+  margin: 5px 10px;
 
-  /* The parent to all players */
-  .widget-mpris-player {
-    margin: 16px 20px;
-    border-radius: var(--border-radius);
-    box-shadow: var(--mpris-album-art-shadow);
+  carouselindicatordots {
+    margin: 0px;
+    padding: 0px;
+  }
 
-    .mpris-background {
-      filter: blur(10px);
-    }
+  .flat.image-button {
+    margin: 0px;
+    padding: 0px;
+  }
 
-    .mpris-overlay {
-      padding: 16px;
-      background-color: var(--mpris-album-art-overlay);
+  .mpris-background {
+    background: transparent;
+  }
 
-      button:hover {
-        /* The media player buttons (play, pause, next, etc...) */
-        background: var(--noti-bg-hover);
-      }
+  .widget-mpris-player {
+    margin: 0 5px;
+    border-radius: var(--window-radius);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
+
+    .mpris-overlay {
+      background: var(--dialog-bg-color);
+      padding: 5px;
 
       .widget-mpris-album-art {
-        border-radius: var(--border-radius);
-        box-shadow: var(--mpris-album-art-shadow);
+        border-radius: var(--window-radius);
+        margin: 3px;
+        box-shadow: none;
         -gtk-icon-size: var(--mpris-album-art-icon-size);
       }
 
       .widget-mpris-title {
         font-weight: bold;
-        font-size: 1.25rem;
+        font-size: 1.1rem;
       }
 
       .widget-mpris-subtitle {
-        font-size: 1.1rem;
+        font-size: 0.9rem;
       }
 
-      &>box>button {
+      .image-button {
+        padding: 0px 5px;
 
-        /* Change player control buttons */
         &:hover {
-          background-color: var(--mpris-button-hover);
+          background: unquote("alpha(var(--window-bg-color), 0.3)");
+          border: 0.5px solid var(--border-color);
         }
       }
     }
   }
-
-  &>box>button {
-    /* Change player side buttons */
-  }
-
-  &>box>button:disabled {
-    /* Change player side buttons insensitive */
-  }
 }

data/style/widgets/quick-settings.scss

 .widget-quick-settings {
   padding: 0;
+  margin: 5px 15px;
 }
 
 .quick-settings-row {
@@ -8,7 +9,30 @@
 
 .quick-settings-tile {
   border-radius: 999px;
-  overflow: hidden;
+  background: var(--dialog-bg-color);
+  box-shadow: 0px 0px 5px var(--headerbar-shade-color);
+  border: 1px solid var(--border-color);
+
+  &:hover {
+    background: unquote("alpha(var(--dialog-bg-color), 0.7)");
+  }
+
+  &.active {
+    background: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+
+    &:hover {
+      background: unquote("alpha(var(--accent-bg-color), 0.85)");
+    }
+
+    .tile-arrow {
+      background: unquote("alpha(currentColor, 0.15)");
+    }
+
+    .tile-separator {
+      background: unquote("alpha(currentColor, 0.3)");
+    }
+  }
 
   .tile-toggle {
     padding: 4px 12px;
@@ -17,17 +41,29 @@
     background: transparent;
   }
 
+  .tile-separator {
+    background: unquote("alpha(currentColor, 0.3)");
+  }
+
   .tile-arrow {
     padding: 4px;
     min-width: 24px;
     border: none;
     box-shadow: none;
-    background: transparent;
+    background: unquote("alpha(currentColor, 0.07)");
+    border-radius: 0 999px 999px 0;
+
+    &:hover {
+      background: unquote("alpha(currentColor, 0.2)");
+    }
   }
 }
 
 .quick-settings-submenu {
   border-radius: var(--border-radius);
-  margin: 4px 0;
+  margin: 5px 0;
   padding: 4px;
+  background: var(--dialog-bg-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px var(--headerbar-shade-color);
 }

data/style/widgets/slider.scss

 .widget-slider {
-  label {
-    font-size: inherit;
-  }
 }

data/style/widgets/title.scss

 .widget-title {
-  & > label {
-    margin-right: $margin;
+  background: transparent;
+  padding: 0px;
+  margin: 10px 15px;
+
+  &>label {
     font-size: 1.5rem;
+    margin-right: $margin;
   }
 
-  & > button {
+  &>button {
+    background: var(--dialog-bg-color);
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
     margin-left: $margin;
-    border-radius: var(--border-radius);
+
+    &:hover {
+      background: unquote("alpha(var(--dialog-bg-color), 0.5)");
+      border: 1px solid var(--accent-bg-color);
+    }
   }
 }
-

data/style/widgets/volume.scss

 .widget-volume {
+  padding: 0px 10px;
+  margin: 5px 15px;
+  border-radius: var(--window-radius);
+
+  &.expanded {
+    background: var(--dialog-bg-color);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
+  }
+}
+
+.widget-volume .image-button {
+  background: transparent;
+}
+
+.widget-volume>box {
+  margin: 0 0 0 3px;
 }
 
 .widget-volume>box>button {}
 
+.widget-volume revealer {
+  padding: 0;
+  margin: 0;
+}
+
 .per-app-volume {
-  background-color: var(--noti-bg-alt);
-  margin: $margin;
-  margin-bottom: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
   border-radius: var(--border-radius);
 }
+
+.per-app-volume row {
+  background: transparent;
+}

src/controlCenter/widgets/backlight/backlight.vala

@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets {
 
             // Multiple sources — collapsible layout
             if (need_collapse) {
+                add_css_class ("has-collapse");
                 var topbar = new Gtk.Box (
                     Gtk.Orientation.HORIZONTAL, 6);
                 var topbar_icon = new Gtk.Image.from_icon_name (