Using proper Style everywhere

Modules/Bar/Bar.qml

@@ -3,15 +3,17 @@ import Quickshell
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Widgets
+import qs.Services
 import qs.Theme
 
 PanelWindow {
   id: root
 
+  readonly property real scaling: Scaling.scale(screen)
   property var modelData
 
   screen: modelData
-  implicitHeight: 36
+  implicitHeight: Style.barHeight * scaling
   color: "transparent"
 
   anchors {
@@ -31,12 +33,12 @@ PanelWindow {
 
     RowLayout {
       // Just testing
-      NoctaliaToggle {
+      NToggle {
         label: "Label"
         description: "Description"
       }
 
-      NoctaliaIconButton {
+      NIconButton {
         icon: "refresh"
       }
     }

Services/Scaling.qml

@@ -10,8 +10,9 @@ Singleton {
   readonly property int designScreenHeight: 1440
 
   // Automatic, orientation-agnostic scaling
-  function scale(currentScreen) {
+  function scale(aScreen) {
-    return 1.0
+    if (typeof aScreen !== 'undefined' & aScreen) {
+
       // // 1) Per-monitor override wins
       // try {
       //     const overrides = Settings.settings.monitorScaleOverrides || {};
@@ -37,8 +38,9 @@ Singleton {
       // } catch (e) {
       //     // ignore and fall through
       // }
+    }
 
-    // // 3) Safe default
+    // 3) Safe default
-    // return 1.0
+    return 1.0
   }
 }

Theme/Style.qml

@@ -13,10 +13,10 @@ Singleton {
     */
 
   // Font
-  property real fontExtraLarge: 32
+  property real fontExtraLarge: 20
-  property real fontLarge: 16
+  property real fontLarge: 14
-  property real fontMedium: 14
+  property real fontMedium: 10
-  property real fontSmall: 12
+  property real fontSmall: 8
 
   // Font weight
   property int fontWeightRegular: 400
@@ -43,4 +43,7 @@ Singleton {
   property int animationFast: 150
   property int animationNormal: 300
   property int animationSlow: 500
+
+  property int barHeight: 36
+  property int baseWidgetHeight: 32
 }

Widgets/NIconButton.qml

@@ -7,11 +7,8 @@ import qs.Theme
 Rectangle {
   id: root
 
-  // Local scale convenience with safe fallback
+  readonly property real scaling: Scaling.scale(screen)
-  readonly property real scale: (typeof screen !== 'undefined'
+  property real size: Style.baseWidgetHeight * scaling
-                                 && screen) ? Scaling.scale(screen) : 1.0
-
-  property real size: 32 * scale
   property string icon
   property bool enabled: true
   property bool hovering: false
@@ -27,7 +24,7 @@ Rectangle {
     anchors.centerIn: parent
     text: root.icon
     font.family: "Material Symbols Outlined"
-    font.pixelSize: 24 * scale
+    font.pointSize: Style.fontExtraLarge * scaling
     color: root.hovering ? Theme.onAccent : Theme.textPrimary
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

Widgets/NToggle.qml

@@ -8,31 +8,29 @@ import qs.Theme
 RowLayout {
   id: root
 
-  // Local scale convenience with safe fallback
+  readonly property real scaling: Scaling.scale(screen)
-  readonly property real scale: (typeof screen !== 'undefined'
-                                 && screen) ? Scaling.scale(screen) : 1.0
-
   property string label: ""
   property string description: ""
   property bool value: false
+  property bool hovering: false
   property var onToggled: function (value: bool) {}
 
   Layout.fillWidth: true
 
   ColumnLayout {
-    spacing: 4 * scale
+    spacing: 2 * scaling
     Layout.fillWidth: true
 
     Text {
       text: label
-      font.pixelSize: 13 * scale
+      font.pointSize: Style.fontMedium * scaling
       font.bold: true
       color: Theme.textPrimary
     }
 
     Text {
       text: description
-      font.pixelSize: 12 * scale
+      font.pointSize: Style.fontSmall * scaling
       color: Theme.textSecondary
       wrapMode: Text.WordWrap
       Layout.fillWidth: true
@@ -42,22 +40,22 @@ RowLayout {
   Rectangle {
     id: switcher
 
-    width: 52 * scale
+    width: Style.baseWidgetHeight * 1.625 * scaling
-    height: 32 * scale
+    height: Style.baseWidgetHeight * scaling
-    radius: height / 2
+    radius: height * 0.5
     color: value ? Theme.accentPrimary :Theme.surfaceVariant
     border.color: value ? Theme.accentPrimary : Theme.outline
-    border.width: 2 * scale
+    border.width: Math.max(1, 1.5 * scale)
 
     Rectangle {
-      width: 28 * scale
+      width: (Style.baseWidgetHeight- 4) * scaling
-      height: 28 * scale
+      height: (Style.baseWidgetHeight - 4) * scaling
-      radius: height / 2
+      radius: height * 0.5
       color: Theme.surface
-      border.color: Theme.outline
+      border.color: hovering ? Theme.textDisabled : Theme.outline
-      border.width: 1 * scale
+      border.width: Math.max(1, 1.5 * scale)
-      y: 2 * scale
+      y: 2 * scaling
-      x: value ? switcher.width - width - 2 * scale : 2 * scale
+      x: value ? switcher.width - width - 2 * scale : 2 * scaling
 
       Behavior on x {
         NumberAnimation {
@@ -70,6 +68,9 @@ RowLayout {
     MouseArea {
       anchors.fill: parent
       cursorShape: Qt.PointingHandCursor
+      hoverEnabled: true
+      onEntered: hovering = true
+      onExited: hovering = false
       onClicked: {
         value = !value;
         root.onToggled(value);