add animations and switch to m3 colors'

Colors.qml

@@ -3,20 +3,105 @@ import QtQuick
 import Quickshell
 
 Singleton {
-	readonly property color base00: "#192e31" 
+	
-	readonly property color base01: "#324643"
+		readonly property color background: "#131318"
-	readonly property color base02: "#4a5f54"
+	
-	readonly property color base03: "#627865"
+		readonly property color error: "#ffb4ab"
-	readonly property color base04: "#7b9077"
+	
-	readonly property color base05: "#93a988"
+		readonly property color error_container: "#93000a"
-	readonly property color base06: "#acc29a"
+	
-	readonly property color base07: "#c4daab"
+		readonly property color inverse_on_surface: "#313036"
-	readonly property color base08: "#23b39c"
+	
-	readonly property color base09: "#26b49f"
+		readonly property color inverse_primary: "#5a5891"
-	readonly property color base0A: "#26b09a"
+	
-	readonly property color base0B: "#24ad97"
+		readonly property color inverse_surface: "#e5e1e9"
-	readonly property color base0C: "#25ae9a"
+	
-	readonly property color base0D: "#25ae9a"
+		readonly property color on_background: "#e5e1e9"
-	readonly property color base0E: "#25ac92"
+	
-	readonly property color base0F: "#30b79a"
+		readonly property color on_error: "#690005"
+	
+		readonly property color on_error_container: "#ffdad6"
+	
+		readonly property color on_primary: "#2c2960"
+	
+		readonly property color on_primary_container: "#e3dfff"
+	
+		readonly property color on_primary_fixed: "#16134a"
+	
+		readonly property color on_primary_fixed_variant: "#424078"
+	
+		readonly property color on_secondary: "#2f2e42"
+	
+		readonly property color on_secondary_container: "#e3e0f9"
+	
+		readonly property color on_secondary_fixed: "#1a1a2c"
+	
+		readonly property color on_secondary_fixed_variant: "#464559"
+	
+		readonly property color on_surface: "#e5e1e9"
+	
+		readonly property color on_surface_variant: "#c8c5d0"
+	
+		readonly property color on_tertiary: "#472639"
+	
+		readonly property color on_tertiary_container: "#ffd8ea"
+	
+		readonly property color on_tertiary_fixed: "#2f1123"
+	
+		readonly property color on_tertiary_fixed_variant: "#603b50"
+	
+		readonly property color outline: "#928f9a"
+	
+		readonly property color outline_variant: "#47464f"
+	
+		readonly property color primary: "#c3c0ff"
+	
+		readonly property color primary_container: "#424078"
+	
+		readonly property color primary_fixed: "#e3dfff"
+	
+		readonly property color primary_fixed_dim: "#c3c0ff"
+	
+		readonly property color scrim: "#000000"
+	
+		readonly property color secondary: "#c7c4dd"
+	
+		readonly property color secondary_container: "#464559"
+	
+		readonly property color secondary_fixed: "#e3e0f9"
+	
+		readonly property color secondary_fixed_dim: "#c7c4dd"
+	
+		readonly property color shadow: "#000000"
+	
+		readonly property color source_color: "#6e6ca2"
+	
+		readonly property color surface: "#131318"
+	
+		readonly property color surface_bright: "#39383f"
+	
+		readonly property color surface_container: "#201f25"
+	
+		readonly property color surface_container_high: "#2a292f"
+	
+		readonly property color surface_container_highest: "#35343a"
+	
+		readonly property color surface_container_low: "#1c1b21"
+	
+		readonly property color surface_container_lowest: "#0e0e13"
+	
+		readonly property color surface_dim: "#131318"
+	
+		readonly property color surface_tint: "#c3c0ff"
+	
+		readonly property color surface_variant: "#47464f"
+	
+		readonly property color tertiary: "#eab9d1"
+	
+		readonly property color tertiary_container: "#603b50"
+	
+		readonly property color tertiary_fixed: "#ffd8ea"
+	
+		readonly property color tertiary_fixed_dim: "#eab9d1"
+	
 }

modules/Bar/Bar.qml

@@ -9,7 +9,7 @@ Variants {
     delegate: PanelWindow {
         id: root
         required property ShellScreen modelData
-	aboveWindows: true
+        aboveWindows: true
         margins {
             top: Settings.config.floating ? Settings.config.margins : 0
             left: Settings.config.floating ? Settings.config.margins : 0
@@ -27,10 +27,10 @@ Variants {
             id: bar
             radius: Settings.config.floating ? Settings.config.rounding * 2 : 0
             anchors.fill: parent
-            color: Colors.base00
+            color: Colors.surface
             RowLayout {
                 id: left
-                anchors.leftMargin: Settings.config.floating ? Settings.config.barHeight / 2  - 10: 10
+                anchors.leftMargin: Settings.config.floating ? Settings.config.barHeight / 2 - 12 : 10
                 anchors {
                     left: parent.left
                     verticalCenter: parent.verticalCenter
@@ -52,11 +52,11 @@ Variants {
                 anchors {
                     right: parent.right
                     verticalCenter: parent.verticalCenter
-                    rightMargin: Settings.config.floating ? Settings.config.barHeight / 2 - 10 : 10
+                    rightMargin: Settings.config.floating ? Settings.config.barHeight / 2 - 12 : 10
                 }
                 Clock {}
                 StatusIcons {}
-		Tray {}
+                Tray {}
             }
         }
     }

modules/Bar/Clock.qml

@@ -6,7 +6,7 @@ import qs.widgets
 
 Rectangle {
     id: root
-    color: Colors.base01
+    color: Colors.surface_container
     implicitWidth: clockText.implicitWidth + 14
     implicitHeight: Settings.config.barHeight / 2 + 6
     radius: Settings.config.rounding

modules/Bar/MPris.qml

@@ -8,7 +8,7 @@ import qs.widgets
 
 Rectangle {
     id: root
-    color: Colors.base01
+    color: Colors.surface_container
     implicitWidth: songLayout.implicitWidth + 14
     implicitHeight: Settings.config.barHeight / 2 + 6
     radius: Settings.config.rounding

modules/Bar/StatusIcons.qml

@@ -8,7 +8,7 @@ import qs.widgets
 
 Rectangle {
     id: root
-    color: Colors.base01
+    color: Colors.surface_container
     implicitWidth: iconLayout.implicitWidth + 14
     implicitHeight: Settings.config.barHeight / 2 + 6
     radius: Settings.config.rounding

modules/Bar/Title.qml

@@ -11,7 +11,7 @@ Rectangle {
     property var activeWindow: ToplevelManager.activeToplevel
     property bool active: activeWindow ? activeWindow.activated ? true : false : false
     radius: Settings.config.rounding
-    color: active ? Colors.base01 : "transparent"
+    color: active ? Colors.surface_container : "transparent"
     implicitHeight: Settings.config.barHeight / 2 + 6
     implicitWidth: titleText.width + 14
     RowLayout {

modules/Bar/Tray.qml

@@ -9,7 +9,7 @@ Rectangle {
     implicitWidth: trayRow.implicitWidth + 14
     implicitHeight: trayRow.implicitHeight + 6
     visible: trayRep.count > 0 
-    color: Colors.base01
+    color: Colors.surface_container
     radius: Settings.config.rounding
     RowLayout {
         id: trayRow

modules/Bar/Ws.qml

@@ -10,32 +10,40 @@ import qs.widgets
 Rectangle {
     id: wsWrap
     required property ShellScreen barScreen
-    color: Colors.base01
+    color: "transparent"
     radius: Settings.config.rounding
     implicitWidth: wsLayout.implicitWidth + 6
     implicitHeight: wsLayout.implicitHeight + 6
     RowLayout {
         id: wsLayout
-        spacing: 2
+        spacing: 6
         anchors.centerIn: parent
         Repeater {
             id: wsRep
             model: Hyprland.workspaces
             delegate: Rectangle {
                 id: wsRect
-                implicitWidth: Settings.config.barHeight / 2
+                implicitWidth: modelData.focused ? Settings.config.barHeight * 1.5 : Settings.config.barHeight / 2 + 10
-                implicitHeight: Settings.config.barHeight / 2
+                implicitHeight: Settings.config.barHeight / 2 + 6
                 visible: modelData.id < 0 ? false : modelData.monitor?.name == wsWrap.barScreen.name
                 required property var modelData
-                color: "transparent"
+                color: modelData.focused ? Colors.primary_container : Colors.surface_container_low
                 radius: Settings.config.rounding
                 CText {
                     id: wsText
                     anchors.centerIn: parent
                     text: wsRect.modelData.id
-                    color: Colors.base07
                     opacity: parent.modelData.focused ? 1 : 0.5
                 }
+                Behavior on implicitWidth {
+                    NumberAnimation {
+                        easing {
+                            type: Easing.InOutBack
+                            overshoot: 3
+                        }
+                        duration: 500
+                    }
+                }
                 MouseArea {
                     id: mouseHandler
                     acceptedButtons: Qt.LeftButton

modules/notifications/NotificationCard.qml

@@ -11,10 +11,10 @@ Rectangle {
     required property var modelData
     implicitWidth: ListView.view ? ListView.view.width : 300
     implicitHeight: fullLayout.implicitHeight + 20
-    color: dismissArea.containsMouse ? Colors.base01 : Colors.base02
+    color: dismissArea.containsMouse ? Colors.surface : Colors.surface_container
     radius: Settings.config.rounding
     border.width: 2
-    border.color: Colors.base07
+    border.color: Colors.primary
     Timer {
         id: dismissTimer
         interval: 5000

modules/widgets/wallpicker/WallPicker.qml

@@ -25,7 +25,7 @@ FloatingWindow {
     implicitWidth: 700
     title: "qs-wallpicker"
     implicitHeight: 600
-    color: Colors.base00
+    color: Colors.surface
     visible: Settings.config.wallswitchershown
     onClosed: Settings.config.wallswitchershown = false
 
@@ -36,7 +36,7 @@ FloatingWindow {
             fill: parent
             margins: 8
         }
-        color: Colors.base01
+        color: Colors.surface_container
         FolderListModel {
             id: wpModel
             folder: "file:///home/lucy/.walls/"

settings/settings.json

@@ -1,6 +1,6 @@
 {
     "barHeight": 32,
-    "currentWall": "/home/lucy/.walls/walkingcastle.png",
+    "currentWall": "/home/lucy/.walls/eva13.png",
     "floating": true,
     "font": "Maple Mono NF",
     "fontSize": 14,

widgets/CIcon.qml

@@ -4,12 +4,12 @@ import qs.settings
 
 Text {
     id: root
-    color: Colors.base07
+    color: Colors.on_surface
     property real iconSize: 14
     property real fill: 1
     renderType: Text.NativeRendering
     font {
-        family: "Material Symbols Sharp"
+        family: "Material Symbols Rounded"
         pointSize: iconSize
         variableAxes: {
             "FILL": fill.toFixed(1),

widgets/CText.qml

@@ -5,5 +5,5 @@ import qs.settings
 Text {
     font.family: Settings.config.font
     font.pixelSize: Settings.config.fontSize
-    color: Colors.base07
+    color: Colors.on_surface
 }