notif/toasts: refactoring colors

modules/notifications/AppIconBadge.qml

@@ -13,15 +13,9 @@ StyledRect {
     required property Notifs.Notif modelData
     required property bool hasImage
     required property bool hasAppIcon
-    required property bool isCritical
-    required property bool isLow
 
     radius: Appearance.rounding.full
-    color: {
+    color: modelData.getBadgeBackgroundColor()
-        if (root.isCritical) return Colours.palette.m3error;
-        if (root.isLow) return Colours.layer(Colours.palette.m3surfaceContainerHighest, 2);
-        return Colours.palette.m3secondaryContainer;
-    }
     implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
     implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 
@@ -40,11 +34,7 @@ StyledRect {
         sourceComponent: ColouredIcon {
             anchors.fill: parent
             source: Quickshell.iconPath(root.modelData.appIcon)
-            colour: {
+            colour: root.modelData.getIconColor()
-                if (root.isCritical) return Colours.palette.m3onError;
-                if (root.isLow) return Colours.palette.m3onSurface;
-                return Colours.palette.m3onSecondaryContainer;
-            }
             layer.enabled: root.modelData.appIcon.endsWith("symbolic")
         }
     }
@@ -59,12 +49,7 @@ StyledRect {
 
         sourceComponent: MaterialIcon {
             text: Icons.getNotifIcon(root.modelData.summary, root.modelData.urgency)
-
+            color: root.modelData.getIconColor()
-            color: {
-                if (root.isCritical) return Colours.palette.m3onError;
-                if (root.isLow) return Colours.palette.m3onSurface;
-                return Colours.palette.m3onSecondaryContainer;
-            }
             font.pointSize: Appearance.font.size.large
         }
     }

modules/notifications/Notification.qml

@@ -17,8 +17,6 @@ StyledRect {
     required property Notifs.Notif modelData
     readonly property bool hasImage: modelData.image.length > 0
     readonly property bool hasAppIcon: modelData.appIcon.length > 0
-    readonly property bool isCritical: modelData.urgency === NotificationUrgency.Critical
-    readonly property bool isLow: modelData.urgency === NotificationUrgency.Low
     readonly property int nonAnimHeight: {
         const baseHeight = summary.implicitHeight + inner.anchors.margins * 2;
         return root.expanded 
@@ -28,9 +26,7 @@ StyledRect {
     property bool expanded
     property bool disableSlideIn: false
 
-    color: root.isCritical 
+    color: modelData.getBackgroundColor()
-        ? Colours.palette.m3secondaryContainer 
-        : Colours.tPalette.m3surfaceContainer
     radius: Appearance.rounding.normal
     implicitWidth: Config.notifs.sizes.width
     implicitHeight: inner.implicitHeight
@@ -159,8 +155,6 @@ StyledRect {
                     modelData: root.modelData
                     hasImage: root.hasImage
                     hasAppIcon: root.hasAppIcon
-                    isCritical: root.isCritical
-                    isLow: root.isLow
                 }
             }
 
@@ -302,9 +296,7 @@ StyledRect {
 
                 StateLayer {
                     radius: Appearance.rounding.full
-                    color: root.isCritical 
+                    color: root.modelData.getStateLayerColor()
-                        ? Colours.palette.m3onSecondaryContainer 
-                        : Colours.palette.m3onSurface
 
                     function onClicked() {
                         root.expanded = !root.expanded;
@@ -424,12 +416,8 @@ StyledRect {
 
         required property var modelData
 
-        readonly property bool isCritical: root.isCritical
-
         radius: Appearance.rounding.full
-        color: isCritical 
+        color: root.modelData.getActionBackgroundColor()
-            ? Colours.palette.m3secondary 
-            : Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
 
         Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
         Layout.preferredHeight: actionText.height + Appearance.padding.small * 2
@@ -438,9 +426,7 @@ StyledRect {
 
         StateLayer {
             radius: Appearance.rounding.full
-            color: isCritical 
+            color: root.modelData.getStateLayerColor()
-                ? Colours.palette.m3onSecondary 
-                : Colours.palette.m3onSurface
 
             function onClicked(): void {
                 action.modelData.invoke();
@@ -452,9 +438,7 @@ StyledRect {
 
             anchors.centerIn: parent
             text: actionTextMetrics.elidedText
-            color: isCritical 
+            color: root.modelData.getActionTextColor()
-                ? Colours.palette.m3onSecondary 
-                : Colours.palette.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.small
         }
 

modules/notifications/NotificationToast.qml

@@ -85,8 +85,6 @@ StyledRect {
                     modelData: root.modelData
                     hasImage: root.hasImage
                     hasAppIcon: root.hasAppIcon
-                    isCritical: root.modelData.urgency === NotificationUrgency.Critical
-                    isLow: root.modelData.urgency === NotificationUrgency.Low
                 }
             }
         }

services/Notifs.qml

@@ -179,6 +179,41 @@ Singleton {
         property bool hasActionIcons
         property list<var> actions
 
+        readonly property bool isCritical: urgency === NotificationUrgency.Critical
+        readonly property bool isLow: urgency === NotificationUrgency.Low
+
+        function getBackgroundColor(): color {
+            if (isCritical) return Colours.palette.m3secondaryContainer;
+            return Colours.tPalette.m3surfaceContainer;
+        }
+
+        function getBadgeBackgroundColor(): color {
+            if (isCritical) return Colours.palette.m3error;
+            if (isLow) return Colours.layer(Colours.palette.m3surfaceContainerHighest, 2);
+            return Colours.palette.m3secondaryContainer;
+        }
+
+        function getIconColor(): color {
+            if (isCritical) return Colours.palette.m3onError;
+            if (isLow) return Colours.palette.m3onSurface;
+            return Colours.palette.m3onSecondaryContainer;
+        }
+
+        function getStateLayerColor(): color {
+            if (isCritical) return Colours.palette.m3onSecondaryContainer;
+            return Colours.palette.m3onSurface;
+        }
+
+        function getActionBackgroundColor(): color {
+            if (isCritical) return Colours.palette.m3secondary;
+            return Colours.layer(Colours.palette.m3surfaceContainerHigh, 2);
+        }
+
+        function getActionTextColor(): color {
+            if (isCritical) return Colours.palette.m3onSecondary;
+            return Colours.palette.m3onSurfaceVariant;
+        }
+
         readonly property Timer timer: Timer {
             id: toastTimer