From 000ff695606c0f307c40d826579c87f4e15099bc Mon Sep 17 00:00:00 2001 From: SirBlobby Date: Fri, 21 Aug 2026 14:59:31 -0400 Subject: [PATCH] Restyle the lock input to match the AGS widgets --- omarchy/README.md | 10 ++++++++++ omarchy/plugins/blob.lock/LockView.qml | 24 ++++++++++++++++++------ 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/omarchy/README.md b/omarchy/README.md index b849efa..267c0f9 100644 --- a/omarchy/README.md +++ b/omarchy/README.md @@ -106,6 +106,16 @@ down to whatever room is left above the field, so a wider or taller `screensaver.txt` cannot run off the screen, and an unreadable or missing file leaves the lock unbranded rather than broken. +The password field is restyled to match the AGS widgets: a 2px border and +square corners in place of the shell's 3px rounded outline, an +`alpha(background, 0.6)` fill matching `.qs-tile`, and the `.theme-chip` +accent treatment - a translucent accent border while the field is empty that +goes solid once there is something in it, with `urgent` on a failed attempt. +Those come from `Color.accent`, `Color.background`, and `Color.urgent`, so the +field still follows a theme change; only the geometry and the alphas are fixed, +exactly as they are in `ags/style.css`. The `[lock]` tokens in a theme's +`shell.toml` no longer reach the border or the fill. + Unlike the other clones this one is load-bearing for security. The lock is a `service` plugin, so it is enabled by its id appearing in `plugins[]` and the original is switched off through `disabledPlugins[]` - both are needed, because diff --git a/omarchy/plugins/blob.lock/LockView.qml b/omarchy/plugins/blob.lock/LockView.qml index dc75e14..63f604e 100644 --- a/omarchy/plugins/blob.lock/LockView.qml +++ b/omarchy/plugins/blob.lock/LockView.qml @@ -21,7 +21,10 @@ Item { readonly property string placeholderText: "Enter Password" readonly property int fieldWidth: 381 readonly property int fieldHeight: 67 - readonly property int outlineThickness: 3 + // AGS draws every surface with a 2px border and square corners; see the + // 2px/border-radius: 0 pairs throughout ags/style.css. + readonly property int outlineThickness: 2 + readonly property int fieldRadius: 0 readonly property int fieldFontSize: Math.round(Style.font.heading * 1.125) readonly property int passwordDotFontSize: Math.round(Style.font.heading * 1.33) readonly property int passwordDotLetterSpacing: Math.round(Style.font.heading * 0.19) @@ -42,9 +45,18 @@ Item { readonly property bool showPasswordCursor: inputEnabled && !authenticatingPassword && failureMessage.length === 0 readonly property bool errorState: failureMessage.length > 0 - readonly property var inputBorderSpec: errorState - ? Border.surfaceSpec("lock", "border-error", Color.lock.borderError, root.outlineThickness, "border-alpha") - : Border.surfaceSpec("lock", "border-active", Color.lock.borderActive, root.outlineThickness, "border-alpha") + // An empty field reads as resting and a filled one as active, which is the + // .theme-chip treatment in ags/style.css: a translucent accent border that + // goes solid once the tile is in use. The spec is built here rather than + // read from the [lock] theme tokens, since those carry the shell's own + // heavier look. Color.accent and Color.background still follow the theme, + // so this tracks a theme change exactly like the AGS widgets do. + readonly property bool inputActive: passwordText.length > 0 || authenticatingPassword + readonly property color inputBorderColor: errorState + ? Color.urgent + : (inputActive ? Color.accent : Util.alpha(Color.accent, 0.6)) + readonly property color inputBackground: Util.alpha(Color.background, 0.6) + readonly property var inputBorderSpec: Border.flat(root.inputBorderColor, root.outlineThickness) signal submitPassword(string password) signal passwordTextEdited(string password) @@ -155,9 +167,9 @@ Item { width: root.fieldWidth height: root.fieldHeight anchors.centerIn: parent - color: Color.lock.background + color: root.inputBackground borderSpec: root.inputBorderSpec - radius: Style.cornerRadius + radius: root.fieldRadius clip: true TextInput {