From b4ea70c7609f15d2d3608bc5af4de7efa3f5844a Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Thu, 2 Jul 2026 09:50:34 +0800 Subject: [PATCH] polish(ui): de-halo selection glows, neutral answer skeleton, verified gates - Retune --glow-primary/--glow-soft to a crisp Aegean ring + neutral shadow (no colored ambient halo) in light and dark, fixing the last glassy selection states (launcher tile, selected chips, viewer citation highlight). - Move the answer loading skeleton off the accent wash onto a neutral raised panel; step shimmer bones to --surface-inset for visibility on true white. - Record verification results in the redesign changelog: typecheck, eslint, vitest 688 passed/2 skipped, ui-smoke 29/29, ui-accessibility 2/2 (chromium). Presentation-only; no clinical logic touched. Co-Authored-By: Claude Opus 4.8 --- docs/redesign/05-changelog.md | 8 ++++++- src/app/globals.css | 13 ++++++----- .../clinical-dashboard/answer-status.tsx | 22 +++++++++---------- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/docs/redesign/05-changelog.md b/docs/redesign/05-changelog.md index 4d6ee42bb0..3b8a79f4f7 100644 --- a/docs/redesign/05-changelog.md +++ b/docs/redesign/05-changelog.md @@ -15,7 +15,13 @@ ### Verification -- `npm run typecheck` passes; dev server serves 200 with 0 console errors; light/dark desktop + light mobile screenshots confirm the direction; contrast spot-checks pass (Aegean-on-white ≈5.8:1, command ≈16:1, semantics ≥4.5:1). `npm run verify:ui`/`verify:release` not yet run in this pass. +- `npm run typecheck` and `npm run lint` pass; vitest 688 passed / 2 skipped; `tests/ui-smoke.spec.ts` 29/29 and `tests/ui-accessibility.spec.ts` 2/2 pass on Chromium; dev server serves 200 with 0 console errors; light/dark desktop + light mobile screenshots confirm the direction; contrast spot-checks pass (Aegean-on-white ≈5.8:1, command ≈16:1, semantics ≥4.5:1). `npm run verify:release` (full build + e2e + eval) not run. + +### Polish (follow-up pass) + +- **Glow tokens de-halo'd:** `--glow-primary`/`--glow-soft` retuned to a crisp accent ring + neutral shadow (no colored ambient halo) in both schemes — fixes the last glassy selection states (launcher active tile, selected chips, viewer citation highlight). +- **Answer skeleton neutralised:** loading panel moved off the accent wash onto neutral raised surface; shimmer bones stepped to `--surface-inset` so they stay visible on the true-white canvas. +- **Stale meta theme-color** fixed to `#ffffff` (was old blue-grey). ## June 23 process hardening pass diff --git a/src/app/globals.css b/src/app/globals.css index 16b5ec8a39..09b636237f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -188,10 +188,11 @@ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); - --glow-primary: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent), - 0 10px 28px color-mix(in srgb, var(--primary) 16%, transparent); - --glow-soft: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), - 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent); + /* Selection emphasis: crisp accent ring + neutral shadow (no colored halo). */ + --glow-primary: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 40%, transparent), + 0 8px 20px rgb(16 24 40 / 8%); + --glow-soft: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 28%, transparent), + 0 4px 12px rgb(16 24 40 / 6%); /* Elevation: layered, small blur, low alpha */ --shadow-soft: 0 1px 2px rgb(12 24 34 / 6%), 0 8px 20px rgb(12 24 34 / 6%); @@ -324,8 +325,8 @@ --overlay-backdrop: rgb(0 0 0 / 72%); --panel-gloss: color-mix(in srgb, var(--surface-lux) 82%, transparent); - --glow-primary: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent); - --glow-soft: 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent), 0 6px 16px rgb(0 0 0 / 42%); + --glow-primary: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 45%, transparent), 0 8px 24px rgb(0 0 0 / 45%); + --glow-soft: 0 0 0 1px color-mix(in srgb, var(--clinical-accent) 32%, transparent), 0 6px 16px rgb(0 0 0 / 42%); --shadow-soft: 0 1px 2px rgb(0 0 0 / 36%), 0 10px 26px rgb(0 0 0 / 40%); --shadow-tight: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 12px rgb(0 0 0 / 35%); diff --git a/src/components/clinical-dashboard/answer-status.tsx b/src/components/clinical-dashboard/answer-status.tsx index 4306b8663b..d571970f8a 100644 --- a/src/components/clinical-dashboard/answer-status.tsx +++ b/src/components/clinical-dashboard/answer-status.tsx @@ -98,25 +98,25 @@ export function AnswerEmptyState({ export function AnswerSkeleton() { return (
-
-
-
-
+
+
+
+
-
-
+
+
-
+
-
-
+
+
-
-
+
+
);