refactor(client): put the modal dialog buttons on tokens, readably (UI/UX v3 G11 follow-up) (#71)

Third and last code half of the #62 follow-up: the close-window dialog's
Kill/Cancel buttons, and the consent dialog's selected-button fill.

The literals were `[0.75, 0.25, 0.25]` / `[0.95, 0.40, 0.40]` for Kill at
rest and selected, `[0.95, 0.85, 0.40]` for a selected Cancel, and
`[0.10, 0.10, 0.10]` for the label on any selected button (in two
dialogs). All now derive from `semantic_error` / `semantic_warning` via
two new helpers, `util::danger_fill` and `util::caution_fill`.

Kill deliberately does *not* reuse #70's `danger_button_colors`. That
helper answers "is this button focused", stepping from a barely-tinted
rest state to a mid blend. Kill has to read as the destructive choice
*before* it is selected — it sits next to Cancel — so it steps from the
mid blend to a strong one instead. Sharing the blend and not the
focused/unfocused rule is what keeps both readings intact.

The labels are the substance of this change. Selected-button labels were
a fixed near-black, which is wrong on any dark fill; they now come from
`on_surface_text`, chosen against the fill. Measuring that across the
nine built-in schemes turned up something a fixed blend strength cannot
fix: at 0.85 the error hue lands at a middling luminance on Nord
(4.42:1) and the warning hue does the same on Solarized (4.37:1) —
luminances where *neither* extreme has anything to contrast with. Used
raw, `semantic_warning` fails the same way, which is why `caution_fill`
blends rather than passing the token through.

`semantic_fill` therefore walks the blend back toward `surface_1` until
the label clears `MIN_TEXT_CONTRAST`, the same shape as
`row::ensure_readable`. It terminates because `surface_1` derives from
the scheme background — the end of the range a label can always be read
against. Some schemes get a slightly quieter fill than asked for; an
unreadable label on a destructive button is the worse trade.

The consent dialog's 3 px top stripe and its title keep the raw warning
hue: a line and text, not a fill.

Two new tests. One pins every fill/label pair the dialogs paint across
all nine schemes at 4.5:1 — it is the test that forced `caution_fill` to
exist, and it fails on `Nord` if the adaptive step is removed. The other
pins that a stronger blend always reads as redder, since that ordering
is what carries "dangerous" and "selected".

On-device verification: not run. Joins the accepted-unverified backlog.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Happy <yesreply@happy.engineering>

Author: 3 people

nexterm-client-gpu/src/renderer/overlay/dialog.rs

@@ -9,7 +9,8 @@ use crate::vertex_util::{add_px_rect, add_string_verts, visual_width};
 
 use super::super::WgpuState;
 use super::util::{
-    SCRIM_ALPHA_FLOOR, draw_overlay_panel, pane_id_for, preview_text, scrim_color, wrap_text,
+    SCRIM_ALPHA_FLOOR, caution_fill, danger_fill, draw_overlay_panel, pane_id_for, preview_text,
+    scrim_color, wrap_text,
 };
 
 impl WgpuState {
@@ -453,14 +454,24 @@ impl WgpuState {
         for (i, btn) in buttons.iter().enumerate() {
             let bw = visual_width(btn) as f32 * cell_w + cell_w * 1.5;
             let is_selected = dialog.selected == i;
+            // UI/UX v3 (G11): the selected fill is the warning hue blended into
+            // the panel surface, not the raw token. Used raw it sits at a
+            // middling luminance on some schemes (Solarized: neither a dark nor
+            // a light label clears 4.5:1 against it); blending gives the label
+            // an extreme to contrast against. The 3 px stripe and the title
+            // above keep the raw hue — they are a line and text, not a fill.
             let bg = if is_selected {
-                warn_color
+                caution_fill(tokens, 0.85)
             } else {
                 tokens.surface_3
             };
             add_px_rect(bx, btn_y, bw, cell_h * 1.4, bg, sw, sh, bg_verts, bg_idx);
+            // UI/UX v3 (G11): the selected button is filled with the warning
+            // hue, so its label is chosen against *that* fill. `text_on_accent`
+            // would answer for `accent_primary` and could put a light label on
+            // a pale yellow button.
             let fg = if is_selected {
-                [0.10, 0.10, 0.10, 1.0]
+                crate::color_util::on_surface_text(bg)
             } else {
                 tokens.text_primary
             };
@@ -590,8 +601,16 @@ impl WgpuState {
         }
 
         // Button row: Kill (left, selected_button == 0) + Cancel (right, selected_button == 1)
+        //
+        // UI/UX v3 (G11): both buttons' fills now come from tokens. Kill keeps
+        // its "red even when not selected" reading — it has to be identifiable
+        // as the destructive choice before the user moves onto it — so it steps
+        // between two `danger_fill` strengths rather than reusing the settings
+        // dialogs' focused/unfocused pair. Cancel keeps its warm selected fill
+        // (the deliberate "you are on the safe side" signal that the consent
+        // dialog already spells with `semantic_warning`).
         let buttons: [(&str, [f32; 4]); 2] = [
-            (&dialog.kill_label, [0.75, 0.25, 0.25, 1.0]),
+            (&dialog.kill_label, danger_fill(tokens, 0.55)),
             (&dialog.cancel_label, tokens.surface_3),
         ];
         let btn_y = py + ph - cell_h * 2.6;
@@ -606,17 +625,20 @@ impl WgpuState {
             // Selected: fill with the accent color; unselected: base color
             let bg = if is_selected {
                 if i == 0 {
-                    [0.95, 0.40, 0.40, 1.0] // Kill selected: vivid red
+                    danger_fill(tokens, 0.85) // Kill selected: strongest red
                 } else {
-                    [0.95, 0.85, 0.40, 1.0] // Cancel selected: yellow (safe side)
+                    caution_fill(tokens, 0.85) // Cancel selected: warm (safe side)
                 }
             } else {
                 *base_bg
             };
             let bw = btn_widths[i];
             add_px_rect(bx, btn_y, bw, cell_h * 1.4, bg, sw, sh, bg_verts, bg_idx);
-            let fg = if is_selected {
-                [0.10, 0.10, 0.10, 1.0]
+            // A semantic fill (either Kill state, or a selected Cancel) needs
+            // its label chosen against that fill; a plain surface fill reads
+            // best in the scheme's own foreground.
+            let fg = if is_selected || i == 0 {
+                crate::color_util::on_surface_text(bg)
             } else {
                 tokens.text_primary
             };

nexterm-client-gpu/src/renderer/overlay/settings/row.rs

@@ -26,7 +26,7 @@ use crate::font::FontManager;
 use crate::glyph_atlas::{GlyphAtlas, TextVertex};
 use crate::vertex_util::{add_string_verts, truncate_to_width};
 
-use super::super::util::wrap_text;
+use super::super::util::{danger_fill, wrap_text};
 
 /// WCAG 2.x contrast floor used throughout the settings panel (project
 /// accessibility guideline: see `CLAUDE.md` "UI/UX Guidelines").
@@ -63,9 +63,9 @@ pub(in crate::renderer) fn ensure_readable(
 /// different resting treatments (a dark red against `surface_1`). Both now
 /// derive from `semantic_error`.
 ///
-/// The error hue is blended *into* the panel surface rather than used raw: a
-/// saturated ANSI red leaves no headroom for a readable label, which is
-/// precisely why both call sites had darkened it by hand.
+/// The fills come from [`danger_fill`], which is shared with the close-window
+/// dialog: this is the focused/unfocused pair a *settings* delete button
+/// wants, where red means "focused" rather than "dangerous".
 ///
 /// The two states take their label from different places, and the reason is
 /// measurable rather than aesthetic. The focused fill is red enough that the
@@ -78,23 +78,11 @@ pub(in crate::renderer) fn danger_button_colors(
     tokens: &nexterm_config::DesignTokens,
     focused: bool,
 ) -> ([f32; 4], [f32; 4]) {
-    let tint = |amount: f32| -> [f32; 4] {
-        let base = [
-            tokens.surface_1[0],
-            tokens.surface_1[1],
-            tokens.surface_1[2],
-        ];
-        let rgb = crate::color_util::composite_over(
-            crate::color_util::with_alpha(tokens.semantic_error, amount),
-            base,
-        );
-        [rgb[0], rgb[1], rgb[2], 1.0]
-    };
     if focused {
-        let bg = tint(0.55);
+        let bg = danger_fill(tokens, 0.55);
         (bg, crate::color_util::on_surface_text(bg))
     } else {
-        let bg = tint(0.18);
+        let bg = danger_fill(tokens, 0.18);
         (
             bg,
             ensure_readable(tokens.text_primary, bg, MIN_TEXT_CONTRAST),

nexterm-client-gpu/src/renderer/overlay/util.rs

@@ -1,5 +1,7 @@
 //! Shared helpers used by overlay rendering.
 
+use super::settings::row::MIN_TEXT_CONTRAST;
+
 /// Extract the requesting pane ID from a consent-dialog kind
 pub(super) fn pane_id_for(kind: &crate::state::ConsentKind) -> Option<u32> {
     use crate::state::ConsentKind;
@@ -172,6 +174,78 @@ pub(super) fn scrim_color(tokens: &nexterm_config::DesignTokens, alpha: f32) ->
     crate::color_util::with_alpha(tokens.surface_0, alpha)
 }
 
+/// Opaque fill for a destructive action: `semantic_error` blended into the
+/// panel's own `surface_1` at `strength`.
+///
+/// The raw ANSI red is deliberately never used as a fill — it leaves no
+/// headroom for a readable label, which is why every call site had been
+/// darkening it by hand before UI/UX v3 (G11 follow-up).
+///
+/// `strength` is what separates the two questions a destructive button
+/// answers. The settings delete dialogs only turn red once focused, so they
+/// step from a barely-tinted rest state to a mid blend. The close-window
+/// dialog's Kill button is red at all times — it sits next to Cancel and must
+/// read as the dangerous one before it is ever selected — so it steps from
+/// that same mid blend to a strong one. Callers pass the pair that carries
+/// their own semantics rather than sharing one focused/unfocused rule.
+pub(super) fn danger_fill(tokens: &nexterm_config::DesignTokens, strength: f32) -> [f32; 4] {
+    semantic_fill(tokens, tokens.semantic_error, strength)
+}
+
+/// Opaque fill for the *safe* side of a destructive choice, and for a
+/// selected button in the consent dialog: `semantic_warning` blended into
+/// `surface_1` the same way [`danger_fill`] blends the error hue.
+///
+/// Blending matters here for a measurable reason, not for symmetry. Used raw,
+/// `semantic_warning` sits at a middling luminance on some schemes — on
+/// Solarized neither a near-black nor a near-white label clears 4.5:1 against
+/// it (the best either extreme manages is 4.37:1). Blending the hue into the
+/// panel surface pulls the fill towards that surface's own end of the range,
+/// which gives the label an extreme to contrast against again.
+pub(super) fn caution_fill(tokens: &nexterm_config::DesignTokens, strength: f32) -> [f32; 4] {
+    semantic_fill(tokens, tokens.semantic_warning, strength)
+}
+
+/// Blend a semantic hue into the panel's `surface_1`, walking the blend back
+/// toward the surface until the label [`crate::color_util::on_surface_text`]
+/// would pick clears [`MIN_TEXT_CONTRAST`] against it.
+///
+/// A fixed strength cannot serve all nine built-in schemes. At 0.85 the error
+/// hue lands at a middling luminance on Nord (4.42:1) and the warning hue does
+/// the same on Solarized (4.37:1) — luminances where neither a near-black nor
+/// a near-white label has anything to contrast with. Stepping back toward the
+/// panel surface always terminates: `surface_1` is derived from the scheme's
+/// background, which is the end of the range a label can always be read
+/// against.
+///
+/// The consequence is that some schemes get a slightly quieter fill than the
+/// caller asked for. That is the intended trade — an unreadable label on a
+/// destructive button is worse than a less saturated one.
+fn semantic_fill(tokens: &nexterm_config::DesignTokens, hue: [f32; 4], strength: f32) -> [f32; 4] {
+    let base = [
+        tokens.surface_1[0],
+        tokens.surface_1[1],
+        tokens.surface_1[2],
+    ];
+    let blend = |s: f32| -> [f32; 4] {
+        let rgb = crate::color_util::composite_over(crate::color_util::with_alpha(hue, s), base);
+        [rgb[0], rgb[1], rgb[2], 1.0]
+    };
+    let mut s = strength;
+    loop {
+        let fill = blend(s);
+        let label = crate::color_util::on_surface_text(fill);
+        let cr = crate::color_util::contrast_ratio(
+            [label[0], label[1], label[2]],
+            [fill[0], fill[1], fill[2]],
+        );
+        if cr >= MIN_TEXT_CONTRAST || s <= 0.05 {
+            return fill;
+        }
+        s -= 0.05;
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -225,6 +299,77 @@ mod tests {
         assert!((scrim[3] - SCRIM_ALPHA_FLOOR).abs() < 1e-6);
     }
 
+    /// Every fill the modal dialogs paint a label onto must leave that label
+    /// above the project's 4.5:1 floor, on every built-in scheme.
+    ///
+    /// This is the test that forced `caution_fill` to exist: used raw,
+    /// `semantic_warning` tops out at 4.37:1 on Solarized because neither
+    /// extreme contrasts with a middling luminance. Measured after blending —
+    /// worst cases: 4.63:1 (Gruvbox, Kill selected), 4.83:1 (Dark, Kill
+    /// selected), 4.87:1 (Solarized, Cancel selected).
+    #[test]
+    fn dialog_button_labels_clear_the_contrast_floor() {
+        // Mirrors `row::MIN_TEXT_CONTRAST`, which is scoped to the settings
+        // panel's module tree.
+        const FLOOR: f32 = 4.5;
+        for scheme in [
+            nexterm_config::BuiltinScheme::Dark,
+            nexterm_config::BuiltinScheme::Light,
+            nexterm_config::BuiltinScheme::Gruvbox,
+            nexterm_config::BuiltinScheme::Solarized,
+            nexterm_config::BuiltinScheme::Catppuccin,
+            nexterm_config::BuiltinScheme::Dracula,
+            nexterm_config::BuiltinScheme::Nord,
+            nexterm_config::BuiltinScheme::OneDark,
+            nexterm_config::BuiltinScheme::TokyoNight,
+        ] {
+            let tokens = tokens_for(scheme);
+            let fills = [
+                ("kill resting", danger_fill(&tokens, 0.55)),
+                ("kill selected", danger_fill(&tokens, 0.85)),
+                ("caution selected", caution_fill(&tokens, 0.85)),
+            ];
+            for (name, bg) in fills {
+                let fg = crate::color_util::on_surface_text(bg);
+                let cr =
+                    crate::color_util::contrast_ratio([fg[0], fg[1], fg[2]], [bg[0], bg[1], bg[2]]);
+                assert!(
+                    cr >= FLOOR,
+                    "{scheme:?} {name}: label only reached {cr} against {bg:?}"
+                );
+            }
+        }
+    }
+
+    /// UI/UX v3 (G11 follow-up): every destructive fill across the dialogs is
+    /// one hue at a different strength, so a stronger blend must always read
+    /// as redder. That ordering is what carries both "this is the dangerous
+    /// button" and "and it is the one currently selected"; if it inverted on
+    /// some scheme, the close-window dialog would highlight Kill by making it
+    /// *less* red.
+    #[test]
+    fn danger_fill_gets_redder_with_strength() {
+        let redness = |c: [f32; 4]| c[0] - (c[1] + c[2]) / 2.0;
+        for scheme in [
+            nexterm_config::BuiltinScheme::Dark,
+            nexterm_config::BuiltinScheme::Light,
+            nexterm_config::BuiltinScheme::Gruvbox,
+            nexterm_config::BuiltinScheme::Solarized,
+        ] {
+            let tokens = tokens_for(scheme);
+            let weak = danger_fill(&tokens, 0.18);
+            let mid = danger_fill(&tokens, 0.55);
+            let strong = danger_fill(&tokens, 0.85);
+            assert!(
+                redness(strong) > redness(mid) && redness(mid) > redness(weak),
+                "{scheme:?}: strength does not order by redness ({:?} / {:?} / {:?})",
+                redness(weak),
+                redness(mid),
+                redness(strong)
+            );
+        }
+    }
+
     /// Regression guard against a hard-coded black coming back: a light scheme
     /// and a dark one must veil in different colours, the way the settings
     /// panel's scrim already did before the other call sites were migrated.