social-media/docs/TASKS/frontend/002-style-system-baseline.md

Task: Add frontend style system baseline

Goal

Remove app-shell styling drift by routing shared chrome controls through Vuetify components and centralized theme-backed tokens.

Scope

• Expose reusable CSS variables backed by the Vuetify theme.
• Add shared app-shell primitives for navigation buttons, icon buttons, popovers, and menu items.
• Replace native shell buttons with Vuetify controls in App.vue, AppBar, AppSidebar, SidebarUserMenu, and WorkspaceSelector.
• Leave feature-screen native button migration to a follow-up task because it crosses many workflows.

Validation

cd frontend
npm run build

Done

• Tailwind preflight loads before Vuetify styles.
• App-owned CSS loads after Vuetify styles.
• Shared Vuetify defaults are centralized.
• Legacy global native button/card selectors were removed.
• App-shell styles use shared theme-backed tokens.