finish styled top bar

10 files changed, 135 insertions, 52 deletions

diff --git a/bar/Bar.qml b/bar/Bar.qml
index 39cb256..f35c07b 100644
--- a/bar/Bar.qml
+++ b/bar/Bar.qml
@@ -12,7 +12,7 @@ Scope {
 
         IWindow {
             id: barWindow
-            name: "Bar"
+            name: "quickshell:bar"
 
             anchors {
                 top: true
@@ -108,9 +108,9 @@ Scope {
                     Power {
                         id: power
                     }
-                    Tray {
-                        id: tray
-                    }
+                    // Tray {
+                    //     id: tray
+                    // }
                     TimeDate {
                         id: timeDate
                     }
diff --git a/bar/Mpris.qml b/bar/Mpris.qml
index a3145aa..b85b064 100644
--- a/bar/Mpris.qml
+++ b/bar/Mpris.qml
@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Services.Mpris
 import qs.services as Services
 import qs.config
+import qs.components
 
 // import Quickshell.Utils
 
@@ -53,14 +54,13 @@ Item {
         id: rect
         anchors.verticalCenter: parent.verticalCenter
         // TODO: move to IRect
-        implicitWidth: text.width + General.rectMargin * 2
+        implicitWidth: text.width + General.rectMargin * 4
         height: parent.height - General.rectMargin
         color: Colors.alt
         radius: Style.rounding.smaller
-        Text {
+        IText {
             id: text
             // TODO: use IText
-            font.pixelSize: General.fontSize
             anchors.centerIn: parent
             anchors.verticalCenter: parent.verticalCenter
             text: root.state + " " + root.cleanedTitle + " [" + root.progress + "]"
diff --git a/bar/Network.qml b/bar/Network.qml
index 14e8851..ae1eace 100644
--- a/bar/Network.qml
+++ b/bar/Network.qml
@@ -41,19 +41,19 @@ Item {
 
             RowLayout {
                 spacing: Config.Bar.resourceIconTextSpacing / 2
-                Text {
+                IText {
                     text: Config.Icons.resource.network.download
                 }
-                Text {
+                IText {
                     text: Services.NetworkUsage.down + Services.NetworkUsage.downUnit
                 }
             }
             RowLayout {
                 spacing: Config.Bar.resourceIconTextSpacing / 2
-                Text {
+                IText {
                     text: Config.Icons.resource.network.upload
                 }
-                Text {
+                IText {
                     text: Services.NetworkUsage.up + Services.NetworkUsage.upUnit
                 }
             }
diff --git a/bar/Power.qml b/bar/Power.qml
index 581e725..1eea3e1 100644
--- a/bar/Power.qml
+++ b/bar/Power.qml
@@ -34,23 +34,29 @@ Item {
 
             Icons {
                 text: Config.Icons.power.shutdown
+                font.pixelSize: Config.Style.font.size.large
+                color: Qt.rgba(191, 97, 106, 1)
             }
 
-            Icons {
-                text: Config.Icons.power.dpms
-            }
-
-            Icons {
-                text: Config.Icons.power.lock
-            }
-
-            Icons {
-                text: Config.Icons.power.suspend
-            }
-
-            Icons {
-                text: Config.Icons.power.reboot
-            }
+            // Icons {
+            //     text: Config.Icons.power.dpms
+            //     font.pixelSize: Config.Style.fontSize.large
+            // }
+            //
+            // Icons {
+            //     text: Config.Icons.power.lock
+            //     font.pixelSize: Config.Style.fontSize.large
+            // }
+            //
+            // Icons {
+            //     text: Config.Icons.power.suspend
+            //     font.pixelSize: Config.Style.fontSize.large
+            // }
+            //
+            // Icons {
+            //     text: Config.Icons.power.reboot
+            //     font.pixelSize: Config.Style.fontSize.large
+            // }
 
             Item {
                 Layout.fillWidth: true
diff --git a/bar/TimeDate.qml b/bar/TimeDate.qml
index c3bf129..6b7ec59 100644
--- a/bar/TimeDate.qml
+++ b/bar/TimeDate.qml
@@ -34,7 +34,7 @@ Item {
                 text: Config.Icons.resource.clock
                 font.pixelSize: Config.Style.font.size.larger
             }
-            Text {
+            IText {
                 text: Services.TimeDate.time
             }
             Item {
diff --git a/components/IText.qml b/components/IText.qml
index 1b971c4..bbd9861 100644
--- a/components/IText.qml
+++ b/components/IText.qml
@@ -1,15 +1,55 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
-import QtQuick.Layouts
 import qs.config
 
 Text {
+    id: root
+
+    property bool animate: false
+    property string animateProp: "scale"
+    property real animateFrom: 0
+    property real animateTo: 1
+    property int animateDuration: Style.anim.durations.normal
+
     renderType: Text.NativeRendering
-    verticalAlignment: Text.AlignVCenter
+    textFormat: Text.PlainText
+    color: Colors.foreground
+
     font {
-        hintingPreference: Font.PreferFullHinting
-        family: Appearance?.font.family.main ?? "sans-serif"
-        pixelSize: Appearance?.font.pixelSize.small ?? 15
+        family: Style.font.family.iosevka
+        // pointSize: root.pixelSize
+        pixelSize: Style.font.size.largerr
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Style.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Style.anim.curves.standard
+        }
+    }
+
+    Behavior on text {
+        enabled: root.animate
+
+        SequentialAnimation {
+            Anim {
+                to: root.animateFrom
+                easing.bezierCurve: Appearance.anim.curves.standardAccel
+            }
+            PropertyAction {}
+            Anim {
+                to: root.animateTo
+                easing.bezierCurve: Appearance.anim.curves.standardDecel
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        target: root
+        property: root.animateProp
+        duration: root.animateDuration / 2
+        easing.type: Easing.BezierSpline
     }
-    color: Appearance?.m3colors.m3onBackground ?? "black"
-    linkColor: Appearance?.m3colors.m3primary
 }
diff --git a/components/Icons.qml b/components/Icons.qml
index 4b3915c..a5d2348 100644
--- a/components/Icons.qml
+++ b/components/Icons.qml
@@ -3,14 +3,15 @@ import QtQuick.Layouts
 
 import qs.config
 
-Text {
+IText {
     id: root
     property real iconSize: General.iconSize
     property real fill: 0
     property real truncatedFill: Math.round(fill * 100) / 100 // Reduce memory consumption spikes from constant font remapping
     renderType: Text.NativeRendering
     font {
-        hintingPreference: Font.PreferFullHinting
+        // hintingPreference: Font.PreferFullHinting
+        hintingPreference: Font.PreferNoHinting // so the icons dont just offset away
         family: Style.font.family.symbols ?? "Symbols Nerd Font"
         pixelSize: iconSize
         weight: Font.Normal + (Font.DemiBold - Font.Normal) * fill
diff --git a/components/SimpleResource.qml b/components/SimpleResource.qml
index bd88085..0069f53 100644
--- a/components/SimpleResource.qml
+++ b/components/SimpleResource.qml
@@ -34,7 +34,7 @@ Item {
             Icons {
                 text: root.icon
             }
-            Text {
+            IText {
                 text: root.text
             }
 
diff --git a/config/Colors.qml b/config/Colors.qml
index 1ba73f2..d45bad9 100644
--- a/config/Colors.qml
+++ b/config/Colors.qml
@@ -3,19 +3,54 @@ import Quickshell
 import QtQuick
 
 Singleton {
-    property color background: WallustColors.background
-    property color foreground: WallustColors.foreground
-    property color surface: WallustColors.color0
-    property color primary: WallustColors.color3
-    property color alt: WallustColors.color4
-    property color accent: WallustColors.color1
-    property color success: WallustColors.color2
-    property color warning: WallustColors.color3
-    property color error: WallustColors.color1
-    property color info: WallustColors.color4
-    property color textSecondary: WallustColors.color7
-    property color border: WallustColors.color8
-    property color highlight: WallustColors.color5
-    property color disabled: WallustColors.color6
-    property color muted: WallustColors.color2
+    readonly property color background: WallustColors.background
+    readonly property color foreground: WallustColors.foreground
+    readonly property color surface: WallustColors.color0
+    readonly property color primary: WallustColors.color3
+    readonly property color alt: WallustColors.color4
+    readonly property color accent: WallustColors.color1
+    readonly property color success: WallustColors.color2
+    readonly property color warning: WallustColors.color3
+    readonly property color error: WallustColors.color1
+    readonly property color info: WallustColors.color4
+    readonly property color textSecondary: WallustColors.color7
+    readonly property color border: WallustColors.color8
+    readonly property color highlight: WallustColors.color5
+    readonly property color disabled: WallustColors.color6
+    readonly property color muted: WallustColors.color2
+
+    // actual colors
+    // 	@define-color BLACK rgba (59, 66, 82, 1);
+    // @define-color RED rgba (191, 97, 106, 1);
+    // @define-color GREEN rgba (163, 190, 140, 1);
+    // @define-color YELLOW rgba (235, 203, 139, 1);
+    // @define-color BLUE rgba (129, 161, 193, 1);
+    // @define-color MAGENTA rgba (180, 142, 173, 1);
+    // @define-color CYAN rgba (136, 192, 208, 1);
+    // @define-color WHITE rgba (229, 233, 240, 1);
+    // @define-color ALTBLACK rgba (76, 86, 106, 1);
+    // @define-color ALTRED rgba (191, 97, 106, 1);
+    // @define-color ALTGREEN rgba (163, 190, 140, 1);
+    // @define-color ALTYELLOW rgba (235, 203, 139, 1);
+    // @define-color ALTBLUE rgba (129, 161, 193, 1);
+    // @define-color ALTMAGENTA rgba (180, 142, 173, 1);
+    // @define-color ALTCYAN rgba (143, 188, 187, 1);
+    // @define-color ALTWHITE rgba (236, 239, 244, 1);
+
+    readonly property color black: Qt.rgba(59, 66, 82)
+    readonly property color red: Qt.rgba(191, 97, 106)
+    readonly property color green: Qt.rgba(163, 190, 140)
+    readonly property color yellow: Qt.rgba(235, 203, 139)
+    readonly property color blue: Qt.rgba(129, 161, 193)
+    readonly property color magenta: Qt.rgba(180, 142, 173)
+    readonly property color cyan: Qt.rgba(136, 192, 208)
+    readonly property color white: Qt.rgba(229, 233, 240)
+    readonly property color altBlack: Qt.rgba(76, 86, 106)
+    readonly property color altRed: Qt.rgba(191, 97, 106)
+    readonly property color altGreen: Qt.rgba(163, 190, 140)
+    readonly property color altYellow: Qt.rgba(235, 203, 139)
+    readonly property color altBlue: Qt.rgba(129, 161, 193)
+    readonly property color altMagenta: Qt.rgba(180, 142, 173)
+    readonly property color altCyan: Qt.rgba(143, 188, 187)
+    readonly property color altWhite: Qt.rgba(236, 239, 244)
 }
diff --git a/config/Style.qml b/config/Style.qml
index b6d222b..e2c47a0 100644
--- a/config/Style.qml
+++ b/config/Style.qml
@@ -47,6 +47,7 @@ Singleton {
         readonly property int smaller: 12
         readonly property int normal: 13
         readonly property int larger: 15
+        readonly property int largerr: 16
         readonly property int large: 18
         readonly property int extraLarge: 28
     }