From 1e0779888ead4c41cdf178fdb21f9e8eb4f54e76 Mon Sep 17 00:00:00 2001 From: DeyangChan Date: Wed, 5 Aug 2026 00:11:34 +0800 Subject: [PATCH] The send button is readable when the workspace is dark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The composer's send button sets its background to --ink and its label to a fixed white. --ink is the text colour, so under a dark theme it is near-white (#f1f2f4) and the label disappeared into the button: white on white, 1.12:1. The button rendered as a blank box with no word on it, and the only way to know it was Send was to have used it in light mode first. The label now follows --surface, which is the pairing the rest of the interface already uses for anything sitting on --ink — the shell's dark banner and its update line both do. That gives 15.70:1 in dark, and light mode is untouched because --surface is #ffffff there, exactly what was hardcoded. Every other fixed white label in the pages sits on --brand, --mk, --note or --keep, which stay mid-tone in both themes. --ink was the only token that inverts, so this was the only place the fault could occur. Co-Authored-By: Claude Opus 5 (1M context) --- CHANGELOG.md | 9 +++++++++ plugins/vstack/.claude-plugin/plugin.json | 2 +- plugins/vstack/.codex-plugin/plugin.json | 2 +- plugins/vstack/skills/review/assets/workspace.html | 4 +++- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d26e2e9..17f52f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,15 @@ The version in `plugins/vstack/.claude-plugin/plugin.json` is what your host compares against to decide an update is available. See the release checklist in [`CONTRIBUTING.md`](CONTRIBUTING.md). +## 4.8.1 — 2026-08-05 + +- **The comment composer's send button is readable in dark mode.** Its label was + fixed to white while its background follows `--ink`, which is the text colour + and therefore near-white under a dark theme. The button rendered as a blank + white box, at a contrast of 1.12:1. The label now follows `--surface`, the + pairing the rest of the interface already uses, giving 15.70:1 in dark and + leaving light mode exactly as it was. + ## 4.8.0 — 2026-08-04 - **The plugin declares a version.** Until now it shipped without one, so every diff --git a/plugins/vstack/.claude-plugin/plugin.json b/plugins/vstack/.claude-plugin/plugin.json index b661c82..6c429a9 100644 --- a/plugins/vstack/.claude-plugin/plugin.json +++ b/plugins/vstack/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "vstack", "displayName": "Visual Stack", - "version": "4.8.0", + "version": "4.8.1", "description": "Stop prompting. Start pointing. Visual Stack adds a Figma-like feedback layer to Claude Code. Create a new screen from a prompt, screenshot, reference site, or design system, or open an app you already have running. Click any element and leave feedback exactly where the problem is hiding, and Claude publishes the next revision into the same workspace. Compare revisions on a timeline, preview desktop, tablet, and mobile layouts, and keep every comment attached to the element, route, and version it refers to. Wireframes are self-contained HTML and review state stays in your project.", "author": { "name": "Cavalry Collective", diff --git a/plugins/vstack/.codex-plugin/plugin.json b/plugins/vstack/.codex-plugin/plugin.json index be21990..d6dd387 100644 --- a/plugins/vstack/.codex-plugin/plugin.json +++ b/plugins/vstack/.codex-plugin/plugin.json @@ -1,6 +1,6 @@ { "name": "vstack", - "version": "4.8.0", + "version": "4.8.1", "description": "Stop prompting. Start pointing. Visual Stack adds a Figma-like feedback layer to Codex. Create a new screen from a prompt, screenshot, reference site, or design system, or open an app you already have running. Click any element and leave feedback exactly where the problem is hiding, and Codex publishes the next revision into the same workspace. Compare revisions on a timeline, preview desktop, tablet, and mobile layouts, and keep every comment attached to the element, route, and version it refers to. Wireframes are self-contained HTML and review state stays in your project.", "author": { "name": "Cavalry Collective", diff --git a/plugins/vstack/skills/review/assets/workspace.html b/plugins/vstack/skills/review/assets/workspace.html index 8966dff..aa66cb6 100644 --- a/plugins/vstack/skills/review/assets/workspace.html +++ b/plugins/vstack/skills/review/assets/workspace.html @@ -562,7 +562,9 @@ #composer .cfoot{display:flex;align-items:center;gap:5px;padding:8px 9px;margin-top:8px; border-top:1px solid var(--line);background:var(--paper)} #composer .cfoot .hint{flex:1;font-size:11px;color:var(--ink-3)} -#composer .csave{height:26px;padding:0 11px;border-radius:6px;background:var(--ink);color:#fff; +/* --surface, not white: --ink is the text colour, so it inverts with the theme + and a fixed white label disappears into the button in dark mode. */ +#composer .csave{height:26px;padding:0 11px;border-radius:6px;background:var(--ink);color:var(--surface); font-weight:600;font-size:11.5px;flex:none} #composer .csave:hover{filter:brightness(1.25)} #composer .csave .kbd{font:500 9.5px/1 var(--mono);opacity:.6;margin-left:4px}