Bring on gradient borders

This commit is contained in:
Ryan Hughes
2026-06-02 11:17:13 -04:00
parent 30bafe7bb0
commit 98ba4a9697
48 changed files with 1323 additions and 328 deletions
+4
View File
@@ -249,8 +249,10 @@ EOF
cat >"$USER_THEMED/gradient-test.txt.tpl" <<'EOF'
hypr={{ hypr_gradient hyprland_active_border accent }}
shell={{ gradient_start hyprland_active_border accent }}
shell-gradient={{ shell_gradient hyprland_active_border accent }}
fallback-hypr={{ hypr_gradient missing accent }}
fallback-shell={{ gradient_start missing accent }}
fallback-shell-gradient={{ shell_gradient missing accent }}
EOF
OMARCHY_PATH="$ROOT" HOME="$PI_TMPDIR" "$ROOT/bin/omarchy-theme-set-templates"
@@ -261,8 +263,10 @@ pass "theme template color mix helpers work"
grep -qx 'hypr={ colors = { "rgba(010203ee)", "rgba(040506ee)" }, angle = 45 }' "$NEXT_THEME/gradient-test.txt" || fail "theme template hypr_gradient helper works"
grep -qx 'shell=#010203' "$NEXT_THEME/gradient-test.txt" || fail "theme template gradient_start helper works"
grep -qx 'shell-gradient=rgba(010203ee) rgba(040506ee) 45deg' "$NEXT_THEME/gradient-test.txt" || fail "theme template shell_gradient helper works"
grep -qx 'fallback-hypr="#336699"' "$NEXT_THEME/gradient-test.txt" || fail "theme template hypr_gradient fallback works"
grep -qx 'fallback-shell=#336699' "$NEXT_THEME/gradient-test.txt" || fail "theme template gradient_start fallback works"
grep -qx 'fallback-shell-gradient=#336699' "$NEXT_THEME/gradient-test.txt" || fail "theme template shell_gradient fallback works"
pass "theme template gradient helpers work"
jq -e '.name == "omarchy-system" and .vars.panel == "#0f0f0f" and .vars.border == "#4d4d4d" and .colors.accent == "accent"' "$NEXT_THEME/pi.json" >/dev/null
+44
View File
@@ -0,0 +1,44 @@
#!/bin/bash
source "$(dirname "$0")/base-test.sh"
run_node_test <<'JS'
const fs = require('fs')
const vm = require('vm')
const source = fs.readFileSync(path.join(root, 'shell/Commons/BorderGeometry.js'), 'utf8').replace(/^\.pragma library\n/, '')
const geometry = {}
vm.createContext(geometry)
vm.runInContext(source, geometry)
assertDeepEqual(
geometry.parseWidthSpec('2 4 6 8', 1),
{ top: 2, right: 4, bottom: 6, left: 8 },
'border geometry parses four-sided widths'
)
assertDeepEqual(
geometry.parseWidthSpec('2 4', 1),
{ top: 2, right: 4, bottom: 2, left: 4 },
'border geometry parses CSS two-value widths'
)
const gradient = geometry.parseGradientSpec('rgba(010203ee) rgba(040506ee) 45deg', '#336699', 1)
assertEqual(gradient.colors[0], '#010203ee', 'border geometry parses first rgba gradient stop')
assertEqual(gradient.colors[1], '#040506ee', 'border geometry parses second rgba gradient stop')
assertEqual(gradient.angle, 45, 'border geometry parses gradient angle')
assert(gradient.enabled, 'border geometry marks multi-stop gradients enabled')
assertEqual(
geometry.canonicalColor('0xee33ccff', 1),
'#33ccffee',
'border geometry converts legacy ARGB color to QML RGBA hex'
)
const pathData = geometry.ringPath(100, 50, 10, { top: 4, right: 2, bottom: 8, left: 6 })
assert(pathData.includes('M 10 0'), 'border geometry emits outer rounded path')
assert(pathData.includes('M 10 4'), 'border geometry emits inset inner rounded path')
const endpoints = geometry.gradientEndpoints(100, 50, 0)
assertEqual(Math.round(endpoints.x1), 0, 'border geometry 0deg starts at left edge')
assertEqual(Math.round(endpoints.x2), 100, 'border geometry 0deg ends at right edge')
JS