fix: reconcile refractor visual spec with mockup and playground (#55) #56

Claude · 2026-04-06T23:04:19Z

Claude commented

2026-04-06 23:04:19 +00:00

Closes #55

Three doc-only consistency fixes between docs/refractor-visual-spec.md, docs/refractor-tier-mockup.html, and docs/card-cosmetics-playground.html.

Changes

1. Glow/metallic decoupling (`refractor-visual-spec.md`)

Removed the claim that "metallic effect automatically enables glow pulse"
Updated text: metallic sheen and glow pulse are independent effects; glow is hardcoded ON for T4, OFF for T1–T3
Updated "What NOT to port" bullet to match: was "metallic always includes glow", now says "hardcode glow ON for T4, OFF for T1–T3"

2. Stale keyframe values (`refractor-visual-spec.md`)

Updated diamond-glow-pulse CSS to match the intensified values in the mockup:

0% glow: 5px 1px → 8px 2px
50% inner glow: 8px 3px → 14px 5px
50% outer glow: 14px 5px color-mix(...) → 24px 8px var(--diamond-glow-color) (dropped color-mix, matched mockup spread)
100% frame: was /* same as 0% */ → now explicit (matching mockup for clean loop)

3. Playground badge colors (`card-cosmetics-playground.html`)

Updated T2/T3/T4 evo badge colors to match the approved tier palette:

T2: gold (#8b6914 / #ffd700) → blue (#2070b0 / #50a0e8)
T3: purple (#4a1a6b / #c084fc) → red (#a82020 / #e85050)
T4: teal (#0a5a5a / #2dd4bf) → purple (#6b2d8e / #a060d0)
Updated docs description strings to match

Files changed

docs/refractor-visual-spec.md
docs/card-cosmetics-playground.html

No production code affected.

Closes #55 Three doc-only consistency fixes between `docs/refractor-visual-spec.md`, `docs/refractor-tier-mockup.html`, and `docs/card-cosmetics-playground.html`. ## Changes ### 1. Glow/metallic decoupling (`refractor-visual-spec.md`) - Removed the claim that "metallic effect automatically enables glow pulse" - Updated text: metallic sheen and glow pulse are independent effects; glow is hardcoded ON for T4, OFF for T1–T3 - Updated "What NOT to port" bullet to match: was "metallic always includes glow", now says "hardcode glow ON for T4, OFF for T1–T3" ### 2. Stale keyframe values (`refractor-visual-spec.md`) Updated `diamond-glow-pulse` CSS to match the intensified values in the mockup: - `0%` glow: `5px 1px` → `8px 2px` - `50%` inner glow: `8px 3px` → `14px 5px` - `50%` outer glow: `14px 5px color-mix(...)` → `24px 8px var(--diamond-glow-color)` (dropped `color-mix`, matched mockup spread) - `100%` frame: was `/* same as 0% */` → now explicit (matching mockup for clean loop) ### 3. Playground badge colors (`card-cosmetics-playground.html`) Updated T2/T3/T4 evo badge colors to match the approved tier palette: - T2: gold (`#8b6914` / `#ffd700`) → blue (`#2070b0` / `#50a0e8`) - T3: purple (`#4a1a6b` / `#c084fc`) → red (`#a82020` / `#e85050`) - T4: teal (`#0a5a5a` / `#2dd4bf`) → purple (`#6b2d8e` / `#a060d0`) - Updated docs description strings to match ## Files changed - `docs/refractor-visual-spec.md` - `docs/card-cosmetics-playground.html` No production code affected.

Claude added 1 commit 2026-04-06 23:04:20 +00:00

fix: reconcile refractor visual spec with mockup and playground (#55 ) a4596c63a5

Closes #55

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Claude referenced this pull request

2026-04-06 23:04:29 +00:00

fix: reconcile refractor visual spec with mockup and playground #55

Claude added the

ai-reviewing

label 2026-04-07 00:52:00 +00:00

Claude reviewed 2026-04-07 00:54:33 +00:00

Claude left a comment

AI Code Review

Files Reviewed

docs/refractor-visual-spec.md (modified)
docs/card-cosmetics-playground.html (modified)

Findings

Correctness

⚠️ Internal inconsistency created: "What to port" item 3 not updated.

The PR correctly updates the body text (~line 113) to say metallic and glow are independent, with glow hardcoded ON for T4 and OFF for T1–T3. It also correctly updates the "What NOT to port" bullet (line 232). However, Section 7 "What to port" item 3 (line 221) was left unchanged and still reads:

Metallic + glow effect → always apply metallic class + glow animation to filled diamonds

This directly contradicts the new guidance. A developer following the "What to port" checklist would apply diamond-glow to all tiers — the exact opposite of the approved behavior.

Fix: Update item 3 to something like:

Metallic effect → always apply metallic class to filled diamonds; apply glow animation (diamond-glow class) for T4 only

Security

No issues found (docs-only PR).

Style & Conventions

Glow keyframe values verified against refractor-tier-mockup.html: 8px 2px at 0%/100%, 14px 5px + 24px 8px at 50% — all match the mockup exactly. ✓
Dropping color-mix() in favor of var(--diamond-glow-color) directly is correct; the mockup uses the plain variable too. ✓
Playground badge colors (T2 blue, T3 red, T4 purple) verified against the spec color table — all three match. ✓
updatePrompt description strings updated consistently. ✓

Verdict: REQUEST_CHANGES (posted as COMMENT — Gitea blocks self-review)

One correctness issue blocks merge: "What to port" item 3 contradicts the new glow/metallic decoupling. Fix that line and this is clean.

Automated review by Claude PR Reviewer

## AI Code Review ### Files Reviewed - `docs/refractor-visual-spec.md` (modified) - `docs/card-cosmetics-playground.html` (modified) ### Findings #### Correctness **⚠️ Internal inconsistency created: "What to port" item 3 not updated.** The PR correctly updates the body text (~line 113) to say metallic and glow are independent, with glow hardcoded ON for T4 and OFF for T1–T3. It also correctly updates the "What NOT to port" bullet (line 232). However, **Section 7 "What to port" item 3 (line 221) was left unchanged** and still reads: > `Metallic + glow effect → always apply metallic class + glow animation to filled diamonds` This directly contradicts the new guidance. A developer following the "What to port" checklist would apply `diamond-glow` to all tiers — the exact opposite of the approved behavior. **Fix:** Update item 3 to something like: > `Metallic effect → always apply metallic class to filled diamonds; apply glow animation (diamond-glow class) for T4 only` #### Security - No issues found (docs-only PR). #### Style & Conventions - Glow keyframe values verified against `refractor-tier-mockup.html`: `8px 2px` at 0%/100%, `14px 5px` + `24px 8px` at 50% — all match the mockup exactly. ✓ - Dropping `color-mix()` in favor of `var(--diamond-glow-color)` directly is correct; the mockup uses the plain variable too. ✓ - Playground badge colors (T2 blue, T3 red, T4 purple) verified against the spec color table — all three match. ✓ - `updatePrompt` description strings updated consistently. ✓ ### Verdict: REQUEST_CHANGES (posted as COMMENT — Gitea blocks self-review) One correctness issue blocks merge: "What to port" item 3 contradicts the new glow/metallic decoupling. Fix that line and this is clean. --- *Automated review by Claude PR Reviewer*

Claude added

ai-changes-requested

and removed

ai-reviewing

labels 2026-04-07 00:54:57 +00:00

Claude added the

ai-working

label 2026-04-07 01:30:49 +00:00

cal referenced this issue from a commit

2026-04-07 01:31:22 +00:00

fix: update 'What to port' item 3 to reflect glow/metallic decoupling

cal added 1 commit 2026-04-07 01:31:22 +00:00

fix: update 'What to port' item 3 to reflect glow/metallic decoupling e9ecdec168

Item 3 still said 'always apply glow animation to filled diamonds' after
the body text was updated to decouple metallic and glow. Now correctly
specifies glow (diamond-glow class) is T4-only.

Addresses review feedback on PR #56.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Claude commented

2026-04-07 01:31:28 +00:00

Addressed review feedback (review #470):

Fixed: "What to port" item 3 (line 225) now correctly reflects the glow/metallic decoupling:

Metallic effect → always apply metallic class to filled diamonds; apply glow animation (diamond-glow class) for T4 only

Previously said "always apply glow animation to filled diamonds" — which contradicted the body text updated in this PR. A developer following the checklist would have incorrectly applied diamond-glow to all tiers.

Addressed review feedback (review #470): **Fixed:** "What to port" item 3 (line 225) now correctly reflects the glow/metallic decoupling: > `Metallic effect → always apply metallic class to filled diamonds; apply glow animation (diamond-glow class) for T4 only` Previously said "always apply glow animation to filled diamonds" — which contradicted the body text updated in this PR. A developer following the checklist would have incorrectly applied `diamond-glow` to all tiers.

Claude removed the

ai-working

ai-changes-requested

labels 2026-04-07 01:31:41 +00:00

Claude added the

ai-reviewing

label 2026-04-07 01:45:52 +00:00

Claude reviewed 2026-04-07 01:47:59 +00:00

Claude left a comment

AI Code Review

Files Reviewed

docs/refractor-visual-spec.md (modified)
docs/card-cosmetics-playground.html (modified)

Findings

Correctness

Glow/metallic decoupling: All three spec locations now agree — body text, "What to port" item 3, and "What NOT to port" bullet all say metallic and glow are independent, with glow hardcoded ON for T4 and OFF for T1–T3. The "What to port" item 3 inconsistency flagged in the prior review round is now resolved.
Keyframe values: diamond-glow-pulse updated to match the mockup (8px 2px at 0%/100%, 14px 5px + 24px 8px at 50%). color-mix() dropped in favor of plain var(--diamond-glow-color). Explicit 100% frame replaces the old /* same as 0% */ comment — values correctly mirror 0% for a clean loop.
Playground badge colors: T2 → blue (#2070b0/#50a0e8), T3 → red (#a82020/#e85050), T4 → purple (#6b2d8e/#a060d0). All match the approved tier color table in Section 2. Shadow alpha suffixes (66, 88) kept at the same opacity levels as the old values. Description strings updated to match.
No issues found.

Security

No issues found. Docs-only changes.

Style & Conventions

No issues found.

Suggestions

None.

Verdict: LGTM (APPROVED — Gitea blocks self-review)

All three consistency fixes are correct and complete. The spec is now internally consistent across all glow behavior descriptions, and the playground badge colors align with the canonical tier palette.

Automated review by Claude PR Reviewer

## AI Code Review ### Files Reviewed - `docs/refractor-visual-spec.md` (modified) - `docs/card-cosmetics-playground.html` (modified) ### Findings #### Correctness - **Glow/metallic decoupling**: All three spec locations now agree — body text, "What to port" item 3, and "What NOT to port" bullet all say metallic and glow are independent, with glow hardcoded ON for T4 and OFF for T1–T3. The "What to port" item 3 inconsistency flagged in the prior review round is now resolved. - **Keyframe values**: `diamond-glow-pulse` updated to match the mockup (`8px 2px` at 0%/100%, `14px 5px` + `24px 8px` at 50%). `color-mix()` dropped in favor of plain `var(--diamond-glow-color)`. Explicit `100%` frame replaces the old `/* same as 0% */` comment — values correctly mirror 0% for a clean loop. - **Playground badge colors**: T2 → blue (`#2070b0`/`#50a0e8`), T3 → red (`#a82020`/`#e85050`), T4 → purple (`#6b2d8e`/`#a060d0`). All match the approved tier color table in Section 2. Shadow alpha suffixes (66, 88) kept at the same opacity levels as the old values. Description strings updated to match. - No issues found. #### Security - No issues found. Docs-only changes. #### Style & Conventions - No issues found. #### Suggestions - None. ### Verdict: LGTM (APPROVED — Gitea blocks self-review) All three consistency fixes are correct and complete. The spec is now internally consistent across all glow behavior descriptions, and the playground badge colors align with the canonical tier palette. --- *Automated review by Claude PR Reviewer*

Claude added

ai-reviewed

and removed

ai-reviewing

labels 2026-04-07 01:48:16 +00:00

cal approved these changes 2026-04-08 00:26:24 +00:00

Dismissed

cal left a comment

Approved via pd-pr

cal approved these changes 2026-04-08 00:26:28 +00:00

cal left a comment

Approved via pd-pr