waffles: expandable notifs

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

@@ -0,0 +1,42 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WButton {
+    id: root
+
+    colBackground: Looks.colors.bg1
+    colBackgroundHover: Looks.colors.bg1Hover
+    colBackgroundActive: Looks.colors.bg1Active
+    property color colBackgroundBorder
+    property color color
+    property alias border: background.border
+    property alias shinyColor: background.borderColor
+
+    colBackgroundBorder: ColorUtils.transparentize(color, (root.checked || root.hovered) ? Looks.backgroundTransparency : 0)
+    color: {
+        if (root.down) {
+            return root.colBackgroundActive
+        } else if ((root.hovered && !root.down) || root.checked) {
+            return root.colBackgroundHover
+        } else {
+            return root.colBackground
+        }
+    }
+
+    background: AcrylicRectangle {
+        id: background
+        shiny: ((root.hovered && !root.down) || root.checked)
+        color: root.color
+        radius: Looks.radius.medium
+        border.width: 1
+        border.color: root.colBackgroundBorder
+
+        Behavior on border.color {
+            animation: Looks.transition.color.createObject(this)
+        }
+    }
+}

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

@@ -9,16 +9,17 @@ Rectangle {
     id: root
 
     property bool shiny: true // Top border
-    property color borderColor: ColorUtils.transparentize(Looks.colors.bg2Border, shiny ? 0.5 : 1)
+    property color borderColor: ColorUtils.transparentize(Looks.colors.bg1Hover, 0.7)
+    property color internalBorderColor: ColorUtils.transparentize(borderColor, shiny ? 0.0 : 1)
     color: Looks.colors.bg1Hover
     radius: Looks.radius.medium
     Behavior on color {
         animation: Looks.transition.color.createObject(this)
     }
-    Behavior on borderColor {
+    Behavior on internalBorderColor {
         animation: Looks.transition.color.createObject(this)
     }
-    onBorderColorChanged: {
+    onInternalBorderColorChanged: {
         borderCanvas.requestPaint();
     }
     
@@ -32,7 +33,7 @@ Rectangle {
             var ctx = getContext("2d");
             ctx.clearRect(0, 0, width, height);
 
-            var borderColor = root.borderColor;
+            var borderColor = root.internalBorderColor;
 
             var r = root.radius;
             var fadeLength = Math.max(1, r);

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

@@ -53,6 +53,7 @@ Singleton {
         property color controlBgHover: '#57575B'
         property color controlFg: "#FFFFFF"
         property color accentUnfocused: "#848484"
+        property color link: "#235CCF"
     }
     darkColors: QtObject {
         id: darkColors
@@ -80,6 +81,7 @@ Singleton {
         property color controlBgHover: "#CFCED1"
         property color controlFg: "#454545"
         property color accentUnfocused: "#989898"
+        property color link: "#A7C9FC"
     }
     colors: QtObject {
         id: colors
@@ -110,6 +112,7 @@ Singleton {
         property color controlBg: root.dark ? root.darkColors.controlBg : root.lightColors.controlBg
         property color controlBgHover: root.dark ? root.darkColors.controlBgHover : root.lightColors.controlBgHover
         property color controlFg: root.dark ? root.darkColors.controlFg : root.lightColors.controlFg
+        property color link: root.dark ? root.darkColors.link : root.lightColors.link
         property color danger: "#C42B1C"
         property color dangerActive: "#B62D1F"
         property color warning: "#FF9900"

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

@@ -8,8 +8,11 @@ Text {
     color: Looks.colors.fg
 
     font {
+        hintingPreference: Font.PreferFullHinting
         family: Looks.font.family.ui
         pixelSize: Looks.font.pixelSize.normal
         weight: Looks.font.weight.regular
     }
+
+    linkColor: Looks.colors.link
 }