darman/homelab
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(quickshell): move every color and font into a Theme singleton

Browse Source 
The shell was running two unrelated palettes: an amber one (#FFD063 accent,
#EEEEEE text, #0F1012 panels) hardcoded as ~200 raw hex literals across the
launchers, sidebar, systray, vitals and notifications, and an orange one
(#e8722a) that only the dense bar had, tokenized as per-file properties.

This unifies on the ORANGE values under the AMBER naming scheme, and moves the
lot into widgets/theme/Theme.qml. `surface` takes the dense bar's void
(#0a0a0a) rather than the old panel background. Zero color and font literals
remain anywhere under widgets/ outside Theme.qml.

Collisions resolved, all near-duplicates that wanted to be one token:
  - #0F1012 + #0A0A0C + #0a0a0a -> surface
  - #EEEEEE + #dedede           -> text
  - #7A7B7D + #858585           -> muted
  - #292C30 + #22262C           -> raised
  - #FFD063 + #e8722a           -> accent

Two derived things rather than literals. accentSoft (the pale flash the
top/bottom bars show while a launcher is open) was a hand-picked #FFF3C0
against amber, which is simply wrong against orange; it is now
Qt.tint(accent, white 55%), a ratio checked against the original (amber tinted
55% gives #FFE9B8 vs the hand-picked #FFF3C0). And the dense bar had been
hand-encoding Qt.rgba(0.87,0.87,0.87,a) and Qt.rgba(0.91,0.45,0.16,a), which
are just text and accent at alpha -- now textAlpha(a)/accentAlpha(a), so they
track a palette change instead of silently drifting.

Fonts came along too. Digital-7 Mono is dropped for DepartureMono: it was
never packaged, relying on a manual ~/.dots/fonts/digital_7 install that does
not exist on terra, so `fc-match "Digital-7 Mono"` resolved to DejaVu Sans and
all 38 of those sites -- the launcher lists, sidebar clock, systray labels,
every vitals readout -- were silently rendering in a PROPORTIONAL fallback.
Numeric columns should visibly improve. readoutFont is an alias of displayFont
rather than a second literal so the two roles cannot drift apart.

quickshell/CLAUDE.md updated: it said "No shared theme/tokens file yet" and
told contributors to grep for the existing hex color, which would now
reintroduce exactly what this removes.

Verified: no file references Theme. without the import, none imports it
unused, and the whole shell -- launchers, sidebar, vitals, systray,
notifications, not just the harness -- hot-reloaded clean on terra.
tests/HeadlessSmoke.qml deliberately keeps its own copies; its value is having
no dependencies.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SgcWkm3t6BDQktYHQvb8Hx
This commit is contained in:
darman
2026-08-28 07:56:25 +02:00
co-authored by Claude Opus 5
parent 01bc169180
commit b16cc93ff6
22 changed files with 390 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dotfiles/quickshell/widgets/bar/DenseBarContent.qml
+60 -66
View File
@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Shapes
import qs.widgets.theme
// Renderable visual core for the desktop telemetry rail. Runtime services stay
// in DenseBar.qml so this Item can be exercised without Wayland or Hyprland.
@@ -11,14 +12,7 @@ Item {
implicitWidth: 1920
implicitHeight: 164
readonly property color voidColor: "#0a0a0a"
readonly property color inkColor: "#dedede"
readonly property color mutedColor: "#858585"
readonly property color accentColor: "#e8722a"
readonly property color hairColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
readonly property bool compact: width <= 1400
readonly property string displayFont: "DepartureMono Nerd Font"
readonly property string microFont: "DejaVu Sans Mono"
property bool autoClock: true
property date now: new Date()
@@ -77,7 +71,7 @@ Item {
x: index * 40
width: 1
height: root.height
color: root.inkColor
color: Theme.text
opacity: 0.018
}
}
@@ -89,7 +83,7 @@ Item {
y: index * 40
width: root.width
height: 1
color: root.inkColor
color: Theme.text
opacity: 0.018
}
}
@@ -120,8 +114,8 @@ Item {
x: 12
y: 34
text: root.hostName.toUpperCase()
color: root.inkColor
font.family: root.displayFont
color: Theme.text
font.family: Theme.displayFont
font.pixelSize: root.compact ? 20 : 25
font.bold: true
font.letterSpacing: 2
@@ -133,8 +127,8 @@ Item {
x: 13
y: 63
text: "STATUS ARRAY // " + (root.telemetryReady ? "LIVE" : "STANDBY")
color: root.accentColor
font.family: root.microFont
color: Theme.accent
font.family: Theme.microFont
font.pixelSize: 7
font.letterSpacing: 1.4
}
@@ -144,7 +138,7 @@ Item {
y: 36
width: 1
height: 43
color: root.hairColor
color: Theme.hair
}
Rectangle {
@@ -152,7 +146,7 @@ Item {
y: 42
width: 5
height: 5
color: root.accentColor
color: Theme.accent
opacity: root.telemetryReady ? 1 : 0.35
}
@@ -160,8 +154,8 @@ Item {
x: parent.width - 50
y: 38
text: root.telemetryReady ? "ONLINE" : "LOCAL"
color: root.accentColor
font.family: root.microFont
color: Theme.accent
font.family: Theme.microFont
font.pixelSize: 7
}
@@ -169,8 +163,8 @@ Item {
x: parent.width - 63
y: 57
text: "NODE // " + (root.hostName || "--").toUpperCase().slice(0, 7)
color: root.mutedColor
font.family: root.microFont
color: Theme.muted
font.family: Theme.microFont
font.pixelSize: 6
}
@@ -181,7 +175,7 @@ Item {
height: 10
ShapePath {
fillColor: "transparent"
strokeColor: root.accentColor
strokeColor: Theme.accent
strokeWidth: 1
startX: 0; startY: 6
PathLine { x: 11; y: 6 }
@@ -280,8 +274,8 @@ Item {
width: parent.width
text: root.networkRxText
horizontalAlignment: Text.AlignRight
color: root.accentColor
font.family: root.displayFont
color: Theme.accent
font.family: Theme.displayFont
font.pixelSize: root.compact ? 11 : 13
font.bold: true
elide: Text.ElideLeft
@@ -291,8 +285,8 @@ Item {
width: parent.width
text: root.networkTxText
horizontalAlignment: Text.AlignRight
color: root.inkColor
font.family: root.displayFont
color: Theme.text
font.family: Theme.displayFont
font.pixelSize: root.compact ? 11 : 13
font.bold: true
elide: Text.ElideLeft
@@ -322,7 +316,7 @@ Item {
y: 33
width: 1
height: 46
color: root.hairColor
color: Theme.hair
}
Column {
@@ -336,8 +330,8 @@ Item {
width: parent.width
text: root.timeText(root.now)
horizontalAlignment: Text.AlignRight
color: root.inkColor
font.family: root.displayFont
color: Theme.text
font.family: Theme.displayFont
font.pixelSize: root.compact ? 20 : 22
font.bold: true
font.letterSpacing: 1
@@ -346,8 +340,8 @@ Item {
width: parent.width
text: root.dateText(root.now)
horizontalAlignment: Text.AlignRight
color: root.accentColor
font.family: root.microFont
color: Theme.accent
font.family: Theme.microFont
font.pixelSize: 6
elide: Text.ElideLeft
}
@@ -377,8 +371,8 @@ Item {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: "06 // DESKTOP"
color: root.accentColor
font.family: root.microFont
color: Theme.accent
font.family: Theme.microFont
font.pixelSize: 7
font.letterSpacing: 1
}
@@ -393,14 +387,14 @@ Item {
required property var modelData
width: 24
height: 17
color: Number(modelData) === root.activeWorkspaceId ? Qt.rgba(0.91, 0.45, 0.16, 0.18) : "transparent"
color: Number(modelData) === root.activeWorkspaceId ? Theme.accentAlpha(0.18) : "transparent"
border.width: 1
border.color: Number(modelData) === root.activeWorkspaceId ? root.accentColor : root.hairColor
border.color: Number(modelData) === root.activeWorkspaceId ? Theme.accent : Theme.hair
Text {
anchors.centerIn: parent
text: root.two(Number(parent.modelData))
color: Number(parent.modelData) === root.activeWorkspaceId ? root.accentColor : root.mutedColor
font.family: root.microFont
color: Number(parent.modelData) === root.activeWorkspaceId ? Theme.accent : Theme.muted
font.family: Theme.microFont
font.pixelSize: 7
}
MouseArea {
@@ -419,8 +413,8 @@ Item {
x: 76
anchors.verticalCenter: parent.verticalCenter
text: "COMPOSITOR // NODE_EXPORTER // SHELL"
color: root.telemetryReady ? root.inkColor : root.mutedColor
font.family: root.microFont
color: root.telemetryReady ? Theme.text : Theme.muted
font.family: Theme.microFont
font.pixelSize: 7
elide: Text.ElideRight
width: parent.width - 84
@@ -434,8 +428,8 @@ Item {
x: 93
anchors.verticalCenter: parent.verticalCenter
text: root.storageFreeText
color: root.inkColor
font.family: root.microFont
color: Theme.text
font.family: Theme.microFont
font.pixelSize: 8
}
SegmentMeter {
@@ -458,8 +452,8 @@ Item {
x: 89
anchors.verticalCenter: parent.verticalCenter
text: root.audioMuted ? "MUTED" : Math.round(root.audioFraction * 100) + "%"
color: root.audioMuted ? root.mutedColor : root.accentColor
font.family: root.microFont
color: root.audioMuted ? Theme.muted : Theme.accent
font.family: Theme.microFont
font.pixelSize: 8
}
SegmentMeter {
@@ -483,8 +477,8 @@ Item {
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
text: root.telemetryReady ? "WARN:00 // ERR:00" : "TELEMETRY WAIT"
color: root.telemetryReady ? root.mutedColor : root.accentColor
font.family: root.microFont
color: root.telemetryReady ? Theme.muted : Theme.accent
font.family: Theme.microFont
font.pixelSize: 7
elide: Text.ElideLeft
width: parent.width - 64
@@ -502,7 +496,7 @@ Item {
height: 12
ShapePath {
fillColor: "transparent"
strokeColor: Qt.rgba(0.91, 0.45, 0.16, 0.55)
strokeColor: Theme.accentAlpha(0.55)
strokeWidth: 1
startX: 0; startY: 1
PathLine { x: 220; y: 1 }
@@ -524,15 +518,15 @@ Item {
required property int index
width: 5
height: 3
color: index % 2 === 0 ? root.accentColor : "transparent"
color: index % 2 === 0 ? Theme.accent : "transparent"
opacity: 0.58
}
}
}
component MicroText: Text {
color: root.mutedColor
font.family: root.microFont
color: Theme.muted
font.family: Theme.microFont
font.pixelSize: 6
font.letterSpacing: 0.7
}
@@ -545,7 +539,7 @@ Item {
anchors.right: parent.right
width: 1
height: parent.height
color: root.hairColor
color: Theme.hair
opacity: 0.65
}
}
@@ -565,8 +559,8 @@ Item {
anchors.right: parent.right
y: -3
text: metric.readout
color: root.inkColor
font.family: root.displayFont
color: Theme.text
font.family: Theme.displayFont
font.pixelSize: root.compact ? 14 : 17
font.bold: true
}
@@ -595,9 +589,9 @@ Item {
width: Math.max(2, (meter.width - (meter.segments - 1) * meter.spacing) / meter.segments)
height: meter.height
readonly property bool on: meter.ready && index < Math.round(Math.max(0, Math.min(1, meter.value)) * meter.segments)
color: on ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.06)
color: on ? Theme.accent : Theme.textAlpha(0.06)
border.width: 1
border.color: on ? root.accentColor : Qt.rgba(0.87, 0.87, 0.87, 0.18)
border.color: on ? Theme.accent : Theme.textAlpha(0.18)
}
}
}
@@ -613,8 +607,8 @@ Item {
Shape {
anchors.fill: parent
ShapePath {
fillColor: state.active ? Qt.rgba(0.91, 0.45, 0.16, 0.18) : "transparent"
strokeColor: state.active ? root.accentColor : root.hairColor
fillColor: state.active ? Theme.accentAlpha(0.18) : "transparent"
strokeColor: state.active ? Theme.accent : Theme.hair
strokeWidth: 1
startX: 1; startY: 1
PathLine { x: parent.width - 7; y: 1 }
@@ -629,8 +623,8 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
y: 7
text: state.code
color: state.active ? root.accentColor : root.inkColor
font.family: root.displayFont
color: state.active ? Theme.accent : Theme.text
font.family: Theme.displayFont
font.pixelSize: 13
font.bold: true
}
@@ -655,27 +649,27 @@ Item {
radius: width / 2
color: "transparent"
border.width: 1
border.color: index === 0 ? root.accentColor : root.hairColor
border.color: index === 0 ? Theme.accent : Theme.hair
}
}
Rectangle { x: 0; y: parent.height / 2; width: parent.width; height: 1; color: root.hairColor }
Rectangle { x: parent.width / 2; y: 0; width: 1; height: parent.height; color: root.hairColor }
Rectangle { x: 12; y: 18; width: 4; height: 4; color: root.accentColor }
Rectangle { x: parent.width - 14; y: parent.height - 20; width: 4; height: 4; color: root.accentColor }
Rectangle { x: parent.width / 2; y: parent.height - 11; width: 4; height: 4; color: root.accentColor }
MicroText { anchors.right: parent.right; y: 3; text: "R:" + Math.round(radar.level * 99); color: root.accentColor }
Rectangle { x: 0; y: parent.height / 2; width: parent.width; height: 1; color: Theme.hair }
Rectangle { x: parent.width / 2; y: 0; width: 1; height: parent.height; color: Theme.hair }
Rectangle { x: 12; y: 18; width: 4; height: 4; color: Theme.accent }
Rectangle { x: parent.width - 14; y: parent.height - 20; width: 4; height: 4; color: Theme.accent }
Rectangle { x: parent.width / 2; y: parent.height - 11; width: 4; height: 4; color: Theme.accent }
MicroText { anchors.right: parent.right; y: 3; text: "R:" + Math.round(radar.level * 99); color: Theme.accent }
}
component NetworkTrace: Item {
id: trace
property real level: 0
Rectangle { x: 0; y: parent.height - 1; width: parent.width; height: 1; color: root.hairColor }
Rectangle { x: 0; y: 0; width: 1; height: parent.height; color: root.hairColor }
Rectangle { x: 0; y: parent.height - 1; width: parent.width; height: 1; color: Theme.hair }
Rectangle { x: 0; y: 0; width: 1; height: parent.height; color: Theme.hair }
Shape {
anchors.fill: parent
ShapePath {
fillColor: "transparent"
strokeColor: root.accentColor
strokeColor: Theme.accent
strokeWidth: 1.2
startX: 0; startY: trace.height * 0.65
PathLine { x: trace.width * 0.10; y: trace.height * 0.65 }