hyprland/swaync: use gtk vars

configs/hyprland/swaync/style.css

-@define-color bg #222226;
-@define-color selected_bg #38383C;
-
-@define-color text #ffffff;
-@define-color border #5C84B9;
-@define-color control-center-border #434347;
-
-@define-color priority_low #74e3b4;
-@define-color priority_normal #86e8ff;
-@define-color priority_critical #f26476;
-
 * {
-	color: @text;
+	color: var(--window-fg-color);
 	font-size: 15px;
 	transition: 200ms;
 }
@@ -21,9 +10,9 @@
 
 /* ---------- ЦЕНТР УПРАВЛЕНИЯ ---- CONTROL CENTER */
 .control-center {
-	background: @bg;
-	border-radius: 15px;
-	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+	background: var(--window-bg-color);
+	border-radius: var(--window-radius);
+	box-shadow: 0 0 10px 0 var(--headerbar-shade-color);
 }
 
 .notification-row {
@@ -33,7 +22,7 @@
 .notification-row:focus,
 .notification-group:focus,
 .notification-group {
-	background: @bg;
+	background: none;
 }
 
 .blank-window,
@@ -41,32 +30,31 @@
 	background: none;
 }
 
-
 /* ---------- ГРУППА УВЕДОМЛЕНИЙ ---- NOTIFICATION GROUP */
 .notification-group .notification-group-close-button .close-button {
-	background: alpha(@bg, 0.6);
-	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+	background: alpha(var(--window-bg-color), 0.4);
+	box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
 	margin: 15px 20px;
 }
 
 .notification-group .notification-group-close-button .close-button:hover {
-	background: alpha(@bg, 0.4);
+	background: alpha(var(--window-bg-color), 0.8);
 }
 
 .notification-group .notification-group-buttons,
 .notification-group .notification-group-headers {
 	background: transparent;
 	margin: 0 15px;
-	color: @text;
+	color: var(--window-fg-color);
 }
 
 .notification-group .notification-group-headers .notification-group-icon {
-	color: @text;
+	color: var(--window-fg-color);
 }
 
 .notification-group .notification-group-headers .notification-group-header {
 	font-size: 18px;
-	color: @text;
+	color: var(--window-fg-color);
 }
 
 .notification-group .notification-group-buttons {
@@ -75,35 +63,34 @@
 
 /* ---------- УВЕДОМЛЕНИЕЯ ---- NOTIFICATIONS */
 .notification-row .notification-background .notification {
-	background: @selected_bg;
+	background: var(--dialog-bg-color);
 	transition: background 0.15s ease-in-out;
-	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
-	border-radius: 15px;
-	border: none;
-	border-left: 3px;
+	box-shadow: 0 0 5px 0 var(--headerbar-shade-color);
+	border-radius: var(--window-radius);
+	border: 1.5px solid var(--border-color);
 	padding: 0px;
 }
 
 /* ----- НИЗКИЙ ПРИОРИТЕТ --- LOW */
 .notification-row .notification-background .notification.low {
-	border-left: 3px solid @priority_low;
+	border-left: 4px solid var(--success-bg-color);
 }
 
 /* ----- ОБЫЧНЫЙ ПРИОРИТЕТ --- NORMAL */
 .notification-row .notification-background .notification.normal {
-	border-left: 3px solid @priority_normal;
+	border-left: 4px solid var(--blue-3);
 }
 
 /* ----- ВЫСОКИЙ ПРИОРИТЕТ --- CRITICAL */
 .notification-row .notification-background .notification.critical {
-	border-left: 3px solid @priority_critical;
+	border-left: 4px solid var(--error-bg-color);
 }
 
 /* ----- ДЕЙСТВИЕ ПО УМОЛЧАНИЮ --- DEFAULT ACTION */
 .notification-default-action {
 	background: transparent;
 	padding: 10px;
-	padding-left: 5px;
+	padding-left: 10px;
 	margin: 0;
 	border: none;
 }
@@ -116,7 +103,7 @@
 }
 
 .notification-content .image {
-	border-radius: 15px;
+	border-radius: var(--window-radius);
 	margin: 0px 10px 0px 0px;
 }
 
@@ -137,7 +124,7 @@
 	background: transparent;
 	font-weight: normal;
 	font-size: 14px;
-	color: @text;
+	color: var(--window-fg-color);
 }
 
 .notification-content .text-box .summary,
@@ -156,12 +143,12 @@
 
 /* ----- КНОПКА ЗАКРЫТИЯ --- CLOSE BUTTON */
 .close-button {
-	background: alpha(@bg, 0.6);
-	color: @text;
+	background: alpha(var(--window-bg-color), 0.6);
+	color: var(--window-fg-color);
 }
 
 .close-button:hover {
-	background: alpha(@bg, 0.4);
+	background: alpha(var(--window-bg-color), 0.4);
 }
 
 /* ----- КНОПКА --- BUTTON */
@@ -174,15 +161,16 @@
 }
 
 .notification-action .text-button {
-	background: alpha(@bg, 0.4);
-	border-radius: 12px;
+	background: alpha(var(--window-bg-color), 0.4);
+	border-radius: var(--window-radius);
+	border: 1px solid var(--border-color);
 	font-size: 12px;
-	padding: 8px;
+	padding: 5px;
 }
 
 .notification-action .text-button:hover {
-	background: alpha(@bg, 0.2);
-	border: 1px solid @border;
+	background: alpha(var(--window-bg-color), 0.2);
+	border: 2px solid var(--accent-bg-color);
 }
 
 /* ---------- ВИДЖЕТЫ ---- WIDGETS */
@@ -202,12 +190,12 @@
 
 .powermode-buttons {
 	all: unset;
-	background: @selected_bg;
-	border-radius: 12px;
-	padding: 10px;
+	background: var(--dialog-bg-color);
+	padding: 5px;
 	margin: 5px;
-	border-radius: 15px;
-	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+	border-radius: var(--window-radius);
+	border: 1px solid var(--border-color);
+	box-shadow: 0px 0px 10px var(--headerbar-shade-color);
 }
 
 .powermode-buttons .text-button {
@@ -215,31 +203,39 @@
 	background: transparent;
 	border: none;
 	margin: 2px;
-	border-radius: 15px;
+	border-radius: var(--window-radius);
+	padding: 0px;
 }
 .powermode-buttons .text-button:hover {
-	background: alpha(@bg, 0.3);
+	background: alpha(var(--accent-bg-color), 0.5);
 }
 
 .powermode-buttons .text-button.toggle:checked {
-	background: alpha(@bg, 0.4);
+	background: alpha(var(--accent-bg-color), 0.8);
 }
 
 .powermode-buttons .text-button label {
+	margin: 0px;
+	padding-top: 5px;
 	padding-bottom: 5px;
 }
 .powermode-buttons .text-button label:hover {
-	color: alpha(@text, 0.6);
+	color: var(--accent-fg-color);
+}
+
+.powermode-buttons .text-button.toggle:checked label {
+	color: var(--accent-fg-color);
 }
 
 /* ----- ГРОМКОСТЬ --- VOLUME */
 .widget-volume {
-	background: @selected_bg;
-	border-radius: 15px;
+	background: var(--dialog-bg-color);
+	border-radius: var(--window-radius);
 	padding: 5px;
 	margin: 10px;
-	border-radius: 15px;
-	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+	box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+	border: 1px solid var(--border-color);
+	
 }
 .widget-volume .image-button {
 	background: transparent;
@@ -253,7 +249,6 @@
 /* ----- ПРЕЕР --- MPRIS */
 .widget-mpris {
 	margin: 5px;
-	border-radius: 15px;
 }
 
 .widget-mpris carouselindicatordots {
@@ -272,18 +267,18 @@
 
 .widget-mpris .widget-mpris-player {
 	margin: 5px;
-	border-radius: 15px;
-	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+	border-radius: var(--window-radius);
+	box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+	border: 1px solid var(--border-color);
 }
 
 .widget-mpris .widget-mpris-player .mpris-overlay {
-	background: @selected_bg;
+	background: var(--dialog-bg-color);
 	padding: 5px;
 }
 
 .widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art {
-	border: 1.3px solid @border;
-	border-radius: 15px;
+	border-radius: var(--window-radius);
 	margin: 3px;
 	box-shadow: none;
 }
@@ -302,7 +297,8 @@
 }
 
 .widget-mpris .widget-mpris-player .mpris-overlay .image-button:hover {
-	background: alpha(@bg, 0.3);
+	background: alpha(var(--window-bg-color), 0.3);
+	border: 0.5px solid var(--border-color);
 }
 
 /* ----- ЗАГОЛОВОК --- TITLE */
@@ -317,14 +313,15 @@
 }
 
 .widget-title>button {
-	background: @selected_bg;
-	border-radius: 15px;
+	background: var(--dialog-bg-color);
+	border-radius: var(--window-radius);
 	padding: 3px 5px 3px 2px;
+	border: 1px solid var(--border-color);
 }
 
 .widget-title>button:hover {
-	background: alpha(@selected_bg, 0.5);
-	border: 1px solid @border;
+	background: alpha(var(--dialog-bg-color), 0.5);
+	border: 1px solid var(--accent-bg-color);
 }
 
 /* ----- НЕ БЕСПОКОИТЬ --- DND */
@@ -336,11 +333,7 @@
 
 .widget-dnd label {
 	font-size: 16px;
-	color: alpha(@text, 0.8);
-}
-
-.widget-notifications {
-	padding: 0px;
+	color: alpha(var(--window-fg-color), 0.8);
 }
 
 /* ----- УВЕДОМЛЕНИЯ --- NOTIFICATIONS */
@@ -350,17 +343,17 @@
 }
 .widget-notifications .notification-group.collapsed
 .notification-row:not(:last-child) .notification {
-	background: @bg;
+	background: var(--window-bg-color);
 }
 .widget-notifications .notification-group.collapsed
 .notification-row:not(:last-child) .notification.low {
-	border-left: 3px solid alpha(@priority_low, 0.5);
+	border-left: 3px solid alpha(var(--success-bg-color), 0.5);
 }
 .widget-notifications .notification-group.collapsed
 .notification-row:not(:last-child) .notification.normal {
-	border-left: 3px solid alpha(@priority_normal, 0.5);
+	border-left: 3px solid alpha(var(--blue-3), 0.5);
 }
 .widget-notifications .notification-group.collapsed
 .notification-row:not(:last-child) .notification.critical {
-	border-left: 3px solid alpha(@priority_critical, 0.5);
+	border-left: 3px solid alpha(var(--error-bg-color), 0.5);
 }