internal: transparency support coming soon™

Also fix media player selector text colour
Fix colour preview not resetting light/dark mode

45 files changed, 169 insertions, 112 deletions

diff --git a/components/controls/CustomSpinBox.qml b/components/controls/CustomSpinBox.qml
index 4611bed..e2ed508 100644
--- a/components/controls/CustomSpinBox.qml
+++ b/components/controls/CustomSpinBox.qml
@@ -30,7 +30,7 @@ RowLayout {
         background: StyledRect {
             implicitWidth: 100
             radius: Appearance.rounding.small
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
         }
     }
 
diff --git a/components/controls/FilledSlider.qml b/components/controls/FilledSlider.qml
index 8d0e547..af60e9f 100644
--- a/components/controls/FilledSlider.qml
+++ b/components/controls/FilledSlider.qml
@@ -14,7 +14,7 @@ Slider {
     orientation: Qt.Vertical
 
     background: StyledRect {
-        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+        color: Colours.tPalette.m3surfaceContainer
         radius: Appearance.rounding.full
 
         StyledRect {
@@ -24,7 +24,7 @@ Slider {
             y: root.handle.y
             implicitHeight: parent.height - y
 
-            color: Colours.alpha(Colours.palette.m3secondary, true)
+            color: Colours.palette.m3secondary
             radius: parent.radius
         }
     }
@@ -49,7 +49,7 @@ Slider {
 
             anchors.fill: parent
 
-            color: Colours.alpha(Colours.palette.m3inverseSurface, true)
+            color: Colours.palette.m3inverseSurface
             radius: Appearance.rounding.full
 
             MouseArea {
diff --git a/components/controls/StyledSlider.qml b/components/controls/StyledSlider.qml
index 25b5bdd..0670e1c 100644
--- a/components/controls/StyledSlider.qml
+++ b/components/controls/StyledSlider.qml
@@ -32,7 +32,7 @@ Slider {
 
             implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
 
-            color: Colours.palette.m3surfaceContainer
+            color: Colours.tPalette.m3surfaceContainer
             radius: Appearance.rounding.full
             topLeftRadius: root.implicitHeight / 15
             bottomLeftRadius: root.implicitHeight / 15
diff --git a/components/controls/StyledSwitch.qml b/components/controls/StyledSwitch.qml
index c9d7330..e90ced2 100644
--- a/components/controls/StyledSwitch.qml
+++ b/components/controls/StyledSwitch.qml
@@ -8,12 +8,14 @@ import QtQuick.Shapes
 Switch {
     id: root
 
+    property int cLayer: 1
+
     implicitWidth: implicitIndicatorWidth
     implicitHeight: implicitIndicatorHeight
 
     indicator: StyledRect {
         radius: Appearance.rounding.full
-        color: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
+        color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
 
         implicitWidth: implicitHeight * 1.7
         implicitHeight: Appearance.font.size.normal + Appearance.padding.smaller * 2
diff --git a/components/effects/InnerBorder.qml b/components/effects/InnerBorder.qml
index e5092ca..d4a751f 100644
--- a/components/effects/InnerBorder.qml
+++ b/components/effects/InnerBorder.qml
@@ -15,7 +15,7 @@ StyledRect {
     property alias bottomThickness: maskInner.anchors.bottomMargin
 
     anchors.fill: parent
-    color: Colours.palette.m3surfaceContainer
+    color: Colours.tPalette.m3surfaceContainer
 
     layer.enabled: true
     layer.effect: MultiEffect {
diff --git a/components/filedialog/CurrentItem.qml b/components/filedialog/CurrentItem.qml
index e042445..9f8ffac 100644
--- a/components/filedialog/CurrentItem.qml
+++ b/components/filedialog/CurrentItem.qml
@@ -23,7 +23,7 @@ Item {
             readonly property real roundingY: flatten ? root.implicitHeight / 2 : rounding
 
             strokeWidth: -1
-            fillColor: Colours.palette.m3surfaceContainer
+            fillColor: Colours.tPalette.m3surfaceContainer
 
             startX: root.implicitWidth
             startY: root.implicitHeight
diff --git a/components/filedialog/DialogButtons.qml b/components/filedialog/DialogButtons.qml
index a64195a..c5b11dc 100644
--- a/components/filedialog/DialogButtons.qml
+++ b/components/filedialog/DialogButtons.qml
@@ -11,7 +11,7 @@ StyledRect {
 
     implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
 
-    color: Colours.palette.m3surfaceContainer
+    color: Colours.tPalette.m3surfaceContainer
 
     RowLayout {
         id: inner
@@ -30,7 +30,7 @@ StyledRect {
             Layout.fillHeight: true
             Layout.rightMargin: Appearance.spacing.normal
 
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Appearance.rounding.small
 
             StyledText {
@@ -42,7 +42,7 @@ StyledRect {
         }
 
         StyledRect {
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Appearance.rounding.small
 
             implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2
@@ -68,7 +68,7 @@ StyledRect {
         }
 
         StyledRect {
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Appearance.rounding.small
 
             implicitWidth: cancelText.implicitWidth + Appearance.padding.normal * 2
diff --git a/components/filedialog/FileDialog.qml b/components/filedialog/FileDialog.qml
index a533243..8b0b331 100644
--- a/components/filedialog/FileDialog.qml
+++ b/components/filedialog/FileDialog.qml
@@ -50,7 +50,7 @@ LazyLoader {
 
         implicitWidth: 1000
         implicitHeight: 600
-        color: Colours.palette.m3surface
+        color: Colours.tPalette.m3surface
         title: loader.title
 
         onVisibleChanged: {
diff --git a/components/filedialog/FolderContents.qml b/components/filedialog/FolderContents.qml
index 57500c8..7a7cc31 100644
--- a/components/filedialog/FolderContents.qml
+++ b/components/filedialog/FolderContents.qml
@@ -22,7 +22,7 @@ Item {
 
     StyledRect {
         anchors.fill: parent
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
 
         layer.enabled: true
         layer.effect: MultiEffect {
@@ -124,7 +124,7 @@ Item {
             implicitHeight: nonAnimHeight
 
             radius: Appearance.rounding.normal
-            color: Qt.alpha(Colours.palette.m3surfaceContainerHighest, GridView.isCurrentItem ? 1 : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainerHighest, GridView.isCurrentItem ? 1 : 0)
             z: GridView.isCurrentItem || implicitHeight !== nonAnimHeight ? 1 : 0
             clip: true
 
diff --git a/components/filedialog/HeaderBar.qml b/components/filedialog/HeaderBar.qml
index 4af9672..b6e5dba 100644
--- a/components/filedialog/HeaderBar.qml
+++ b/components/filedialog/HeaderBar.qml
@@ -14,7 +14,7 @@ StyledRect {
     implicitWidth: inner.implicitWidth + Appearance.padding.normal * 2
     implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
 
-    color: Colours.palette.m3surfaceContainer
+    color: Colours.tPalette.m3surfaceContainer
 
     RowLayout {
         id: inner
@@ -50,7 +50,7 @@ StyledRect {
             Layout.fillWidth: true
 
             radius: Appearance.rounding.small
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
 
             implicitHeight: pathComponents.implicitHeight + pathComponents.anchors.margins * 2
 
diff --git a/components/filedialog/Sidebar.qml b/components/filedialog/Sidebar.qml
index 173b429..e9a15bd 100644
--- a/components/filedialog/Sidebar.qml
+++ b/components/filedialog/Sidebar.qml
@@ -14,7 +14,7 @@ StyledRect {
     implicitWidth: Sizes.sidebarWidth
     implicitHeight: inner.implicitHeight + Appearance.padding.normal * 2
 
-    color: Colours.palette.m3surfaceContainer
+    color: Colours.tPalette.m3surfaceContainer
 
     ColumnLayout {
         id: inner
diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index d661b86..e7d3cd0 100644
--- a/modules/bar/Bar.qml
+++ b/modules/bar/Bar.qml
@@ -90,7 +90,7 @@ Item {
             anchors.topMargin: Appearance.spacing.normal
 
             radius: Appearance.rounding.full
-            color: Colours.palette.m3surfaceContainer
+            color: Colours.tPalette.m3surfaceContainer
 
             implicitWidth: workspacesInner.implicitWidth + Appearance.padding.small * 2
             implicitHeight: workspacesInner.implicitHeight + Appearance.padding.small * 2
@@ -152,7 +152,7 @@ Item {
             anchors.bottomMargin: Appearance.spacing.normal
 
             radius: Appearance.rounding.full
-            color: Colours.palette.m3surfaceContainer
+            color: Colours.tPalette.m3surfaceContainer
 
             implicitHeight: statusIconsInner.implicitHeight + Appearance.padding.normal * 2
 
diff --git a/modules/bar/components/workspaces/OccupiedBg.qml b/modules/bar/components/workspaces/OccupiedBg.qml
index 567510a..bfdbbbd 100644
--- a/modules/bar/components/workspaces/OccupiedBg.qml
+++ b/modules/bar/components/workspaces/OccupiedBg.qml
@@ -51,7 +51,7 @@ Item {
             readonly property Workspace start: root.workspaces[modelData.start - 1 - root.groupOffset] ?? null
             readonly property Workspace end: root.workspaces[modelData.end - 1 - root.groupOffset] ?? null
 
-            color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Config.bar.workspaces.rounded ? Appearance.rounding.full : 0
 
             x: start?.x ?? 0
diff --git a/modules/bar/popouts/Battery.qml b/modules/bar/popouts/Battery.qml
index 254e2af..08bb814 100644
--- a/modules/bar/popouts/Battery.qml
+++ b/modules/bar/popouts/Battery.qml
@@ -112,7 +112,7 @@ Column {
         implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Appearance.padding.normal * 2 + Appearance.spacing.large * 2
         implicitHeight: Math.max(saver.implicitHeight, balance.implicitHeight, perf.implicitHeight) + Appearance.padding.small * 2
 
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
         radius: Appearance.rounding.full
 
         StyledRect {
diff --git a/modules/bar/popouts/Bluetooth.qml b/modules/bar/popouts/Bluetooth.qml
index 09ed768..f8035ed 100644
--- a/modules/bar/popouts/Bluetooth.qml
+++ b/modules/bar/popouts/Bluetooth.qml
@@ -108,7 +108,7 @@ ColumnLayout {
                 implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
 
                 radius: Appearance.rounding.full
-                color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3primary : Colours.palette.m3surface
+                color: device.modelData.state === BluetoothDeviceState.Connected ? Colours.palette.m3primary : Colours.tPalette.m3surface
 
                 StyledBusyIndicator {
                     anchors.centerIn: parent
diff --git a/modules/bar/popouts/Network.qml b/modules/bar/popouts/Network.qml
index 6c21f24..ed48b86 100644
--- a/modules/bar/popouts/Network.qml
+++ b/modules/bar/popouts/Network.qml
@@ -102,7 +102,7 @@ ColumnLayout {
                 implicitHeight: connectIcon.implicitHeight + Appearance.padding.small
 
                 radius: Appearance.rounding.full
-                color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.palette.m3surface
+                color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.tPalette.m3surface
 
                 StyledBusyIndicator {
                     anchors.centerIn: parent
@@ -156,7 +156,7 @@ ColumnLayout {
         implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2
 
         radius: Appearance.rounding.normal
-        color: Network.scanning ? Colours.palette.m3surfaceContainer : Colours.palette.m3primaryContainer
+        color: Network.scanning ? Colours.tPalette.m3surfaceContainer : Colours.palette.m3primaryContainer
 
         StateLayer {
             color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer
diff --git a/modules/controlcenter/ControlCenter.qml b/modules/controlcenter/ControlCenter.qml
index 0eeb3bf..8cdf01f 100644
--- a/modules/controlcenter/ControlCenter.qml
+++ b/modules/controlcenter/ControlCenter.qml
@@ -58,7 +58,7 @@ Item {
             topLeftRadius: root.rounding
             bottomLeftRadius: root.rounding
             implicitWidth: navRail.implicitWidth
-            color: Colours.palette.m3surfaceContainer
+            color: Colours.tPalette.m3surfaceContainer
 
             CustomMouseArea {
                 anchors.fill: parent
diff --git a/modules/controlcenter/WindowFactory.qml b/modules/controlcenter/WindowFactory.qml
index f5c6b73..cc80e72 100644
--- a/modules/controlcenter/WindowFactory.qml
+++ b/modules/controlcenter/WindowFactory.qml
@@ -25,7 +25,7 @@ Singleton {
             property alias active: cc.active
             property alias navExpanded: cc.navExpanded
 
-            color: Colours.palette.m3surface
+            color: Colours.tPalette.m3surface
 
             onVisibleChanged: {
                 if (!visible)
diff --git a/modules/controlcenter/WindowTitle.qml b/modules/controlcenter/WindowTitle.qml
index 35af9a1..fb71608 100644
--- a/modules/controlcenter/WindowTitle.qml
+++ b/modules/controlcenter/WindowTitle.qml
@@ -11,7 +11,7 @@ StyledRect {
     required property Session session
 
     implicitHeight: text.implicitHeight + Appearance.padding.normal
-    color: Colours.palette.m3surfaceContainer
+    color: Colours.tPalette.m3surfaceContainer
 
     StyledText {
         id: text
diff --git a/modules/controlcenter/bluetooth/Details.qml b/modules/controlcenter/bluetooth/Details.qml
index dc1cc9b..7a7d6c3 100644
--- a/modules/controlcenter/bluetooth/Details.qml
+++ b/modules/controlcenter/bluetooth/Details.qml
@@ -64,7 +64,7 @@ Item {
                 implicitHeight: deviceStatus.implicitHeight + Appearance.padding.large * 2
 
                 radius: Appearance.rounding.normal
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
 
                 ColumnLayout {
                     id: deviceStatus
@@ -118,7 +118,7 @@ Item {
                 implicitHeight: deviceProps.implicitHeight + Appearance.padding.large * 2
 
                 radius: Appearance.rounding.normal
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
 
                 ColumnLayout {
                     id: deviceProps
@@ -326,7 +326,7 @@ Item {
                 implicitHeight: deviceInfo.implicitHeight + Appearance.padding.large * 2
 
                 radius: Appearance.rounding.normal
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
 
                 ColumnLayout {
                     id: deviceInfo
@@ -652,6 +652,8 @@ Item {
 
         StyledSwitch {
             id: toggle
+
+            cLayer: 2
         }
     }
 
diff --git a/modules/controlcenter/bluetooth/DeviceList.qml b/modules/controlcenter/bluetooth/DeviceList.qml
index cc0a966..1e2cb50 100644
--- a/modules/controlcenter/bluetooth/DeviceList.qml
+++ b/modules/controlcenter/bluetooth/DeviceList.qml
@@ -167,7 +167,7 @@ ColumnLayout {
             anchors.right: parent.right
             implicitHeight: deviceInner.implicitHeight + Appearance.padding.normal * 2
 
-            color: Qt.alpha(Colours.palette.m3surfaceContainer, root.session.bt.active === modelData ? 1 : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.bt.active === modelData ? 1 : 0)
             radius: Appearance.rounding.normal
 
             StateLayer {
@@ -191,7 +191,7 @@ ColumnLayout {
                     implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
 
                     radius: Appearance.rounding.normal
-                    color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainerHigh
+                    color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainerHigh
 
                     StyledRect {
                         anchors.fill: parent
diff --git a/modules/controlcenter/bluetooth/Settings.qml b/modules/controlcenter/bluetooth/Settings.qml
index f2801a0..6c51ee7 100644
--- a/modules/controlcenter/bluetooth/Settings.qml
+++ b/modules/controlcenter/bluetooth/Settings.qml
@@ -48,7 +48,7 @@ ColumnLayout {
         implicitHeight: adapterStatus.implicitHeight + Appearance.padding.large * 2
 
         radius: Appearance.rounding.normal
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
 
         ColumnLayout {
             id: adapterStatus
@@ -109,7 +109,7 @@ ColumnLayout {
         implicitHeight: adapterSettings.implicitHeight + Appearance.padding.large * 2
 
         radius: Appearance.rounding.normal
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
 
         ColumnLayout {
             id: adapterSettings
@@ -474,7 +474,7 @@ ColumnLayout {
         implicitHeight: adapterInfo.implicitHeight + Appearance.padding.large * 2
 
         radius: Appearance.rounding.normal
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
 
         ColumnLayout {
             id: adapterInfo
@@ -535,6 +535,8 @@ ColumnLayout {
 
         StyledSwitch {
             id: toggle
+
+            cLayer: 2
         }
     }
 
diff --git a/modules/dashboard/Dash.qml b/modules/dashboard/Dash.qml
index 09d7e93..388130c 100644
--- a/modules/dashboard/Dash.qml
+++ b/modules/dashboard/Dash.qml
@@ -84,6 +84,6 @@ GridLayout {
 
     component Rect: StyledRect {
         radius: Appearance.rounding.small
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
     }
 }
diff --git a/modules/dashboard/Media.qml b/modules/dashboard/Media.qml
index edb09af..cdd27c9 100644
--- a/modules/dashboard/Media.qml
+++ b/modules/dashboard/Media.qml
@@ -125,7 +125,7 @@ Item {
         implicitWidth: Config.dashboard.sizes.mediaCoverArtSize
         implicitHeight: Config.dashboard.sizes.mediaCoverArtSize
 
-        color: Colours.palette.m3surfaceContainerHigh
+        color: Colours.tPalette.m3surfaceContainerHigh
         radius: Appearance.rounding.full
 
         MaterialIcon {
@@ -330,7 +330,7 @@ Item {
                 fontSize: Appearance.font.size.larger
                 padding: Appearance.padding.small
                 fill: false
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
 
                 function onClicked(): void {
                     Players.active?.raise();
@@ -348,7 +348,7 @@ Item {
                 implicitWidth: slider.implicitWidth * 0.6
                 implicitHeight: currentPlayer.implicitHeight + Appearance.padding.smaller * 2
                 radius: Appearance.rounding.normal
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
                 z: 1
 
                 StateLayer {
@@ -373,7 +373,7 @@ Item {
                         Layout.fillWidth: true
                         Layout.maximumWidth: playerSelector.implicitWidth - implicitHeight - parent.spacing - Appearance.padding.normal * 2
                         text: Players.active?.identity ?? "No players"
-                        color: Colours.palette.m3onSecondaryContainer
+                        color: Players.active ? Colours.palette.m3onSurface : Colours.palette.m3onSurfaceVariant
                         elide: Text.ElideRight
                     }
                 }
@@ -480,7 +480,7 @@ Item {
                 fontSize: Appearance.font.size.larger
                 padding: Appearance.padding.small
                 fill: false
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
 
                 function onClicked(): void {
                     Players.active?.quit();
diff --git a/modules/dashboard/dash/Media.qml b/modules/dashboard/dash/Media.qml
index cdb2c1a..8d6c636 100644
--- a/modules/dashboard/dash/Media.qml
+++ b/modules/dashboard/dash/Media.qml
@@ -38,7 +38,7 @@ Item {
 
         ShapePath {
             fillColor: "transparent"
-            strokeColor: Colours.palette.m3surfaceContainerHigh
+            strokeColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
             strokeWidth: Config.dashboard.sizes.mediaProgressThickness
             capStyle: ShapePath.RoundCap
 
@@ -94,7 +94,7 @@ Item {
         anchors.margins: Appearance.padding.large + Config.dashboard.sizes.mediaProgressThickness + Appearance.spacing.small
 
         implicitHeight: width
-        color: Colours.palette.m3surfaceContainerHigh
+        color: Colours.tPalette.m3surfaceContainerHigh
         radius: Appearance.rounding.full
 
         MaterialIcon {
diff --git a/modules/dashboard/dash/Resources.qml b/modules/dashboard/dash/Resources.qml
index 3edba0c..326bfb7 100644
--- a/modules/dashboard/dash/Resources.qml
+++ b/modules/dashboard/dash/Resources.qml
@@ -55,7 +55,7 @@ Row {
 
             implicitWidth: Config.dashboard.sizes.resourceProgessThickness
 
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
             radius: Appearance.rounding.full
 
             StyledRect {
diff --git a/modules/dashboard/dash/User.qml b/modules/dashboard/dash/User.qml
index 9b029ba..d4d52be 100644
--- a/modules/dashboard/dash/User.qml
+++ b/modules/dashboard/dash/User.qml
@@ -21,7 +21,7 @@ Row {
         implicitHeight: info.implicitHeight
 
         radius: Appearance.rounding.large
-        color: Colours.palette.m3surfaceContainerHigh
+        color: Colours.tPalette.m3surfaceContainerHigh
 
         MaterialIcon {
             anchors.centerIn: parent
diff --git a/modules/drawers/Backgrounds.qml b/modules/drawers/Backgrounds.qml
index ff09232..e1773a1 100644
--- a/modules/drawers/Backgrounds.qml
+++ b/modules/drawers/Backgrounds.qml
@@ -20,45 +20,44 @@ Shape {
     anchors.margins: Config.border.thickness
     anchors.leftMargin: bar.implicitWidth
     preferredRendererType: Shape.CurveRenderer
-    opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
 
     Osd.Background {
-        wrapper: panels.osd
+        wrapper: root.panels.osd
 
-        startX: root.width - panels.session.width
+        startX: root.width - root.panels.session.width
         startY: (root.height - wrapper.height) / 2 - rounding
     }
 
     Notifications.Background {
-        wrapper: panels.notifications
+        wrapper: root.panels.notifications
 
         startX: root.width
         startY: 0
     }
 
     Session.Background {
-        wrapper: panels.session
+        wrapper: root.panels.session
 
         startX: root.width
         startY: (root.height - wrapper.height) / 2 - rounding
     }
 
     Launcher.Background {
-        wrapper: panels.launcher
+        wrapper: root.panels.launcher
 
         startX: (root.width - wrapper.width) / 2 - rounding
         startY: root.height
     }
 
     Dashboard.Background {
-        wrapper: panels.dashboard
+        wrapper: root.panels.dashboard
 
         startX: (root.width - wrapper.width) / 2 - rounding
         startY: 0
     }
 
     BarPopouts.Background {
-        wrapper: panels.popouts
+        wrapper: root.panels.popouts
         invertBottomRounding: wrapper.y + wrapper.height + 1 >= root.height
 
         startX: wrapper.x
@@ -66,7 +65,7 @@ Shape {
     }
 
     Utilities.Background {
-        wrapper: panels.utilities
+        wrapper: root.panels.utilities
 
         startX: root.width
         startY: root.height
diff --git a/modules/drawers/Border.qml b/modules/drawers/Border.qml
index b7cb374..6fdd73b 100644
--- a/modules/drawers/Border.qml
+++ b/modules/drawers/Border.qml
@@ -15,7 +15,7 @@ Item {
 
     StyledRect {
         anchors.fill: parent
-        color: Colours.alpha(Colours.palette.m3surface, false)
+        color: Colours.palette.m3surface
 
         layer.enabled: true
         layer.effect: MultiEffect {
diff --git a/modules/drawers/Drawers.qml b/modules/drawers/Drawers.qml
index 8b043a1..26f177c 100644
--- a/modules/drawers/Drawers.qml
+++ b/modules/drawers/Drawers.qml
@@ -88,6 +88,7 @@ Variants {
 
             Item {
                 anchors.fill: parent
+                opacity: Colours.transparency.enabled ? Colours.transparency.base : 1
                 layer.enabled: true
                 layer.effect: MultiEffect {
                     shadowEnabled: true
diff --git a/modules/launcher/Content.qml b/modules/launcher/Content.qml
index d7acd55..9b0e4e5 100644
--- a/modules/launcher/Content.qml
+++ b/modules/launcher/Content.qml
@@ -44,7 +44,7 @@ Item {
     StyledRect {
         id: searchWrapper
 
-        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+        color: Colours.tPalette.m3surfaceContainer
         radius: Appearance.rounding.full
 
         anchors.left: parent.left
diff --git a/modules/launcher/items/ActionItem.qml b/modules/launcher/items/ActionItem.qml
index 102b3fd..9e97228 100644
--- a/modules/launcher/items/ActionItem.qml
+++ b/modules/launcher/items/ActionItem.qml
@@ -58,7 +58,7 @@ Item {
 
                 text: root.modelData?.desc ?? ""
                 font.pointSize: Appearance.font.size.small
-                color: Colours.alpha(Colours.palette.m3outline, true)
+                color: Colours.tPalette.m3outline
 
                 elide: Text.ElideRight
                 width: root.width - icon.width - Appearance.rounding.normal * 2
diff --git a/modules/launcher/items/AppItem.qml b/modules/launcher/items/AppItem.qml
index 6012356..1ba1f42 100644
--- a/modules/launcher/items/AppItem.qml
+++ b/modules/launcher/items/AppItem.qml
@@ -61,7 +61,7 @@ Item {
 
                 text: (root.modelData?.comment || root.modelData?.genericName || root.modelData?.name) ?? ""
                 font.pointSize: Appearance.font.size.small
-                color: Colours.alpha(Colours.palette.m3outline, true)
+                color: Colours.tPalette.m3outline
 
                 elide: Text.ElideRight
                 width: root.width - icon.width - Appearance.rounding.normal * 2
diff --git a/modules/launcher/items/VariantItem.qml b/modules/launcher/items/VariantItem.qml
index 4d33a38..2d3cbf1 100644
--- a/modules/launcher/items/VariantItem.qml
+++ b/modules/launcher/items/VariantItem.qml
@@ -58,7 +58,7 @@ Item {
 
                 text: root.modelData?.description ?? ""
                 font.pointSize: Appearance.font.size.small
-                color: Colours.alpha(Colours.palette.m3outline, true)
+                color: Colours.tPalette.m3outline
 
                 elide: Text.ElideRight
                 width: root.width - icon.width - Appearance.rounding.normal * 2
diff --git a/modules/lock/Backgrounds.qml b/modules/lock/Backgrounds.qml
index eba7c7b..cc95176 100644
--- a/modules/lock/Backgrounds.qml
+++ b/modules/lock/Backgrounds.qml
@@ -37,7 +37,7 @@ Item {
         id: base
 
         anchors.fill: parent
-        color: Colours.alpha(Colours.palette.m3surface, false)
+        color: Colours.tPalette.m3surface
 
         layer.enabled: true
         layer.effect: MultiEffect {
@@ -86,7 +86,7 @@ Item {
             readonly property real roundingY: flatten ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: Colours.palette.m3surface
+            fillColor: Colours.tPalette.m3surface
 
             startX: (innerMask.width - width) / 2 - rounding
 
@@ -153,7 +153,7 @@ Item {
             readonly property real roundingY: flatten ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: Colours.palette.m3surface
+            fillColor: Colours.tPalette.m3surface
 
             startX: (innerMask.width - width) / 2 - rounding
             startY: Math.ceil(innerMask.height)
@@ -221,7 +221,7 @@ Item {
             readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: Colours.palette.m3surface
+            fillColor: Colours.tPalette.m3surface
 
             startY: Math.ceil(innerMask.height) - height - roundingY
 
@@ -286,7 +286,7 @@ Item {
             readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: root.isNormal ? Colours.palette.m3surface : "transparent"
+            fillColor: root.isNormal ? Colours.tPalette.m3surface : "transparent"
 
             startX: root.isLarge ? 0 : Math.ceil(innerMask.width)
             startY: root.isLarge ? height + roundingY : Math.ceil(innerMask.height) - height - roundingY
@@ -351,7 +351,7 @@ Item {
             readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: root.isLarge ? Colours.palette.m3surface : "transparent"
+            fillColor: root.isLarge ? Colours.tPalette.m3surface : "transparent"
 
             startX: Math.ceil(innerMask.width)
             startY: Math.ceil(innerMask.height) - height - rounding
@@ -416,7 +416,7 @@ Item {
             readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
 
             strokeWidth: -1
-            fillColor: root.isLarge ? Colours.palette.m3surface : "transparent"
+            fillColor: root.isLarge ? Colours.tPalette.m3surface : "transparent"
 
             startX: Math.ceil(innerMask.width)
             startY: height + rounding
diff --git a/modules/lock/Input.qml b/modules/lock/Input.qml
index b1d2ae3..b989bb9 100644
--- a/modules/lock/Input.qml
+++ b/modules/lock/Input.qml
@@ -31,7 +31,7 @@ ColumnLayout {
             implicitHeight: Config.lock.sizes.faceSize
 
             radius: Appearance.rounding.large
-            color: Colours.palette.m3surfaceContainer
+            color: Colours.tPalette.m3surfaceContainer
 
             MaterialIcon {
                 anchors.centerIn: parent
@@ -77,7 +77,7 @@ ColumnLayout {
         Layout.preferredHeight: Appearance.font.size.normal + Appearance.padding.large * 2
 
         focus: true
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
         radius: Appearance.rounding.small
         clip: true
 
diff --git a/modules/lock/MediaPlaying.qml b/modules/lock/MediaPlaying.qml
index a38f0e8..4fc7991 100644
--- a/modules/lock/MediaPlaying.qml
+++ b/modules/lock/MediaPlaying.qml
@@ -47,7 +47,7 @@ RowLayout {
         ClippingWrapperRectangle {
             anchors.fill: parent
 
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Appearance.rounding.small
             rotation: 9
 
@@ -91,7 +91,7 @@ RowLayout {
         StyledClippingRect {
             anchors.fill: parent
 
-            color: Colours.palette.m3surfaceContainerHigh
+            color: Colours.tPalette.m3surfaceContainerHigh
             radius: Appearance.rounding.small
 
             border.width: Config.lock.sizes.mediaCoverBorder
diff --git a/modules/lock/Notification.qml b/modules/lock/Notification.qml
index c06db56..c9bf05e 100644
--- a/modules/lock/Notification.qml
+++ b/modules/lock/Notification.qml
@@ -19,7 +19,7 @@ StyledRect {
     readonly property bool hasAppIcon: modelData.appIcon.length > 0
     readonly property int nonAnimHeight: Math.max(image.height, details.implicitHeight) + Appearance.padding.normal * 2
 
-    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
+    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
     radius: Appearance.rounding.normal
     implicitWidth: Config.notifs.sizes.width
 
@@ -113,7 +113,7 @@ StyledRect {
 
         sourceComponent: StyledRect {
             radius: Appearance.rounding.full
-            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
+            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.tPalette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
             implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
             implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 
diff --git a/modules/notifications/Notification.qml b/modules/notifications/Notification.qml
index cdb6804..080ee7b 100644
--- a/modules/notifications/Notification.qml
+++ b/modules/notifications/Notification.qml
@@ -20,7 +20,7 @@ StyledRect {
     readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
     property bool expanded
 
-    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
+    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
     radius: Appearance.rounding.normal
     implicitWidth: Config.notifs.sizes.width
     implicitHeight: inner.implicitHeight
@@ -147,7 +147,7 @@ StyledRect {
 
                 sourceComponent: StyledRect {
                     radius: Appearance.rounding.full
-                    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
+                    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.layer(Colours.palette.m3surfaceContainerHighest, 2) : Colours.palette.m3tertiaryContainer
                     implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
                     implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 
@@ -450,7 +450,7 @@ StyledRect {
         required property var modelData
 
         radius: Appearance.rounding.full
-        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.palette.m3surfaceContainerHigh
+        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.tPalette.m3surfaceContainerHigh
 
         Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
         Layout.preferredHeight: actionText.height + Appearance.padding.small * 2
diff --git a/modules/session/Content.qml b/modules/session/Content.qml
index a75de10..ca6bf17 100644
--- a/modules/session/Content.qml
+++ b/modules/session/Content.qml
@@ -93,7 +93,7 @@ Column {
         implicitHeight: Config.session.sizes.button
 
         radius: Appearance.rounding.large
-        color: button.activeFocus ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainer
+        color: button.activeFocus ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainer
 
         Keys.onEnterPressed: Quickshell.execDetached(button.command)
         Keys.onReturnPressed: Quickshell.execDetached(button.command)
diff --git a/modules/utilities/Background.qml b/modules/utilities/Background.qml
index 37ef3de..b3d513b 100644
--- a/modules/utilities/Background.qml
+++ b/modules/utilities/Background.qml
@@ -1,6 +1,5 @@
 import qs.services
 import qs.config
-import Quickshell
 import QtQuick
 import QtQuick.Shapes
 
diff --git a/modules/windowinfo/Buttons.qml b/modules/windowinfo/Buttons.qml
index dea5059..67e97a2 100644
--- a/modules/windowinfo/Buttons.qml
+++ b/modules/windowinfo/Buttons.qml
@@ -81,7 +81,7 @@ ColumnLayout {
                     readonly property int wsId: Math.floor((Hyprland.activeWsId - 1) / 10) * 10 + index + 1
                     readonly property bool isCurrent: root.client?.workspace.id === wsId
 
-                    color: isCurrent ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
+                    color: isCurrent ? Colours.tPalette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
                     onColor: isCurrent ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
                     text: wsId
                     disabled: isCurrent
diff --git a/modules/windowinfo/Preview.qml b/modules/windowinfo/Preview.qml
index 2cae647..d2c5682 100644
--- a/modules/windowinfo/Preview.qml
+++ b/modules/windowinfo/Preview.qml
@@ -29,7 +29,7 @@ Item {
 
         implicitWidth: view.implicitWidth
 
-        color: Colours.palette.m3surfaceContainer
+        color: Colours.tPalette.m3surfaceContainer
         radius: Appearance.rounding.small
 
         Loader {
diff --git a/modules/windowinfo/WindowInfo.qml b/modules/windowinfo/WindowInfo.qml
index 713122a..919b3fb 100644
--- a/modules/windowinfo/WindowInfo.qml
+++ b/modules/windowinfo/WindowInfo.qml
@@ -38,7 +38,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
                 radius: Appearance.rounding.normal
 
                 Details {
@@ -50,7 +50,7 @@ Item {
                 Layout.fillWidth: true
                 Layout.preferredHeight: buttons.implicitHeight
 
-                color: Colours.palette.m3surfaceContainer
+                color: Colours.tPalette.m3surfaceContainer
                 radius: Appearance.rounding.normal
 
                 Buttons {
diff --git a/services/Colours.qml b/services/Colours.qml
index 47df15b..12447d4 100644
--- a/services/Colours.qml
+++ b/services/Colours.qml
@@ -1,32 +1,41 @@
 pragma Singleton
+pragma ComponentBehavior: Bound
 
-import qs.config
 import qs.utils
 import Quickshell
 import Quickshell.Io
 import QtQuick
+import QtQuick.Controls
 
 Singleton {
     id: root
 
-    readonly property list<string> colourNames: ["rosewater", "flamingo", "pink", "mauve", "red", "maroon", "peach", "yellow", "green", "teal", "sky", "sapphire", "blue", "lavender"]
-
     property bool showPreview
     property string scheme
     property string flavour
-    property bool light
+    readonly property bool light: showPreview ? previewLight : currentLight
+    property bool currentLight
+    property bool previewLight
     readonly property M3Palette palette: showPreview ? preview : current
+    readonly property M3TPalette tPalette: M3TPalette {}
     readonly property M3Palette current: M3Palette {}
     readonly property M3Palette preview: M3Palette {}
     readonly property Transparency transparency: Transparency {}
 
-    function alpha(c: color, layer: bool): color {
+    function alterColour(c: color, a: real, layer: int): color {
+        const luminance = Math.sqrt(0.299 * (c.r ** 2) + 0.587 * (c.g ** 2) + 0.114 * (c.b ** 2));
+        const scale = (luminance + (!light || layer == 1 ? 1 : -layer / 2) * (light ? 0.1 : 0.3) * (1 - transparency.base)) / luminance;
+        const r = Math.max(0, Math.min(1, c.r * scale));
+        const g = Math.max(0, Math.min(1, c.g * scale));
+        const b = Math.max(0, Math.min(1, c.b * scale));
+        return Qt.rgba(r, g, b, a);
+    }
+
+    function layer(c: color, layer: var): color {
         if (!transparency.enabled)
             return c;
-        c = Qt.rgba(c.r, c.g, c.b, layer ? transparency.layers : transparency.base);
-        if (layer)
-            c.hsvValue = Math.max(0, Math.min(1, c.hslLightness + (light ? -0.2 : 0.2))); // TODO: edit based on colours (hue or smth)
-        return c;
+
+        return layer === 0 ? Qt.alpha(c, transparency.base) : alterColour(c, transparency.layers, layer ?? 1);
     }
 
     function on(c: color): color {
@@ -42,12 +51,13 @@ Singleton {
         if (!isPreview) {
             root.scheme = scheme.name;
             flavour = scheme.flavour;
+            currentLight = scheme.mode === "light";
+        } else {
+            previewLight = scheme.mode === "light";
         }
 
-        light = scheme.mode === "light";
-
         for (const [name, colour] of Object.entries(scheme.colours)) {
-            const propName = colourNames.includes(name) ? name : `m3${name}`;
+            const propName = `m3${name}`;
             if (colours.hasOwnProperty(propName))
                 colours[propName] = `#${colour}`;
         }
@@ -65,9 +75,66 @@ Singleton {
     }
 
     component Transparency: QtObject {
-        readonly property bool enabled: false
-        readonly property real base: 0.78
-        readonly property real layers: 0.58
+        property bool enabled: true
+        property real base: 0.8
+        property real layers: 0.75
+    }
+
+    component M3TPalette: M3Palette {
+        m3primary_paletteKeyColor: root.layer(root.palette.m3primary_paletteKeyColor)
+        m3secondary_paletteKeyColor: root.layer(root.palette.m3secondary_paletteKeyColor)
+        m3tertiary_paletteKeyColor: root.layer(root.palette.m3tertiary_paletteKeyColor)
+        m3neutral_paletteKeyColor: root.layer(root.palette.m3neutral_paletteKeyColor)
+        m3neutral_variant_paletteKeyColor: root.layer(root.palette.m3neutral_variant_paletteKeyColor)
+        m3background: root.layer(root.palette.m3background, 0)
+        m3onBackground: root.layer(root.palette.m3onBackground)
+        m3surface: root.layer(root.palette.m3surface, 0)
+        m3surfaceDim: root.layer(root.palette.m3surfaceDim, 0)
+        m3surfaceBright: root.layer(root.palette.m3surfaceBright, 0)
+        m3surfaceContainerLowest: root.layer(root.palette.m3surfaceContainerLowest)
+        m3surfaceContainerLow: root.layer(root.palette.m3surfaceContainerLow)
+        m3surfaceContainer: root.layer(root.palette.m3surfaceContainer)
+        m3surfaceContainerHigh: root.layer(root.palette.m3surfaceContainerHigh)
+        m3surfaceContainerHighest: root.layer(root.palette.m3surfaceContainerHighest)
+        m3onSurface: root.layer(root.palette.m3onSurface)
+        m3surfaceVariant: root.layer(root.palette.m3surfaceVariant, 0)
+        m3onSurfaceVariant: root.layer(root.palette.m3onSurfaceVariant)
+        m3inverseSurface: root.layer(root.palette.m3inverseSurface, 0)
+        m3inverseOnSurface: root.layer(root.palette.m3inverseOnSurface)
+        m3outline: root.layer(root.palette.m3outline)
+        m3outlineVariant: root.layer(root.palette.m3outlineVariant)
+        m3shadow: root.layer(root.palette.m3shadow)
+        m3scrim: root.layer(root.palette.m3scrim)
+        m3surfaceTint: root.layer(root.palette.m3surfaceTint)
+        m3primary: root.layer(root.palette.m3primary)
+        m3onPrimary: root.layer(root.palette.m3onPrimary)
+        m3primaryContainer: root.layer(root.palette.m3primaryContainer)
+        m3onPrimaryContainer: root.layer(root.palette.m3onPrimaryContainer)
+        m3inversePrimary: root.layer(root.palette.m3inversePrimary)
+        m3secondary: root.layer(root.palette.m3secondary)
+        m3onSecondary: root.layer(root.palette.m3onSecondary)
+        m3secondaryContainer: root.layer(root.palette.m3secondaryContainer)
+        m3onSecondaryContainer: root.layer(root.palette.m3onSecondaryContainer)
+        m3tertiary: root.layer(root.palette.m3tertiary)
+        m3onTertiary: root.layer(root.palette.m3onTertiary)
+        m3tertiaryContainer: root.layer(root.palette.m3tertiaryContainer)
+        m3onTertiaryContainer: root.layer(root.palette.m3onTertiaryContainer)
+        m3error: root.layer(root.palette.m3error)
+        m3onError: root.layer(root.palette.m3onError)
+        m3errorContainer: root.layer(root.palette.m3errorContainer)
+        m3onErrorContainer: root.layer(root.palette.m3onErrorContainer)
+        m3primaryFixed: root.layer(root.palette.m3primaryFixed)
+        m3primaryFixedDim: root.layer(root.palette.m3primaryFixedDim)
+        m3onPrimaryFixed: root.layer(root.palette.m3onPrimaryFixed)
+        m3onPrimaryFixedVariant: root.layer(root.palette.m3onPrimaryFixedVariant)
+        m3secondaryFixed: root.layer(root.palette.m3secondaryFixed)
+        m3secondaryFixedDim: root.layer(root.palette.m3secondaryFixedDim)
+        m3onSecondaryFixed: root.layer(root.palette.m3onSecondaryFixed)
+        m3onSecondaryFixedVariant: root.layer(root.palette.m3onSecondaryFixedVariant)
+        m3tertiaryFixed: root.layer(root.palette.m3tertiaryFixed)
+        m3tertiaryFixedDim: root.layer(root.palette.m3tertiaryFixedDim)
+        m3onTertiaryFixed: root.layer(root.palette.m3onTertiaryFixed)
+        m3onTertiaryFixedVariant: root.layer(root.palette.m3onTertiaryFixedVariant)
     }
 
     component M3Palette: QtObject {
@@ -125,20 +192,5 @@ Singleton {
         property color m3tertiaryFixedDim: "#ECB8CD"
         property color m3onTertiaryFixed: "#301121"
         property color m3onTertiaryFixedVariant: "#613B4C"
-
-        property color rosewater: "#B8C4FF"
-        property color flamingo: "#DBB9F8"
-        property color pink: "#F3B3E3"
-        property color mauve: "#D0BDFE"
-        property color red: "#F8B3D1"
-        property color maroon: "#F6B2DA"
-        property color peach: "#E4B7F4"
-        property color yellow: "#C3C0FF"
-        property color green: "#ADC6FF"
-        property color teal: "#D4BBFC"
-        property color sky: "#CBBEFF"
-        property color sapphire: "#BDC2FF"
-        property color blue: "#C7BFFF"
-        property color lavender: "#EAB5ED"
     }
 }