VSN-2268: Setup design system with shadcn/ui, Tailwind CSS, and updated MUI thme
Summary - Add shadcn/ui component library (20 components) with Radix UI primitives as the new design
foundation
- Configure Tailwind CSS v4 with custom theme tokens (primary Deep Violet #6C5CE7, semantic colors, CSS variables)
- Refine existing MUI theme to align with the new design system (softer borders, neutral labels, smooth transitions)
Changes
New: shadcn/ui Components (src/components/ui/)
- badge, button, checkbox, dialog, dropdown-menu, input, label, popover, radio-group, scroll-area, select, separator, sheet, skeleton, switch, table, tabs, textarea, tooltip
- calendar — Radix Calendar built on react-day-picker v9 with French locale support
New: Tailwind CSS Configuration
- tailwind.config.js — Tailwind theme with shadcn design tokens
- postcss.config.js — PostCSS config for Tailwind
- components.json — shadcn/ui CLI component config
- src/lib/utils.ts — cn() utility (clsx + tailwind-merge)
Updated: Global Styles (src/global.css)
- Add Tailwind directives and tailwindcss-animate plugin
- Define full CSS custom property system: primary palette scale (--p-50 to --p-800), accent colors (sapphire, rose, amber), semantic colors, neo-morphic shadow variables (--neo-shadow-sm/md/lg), glassmorphism variables
Updated: MUI Theme
- src/shared/theme/index.tsx — Update primary color to #6C5CE7, refine component overrides (border radius, shadows, transitions)
- src/shared/theme/css.ts — Soften input borders (primary → neutral grey), add smooth transitions on hover/focus, pill-style tabs replacing bordered tabs, neo-morphic tab container, glassmorphism menu items
- src/shared/theme/palette.ts — Align palette values with new design tokens
Updated: Root Layout
- src/app/layout.tsx — Import global.css for Tailwind/CSS variable availability
Dependencies Added
- @radix-ui/* (13 packages) — UI primitives
- react-day-picker@9 — Calendar
- class-variance-authority, clsx, tailwind-merge — Styling utilities
- tailwindcss@4, postcss, autoprefixer, tailwindcss-animate — Build tooling
- lucide-react — Icon library for shadcn components