fix(ui): use the danger/warning tokens for the extension page's demo dots

[galuis116]

Summary

The extension page's demo "traffic light" dots (a faux GitHub PR header, apps/loopover-ui/src/routes/extension.tsx:201-202) hand-typed bg-[oklch(0.7_0.18_25)]/60 and bg-[oklch(0.8_0.15_85)]/60 — close approximations of the real --danger/--warning theme tokens — instead of referencing them, unlike the sibling dot in the same block which already correctly used bg-success/60.

Replaced both with bg-danger/60 and bg-warning/60, matching the existing bg-success/60 pattern. No visual change: the tokens are the same color family the hardcoded values were approximating.

UI Evidence

Before (hardcoded oklch approximation) vs. after (real --danger/--warning tokens) — visually identical, as expected:

Before	After

Captured via the local dev server (npm --prefix apps/loopover-ui run dev, port 8080) against the /extension route's OverlayDemo component, using a scripted Playwright screenshot (before = git stash reverting to the hardcoded values, after = the fix applied).

Test plan

• Confirmed --color-danger/--color-warning are real, registered Tailwind theme colors in packages/loopover-ui-kit/src/theme.css, already used elsewhere in this codebase (e.g. the sibling bg-success dot in the same block)
• Visually verified before/after screenshots are indistinguishable (see UI Evidence above), matching the issue's own "no visual change" expected outcome
• grep-confirmed no other reference to the old hardcoded oklch literals remains anywhere in apps/loopover-ui/
• npm run ui:lint, npm run ui:typecheck — clean (0 errors)
• git diff --check, npm run actionlint — clean
• apps/** is outside Codecov's coverage.include (confirmed via codecov.yml's ignore list) — no patch-coverage obligation for this UI-only change, per the issue's own Test Coverage Requirements note

Closes #6819

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-17 13:47:18 UTC}

1 file · 1 AI reviewer · no blockers · readiness 98/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This is a trivial, well-scoped token-substitution fix: two hand-typed oklch hex-approximations (bg-[oklch(0.7_0.18_25)]/60, bg-[oklch(0.8_0.15_85)]/60) are replaced with the semantic bg-danger/60 and bg-warning/60 tokens, matching the sibling bg-success/60 dot in the same block. The change is purely cosmetic-code-quality (no visual difference, as both tokens map to the same color family) and is correctly targeted to the single JSX block described in the linked issue.

Nits — 4 non-blocking

• No test coverage exists or is expected for this file (a route component with static Tailwind classes) — acceptable given the nature of the change, but worth confirming visual regression isn't otherwise checked.
• extension.tsx:200 still hardcodes bg-[oklch(0.18_0.005_260)] for the faux-github-header background — if the intent is full tokenization of this demo block, that value was left inconsistent, though it's out of scope for this PR.
• Consider a follow-up pass to replace the remaining bg-[oklch(0.18_0.005_260)] hardcoded value in the same OverlayDemo block for full consistency.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6819
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 1955 registered-repo PR(s), 1286 merged, 52 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	galuis116; Gittensor profile; 1955 PR(s), 52 issue(s).
Improvement	ℹ️ None detected	risk: low · value: none · LLM: minor

Review context

• Author: galuis116
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: not available
• Official Gittensor activity: 1955 PR(s), 52 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/extension	desktop	before /extension	after /extension	—
/extension	mobile	before /extension (mobile)	after /extension (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.