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/BarBottom.qml
+3 -2
View File
@@ -6,6 +6,7 @@ import QtQuick
import QtQuick.Layouts
import qs.widgets.launcher
import qs.widgets.theme
Scope {
id: root
@@ -42,7 +43,7 @@ Scope {
implicitHeight: 12
// Brightens when the Dock launcher (variant 5) opens.
color: LauncherState.dockOpen ? "#FFF3C0" : "#FFD063"
color: LauncherState.dockOpen ? Theme.accentSoft : Theme.accent
Behavior on color {
ColorAnimation {
@@ -53,7 +54,7 @@ Scope {
// Gentle "listening" pulse while the dock is open.
Rectangle {
anchors.fill: parent
color: "#FFFFFF"
color: Theme.highlight
opacity: 0
visible: LauncherState.dockOpen
dotfiles/quickshell/widgets/bar/BarTop.qml
+3 -2
View File
@@ -5,6 +5,7 @@ import Quickshell.Widgets
import QtQuick
import qs.widgets.launcher
import qs.widgets.theme
Scope {
id: root
@@ -42,7 +43,7 @@ Scope {
implicitHeight: 6
// Brightens when the Console launcher (variant 4) opens.
color: LauncherState.consoleOpen ? "#FFF3C0" : "#FFD063"
color: LauncherState.consoleOpen ? Theme.accentSoft : Theme.accent
Behavior on color {
ColorAnimation {
@@ -53,7 +54,7 @@ Scope {
// Gentle "listening" pulse while the console is open.
Rectangle {
anchors.fill: parent
color: "#FFFFFF"
color: Theme.highlight
opacity: 0
visible: LauncherState.consoleOpen
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 }
dotfiles/quickshell/widgets/bar/StatusBarPanel.qml
+15 -26
View File
@@ -2,16 +2,13 @@ pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Shapes
import qs.widgets.theme
// Chamfered panel chrome for the dense status rail: outline, corner accent
// lines, and the optional header strip (id chip / title / meta / tick marks).
// Content is supplied as children by the call site.
//
// Palette and fonts are properties with defaults rather than references to the
// parent, because a component in its own file has no access to the enclosing
// scope. The defaults match DenseBarContent's, which is the repo's existing
// per-component convention (see quickshell/CLAUDE.md) — a shared theme
// singleton would be the place to collapse the duplication.
// Colors and fonts both come from the Theme singleton.
Item {
id: panel
@@ -23,22 +20,14 @@ Item {
property int offsetY: 2
property int accentLineThickness: 3
property color voidColor: "#0a0a0a"
property color inkColor: "#dedede"
property color mutedColor: "#858585"
property color accentColor: "#e8722a"
property color hairColor: Qt.rgba(0.87, 0.87, 0.87, 0.28)
property string displayFont: "DepartureMono Nerd Font"
property string microFont: "DejaVu Sans Mono"
Shape {
id: panelShape
anchors.fill: parent
preferredRendererType: Shape.CurveRenderer
ShapePath {
fillColor: panel.voidColor
strokeColor: panel.hairColor
fillColor: Theme.surface
strokeColor: Theme.hair
strokeWidth: 1
startX: 0; startY: panel.offsetY
PathLine { x: panelShape.width - panel.chamfer; y: panel.offsetY }
@@ -51,7 +40,7 @@ Item {
// Upper left accent line
ShapePath {
fillColor: panel.accentColor
fillColor: Theme.accent
strokeWidth: 0
startX: 0; startY: 0
PathLine { x: Math.min(49, panelShape.width / 3); y: 0 }
@@ -62,7 +51,7 @@ Item {
// Lower right accent line
ShapePath {
fillColor: panel.accentColor
fillColor: Theme.accent
strokeWidth: 0
startX: panelShape.width; startY: panelShape.height
PathLine { x: panelShape.width - Math.min(49, panelShape.width / 3); y: panelShape.height }
@@ -77,7 +66,7 @@ Item {
x: 1; y: 22
width: parent.width - 2
height: 1
color: panel.inkColor
color: Theme.text
opacity: 0.12
}
@@ -86,12 +75,12 @@ Item {
x: 5; y: 7
width: panel.panelId.length > 2 ? 29 : 24
height: 11
color: panel.accentColor
color: Theme.accent
Text {
anchors.centerIn: parent
text: panel.panelId
color: panel.voidColor
font.family: panel.microFont
color: Theme.surface
font.family: Theme.microFont
font.pixelSize: 8
font.bold: true
}
@@ -102,8 +91,8 @@ Item {
x: 40; y: 7
width: parent.width - 105
text: panel.title
color: panel.inkColor
font.family: panel.displayFont
color: Theme.text
font.family: Theme.displayFont
font.pixelSize: 9
font.bold: true
font.letterSpacing: 1.1
@@ -119,8 +108,8 @@ Item {
y: 6
text: panel.meta
width: Math.min(80, parent.width / 4)
color: panel.mutedColor
font.family: panel.microFont
color: Theme.muted
font.family: Theme.microFont
font.pixelSize: 6
font.letterSpacing: 0.7
horizontalAlignment: Text.AlignRight
@@ -135,7 +124,7 @@ Item {
spacing: 2
Repeater {
model: 5
Rectangle { required property int index; width: 4; height: 2; color: panel.accentColor }
Rectangle { required property int index; width: 4; height: 2; color: Theme.accent }
}
}
}