feat(frontend): calm daily-change chip + honest gauge-accent comments ($impeccable polish)#352
Merged
Merged
Conversation
$impeccable polish pass on the redesigned rankings surface (impeccable PRODUCT.md/DESIGN.md context from #350). - RankingTable mobile card: the daily price-change % pill was a solid green/red dopamine pill — the gamified-retail anti-reference named in PRODUCT.md, the only solid-fill semantic chip on the surface, and it hid a latent asymmetry (globals.css softens .bg-emerald-600 but has no .bg-rose-600 remap, so the down-pill rendered raw alarm-red while the up-pill was soft sage). Moved it to the shared outlined-light chip family (bg-{tone}-50 / text-{tone}-700 / ring-1 ring-inset ring-{tone}-200 + dark pairs), symmetric up/down; the up/down arrow stays as a non-color affordance (state never color-only). - visual.ts scoreAccentColor + MoSBadge accentColor doc-comments: corrected the false claim that the inline gauge accent is soft / remapped by globals.css (class overrides cannot reach an inline stroke/style value). Comment-only; accent values unchanged. - CLAUDE.md gotchas + AGENTS.md mirror: record the globals.css soft-override allowlist invariant (un-listed shades like bg-rose-600 render raw, not muted). - PHASE_STATUS_INFLIGHT.md: in-flight entry. Display-only (mobile/tablet card; the desktop table has no price-change column). No schema / compute / scoring / valuation change. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dackclup
pushed a commit
that referenced
this pull request
Jun 1, 2026
frontend-design-reviewer (on PR #352) flagged SKILL.md Rule 4 as stale: it read "Light-mode only — NO dark: variants" on the premise of force-light + Tailwind darkMode: 'media'. Both are false since Phase 3b shipped class-strategy dark mode (darkMode: 'class' + next-themes three-state toggle); every canonical component now carries paired dark: variants, and the file's OWN canonical code example already uses them — so the prose contradicted both the example and the shipped code. Left as-is it could make a future agent wrongly fail a PR that adds dark: variants. Fix three contradictory spots coherently: - Rule 4 heading + body rewritten to "Paired light + dark: (class-strategy dark mode)" with a light<->dark pairing table and a "why it's safe now (class-gated, not media-gated)" note; the original PR #70 invisible-label lesson is preserved in a collapsed <details> History block. - the "Tone palette (light-mode only)" caption -> "paired light + dark:". - the "Why no dark: variants" note -> "Why paired dark: variants". Doc-only (one skill file). No compute / schema / scoring / valuation / frontend-code change. Split from PR #352 (the $impeccable polish UI fix) by user direction to keep that PR focused. PHASE_STATUS_INFLIGHT.md entry added for the lockstep gate. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
dackclup
added a commit
that referenced
this pull request
Jun 1, 2026
* docs(skill): un-stale frontend-design-system Rule 4 (dark mode) frontend-design-reviewer (on PR #352) flagged SKILL.md Rule 4 as stale: it read "Light-mode only — NO dark: variants" on the premise of force-light + Tailwind darkMode: 'media'. Both are false since Phase 3b shipped class-strategy dark mode (darkMode: 'class' + next-themes three-state toggle); every canonical component now carries paired dark: variants, and the file's OWN canonical code example already uses them — so the prose contradicted both the example and the shipped code. Left as-is it could make a future agent wrongly fail a PR that adds dark: variants. Fix three contradictory spots coherently: - Rule 4 heading + body rewritten to "Paired light + dark: (class-strategy dark mode)" with a light<->dark pairing table and a "why it's safe now (class-gated, not media-gated)" note; the original PR #70 invisible-label lesson is preserved in a collapsed <details> History block. - the "Tone palette (light-mode only)" caption -> "paired light + dark:". - the "Why no dark: variants" note -> "Why paired dark: variants". Doc-only (one skill file). No compute / schema / scoring / valuation / frontend-code change. Split from PR #352 (the $impeccable polish UI fix) by user direction to keep that PR focused. PHASE_STATUS_INFLIGHT.md entry added for the lockstep gate. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi * docs(skill): finish un-staling the dark-mode guidance across all 3 homes docs-reviewer (on the Rule 4 rewrite) found the same retired "no dark:" logic copy-pasted in two other homes that now contradicted the corrected frontend-design-system Rule 4. Completing the un-staling so the repo's docs don't disagree with each other on a routine task (adding a chip): - SKILL.md (top-level rulebook) Rule 17 item 1: "Outlined-light chip family, no dark: variants" / "Never add dark: Tailwind variants" -> "with paired dark: variants" / "Ship a paired dark: variant", with the class-strategy (darkMode: 'class' + next-themes) explanation and a pointer to the retired PR #70 history in frontend-design-system Rule 4. - frontend/components/LossChanceBadge.tsx block comment: the "NO dark: variants ... see Rules 2 + 4" comment already contradicted its OWN dark:-carrying BANDS data; rewritten to the paired-variant prose. COMMENT-ONLY -- no behavior/build change (BANDS data untouched). - frontend-design-system SKILL.md canonical code example: stale values rounded-full -> rounded-sm (PR #233 LedgerCraft A2), dark:bg-emerald-900 -> dark:bg-emerald-900/30, dark:ring-emerald-700 -> dark:ring-emerald-800, to match what the canonical components actually ship. No compute / schema / scoring / valuation / frontend-LOGIC change. PHASE_STATUS_INFLIGHT.md entry updated to the full scope. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi --------- Co-authored-by: Claude <noreply@anthropic.com>
dackclup
added a commit
that referenced
this pull request
Jun 1, 2026
…ccable document) (#354) Full regenerate of the impeccable design-context (created in #350) against the current code. The creative decisions locked in #350 (North Star, palette, typography, Named Rules, the 4 anti-references) are preserved verbatim; only the spec's accuracy had drifted, fixed here: - Elevation: DESIGN.md/sidecar claimed cards rest on shadow-medium and the hero on shadow-large. Reality (post-A3 reskin): only shadow-overlay is used anywhere (FilterDrawer) -- every card/table/hero is border-only `rounded`. Rewrote the Elevation section + sidecar shadow purposes so Subtle/Medium/Large read as defined-but-unused; an agent will no longer reach for a resting shadow. - Components: added ListingChips (#351 country/exchange chips) + HeroAttributeTiles (#344 4-box tile grid) to DESIGN.md and the sidecar, plus an Icons subsection (lucide named-import / country-flag-icons per-country tree-shake discipline) and the signature Score Gauge as the 8th sidecar entry. - Motion: corrected two sidecar easings -- gauge-sweep cubic-bezier(.22,1,.36,1) -> ease-in-out, hover-lift ease-out -> ease-in-out (the app-wide single curve, #330). - Sidecar Card css dropped its stale box-shadow (border-only); Recommendation Chip now uses the soft-OKLCH values that actually render after the globals.css override (expert-user-explorer-measured) instead of raw emerald hex. Added a Colors + Do's note on the soft-override allowlist (the bg-rose-600 gap from #352) + the gauge-stroke inline-rgb carve-out to the Tailwind-Class Rule. Doc-only (root DESIGN.md + .impeccable/design.json + PHASE_STATUS_INFLIGHT.md) -- no compute / schema / scoring / valuation / frontend-code change. JSON validated (schemaVersion 2, 8 components); the 6 Stitch headers present in order; YAML frontmatter parses. https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
$impeccable polish redesign— Flagship pass on the redesigned rankings surfaceFirst polish run after wiring the impeccable project context (PRODUCT.md + DESIGN.md, #350). Setup ran
context.mjs→ loaded PRODUCT.md/DESIGN.md →polish.md+ the product register, then a meticulous static pass against the live LedgerCraft token system. The codebase is already very clean (no console.logs/TODOs, loose-null handled, rem-based micro-type, hex only in documented carve-outs), so this is the subtle stuff. Two findings survived scrutiny; one was dismissed.F1 — calm the daily-change chip (the anchor defect)
RankingTable.tsxmobile/tablet card: the daily price-change%pill was a solid green/red dopamine pill with ↗/↘ arrows:That is the exact "gamified retail-trading" anti-reference
PRODUCT.mdnames ("no dopamine green/red"), it's the only solid-fill semantic chip on the surface, and it hid a latent asymmetry:globals.cssremaps.bg-emerald-600→soft--c-pos-mediumbut has no.bg-rose-600rule, so the down-pill rendered raw alarm-red while the up-pill was soft sage.→ Moved to the shared outlined-light chip family, symmetric up/down, dark pairs, with
ring-1 ring-insetto match every other chip; the ↗/↘ arrow stays as a non-color affordance (state never color-only). Calm, on-brand, color-blind-safe.F3c — honest gauge-accent comments (comment-only, zero visual change)
visual.ts scoreAccentColor+MoSBadge.accentColorcomments falsely claimed the inline gauge accent is "soft / remapped by globals.css" — class overrides can't reach an inlinestroke/stylevalue. Corrected to state the truth (the accent is mid-saturation rgb by design). Accent values unchanged — the 5-tier score ramp has no soft amber token, which is a separate design decision deliberately out of scope here.Dismissed — F2 (loss-chance bands)
Checked: the mobile card's loss-chance bands already match the canonical
LossChanceBadgerubric. No churn.Docs (lockstep gate)
globals.csssoft-override is an allowlist — only enumerated.text-*/.bg-*/.ring-*classes are remapped; un-listed shades (notablybg-rose-600) render raw. Inlinestyle/svgstroke(gauge accents) are never reached and stay raw rgb by design.PHASE_STATUS_INFLIGHT.mdin-flight entry.Scope
Display-only, mobile/tablet card (the desktop table has no price-change column). 6 files, +81/−8. No schema / compute / scoring / valuation change.
Verification
Held Draft pending the Flagship pre-Ready gate (read-only sonnet agents):
frontend-design-reviewer(design-system review of the diff) +expert-user-explorer(build + headless browser, mobile viewport, verify the pill reads calm + symmetric + WCAG-AA in both light and dark).tsc --noEmit+next buildrun by CI (sandbox has nonode_modules). I'll fold any agent findings here before requesting Mark-Ready.https://claude.ai/code/session_012xxKfyR939bZDmbxxqMFZi
Generated by Claude Code