Merge branch 'end-4:main' into keybinds-settings

dots/.config/quickshell/ii/modules/background/Background.qml

@@ -332,7 +332,6 @@ Variants {
                                 Layout.fillWidth: true
                                 horizontalAlignment: bgRoot.textHorizontalAlignment
                                 font {
-                                    family: Appearance.font.family.main
                                     pixelSize: Appearance.font.pixelSize.normal
                                     weight: 350
                                     italic: true
@@ -472,7 +471,6 @@ Variants {
             color: statusTextRow.textColor
             anchors.verticalCenter: statusTextRow.verticalCenter
             font {
-                family: Appearance.font.family.main
                 pixelSize: Appearance.font.pixelSize.large
                 weight: Font.Normal
             }

dots/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -20,12 +20,12 @@ Item {
     property real implicitSize: 230
 
     property color colShadow: Appearance.colors.colShadow
-    property color colBackground: Appearance.colors.colSecondaryContainer
-    property color colOnBackground: ColorUtils.mix(Appearance.colors.colSecondary, Appearance.colors.colSecondaryContainer, 0.15)
-    property color colBackgroundInfo: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.55)
+    property color colBackground: Appearance.colors.colPrimaryContainer
+    property color colOnBackground: ColorUtils.mix(Appearance.colors.colSecondary, Appearance.colors.colPrimaryContainer, 0.15)
+    property color colBackgroundInfo: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colPrimaryContainer, 0.55)
     property color colHourHand: Appearance.colors.colPrimary
-    property color colMinuteHand: Appearance.colors.colSecondary
-    property color colSecondHand: Appearance.colors.colTertiary
+    property color colMinuteHand: Appearance.colors.colTertiary
+    property color colSecondHand: Appearance.colors.colPrimary
 
     readonly property list<string> clockNumbers: DateTime.time.split(/[: ]/)
     readonly property int clockHour: parseInt(clockNumbers[0]) % 12
@@ -157,23 +157,10 @@ Item {
         }
     }
 
-    // Hour hand
-    FadeLoader {
-        anchors.fill: parent
-        z: 1
-        shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
-        sourceComponent: HourHand {
-            clockHour: root.clockHour
-            clockMinute: root.clockMinute
-            style: Config.options.background.clock.cookie.hourHandStyle
-            color: root.colHourHand
-        }
-    }
-
     // Minute hand
     FadeLoader {
         anchors.fill: parent
-        z: 2
+        z: 1
         shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
         sourceComponent: MinuteHand {
             anchors.fill: parent
@@ -183,6 +170,19 @@ Item {
         }
     }
 
+    // Hour hand
+    FadeLoader {
+        anchors.fill: parent
+        z: item?.style === "hollow" ? 0 : 2
+        shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
+        sourceComponent: HourHand {
+            clockHour: root.clockHour
+            clockMinute: root.clockMinute
+            style: Config.options.background.clock.cookie.hourHandStyle
+            color: root.colHourHand
+        }
+    }
+
     // Second hand
     FadeLoader {
         id: secondHandLoader

dots/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml

@@ -11,7 +11,7 @@ Item {
     property string style: "medium"
     property real handLength: 95
     property real handWidth: style === "bold" ? 20 : style === "medium" ? 12 : 5
-    property color color: Appearance.colors.colSecondary
+    property color color: Appearance.colors.colTertiary
 
     rotation: -90 + (360 / 60) * root.clockMinute
     Behavior on rotation {
@@ -34,7 +34,7 @@ Item {
         height: root.handWidth
         
         radius: root.style === "classic" ? 2 : root.handWidth / 2
-        color: Appearance.colors.colSecondary
+        color: root.color
 
         Behavior on height {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/BubbleDate.qml

@@ -19,7 +19,7 @@ Item {
         // sides: root.isMonth ? 1 : 4
         shape: root.isMonth ? MaterialShape.Shape.Pill : MaterialShape.Shape.Pentagon
         anchors.centerIn: parent
-        color: root.isMonth ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer
+        color: root.isMonth ? Appearance.colors.colSecondaryContainer : Appearance.colors.colTertiaryContainer
         implicitSize: targetSize
     }
 
@@ -27,7 +27,7 @@ Item {
         id: bubbleText
         z: 6
         anchors.centerIn: parent
-        color: root.isMonth ? Appearance.colors.colPrimary : Appearance.colors.colTertiary
+        color: root.isMonth ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnTertiaryContainer
         font {
             family: Appearance.font.family.expressive
             pixelSize: 30

dots/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml

@@ -41,7 +41,7 @@ Item {
             font {
                 family: Appearance.font.family.title
                 pixelSize: 30
-                weight: Font.DemiBold 
+                variableAxes: Appearance.font.variableAxes.title
             }
 
             text: root.dateText.charAt(index)

dots/.config/quickshell/ii/modules/bar/Workspaces.qml

@@ -232,7 +232,7 @@ Item {
                         verticalAlignment: Text.AlignVCenter
                         font {
                             pixelSize: Appearance.font.pixelSize.small - ((text.length - 1) * (text !== "10") * 2)
-                            family: Config.options?.bar.workspaces.useNerdFont ? Appearance.font.family.iconNerd : Appearance.font.family.main
+                            family: Config.options?.bar.workspaces.useNerdFont ? Appearance.font.family.iconNerd : defaultFont
                         }
                         text: Config.options?.bar.workspaces.numberMap[button.workspaceValue - 1] || button.workspaceValue
                         elide: Text.ElideRight

dots/.config/quickshell/ii/modules/cheatsheet/Cheatsheet.qml

@@ -134,8 +134,11 @@ Scope { // Scope
                     StyledText {
                         id: cheatsheetTitle
                         Layout.alignment: Qt.AlignHCenter
-                        font.family: Appearance.font.family.title
-                        font.pixelSize: Appearance.font.pixelSize.title
+                        font {
+                            family: Appearance.font.family.title
+                            pixelSize: Appearance.font.pixelSize.title
+                            variableAxes: Appearance.font.variableAxes.title
+                        }
                         text: Translation.tr("Cheat sheet")
                     }
                     PrimaryTabBar { // Tab strip

dots/.config/quickshell/ii/modules/cheatsheet/CheatsheetKeybinds.qml

@@ -105,8 +105,11 @@ Item {
                             
                             StyledText {
                                 id: sectionTitle
-                                font.family: Appearance.font.family.title
-                                font.pixelSize: Appearance.font.pixelSize.huge
+                                font {
+                                    family: Appearance.font.family.title
+                                    pixelSize: Appearance.font.pixelSize.title
+                                    variableAxes: Appearance.font.variableAxes.title
+                                }
                                 color: Appearance.colors.colOnLayer0
                                 text: keybindSection.modelData.name
                             }

dots/.config/quickshell/ii/modules/common/Appearance.qml

@@ -202,7 +202,8 @@ Singleton {
 
     font: QtObject {
         property QtObject family: QtObject {
-            property string main: "Rubik"
+            property string main: "Roboto Flex"
+            property string numbers: "Rubik"
             property string title: "Gabarito"
             property string iconMaterial: "Material Symbols Rounded"
             property string iconNerd: "JetBrains Mono NF"
@@ -210,6 +211,34 @@ Singleton {
             property string reading: "Readex Pro"
             property string expressive: "Space Grotesk"
         }
+        property QtObject variableAxes: QtObject {
+            // Roboto Flex is customized to feel geometric, unserious yet not overly kiddy
+            property var main: ({
+                "YTUC": 716, // Uppercase height (Raised from 712 to be more distinguishable from lowercase)
+                "YTFI": 716, // Figure (numbers) height (Lowered from 738 to match uppercase)
+                "YTAS": 716, // Ascender height (Lowered from 750 to match uppercase)
+                "YTLC": 490, // Lowercase height (Lowered from 514 to be more distinguishable from uppercase)
+                "XTRA": 488, // Counter width (Raised from 468 to be less condensed, less serious)
+                "wdth": 105, // Width (Space out a tiny bit for readability)
+                "GRAD": 175, // Grade (Increased so the 6 and 9 don't look weak)
+                "wght": 300, // Weight (Lowered to compensate for increased grade)
+            })
+            // Rubik simply needs regular weight to override that of the main font where necessary
+            property var numbers: ({
+                "wght": 400,
+            })
+            // Slightly bold weight for title
+            property var title: ({
+                // "YTUC": 716, // Uppercase height (Raised from 712 to be more distinguishable from lowercase)
+                // "YTFI": 716, // Figure (numbers) height (Lowered from 738 to match uppercase)
+                // "YTAS": 716, // Ascender height (Lowered from 750 to match uppercase)
+                // "YTLC": 490, // Lowercase height (Lowered from 514 to be more distinguishable from uppercase)
+                // "XTRA": 490, // Counter width (Raised from 468 to be less condensed, less serious)
+                // "wdth": 110, // Width (Space out a tiny bit for readability)
+                // "GRAD": 150, // Grade (Increased so the 6 and 9 don't look weak)
+                "wght": 900, // Weight (Lowered to compensate for increased grade)
+            })
+        }
         property QtObject pixelSize: QtObject {
             property int smallest: 10
             property int smaller: 12

dots/.config/quickshell/ii/modules/common/widgets/MaterialTextArea.qml

@@ -44,9 +44,10 @@ TextArea {
     }
 
     font {
-        family: Appearance?.font.family.main ?? "sans-serif"
+        family: Appearance.font.family.main
         pixelSize: Appearance?.font.pixelSize.small ?? 15
         hintingPreference: Font.PreferFullHinting
+        variableAxes: Appearance.font.variableAxes.main
     }
     wrapMode: TextEdit.Wrap
 }

dots/.config/quickshell/ii/modules/common/widgets/MaterialTextField.qml

@@ -24,9 +24,10 @@ TextField {
     clip: true
 
     font {
-        family: Appearance?.font.family.main ?? "sans-serif"
+        family: Appearance.font.family.main
         pixelSize: Appearance?.font.pixelSize.small ?? 15
         hintingPreference: Font.PreferFullHinting
+        variableAxes: Appearance.font.variableAxes.main
     }
     wrapMode: TextEdit.Wrap
 

dots/.config/quickshell/ii/modules/common/widgets/PagePlaceholder.qml

@@ -40,8 +40,11 @@ Item {
             id: widgetNameText
             visible: title !== ""
             Layout.alignment: Qt.AlignHCenter
-            font.pixelSize: Appearance.font.pixelSize.larger
-            font.family: Appearance.font.family.title
+            font {
+                family: Appearance.font.family.title
+                pixelSize: Appearance.font.pixelSize.larger
+                variableAxes: Appearance.font.variableAxes.title
+            }
             color: Appearance.m3colors.m3outline
             horizontalAlignment: Text.AlignHCenter
         }

dots/.config/quickshell/ii/modules/common/widgets/StyledLabel.qml

@@ -5,10 +5,14 @@ import QtQuick.Controls
 Label {
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
+    property bool shouldUseRubik: /^\d+$/.test(root.text)
+    property var defaultFont: shouldUseRubik ? "Rubik" : Appearance.font.family.main
+    
     font {
-        hintingPreference: Font.PreferFullHinting
-        family: Appearance?.font.family.main ?? "sans-serif"
+        hintingPreference: Font.PreferDefaultHinting
+        family: defaultFont
         pixelSize: Appearance?.font.pixelSize.small ?? 15
+        variableAxes: shouldUseRubik ? ({}) : Appearance.font.variableAxes.main
     }
     color: Appearance?.m3colors.m3onBackground ?? "black"
     linkColor: Appearance?.m3colors.m3primary

dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml

@@ -188,6 +188,10 @@ Slider {
         StyledToolTip {
             extraVisibleCondition: root.pressed
             text: root.tooltipContent
+            font {
+                family: Appearance.font.family.numbers
+                variableAxes: Appearance.font.variableAxes.numbers
+            }
         }
     }
-}
+}

dots/.config/quickshell/ii/modules/common/widgets/StyledSpinBox.qml

@@ -30,6 +30,8 @@ SpinBox {
             anchors.centerIn: parent
             text: root.value // displayText would make the numbers weird like 1,000 instead of 1000
             color: Appearance.colors.colOnLayer2
+            font.family: Appearance.font.family.numbers
+            font.variableAxes: Appearance.font.variableAxes.numbers
             font.pixelSize: Appearance.font.pixelSize.small
             validator: root.validator
             onTextChanged: {

dots/.config/quickshell/ii/modules/common/widgets/StyledText.qml

@@ -9,10 +9,14 @@ Text {
 
     renderType: Text.NativeRendering
     verticalAlignment: Text.AlignVCenter
+    property bool shouldUseNumberFont: /^\d+$/.test(root.text)
+    property var defaultFont: shouldUseNumberFont ? Appearance.font.family.numbers : Appearance.font.family.main
+    
     font {
         hintingPreference: Font.PreferDefaultHinting
-        family: Appearance?.font.family.main ?? "sans-serif"
+        family: defaultFont
         pixelSize: Appearance?.font.pixelSize.small ?? 15
+        variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main
     }
     color: Appearance?.m3colors.m3onBackground ?? "black"
     linkColor: Appearance?.m3colors.m3primary

dots/.config/quickshell/ii/modules/common/widgets/StyledTextArea.qml

@@ -11,8 +11,9 @@ TextArea {
     selectionColor: Appearance.colors.colSecondaryContainer
     placeholderTextColor: Appearance.m3colors.m3outline
     font {
-        family: Appearance?.font.family.main ?? "sans-serif"
+        family: Appearance.font.family.main
         pixelSize: Appearance?.font.pixelSize.small ?? 15
         hintingPreference: Font.PreferFullHinting
+        variableAxes: Appearance.font.variableAxes.main
     }
 }

dots/.config/quickshell/ii/modules/common/widgets/StyledTextInput.qml

@@ -11,8 +11,9 @@ TextInput {
     selectedTextColor: Appearance.m3colors.m3onSecondaryContainer
     selectionColor: Appearance.colors.colSecondaryContainer
     font {
-        family: Appearance?.font.family.main ?? "sans-serif"
+        family: Appearance.font.family.main
         pixelSize: Appearance?.font.pixelSize.small ?? 15
         hintingPreference: Font.PreferFullHinting
+        variableAxes: Appearance.font.variableAxes.main
     }
 }

dots/.config/quickshell/ii/modules/common/widgets/StyledToolTip.qml

@@ -8,15 +8,23 @@ ToolTip {
     id: root
     property bool extraVisibleCondition: true
     property bool alternativeVisibleCondition: false
+
     readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
     verticalPadding: 5
     horizontalPadding: 10
     background: null
+    font {
+        family: Appearance.font.family.main
+        variableAxes: Appearance.font.variableAxes.main
+        pixelSize: Appearance?.font.pixelSize.smaller ?? 14
+        hintingPreference: Font.PreferNoHinting // Prevent shaky text
+    }
 
     visible: internalVisibleCondition
     
     contentItem: StyledToolTipContent {
         id: contentItem
+        font: root.font
         text: root.text
         shown: root.internalVisibleCondition
         horizontalPadding: root.horizontalPadding

dots/.config/quickshell/ii/modules/common/widgets/StyledToolTipContent.qml

@@ -10,6 +10,7 @@ Item {
     property bool shown: false
     property real horizontalPadding: 10
     property real verticalPadding: 5
+    property alias font: tooltipTextObject.font
     implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
     implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
 

dots/.config/quickshell/ii/modules/common/widgets/ToolbarTextField.qml

@@ -15,7 +15,12 @@ TextField {
 
     placeholderTextColor: Appearance.colors.colSubtext
     color: Appearance.colors.colOnLayer1
-    font.pixelSize: Appearance.font.pixelSize.small
+    font {
+        family: Appearance.font.family.main
+        pixelSize: Appearance.font.pixelSize.small
+        hintingPreference: Font.PreferFullHinting
+        variableAxes: Appearance.font.variableAxes.main
+    }
     renderType: Text.NativeRendering
     selectedTextColor: Appearance.colors.colOnSecondaryContainer
     selectionColor: Appearance.colors.colSecondaryContainer

dots/.config/quickshell/ii/modules/common/widgets/WindowDialogSectionHeader.qml

@@ -7,7 +7,8 @@ import qs.modules.common.widgets
 StyledText {
     text: "Section"
     font {
-        pixelSize: Appearance.font.pixelSize.large
         family: Appearance.font.family.title
+        pixelSize: Appearance.font.pixelSize.large
+        variableAxes: Appearance.font.variableAxes.title
     }
 }

dots/.config/quickshell/ii/modules/common/widgets/WindowDialogTitle.qml

@@ -9,7 +9,8 @@ StyledText {
     color: Appearance.colors.colOnSurface
     wrapMode: Text.Wrap
     font {
-        pixelSize: Appearance.font.pixelSize.title
         family: Appearance.font.family.title
+        pixelSize: Appearance.font.pixelSize.title
+        variableAxes: Appearance.font.variableAxes.title
     }
 }

dots/.config/quickshell/ii/modules/sessionScreen/SessionScreen.qml

@@ -130,9 +130,11 @@ Scope {
                     StyledText { // Title
                         Layout.alignment: Qt.AlignHCenter
                         horizontalAlignment: Text.AlignHCenter
-                        font.family: Appearance.font.family.title
-                        font.pixelSize: Appearance.font.pixelSize.title
-                        font.weight: Font.DemiBold
+                        font {
+                            family: Appearance.font.family.title
+                            pixelSize: Appearance.font.pixelSize.title
+                            variableAxes: Appearance.font.variableAxes.title
+                        }
                         text: Translation.tr("Session")
                     }
 

dots/.config/quickshell/ii/modules/sidebarRight/quickToggles/androidStyle/AndroidQuickToggleButton.qml

@@ -77,6 +77,13 @@ GroupButton {
                 return ColorUtils.transparentize(baseColor, transparentizeAmount)
             }
 
+            Behavior on radius {
+                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+            }
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
             MaterialSymbol {
                 anchors.centerIn: parent
                 fill: root.toggled ? 1 : 0
@@ -98,6 +105,7 @@ GroupButton {
                         right: parent.right
                     }
                     font.pixelSize: Appearance.font.pixelSize.smallie
+                    font.weight: 600
                     color: root.colText
                     elide: Text.ElideRight
                     text: root.name
@@ -111,9 +119,8 @@ GroupButton {
                     }
                     font {
                         pixelSize: Appearance.font.pixelSize.smaller
-                        weight: Font.Light
                     }
-                    color: root.colText
+                    color: Appearance.colors.colSubtext
                     elide: Text.ElideRight
                     text: root.statusText
                 }