waffles: transparency

dots/.config/quickshell/ii/modules/common/models/quickToggles/BluetoothToggle.qml

@@ -7,7 +7,7 @@ import qs.modules.common.widgets
 
 QuickToggleModel {
     name: Translation.tr("Bluetooth")
-    statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("No device")
+    statusText: BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Not connected")
     tooltipText: Translation.tr("%1 | Right-click to configure").arg(
         (BluetoothStatus.firstActiveDevice?.name ?? Translation.tr("Bluetooth"))
         + (BluetoothStatus.activeDeviceCount > 1 ? ` +${BluetoothStatus.activeDeviceCount - 1}` : "")

dots/.config/quickshell/ii/modules/ii/sessionScreen/SessionScreen.qml

@@ -93,7 +93,9 @@ Scope {
             WlrLayershell.namespace: "quickshell:session"
             WlrLayershell.layer: WlrLayer.Overlay
             WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
-            color: ColorUtils.transparentize(Appearance.m3colors.m3background, 0.3)
+            // This is a big surface so we needa carefully choose the transparency,
+            // or we'll get a large scary rgb blob
+            color: ColorUtils.transparentize(Appearance.m3colors.m3background, Appearance.m3colors.darkmode ? 0.04 : 0.12)
 
             anchors {
                 top: true

dots/.config/quickshell/ii/modules/waffle/actionCenter/FooterRectangle.qml

@@ -10,7 +10,7 @@ import qs.modules.waffle.looks
 Rectangle {
     Layout.fillHeight: false
     Layout.fillWidth: true
-    color: Looks.colors.bgPanelFooter
+    color: "transparent"
 
     implicitWidth: 360
     implicitHeight: 47

dots/.config/quickshell/ii/modules/waffle/actionCenter/mainPage/MainPageFooter.qml

@@ -22,7 +22,11 @@ FooterRectangle {
 
             FluentIcon {
                 anchors.verticalCenter: parent.verticalCenter
-                icon: WIcons.batteryIcon
+                icon: WIcons.batteryLevelIcon
+                FluentIcon {
+                    anchors.fill: parent
+                    icon: WIcons.batteryIcon
+                }
             }
             WText {
                 anchors.verticalCenter: parent.verticalCenter

dots/.config/quickshell/ii/modules/waffle/bar/BarButton.qml

@@ -19,8 +19,11 @@ WButton {
     Layout.fillHeight: true
     topInset: 4
     bottomInset: 4
+    leftInset: 0
+    rightInset: 0
+    horizontalPadding: 8
 
-    colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.contentTransparency : 1)
+    colBackgroundBorder: ColorUtils.transparentize(Looks.colors.bg1Border, (root.checked || root.hovered) ? Looks.backgroundTransparency : 1)
     color: {
         if (root.down) {
             return root.colBackgroundActive

dots/.config/quickshell/ii/modules/waffle/bar/BarPopup.qml

@@ -118,7 +118,7 @@ Loader {
                 bottomMargin: root.barAtBottom ? popupWindow.sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin)
                 topMargin: root.barAtBottom ? (root.ambientShadowWidth + root.visualMargin) : popupWindow.sourceEdgeMargin
             }
-            color: Looks.colors.bg1
+            color: Looks.colors.bg1Base
             radius: Looks.radius.large
 
             // test

dots/.config/quickshell/ii/modules/waffle/bar/SystemButton.qml

@@ -50,7 +50,11 @@ BarButton {
                 visible: Battery?.available ?? false
                 iconItem: FluentIcon {
                     anchors.verticalCenter: parent.verticalCenter
-                    icon: WIcons.batteryIcon
+                    icon: WIcons.batteryLevelIcon
+                    FluentIcon {
+                        anchors.fill: parent
+                        icon: WIcons.batteryIcon
+                    }
                 }
             }
         }

dots/.config/quickshell/ii/modules/waffle/bar/TimeButton.qml

@@ -9,7 +9,8 @@ BarButton {
     id: root
 
     rightInset: 12 // For now this is the rightmost button. Desktop peek is useless. (for now)
-    padding: 12
+    leftPadding: 12
+    rightPadding: 22
 
     checked: GlobalStates.sidebarRightOpen
     onClicked: {
@@ -17,7 +18,7 @@ BarButton {
     }
 
     contentItem: Item {
-        anchors.centerIn: root.background
+        // anchors.centerIn: parent
         implicitHeight: contentLayout.implicitHeight
         implicitWidth: contentLayout.implicitWidth
         Row {

dots/.config/quickshell/ii/modules/waffle/bar/tasks/TaskPreview.qml

@@ -85,7 +85,7 @@ PopupWindow {
                 bottomMargin: root.bottom ? sourceEdgeMargin : (root.ambientShadowWidth + root.visualMargin)
                 topMargin: root.bottom ? (root.ambientShadowWidth + root.visualMargin) : sourceEdgeMargin
             }
-            color: Looks.colors.bg1
+            color: Looks.colors.bg1Base
             radius: Looks.radius.large
 
             layer.enabled: true

dots/.config/quickshell/ii/modules/waffle/looks/AcrylicRectangle.qml

@@ -9,7 +9,7 @@ Rectangle {
     id: root
 
     property bool shiny: true // Top border
-    property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? Looks.contentTransparency : 1)
+    property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Border, shiny ? 0.5 : 1)
     color: Looks.colors.bg1Hover
     radius: Looks.radius.medium
     Behavior on color {

dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml

@@ -8,6 +8,8 @@ import qs.modules.common.functions
 
 Singleton {
     id: root
+    property QtObject darkColors
+    property QtObject lightColors
     property QtObject colors
     property QtObject radius
     property QtObject font
@@ -15,44 +17,100 @@ Singleton {
     property string iconsPath: `${Directories.assetsPath}/icons/fluent`
     property bool dark: Appearance.m3colors.darkmode
 
-    property real backgroundTransparency: 0.17
+    property real backgroundTransparency: 0.15
-    property real contentTransparency: 0.25
+    property real panelBackgroundTransparency: 0.12
+    property real panelLayerTransparency: root.dark ? 0.9 : 0.7
+    property real contentTransparency: root.dark ? 0.9 : 0.5
     function applyBackgroundTransparency(col) {
         return ColorUtils.applyAlpha(col, 1 - root.backgroundTransparency)
     }
     function applyContentTransparency(col) {
         return ColorUtils.applyAlpha(col, 1 - root.contentTransparency)
     }
+    lightColors: QtObject { // TODO: figure out transparency
+        id: lightColors
+        property color bgPanelFooter: "#EEEEEE"
+        property color bgPanelBody: "#F2F2F2"
+        property color bgPanelSeparator: "#E0E0E0"
+        property color bg0: "#EEEEEE"
+        property color bg0Border: "#BEBEBE"
+        property color bg1: "#F7F7F7"
+        property color bg1Base: "#F7F7F7"
+        property color bg1Hover: "#F7F7F7"
+        property color bg1Active: '#EFEFEF'
+        property color bg1Border: '#141414'
+        property color bg2: "#FBFBFB"
+        property color bg2Base: "#FBFBFB"
+        property color bg2Hover: "#FDFDFD"
+        property color bg2Active: "#FDFDFD"
+        property color bg2Border: "#EEEEEE"
+        property color subfg: "#5C5C5C"
+        property color fg: "#000000"
+        property color fg1: "#626262"
+        property color inactiveIcon: "#C4C4C4"
+        property color controlBg: '#b18484'
+        property color controlFg: "#FFFFFF"
+        property color accentUnfocused: "#848484"
+    }
+    darkColors: QtObject {
+        id: darkColors
+        property color bgPanelFooter: "#1C1C1C"
+        property color bgPanelBody: '#616161'
+        property color bgPanelSeparator: "#191919"
+        property color bg0: "#1C1C1C"
+        property color bg0Border: "#404040"
+        property color bg1Base: "#2C2C2C"
+        property color bg1: "#a8a8a8"
+        property color bg1Hover: "#b3b3b3"
+        property color bg1Active: '#727272'
+        property color bg1Border: '#bebebe'
+        property color bg2Base: "#313131"
+        property color bg2: '#8a8a8a'
+        property color bg2Hover: '#b1b1b1'
+        property color bg2Active: '#919191'
+        property color bg2Border: "#bebebe"
+        property color subfg: "#CED1D7"
+        property color fg: "#FFFFFF"
+        property color fg1: "#D1D1D1"
+        property color inactiveIcon: "#494949"
+        property color controlBg: "#9B9B9B"
+        property color controlFg: "#454545"
+        property color accentUnfocused: "#989898"
+    }
     colors: QtObject {
         id: colors
+        property color shadow: ColorUtils.transparentize("#000000", 0.62)
         property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
-        property color bgPanelFooter: root.dark ? "#1C1C1C" : "#EEEEEE"
+        property color bgPanelFooterBase: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelBackgroundTransparency)
-        property color bgPanelBody: root.dark ? "#242424" : "#F2F2F2"
+        property color bgPanelFooter: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelFooter : root.lightColors.bgPanelFooter, root.panelLayerTransparency)
-        property color bgPanelSeparator: root.dark ? "#191919" : "#E0E0E0"
+        property color bgPanelBody: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody, root.panelLayerTransparency)
-        property color bg0: root.dark ? "#1C1C1C" : "#EEEEEE"
+        property color bgPanelSeparator: ColorUtils.transparentize(root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, root.backgroundTransparency)
-        property color bg0Border: root.dark ? "#404040" : "#BEBEBE"
+        property color bg0Opaque: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
-        property color bg1: root.dark ? "#2C2C2C" : "#F7F7F7"
+        property color bg0: ColorUtils.transparentize(bg0Opaque, root.backgroundTransparency)
-        property color bg1Hover: root.dark ? "#292929" : "#F7F7F7"
+        property color bg0Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg0Border : root.lightColors.bg0Border, root.backgroundTransparency)
-        property color bg1Active: root.dark ? "#252525" : "#F3F3F3"
+        property color bg1Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Base : root.lightColors.bg1Base, root.backgroundTransparency)
-        property color bg1Border: root.dark ? "#333333" : "#E9E9E9"
+        property color bg1: ColorUtils.transparentize(root.dark ? root.darkColors.bg1 : root.lightColors.bg1, root.contentTransparency)
-        property color bg2: root.dark ? "#313131" : "#FBFBFB"
+        property color bg1Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Hover : root.lightColors.bg1Hover, root.contentTransparency)
-        property color bg2Hover: root.dark ? "#383838" : "#FDFDFD"
+        property color bg1Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Active : root.lightColors.bg1Active, root.contentTransparency)
-        property color bg2Active: root.dark ? "#333333" : "#FDFDFD"
+        property color bg1Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg1Border : root.lightColors.bg1Border, root.contentTransparency)
-        property color bg2Border: root.dark ? "#464646" : "#EEEEEE"
+        property color bg2Base: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Base : root.lightColors.bg2Base, root.backgroundTransparency)
-        property color subfg: root.dark ? "#CED1D7" : "#5C5C5C"
+        property color bg2: ColorUtils.transparentize(root.dark ? root.darkColors.bg2 : root.lightColors.bg2, root.contentTransparency)
-        property color fg: root.dark ? "#FFFFFF" : "#000000"
+        property color bg2Hover: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Hover : root.lightColors.bg2Hover, root.contentTransparency)
-        property color fg1: root.dark ? "#D1D1D1" : "#626262"
+        property color bg2Active: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Active : root.lightColors.bg2Active, root.contentTransparency)
-        property color inactiveIcon: root.dark ? "#494949" : "#C4C4C4"
+        property color bg2Border: ColorUtils.transparentize(root.dark ? root.darkColors.bg2Border : root.lightColors.bg2Border, root.contentTransparency)
-        property color controlBg: root.dark ? "#9B9B9B" : "#868686"
+        property color subfg: root.dark ? root.darkColors.subfg : root.lightColors.subfg
-        property color controlFg: root.dark ? "#454545" : "#FFFFFF"
+        property color fg: root.dark ? root.darkColors.fg : root.lightColors.fg
+        property color fg1: root.dark ? root.darkColors.fg1 : root.lightColors.fg1
+        property color inactiveIcon: root.dark ? root.darkColors.inactiveIcon : root.lightColors.inactiveIcon
+        property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
+        property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
         property color danger: "#C42B1C"
         property color dangerActive: "#B62D1F"
         property color warning: "#FF9900"
-        // property color accent: root.dark ? "#A5C6D8" : "#5377A3"
         property color accent: Appearance.colors.colPrimary
         property color accentHover: Appearance.colors.colPrimaryHover
         property color accentActive: Appearance.colors.colPrimaryActive
-        property color accentUnfocused: root.dark ? "#989898" : "#848484"
+        property color accentUnfocused: root.dark ? root.darkColors.accentUnfocused : root.lightColors.accentUnfocused
         property color accentFg: ColorUtils.isDark(accent) ? "#FFFFFF" : "#000000"
     }
 

dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml

@@ -25,6 +25,10 @@ Item {
     implicitHeight: borderRect.implicitHeight
     implicitWidth: borderRect.implicitWidth
 
+    WRectangularShadow {
+        target: borderRect
+    }
+
     Rectangle {
         id: borderRect
         z: 1

dots/.config/quickshell/ii/modules/waffle/looks/WButton.qml

@@ -85,8 +85,8 @@ Button {
     property alias border: backgroundRect.border
     horizontalPadding: 10
     verticalPadding: 6
-    implicitHeight: contentItem.implicitHeight + verticalPadding * 2
+    implicitHeight: contentItem.implicitHeight + verticalPadding * 2 + topInset + bottomInset
-    implicitWidth: contentItem.implicitWidth + horizontalPadding * 2
+    implicitWidth: contentItem.implicitWidth + horizontalPadding * 2 + leftInset + rightInset
 
     background: Rectangle {
         id: backgroundRect

dots/.config/quickshell/ii/modules/waffle/looks/WIcons.qml

@@ -40,7 +40,12 @@ Singleton {
             return "battery-warning";
         if (Battery.percentage >= 0.9)
             return "battery-full";
-        return `battery-${Math.ceil(Battery.percentage * 10)}`;
+        return `battery-0`;
+    }
+
+    property string batteryLevelIcon: {
+        const discreteLevel = Math.ceil(Battery.percentage * 10)
+        return `battery-${discreteLevel > 9 ? "full" : discreteLevel}`;
     }
 
     property string volumeIcon: {

dots/.config/quickshell/ii/modules/waffle/looks/WRectangularShadow.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import QtQuick.Effects
+import qs.modules.common
+import qs.modules.common.widgets
+
+StyledRectangularShadow {
+    blur: 10
+    spread: 2
+    offset: Qt.vector2d(0.0, 4)
+    color: Looks.colors.shadow
+}

dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml

@@ -4,15 +4,15 @@ import qs.modules.waffle.looks
 
 StackView {
     id: root
-    property real moveDistance: 20
+    property real moveDistance: 30
-    property int pushDuration: 100
+    property int pushDuration: 220
     property list<real> bezierCurve: Looks.transition.easing.bezierCurve.easeIn
     clip: true
 
     property alias color: background.color
     background: Rectangle {
         id: background
-        color: Looks.colors.bgPanelBody
+        color: Looks.colors.bgPanelFooterBase
     }
 
     pushEnter: Transition {

dots/.config/quickshell/ii/modules/waffle/looks/WToolTipContent.qml

@@ -21,7 +21,7 @@ Item {
         anchors.centerIn: parent
         implicitWidth: root.realContentItem.implicitWidth + root.horizontalPadding * 2
         implicitHeight: root.realContentItem.implicitHeight + root.verticalPadding * 2
-        color: Looks.colors.bg1
+        color: Looks.colors.bg1Base
         radius: Looks.radius.medium
 
         children: [root.realContentItem]