improvement(ui): reuse shared button and focus treatments

[BillLeoutsakosvl346]

Summary

• Reuse Button's round shape and quiet hover treatment in the chat scroll action and resource toggle; remove the redundant file tile height class.
• Add an opt-in muted keyboard focus ring to EMCN Button and reuse the same ring across five existing controls. Ordinary Button focus styling remains unchanged.
• Preserve the current rendered treatments. The 12 matched before/after fixture states are pixel identical; the resource toggle's inherited hover text color changes but its visible icon and dot use explicit colors.

Type of Change

• Improvement

Testing

• Repository lint, type check, 47 audits, docs manifest and block registry checks passed. Full Test and Build passed all six jobs at 22ed396, including both PostgreSQL paths.
• Full workspace tests passed (19 packages; 55,197 app tests passed). The optional destructive database integration suite was skipped because no disposable local database was configured. EMCN tests passed (370), including the new Button test.
• Full design scan: 830 → 824 findings, clearing the six reviewed declarations. The committed diff linter reports 15 intentional central-definition records for moving the existing focus ring and outline reset into EMCN; it reports no new usage violations.
• Matched light/dark, 16px/20px, rest/hover/focus screenshots use source-derived isolated fixtures with synthetic labels.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new usage warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 23, 2026 2:32am UTC

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge because the latest focus-treatment consolidation preserves a visible keyboard ring and introduces no actionable regression.

Summary

This PR consolidates existing button geometry, hover, and muted keyboard-focus treatments into shared EMCN APIs while preserving current component behavior.

• Adds an opt-in focusRing='muted' Button variant and shared mutedFocusRingClass.
• Reuses shared styling across buttons, slider, switch, field disclosure, and sidebar controls.
• Replaces duplicated round and quiet button styling and removes a redundant file-tile height override.

_{Reviews (2) · Last reviewed commit: "fix(emcn): include outline reset in mute..."}

[cubic-dev-ai]

All reported issues were addressed across 12 files

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[BillLeoutsakosvl346]

Matched before/after visual review for 6c92816 against its PR base 7bf8fe3.

These are source-derived isolated fixtures using the actual EMCN Button and affected control components with synthetic labels and the same compiled product CSS. The full frames use a 960×1060 CSS viewport (1920×2120 image at 2× device scale); the closeups are captured at 2× device scale. The fixture does not exercise authenticated routes or file-download side effects.

All 12 full-frame pairs (light/dark × 16px/20px root text × rest/resource hover/table keyboard focus) are pixel identical. The file tile also covers a long truncated filename and loading. The resource toggle's inherited hover text color changes, while its visible icon and activity dot set explicit colors and render identically.

Light theme, selected controls and interaction states

Dark theme, selected controls and interaction states

Full frames at normal and enlarged root text size

[BillLeoutsakosvl346]

Current-head follow-up for the muted focus-ring helper. The helper now includes focus-visible:outline-hidden; Slider and Switch obtain that class from the shared recipe, and the compact sidebar action keeps its custom ring without a second browser outline.

The source-derived isolated fixture was recaptured against the unchanged PR base. All 16 before/after full-frame pairs are pixel identical across light/dark themes, 16px/20px root text, rest, resource hover, table keyboard focus, and sidebar keyboard focus. The panels below include the sidebar focus state at 2× device scale.

[BillLeoutsakosvl346]

@greptile

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

No issues found across 12 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}