mpuchstein/dotfiles
0
0
Fork 0
Code Issues 11 Pull Requests Releases Wiki Activity

quickshell: retheme to apex-neon v2

Browse Source 
Migrate the shell palette to the v2 semantic spine and clean up
spec violations:

- Theme.qml: v2 neutrals (#070709 ground), split real blue (#5b8cff)
  from info cyan, retire the peach token, add a focus attention violet.
- Weather: severity-driven coloring (cyan/amber/red) from weatherCode;
  replaces decorative peach. Forecast highs=text, lows=subtext0.
- SystemPopout: performance profile + Reboot hold -> amber (peach retired).
- Workspaces: active indicator red -> focus violet (selection is
  attention, not danger).
- SystemPill: Arch logo lavender -> real blue.
- Bar.qml: gate BluetoothPill instantiation behind hasBluetooth so
  BlueZ DBus never spins up when the bluetooth tag is off.
- IdleScreen: route hardcoded hex through Theme tokens.
This commit is contained in:
Matthias Puchstein
2026-06-04 03:06:38 +02:00
parent a62daae092
commit 490e03d35c
9 changed files with 102 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dot_config/quickshell/Bar.qml
+7 -1
View File
@@ -99,7 +99,13 @@ Scope {
BarComponents.KubernetesPill { id: kubernetesBtn; visible: Shared.Config.kubeEnabled }
BarComponents.BluetoothPill { id: bluetoothBtn; visible: Shared.Config.hasBluetooth }
// Gate instantiation (not just visibility) so Quickshell.Bluetooth /
// BlueZ DBus never spins up when the bluetooth tag is off.
Loader {
active: Shared.Config.hasBluetooth
visible: active
sourceComponent: BarComponents.BluetoothPill {}
}
BarComponents.BarPill {
id: notifBtn
dot_config/quickshell/bar/SystemPill.qml
+2 -2
View File
@@ -5,13 +5,13 @@ import "../shared" as Shared
BarPill {
groupName: "system"
accentColor: Shared.Theme.lavender
accentColor: Shared.Theme.blue
content: [
Text {
Layout.alignment: Qt.AlignHCenter
text: "\u{f303}"
color: Shared.Theme.lavender
color: Shared.Theme.blue
font.pixelSize: Shared.Theme.fontLarge + 2
font.family: Shared.Theme.iconFont
}
dot_config/quickshell/bar/WeatherPill.qml
+14 -7
View File
@@ -4,16 +4,25 @@ import QtQuick.Layouts
import "../shared" as Shared
BarPill {
id: root
groupName: "weather"
accentColor: Shared.Weather.status === "error" ? Shared.Theme.overlay0 : Shared.Theme.peach
// Color follows condition severity: calm = info cyan, warning conditions
// = amber, severe (thunder/blizzard/torrential) = danger red. error/stale
// override to muted/amber respectively.
readonly property color severityColor: Shared.Weather.status === "error" ? Shared.Theme.overlay0
: Shared.Weather.status === "stale" ? Shared.Theme.warning
: Shared.Weather.severity === "danger" ? Shared.Theme.danger
: Shared.Weather.severity === "warning" ? Shared.Theme.warning
: Shared.Theme.sky
accentColor: root.severityColor
content: [
Text {
Layout.alignment: Qt.AlignHCenter
text: Shared.Weather.status === "error" ? "\u{f0599}" : Shared.Weather.icon
color: Shared.Weather.status === "error" ? Shared.Theme.overlay0
: Shared.Weather.status === "stale" ? Shared.Theme.warning
: Shared.Theme.peach
color: root.severityColor
font.pixelSize: Shared.Theme.fontLarge
font.family: Shared.Theme.iconFont
},
@@ -22,9 +31,7 @@ BarPill {
text: Shared.Weather.status === "error" ? "N/A"
: Shared.Weather.status === "loading" ? "…"
: Shared.Weather.temp
color: Shared.Weather.status === "error" ? Shared.Theme.overlay0
: Shared.Weather.status === "stale" ? Shared.Theme.warning
: Shared.Theme.peach
color: root.severityColor
font.pixelSize: Shared.Theme.fontSmall
font.family: Shared.Theme.fontFamily
font.bold: true
dot_config/quickshell/bar/Workspaces.qml
+1 -1
View File
@@ -102,7 +102,7 @@ Item {
width: root.cellSize
height: root.cellSize
radius: Shared.Theme.radiusSmall
color: Shared.Theme.red
color: Shared.Theme.focus
Behavior on y {
NumberAnimation {
dot_config/quickshell/bar/popouts/SystemPopout.qml
+3 -3
View File
@@ -542,7 +542,7 @@ Item {
model: [
{ name: "power-saver", icon: "\u{f19be}", color: Shared.Theme.green },
{ name: "balanced", icon: "\u{f0a01}", color: Shared.Theme.blue },
{ name: "performance", icon: "\u{f1b4b}", color: Shared.Theme.peach }
{ name: "performance", icon: "\u{f1b4b}", color: Shared.Theme.yellow }
]
Rectangle {
@@ -610,8 +610,8 @@ Item {
HoldAction {
icon: "\u{f0709}"
label: "Reboot"
iconColor: Shared.Theme.peach
holdColor: Shared.Theme.peach
iconColor: Shared.Theme.yellow
holdColor: Shared.Theme.yellow
onConfirmed: { Shared.PopoutState.close(); rebootProc.running = true; }
}
dot_config/quickshell/bar/popouts/WeatherPopout.qml
+18 -6
View File
@@ -9,6 +9,18 @@ Item {
implicitWidth: Shared.Theme.popoutWidth
implicitHeight: col.implicitHeight + Shared.Theme.popoutPadding * 2
// Current condition severity → info cyan / warning amber / danger red.
readonly property color severityColor: Shared.Weather.severity === "danger" ? Shared.Theme.danger
: Shared.Weather.severity === "warning" ? Shared.Theme.warning
: Shared.Theme.sky
function severityColorFor(code) {
const s = Shared.Weather.weatherSeverity(code);
return s === "danger" ? Shared.Theme.danger
: s === "warning" ? Shared.Theme.warning
: Shared.Theme.sky;
}
PopoutBackground { anchors.fill: parent }
MouseArea { anchors.fill: parent }
@@ -34,13 +46,13 @@ Item {
}
Text {
text: Shared.Weather.icon
color: Shared.Theme.peach
color: root.severityColor
font.pixelSize: 24
font.family: Shared.Theme.iconFont
}
Text {
text: Shared.Weather.temp
color: Shared.Theme.peach
color: root.severityColor
font.pixelSize: 18
font.family: Shared.Theme.fontFamily
font.bold: true
@@ -108,13 +120,13 @@ Item {
}
Text {
text: Shared.Weather.weatherIcon(modelData.code)
color: Shared.Theme.peach
color: root.severityColorFor(modelData.code)
font.pixelSize: 14
font.family: Shared.Theme.iconFont
}
Text {
text: modelData.desc
color: Shared.Theme.surface2
color: Shared.Theme.overlay0
font.pixelSize: Shared.Theme.fontSmall
font.family: Shared.Theme.fontFamily
Layout.fillWidth: true
@@ -122,7 +134,7 @@ Item {
}
Text {
text: modelData.low + "°"
color: Shared.Theme.sky
color: Shared.Theme.subtext0
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
horizontalAlignment: Text.AlignRight
@@ -130,7 +142,7 @@ Item {
}
Text {
text: modelData.high + "°"
color: Shared.Theme.peach
color: Shared.Theme.text
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
font.bold: true
dot_config/quickshell/lock/IdleScreen.qml
+3 -3
View File
@@ -45,7 +45,7 @@ Scope {
// Full black backdrop
Rectangle {
anchors.fill: parent
color: "#050505"
color: Shared.Theme.base
ColumnLayout {
anchors.centerIn: parent
@@ -56,7 +56,7 @@ Scope {
id: clockText
Layout.alignment: Qt.AlignHCenter
text: Qt.formatDateTime(new Date(), Shared.Config.clockSecondsFormat)
color: "#00eaff"
color: Shared.Theme.sky
font.pixelSize: 96
font.family: Shared.Theme.fontFamily
font.weight: Font.Light
@@ -75,7 +75,7 @@ Scope {
Text {
Layout.alignment: Qt.AlignHCenter
text: Qt.formatDateTime(new Date(), "dddd, d MMMM")
color: "#404040"
color: Shared.Theme.overlay0
font.pixelSize: 18
font.family: Shared.Theme.fontFamily
font.letterSpacing: 2
dot_config/quickshell/shared/Theme.qml
+40 -40
View File
@@ -7,42 +7,42 @@ Singleton {
// ─── Apex palettes ───────────────────────
readonly property var palettes: ({
neon: {
// Backgrounds
base: "#050505", mantle: "#0a0a0a", crust: "#000000",
surface0: "#141414", surface1: "#1e1e1e", surface2: "#262626",
overlay0: "#404040", overlay1: "#555555",
// Text
text: "#ededed", subtext0: "#b0b0b0", subtext1: "#d0d0d0",
// Accent colors — apex-neon palette
lavender: "#9d00ff", // sacred purple
mauve: "#9d00ff", // sacred purple
pink: "#ff0044", // razor red
red: "#ff0044", // razor red
peach: "#ff8899", // alert salmon
yellow: "#ffb700", // amber warning
green: "#00ff99", // toxic green
teal: "#00ff99", // toxic green
blue: "#00eaff", // tech cyan
sky: "#00eaff" // tech cyan
// Backgrounds — v2 cool-tinted ground (Void→Stealth)
base: "#070709", mantle: "#101218", crust: "#000000",
surface0: "#181b22", surface1: "#262a34", surface2: "#383d49",
overlay0: "#8b909c", overlay1: "#5a606c",
// Text — Stark, not pure white
text: "#e6e8ec", subtext0: "#aab0bc", subtext1: "#cdd4e3",
// Accent colors — apex-neon v2 spine
lavender: "#9d00ff", // special / root violet
mauve: "#9d00ff", // special / root violet
focus: "#d68fff", // attention — selection / "you are here" crosshair
pink: "#ff0044", // danger red
red: "#ff0044", // danger red
yellow: "#ffb700", // warning amber
green: "#00ff99", // success green
teal: "#00ff99", // success green
blue: "#5b8cff", // real blue — accent / active-neutral
sky: "#00eaff" // info cyan
},
aeon: {
// Backgrounds
base: "#f5f5f5", mantle: "#e8e8e8", crust: "#d0d0d0",
surface0: "#e0e0e0", surface1: "#d4d4d4", surface2: "#c8c8c8",
overlay0: "#737373", overlay1: "#555555",
// Backgrounds — v2 light ground
base: "#f1f3f7", mantle: "#e7eaf0", crust: "#ffffff",
surface0: "#e7eaf0", surface1: "#dde1ea", surface2: "#c8cdd8",
overlay0: "#6a7080", overlay1: "#8a909c",
// Text
text: "#0a0a0a", subtext0: "#444444", subtext1: "#333333",
// Accent colors — apex-aeon palette
lavender: "#7a3cff", // indigo purple
mauve: "#7a3cff", // indigo purple
pink: "#ff0044", // razor red
red: "#ff0044", // razor red
peach: "#ff4d6d", // rose error
yellow: "#d18f00", // dark amber
green: "#00b377", // forest green
teal: "#00b377", // forest green
blue: "#007a88", // deep teal
sky: "#007a88" // deep teal
text: "#16181d", subtext0: "#3a3f4a", subtext1: "#2a2e38",
// Accent colors — apex-aeon v2 spine
lavender: "#6a1fb8", // special / root violet
mauve: "#6a1fb8", // special / root violet
focus: "#7c2fd6", // attention — selection / "you are here" crosshair
pink: "#c8003a", // danger red
red: "#c8003a", // danger red
yellow: "#a86b00", // warning amber
green: "#00875a", // success green
teal: "#00875a", // success green
blue: "#2148c0", // real blue — accent / active-neutral
sky: "#0080a6" // info cyan
}
})
@@ -61,9 +61,9 @@ Singleton {
readonly property color subtext1: p.subtext1
readonly property color lavender: p.lavender
readonly property color mauve: p.mauve
readonly property color focus: p.focus
readonly property color pink: p.pink
readonly property color red: p.red
readonly property color peach: p.peach
readonly property color yellow: p.yellow
readonly property color green: p.green
readonly property color teal: p.teal
@@ -71,12 +71,12 @@ Singleton {
readonly property color sky: p.sky
// ─── Semantic aliases ────────────────────
readonly property color accent: blue // tech cyan / deep teal
readonly property color success: green // toxic / forest
readonly property color warning: yellow // amber
readonly property color danger: red // razor red
readonly property color info: sky // cyan / teal
readonly property color muted: overlay0 // dim grey
readonly property color accent: blue // real blue — active-neutral
readonly property color success: green // success green
readonly property color warning: yellow // warning amber
readonly property color danger: red // danger red
readonly property color info: sky // info cyan
readonly property color muted: overlay0 // muted grey
// ─── Opacity tokens ──────────────────────
readonly property real opacitySubtle: 0.08 // borders, faint dividers
dot_config/quickshell/shared/Weather.qml
+14 -1
View File
@@ -17,7 +17,19 @@ Singleton {
property string humidity: "--"
property string wind: "--"
property var forecast: []
property string status: "loading" // "loading", "ok", "error"
property string status: "loading" // "loading", "ok", "error", "stale"
property string severity: "normal" // "normal", "warning", "danger"
// Map a WWO weatherCode to a condition severity tier.
// danger → thunder / blizzard / torrential; warning → heavy precip,
// sleet/freezing, heavy snow showers, fog; normal → everything calm.
function weatherSeverity(code) {
code = parseInt(code);
if ([200, 386, 389, 392, 395, 227, 230, 308].includes(code)) return "danger";
if ([302, 305, 356, 359, 281, 284, 311, 314, 317, 320, 362, 365,
374, 377, 335, 338, 371, 143, 248, 260].includes(code)) return "warning";
return "normal";
}
function weatherIcon(code) {
code = parseInt(code);
@@ -51,6 +63,7 @@ Singleton {
root.description = cur.weatherDesc[0].value;
root.location = data.nearest_area[0].areaName[0].value;
root.icon = root.weatherIcon(cur.weatherCode);
root.severity = root.weatherSeverity(cur.weatherCode);
let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let fc = [];