actiondrawer: Use contextually correct colors and dark background at all times

This commit changes the action drawer colorsets to be contextually correct. The panel background would use the window background colors (instead of the view ones), and quicksettings delegates would use colors from the Button color set (rather than the view).

This also changes the background scrim to always be dark even in light mode. I think this is important to do because we have two views (notifications, and quick settings), which currently don't have much in the way of colours to distinguish the two. 

This commit also makes some changes to the notifications widget in order for its card foreground to be the standard theme colors.

![image](/uploads/b4e42984da926bc266d6c53d59a323b7/image.png){width=200}
![image](/uploads/4dc71502cdf85b5cbf6a2497a2384939/image.png){width=200}
![image](/uploads/ebd2d57ed46161ec8bb240a36c7069e7/image.png){width=300}

![image](/uploads/99656ee4cc322ee7412d7aef1c696893/image.png){width=200}
![image](/uploads/c0521a64069077fbe7e44b23159227e7/image.png){width=200}
![image](/uploads/6567a1bf42092d914a56d03ac5d7be54/image.png){width=300}

components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml

@@ -41,6 +41,9 @@ Item {
 
         panelType: MobileShell.PanelBackground.PanelType.Base
         flatten:  root.brightnessPressedValue
+
+        Kirigami.Theme.inherit: false
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
     }
 
     RowLayout {

components/mobileshell/qml/actiondrawer/private/ContentContainer.qml

@@ -26,7 +26,7 @@ Item {
 
     readonly property bool swipeAreaMoving: swipeAreaBase.moving || swipeAreaPortrait.moving
 
-    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
     Kirigami.Theme.inherit: false
 
     readonly property alias brightnessPressedValue: quickSettings.brightnessPressedValue
@@ -60,7 +60,7 @@ Item {
         color: Qt.rgba(Kirigami.Theme.backgroundColor.r,
                        Kirigami.Theme.backgroundColor.g,
                        Kirigami.Theme.backgroundColor.b,
-                       0.95)
+                       0.9)
         Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } }
         opacity: Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset))
     }

components/mobileshell/qml/actiondrawer/private/LandscapeContentContainer.qml

@@ -36,13 +36,6 @@ Item {
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
 
-    P5Support.DataSource {
-        id: timeSource
-        engine: "time"
-        connectedSources: ["Local"]
-        interval: 60 * 1000
-    }
-
     MouseArea {
         anchors.fill: parent
 

components/mobileshell/qml/actiondrawer/private/NotificationDrawer.qml

@@ -41,9 +41,6 @@ Item {
         interval: 60 * 1000
     }
 
-    Kirigami.Theme.colorSet: Kirigami.Theme.View
-    Kirigami.Theme.inherit: false
-
     MobileShell.VelocityCalculator {
         id: velocityCalculator
     }
@@ -66,6 +63,8 @@ Item {
         showHeader: actionDrawer.mode != MobileShell.ActionDrawer.Portrait
         listView.interactive: !actionDrawer.dragging && root.listOverflowing
 
+        cardColorScheme: Kirigami.Theme.View
+
         Connections {
             target: actionDrawer
 

components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml

@@ -34,13 +34,24 @@ MobileShell.BaseItem {
     // set by children
     property var iconItem
 
+    Kirigami.Theme.inherit: false
+    Kirigami.Theme.colorSet: Kirigami.Theme.Button
+
     readonly property color enabledButtonBorderColor: Qt.darker(Kirigami.Theme.highlightColor, 1.25)
-    readonly property color disabledButtonBorderColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.75)
+    readonly property color disabledButtonBorderColor: separatorColorHelper(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.2)
     readonly property color enabledButtonColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6)
     readonly property color enabledButtonPressedColor: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4);
     readonly property color disabledButtonColor: Kirigami.Theme.backgroundColor
     readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1)
 
+    function separatorColorHelper(bg, fg, baseRatio) {
+        if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) {
+            return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio);
+        } else {
+            return Kirigami.ColorUtils.linearInterpolation(bg, fg, baseRatio / 2);
+        }
+    }
+
     // scale animation on press
     property real zoomScale: 1
     Behavior on zoomScale {

components/mobileshell/qml/actiondrawer/private/QuickSettingsDrawer.qml

@@ -57,6 +57,9 @@ MobileShell.BaseItem {
     rightPadding: Kirigami.Units.smallSpacing
     bottomPadding: Kirigami.Units.smallSpacing * 4
 
+    Kirigami.Theme.inherit: false
+    Kirigami.Theme.colorSet: Kirigami.Theme.Window
+
     background: Item {
         opacity: brightnessPressedValue
 
@@ -66,6 +69,9 @@ MobileShell.BaseItem {
             anchors.bottomMargin: shadow.height
             panelType: MobileShell.PanelBackground.PanelType.Flat
             radius: 0
+
+            Kirigami.Theme.inherit: false
+            Kirigami.Theme.colorSet: Kirigami.Theme.Window
         }
 
         Rectangle {

components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml

@@ -41,6 +41,7 @@ QuickSettingsDelegate {
         Rectangle {
             anchors.fill: parent
             radius: Kirigami.Units.cornerRadius
+            border.pixelAligned: false
             border.width: 1
             border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
             color: {

components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml

@@ -40,6 +40,8 @@ QuickSettingsDelegate {
         Rectangle {
             anchors.fill: parent
             radius: Kirigami.Units.cornerRadius
+            border.pixelAligned: false
+            border.width: 1
             border.color: root.enabled ? root.enabledButtonBorderColor : root.disabledButtonBorderColor
             color: {
                 if (root.enabled) {

components/mobileshell/qml/actiondrawer/private/QuickSettingsPanel.qml

@@ -44,11 +44,17 @@ MobileShell.BaseItem {
     rightPadding: Kirigami.Units.smallSpacing * 4
     bottomPadding: Kirigami.Units.smallSpacing * 4
 
+    Kirigami.Theme.inherit: false
+    Kirigami.Theme.colorSet: Kirigami.Theme.Window
+
     background: MobileShell.PanelBackground {
         anchors.fill: parent
         anchors.margins: Kirigami.Units.largeSpacing
         panelType: MobileShell.PanelBackground.PanelType.Base
         opacity: brightnessPressedValue
+
+        Kirigami.Theme.inherit: false
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
     }
 
     contentItem: Item {

components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml

@@ -138,7 +138,6 @@ Item {
                         padding: root.padding
 
                         contentItem: ColumnLayout {
-                            Kirigami.Theme.inherit: true
                             width: playerItem.width - playerItem.leftPadding - playerItem.rightPadding
                             spacing: Kirigami.Units.largeSpacing
 

components/mobileshell/qml/widgets/notifications/NotificationGroupHeader.qml

@@ -21,7 +21,6 @@ import org.kde.coreaddons 1.0 as KCoreAddons
 RowLayout {
     id: notificationHeading
 
-    property bool inLockScreen: false
     property var applicationIconSource
     property string applicationName
     property string originName
@@ -44,7 +43,7 @@ RowLayout {
         Layout.leftMargin: Kirigami.Units.smallSpacing
         Layout.fillWidth: true
 
-        color: inLockScreen ? "white" : Kirigami.Theme.textColor
+        color: Kirigami.Theme.textColor
 
         opacity: 0.75
         elide: Text.ElideLeft

components/mobileshell/qml/widgets/notifications/NotificationItem.qml

@@ -27,6 +27,8 @@ BaseNotificationItem {
     property bool inLockScreen: false
     property int panelType: MobileShell.PanelBackground.PanelType.Drawer
 
+    property var cardColorScheme: Kirigami.Theme.View
+
     signal dragStart()
     signal dragEnd()
     signal takeFocus()
@@ -38,11 +40,6 @@ BaseNotificationItem {
         anchors.left: parent.left
         anchors.right: parent.right
 
-        inLockScreen: notificationItem.inLockScreen
-
-        Kirigami.Theme.colorSet: Kirigami.Theme.Header
-        Kirigami.Theme.inherit: false
-
         visible: !notificationItem.inGroup
         height: visible ? implicitHeight : 0
 
@@ -69,6 +66,9 @@ BaseNotificationItem {
         onDragStart: notificationItem.dragStart()
         onDragEnd: notificationItem.dragEnd()
 
+        Kirigami.Theme.inherit: false
+        Kirigami.Theme.colorSet: notificationItem.cardColorScheme
+
         ColumnLayout {
             id: column
             spacing: 0

components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml

@@ -38,6 +38,11 @@ Item {
      */
     property int panelType: MobileShell.PanelBackground.PanelType.Drawer
 
+    /**
+     * The color scheme of the foreground cards (but not notification headers, which are outside of it).
+     */
+    property var cardColorScheme: Kirigami.Theme.View
+
     /**
      * The notification model for the widget.
      */
@@ -375,6 +380,7 @@ Item {
 
                         inLockScreen: root.inLockScreen
                         panelType: root.panelType
+                        cardColorScheme: root.cardColorScheme
 
                         model: delegateLoader.model
                         modelIndex: delegateLoader.index

shell/contents/lockscreen/NotificationsComponent.qml

@@ -89,6 +89,8 @@ Loader {
                 bottomPadding: Kirigami.Units.gridUnit
                 listView.interactive: !root.scrollLock && listView.listOverflowing
 
+                cardColorScheme: Kirigami.Theme.Window
+
                 property bool requestNotificationAction: false
 
                 onUnlockRequested: {