waffle: adjust acrylic rectangle and border colors

dots/.config/quickshell/ii/modules/waffle/actionCenter/toggles/ActionCenterToggleButton.qml

@@ -32,13 +32,13 @@ ColumnLayout {
     property color colBackground: toggled ? Looks.colors.accent : Looks.colors.bg2
     property color colBackgroundHovered: toggled ? Looks.colors.accentHover : Looks.colors.bg2Hover
     property color colBackgroundActive: toggled ? Looks.colors.accentActive : Looks.colors.bg2Active
-    property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg0Border
+    property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg2Border
     property color colForeground: toggled ? Looks.colors.accentFg : Looks.colors.fg1
 
     spacing: 0
     property real wholeToggleWidth: 96
 
-    Rectangle {
+    AcrylicRectangle {
         Layout.fillWidth: true
         implicitWidth: root.wholeToggleWidth
         implicitHeight: 48

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 ? 0.5 : 1)
+    property color borderColor: ColorUtils.transparentize(Looks.colors.bg2Border, shiny ? 0.5 : 1)
     color: Looks.colors.bg1Hover
     radius: Looks.radius.medium
     Behavior on color {
@@ -22,10 +22,12 @@ Rectangle {
         borderCanvas.requestPaint();
     }
     
-    // Top 1px border with color 
+    // 1px border at the top or bottom
     Canvas {
         id: borderCanvas
         anchors.fill: parent
+        // For dark mode we have a shiny top border, and for light mode we have sort of a shadow
+        rotation: Looks.dark ? 0 : 180
         onPaint: {
             var ctx = getContext("2d");
             ctx.clearRect(0, 0, width, height);

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

@@ -33,17 +33,17 @@ Singleton {
         property color bgPanelBody: "#F2F2F2"
         property color bgPanelSeparator: "#E0E0E0"
         property color bg0: "#EEEEEE"
-        property color bg0Border: "#BEBEBE"
+        property color bg0Border: '#adadad'
         property color bg1: "#F7F7F7"
         property color bg1Base: "#F7F7F7"
         property color bg1Hover: "#F7F7F7"
         property color bg1Active: '#EFEFEF'
-        property color bg1Border: '#141414'
+        property color bg1Border: '#d7d7d7'
         property color bg2: "#FBFBFB"
         property color bg2Base: "#FBFBFB"
         property color bg2Hover: "#FDFDFD"
         property color bg2Active: "#FDFDFD"
-        property color bg2Border: "#EEEEEE"
+        property color bg2Border: '#cdcdcd'
         property color subfg: "#5C5C5C"
         property color fg: "#000000"
         property color fg1: "#626262"
@@ -68,7 +68,7 @@ Singleton {
         property color bg2: '#8a8a8a'
         property color bg2Hover: '#b1b1b1'
         property color bg2Active: '#919191'
-        property color bg2Border: "#bebebe"
+        property color bg2Border: '#c4c4c4'
         property color subfg: "#CED1D7"
         property color fg: "#FFFFFF"
         property color fg1: "#D1D1D1"