Skip to content

ui: retire legacy btn/form layer in favor of shadcn primitives #273

Description

@ajianaz

Summary

The dashboard ships two parallel styling systems: a legacy @layer components layer (.btn-primary, .btn-outline, .btn-sm, .btn-danger, .btn-ghost, .btn-success, .btn-secondary, .form-input, .form-label, .form-helper, .detail-dialog, …) and the shadcn-svelte primitives (Button, Field, Input, Dialog). They have different focus-ring mechanics, radii, and sizing — which is the main source of visual inconsistency.

Evidence

  • web/src/app.css:297-803 — legacy classes (82+ selectors).
  • Remaining legacy usage is small: .btn-secondary (2 files), .btn-success / .btn-ghost / .btn-danger (1 file each); .btn-primary / .btn-outline = zero usage.
  • .text-sm is redefined in app.css:1042 colliding with the Tailwind utility name (13 refs).
  • .detail-dialog fights shadcn dialog-content with !important ×3 (app.css:806-815).
  • Dual empty-state systems and dual form systems also stem from this split (tracked in a separate issue).

Fix

  1. Write web/design/COMPONENT-STANDARDS.md declaring shadcn primitives as the ONLY component system; legacy classes deprecated.
  2. Migrate the ~5 files still using .btn-* to Button variants.
  3. Delete .btn-primary / .btn-outline (0 usage) and other dead legacy selectors; resolve .text-sm collision; re-evaluate .detail-dialog !importants.

Acceptance criteria

  • grep -rn "btn-primary\|btn-outline" web/src = 0.
  • All buttons across pages come from ui/button.
  • app.css legacy layer shrinks accordingly; svelte-check + build clean.

Source: Titen UX audit 2026-09-20 (finding M2).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2-qualityCode quality improvement

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions