thrillwiki_laravel/memory-bank/design/DesignSystem.md

ThrillWiki Design System

Overview

This document details the design system implementation for the Laravel/Livewire version of ThrillWiki, ensuring visual and functional parity with the Django version.

Core Design Elements

Colors

• Primary: Indigo-500 (#6366f1)
• Secondary: Violet-500 (#8b5cf6)
• Full color scale defined in tailwind.config.js

Typography

• Primary Font: Poppins (400, 500, 600, 700)
• System applied via Tailwind configuration

Components

Navigation

• .nav-link: Primary navigation links
• .site-logo: Site logo styling
• .menu-item: Dropdown menu items

Forms

• .form-input: Standard form inputs
• Button variants:
  • .btn: Primary button
  • .btn-secondary: Secondary button

Alerts

• .alert: Base alert styling
• Variants:
  • .alert-success
  • .alert-error
  • .alert-warning
  • .alert-info

Theme System

Dark Mode Implementation

1. System detection:

window.matchMedia("(prefers-color-scheme: dark)")

2. User preference storage:

localStorage.getItem("theme")

3. Class toggle:

document.documentElement.classList.toggle("dark")

Asset Organization

Directory Structure

public/
├── images/
│   ├── default-avatar.png
│   ├── discord-icon.svg
│   ├── favicon.png
│   ├── google-icon.svg
│   └── placeholders/
│       ├── dark-ride.jpg
│       ├── default-park.jpg
│       ├── default-ride.jpg
│       ├── flat-ride.jpg
│       ├── other-ride.jpg
│       ├── roller-coaster.jpg
│       ├── transport.jpg
│       └── water-ride.jpg
resources/
├── css/
│   ├── app.css
│   ├── alerts.css
│   └── src/
│       └── input.css
└── js/
    ├── app.js
    └── modules/
        ├── alerts.js
        ├── location-autocomplete.js
        ├── main.js
        ├── park-map.js
        ├── photo-gallery.js
        └── search.js

Build System Configuration

Vite Setup

• Entry points configured in vite.config.js
• Source maps enabled for development
• Vendor chunk splitting for optimal caching

Tailwind Configuration

• JIT mode enabled
• Custom color palette
• Extended theme configuration
• Plugins:
  • @tailwindcss/forms
  • @tailwindcss/typography
  • @tailwindcss/aspect-ratio

CSS Architecture

Layer Organization

1. Base (@tailwind base)

   • HTML element defaults
   • Font settings
   • Scroll behavior

2. Components (@tailwind components)

   • Navigation elements
   • Form elements
   • Buttons
   • Alerts

3. Utilities (@tailwind utilities)

   • Custom utilities
   • Text gradient helpers

Responsive Design

Breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Container Padding

{
  DEFAULT: '1rem',
  sm: '2rem',
  lg: '4rem',
  xl: '5rem',
  '2xl': '6rem',
}

Animation System

Keyframes

fadeIn: {
  '0%': { opacity: '0' },
  '100%': { opacity: '1' },
},
fadeOut: {
  '0%': { opacity: '1' },
  '100%': { opacity: '0' },
}

Utilities

• animate-fade-in
• animate-fade-out

Implementation Progress

Completed

• Base layout template
• Color system migration
• Typography setup
• Core component classes
• Dark mode implementation
• Asset organization
• Build system configuration

Verified Against Django

• Component templates migration (matches Django implementation)
• Interactive features (maintains feature parity)
• Form implementations (preserves Django patterns)
• Navigation system (identical structure)
• Alert system (same functionality)

Framework-specific Adaptations

• Template syntax conversion (Django → Blade)
• Asset compilation (static → Vite)
• Authentication directives (Django auth → Laravel auth)
• Route naming (Django URLs → Laravel routes)

Pending

• Modal system (in development)
• Photo gallery (planned)
• Map integration (planned)
• Search interface (planned)
• User profile components (planned)

Next Steps

1. Implement remaining features:

   • Modal system
   • Photo gallery
   • Map integration
   • Search interface
   • User profile components

2. Quality Assurance:

   • Cross-browser testing
   • Performance benchmarking
   • Accessibility audit
   • Mobile responsiveness verification

3. Documentation:

   • Update component usage guides
   • Document Laravel-specific adaptations
   • Create migration guides for future components
   • Maintain feature parity tracking

4. Optimization:

   • Asset loading optimization
   • JavaScript bundle size reduction
   • Image optimization pipeline
   • Caching strategy implementation