Components/CustomRadioButton.qml

@@ -5,7 +5,7 @@ import qs.Config
 RadioButton {
 	id: root
 
-	font.pointSize: 12
+	font.pointSize: Appearance.font.size.normal
 	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
 	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 

Components/MaterialIcon.qml

@@ -5,7 +5,7 @@ CustomText {
 	property int grade: DynamicColors.light ? 0 : -25
 
 	font.family: "Material Symbols Rounded"
-	font.pointSize: 15
+	font.pointSize: Appearance.font.size.larger
 	font.variableAxes: ({
 			FILL: fill.toFixed(1),
 			GRAD: grade,

Config/AppearanceConf.qml

@@ -71,6 +71,7 @@ JsonObject {
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
+		property int smallest: 2 * scale
 	}
 	component Rounding: JsonObject {
 		property int full: 1000 * scale

Drawers/Backgrounds.qml

@@ -23,14 +23,9 @@ Shape {
 
 	anchors.fill: parent
 	anchors.margins: Config.barConfig.border
-	anchors.topMargin: Config.barConfig.autoHide && !visibilities.bar ? 0 : bar.implicitHeight
+	anchors.topMargin: bar.implicitHeight
 	preferredRendererType: Shape.CurveRenderer
 
-	Behavior on anchors.topMargin {
-		Anim {
-		}
-	}
-
 	Drawing.Background {
 		startX: 0
 		startY: wrapper.y - rounding

Drawers/Interactions.qml

@@ -66,8 +66,8 @@ CustomMouseArea {
 				popouts.hasCurrent = false;
 			}
 
-			if (Config.barConfig.autoHide && !root.visibilities.sidebar && !root.visibilities.dashboard)
-				root.visibilities.bar = false;
+			if (Config.barConfig.autoHide)
+				bar.isHovered = false;
 		}
 	}
 	onPositionChanged: event => {
@@ -84,8 +84,8 @@ CustomMouseArea {
 			root.panels.drawing.expanded = false;
 		}
 
-		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight + bar.anchors.topMargin)
-			visibilities.bar = true;
+		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+			bar.isHovered = true;
 
 		if (panels.sidebar.width === 0) {
 			const showOsd = inRightPanel(panels.osd, x, y);
@@ -107,8 +107,8 @@ CustomMouseArea {
 			}
 		}
 
-		if (y < bar.implicitHeight) {
-			bar.checkPopout(x);
+		if (y < root.bar.implicitHeight) {
+			root.bar.checkPopout(x);
 		}
 	}
 

Drawers/Panels.qml

@@ -35,12 +35,7 @@ Item {
 
 	anchors.fill: parent
 	anchors.margins: Config.barConfig.border
-	anchors.topMargin: Config.barConfig.autoHide && !visibilities.bar ? 0 : bar.implicitHeight
-
-	Behavior on anchors.topMargin {
-		Anim {
-		}
-	}
+	anchors.topMargin: bar.implicitHeight
 
 	Resources.Wrapper {
 		id: resources

Drawers/Windows.qml

@@ -21,18 +21,23 @@ Variants {
 
 		required property var modelData
 
-		PanelWindow {
-			id: bar
+		Exclusions {
+			bar: bar
+			screen: scope.modelData
+		}
 
+		CustomWindow {
+			id: win
+
+			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
 			property var root: Quickshell.shellDir
-			property bool trayMenuVisible: false
 
 			WlrLayershell.exclusionMode: ExclusionMode.Ignore
 			WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
-			WlrLayershell.namespace: "ZShell-Bar"
 			color: "transparent"
 			contentItem.focus: true
 			mask: visibilities.isDrawing ? null : region
+			name: "Bar"
 			screen: scope.modelData
 
 			contentItem.Keys.onEscapePressed: {
@@ -44,21 +49,23 @@ Variants {
 				visibilities.settings = false;
 				visibilities.resources = false;
 			}
+			onHasFullscreenChanged: {
+				visibilities.launcher = false;
+				visibilities.dashboard = false;
+				visibilities.osd = false;
+				visibilities.settings = false;
+				visibilities.resources = false;
+			}
 
 			Region {
 				id: region
 
-				height: bar.screen.height - backgroundRect.implicitHeight
+				height: win.height - bar.implicitHeight - Config.barConfig.border
 				intersection: Intersection.Xor
 				regions: popoutRegions.instances
-				width: bar.width
-				x: 0
-				y: Config.barConfig.autoHide && !visibilities.bar ? 4 : backgroundRect.height
-			}
-
-			Exclusions {
-				bar: barLoader
-				screen: scope.modelData
+				width: win.width - Config.barConfig.border * 2
+				x: Config.barConfig.border
+				y: bar.implicitHeight
 			}
 
 			anchors {
@@ -79,8 +86,8 @@ Variants {
 					height: modelData.height
 					intersection: Intersection.Subtract
 					width: modelData.width
-					x: modelData.x
-					y: modelData.y + backgroundRect.implicitHeight
+					x: modelData.x + Config.barConfig.border
+					y: modelData.y + bar.implicitHeight
 				}
 			}
 
@@ -88,7 +95,7 @@ Variants {
 				id: focusGrab
 
 				active: visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
-				windows: [bar]
+				windows: [win]
 
 				onCleared: {
 					visibilities.launcher = false;
@@ -136,12 +143,12 @@ Variants {
 				}
 
 				Border {
-					bar: backgroundRect
+					bar: bar
 					visibilities: visibilities
 				}
 
 				Backgrounds {
-					bar: backgroundRect
+					bar: bar
 					panels: panels
 					visibilities: visibilities
 				}
@@ -157,7 +164,7 @@ Variants {
 			DrawingInput {
 				id: input
 
-				bar: backgroundRect
+				bar: bar
 				drawing: drawing
 				panels: panels
 				popout: panels.drawing
@@ -169,7 +176,7 @@ Variants {
 				id: mouseArea
 
 				anchors.fill: parent
-				bar: barLoader
+				bar: bar
 				drawing: drawing
 				input: input
 				panels: panels
@@ -181,41 +188,17 @@ Variants {
 				Panels {
 					id: panels
 
-					bar: backgroundRect
+					bar: bar
 					drawingItem: drawing
 					screen: scope.modelData
 					visibilities: visibilities
 				}
 
-				CustomRect {
-					id: backgroundRect
-
-					property Wrapper popouts: panels.popouts
-
-					anchors.left: parent.left
-					anchors.right: parent.right
-					anchors.top: parent.top
-					anchors.topMargin: Config.barConfig.autoHide && !visibilities.bar ? -30 : 0
-					color: "transparent"
-					implicitHeight: barLoader.implicitHeight
-					radius: 0
-
-					Behavior on anchors.topMargin {
-						Anim {
-						}
-					}
-					Behavior on color {
-						CAnim {
-						}
-					}
-
 				BarLoader {
-						id: barLoader
+					id: bar
 
 					anchors.left: parent.left
 					anchors.right: parent.right
-						anchors.verticalCenter: parent.verticalCenter
-						bar: bar
 					popouts: panels.popouts
 					screen: scope.modelData
 					visibilities: visibilities
@@ -223,5 +206,4 @@ Variants {
 			}
 		}
 	}
-	}
 }

Modules/AudioWidget.qml

@@ -7,15 +7,16 @@ import qs.Modules
 import qs.Config
 import qs.Components
 
-Item {
+CustomRect {
 	id: root
 
 	property color barColor: DynamicColors.palette.m3primary
 	property color textColor: DynamicColors.palette.m3onSurface
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
 	implicitWidth: 150
+	radius: Appearance.rounding.full
 
 	Behavior on implicitWidth {
 		NumberAnimation {
@@ -24,28 +25,21 @@ Item {
 		}
 	}
 
-	CustomRect {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
-		radius: height / 2
-	}
+	Component.onCompleted: console.log(root.height, root.implicitHeight)
 
 	RowLayout {
 		id: layout
 
-		anchors.fill: parent
+		anchors.left: parent.left
 		anchors.leftMargin: Appearance.padding.small
-		anchors.rightMargin: Appearance.padding.small * 2
 		anchors.verticalCenter: parent.verticalCenter
+		width: root.implicitWidth - Appearance.padding.small * 3
 
 		MaterialIcon {
 			Layout.alignment: Qt.AlignVCenter
 			animate: true
 			color: Audio.muted ? DynamicColors.palette.m3error : root.textColor
-			font.pointSize: 14
+			font.pointSize: Appearance.font.size.normal
 			text: Audio.muted ? "volume_off" : "volume_up"
 		}
 
@@ -74,7 +68,7 @@ Item {
 			Layout.alignment: Qt.AlignVCenter
 			animate: true
 			color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor
-			font.pointSize: 14
+			font.pointSize: Appearance.font.size.normal
 			text: Audio.sourceMuted ? "mic_off" : "mic"
 		}
 

Modules/Bar/Bar.qml

@@ -19,7 +19,7 @@ RowLayout {
 	required property PersistentProperties visibilities
 
 	function checkPopout(x: real): void {
-		const ch = childAt(x, 2) as WrappedLoader;
+		const ch = childAt(x, height / 2) as WrappedLoader;
 
 		if (!ch || ch?.id === "spacer") {
 			if (!popouts.currentName.startsWith("traymenu"))
@@ -205,7 +205,6 @@ RowLayout {
 		}
 
 		Layout.alignment: Qt.AlignVCenter
-		Layout.fillHeight: true
 		Layout.leftMargin: findFirstEnabled() === this ? root.vPadding : 0
 		Layout.rightMargin: findLastEnabled() === this ? root.vPadding : 0
 		active: enabled

Modules/Bar/BarLoader.qml

@@ -14,14 +14,13 @@ import qs.Modules.Network
 Item {
 	id: root
 
-	required property PanelWindow bar
 	readonly property int contentHeight: Config.barConfig.height + padding * 2
 	readonly property int exclusiveZone: Config.barConfig.autoHide ? Config.barConfig.border : contentHeight
 	property bool isHovered
 	readonly property int padding: Math.max(Appearance.padding.smaller, Config.barConfig.border)
 	required property Wrapper popouts
 	required property ShellScreen screen
-	readonly property bool shouldBeVisible: (!Config.barConfig.autoHide || visibilities.bar)
+	readonly property bool shouldBeVisible: (!Config.barConfig.autoHide || visibilities.bar || isHovered)
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
@@ -30,7 +29,7 @@ Item {
 	}
 
 	implicitHeight: Config.barConfig.border
-	visible: width > Config.barConfig.border
+	visible: height > Config.barConfig.border
 
 	states: State {
 		name: "visible"
@@ -46,8 +45,8 @@ Item {
 			to: "visible"
 
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				duration: MaterialEasing.expressiveEffectsTime
+				easing.bezierCurve: MaterialEasing.expressiveEffects
 				property: "implicitHeight"
 				target: root
 			}
@@ -57,7 +56,8 @@ Item {
 			to: ""
 
 			Anim {
-				easing.bezierCurve: Appearance.anim.curves.emphasized
+				duration: MaterialEasing.expressiveEffectsTime
+				easing.bezierCurve: MaterialEasing.expressiveEffects
 				property: "implicitHeight"
 				target: root
 			}
@@ -68,9 +68,9 @@ Item {
 		id: content
 
 		active: root.shouldBeVisible || root.visible
+		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
-		anchors.top: parent.top
 
 		sourceComponent: Bar {
 			height: root.contentHeight

Modules/Bar/Border.qml

@@ -17,7 +17,7 @@ Item {
 
 	CustomRect {
 		anchors.fill: parent
-		color: Config.barConfig.autoHide && !root.visibilities.bar ? "transparent" : DynamicColors.palette.m3surface
+		color: Config.barConfig.border === 1 ? "transparent" : DynamicColors.palette.m3surface
 		layer.enabled: true
 
 		layer.effect: MultiEffect {
@@ -39,15 +39,10 @@ Item {
 		Rectangle {
 			anchors.fill: parent
 			anchors.margins: Config.barConfig.border
-			anchors.topMargin: Config.barConfig.autoHide && !root.visibilities.bar ? 4 : root.bar.implicitHeight
+			anchors.topMargin: root.bar.implicitHeight
 			radius: Config.barConfig.border > 0 ? Config.barConfig.rounding : 0
 			topLeftRadius: Config.barConfig.rounding
 			topRightRadius: Config.barConfig.rounding
-
-			Behavior on anchors.topMargin {
-				Anim {
-				}
-			}
 		}
 	}
 }

Modules/Calendar/CalendarHeader.qml

@@ -1,73 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-RowLayout {
-	spacing: 12
-
-	Rectangle {
-		Layout.preferredHeight: 40
-		Layout.preferredWidth: 40
-		color: "transparent"
-		radius: 1000
-
-		MaterialIcon {
-			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onSurface
-			fill: 1
-			font.pointSize: 24
-			text: "arrow_back_2"
-		}
-
-		StateLayer {
-			onClicked: {
-				if (Calendar.displayMonth === 0) {
-					Calendar.displayMonth = 11;
-					Calendar.displayYear -= 1;
-				} else {
-					Calendar.displayMonth -= 1;
-				}
-			}
-		}
-	}
-
-	CustomText {
-		Layout.fillWidth: true
-		color: DynamicColors.palette.m3onSurface
-		font.pointSize: 14
-		font.weight: 600
-		horizontalAlignment: Text.AlignHCenter
-		text: new Date(Calendar.displayYear, Calendar.displayMonth, 1).toLocaleDateString(Qt.locale(), "MMMM yyyy")
-	}
-
-	Rectangle {
-		Layout.preferredHeight: 40
-		Layout.preferredWidth: 40
-		color: "transparent"
-		radius: 1000
-
-		MaterialIcon {
-			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onSurface
-			fill: 1
-			font.pointSize: 24
-			rotation: 180
-			text: "arrow_back_2"
-		}
-
-		StateLayer {
-			onClicked: {
-				if (Calendar.displayMonth === 11) {
-					Calendar.displayMonth = 0;
-					Calendar.displayYear += 1;
-				} else {
-					Calendar.displayMonth += 1;
-				}
-			}
-		}
-	}
-}

Modules/Calendar/CalendarPopup.qml

@@ -1,77 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-Item {
-	id: root
-
-	required property Item wrapper
-
-	implicitHeight: layout.childrenRect.height + layout.anchors.margins * 2
-	implicitWidth: layout.childrenRect.width + layout.anchors.margins * 2
-
-	ColumnLayout {
-		id: layout
-
-		anchors.centerIn: parent
-		anchors.margins: 16
-		spacing: 16
-
-		// Header with month/year and navigation
-		CalendarHeader {
-			Layout.fillWidth: true
-			Layout.preferredHeight: childrenRect.height
-		}
-
-		// Calendar grid
-		RowLayout {
-			Layout.fillWidth: true
-			Layout.preferredHeight: childrenRect.height
-			spacing: 12
-
-			ColumnLayout {
-				Layout.alignment: Qt.AlignTop
-				Layout.preferredHeight: childrenRect.height
-				Layout.preferredWidth: weekNumberColumn.width
-				spacing: 8
-
-				Item {
-					Layout.preferredHeight: dayOfWeekRow.height
-				}
-
-				WeekNumberColumn {
-					id: weekNumberColumn
-
-					Layout.alignment: Qt.AlignTop
-					Layout.preferredHeight: weekNumbers.values.length * 44
-				}
-			}
-
-			ColumnLayout {
-				Layout.alignment: Qt.AlignTop
-				Layout.fillWidth: true
-				Layout.preferredHeight: childrenRect.height
-				spacing: 8
-
-				DayOfWeekRow {
-					id: dayOfWeekRow
-
-					Layout.fillWidth: true
-					Layout.preferredHeight: 30
-					locale: Qt.locale()
-				}
-
-				MonthGrid {
-					Layout.preferredHeight: childrenRect.height
-					Layout.preferredWidth: childrenRect.width
-					locale: Qt.locale()
-					wrapper: root.wrapper
-				}
-			}
-		}
-	}
-}

Modules/Calendar/DayOfWeekRow.qml

@@ -1,42 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-RowLayout {
-	id: root
-
-	required property var locale
-
-	spacing: 4
-
-	Repeater {
-		model: 7
-
-		Item {
-			readonly property string dayName: {
-				// Get the day name for this column
-				const dayIndex = (index + Calendar.weekStartDay) % 7;
-				return root.locale.dayName(dayIndex, Locale.ShortFormat);
-			}
-			required property int index
-
-			Layout.fillWidth: true
-			Layout.preferredHeight: 30
-
-			CustomText {
-				anchors.centerIn: parent
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 11
-				font.weight: 500
-				horizontalAlignment: Text.AlignHCenter
-				opacity: 0.8
-				text: parent.dayName
-				verticalAlignment: Text.AlignVCenter
-			}
-		}
-	}
-}

Modules/Calendar/MonthGrid.qml

@@ -1,118 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-GridLayout {
-	id: root
-
-	required property var locale
-	required property Item wrapper
-
-	columnSpacing: 4
-	columns: 7
-	rowSpacing: 4
-	uniformCellHeights: true
-	uniformCellWidths: true
-
-	Repeater {
-		id: repeater
-
-		model: ScriptModel {
-			values: Calendar.getWeeksForMonth(Calendar.displayMonth, Calendar.displayYear)
-
-			Behavior on values {
-				SequentialAnimation {
-					id: switchAnim
-
-					ParallelAnimation {
-						Anim {
-							from: 1.0
-							property: "opacity"
-							to: 0.0
-						}
-
-						Anim {
-							from: 1.0
-							property: "scale"
-							to: 0.8
-						}
-					}
-
-					PropertyAction {
-					}
-
-					ParallelAnimation {
-						Anim {
-							from: 0.0
-							property: "opacity"
-							to: 1.0
-						}
-
-						Anim {
-							from: 0.8
-							property: "scale"
-							to: 1.0
-						}
-					}
-				}
-			}
-		}
-
-		Rectangle {
-			required property int index
-			required property var modelData
-
-			Layout.preferredHeight: width
-			Layout.preferredWidth: 40
-			color: {
-				if (modelData.isToday) {
-					return DynamicColors.palette.m3primaryContainer;
-				}
-				return "transparent";
-			}
-			radius: 1000
-
-			Behavior on color {
-				ColorAnimation {
-					duration: 200
-				}
-			}
-
-			CustomText {
-				anchors.centerIn: parent
-				color: {
-					if (parent.modelData.isToday) {
-						return DynamicColors.palette.m3onPrimaryContainer;
-					}
-					return DynamicColors.palette.m3onSurface;
-				}
-				horizontalAlignment: Text.AlignHCenter
-				opacity: parent.modelData.isCurrentMonth ? 1.0 : 0.4
-				text: parent.modelData.day.toString()
-				verticalAlignment: Text.AlignVCenter
-
-				Behavior on color {
-					ColorAnimation {
-						duration: 200
-					}
-				}
-				Behavior on opacity {
-					NumberAnimation {
-						duration: 200
-					}
-				}
-			}
-		}
-	}
-
-	component Anim: NumberAnimation {
-		duration: MaterialEasing.expressiveEffectsTime
-		easing.bezierCurve: MaterialEasing.expressiveEffects
-		target: root
-	}
-}

Modules/Calendar/WeekNumberColumn.qml

@@ -1,45 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Config
-import qs.Helpers
-
-ColumnLayout {
-	id: root
-
-	readonly property var weekNumbers: Calendar.getWeekNumbers(Calendar.displayMonth, Calendar.displayYear)
-
-	spacing: 4
-
-	Repeater {
-		model: ScriptModel {
-			values: root.weekNumbers
-		}
-
-		Item {
-			id: weekItem
-
-			required property int index
-			required property var modelData
-
-			Layout.alignment: Qt.AlignHCenter
-			Layout.preferredHeight: 40
-			Layout.preferredWidth: 20
-
-			CustomText {
-				id: weekText
-
-				anchors.centerIn: parent
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: 10
-				horizontalAlignment: Text.AlignHCenter
-				opacity: 0.5
-				text: weekItem.modelData
-				verticalAlignment: Text.AlignVCenter
-			}
-		}
-	}
-}

Modules/Clock.qml

@@ -6,23 +6,17 @@ import qs.Modules
 import qs.Helpers as Helpers
 import qs.Components
 
-Item {
+CustomRect {
 	id: root
 
 	required property RowLayout loader
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitWidth: timeText.contentWidth + 5 * 2
-
-	CustomRect {
-		anchors.bottomMargin: 3
-		anchors.fill: parent
-		anchors.topMargin: 3
-		color: "transparent"
-		radius: 4
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
+	radius: Appearance.rounding.full
 
 	CustomText {
 		id: timeText
@@ -44,5 +38,4 @@ Item {
 			root.visibilities.dashboard = !root.visibilities.dashboard;
 		}
 	}
-	}
 }

Modules/Content.qml

@@ -5,7 +5,6 @@ import Quickshell.Services.SystemTray
 import QtQuick
 import qs.Config
 import qs.Components
-import qs.Modules.Calendar
 import qs.Modules.WSOverview
 import qs.Modules.Network
 import qs.Modules.UPower
@@ -69,14 +68,6 @@ Item {
 			}
 		}
 
-		Popout {
-			name: "calendar"
-
-			sourceComponent: CalendarPopup {
-				wrapper: root.wrapper
-			}
-		}
-
 		Popout {
 			name: "overview"
 

Modules/Drawing/Wrapper.qml

@@ -112,7 +112,7 @@ Item {
 		opacity: 1
 
 		sourceComponent: MaterialIcon {
-			font.pointSize: 14
+			font.pointSize: Appearance.font.size.larger
 			text: "arrow_forward_ios"
 		}
 	}

Modules/MediaWidget.qml

@@ -5,30 +5,22 @@ import qs.Daemons
 import qs.Config
 import qs.Helpers
 
-Item {
+CustomRect {
 	id: root
 
 	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
 	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	radius: Appearance.rounding.full
 
 	Behavior on implicitWidth {
 		Anim {
 		}
 	}
 
-	CustomRect {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
-		radius: Appearance.rounding.full
-	}
-
 	TextMetrics {
 		id: metrics
 
@@ -39,11 +31,7 @@ Item {
 	RowLayout {
 		id: layout
 
-		anchors.bottom: parent.bottom
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.normal
-		anchors.top: parent.top
+		anchors.centerIn: parent
 
 		Behavior on implicitWidth {
 			Anim {
@@ -53,7 +41,7 @@ Item {
 		MaterialIcon {
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
-			font.pointSize: 14
+			font.pointSize: Appearance.font.size.normal
 			text: Players.active?.isPlaying ? "music_note" : "music_off"
 		}
 

Modules/NotifBell.qml

@@ -5,22 +5,16 @@ import qs.Config
 import qs.Helpers
 import qs.Components
 
-Item {
+CustomRect {
 	id: root
 
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitWidth: 30
-
-	CustomRect {
-		anchors.bottomMargin: 3
-		anchors.fill: parent
-		anchors.topMargin: 3
-		color: "transparent"
-		radius: 4
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: implicitHeight
+	radius: Appearance.rounding.full
 
 	MaterialIcon {
 		id: notificationCenterIcon
@@ -30,7 +24,7 @@ Item {
 		anchors.centerIn: parent
 		color: iconColor
 		font.family: "Material Symbols Rounded"
-			font.pointSize: 16
+		font.pointSize: Appearance.font.size.larger
 		text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4"
 
 		Behavior on color {
@@ -46,5 +40,4 @@ Item {
 			root.visibilities.sidebar = !root.visibilities.sidebar;
 		}
 	}
-	}
 }

Modules/Notifications/Sidebar/Background.qml

@@ -15,7 +15,7 @@ ShapePath {
 	readonly property real utilsWidthDiff: panels.utilities.width - wrapper.width
 	required property Wrapper wrapper
 
-	fillColor: flatten ? "transparent" : DynamicColors.palette.m3surface
+	fillColor: DynamicColors.palette.m3surface
 	strokeWidth: -1
 
 	Behavior on fillColor {

Modules/Resource-old.qml

@@ -1,116 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Shapes
-import qs.Components
-import qs.Config
-
-Item {
-	id: root
-
-	property color borderColor: warning ? DynamicColors.palette.m3onError : mainColor
-	required property color mainColor
-	required property double percentage
-	property bool shown: true
-	property color usageColor: warning ? DynamicColors.palette.m3error : mainColor
-	property bool warning: percentage * 100 >= warningThreshold
-	property int warningThreshold: 100
-
-	clip: true
-	implicitHeight: 22
-	implicitWidth: resourceRowLayout.x < 0 ? 0 : resourceRowLayout.implicitWidth
-	visible: width > 0 && height > 0
-
-	Behavior on percentage {
-		NumberAnimation {
-			duration: 300
-			easing.type: Easing.InOutQuad
-		}
-	}
-
-	RowLayout {
-		id: resourceRowLayout
-
-		spacing: 2
-		x: shown ? 0 : -resourceRowLayout.width
-
-		anchors {
-			verticalCenter: parent.verticalCenter
-		}
-
-		Item {
-			Layout.alignment: Qt.AlignVCenter
-			implicitHeight: root.implicitHeight
-			implicitWidth: 14
-
-			Rectangle {
-				id: backgroundCircle
-
-				anchors.centerIn: parent
-				border.color: "#404040"
-				border.width: 1
-				color: "#40000000"
-				height: 14
-				radius: height / 2
-				width: 14
-			}
-
-			Shape {
-				anchors.fill: backgroundCircle
-				preferredRendererType: Shape.CurveRenderer
-				smooth: true
-
-				ShapePath {
-					fillColor: root.usageColor
-					startX: backgroundCircle.width / 2
-					startY: backgroundCircle.height / 2
-					strokeWidth: 0
-
-					Behavior on fillColor {
-						CAnim {
-						}
-					}
-
-					PathLine {
-						x: backgroundCircle.width / 2
-						y: 0 + (1 / 2)
-					}
-
-					PathAngleArc {
-						centerX: backgroundCircle.width / 2
-						centerY: backgroundCircle.height / 2
-						radiusX: backgroundCircle.width / 2 - (1 / 2)
-						radiusY: backgroundCircle.height / 2 - (1 / 2)
-						startAngle: -90
-						sweepAngle: 360 * root.percentage
-					}
-
-					PathLine {
-						x: backgroundCircle.width / 2
-						y: backgroundCircle.height / 2
-					}
-				}
-
-				ShapePath {
-					capStyle: ShapePath.FlatCap
-					fillColor: "transparent"
-					strokeColor: root.borderColor
-					strokeWidth: 1
-
-					Behavior on strokeColor {
-						CAnim {
-						}
-					}
-
-					PathAngleArc {
-						centerX: backgroundCircle.width / 2
-						centerY: backgroundCircle.height / 2
-						radiusX: backgroundCircle.width / 2 - (1 / 2)
-						radiusY: backgroundCircle.height / 2 - (1 / 2)
-						startAngle: -90
-						sweepAngle: 360 * root.percentage
-					}
-				}
-			}
-		}
-	}
-}

Modules/ResourceDetail.qml

@@ -1,77 +0,0 @@
-import Quickshell
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-import qs.Components
-
-Item {
-	id: root
-
-	property color barColor: DynamicColors.palette.m3primary
-	required property string details
-	required property string iconString
-	required property double percentage
-	required property string resourceName
-	property color textColor: DynamicColors.palette.m3onSurface
-	property color warningBarColor: DynamicColors.palette.m3error
-	required property int warningThreshold
-
-	Layout.preferredHeight: columnLayout.implicitHeight
-	Layout.preferredWidth: 158
-
-	ColumnLayout {
-		id: columnLayout
-
-		anchors.fill: parent
-		spacing: 4
-
-		Row {
-			Layout.alignment: Qt.AlignLeft
-			Layout.fillWidth: true
-			spacing: 6
-
-			MaterialIcon {
-				color: root.textColor
-				font.family: "Material Symbols Rounded"
-				font.pointSize: 28
-				text: root.iconString
-			}
-
-			CustomText {
-				anchors.verticalCenter: parent.verticalCenter
-				color: root.textColor
-				font.pointSize: 12
-				text: root.resourceName
-			}
-		}
-
-		Rectangle {
-			Layout.alignment: Qt.AlignLeft
-			Layout.fillWidth: true
-			Layout.preferredHeight: 6
-			color: "#40000000"
-			radius: height / 2
-
-			Rectangle {
-				color: root.percentage * 100 >= root.warningThreshold ? root.warningBarColor : root.barColor
-				height: parent.height
-				radius: height / 2
-				width: parent.width * Math.min(root.percentage, 1)
-
-				Behavior on width {
-					Anim {
-						duration: MaterialEasing.expressiveEffectsTime
-						easing.bezierCurve: MaterialEasing.expressiveEffects
-					}
-				}
-			}
-		}
-
-		CustomText {
-			Layout.alignment: Qt.AlignLeft
-			color: root.textColor
-			font.pointSize: 10
-			text: root.details
-		}
-	}
-}

Modules/ResourcePopout-old.qml

@@ -1,59 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-
-Item {
-	id: popoutWindow
-
-	required property var wrapper
-
-	implicitHeight: contentColumn.implicitHeight + 10
-	implicitWidth: contentColumn.implicitWidth + 10 * 2
-
-	// ShadowRect {
-	//     anchors.fill: contentRect
-	//     radius: 8
-	// }
-
-	ColumnLayout {
-		id: contentColumn
-
-		anchors.horizontalCenter: parent.horizontalCenter
-		anchors.top: parent.top
-		spacing: 10
-
-		ResourceDetail {
-			details: qsTr("%1 of %2 MB used").arg(Math.round(ResourceUsage.memoryUsed * 0.001)).arg(Math.round(ResourceUsage.memoryTotal * 0.001))
-			iconString: "\uf7a3"
-			percentage: ResourceUsage.memoryUsedPercentage
-			resourceName: qsTr("Memory Usage")
-			warningThreshold: 95
-		}
-
-		ResourceDetail {
-			details: qsTr("%1% used").arg(Math.round(ResourceUsage.cpuUsage * 100))
-			iconString: "\ue322"
-			percentage: ResourceUsage.cpuUsage
-			resourceName: qsTr("CPU Usage")
-			warningThreshold: 95
-		}
-
-		ResourceDetail {
-			details: qsTr("%1% used").arg(Math.round(ResourceUsage.gpuUsage * 100))
-			iconString: "\ue30f"
-			percentage: ResourceUsage.gpuUsage
-			resourceName: qsTr("GPU Usage")
-			warningThreshold: 95
-		}
-
-		ResourceDetail {
-			details: qsTr("%1% used").arg(Math.round(ResourceUsage.gpuMemUsage * 100))
-			iconString: "\ue30d"
-			percentage: ResourceUsage.gpuMemUsage
-			resourceName: qsTr("VRAM Usage")
-			warningThreshold: 95
-		}
-	}
-}

Modules/Resources.qml

@@ -8,33 +8,20 @@ import qs.Modules
 import qs.Config
 import qs.Components
 
-Item {
+CustomRect {
 	id: root
 
 	required property PersistentProperties visibilities
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
 	clip: true
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.small * 2
-
-	CustomRect {
-		id: backgroundRect
-
 	color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: rowLayout.implicitWidth + Appearance.padding.small * 2
 	radius: height / 2
 
-		anchors {
-			left: parent.left
-			right: parent.right
-			verticalCenter: parent.verticalCenter
-		}
-
 	StateLayer {
 		onClicked: root.visibilities.resources = !root.visibilities.resources
 	}
-	}
 
 	RowLayout {
 		id: rowLayout

Modules/TrayMenuPopout.qml

@@ -194,6 +194,8 @@ StackView {
 		}
 
 		Loader {
+			id: loader
+
 			active: menu.isSubMenu
 			asynchronous: true
 

Modules/TrayWidget.qml

@@ -7,24 +7,16 @@ import Quickshell.Services.SystemTray
 import qs.Components
 import qs.Config
 
-Item {
+CustomClippingRect {
 	id: root
 
 	readonly property alias items: repeater
 	required property RowLayout loader
 	required property Wrapper popouts
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitHeight: 34
-	implicitWidth: row.width + Appearance.padding.small * 2
-
-	CustomClippingRect {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
 	color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: row.width + Appearance.padding.small * 2
 	radius: height / 2
 
 	Row {
@@ -53,5 +45,4 @@ Item {
 			}
 		}
 	}
-	}
 }

Modules/UPower/UPowerPopout.qml

@@ -167,7 +167,7 @@ Item {
 			anchors.centerIn: parent
 			color: profiles.current === text ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			fill: profiles.current === text ? 1 : 0
-			font.pointSize: 36
+			font.pointSize: Appearance.font.size.large * 2
 			text: parent.icon
 
 			Behavior on fill {

Modules/UPower/UPowerWidget.qml

@@ -5,20 +5,13 @@ import qs.Components
 import qs.Config
 import qs.Helpers as Helpers
 
-Item {
+CustomRect {
 	id: root
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitWidth: layout.childrenRect.width + 10 * 2
-
-	CustomRect {
-		anchors.bottomMargin: 4
-		anchors.fill: parent
-		anchors.topMargin: 4
 	color: DynamicColors.tPalette.m3surfaceContainer
-		radius: 1000
-	}
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	radius: Appearance.rounding.full
 
 	RowLayout {
 		id: layout

Modules/UpdatesWidget.qml

@@ -4,24 +4,16 @@ import qs.Components
 import qs.Modules
 import qs.Config
 
-Item {
+CustomRect {
 	id: root
 
 	property int countUpdates: Updates.availableUpdates
 	property color textColor: DynamicColors.palette.m3onSurface
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
-	implicitWidth: contentRow.childrenRect.width + Appearance.spacing.smaller
-
-	CustomRect {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
 	color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
+	implicitHeight: Config.barConfig.height + Appearance.padding.smallest * 2
+	implicitWidth: contentRow.implicitWidth + Appearance.spacing.smaller
 	radius: height / 2
-	}
 
 	RowLayout {
 		id: contentRow
@@ -30,13 +22,13 @@ Item {
 		spacing: Appearance.spacing.small
 
 		MaterialIcon {
-			font.pointSize: 14
+			font.pointSize: Appearance.font.size.normal
 			text: "package_2"
 		}
 
 		CustomText {
 			color: root.textColor
-			font.pointSize: 12
+			font.pointSize: Appearance.font.size.normal
 			text: root.countUpdates
 		}
 	}

Modules/WindowTitle.qml

@@ -47,7 +47,7 @@ Item {
 		elide: Qt.ElideRight
 		elideWidth: root.maxWidth
 		font.family: "Rubik"
-		font.pointSize: 12
+		font.pointSize: Appearance.font.size.normal
 		text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
 
 		onElideWidthChanged: root.current.text = elidedText

Modules/Workspaces.qml

@@ -20,8 +20,8 @@ Item {
 	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
 	readonly property int workspacesShown: workspaces.length
 
-	anchors.bottom: parent.bottom
-	anchors.top: parent.top
+	height: implicitHeight
+	implicitHeight: Config.barConfig.height + Math.max(Appearance.padding.smaller, Config.barConfig.border) * 2
 	implicitWidth: (root.workspaceButtonWidth * root.workspacesShown) + root.activeWorkspaceMargin * 2
 
 	Behavior on implicitWidth {
@@ -36,7 +36,7 @@ Item {
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.parent.height - ((Appearance.padding.small - 1) * 2)
+		implicitHeight: root.implicitHeight - ((Appearance.padding.small - 1) * 2)
 		radius: height / 2
 
 		CustomRect {

shell.qml

@@ -11,7 +11,7 @@ import qs.Helpers
 import qs.Modules.Polkit
 
 ShellRoot {
-	Bar {
+	Windows {
 	}
 
 	Wallpaper {