[GH-ISSUE #57] UI ShadCN Audit: Findings, Normalization Plan, and Minimal Fixes #27

New issue

Open

opened 2026-10-15 13:01:41 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-15 13:01:41 +00:00

Owner

Originally created by @salty2011 on GitHub (Jul 31, 2025).
Original GitHub issue: https://github.com/games-on-whales/wolfmanager/issues/57

Summary
ShadCN, Radix, and class-variance-authority (CVA) are in use across the UI primitives. The audit identified inline transform suppression that can conflict with animations and prefers-reduced-motion, hard-coded rgba/hex colors bypassing theme tokens, and a form background token gap. This issue tracks remediation tasks and phased implementation.

References (file:line)

ShadCN config: components.json
Button (CVA + Radix Slot) with inline transform none: src/components/ui/button.tsx style at (src/components/ui/button.tsx:49)
Dialog (Radix): src/components/ui/dialog.tsx
Table: src/components/ui/table.tsx
Form + a11y contexts (aria-describedby, aria-invalid): src/components/ui/form.tsx, aria wiring at (src/components/ui/form.tsx:111)
Label (CVA): src/components/ui/label.tsx
Alert (CVA): src/components/ui/alert.tsx
DropdownMenu (Radix) with inline transform none: src/components/ui/dropdown-menu.tsx
Input/Select using bg-[hsl(var(--form-bg))] while --form-bg not defined in globals: src/components/ui/input.tsx, src/components/ui/select.tsx
Sonner Toaster with raw color classes: src/components/ui/themed-toaster.tsx
Header hard-coded rgba/hex/neon classes: src/components/layout/header.tsx
Sidebar hard-coded rgba/hex/neon classes: src/components/layout/sidebar.tsx
globals.css theme vars and global transform overrides: src/app/globals.css

Priority Findings
P0

Remove inline transform-suppression to avoid conflicts with Radix animations and to respect prefers-reduced-motion via CSS instead of inline styles.
- Button: remove inline transform override (src/components/ui/button.tsx:49)
- DropdownMenu: remove inline transform overrides (src/components/ui/dropdown-menu.tsx:34,91,108)
Define a stable form background token or switch to existing tokens.
- Option A: Define --form-bg in globals.css mapped to an existing token (e.g., var(--background))
- Option B: Replace bg-[hsl(var(--form-bg))] with bg-background/card/popover
- Files: (src/components/ui/input.tsx:15), (src/components/ui/select.tsx:23,48)

P1
3) Normalize colors to Tailwind theme tokens/CSS variables, eliminate hard-coded rgba/hex.

Introduce brand tokens (e.g., --brand-primary, --brand-accent) within Tailwind theme
Refactor header/sidebar to use tokenized classes (bg-background/bg-popover/border-border/text-foreground/muted-foreground)

Tokenize Sonner toaster classes
- Replace text-green-400/red-400/yellow-400/blue-400 with semantic/tokens

P2
5) Navigation semantics & focus

Consider Button asChild with Link, add aria-current for active routes, ensure focus-visible rings per ShadCN

Proposed Minimal Diffs (Phase 1 - Low Risk)

src/components/ui/button.tsx: remove inline style prop (transform none) on the rendered component
src/components/ui/dropdown-menu.tsx: remove inline style props (transform none) on SubTrigger, Item, CheckboxItem
src/app/globals.css: add :root --form-bg referencing existing token (e.g., --background); or update Input/Select to use bg-background

Follow-on (Phase 2)

Introduce design tokens for neon/brand palette in Tailwind config and globals using HSL variables
Refactor header.tsx and sidebar.tsx to tokenized classes; remove hard-coded rgba/hex
Tokenize Sonner UI classes and icons

Acceptance Criteria

Motion respects prefers-reduced-motion; Radix animations unaffected by inline overrides
Inputs and selects render consistently via defined tokens across themes
Header and sidebar adhere to tokenized colors with improved contrast and a11y

Testing & Verification

Visual snapshots for Button, Dropdown, Input, Select, Header, Sidebar (Chromatic/Percy)
A11y checks (axe) and keyboard navigation for nav and dialogs
E2E smoke on login and settings navigation

Rollout Plan

PR1: Minimal P0 diffs (transform overrides removal, form-bg token or component background swap)
PR2: Token introduction and header/sidebar normalization
PR3: Sonner tokenization and nav semantics

Notes
ShadCN baseline is solid; the work is normalization and token discipline rather than component replacement.

Originally created by @salty2011 on GitHub (Jul 31, 2025). Original GitHub issue: https://github.com/games-on-whales/wolfmanager/issues/57 Summary ShadCN, Radix, and class-variance-authority (CVA) are in use across the UI primitives. The audit identified inline transform suppression that can conflict with animations and prefers-reduced-motion, hard-coded rgba/hex colors bypassing theme tokens, and a form background token gap. This issue tracks remediation tasks and phased implementation. References (file:line) - ShadCN config: [components.json](components.json:1) - Button (CVA + Radix Slot) with inline transform none: [src/components/ui/button.tsx](src/components/ui/button.tsx:1) style at (src/components/ui/button.tsx:49) - Dialog (Radix): [src/components/ui/dialog.tsx](src/components/ui/dialog.tsx:1) - Table: [src/components/ui/table.tsx](src/components/ui/table.tsx:1) - Form + a11y contexts (aria-describedby, aria-invalid): [src/components/ui/form.tsx](src/components/ui/form.tsx:1), aria wiring at (src/components/ui/form.tsx:111) - Label (CVA): [src/components/ui/label.tsx](src/components/ui/label.tsx:1) - Alert (CVA): [src/components/ui/alert.tsx](src/components/ui/alert.tsx:1) - DropdownMenu (Radix) with inline transform none: [src/components/ui/dropdown-menu.tsx](src/components/ui/dropdown-menu.tsx:34,91,108) - Input/Select using bg-[hsl(var(--form-bg))] while --form-bg not defined in globals: [src/components/ui/input.tsx](src/components/ui/input.tsx:15), [src/components/ui/select.tsx](src/components/ui/select.tsx:23,48) - Sonner Toaster with raw color classes: [src/components/ui/themed-toaster.tsx](src/components/ui/themed-toaster.tsx:20-44) - Header hard-coded rgba/hex/neon classes: [src/components/layout/header.tsx](src/components/layout/header.tsx:84-113,137-159) - Sidebar hard-coded rgba/hex/neon classes: [src/components/layout/sidebar.tsx](src/components/layout/sidebar.tsx:124-138,154-161,181-221,239-247,292-309) - globals.css theme vars and global transform overrides: [src/app/globals.css](src/app/globals.css:8,220-235) Priority Findings P0 1) Remove inline transform-suppression to avoid conflicts with Radix animations and to respect prefers-reduced-motion via CSS instead of inline styles. - Button: remove inline transform override (src/components/ui/button.tsx:49) - DropdownMenu: remove inline transform overrides (src/components/ui/dropdown-menu.tsx:34,91,108) 2) Define a stable form background token or switch to existing tokens. - Option A: Define --form-bg in globals.css mapped to an existing token (e.g., var(--background)) - Option B: Replace bg-[hsl(var(--form-bg))] with bg-background/card/popover - Files: (src/components/ui/input.tsx:15), (src/components/ui/select.tsx:23,48) P1 3) Normalize colors to Tailwind theme tokens/CSS variables, eliminate hard-coded rgba/hex. - Introduce brand tokens (e.g., --brand-primary, --brand-accent) within Tailwind theme - Refactor header/sidebar to use tokenized classes (bg-background/bg-popover/border-border/text-foreground/muted-foreground) 4) Tokenize Sonner toaster classes - Replace text-green-400/red-400/yellow-400/blue-400 with semantic/tokens P2 5) Navigation semantics & focus - Consider Button asChild with Link, add aria-current for active routes, ensure focus-visible rings per ShadCN Proposed Minimal Diffs (Phase 1 - Low Risk) - src/components/ui/button.tsx: remove inline style prop (transform none) on the rendered component - src/components/ui/dropdown-menu.tsx: remove inline style props (transform none) on SubTrigger, Item, CheckboxItem - src/app/globals.css: add :root --form-bg referencing existing token (e.g., --background); or update Input/Select to use bg-background Follow-on (Phase 2) - Introduce design tokens for neon/brand palette in Tailwind config and globals using HSL variables - Refactor header.tsx and sidebar.tsx to tokenized classes; remove hard-coded rgba/hex - Tokenize Sonner UI classes and icons Acceptance Criteria - Motion respects prefers-reduced-motion; Radix animations unaffected by inline overrides - Inputs and selects render consistently via defined tokens across themes - Header and sidebar adhere to tokenized colors with improved contrast and a11y Testing & Verification - Visual snapshots for Button, Dropdown, Input, Select, Header, Sidebar (Chromatic/Percy) - A11y checks (axe) and keyboard navigation for nav and dialogs - E2E smoke on login and settings navigation Rollout Plan - PR1: Minimal P0 diffs (transform overrides removal, form-bg token or component background swap) - PR2: Token introduction and header/sidebar normalization - PR3: Sonner tokenization and nav semantics Notes ShadCN baseline is solid; the work is normalization and token discipline rather than component replacement.

bsakaguchi added the

labels

2026-10-15 13:01:41 +00:00