use (tweaked) roboto flex for shell text

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": 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": 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
     }
 }