Skip to content

VSN-2268: Setup design system with shadcn/ui, Tailwind CSS, and updated MUI thme

yahya.elmokhtari a demandé de fusionner feature/VSN-2268 vers develop

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
Modification effectuée par yahya.elmokhtari

Rapports de requête de fusion