Skip to content

Polish: de-halo selection glows, neutral answer skeleton, verified gates#116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigSimmo merged 1 commit into from
Jul 2, 2026
Merged

Polish: de-halo selection glows, neutral answer skeleton, verified gates #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/redesign/05-changelog.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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

Expand Down
13 changes: 7 additions & 6 deletions src/app/globals.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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%);
Expand DownExpand Up@@ -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%);
Expand Down
22 changes: 11 additions & 11 deletions src/components/clinical-dashboard/answer-status.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -98,25 +98,25 @@ export function AnswerEmptyState({
export function AnswerSkeleton() {
return (
<div className="space-y-4" aria-label="Loading answer">
<div className="space-y-3 rounded-lg border border-[color:var(--primary)]/20 bg-[color:var(--primary-soft)]/45 p-4">
<div className="h-4 w-10/12 animate-skeleton-shimmer rounded bg-[color:var(--surface-subtle)]" />
<div className="h-4 w-full animate-skeleton-shimmer rounded bg-[color:var(--surface-subtle)]" />
<div className="h-4 w-8/12 animate-skeleton-shimmer rounded bg-[color:var(--surface-subtle)]" />
<div className="space-y-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-raised)] p-4">
<div className="h-4 w-10/12 animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
<div className="h-4 w-full animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
<div className="h-4 w-8/12 animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
<div className={cn(sourceCard, "mt-4 flex min-h-[60px] items-center justify-between gap-3 p-3")}>
<div className="min-w-0 flex-1 space-y-2">
<div className="h-3 w-24 animate-skeleton-shimmer rounded bg-[color:var(--surface-subtle)]" />
<div className="h-4 w-48 max-w-full animate-skeleton-shimmer rounded bg-[color:var(--surface-subtle)]" />
<div className="h-3 w-24 animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
<div className="h-4 w-48 max-w-full animate-skeleton-shimmer rounded bg-[color:var(--surface-inset)]" />
</div>
<div className="h-[44px] w-20 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-subtle)]" />
<div className="h-[44px] w-20 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
</div>
</div>
<div className="flex flex-wrap gap-2">
<div className="h-[44px] w-48 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-subtle)]" />
<div className="h-[44px] w-40 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-subtle)]" />
<div className="h-[44px] w-48 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
<div className="h-[44px] w-40 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
</div>
<div className="grid gap-3 sm:grid-cols-2">
<div className="h-28 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-subtle)]" />
<div className="hidden h-28 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-subtle)] sm:block" />
<div className="h-28 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)]" />
<div className="hidden h-28 animate-skeleton-shimmer rounded-lg bg-[color:var(--surface-inset)] sm:block" />
</div>
</div>
);
Expand Down
Loading