refactor(ui): tokenize bg-card/NN opacity one-offs into surface-translucency tiers

[JSONbored]

Summary

52 sites across 21 files used ad-hoc bg-card/NN opacity fractions with no semantic meaning — 5 different values, the dominant cluster being one repeated three-class idiom (bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/80) copy-pasted across every sticky table header and the compare-drawer shells.

Tokens

Added to packages/ui-kit/src/styles.css:

• .mg-glass — the sticky-header/drawer-shell blur idiom collapsed into one class (95% opaque fallback, 80% + blur(8px) where backdrop-filter is supported).
• .mg-glass-soft — a flat 60%, no blur, for inset panels.

Both compose var(--card), so they theme automatically — verified via getComputedStyle in both light and dark.

Sweep

• mg-glass (12 sites): the full triple-idiom sticky headers (call-module-extrinsics-table.tsx, validator-nominators-table.tsx, blocks.index.tsx, extrinsics.index.tsx) and the standalone blur-paired /95 sites (both compare-drawer shells + theads, shortcuts-popover.tsx, back-to-top.tsx).
• mg-glass-soft (10 sites): the 7 clean /60 sites, plus 3 outliers (delegate-cta.tsx and nav-omnibox.tsx at /50, endpoint-operational-list.tsx at /40) that snap cleanly without a visible regression — /50//40 are both closer to 60% than 95%, and none of them had blur to begin with.
• Documented exceptions (2 sites, left as bare fractions with an inline comment): hero-subnet-chips.tsx's homepage chip carousel and account-history-chart.tsx's segmented-toggle track, both at /80 — neither cleanly snaps to either tier without a visible regression (mg-glass would add unwanted blur; mg-glass-soft's 60% visibly lightens them). Same documented-exception treatment Design tokens 2/5: semantic z-index layering scale #7841 used for its own two non-literal reassignments.
• Left untouched (~24 sites): the rounded-2xl bg-card/95 ... mg-card-glow[-accent] KPI-tile family in accounts.$ss58.tsx and validators.$hotkey.tsx. Mixing blur into cards that never had it would be a real visual regression, and this exact pattern is already scheduled for its own Panel glow-prop consolidation in FE hardening 3/6: Panel API — rest-prop forwarding, missing tones, glow variant; convert the 31 documented skips #7848 — converting it here would just be double churn. The warn-tier guardrail still flags these, same residual-worklist convention every other token rule already uses.

A real build bug found along the way

Writing .mg-glass's backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); together in one rule silently dropped the standard property in the compiled CSS — both in ui-kit's own tsup/Lightning CSS build and again in apps/ui's Tailwind pipeline (which re-processes the imported CSS). Lightning CSS's minifier treats the two textually-identical blur(8px) values as duplicates and collapses them down to just the prefixed one. Fixed by dropping the -webkit- fallback entirely — Safari has shipped unprefixed backdrop-filter since version 18 (2024), so nothing needs it anymore, and with only one declaration present there's nothing left for the minifier to (mis)merge.

Verification

• tsc --noEmit clean in both packages
• eslint . (full package) — 0 errors in both; exactly 26 warnings in apps/ui from the documented/deferred sites, exactly matching the audit above
• prettier --check . clean
• vitest run — 191 files / 1465 tests in apps/ui, 16 files / 88 tests in ui-kit, all passing
• packages/ui-kit rebuilt (dist/index.{js,cjs,css})
• Live preview: getComputedStyle on a sticky thead confirms backdrop-filter: blur(8px) + 80% opacity background in dark mode, and the 95%/60% fallback/soft tiers resolve correctly composing --card in both themes
• grep -rn 'bg-card/[0-9]' apps/ui/src packages/ui-kit/src --include='*.tsx' → only the 2 documented exceptions + the ~24 deferred-to-FE hardening 3/6: Panel API — rest-prop forwarding, missing tones, glow variant; convert the 31 documented skips #7848 sites remain, 0 unaccounted-for

Closes #7842

[superagent-security]

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

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	metagraphed-ui	eb61e51	Commit Preview URL Branch Preview URL	Jul 24 2026, 09:12 PM

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.67%. Comparing base (739ba45) to head (eb61e51).
⚠️ Report is 4 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8052   +/-   ##
=======================================
  Coverage   97.67%   97.67%           
=======================================
  Files         220      220           
  Lines       27230    27230           
  Branches    10800    10800           
=======================================
  Hits        26598    26598           
  Misses        140      140           
  Partials      492      492           

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[loopover-orb]

Warning

⏸️ LoopOver review result - manual review recommended

_{Review updated: 2026-07-24 21:26:01 UTC}

25 files · 1 AI reviewer · no blockers · CI green · clean

⏸️ Suggested Action - Manual Review

• Touches a guarded path — held for manual review: This PR changes guardrail-protected path(s): apps/ui/eslint.config.ts (matched apps/ui/**), apps/ui/src/components/metagraphed/account-history-chart.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/analytics/time-range-scrub.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/call-module-extrinsics-table.tsx (matched apps/ui/**), apps/ui/src/components/metagraphed/delegate-cta.tsx (matched apps/ui/**), and 12 more.

Review summary
This is a straightforward CSS-token consolidation: 52 ad-hoc `bg-card/NN` opacity classes collapse into `.mg-glass` (blur idiom) and `.mg-glass-soft` (flat 60%), with matching ESLint guardrails added in both `apps/ui/eslint.config.ts` and `packages/ui-kit/eslint.config.ts`, and the ui-kit dist artifacts rebuilt to match. The two documented bare-fraction exceptions (`hero-subnet-chips.tsx`, `account-history-chart.tsx`) and the untouched KPI-tile family are consistent with the stated scope, and every touched call site correctly swaps the old three/two-class idiom for the new single token without losing the `shadow-[...]`/`z-[...]` companions. The unconventional split `.mg-glass{...}` / `@​supports{...}` / `.mg-glass{backdrop-filter...}` declaration is unusual but is explained inline and mirrored correctly in the built `dist/index.css`.

Nits — 6 non-blocking

• The `GLASS_SURFACE_RULES`/matching rule is duplicated near-verbatim between `apps/ui/eslint.config.ts` and `packages/ui-kit/eslint.config.ts` (same regex/message) — could be shared if these configs are meant to stay in lockstep, same as the other DESIGN_RULES already are within a single file.
• No test changes accompany this refactor, but since it's a pure class-name/token swap with no logic change, that's acceptable rather than a real gap.
• The inline comment in `packages/ui-kit/src/styles.css` asserting Lightning CSS's minifier collapses duplicate `blur(8px)` declarations down to the prefixed one is an unverifiable implementation claim from this vantage point — worth double-checking against the actual minified `dist/index.css` output rather than trusting the comment at face value.
• Consider factoring the shared `bg-card/[0-9]+` regex/message pair into a common constant imported by both eslint configs to avoid drift if the tier names ever change.
• Code changes lack test evidence — Add focused regression tests or explain why existing coverage is sufficient.
• Touches a guarded path — held for manual review — A maintainer must review and merge this change.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ⚠️ Gate result — Not blocking (Advisory; not blocking this PR.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#7842
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: 13 registered-repo PR(s), 13 merged, 272 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	JSONbored; Gittensor profile; 13 PR(s), 272 issue(s).

Linked issue satisfaction

Addressed
The PR adds .mg-glass and .mg-glass-soft to styles.css, sweeps all listed sticky-header/drawer/inset-panel sites (call-module-extrinsics-table, validator-nominators-table, blocks.index, extrinsics.index, both compare drawers, back-to-top, shortcuts-popover, methodology-callout, query-bar, and the /50 and /40 outliers) to the new tiers, adds the eslint warn-tier guardrail in both configs, and docum

Review context

• Author: JSONbored
• Role context: owner (maintainer lane)
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, TypeScript, Ruby, Go, MDX, Shell, Solidity, JavaScript
• Official Gittensor activity: 13 PR(s), 272 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Treat this as maintainer-lane context rather than normal contributor-lane activity.

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
/blocks	desktop	before /blocks	after /blocks	—
/blocks	mobile	before /blocks (mobile)	after /blocks (mobile)	—
/delegate	desktop	before /delegate	after /delegate	—
/delegate	mobile	before /delegate (mobile)	after /delegate (mobile)	—

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

Scroll preview

Route	Before (production)	After (this PR's preview)
/blocks	before /blocks (scroll)	after /blocks (scroll)
/delegate	before /delegate (scroll)	after /delegate (scroll)

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

_{🟩 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