From cf9eae1edc10e6214b044fe781e731c16c2988c3 Mon Sep 17 00:00:00 2001
From: nevaforget <dom@moonarch.de>
Date: Wed, 1 Apr 2026 19:11:31 +0200
Subject: [PATCH] Fix swaync theme to use upstream compiled CSS from
 catppuccin/swaync v1.0.1

Hand-converted @define-color CSS was not rendering correctly.
Replaced with pre-built release CSS, accent changed from Blue
to Lavender (#b4befe), font set to UbuntuSans Nerd Font.
---
 defaults/xdg/swaync/style.css | 151 +++++++++++++---------------------
 1 file changed, 59 insertions(+), 92 deletions(-)

diff --git a/defaults/xdg/swaync/style.css b/defaults/xdg/swaync/style.css
index 4ce0d00..ae323d1 100644
--- a/defaults/xdg/swaync/style.css
+++ b/defaults/xdg/swaync/style.css
@@ -1,23 +1,5 @@
 /* ABOUTME: Moonarch swaync notification styling with Catppuccin Mocha colors. */
-/* ABOUTME: Based on catppuccin/swaync, accent changed from Blue to Lavender. */
-
-/* Catppuccin Mocha palette */
-@define-color base #1e1e2e;
-@define-color mantle #181825;
-@define-color crust #11111b;
-@define-color surface0 #313244;
-@define-color surface1 #45475a;
-@define-color surface2 #585b70;
-@define-color text #cdd6f4;
-@define-color subtext0 #a6adc8;
-@define-color subtext1 #bac2de;
-@define-color overlay0 #6c7086;
-@define-color lavender #b4befe;
-@define-color sapphire #74c7ec;
-@define-color red #f38ba8;
-@define-color maroon #eba0ac;
-@define-color pink #f5c2e7;
-@define-color yellow #f9e2af;
+/* ABOUTME: Based on catppuccin/swaync v1.0.1 release, accent changed from Blue to Lavender. */
 
 * {
   all: unset;
@@ -27,7 +9,7 @@
 }
 
 trough highlight {
-  background: @text;
+  background: #cdd6f4;
 }
 
 scale {
@@ -46,25 +28,24 @@ trough slider {
   border-radius: 12.6px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
   transition: all 0.2s ease;
-  background-color: @lavender;
+  background-color: #b4befe;
 }
 
 trough slider:hover {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 8px @lavender;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 8px #b4befe;
 }
 
 trough {
-  background-color: @surface0;
+  background-color: #313244;
 }
 
-/* ── Notifications ── */
-
+/* notifications */
 .notification-background {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px @surface1;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #45475a;
   border-radius: 12.6px;
   margin: 18px;
-  background: @mantle;
-  color: @text;
+  background: #181825;
+  color: #cdd6f4;
   padding: 0;
 }
 
@@ -74,7 +55,7 @@ trough {
 }
 
 .notification-background .notification.critical {
-  box-shadow: inset 0 0 0 2px @red;
+  box-shadow: inset 0 0 7px 0 #f38ba8;
 }
 
 .notification .notification-content {
@@ -82,75 +63,70 @@ trough {
 }
 
 .notification .notification-content overlay {
+  /* icons */
   margin: 4px;
 }
 
 .notification-content .summary {
-  color: @text;
+  color: #cdd6f4;
 }
 
 .notification-content .time {
-  color: @subtext0;
+  color: #a6adc8;
 }
 
 .notification-content .body {
-  color: @subtext1;
+  color: #bac2de;
 }
 
 .notification > *:last-child > * {
   min-height: 3.4em;
 }
 
-/* Close button */
-
 .notification-background .close-button {
   margin: 7px;
   padding: 2px;
-  border-radius: 50%;
-  color: @base;
-  background-color: @red;
+  border-radius: 6.3px;
+  color: #1e1e2e;
+  background-color: #f38ba8;
 }
 
 .notification-background .close-button:hover {
-  background-color: @maroon;
+  background-color: #eba0ac;
 }
 
 .notification-background .close-button:active {
-  background-color: @pink;
+  background-color: #f5c2e7;
 }
 
-/* Action buttons */
-
 .notification .notification-action {
   border-radius: 7px;
-  color: @text;
-  box-shadow: inset 0 0 0 1px @surface1;
+  color: #cdd6f4;
+  box-shadow: inset 0 0 0 1px #45475a;
   margin: 4px;
   padding: 8px;
-  font-size: 0.2rem;
+  font-size: 0.2rem; /* controls the button size not text size*/
 }
 
 .notification .notification-action {
-  background-color: @surface0;
+  background-color: #313244;
 }
 
 .notification .notification-action:hover {
-  background-color: @surface1;
+  background-color: #45475a;
 }
 
 .notification .notification-action:active {
-  background-color: @surface2;
+  background-color: #585b70;
 }
 
-/* ── Progress bar ── */
-
 .notification.critical progress {
-  background-color: @red;
+  background-color: #f38ba8;
 }
 
 .notification.low progress,
 .notification.normal progress {
-  background-color: @lavender;
+  background-color: #b4befe;
 }
 
 .notification progress,
@@ -160,19 +136,18 @@ trough {
   padding: 3px 0;
 }
 
-/* ── Control center ── */
-
+/* control center */
 .control-center {
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px @surface0;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px #313244;
   border-radius: 12.6px;
-  background-color: @base;
-  color: @text;
+  background-color: #1e1e2e;
+  color: #cdd6f4;
   padding: 14px;
 }
 
 .control-center .notification-background {
   border-radius: 7px;
-  box-shadow: inset 0 0 0 1px @surface1;
+  box-shadow: inset 0 0 0 1px #45475a;
   margin: 4px 10px;
 }
 
@@ -185,24 +160,24 @@ trough {
 }
 
 .control-center .widget-title > label {
-  color: @text;
+  color: #cdd6f4;
   font-size: 1.3em;
 }
 
 .control-center .widget-title button {
   border-radius: 7px;
-  color: @text;
-  background-color: @surface0;
-  box-shadow: inset 0 0 0 1px @surface1;
+  color: #cdd6f4;
+  background-color: #313244;
+  box-shadow: inset 0 0 0 1px #45475a;
   padding: 8px;
 }
 
 .control-center .widget-title button:hover {
-  background-color: @surface1;
+  background-color: #45475a;
 }
 
 .control-center .widget-title button:active {
-  background-color: @surface2;
+  background-color: #585b70;
 }
 
 .control-center .notification-group {
@@ -210,7 +185,7 @@ trough {
 }
 
 .control-center .notification-group:focus .notification-background {
-  background-color: @surface0;
+  background-color: #313244;
 }
 
 scrollbar slider {
@@ -222,8 +197,7 @@ scrollbar trough {
   margin: 2px 0;
 }
 
-/* ── DnD toggle ── */
-
+/* dnd */
 .widget-dnd {
   margin-top: 5px;
   border-radius: 8px;
@@ -233,29 +207,28 @@ scrollbar trough {
 .widget-dnd > switch {
   font-size: initial;
   border-radius: 8px;
-  background: @surface0;
+  background: #313244;
   box-shadow: none;
 }
 
 .widget-dnd > switch:checked {
-  background: @lavender;
+  background: #b4befe;
 }
 
 .widget-dnd > switch slider {
-  background: @surface1;
+  background: #45475a;
   border-radius: 8px;
 }
 
-/* ── MPRIS ── */
-
+/* mpris */
 .widget-mpris-player {
-  background: @surface0;
+  background: #313244;
   border-radius: 12.6px;
-  color: @text;
+  color: #cdd6f4;
 }
 
 .mpris-overlay {
-  background-color: @surface0;
+  background-color: #313244;
   opacity: 0.9;
   padding: 15px 10px;
 }
@@ -268,17 +241,17 @@ scrollbar trough {
 
 .widget-mpris-title {
   font-size: 1.2rem;
-  color: @text;
+  color: #cdd6f4;
 }
 
 .widget-mpris-subtitle {
   font-size: 1rem;
-  color: @subtext1;
+  color: #bac2de;
 }
 
 .widget-mpris button {
   border-radius: 12.6px;
-  color: @text;
+  color: #cdd6f4;
   margin: 0 5px;
   padding: 2px;
 }
@@ -288,38 +261,34 @@ scrollbar trough {
 }
 
 .widget-mpris button:hover {
-  background-color: @surface0;
+  background-color: #313244;
 }
 
 .widget-mpris button:active {
-  background-color: @surface1;
+  background-color: #45475a;
 }
 
 .widget-mpris button:disabled {
   opacity: 0.5;
 }
 
-/* ── Menubar / Power ── */
-
 .widget-menubar > box > .menu-button-bar > button > label {
   font-size: 3rem;
   padding: 0.5rem 2rem;
 }
 
 .widget-menubar > box > .menu-button-bar > :last-child {
-  color: @red;
+  color: #f38ba8;
 }
 
 .power-buttons button:hover,
 .powermode-buttons button:hover,
 .screenshot-buttons button:hover {
-  background: @surface0;
+  background: #313244;
 }
 
-/* ── Labels / Buttons Grid ── */
-
 .control-center .widget-label > label {
-  color: @text;
+  color: #cdd6f4;
   font-size: 2rem;
 }
 
@@ -331,28 +300,26 @@ scrollbar trough {
   font-size: 2.5rem;
 }
 
-/* ── Volume / Backlight ── */
-
 .widget-volume {
   padding: 1rem 0;
 }
 
 .widget-volume label {
-  color: @sapphire;
+  color: #74c7ec;
   padding: 0 1rem;
 }
 
 .widget-volume trough highlight {
-  background: @sapphire;
+  background: #74c7ec;
 }
 
 .widget-backlight trough highlight {
-  background: @yellow;
+  background: #f9e2af;
 }
 
 .widget-backlight label {
   font-size: 1.5rem;
-  color: @yellow;
+  color: #f9e2af;
 }
 
 .widget-backlight .KB {