utilbuttons

.config/quickshell/modules/bar/ClockWidget.qml

@@ -1,42 +1,37 @@
 import "../common"
+import "../common/widgets"
 import QtQuick
 import QtQuick.Layouts
 
 Rectangle {
-    implicitWidth: 200
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 6 // idk, text seems nicer w/ more padding
     implicitHeight: 32
     color: Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
     RowLayout {
+        id: rowLayout
+
         spacing: 4
         anchors.centerIn: parent
 
-        Text {
-            renderType: Text.NativeRendering
-            verticalAlignment: Text.AlignVCenter
+        StyledText {
             font.family: Appearance.font.family.title
             font.pointSize: Appearance.font.pointSize.large
+            color: Appearance.colors.colOnLayer1
             text: DateTime.time
-            color: Appearance.colors.colOnLayer1
         }
 
-        Text {
-            renderType: Text.NativeRendering
-            verticalAlignment: Text.AlignVCenter
-            font.family: Appearance.font.family.main
+        StyledText {
             font.pointSize: Appearance.font.pointSize.small
+            color: Appearance.colors.colOnLayer1
             text: "•"
-            color: Appearance.colors.colOnLayer1
         }
 
-        Text {
-            renderType: Text.NativeRendering
-            verticalAlignment: Text.AlignVCenter
-            font.family: Appearance.font.family.main
+        StyledText {
             font.pointSize: Appearance.font.pointSize.small
-            text: DateTime.date
             color: Appearance.colors.colOnLayer1
+            text: DateTime.date
         }
 
     }

.config/quickshell/modules/bar/UtilButtons.qml

@@ -1,18 +1,60 @@
 import "../common"
+import "../common/widgets"
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
 
 Rectangle {
-    implicitWidth: 200
+    Layout.alignment: Qt.AlignVCenter
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 32
     color: Appearance.colors.colLayer1
     radius: Appearance.rounding.small
 
+    Process {
+        id: screenSnip
+
+        command: ["grimblast", "copy", "area"]
+    }
+
+    Process {
+        id: pickColor
+
+        command: ["hyprpicker", "-a"]
+    }
+
     RowLayout {
+        id: rowLayout
+
         spacing: 4
         anchors.centerIn: parent
 
-        
+        SmallCircleButton {
+            Layout.alignment: Qt.AlignVCenter
+            onClicked: screenSnip.running = true
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                text: "screenshot_region"
+                font.pointSize: Appearance.font.pointSize.normal
+                color: Appearance.colors.colOnLayer2
+            }
+
+        }
+
+        SmallCircleButton {
+            Layout.alignment: Qt.AlignVCenter
+            onClicked: pickColor.running = true
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                text: "colorize"
+                font.pointSize: Appearance.font.pointSize.normal
+                color: Appearance.colors.colOnLayer2
+            }
+
+        }
 
     }
 

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

@@ -105,6 +105,10 @@ Singleton {
         property color colOnLayer2: m3colors.m3onSurface;
         property color colLayer3: mix(m3colors.m3surfaceContainerHigh, m3colors.m3onSurface, 0.96);
         property color colOnLayer3: m3colors.m3onSurface;
+        property color colLayer2Hover: mix(colLayer2, colOnLayer2, 0.90);
+        property color colLayer2Active: mix(colLayer2, colOnLayer2, 0.80);
+        property color colLayer3Hover: mix(colLayer3, colOnLayer3, 0.90);
+        property color colLayer3Active: mix(colLayer3, colOnLayer3, 0.80);
     }
 
     rounding: QtObject {
@@ -119,7 +123,7 @@ Singleton {
     font: QtObject {
         property QtObject family: QtObject {
             property string main: "Rubik"
-            property string title: "Gabarito"
+            property string title: "Rubik"
             property string iconMaterial: "Material Symbols Rounded"
             property string iconNerd: "SpaceMono NF"
             property string monospace: "JetBrains Mono NF"

.config/quickshell/modules/common/widgets/MaterialSymbol.qml

@@ -0,0 +1,11 @@
+import "../"
+import QtQuick
+import QtQuick.Layouts
+
+Text {
+    renderType: Text.NativeRendering
+    verticalAlignment: Text.AlignVCenter
+    font.family: Appearance.font.family.iconMaterial
+    font.pointSize: Appearance.font.pointSize.small
+    color: Appearance.colors.colOnBackground
+}

.config/quickshell/modules/common/widgets/SmallCircleButton.qml

@@ -0,0 +1,25 @@
+import "../"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+
+Button {
+    id: button
+    implicitWidth: 26
+    implicitHeight: 26
+
+    required default property Item content
+    property bool extraActiveCondition: false
+
+    contentItem: content
+
+    background: Rectangle {
+        anchors.fill: parent
+        radius: Appearance.rounding.full
+        color: (button.down || extraActiveCondition) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
+    }
+
+}

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

@@ -0,0 +1,11 @@
+import "../"
+import QtQuick
+import QtQuick.Layouts
+
+Text {
+    renderType: Text.NativeRendering
+    verticalAlignment: Text.AlignVCenter
+    font.family: Appearance.font.family.main
+    font.pointSize: Appearance.font.pointSize.small
+    color: Appearance.colors.colOnBackground
+}