From 2fcbc6865ebe3973994e6f935c518f60cebe4e26 Mon Sep 17 00:00:00 2001 From: rope Date: Thu, 11 Jun 2026 14:57:04 +0100 Subject: [PATCH] quickshell: 2px borders to match hyprland window borders Co-Authored-By: Claude Fable 5 --- settings/quickshell.nix | 49 +++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/settings/quickshell.nix b/settings/quickshell.nix index 953de55..2c990cc 100644 --- a/settings/quickshell.nix +++ b/settings/quickshell.nix @@ -89,6 +89,8 @@ in readonly property color barBg: "#B3${c.base00}" readonly property color toastBg: "#E6${c.base00}" readonly property string fontFamily: "${monoFont}" + // Matches hyprland general.border_size (col.inactive_border = base03) + readonly property int borderWidth: 2 } ''; }; @@ -469,7 +471,7 @@ in id: barBorderLeft x: 0; y: 30 width: bar.hasGap ? bar.gapLeft : bar.width - height: 1 + height: Theme.borderWidth color: Theme.base03 } @@ -480,7 +482,7 @@ in x: bar.gapRight y: 30 width: bar.width - x - height: 1 + height: Theme.borderWidth color: Theme.base03 } @@ -1068,7 +1070,7 @@ in ctx.closePath(); ctx.fill(); // Border stroke along the curve ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = Theme.borderWidth; ctx.beginPath(); ctx.arc(0, 8, 8, 0, -Math.PI / 2, true); ctx.stroke(); @@ -1097,7 +1099,7 @@ in ctx.closePath(); ctx.fill(); // Border stroke along the curve ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = Theme.borderWidth; ctx.beginPath(); ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true); ctx.stroke(); @@ -1126,26 +1128,28 @@ in onPaint: { var ctx = getContext("2d"); var w = width, h = height, r = 8; + // o centers the stroke so its outer edge lands on the rect edge + var b = Theme.borderWidth, o = b / 2; ctx.clearRect(0, 0, w, h); if (h < 1) return; ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = b; ctx.beginPath(); // Start below the top ear, go down left side - ctx.moveTo(0.5, r); - ctx.lineTo(0.5, h - r); + ctx.moveTo(o, r); + ctx.lineTo(o, h - r); // Bottom-left curve - ctx.arc(r + 0.5, h - r - 0.5, r, Math.PI, Math.PI / 2, true); + ctx.arc(r + o, h - r - o, r, Math.PI, Math.PI / 2, true); // Bottom edge if (dropdown.alignRight) { // Stop 8px before right edge — bottom-right ear continues - ctx.lineTo(w - r, h - 0.5); + ctx.lineTo(w - r, h - o); } else { - ctx.lineTo(w - r - 0.5, h - 0.5); + ctx.lineTo(w - r - o, h - o); // Bottom-right curve - ctx.arc(w - r - 0.5, h - r - 0.5, r, Math.PI / 2, 0, true); + ctx.arc(w - r - o, h - r - o, r, Math.PI / 2, 0, true); // Right side up (stop at ear height) - ctx.lineTo(w - 0.5, r); + ctx.lineTo(w - o, r); } ctx.stroke(); } @@ -1186,7 +1190,7 @@ in ctx.fill(); // Border stroke along the curve ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = Theme.borderWidth; ctx.beginPath(); ctx.arc(0, 8, 8, 0, -Math.PI / 2, true); ctx.stroke(); @@ -2352,7 +2356,7 @@ in ctx.arc(0, 8, 8, 0, -Math.PI / 2, true); ctx.closePath(); ctx.fill(); ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = Theme.borderWidth; ctx.beginPath(); ctx.arc(0, 8, 8, 0, -Math.PI / 2, true); ctx.stroke(); @@ -2381,7 +2385,7 @@ in ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true); ctx.closePath(); ctx.fill(); ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = Theme.borderWidth; ctx.beginPath(); ctx.arc(8, 8, 8, -Math.PI / 2, Math.PI, true); ctx.stroke(); @@ -2407,17 +2411,18 @@ in onPaint: { var ctx = getContext("2d"); var w = width, h = height, r = 8; + var b = Theme.borderWidth, o = b / 2; ctx.clearRect(0, 0, w, h); if (h < 1) return; ctx.strokeStyle = Theme.base03; - ctx.lineWidth = 1; + ctx.lineWidth = b; ctx.beginPath(); - ctx.moveTo(0.5, r); - ctx.lineTo(0.5, h - r); - ctx.arc(r + 0.5, h - r - 0.5, r, Math.PI, Math.PI / 2, true); - ctx.lineTo(w - r - 0.5, h - 0.5); - ctx.arc(w - r - 0.5, h - r - 0.5, r, Math.PI / 2, 0, true); - ctx.lineTo(w - 0.5, r); + ctx.moveTo(o, r); + ctx.lineTo(o, h - r); + ctx.arc(r + o, h - r - o, r, Math.PI, Math.PI / 2, true); + ctx.lineTo(w - r - o, h - o); + ctx.arc(w - r - o, h - r - o, r, Math.PI / 2, 0, true); + ctx.lineTo(w - o, r); ctx.stroke(); } onWidthChanged: requestPaint()