diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 48c73a6..5182881 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -44,7 +44,18 @@ "mcp__playwright__browser_fill_form", "mcp__zen__debug", "Bash(Copy-Item -Path \"Z:\\Repos\\monacousa-portal\\design-mockups\\pages\\auth\\ProfessionalLogin.vue\" -Destination \"Z:\\Repos\\monacousa-portal\\pages\\mockups\\login.vue\")", - "Bash(Remove-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\mockups\" -Recurse -Force)" + "Bash(Remove-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\mockups\" -Recurse -Force)", + "mcp__zen__analyze", + "Read(/Z:\\Repos\\monacousa-portal\\.playwright-mcp/**)", + "Read(/Z:\\Repos\\monacousa-portal\\.playwright-mcp/**)", + "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)", + "Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\assets\\scss\\design-system-v2.scss\" -ItemType File -Force)", + "Read(/Z:\\Repos\\monacousa-portal\\assets\\scss/**)", + "Read(/Z:\\Repos\\monacousa-portal/**)", + "Read(/Z:\\Repos\\monacousa-portal/**)", + "Read(/Z:\\Repos\\monacousa-portal\\components\\ui/**)", + "Read(/Z:\\Repos\\monacousa-portal\\components\\ui/**)", + "Read(/Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard/**)" ], "deny": [], "ask": [] diff --git a/.playwright-mcp/admin-dashboard-main.png b/.playwright-mcp/admin-dashboard-main.png new file mode 100644 index 0000000..713d7af Binary files /dev/null and b/.playwright-mcp/admin-dashboard-main.png differ diff --git a/.playwright-mcp/admin-events-management.png b/.playwright-mcp/admin-events-management.png new file mode 100644 index 0000000..a9671b2 Binary files /dev/null and b/.playwright-mcp/admin-events-management.png differ diff --git a/.playwright-mcp/admin-members-management.png b/.playwright-mcp/admin-members-management.png new file mode 100644 index 0000000..e80769a Binary files /dev/null and b/.playwright-mcp/admin-members-management.png differ diff --git a/.playwright-mcp/admin-payments-management.png b/.playwright-mcp/admin-payments-management.png new file mode 100644 index 0000000..66e1cb3 Binary files /dev/null and b/.playwright-mcp/admin-payments-management.png differ diff --git a/.playwright-mcp/admin-settings.png b/.playwright-mcp/admin-settings.png new file mode 100644 index 0000000..78324ec Binary files /dev/null and b/.playwright-mcp/admin-settings.png differ diff --git a/.playwright-mcp/admin-users-management.png b/.playwright-mcp/admin-users-management.png new file mode 100644 index 0000000..5f4e8ba Binary files /dev/null and b/.playwright-mcp/admin-users-management.png differ diff --git a/.playwright-mcp/audit-01-login-page.png b/.playwright-mcp/audit-01-login-page.png new file mode 100644 index 0000000..4ab633e Binary files /dev/null and b/.playwright-mcp/audit-01-login-page.png differ diff --git a/.playwright-mcp/audit-02-admin-dashboard.png b/.playwright-mcp/audit-02-admin-dashboard.png new file mode 100644 index 0000000..4ab633e Binary files /dev/null and b/.playwright-mcp/audit-02-admin-dashboard.png differ diff --git a/.playwright-mcp/audit-03-users-management.png b/.playwright-mcp/audit-03-users-management.png new file mode 100644 index 0000000..2eb53f3 Binary files /dev/null and b/.playwright-mcp/audit-03-users-management.png differ diff --git a/.playwright-mcp/audit-04-events-management.png b/.playwright-mcp/audit-04-events-management.png new file mode 100644 index 0000000..5100f41 Binary files /dev/null and b/.playwright-mcp/audit-04-events-management.png differ diff --git a/.playwright-mcp/audit-05-board-dashboard.png b/.playwright-mcp/audit-05-board-dashboard.png new file mode 100644 index 0000000..5e898ba Binary files /dev/null and b/.playwright-mcp/audit-05-board-dashboard.png differ diff --git a/.playwright-mcp/audit-06-member-dashboard.png b/.playwright-mcp/audit-06-member-dashboard.png new file mode 100644 index 0000000..8dbe104 Binary files /dev/null and b/.playwright-mcp/audit-06-member-dashboard.png differ diff --git a/.playwright-mcp/board-dashboard.png b/.playwright-mcp/board-dashboard.png index 3d22928..0741654 100644 Binary files a/.playwright-mcp/board-dashboard.png and b/.playwright-mcp/board-dashboard.png differ diff --git a/.playwright-mcp/board-governance.png b/.playwright-mcp/board-governance.png new file mode 100644 index 0000000..f3500a3 Binary files /dev/null and b/.playwright-mcp/board-governance.png differ diff --git a/.playwright-mcp/board-meetings.png b/.playwright-mcp/board-meetings.png new file mode 100644 index 0000000..47a3f8f Binary files /dev/null and b/.playwright-mcp/board-meetings.png differ diff --git a/.playwright-mcp/board-members.png b/.playwright-mcp/board-members.png new file mode 100644 index 0000000..bb963c9 Binary files /dev/null and b/.playwright-mcp/board-members.png differ diff --git a/.playwright-mcp/member-dashboard.png b/.playwright-mcp/member-dashboard.png index a1620b4..34d0133 100644 Binary files a/.playwright-mcp/member-dashboard.png and b/.playwright-mcp/member-dashboard.png differ diff --git a/.playwright-mcp/member-events.png b/.playwright-mcp/member-events.png new file mode 100644 index 0000000..31c4c64 Binary files /dev/null and b/.playwright-mcp/member-events.png differ diff --git a/.playwright-mcp/member-profile.png b/.playwright-mcp/member-profile.png new file mode 100644 index 0000000..065faf2 Binary files /dev/null and b/.playwright-mcp/member-profile.png differ diff --git a/.playwright-mcp/member-resources.png b/.playwright-mcp/member-resources.png new file mode 100644 index 0000000..db0f98c Binary files /dev/null and b/.playwright-mcp/member-resources.png differ diff --git a/.playwright-mcp/portal-landing-page.png b/.playwright-mcp/portal-landing-page.png new file mode 100644 index 0000000..b8ef91a Binary files /dev/null and b/.playwright-mcp/portal-landing-page.png differ diff --git a/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl b/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl index 6fe3819..f1eb18d 100644 Binary files a/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl and b/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl differ diff --git a/Design/README.md b/Design/README.md deleted file mode 100644 index 479057b..0000000 --- a/Design/README.md +++ /dev/null @@ -1,480 +0,0 @@ -# MonacoUSA Portal Design System Implementation Guide - -## 🎨 Overview - -This comprehensive guide outlines the complete visual redesign of the MonacoUSA Portal, transitioning from a standard Vuetify implementation to a premium, custom design system featuring Monaco's signature red and white color scheme with modern glass morphism effects. - -## 📋 Table of Contents - -1. [Design Philosophy](#design-philosophy) -2. [Technical Stack](#technical-stack) -3. [Migration Strategy](#migration-strategy) -4. [Component Architecture](#component-architecture) -5. [Implementation Roadmap](#implementation-roadmap) -6. [Performance Guidelines](#performance-guidelines) -7. [Accessibility Standards](#accessibility-standards) - -## Design Philosophy - -### Core Principles -- **Premium Feel**: Every interaction should feel smooth and sophisticated -- **Brand Identity**: Monaco's red (#dc2626) as the primary accent color -- **Modern Aesthetics**: Glass morphism, subtle animations, and floating elements -- **User Experience**: Intuitive navigation with clear visual hierarchy -- **Performance**: Animations that enhance, not hinder, user experience - -### Visual Language -- **Glass Morphism**: Semi-transparent surfaces with backdrop blur -- **Gradient Accents**: Dynamic gradients from Monaco red to deeper shades -- **Floating Elements**: Subtle shadows and depth for interactive components -- **Micro-animations**: Smooth transitions on hover, click, and state changes -- **Consistent Spacing**: 8px grid system for alignment and padding - -## Technical Stack - -### Current Setup -- **Framework**: Nuxt 3.8.2 -- **UI Library**: Vuetify 3.4.7 (to be replaced) -- **Icons**: Material Design Icons (transitioning to Lucide) -- **Authentication**: Keycloak integration -- **Styling**: SCSS with scoped components - -### New Additions -- **Animation Libraries**: - - VueUse Motion (preferred for Vue integration) - - GSAP (for complex animations) - - Anime.js (lightweight alternative) -- **Icons**: Lucide Icons (modern, customizable) -- **Utilities**: Tailwind CSS (for rapid prototyping) -- **State Management**: Pinia (already implemented) - -## Migration Strategy - -### Phase 1: Foundation (Week 1-2) -1. Set up new style architecture -2. Create base component library -3. Implement color system and typography -4. Set up animation utilities - -### Phase 2: Core Components (Week 3-4) -1. Replace navigation components -2. Implement custom dropdowns and selects -3. Create button variants -4. Build card components - -### Phase 3: Page Templates (Week 5-6) -1. Dashboard layouts -2. Data tables with glass effects -3. Form components -4. Modal and dialog systems - -### Phase 4: Polish & Optimization (Week 7-8) -1. Performance tuning -2. Accessibility audit -3. Cross-browser testing -4. Documentation completion - -## Component Architecture - -### File Structure -``` -components/ -├── ui/ # Base UI components -│ ├── MonacoButton.vue -│ ├── GlassCard.vue -│ ├── AnimatedDropdown.vue -│ └── FloatingInput.vue -├── layout/ # Layout components -│ ├── DashboardSidebar.vue -│ ├── AppHeader.vue -│ └── PageContainer.vue -├── features/ # Feature-specific components -│ ├── MemberCard.vue -│ ├── EventCalendar.vue -│ └── DuesTracker.vue -└── shared/ # Shared utilities - ├── LoadingSpinner.vue - ├── ErrorBoundary.vue - └── TransitionWrapper.vue -``` - -### Component Guidelines - -#### Naming Convention -- PascalCase for component files -- Prefix with "Monaco" for custom branded components -- Use descriptive names (e.g., `GlassDropdownMenu` not `Dropdown`) - -#### Props & Events -```vue - -``` - -#### Composition API Pattern -```vue - -``` - -## Implementation Roadmap - -### Week 1: Setup & Foundation -- [ ] Configure animation libraries -- [ ] Set up SCSS architecture -- [ ] Create color system utilities -- [ ] Implement base glass morphism styles -- [ ] Set up Lucide icons integration - -### Week 2: Core Components -- [ ] Custom dropdown components -- [ ] Button system with variants -- [ ] Card components with glass effects -- [ ] Form inputs with floating labels -- [ ] Navigation components - -### Week 3: Dashboard Implementation -- [ ] Member dashboard layout -- [ ] Board dashboard enhancements -- [ ] Admin panel structure -- [ ] Widget components -- [ ] Chart integrations - -### Week 4: Advanced Features -- [ ] Event calendar with animations -- [ ] Member management interface -- [ ] Dues payment flow -- [ ] Profile components -- [ ] Settings panels - -### Week 5: Responsive Design -- [ ] Mobile navigation -- [ ] Tablet optimizations -- [ ] Touch interactions -- [ ] Gesture support -- [ ] PWA enhancements - -### Week 6: Testing & Optimization -- [ ] Performance profiling -- [ ] Bundle optimization -- [ ] Lazy loading implementation -- [ ] Animation performance tuning -- [ ] Memory leak detection - -## Performance Guidelines - -### Animation Performance -```scss -// Use transform and opacity for animations -.animated-element { - will-change: transform, opacity; - transform: translateZ(0); // Enable hardware acceleration -} - -// Avoid animating expensive properties -// BAD: width, height, padding, margin -// GOOD: transform, opacity, filter -``` - -### Component Optimization -```vue - -
- -
- - - - - - -``` - -### Bundle Size Management -- Tree-shake unused Vuetify components -- Lazy load animation libraries -- Use dynamic imports for heavy features -- Implement code splitting by route -- Optimize images with next-gen formats - -## Accessibility Standards - -### WCAG 2.1 Compliance -- **Color Contrast**: Ensure 4.5:1 ratio for normal text -- **Focus Indicators**: Clear visual focus states -- **Keyboard Navigation**: Full keyboard support -- **Screen Readers**: Proper ARIA labels -- **Motion Sensitivity**: Respect prefers-reduced-motion - -### Implementation Examples -```vue - - - - - -``` - -## Style Guidelines - -### Color System -```scss -// Primary Colors -$monaco-red: #dc2626; -$monaco-red-dark: #b91c1c; -$monaco-red-light: #ef4444; -$monaco-white: #ffffff; - -// Gradients -$monaco-gradient: linear-gradient(135deg, $monaco-red 0%, $monaco-red-dark 100%); -$monaco-gradient-reverse: linear-gradient(135deg, $monaco-red-light 0%, $monaco-red 100%); - -// Glass Effects -$glass-bg: rgba(255, 255, 255, 0.7); -$glass-border: rgba(255, 255, 255, 0.3); -$glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -$glass-blur: 20px; -``` - -### Typography Scale -```scss -// Font Family -$font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; -$font-mono: 'Fira Code', 'Monaco', monospace; - -// Font Sizes -$text-xs: 0.75rem; // 12px -$text-sm: 0.875rem; // 14px -$text-base: 1rem; // 16px -$text-lg: 1.125rem; // 18px -$text-xl: 1.25rem; // 20px -$text-2xl: 1.5rem; // 24px -$text-3xl: 1.875rem; // 30px -$text-4xl: 2.25rem; // 36px -``` - -### Spacing System -```scss -// Based on 8px grid -$space-1: 0.25rem; // 4px -$space-2: 0.5rem; // 8px -$space-3: 0.75rem; // 12px -$space-4: 1rem; // 16px -$space-5: 1.25rem; // 20px -$space-6: 1.5rem; // 24px -$space-8: 2rem; // 32px -$space-10: 2.5rem; // 40px -$space-12: 3rem; // 48px -$space-16: 4rem; // 64px -``` - -## Component Examples - -### Glass Card Component -```vue - - - - - -``` - -## Testing Strategy - -### Unit Testing -```typescript -// components/__tests__/MonacoButton.spec.ts -import { mount } from '@vue/test-utils' -import MonacoButton from '~/components/ui/MonacoButton.vue' - -describe('MonacoButton', () => { - it('renders with correct variant class', () => { - const wrapper = mount(MonacoButton, { - props: { variant: 'gradient' } - }) - expect(wrapper.classes()).toContain('monaco-button--gradient') - }) - - it('emits click event', async () => { - const wrapper = mount(MonacoButton) - await wrapper.trigger('click') - expect(wrapper.emitted('click')).toHaveLength(1) - }) -}) -``` - -### E2E Testing -```typescript -// e2e/dashboard.spec.ts -import { test, expect } from '@playwright/test' - -test('dashboard loads with glass morphism effects', async ({ page }) => { - await page.goto('/dashboard') - - const glassCard = page.locator('.glass-card').first() - await expect(glassCard).toBeVisible() - - const styles = await glassCard.evaluate(el => - window.getComputedStyle(el) - ) - expect(styles.backdropFilter).toContain('blur') -}) -``` - -## Deployment Checklist - -### Pre-deployment -- [ ] Run full test suite -- [ ] Check bundle size (<500KB initial) -- [ ] Validate accessibility scores -- [ ] Test on all target browsers -- [ ] Optimize images and assets -- [ ] Review security headers - -### Performance Metrics -- First Contentful Paint: <1.5s -- Time to Interactive: <3s -- Cumulative Layout Shift: <0.1 -- First Input Delay: <100ms -- Lighthouse Score: >90 - -### Browser Support -- Chrome 90+ -- Firefox 88+ -- Safari 14+ -- Edge 90+ -- Mobile Safari 14+ -- Chrome Mobile 90+ - -## Resources - -### Documentation -- [Vue 3 Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) -- [Nuxt 3 Documentation](https://nuxt.com/docs) -- [VueUse Motion](https://motion.vueuse.org/) -- [GSAP Documentation](https://greensock.com/docs/) -- [Lucide Icons](https://lucide.dev/) - -### Design Inspiration -- [Glass Morphism Examples](https://glassmorphism.com/) -- [Monaco Brand Guidelines](internal-link) -- [Material Design 3](https://m3.material.io/) - -### Tools -- [Contrast Checker](https://webaim.org/resources/contrastchecker/) -- [Bundle Analyzer](https://github.com/nuxt/devtools) -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - -## Support - -For questions or assistance with implementation: -- Technical Lead: [Contact Info] -- Design Team: [Contact Info] -- Documentation: This guide and `/Design` folder - ---- - -*Last Updated: December 2024* -*Version: 1.0.0* \ No newline at end of file diff --git a/Design/components/dropdowns/AnimatedSelect.vue b/Design/components/dropdowns/AnimatedSelect.vue deleted file mode 100644 index 34c3901..0000000 --- a/Design/components/dropdowns/AnimatedSelect.vue +++ /dev/null @@ -1,510 +0,0 @@ - - - - - \ No newline at end of file diff --git a/Design/components/dropdowns/GlassDropdown.vue b/Design/components/dropdowns/GlassDropdown.vue deleted file mode 100644 index 117f7fc..0000000 --- a/Design/components/dropdowns/GlassDropdown.vue +++ /dev/null @@ -1,713 +0,0 @@ - - - - - \ No newline at end of file diff --git a/Design/components/dropdowns/MonacoDropdown.vue b/Design/components/dropdowns/MonacoDropdown.vue deleted file mode 100644 index aaaef89..0000000 --- a/Design/components/dropdowns/MonacoDropdown.vue +++ /dev/null @@ -1,391 +0,0 @@ - - - - - \ No newline at end of file diff --git a/Design/design-system.md b/Design/design-system.md deleted file mode 100644 index e50223c..0000000 --- a/Design/design-system.md +++ /dev/null @@ -1,1136 +0,0 @@ -# MonacoUSA Portal Design System v2.0 - -## Overview -The MonacoUSA Portal design system represents a premium, modern approach to web application interfaces, combining cutting-edge UI patterns with sophisticated animations and interactions. This system prioritizes beauty, functionality, and user engagement through carefully crafted visual experiences. - -## Design Philosophy - -### Core Principles - -#### 1. **Visual Elegance** -- Premium aesthetics that reflect Monaco's luxury and sophistication -- Beautiful, engaging interfaces that delight users -- Attention to detail in every interaction - -#### 2. **Motion & Life** -- Smooth, purposeful animations that guide user attention -- Micro-interactions that provide feedback and enhance usability -- Transitions that create seamless navigation experiences - -#### 3. **Modern Architecture** -- Bento grid layouts for flexible content organization -- Component-based design for consistency and maintainability -- Responsive patterns that adapt beautifully across devices - -#### 4. **Interactive Engagement** -- Customizable interfaces that users can personalize -- Draggable and reorderable components -- Real-time updates with smooth animations - -## 🎨 Visual Identity - -### Brand Colors - -#### Primary Palette -```scss -// Monaco Red Spectrum -$monaco-red-50: #fef2f2; -$monaco-red-100: #fee2e2; -$monaco-red-200: #fecaca; -$monaco-red-300: #fca5a5; -$monaco-red-400: #f87171; -$monaco-red-500: #ef4444; -$monaco-red-600: #dc2626; // Primary Brand Color -$monaco-red-700: #b91c1c; -$monaco-red-800: #991b1b; -$monaco-red-900: #7f1d1d; - -// Neutral Palette -$gray-50: #fafafa; -$gray-100: #f4f4f5; -$gray-200: #e4e4e7; -$gray-300: #d4d4d8; -$gray-400: #a1a1aa; -$gray-500: #71717a; -$gray-600: #52525b; -$gray-700: #3f3f46; -$gray-800: #27272a; -$gray-900: #18181b; -``` - -#### Gradient Definitions -```scss -// Primary Gradients -$gradient-monaco: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); -$gradient-monaco-light: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); -$gradient-monaco-dark: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%); - -// Accent Gradients -$gradient-sunset: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%); -$gradient-wine: linear-gradient(135deg, #991b1b 0%, #4c1d95 100%); -$gradient-royal: linear-gradient(135deg, #dc2626 0%, #1e40af 100%); - -// Glass Gradients -$gradient-glass-light: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%); -$gradient-glass-dark: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%); -``` - -### Typography - -#### Font Stack -```scss -// Primary Font Family -$font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - -// Monospace Font Family -$font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace; - -// Display Font (for headers) -$font-display: 'Poppins', $font-sans; -``` - -#### Type Scale -```scss -// Font Sizes -$text-xs: 0.75rem; // 12px -$text-sm: 0.875rem; // 14px -$text-base: 1rem; // 16px -$text-lg: 1.125rem; // 18px -$text-xl: 1.25rem; // 20px -$text-2xl: 1.5rem; // 24px -$text-3xl: 1.875rem; // 30px -$text-4xl: 2.25rem; // 36px -$text-5xl: 3rem; // 48px -$text-6xl: 3.75rem; // 60px -$text-7xl: 4.5rem; // 72px - -// Line Heights -$leading-none: 1; -$leading-tight: 1.25; -$leading-snug: 1.375; -$leading-normal: 1.5; -$leading-relaxed: 1.625; -$leading-loose: 2; - -// Font Weights -$font-thin: 100; -$font-light: 300; -$font-normal: 400; -$font-medium: 500; -$font-semibold: 600; -$font-bold: 700; -$font-extrabold: 800; -$font-black: 900; -``` - -### Spacing System - -```scss -// Based on 4px grid -$space-0: 0; // 0px -$space-px: 1px; // 1px -$space-0_5: 0.125rem; // 2px -$space-1: 0.25rem; // 4px -$space-1_5: 0.375rem; // 6px -$space-2: 0.5rem; // 8px -$space-2_5: 0.625rem; // 10px -$space-3: 0.75rem; // 12px -$space-3_5: 0.875rem; // 14px -$space-4: 1rem; // 16px -$space-5: 1.25rem; // 20px -$space-6: 1.5rem; // 24px -$space-7: 1.75rem; // 28px -$space-8: 2rem; // 32px -$space-9: 2.25rem; // 36px -$space-10: 2.5rem; // 40px -$space-12: 3rem; // 48px -$space-14: 3.5rem; // 56px -$space-16: 4rem; // 64px -$space-20: 5rem; // 80px -$space-24: 6rem; // 96px -$space-28: 7rem; // 112px -$space-32: 8rem; // 128px -``` - -### Border Radius - -```scss -$radius-none: 0; -$radius-sm: 0.125rem; // 2px -$radius-base: 0.25rem; // 4px -$radius-md: 0.375rem; // 6px -$radius-lg: 0.5rem; // 8px -$radius-xl: 0.75rem; // 12px -$radius-2xl: 1rem; // 16px -$radius-3xl: 1.5rem; // 24px -$radius-full: 9999px; // Pill shape -``` - -### Shadows - -```scss -// Elevation Shadows -$shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -$shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); -$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); -$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); -$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - -// Glass Shadows -$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1); -$shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.15); - -// Monaco Brand Shadows -$shadow-monaco: 0 10px 40px rgba(220, 38, 38, 0.15); -$shadow-monaco-intense: 0 20px 60px rgba(220, 38, 38, 0.25); -``` - -## 🎯 Component Patterns - -### Glass Morphism - -```scss -@mixin glass-effect($bg-opacity: 0.7, $blur: 20px) { - background: rgba(255, 255, 255, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: $shadow-glass; -} - -@mixin glass-dark($bg-opacity: 0.7, $blur: 20px) { - background: rgba(0, 0, 0, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: $shadow-glass; -} - -@mixin glass-colored($color: $monaco-red-600, $opacity: 0.1, $blur: 20px) { - background: rgba($color, $opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba($color, 0.2); - box-shadow: 0 8px 32px rgba($color, 0.1); -} -``` - -### Animation Patterns - -```scss -// Timing Functions -$ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1); -$ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); -$ease-in-out-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); - -// Duration Scale -$duration-instant: 0ms; -$duration-fast: 150ms; -$duration-base: 300ms; -$duration-slow: 500ms; -$duration-slower: 700ms; -$duration-slowest: 1000ms; - -// Animation Mixins -@mixin hover-lift($distance: -2px, $duration: $duration-base) { - transition: transform $duration $ease-in-out-smooth; - - &:hover { - transform: translateY($distance); - } -} - -@mixin hover-scale($scale: 1.05, $duration: $duration-base) { - transition: transform $duration $ease-in-out-smooth; - - &:hover { - transform: scale($scale); - } -} - -@mixin pulse-animation($scale: 1.05, $duration: 2s) { - animation: pulse $duration infinite; - - @keyframes pulse { - 0%, 100% { - transform: scale(1); - opacity: 1; - } - 50% { - transform: scale($scale); - opacity: 0.8; - } - } -} - -@mixin float-animation($distance: 10px, $duration: 3s) { - animation: float $duration ease-in-out infinite; - - @keyframes float { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-$distance); - } - } -} -``` - -### Button Variants - -```scss -// Base Button -@mixin button-base { - display: inline-flex; - align-items: center; - justify-content: center; - padding: $space-2_5 $space-5; - font-weight: $font-medium; - font-size: $text-sm; - line-height: $leading-tight; - border-radius: $radius-xl; - transition: all $duration-base $ease-in-out-smooth; - cursor: pointer; - user-select: none; - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - } -} - -// Primary Button -@mixin button-primary { - @include button-base; - background: $gradient-monaco; - color: white; - border: none; - box-shadow: $shadow-md; - - &:hover:not(:disabled) { - box-shadow: $shadow-monaco; - transform: translateY(-1px); - } - - &:active:not(:disabled) { - transform: translateY(0); - } -} - -// Glass Button -@mixin button-glass { - @include button-base; - @include glass-effect(0.8, 10px); - color: $monaco-red-600; - - &:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.9); - box-shadow: $shadow-glass-hover; - transform: translateY(-1px); - } -} - -// Ghost Button -@mixin button-ghost { - @include button-base; - background: transparent; - color: $monaco-red-600; - border: 2px solid $monaco-red-600; - - &:hover:not(:disabled) { - background: rgba($monaco-red-600, 0.1); - border-color: $monaco-red-700; - } -} -``` - -### Card Patterns - -```scss -// Base Card -@mixin card-base { - border-radius: $radius-2xl; - padding: $space-6; - transition: all $duration-base $ease-in-out-smooth; -} - -// Glass Card -@mixin card-glass { - @include card-base; - @include glass-effect; - - &:hover { - @include hover-lift(-4px); - box-shadow: $shadow-glass-hover; - } -} - -// Gradient Card -@mixin card-gradient { - @include card-base; - background: $gradient-monaco; - color: white; - box-shadow: $shadow-monaco; - - &:hover { - @include hover-lift(-4px); - box-shadow: $shadow-monaco-intense; - } -} - -// Floating Card -@mixin card-floating { - @include card-base; - background: white; - box-shadow: $shadow-lg; - @include float-animation(5px, 4s); - - &:hover { - animation-play-state: paused; - box-shadow: $shadow-xl; - } -} -``` - -### Form Elements - -```scss -// Input Base -@mixin input-base { - width: 100%; - padding: $space-3 $space-4; - font-size: $text-base; - border-radius: $radius-xl; - transition: all $duration-base $ease-in-out-smooth; - - &:focus { - outline: none; - } - - &::placeholder { - color: $gray-400; - } -} - -// Glass Input -@mixin input-glass { - @include input-base; - @include glass-effect(0.6, 10px); - border: 2px solid transparent; - - &:focus { - border-color: $monaco-red-600; - background: rgba(255, 255, 255, 0.8); - box-shadow: 0 0 0 3px rgba($monaco-red-600, 0.1); - } -} - -// Floating Label -@mixin floating-label { - position: relative; - - label { - position: absolute; - left: $space-4; - top: 50%; - transform: translateY(-50%); - transition: all $duration-base $ease-in-out-smooth; - pointer-events: none; - color: $gray-500; - font-size: $text-base; - } - - input:focus + label, - input:not(:placeholder-shown) + label { - top: 0; - transform: translateY(-50%) scale(0.8); - background: white; - padding: 0 $space-2; - color: $monaco-red-600; - } -} -``` - -## 🎭 Animation Library - -### Entrance Animations - -```scss -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes slide-up { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes scale-in { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@keyframes rotate-in { - from { - opacity: 0; - transform: rotate(-10deg) scale(0.9); - } - to { - opacity: 1; - transform: rotate(0) scale(1); - } -} -``` - -### Interaction Animations - -```scss -@keyframes bounce { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-10px); - } -} - -@keyframes shake { - 0%, 100% { - transform: translateX(0); - } - 25% { - transform: translateX(-5px); - } - 75% { - transform: translateX(5px); - } -} - -@keyframes wiggle { - 0%, 100% { - transform: rotate(0deg); - } - 25% { - transform: rotate(-3deg); - } - 75% { - transform: rotate(3deg); - } -} -``` - -### Loading Animations - -```scss -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@keyframes pulse-ring { - 0% { - transform: scale(0.5); - opacity: 1; - } - 80%, 100% { - transform: scale(1.5); - opacity: 0; - } -} - -@keyframes shimmer { - 0% { - background-position: -200% 0; - } - 100% { - background-position: 200% 0; - } -} - -.shimmer-effect { - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.3) 50%, - rgba(255, 255, 255, 0) 100% - ); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; -} -``` - -## 📱 Responsive Design - -### Breakpoints - -```scss -// Mobile First Breakpoints -$screen-sm: 640px; // Small devices -$screen-md: 768px; // Medium devices -$screen-lg: 1024px; // Large devices -$screen-xl: 1280px; // Extra large devices -$screen-2xl: 1536px; // 2X Extra large devices - -// Mixins -@mixin sm { - @media (min-width: $screen-sm) { - @content; - } -} - -@mixin md { - @media (min-width: $screen-md) { - @content; - } -} - -@mixin lg { - @media (min-width: $screen-lg) { - @content; - } -} - -@mixin xl { - @media (min-width: $screen-xl) { - @content; - } -} - -@mixin 2xl { - @media (min-width: $screen-2xl) { - @content; - } -} -``` - -### Container Widths - -```scss -.container { - width: 100%; - margin-left: auto; - margin-right: auto; - padding-left: $space-4; - padding-right: $space-4; - - @include sm { - max-width: $screen-sm; - } - - @include md { - max-width: $screen-md; - } - - @include lg { - max-width: $screen-lg; - } - - @include xl { - max-width: $screen-xl; - } - - @include 2xl { - max-width: $screen-2xl; - } -} -``` - -## 🎪 Motion Preferences - -```scss -// Respect user's motion preferences -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} - -// Dark mode support -@media (prefers-color-scheme: dark) { - :root { - --bg-primary: #{$gray-900}; - --text-primary: #{$gray-50}; - --glass-bg: rgba(0, 0, 0, 0.7); - --glass-border: rgba(255, 255, 255, 0.1); - } -} -``` - -## 🔧 Utility Classes - -### Display Utilities - -```scss -.hidden { display: none; } -.block { display: block; } -.inline-block { display: inline-block; } -.inline { display: inline; } -.flex { display: flex; } -.inline-flex { display: inline-flex; } -.grid { display: grid; } - -// Flexbox Utilities -.items-start { align-items: flex-start; } -.items-center { align-items: center; } -.items-end { align-items: flex-end; } -.justify-start { justify-content: flex-start; } -.justify-center { justify-content: center; } -.justify-end { justify-content: flex-end; } -.justify-between { justify-content: space-between; } -.flex-row { flex-direction: row; } -.flex-col { flex-direction: column; } -.flex-wrap { flex-wrap: wrap; } -.flex-1 { flex: 1 1 0%; } -.flex-auto { flex: 1 1 auto; } -``` - -### Spacing Utilities - -```scss -// Margin -@each $name, $size in ( - '0': $space-0, - '1': $space-1, - '2': $space-2, - '3': $space-3, - '4': $space-4, - '5': $space-5, - '6': $space-6, - '8': $space-8, - '10': $space-10, - '12': $space-12, - '16': $space-16 -) { - .m-#{$name} { margin: $size; } - .mt-#{$name} { margin-top: $size; } - .mr-#{$name} { margin-right: $size; } - .mb-#{$name} { margin-bottom: $size; } - .ml-#{$name} { margin-left: $size; } - .mx-#{$name} { - margin-left: $size; - margin-right: $size; - } - .my-#{$name} { - margin-top: $size; - margin-bottom: $size; - } -} - -// Padding (same pattern as margin) -``` - -### Text Utilities - -```scss -// Font Size -.text-xs { font-size: $text-xs; } -.text-sm { font-size: $text-sm; } -.text-base { font-size: $text-base; } -.text-lg { font-size: $text-lg; } -.text-xl { font-size: $text-xl; } -.text-2xl { font-size: $text-2xl; } -.text-3xl { font-size: $text-3xl; } -.text-4xl { font-size: $text-4xl; } - -// Font Weight -.font-thin { font-weight: $font-thin; } -.font-light { font-weight: $font-light; } -.font-normal { font-weight: $font-normal; } -.font-medium { font-weight: $font-medium; } -.font-semibold { font-weight: $font-semibold; } -.font-bold { font-weight: $font-bold; } - -// Text Alignment -.text-left { text-align: left; } -.text-center { text-align: center; } -.text-right { text-align: right; } -.text-justify { text-align: justify; } -``` - -## 🎯 Dashboard Patterns - -### Bento Grid Layout -Modern dashboard layout using CSS Grid with flexible item placement: - -```scss -.bento-grid { - display: grid; - grid-template-columns: repeat(12, 1fr); - gap: 1.5rem; - - .bento-item { - @include glass-premium; - border-radius: $radius-2xl; - padding: $space-6; - transition: all $duration-base $ease-in-out-smooth; - - &--small { grid-column: span 3; } - &--medium { grid-column: span 4; } - &--large { grid-column: span 6; } - &--xlarge { grid-column: span 8; } - &--full { grid-column: span 12; } - - &--tall { grid-row: span 2; } - - &:hover { - transform: translateY(-4px); - box-shadow: $shadow-glass-hover; - } - } -} -``` - -### Widget Components - -#### Statistics Card -```scss -.stat-card { - @include glass-premium(0.8, 25px); - position: relative; - overflow: hidden; - - .stat-value { - font-size: $text-4xl; - font-weight: $font-bold; - background: $gradient-monaco; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - .stat-change { - display: inline-flex; - align-items: center; - padding: $space-1 $space-2; - border-radius: $radius-full; - font-size: $text-sm; - font-weight: $font-semibold; - - &--positive { - background: rgba($success-500, 0.1); - color: $success-600; - } - - &--negative { - background: rgba($monaco-red-500, 0.1); - color: $monaco-red-600; - } - } - - .stat-chart { - position: absolute; - bottom: 0; - right: 0; - opacity: 0.2; - } -} -``` - -#### Activity Timeline -```scss -.timeline { - position: relative; - - &::before { - content: ''; - position: absolute; - left: 20px; - top: 0; - bottom: 0; - width: 2px; - background: $gradient-monaco; - opacity: 0.2; - } - - .timeline-item { - position: relative; - padding-left: 50px; - margin-bottom: $space-6; - animation: slide-up $duration-base $ease-in-out-smooth; - animation-fill-mode: both; - - @for $i from 1 through 10 { - &:nth-child(#{$i}) { - animation-delay: #{$i * 50}ms; - } - } - - .timeline-marker { - position: absolute; - left: 10px; - top: 0; - width: 20px; - height: 20px; - border-radius: $radius-full; - background: white; - border: 3px solid $monaco-red-600; - z-index: 1; - - &.pulse { - &::after { - content: ''; - position: absolute; - inset: -5px; - border-radius: $radius-full; - border: 2px solid $monaco-red-600; - animation: pulse-ring 2s infinite; - } - } - } - } -} -``` - -#### Draggable Dashboard -```scss -.draggable-grid { - .drag-handle { - position: absolute; - top: $space-4; - right: $space-4; - cursor: grab; - opacity: 0; - transition: opacity $duration-base; - - &:active { - cursor: grabbing; - } - } - - .draggable-item { - &:hover .drag-handle { - opacity: 0.5; - } - - &.dragging { - opacity: 0.5; - transform: scale(1.05); - z-index: 1000; - } - - &.drag-over { - background: rgba($monaco-red-600, 0.05); - border: 2px dashed $monaco-red-600; - } - } -} -``` - -### Enhanced Glass Effects - -```scss -@mixin glass-premium($opacity: 0.7, $blur: 30px) { - background: linear-gradient(135deg, - rgba(255, 255, 255, $opacity), - rgba(255, 255, 255, $opacity * 0.6) - ); - backdrop-filter: blur($blur) saturate(180%); - -webkit-backdrop-filter: blur($blur) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(0, 0, 0, 0.1); -} - -@mixin glass-frosted($color: white, $opacity: 0.1) { - background: rgba($color, $opacity); - backdrop-filter: blur(40px) saturate(200%) contrast(120%); - -webkit-backdrop-filter: blur(40px) saturate(200%) contrast(120%); - border: 1px solid rgba($color, 0.2); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.1), - inset 0 0 0 1px rgba(255, 255, 255, 0.1); -} -``` - -### Animation Patterns for Dashboard - -#### Number Counter Animation -```scss -@keyframes count-up { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.counter { - display: inline-block; - animation: count-up $duration-slow $ease-out-back; - - .digit { - display: inline-block; - animation: count-up $duration-slow $ease-out-back; - animation-fill-mode: both; - - @for $i from 1 through 10 { - &:nth-child(#{$i}) { - animation-delay: #{$i * 50}ms; - } - } - } -} -``` - -#### Progress Ring -```scss -.progress-ring { - position: relative; - width: 120px; - height: 120px; - - svg { - transform: rotate(-90deg); - } - - .progress-ring-circle { - fill: none; - stroke-width: 8; - - &--bg { - stroke: rgba($gray-300, 0.3); - } - - &--fill { - stroke: url(#gradient-monaco); - stroke-linecap: round; - transition: stroke-dashoffset $duration-slow $ease-in-out-smooth; - } - } - - .progress-value { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: $text-2xl; - font-weight: $font-bold; - } -} -``` - -### VueUse Motion Integration - -#### Configuration -```javascript -// Motion variants for dashboard components -export const dashboardMotions = { - // Card entrance - cardEnter: { - initial: { opacity: 0, scale: 0.9 }, - enter: { - opacity: 1, - scale: 1, - transition: { - type: 'spring', - stiffness: 200, - damping: 20 - } - } - }, - - // Statistics counter - statCounter: { - initial: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 600, - ease: 'easeOut' - } - } - }, - - // Timeline item - timelineItem: { - initial: { opacity: 0, x: -20 }, - visibleOnce: { - opacity: 1, - x: 0, - transition: { - duration: 500, - delay: 100 - } - } - }, - - // Hover lift - hoverLift: { - initial: { scale: 1 }, - hovered: { - scale: 1.02, - y: -4, - transition: { - type: 'spring', - stiffness: 400, - damping: 10 - } - } - } -} -``` - -#### Usage Example -```vue - -``` - ---- - -*MonacoUSA Portal Design System v2.0 - Premium Design for Premium Experiences* \ No newline at end of file diff --git a/Design/glass-morphism-implementation.md b/Design/glass-morphism-implementation.md deleted file mode 100644 index c4344e6..0000000 --- a/Design/glass-morphism-implementation.md +++ /dev/null @@ -1,230 +0,0 @@ -# Glass Morphism Implementation Guide - -## Overview -This document details the glass morphism design patterns implemented in the MonacoUSA Portal, following the design philosophy outlined in design-system.md. - -## Implementation Date -December 2024 - -## Latest Update -January 2025 - Enhanced Sidebar Design with Fixed Width - -## Key Changes - -### 1. Global SCSS Architecture -Created `assets/scss/main.scss` with comprehensive design system implementation: -- Monaco red color spectrum variables -- Glass morphism mixins -- Animation utilities -- Component classes -- Responsive breakpoints - -### 2. Layout Transformations - -#### Enhanced Sidebar Design (All Layouts) -- **Fixed Width**: 280px permanent sidebar (non-collapsible) -- **Enhanced Glass Effects**: 30px blur with improved opacity -- **No Hamburger Menu**: Removed collapse/expand functionality entirely -- **Vertical Profile Card**: Small avatar stacked above user info -- **Animated Navigation**: Hover effects with smooth transitions -- **Glass Badges**: Consistent styling across all access levels -- **Shimmer Animation**: Logo with subtle shimmer effect - -#### Admin Layout (`layouts/admin.vue`) -- **Enhanced Glass Navigation**: Fixed 280px width with enhanced blur -- **Gradient App Bar**: Dark gradient from monaco-red-600 to monaco-red-900 -- **Glass Icon Buttons**: Semi-transparent with hover effects -- **Profile Card**: Vertical layout with admin-specific menu options - -#### Board Layout (`layouts/board.vue`) -- **Enhanced Glass Navigation**: Consistent 280px fixed width -- **Gradient App Bar**: Softer gradient from monaco-red to brown tones -- **Glass Search Dialog**: Search overlay with glass card styling -- **Profile Card**: Board member profile with vertical layout - -#### Member Layout (`layouts/member.vue`) -- **Enhanced Glass Navigation**: Same 280px fixed width design -- **Gradient App Bar**: Lightest gradient for member access level -- **Streamlined Navigation**: Fewer menu items with clear hierarchy -- **Profile Card**: Member profile with consistent vertical layout - -## Glass Morphism Patterns - -### Core Mixins - -```scss -// Enhanced glass effect with stronger blur -@mixin enhanced-glass($opacity: 0.9, $blur: 30px) { - background: linear-gradient( - 135deg, - rgba(255, 255, 255, $opacity * 0.95), - rgba(255, 255, 255, $opacity * 0.85), - rgba(255, 255, 255, $opacity * 0.75) - ); - backdrop-filter: blur($blur) saturate(180%); - -webkit-backdrop-filter: blur($blur) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.25); - box-shadow: - 0 8px 32px 0 rgba(31, 38, 135, 0.37), - inset 0 1px 2px rgba(255, 255, 255, 0.6), - inset 0 -1px 2px rgba(0, 0, 0, 0.05); -} -``` - -### Component Classes - -#### Glass Cards -- `.glass-card`: Base glass effect card -- `.glass-card--dark`: Dark variant for dark backgrounds -- `.glass-card--colored`: Monaco red tinted glass - -#### Navigation Items -- `.glass-nav-item`: Main navigation items with hover effects -- `.glass-nav-item-sub`: Sub-navigation items with reduced opacity -- Active states include gradient backgrounds and left border accent - -#### Buttons -- `.glass-icon-btn`: Icon buttons with glass effect -- `.monaco-btn--primary`: Primary buttons with Monaco gradient -- `.monaco-btn--glass`: Glass variant buttons - -## Visual Hierarchy - -### Access Level Differentiation -1. **Admin**: Darkest gradients (monaco-red-900 range) -2. **Board**: Medium gradients (monaco-red-700 range) -3. **Member**: Lightest gradients (monaco-red-500 range) - -### Depth & Layering -- Navigation drawer: Fixed 280px width, 90% opacity, 30px blur -- Profile card: Vertical layout with small avatar -- Dropdowns: 95% opacity, 20px blur -- Cards: 80% opacity, 15px blur -- Buttons: 10-20% opacity, 10px blur -- No collapsible functionality - permanent fixed sidebar - -## Animation Patterns - -### Float Animation -```scss -@keyframes float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } -} -``` -Applied to logo for subtle movement. - -### Hover Effects -- Navigation items: translateX(2px) on hover -- Buttons: translateY(-1px) with shadow enhancement -- Cards: translateY(-2px) with increased shadow - -## Color Usage - -### Primary Monaco Red Spectrum -- `#dc2626` - Primary brand color -- `#b91c1c` - Dark accent -- `#ef4444` - Light accent -- `#991b1b` - Deep red for admin -- `#7f1d1d` - Darkest tone - -### Gradients -- **Monaco Gradient**: `linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)` -- **Admin Gradient**: Darker tones for authority -- **Board Gradient**: Balanced mid-tones -- **Member Gradient**: Lighter, welcoming tones - -## Responsive Considerations - -### Breakpoints -- Mobile: < 640px -- Tablet: 640px - 1024px -- Desktop: > 1024px - -### Mobile Optimizations -- Reduced blur effects for performance -- Simplified gradients -- Adjusted spacing and margins -- Auto-closing navigation drawer - -## Performance Optimizations - -### CSS Optimizations -- Hardware acceleration with `transform: translateZ(0)` -- Will-change property for animated elements -- Reduced motion preferences respected - -### Blur Performance -- Limited blur radius to maximum 30px -- Selective application on key elements -- Fallback styles for non-supporting browsers - -## Browser Compatibility - -### Supported Browsers -- Chrome 90+ -- Firefox 88+ -- Safari 14+ -- Edge 90+ - -### Fallbacks -- Solid backgrounds for browsers without backdrop-filter -- Standard box-shadows without blur -- Graceful degradation for older browsers - -## Implementation Checklist - -### Completed -- [x] Global SCSS architecture -- [x] Admin layout glass morphism -- [x] Board layout glass morphism -- [x] Member layout glass morphism -- [x] Monaco color system integration -- [x] Animation patterns -- [x] Responsive design -- [x] Browser compatibility - -### Future Enhancements -- [ ] Component library with glass variants -- [ ] Dark mode glass effects -- [ ] Advanced animation sequences -- [ ] Performance monitoring -- [ ] A/B testing for user preference - -## Usage Guidelines - -### When to Use Glass Effects -1. **Primary UI Elements**: Navigation, headers, cards -2. **Overlays**: Modals, dialogs, dropdowns -3. **Interactive Elements**: Buttons, form fields -4. **Status Indicators**: Badges, chips, alerts - -### When to Avoid -1. **Body Text Areas**: Maintain readability -2. **High-Frequency Updates**: Performance consideration -3. **Critical Actions**: Ensure clarity over aesthetics -4. **Accessibility Concerns**: Provide alternatives - -## Maintenance Notes - -### File Locations -- **SCSS**: `assets/scss/main.scss` -- **Layouts**: `layouts/admin.vue`, `layouts/board.vue`, `layouts/member.vue` -- **Config**: `nuxt.config.ts` (theme configuration) - -### Update Process -1. Modify SCSS variables in main.scss -2. Test across all layouts -3. Verify responsive behavior -4. Check browser compatibility -5. Update this documentation - -## Related Documentation -- [Design System](./design-system.md) -- [Implementation Guide](./README.md) -- [Component Architecture](../components/README.md) - ---- - -*Last Updated: December 2024* -*Implementation Version: 1.0.0* \ No newline at end of file diff --git a/Design/mockups/dashboard-board-stunning.html b/Design/mockups/dashboard-board-stunning.html deleted file mode 100644 index 211da81..0000000 --- a/Design/mockups/dashboard-board-stunning.html +++ /dev/null @@ -1,651 +0,0 @@ - - - - - - MonacoUSA Portal - Board Dashboard - - - - - - - -
-
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-
-
-

MonacoUSA Portal

-

Board Executive Dashboard

-
-
- - - - - -
- - - - -
-
-

Board Executive

-

Administrative Access

-
-
- Profile - -
-
-
-
-
-
- - - - - -
- -
-
-
-

Board Executive Dashboard

-

Real-time organization management and insights

-
-
-
-

Last Updated

-

2 min ago

-
- -
-
-
- - -
- -
-
-
- -
-
- - +12% -
-
-

Total Members

-

287

-
- Target: 300 -
-
-
-
-
- - -
-
-
- -
-
- - +8% -
-
-

YTD Revenue

-

$43,050

-
- Goal: $50,000 -
-
-
-
-
- - -
-
-
- -
- ACTION -
-

Overdue Dues

-

43

-
- Amount: $6,450 - -
-
- - -
-
-
- -
-
- - +25% -
-
-

Avg Attendance

-

89%

-
- Last 3 events -
-
-
-
-
-
-
-
- - -
-
-
-
-
-
- -
-
-

43 Members with Overdue Dues

-

Total outstanding amount: $6,450 • Average days overdue: 67

-
-
-
- - -
-
-
-
- - -
- -
-
-
-

Dues Management

-
- - - -
-
- - -
- -
-
-
- Member -
-

Annette Anderson

-
- ID: MUSA-16 - • - 85 days overdue -
-
-
-
-
-

$150

-

Due Jun 6, 2024

-
-
- - - -
-
-
-
- - -
-
-
- Member -
-

Danilo Copiz

-
- ID: MUSA-19 - • - 85 days overdue -
-
-
-
-
-

$150

-

Due Jun 6, 2024

-
-
- - - -
-
-
-
- - -
-
-
- Member -
-

Ian Sosso

-
- ID: MUSA-78 - • - 81 days overdue -
-
-
-
-
-

$150

-

Due Jun 10, 2024

-
-
- - - -
-
-
-
-
- -
- -
-
-
- - -
- -
-

Revenue Trend

-
- -
-
- - -
-

Quick Actions

-
- - - -
-
-
-
-
- - - - \ No newline at end of file diff --git a/Design/mockups/dashboard-member-stunning.html b/Design/mockups/dashboard-member-stunning.html deleted file mode 100644 index 36cc431..0000000 --- a/Design/mockups/dashboard-member-stunning.html +++ /dev/null @@ -1,601 +0,0 @@ - - - - - - MonacoUSA Portal - Member Dashboard - - - - - - -
-
-
-
-
- - -
-
-
- -
- -
-
-
-
-
-
-
- -
-

- MonacoUSA Portal -

-

Excellence in Community

-
-
- - - - - -
- - - - - - - -
-
-

Matthew Ciaccio

-

Gold Member

-
-
-
- Profile -
-
-
-
-
-
- - - - - -
- -
-
-
-
-

Welcome back, Matthew! 👋

-

Your membership is active and you have 2 upcoming events this week.

- - -
-
-
- Portal Status: Online -
-
- - Members Online: 34 -
-
- - Next Event: Dec 15 -
-
-
-
-
- - -
- -
-
-
-
-
- -
- ACTIVE -
-

Membership Status

-

Active

-
-
- Expires - Dec 31, 2024 -
-
-
-
- - -
-
-
-
-
- -
- DUE SOON -
-

Annual Dues

-

$150

-
- -
-
-
- - -
-
-
-
-
- -
- THIS YEAR -
-

Events Attended

-

12

-
-
- Upcoming - 3 events -
-
-
-
- - -
-
-
-
-
- -
- TOP 10% -
-

Member Points

-

2,450

-
-
-
-
-

550 points to Platinum

-
-
-
-
- - -
-
-
-
-
-
-
- -
- FEATURED EVENT -
-

Annual Monaco Gala 2024

-

Join us for an elegant evening celebrating Monaco's heritage and culture. Black tie event with dinner, entertainment, and networking.

-
-
- - December 15, 2024 -
-
- - 7:00 PM - 11:00 PM -
-
- - Monaco Embassy, Washington DC -
-
-
-
- - -
-
-
-
- - -
- -
-
-
-

Recent Activity

- -
- -
- -
-
- -
-
-

New member joined

-

Sarah Johnson joined as a Silver member

-

2 hours ago

-
-
- - -
-
- -
-
-

Event reminder

-

Wine Tasting Event is coming up in 3 days

-

5 hours ago

-
-
- - -
-
- -
-
-

Achievement unlocked!

-

You've attended 10+ events this year

-

1 day ago

-
-
-
-
-
- - -
-
-

Member Spotlight

- -
-
- Member -
- -
-
-

John Smith

-

Board Member

-
- - PLATINUM MEMBER -
- -
-
-
-

15

-

Years

-
-
-

89

-

Events

-
-
-

5.2k

-

Points

-
-
-
- - -
-
-
-
-
- - -
- -
- - - - \ No newline at end of file diff --git a/assets/scss/components/_dashboards.scss b/assets/scss/components/_dashboards.scss new file mode 100644 index 0000000..8ea6155 --- /dev/null +++ b/assets/scss/components/_dashboards.scss @@ -0,0 +1,472 @@ +// ============================================ +// Dashboard Component Styles +// Professional enhancements for all dashboards +// ============================================ + +// Dashboard Container +.admin-dashboard, +.board-dashboard, +.member-dashboard { + padding: 2rem; + min-height: 100vh; + background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%); + + @media (max-width: 768px) { + padding: 1rem; + } +} + +// Enhanced Dashboard Header +.dashboard-header { + text-align: center; + padding: 3rem 2rem; + margin-bottom: 2rem; + position: relative; + overflow: hidden; + + &.glass-header { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 24px; + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.5); + + &::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle, + rgba(220, 38, 38, 0.03) 0%, + transparent 70% + ); + animation: float 20s ease-in-out infinite; + } + } + + .dashboard-title { + font-size: 3rem; + font-weight: 800; + margin-bottom: 0.5rem; + letter-spacing: -0.02em; + + &.text-gradient { + background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + @media (max-width: 768px) { + font-size: 2rem; + } + } + + .dashboard-subtitle { + font-size: 1.125rem; + color: #64748b; + font-weight: 500; + } +} + +// Enhanced Stat Cards +.stat-card { + height: 100%; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + .stat-value { + font-size: 2.5rem; + font-weight: 700; + color: #1f2937; + line-height: 1.2; + margin: 0.5rem 0; + + @media (max-width: 768px) { + font-size: 2rem; + } + } + + &:hover { + transform: translateY(-6px) scale(1.02); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.15), + 0 10px 30px rgba(220, 38, 38, 0.1); + } + + .v-avatar { + background: linear-gradient(135deg, + rgba(var(--v-theme-on-surface), 0.05) 0%, + rgba(var(--v-theme-on-surface), 0.02) 100%); + } +} + +// Enhanced Glass Cards +.glass-card { + background: rgba(255, 255, 255, 0.88) !important; + backdrop-filter: blur(16px) saturate(180%) !important; + -webkit-backdrop-filter: blur(16px) saturate(180%) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: + 0 10px 40px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; + + &:hover { + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; + } +} + +// Enhanced Bento Grid +.bento-grid { + display: grid !important; + grid-template-columns: repeat(12, 1fr) !important; + gap: 1.5rem !important; + margin-bottom: 2rem; + + .bento-item { + position: relative; + + &--small { + grid-column: span 3 !important; + + @media (max-width: 1280px) { + grid-column: span 6 !important; + } + + @media (max-width: 768px) { + grid-column: span 12 !important; + } + } + + &--medium { + grid-column: span 4 !important; + + @media (max-width: 1280px) { + grid-column: span 6 !important; + } + + @media (max-width: 768px) { + grid-column: span 12 !important; + } + } + + &--large { + grid-column: span 6 !important; + + @media (max-width: 768px) { + grid-column: span 12 !important; + } + } + + &--xlarge { + grid-column: span 8 !important; + + @media (max-width: 1280px) { + grid-column: span 12 !important; + } + } + + &--full { + grid-column: span 12 !important; + } + } +} + +// Enhanced Data Tables +.v-data-table { + background: transparent !important; + + .v-data-table__wrapper { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-radius: 16px; + overflow: hidden; + } + + thead { + background: linear-gradient(135deg, + rgba(220, 38, 38, 0.03) 0%, + rgba(185, 28, 28, 0.01) 100%); + + th { + font-weight: 600 !important; + font-size: 0.75rem !important; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #64748b !important; + padding: 1rem !important; + } + } + + tbody { + tr { + transition: all 0.2s ease; + + &:hover { + background: rgba(220, 38, 38, 0.02) !important; + + td { + color: #1f2937 !important; + } + } + + td { + padding: 1rem !important; + font-size: 0.875rem; + color: #475569; + } + } + } +} + +// Enhanced Buttons in Dashboards +.dashboard-action-btn { + position: relative; + overflow: hidden; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.5); + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; + } + + &:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2); + + &::before { + width: 300px; + height: 300px; + } + } +} + +// Activity Timeline Enhancement +.activity-timeline { + .v-timeline-item { + &::before { + background: linear-gradient(180deg, + rgba(220, 38, 38, 0.1) 0%, + transparent 100%); + } + + .v-timeline-item__dot { + box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2); + } + } +} + +// Quick Actions Enhancement +.quick-actions-card { + .v-btn { + margin: 0.25rem; + + &:hover { + transform: translateY(-2px); + } + } +} + +// Enhanced Loading States +.skeleton-loader { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.5) 25%, + rgba(255, 255, 255, 0.8) 50%, + rgba(255, 255, 255, 0.5) 75% + ); + background-size: 200% 100%; + animation: loading 1.5s infinite; +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) rotate(0deg); + } + 33% { + transform: translate(30px, -30px) rotate(120deg); + } + 66% { + transform: translate(-20px, 20px) rotate(240deg); + } +} + +// Animated Entrance +.animated-entrance { + animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; +} + +@keyframes slideInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Professional Typography in Dashboards +.dashboard-section-title { + font-size: 1.5rem; + font-weight: 700; + color: #1f2937; + margin-bottom: 1.5rem; + position: relative; + padding-left: 1rem; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 24px; + background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); + border-radius: 2px; + } +} + +// Status Badges Enhancement +.status-badge { + padding: 0.25rem 0.75rem; + border-radius: 999px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + display: inline-flex; + align-items: center; + gap: 0.25rem; + + &--active { + background: linear-gradient(135deg, + rgba(34, 197, 94, 0.1) 0%, + rgba(34, 197, 94, 0.05) 100%); + color: #16a34a; + border: 1px solid rgba(34, 197, 94, 0.2); + } + + &--pending { + background: linear-gradient(135deg, + rgba(245, 158, 11, 0.1) 0%, + rgba(245, 158, 11, 0.05) 100%); + color: #ca8a04; + border: 1px solid rgba(245, 158, 11, 0.2); + } + + &--inactive { + background: linear-gradient(135deg, + rgba(107, 114, 128, 0.1) 0%, + rgba(107, 114, 128, 0.05) 100%); + color: #6b7280; + border: 1px solid rgba(107, 114, 128, 0.2); + } +} + +// Chart Card Enhancement +.chart-card { + .chart-header { + padding: 1.5rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + + .chart-title { + font-size: 1.125rem; + font-weight: 600; + color: #1f2937; + } + + .chart-subtitle { + font-size: 0.875rem; + color: #64748b; + margin-top: 0.25rem; + } + } + + .chart-body { + padding: 1.5rem; + position: relative; + } +} + +// Responsive Improvements +@media (max-width: 768px) { + .dashboard-header { + padding: 2rem 1rem; + + .dashboard-title { + font-size: 1.75rem; + } + + .dashboard-subtitle { + font-size: 1rem; + } + } + + .bento-grid { + gap: 1rem !important; + } + + .stat-card { + .stat-value { + font-size: 1.75rem; + } + } +} + +// Dark Mode Support +@media (prefers-color-scheme: dark) { + .admin-dashboard, + .board-dashboard, + .member-dashboard { + background: linear-gradient(135deg, #18181b 0%, #27272a 100%); + } + + .dashboard-header.glass-header { + background: rgba(30, 30, 30, 0.9); + border-color: rgba(255, 255, 255, 0.1); + } + + .glass-card { + background: rgba(30, 30, 30, 0.88) !important; + border-color: rgba(255, 255, 255, 0.1) !important; + } + + .dashboard-title.text-gradient { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .stat-value, + .dashboard-section-title { + color: #f4f4f5; + } +} \ No newline at end of file diff --git a/assets/scss/design-system-v2.scss b/assets/scss/design-system-v2.scss new file mode 100644 index 0000000..278f9d7 --- /dev/null +++ b/assets/scss/design-system-v2.scss @@ -0,0 +1,548 @@ +// Monaco USA Portal - Design System v2.0 +// Addressing critical issues from visual audit + +// ============================================ +// 1. COLOR PALETTE - Standardized +// ============================================ + +// Brand Colors +$monaco-red: #DC143C; +$monaco-red-dark: #B91C3C; +$monaco-red-light: #FF6B8A; +$monaco-white: #FFFFFF; +$monaco-gold: #FFD700; + +// Semantic Colors +$color-success: #10B981; +$color-warning: #F59E0B; +$color-error: #EF4444; +$color-info: #3B82F6; + +// Neutral Palette +$neutral-900: #0F172A; +$neutral-800: #1E293B; +$neutral-700: #334155; +$neutral-600: #475569; +$neutral-500: #64748B; +$neutral-400: #94A3B8; +$neutral-300: #CBD5E1; +$neutral-200: #E2E8F0; +$neutral-100: #F1F5F9; +$neutral-50: #F8FAFC; + +// Glass Morphism +$glass-white: rgba(255, 255, 255, 0.1); +$glass-white-hover: rgba(255, 255, 255, 0.15); +$glass-border: rgba(255, 255, 255, 0.2); +$glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + +// ============================================ +// 2. TYPOGRAPHY - Consistent Hierarchy +// ============================================ + +// Font Family +$font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +$font-mono: 'Fira Code', 'Monaco', monospace; + +// Font Sizes - Using rem for accessibility +$text-xs: 0.75rem; // 12px +$text-sm: 0.875rem; // 14px +$text-base: 1rem; // 16px +$text-lg: 1.125rem; // 18px +$text-xl: 1.25rem; // 20px +$text-2xl: 1.5rem; // 24px +$text-3xl: 1.875rem; // 30px +$text-4xl: 2.25rem; // 36px +$text-5xl: 3rem; // 48px + +// Line Heights +$leading-none: 1; +$leading-tight: 1.2; +$leading-snug: 1.375; +$leading-normal: 1.6; +$leading-relaxed: 1.75; +$leading-loose: 2; + +// Font Weights +$font-light: 300; +$font-regular: 400; +$font-medium: 500; +$font-semibold: 600; +$font-bold: 700; +$font-extrabold: 800; + +// ============================================ +// 3. SPACING SYSTEM - 8px Grid +// ============================================ + +$space-px: 1px; +$space-0: 0; +$space-1: 0.25rem; // 4px +$space-2: 0.5rem; // 8px +$space-3: 0.75rem; // 12px +$space-4: 1rem; // 16px +$space-5: 1.25rem; // 20px +$space-6: 1.5rem; // 24px +$space-7: 1.75rem; // 28px +$space-8: 2rem; // 32px +$space-10: 2.5rem; // 40px +$space-12: 3rem; // 48px +$space-16: 4rem; // 64px +$space-20: 5rem; // 80px +$space-24: 6rem; // 96px + +// ============================================ +// 4. BORDER RADIUS - Consistent Curves +// ============================================ + +$radius-none: 0; +$radius-sm: 0.25rem; // 4px +$radius-md: 0.5rem; // 8px +$radius-lg: 0.75rem; // 12px +$radius-xl: 1rem; // 16px +$radius-2xl: 1.5rem; // 24px +$radius-full: 9999px; + +// ============================================ +// 5. SHADOWS - Depth System +// ============================================ + +$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); +$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); +$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); +$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); +$shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); +$shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); +$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1); + +// ============================================ +// 6. BREAKPOINTS - Mobile First +// ============================================ + +$breakpoint-sm: 640px; +$breakpoint-md: 768px; +$breakpoint-lg: 1024px; +$breakpoint-xl: 1280px; +$breakpoint-2xl: 1536px; + +@mixin sm { + @media (min-width: $breakpoint-sm) { @content; } +} + +@mixin md { + @media (min-width: $breakpoint-md) { @content; } +} + +@mixin lg { + @media (min-width: $breakpoint-lg) { @content; } +} + +@mixin xl { + @media (min-width: $breakpoint-xl) { @content; } +} + +@mixin xxl { + @media (min-width: $breakpoint-2xl) { @content; } +} + +// ============================================ +// 7. TRANSITIONS - Smooth Interactions +// ============================================ + +$ease-linear: linear; +$ease-in: cubic-bezier(0.4, 0, 1, 1); +$ease-out: cubic-bezier(0, 0, 0.2, 1); +$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); +$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); + +$duration-fast: 150ms; +$duration-normal: 250ms; +$duration-slow: 350ms; +$duration-slower: 500ms; + +// ============================================ +// 8. Z-INDEX SCALE - Layering System +// ============================================ + +$z-negative: -1; +$z-0: 0; +$z-10: 10; +$z-20: 20; +$z-30: 30; +$z-40: 40; +$z-50: 50; +$z-dropdown: 1000; +$z-sticky: 1020; +$z-fixed: 1030; +$z-modal-backdrop: 1040; +$z-modal: 1050; +$z-popover: 1060; +$z-tooltip: 1070; +$z-notification: 1080; + +// ============================================ +// 9. IMPROVED GLASS EFFECT MIXIN +// ============================================ + +@mixin glass-effect( + $blur: 10px, + $opacity: 0.1, + $border-opacity: 0.2, + $shadow: true +) { + background: rgba(255, 255, 255, $opacity); + + @supports (backdrop-filter: blur($blur)) or (-webkit-backdrop-filter: blur($blur)) { + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + } + + border: 1px solid rgba(255, 255, 255, $border-opacity); + + @if $shadow { + box-shadow: $shadow-glass; + } + + transition: all $duration-normal $ease-out; + + &:hover { + background: rgba(255, 255, 255, $opacity + 0.05); + border-color: rgba(255, 255, 255, $border-opacity + 0.1); + + @if $shadow { + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); + } + } +} + +// ============================================ +// 10. COMPONENT CLASSES - Reusable Styles +// ============================================ + +// Cards +.card-base { + @include glass-effect(12px, 0.08, 0.18, true); + border-radius: $radius-xl; + padding: $space-6; + margin-bottom: $space-4; + + @include md { + padding: $space-8; + } +} + +// Buttons +@mixin button-base { + display: inline-flex; + align-items: center; + justify-content: center; + gap: $space-2; + padding: $space-3 $space-6; + border-radius: $radius-lg; + font-weight: $font-medium; + transition: all $duration-normal $ease-out; + cursor: pointer; + border: 1px solid transparent; + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &:focus-visible { + outline: 2px solid $monaco-red; + outline-offset: 2px; + } +} + +.btn-primary { + @include button-base; + background: linear-gradient(135deg, $monaco-red 0%, $monaco-red-dark 100%); + color: white; + + &:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba($monaco-red, 0.3); + } + + &:active:not(:disabled) { + transform: translateY(0); + } +} + +.btn-secondary { + @include button-base; + background: $neutral-100; + color: $neutral-800; + border-color: $neutral-300; + + &:hover:not(:disabled) { + background: $neutral-200; + border-color: $neutral-400; + } +} + +.btn-ghost { + @include button-base; + background: transparent; + color: $neutral-600; + + &:hover:not(:disabled) { + background: $neutral-100; + color: $neutral-800; + } +} + +// Typography Classes +.heading-1 { + font-size: $text-4xl; + font-weight: $font-bold; + line-height: $leading-tight; + color: $neutral-900; + + @include md { + font-size: $text-5xl; + } +} + +.heading-2 { + font-size: $text-3xl; + font-weight: $font-semibold; + line-height: $leading-tight; + color: $neutral-900; + + @include md { + font-size: $text-4xl; + } +} + +.heading-3 { + font-size: $text-2xl; + font-weight: $font-semibold; + line-height: $leading-snug; + color: $neutral-800; +} + +.heading-4 { + font-size: $text-xl; + font-weight: $font-medium; + line-height: $leading-snug; + color: $neutral-800; +} + +.body-text { + font-size: $text-base; + line-height: $leading-normal; + color: $neutral-700; +} + +.small-text { + font-size: $text-sm; + line-height: $leading-normal; + color: $neutral-600; +} + +// ============================================ +// 11. LAYOUT UTILITIES +// ============================================ + +.container { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 0 $space-4; + + @include md { + padding: 0 $space-6; + } + + @include lg { + padding: 0 $space-8; + } +} + +.grid { + display: grid; + gap: $space-4; + + &.grid-cols-1 { + grid-template-columns: repeat(1, 1fr); + } + + @include md { + &.md\:grid-cols-2 { + grid-template-columns: repeat(2, 1fr); + } + } + + @include lg { + &.lg\:grid-cols-3 { + grid-template-columns: repeat(3, 1fr); + } + + &.lg\:grid-cols-4 { + grid-template-columns: repeat(4, 1fr); + } + } +} + +.flex { + display: flex; + + &.flex-col { + flex-direction: column; + } + + &.items-center { + align-items: center; + } + + &.justify-between { + justify-content: space-between; + } + + &.gap-2 { + gap: $space-2; + } + + &.gap-4 { + gap: $space-4; + } +} + +// ============================================ +// 12. ANIMATION CLASSES +// ============================================ + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideIn { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.animate-fadeIn { + animation: fadeIn $duration-normal $ease-out; +} + +.animate-slideIn { + animation: slideIn $duration-slow $ease-out; +} + +.animate-pulse { + animation: pulse 2s $ease-in-out infinite; +} + +// ============================================ +// 13. ACCESSIBILITY UTILITIES +// ============================================ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.focus-visible { + &:focus-visible { + outline: 2px solid $monaco-red; + outline-offset: 2px; + border-radius: $radius-sm; + } +} + +// ============================================ +// 14. STATUS INDICATORS +// ============================================ + +.status-badge { + display: inline-flex; + align-items: center; + padding: $space-1 $space-3; + border-radius: $radius-full; + font-size: $text-xs; + font-weight: $font-semibold; + text-transform: uppercase; + letter-spacing: 0.05em; + + &.status-overdue { + background: rgba($color-error, 0.1); + color: $color-error; + border: 1px solid rgba($color-error, 0.2); + } + + &.status-pending { + background: rgba($color-warning, 0.1); + color: $color-warning; + border: 1px solid rgba($color-warning, 0.2); + } + + &.status-paid { + background: rgba($color-success, 0.1); + color: $color-success; + border: 1px solid rgba($color-success, 0.2); + } +} + +// ============================================ +// 15. LOADING STATES +// ============================================ + +.skeleton { + background: linear-gradient( + 90deg, + $neutral-200 25%, + $neutral-100 50%, + $neutral-200 75% + ); + background-size: 200% 100%; + animation: loading 1.5s infinite; + border-radius: $radius-md; + + &.skeleton-text { + height: $space-4; + margin-bottom: $space-2; + } + + &.skeleton-card { + height: 120px; + margin-bottom: $space-4; + } +} + +@keyframes loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index d97b96d..83ea510 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,6 +1,9 @@ // MonacoUSA Portal - Main Stylesheet // Based on design-system.md specifications +// Import component styles +@import 'components/dashboards'; + // ============================================ // 1. Variables & Design Tokens // ============================================ diff --git a/design-mockups/DESIGN-SYSTEM-V2.md b/design-mockups/DESIGN-SYSTEM-V2.md deleted file mode 100644 index 10e0004..0000000 --- a/design-mockups/DESIGN-SYSTEM-V2.md +++ /dev/null @@ -1,690 +0,0 @@ -# MonacoUSA Portal Design System V2 -## Professional Neumorphic & Glassmorphic Design Language - ---- - -## Table of Contents -1. [Design Philosophy](#design-philosophy) -2. [Color System](#color-system) -3. [Typography](#typography) -4. [Spacing & Layout](#spacing--layout) -5. [Shadow System](#shadow-system) -6. [Component Library](#component-library) -7. [Morphing Dropdown Specification](#morphing-dropdown-specification) -8. [Animation Guidelines](#animation-guidelines) -9. [Responsive Design](#responsive-design) -10. [Implementation Examples](#implementation-examples) - ---- - -## Design Philosophy - -### Core Principles -- **Professional & Inviting**: Balancing corporate credibility with approachable design -- **Neumorphic Foundation**: Soft UI with subtle depth and tactile feedback -- **Glassmorphic Accents**: Strategic use of transparency and blur for interactive elements -- **Monaco Heritage**: Incorporating national colors while maintaining modern aesthetics - -### Visual Hierarchy -1. **Primary Actions**: Monaco Red gradient buttons with strong shadows -2. **Interactive Elements**: Blue glassmorphic dropdowns and selects -3. **Content Cards**: Neumorphic white/light gray surfaces -4. **Navigation**: Subtle depth with hover transformations - ---- - -## Color System - -### Primary Palette - Monaco Red -```scss -$primary-50: #FEF2F2; // Lightest tint -$primary-100: #FEE2E2; -$primary-200: #FECACA; -$primary-300: #FCA5A5; -$primary-400: #F87171; -$primary-500: #EF4444; -$primary-600: #CC0000; // Monaco Red (Main) -$primary-700: #990000; // Monaco Dark Red -$primary-800: #660000; -$primary-900: #450A0A; // Darkest shade -``` - -### Secondary Palette - Interactive Blue -Used exclusively for dropdowns, selects, and interactive overlays: -```scss -$blue-50: #EFF6FF; -$blue-100: #DBEAFE; -$blue-200: #BFDBFE; -$blue-300: #93C5FD; -$blue-400: #60A5FA; -$blue-500: #3B82F6; -$blue-600: #2563EB; -$blue-700: #1D4ED8; -$blue-800: #1E40AF; -$blue-900: #1E3A8A; -``` - -### Neutral Palette -```scss -$neutral-50: #F9FAFB; -$neutral-100: #F3F4F6; -$neutral-200: #E5E7EB; -$neutral-300: #D1D5DB; -$neutral-400: #9CA3AF; -$neutral-500: #6B7280; -$neutral-600: #4B5563; -$neutral-700: #374151; -$neutral-800: #1F2937; -$neutral-900: #111827; -``` - -### Semantic Colors -```scss -$success: #10B981; // Green -$warning: #F59E0B; // Amber -$error: #EF4444; // Red -$info: #3B82F6; // Blue -``` - ---- - -## Typography - -### Font Stack -```css -font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, - 'Helvetica Neue', Arial, sans-serif; -``` - -### Type Scale -| Name | Size | Line Height | Usage | -|------|------|-------------|-------| -| `text-xs` | 0.75rem (12px) | 1.5 | Labels, captions | -| `text-sm` | 0.875rem (14px) | 1.5 | Body small, form labels | -| `text-base` | 1rem (16px) | 1.5 | Body default | -| `text-lg` | 1.125rem (18px) | 1.625 | Body large | -| `text-xl` | 1.25rem (20px) | 1.625 | H4 | -| `text-2xl` | 1.5rem (24px) | 1.375 | H3 | -| `text-3xl` | 1.875rem (30px) | 1.375 | H2 | -| `text-4xl` | 2.25rem (36px) | 1.25 | H1 | - -### Font Weights -- `font-normal`: 400 - Body text -- `font-medium`: 500 - Emphasis -- `font-semibold`: 600 - Subheadings -- `font-bold`: 700 - Headings - ---- - -## Spacing & Layout - -### Spacing Scale -```scss -$space-0: 0; -$space-1: 0.25rem; // 4px -$space-2: 0.5rem; // 8px -$space-3: 0.75rem; // 12px -$space-4: 1rem; // 16px -$space-5: 1.25rem; // 20px -$space-6: 1.5rem; // 24px -$space-8: 2rem; // 32px -$space-10: 2.5rem; // 40px -$space-12: 3rem; // 48px -$space-16: 4rem; // 64px -$space-20: 5rem; // 80px -``` - -### Border Radius -```scss -$radius-sm: 0.375rem; // 6px - Small elements -$radius-md: 0.5rem; // 8px - Buttons -$radius-lg: 0.75rem; // 12px - Cards, dropdowns -$radius-xl: 1rem; // 16px - Large cards -$radius-2xl: 1.5rem; // 24px - Hero sections -$radius-full: 9999px; // Pills, avatars -``` - ---- - -## Shadow System - -### Neumorphic Shadows -For cards and static elements: -```scss -// Soft elevation shadows -$shadow-soft-sm: - 4px 4px 8px rgba(0, 0, 0, 0.08), - -4px -4px 8px rgba(255, 255, 255, 0.95); - -$shadow-soft-md: - 8px 8px 16px rgba(0, 0, 0, 0.1), - -8px -8px 16px rgba(255, 255, 255, 0.95); - -$shadow-soft-lg: - 12px 12px 24px rgba(0, 0, 0, 0.12), - -12px -12px 24px rgba(255, 255, 255, 0.95); - -// Inset shadows for pressed states -$shadow-inset-sm: - inset 4px 4px 8px rgba(0, 0, 0, 0.1), - inset -4px -4px 8px rgba(255, 255, 255, 0.95); -``` - -### Glassmorphic Shadows -For dropdowns and overlays: -```scss -$shadow-morphing: - 0 10px 40px rgba(0, 0, 0, 0.12), - 0 2px 10px rgba(0, 0, 0, 0.08); - -$shadow-glass: - 0 8px 32px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.3); -``` - ---- - -## Component Library - -### 1. Buttons - -#### Primary Button -```scss -.btn-primary { - background: linear-gradient(135deg, $primary-600, $primary-700); - color: white; - padding: 0.75rem 1.5rem; - border-radius: $radius-lg; - box-shadow: - 4px 4px 8px rgba(204, 0, 0, 0.3), - -4px -4px 8px rgba(255, 255, 255, 0.95); - - &:hover { - transform: translateY(-2px); - box-shadow: - 6px 6px 12px rgba(204, 0, 0, 0.4), - -6px -6px 12px rgba(255, 255, 255, 0.95); - } - - &:active { - transform: translateY(0); - box-shadow: $shadow-inset-sm; - } -} -``` - -#### Neumorphic Button -```scss -.btn-neumorphic { - background: linear-gradient(145deg, #ffffff, #f0f0f0); - color: $neutral-700; - padding: 0.75rem 1.5rem; - border-radius: $radius-lg; - box-shadow: $shadow-soft-sm; - - &:hover { - box-shadow: $shadow-soft-md; - transform: translateY(-1px); - } -} -``` - -### 2. Cards - -#### Neumorphic Card -```scss -.card-neumorphic { - background: linear-gradient(145deg, #ffffff, #f0f0f0); - border-radius: $radius-xl; - padding: $space-6; - box-shadow: $shadow-soft-md; - - &:hover { - transform: translateY(-4px); - box-shadow: $shadow-soft-lg; - } -} -``` - -### 3. Form Inputs - -#### Neumorphic Input -```scss -.input-neumorphic { - background: $neutral-50; - border: none; - border-radius: $radius-lg; - padding: $space-3 $space-4; - box-shadow: $shadow-inset-sm; - - &:focus { - outline: none; - box-shadow: - $shadow-inset-md, - 0 0 0 3px rgba($primary-500, 0.1); - } -} -``` - ---- - -## Morphing Dropdown Specification - -### Overview -The morphing dropdown is a signature component that combines glassmorphism with smooth spring animations. It features a blue color scheme distinct from the primary Monaco red, creating clear visual hierarchy for interactive elements. - -### Visual Characteristics - -#### Trigger State -```scss -.morphing-select-trigger { - // Base styling - height: 48px; - padding: 0 1rem; - border-radius: 12px; - - // Glassmorphic background - background: rgba(239, 246, 255, 0.3); // blue-50 with 30% opacity - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(191, 219, 254, 0.3); // blue-200 with 30% opacity - - // Typography - color: #1E3A8A; // blue-900 - font-size: 0.875rem; - - // Transition - transition: all 0.3s ease; - - &:hover { - background: rgba(219, 234, 254, 0.4); // blue-100 with 40% opacity - border-color: rgba(147, 197, 253, 0.4); // blue-300 with 40% opacity - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); - } - - &.open { - background: rgba(219, 234, 254, 0.5); - border-color: rgba(96, 165, 250, 0.5); // blue-400 with 50% opacity - box-shadow: - 0 0 0 3px rgba(59, 130, 246, 0.1), - 0 4px 12px rgba(59, 130, 246, 0.15); - } -} -``` - -#### Dropdown Panel -```scss -.morphing-select-dropdown { - // Glassmorphic container - background: rgba(239, 246, 255, 0.95); // blue-50 with 95% opacity - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(191, 219, 254, 0.3); - border-radius: 12px; - - // Shadow - box-shadow: - 0 10px 40px rgba(0, 0, 0, 0.12), - 0 2px 10px rgba(0, 0, 0, 0.08); - - // Animation - animation: morphIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); - - // Layout - max-height: 300px; - overflow: hidden; -} -``` - -#### Option Items -```scss -.morphing-select-option { - padding: 0.625rem 0.75rem; - border-radius: 8px; - color: #1E3A8A; // blue-900 - font-size: 0.875rem; - transition: all 0.2s ease; - - &:hover { - background: rgba(96, 165, 250, 0.2); // blue-400 with 20% opacity - transform: translateX(2px); - } - - &.selected { - background: rgba(59, 130, 246, 0.25); // blue-500 with 25% opacity - font-weight: 500; - } -} -``` - -#### Option Groups -```scss -.morphing-select-optgroup-label { - padding: 0.5rem 0.75rem 0.25rem; - font-size: 0.75rem; - font-weight: 600; - color: #1D4ED8; // blue-700 - text-transform: uppercase; - letter-spacing: 0.05em; - opacity: 0.8; -} -``` - -### Animation Specifications - -#### Spring Configuration -```javascript -const TRANSITION = { - type: 'spring', - bounce: 0.05, // Minimal bounce for professional feel - duration: 0.3, // Quick but smooth -}; -``` - -#### Animation States -```javascript -// Opening animation -@keyframes morphIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-10px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -// Closing animation (reversed) -@keyframes morphOut { - from { - opacity: 1; - transform: scale(1) translateY(0); - } - to { - opacity: 0; - transform: scale(0.95) translateY(-10px); - } -} -``` - -### Interaction Patterns - -#### Click Outside -- Clicking anywhere outside the dropdown closes it -- Uses `mousedown` event for immediate response - -#### Keyboard Navigation -- `Escape` key closes the dropdown -- `Tab` key navigates through options -- `Enter` selects the focused option -- `Space` toggles selection in multi-select - -#### Touch Support -- Touch events are handled identically to mouse events -- Larger touch targets on mobile (min 44px) - -### Multi-Select Variant - -#### Selected Tags -```scss -.morphing-select-tag { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - background: rgba(191, 219, 254, 0.6); // blue-200 with 60% opacity - border-radius: 6px; - font-size: 0.75rem; - - // Remove button - .tag-remove { - color: #1D4ED8; // blue-700 - cursor: pointer; - - &:hover { - color: #1E3A8A; // blue-900 - } - } -} -``` - -### Accessibility Features -- ARIA attributes: `aria-expanded`, `aria-controls`, `aria-modal` -- Role attributes: `role="dialog"` for dropdown panel -- Keyboard navigation support -- Focus management -- Screen reader announcements - -### Implementation Guidelines - -#### Vue/React Component Structure -```typescript -interface SelectOption { - value: string; - label: string; - disabled?: boolean; -} - -interface OptionGroup { - label: string; - options: SelectOption[]; -} - -interface SelectProps { - options?: SelectOption[]; - optgroups?: OptionGroup[]; - value?: string | string[]; // string[] for multi-select - onValueChange?: (value: string | string[]) => void; - placeholder?: string; - disabled?: boolean; - maxSelected?: number; // For multi-select - className?: string; -} -``` - -#### State Management -```javascript -// Single Select -const [selectedValue, setSelectedValue] = useState(''); -const [isOpen, setIsOpen] = useState(false); - -// Multi-Select -const [selectedValues, setSelectedValues] = useState([]); -const [isOpen, setIsOpen] = useState(false); -``` - ---- - -## Animation Guidelines - -### Timing Functions -```scss -$ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); -$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); -$ease-out: cubic-bezier(0, 0, 0.2, 1); -$ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); -``` - -### Duration Scale -- `fast`: 150ms - Micro interactions -- `base`: 300ms - Standard transitions -- `slow`: 500ms - Complex animations -- `slower`: 700ms - Page transitions - -### Animation Principles -1. **Purpose**: Every animation should have a clear purpose -2. **Performance**: Use `transform` and `opacity` for GPU acceleration -3. **Consistency**: Maintain consistent timing across similar interactions -4. **Subtlety**: Animations should enhance, not distract - ---- - -## Responsive Design - -### Breakpoints -```scss -$breakpoint-sm: 640px; // Mobile landscape -$breakpoint-md: 768px; // Tablet portrait -$breakpoint-lg: 1024px; // Tablet landscape -$breakpoint-xl: 1280px; // Desktop -$breakpoint-2xl: 1536px; // Large desktop -``` - -### Mobile Adaptations - -#### Morphing Dropdown -- Full-width on mobile -- Bottom sheet presentation option -- Larger touch targets (min 44px) -- Reduced blur for performance - -#### Navigation -- Hamburger menu below tablet -- Full-screen overlay navigation -- Swipe gestures for sidebar - -#### Cards -- Single column layout on mobile -- Reduced padding and margins -- Simplified shadows for performance - ---- - -## Implementation Examples - -### Example 1: Login Form with Morphing Select -```html -
- -
- - -
- - -
- -
-
- Choose your role... - ... -
-
-
Member
-
Admin
-
Board Member
-
-
-
- - - -
-``` - -### Example 2: Dashboard Stats with Dropdown Filter -```html -
-

Dashboard

- - -
-
- Last 30 Days - ... -
-
-
-
Quick Ranges
-
Today
-
Last 7 Days
-
Last 30 Days
-
-
-
Custom
-
Last Quarter
-
Last Year
-
-
-
-
- - -
-
-
2,847
-
Total Members
-
+12.5%
-
- -
-``` - ---- - -## Design Tokens - -For implementation in code, use these design tokens: - -```javascript -const designTokens = { - colors: { - primary: { - 50: '#FEF2F2', - 100: '#FEE2E2', - 200: '#FECACA', - 300: '#FCA5A5', - 400: '#F87171', - 500: '#EF4444', - 600: '#CC0000', // Main brand color - 700: '#990000', - 800: '#660000', - 900: '#450A0A', - }, - blue: { - 50: '#EFF6FF', - 100: '#DBEAFE', - 200: '#BFDBFE', - 300: '#93C5FD', - 400: '#60A5FA', - 500: '#3B82F6', - 600: '#2563EB', - 700: '#1D4ED8', - 800: '#1E40AF', - 900: '#1E3A8A', - }, - // ... other colors - }, - shadows: { - 'soft-sm': '4px 4px 8px rgba(0, 0, 0, 0.08), -4px -4px 8px rgba(255, 255, 255, 0.95)', - 'soft-md': '8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.95)', - 'soft-lg': '12px 12px 24px rgba(0, 0, 0, 0.12), -12px -12px 24px rgba(255, 255, 255, 0.95)', - 'morphing': '0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08)', - }, - animation: { - duration: { - fast: '150ms', - base: '300ms', - slow: '500ms', - }, - ease: { - smooth: 'cubic-bezier(0.4, 0, 0.2, 1)', - bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', - }, - }, -}; -``` - ---- - -## Version History -- **v2.0.0** - Initial release with Neumorphic & Glassmorphic design system -- **v2.0.1** - Added morphing dropdown specifications -- **v2.0.2** - Enhanced mobile responsive guidelines - ---- - -## Contact -For questions about implementing this design system, please contact the MonacoUSA Portal development team. diff --git a/design-mockups/components/core/NeumorphicCard.vue b/design-mockups/components/core/NeumorphicCard.vue deleted file mode 100644 index b900f5a..0000000 --- a/design-mockups/components/core/NeumorphicCard.vue +++ /dev/null @@ -1,215 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/components/core/ProfessionalButton.vue b/design-mockups/components/core/ProfessionalButton.vue deleted file mode 100644 index 32d4715..0000000 --- a/design-mockups/components/core/ProfessionalButton.vue +++ /dev/null @@ -1,315 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/components/core/StatCard.vue b/design-mockups/components/core/StatCard.vue deleted file mode 100644 index 9298d89..0000000 --- a/design-mockups/components/core/StatCard.vue +++ /dev/null @@ -1,320 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/index.vue b/design-mockups/index.vue deleted file mode 100644 index 22b7662..0000000 --- a/design-mockups/index.vue +++ /dev/null @@ -1,319 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/pages/admin/ProfessionalAdminDashboard.vue b/design-mockups/pages/admin/ProfessionalAdminDashboard.vue deleted file mode 100644 index aac722c..0000000 --- a/design-mockups/pages/admin/ProfessionalAdminDashboard.vue +++ /dev/null @@ -1,820 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/pages/auth/ProfessionalLogin.vue b/design-mockups/pages/auth/ProfessionalLogin.vue deleted file mode 100644 index 6180cdc..0000000 --- a/design-mockups/pages/auth/ProfessionalLogin.vue +++ /dev/null @@ -1,425 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/pages/board/ProfessionalBoardDashboard.vue b/design-mockups/pages/board/ProfessionalBoardDashboard.vue deleted file mode 100644 index f548d4a..0000000 --- a/design-mockups/pages/board/ProfessionalBoardDashboard.vue +++ /dev/null @@ -1,1255 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/pages/member/ProfessionalMemberDashboard.vue b/design-mockups/pages/member/ProfessionalMemberDashboard.vue deleted file mode 100644 index 7551124..0000000 --- a/design-mockups/pages/member/ProfessionalMemberDashboard.vue +++ /dev/null @@ -1,1293 +0,0 @@ - - - - - \ No newline at end of file diff --git a/design-mockups/styles/design-system.scss b/design-mockups/styles/design-system.scss deleted file mode 100644 index e0afc58..0000000 --- a/design-mockups/styles/design-system.scss +++ /dev/null @@ -1,361 +0,0 @@ -// MonacoUSA Portal Design System -// Professional Neumorphic Design with Enhanced Components - -// ======================================== -// 1. COLOR PALETTE -// ======================================== - -// Brand Colors -$monaco-red: #CC0000; -$monaco-dark-red: #990000; -$monaco-light-red: #FF3333; - -// Primary Colors (Monaco Red) -$primary-50: #FEF2F2; -$primary-100: #FEE2E2; -$primary-200: #FECACA; -$primary-300: #FCA5A5; -$primary-400: #F87171; -$primary-500: #EF4444; -$primary-600: $monaco-red; -$primary-700: $monaco-dark-red; -$primary-800: #660000; -$primary-900: #450A0A; - -// Neutral Colors -$neutral-50: #F9FAFB; -$neutral-100: #F3F4F6; -$neutral-200: #E5E7EB; -$neutral-300: #D1D5DB; -$neutral-400: #9CA3AF; -$neutral-500: #6B7280; -$neutral-600: #4B5563; -$neutral-700: #374151; -$neutral-800: #1F2937; -$neutral-900: #111827; - -// Blue Colors (for dropdowns and accents) -$blue-50: #EFF6FF; -$blue-100: #DBEAFE; -$blue-200: #BFDBFE; -$blue-300: #93C5FD; -$blue-400: #60A5FA; -$blue-500: #3B82F6; -$blue-600: #2563EB; -$blue-700: #1D4ED8; -$blue-800: #1E40AF; -$blue-900: #1E3A8A; - -// Semantic Colors -$success-500: #10B981; -$warning-500: #F59E0B; -$error-500: #EF4444; -$info-500: #3B82F6; - -// ======================================== -// 2. TYPOGRAPHY -// ======================================== - -$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -$font-heading: 'Inter', $font-sans; -$font-mono: 'Fira Code', 'Courier New', monospace; - -// Font Sizes -$text-xs: 0.75rem; // 12px -$text-sm: 0.875rem; // 14px -$text-base: 1rem; // 16px -$text-lg: 1.125rem; // 18px -$text-xl: 1.25rem; // 20px -$text-2xl: 1.5rem; // 24px -$text-3xl: 1.875rem; // 30px -$text-4xl: 2.25rem; // 36px -$text-5xl: 3rem; // 48px - -// Font Weights -$font-light: 300; -$font-normal: 400; -$font-medium: 500; -$font-semibold: 600; -$font-bold: 700; - -// Line Heights -$leading-tight: 1.25; -$leading-normal: 1.5; -$leading-relaxed: 1.625; - -// ======================================== -// 3. SPACING SYSTEM -// ======================================== - -$space-0: 0; -$space-1: 0.25rem; // 4px -$space-2: 0.5rem; // 8px -$space-3: 0.75rem; // 12px -$space-4: 1rem; // 16px -$space-5: 1.25rem; // 20px -$space-6: 1.5rem; // 24px -$space-8: 2rem; // 32px -$space-10: 2.5rem; // 40px -$space-12: 3rem; // 48px -$space-16: 4rem; // 64px -$space-20: 5rem; // 80px - -// ======================================== -// 4. NEUMORPHIC SHADOWS -// ======================================== - -// Soft Shadows (light theme) -$shadow-soft-xs: - 2px 2px 4px rgba(0, 0, 0, 0.07), - -2px -2px 4px rgba(255, 255, 255, 0.95); - -$shadow-soft-sm: - 4px 4px 8px rgba(0, 0, 0, 0.08), - -4px -4px 8px rgba(255, 255, 255, 0.95); - -$shadow-soft-md: - 8px 8px 16px rgba(0, 0, 0, 0.1), - -8px -8px 16px rgba(255, 255, 255, 0.95); - -$shadow-soft-lg: - 12px 12px 24px rgba(0, 0, 0, 0.12), - -12px -12px 24px rgba(255, 255, 255, 0.95); - -$shadow-soft-xl: - 16px 16px 32px rgba(0, 0, 0, 0.14), - -16px -16px 32px rgba(255, 255, 255, 0.95); - -// Inset Shadows (for pressed/input states) -$shadow-inset-sm: - inset 4px 4px 8px rgba(0, 0, 0, 0.1), - inset -4px -4px 8px rgba(255, 255, 255, 0.95); - -$shadow-inset-md: - inset 6px 6px 12px rgba(0, 0, 0, 0.15), - inset -6px -6px 12px rgba(255, 255, 255, 0.95); - -// Glassmorphic Shadow -$shadow-glass: - 0 8px 32px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.3); - -// Morphing Dropdown Shadow -$shadow-morphing: - 0 10px 40px rgba(0, 0, 0, 0.12), - 0 2px 10px rgba(0, 0, 0, 0.08); - -// ======================================== -// 5. BORDER RADIUS -// ======================================== - -$radius-sm: 0.375rem; // 6px -$radius-md: 0.5rem; // 8px -$radius-lg: 0.75rem; // 12px -$radius-xl: 1rem; // 16px -$radius-2xl: 1.5rem; // 24px -$radius-3xl: 2rem; // 32px -$radius-full: 9999px; - -// ======================================== -// 6. TRANSITIONS -// ======================================== - -$transition-base: 0.3s ease; -$transition-fast: 0.15s ease; -$transition-slow: 0.5s ease; - -// Spring Animation (for dropdowns) -$spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); -$spring-smooth: cubic-bezier(0.4, 0, 0.2, 1); - -// ======================================== -// 7. BREAKPOINTS -// ======================================== - -$breakpoint-sm: 640px; -$breakpoint-md: 768px; -$breakpoint-lg: 1024px; -$breakpoint-xl: 1280px; -$breakpoint-2xl: 1536px; - -// ======================================== -// 8. Z-INDEX LAYERS -// ======================================== - -$z-base: 0; -$z-dropdown: 10; -$z-sticky: 20; -$z-overlay: 30; -$z-modal: 40; -$z-popover: 50; -$z-tooltip: 60; -$z-notification: 70; - -// ======================================== -// 9. GLASSMORPHISM MIXINS -// ======================================== - -@mixin glassmorphism($bg-opacity: 0.8, $blur: 12px) { - background: rgba(255, 255, 255, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba(255, 255, 255, 0.3); -} - -@mixin glassmorphism-blue($bg-opacity: 0.3, $blur: 12px) { - background: rgba($blue-50, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); - border: 1px solid rgba($blue-200, 0.3); -} - -// ======================================== -// 10. COMPONENT MIXINS -// ======================================== - -// Neumorphic Card -@mixin neumorphic-card($elevation: 'md') { - background: linear-gradient(145deg, #ffffff, #f0f0f0); - border-radius: $radius-xl; - - @if $elevation == 'sm' { - box-shadow: $shadow-soft-sm; - } @else if $elevation == 'md' { - box-shadow: $shadow-soft-md; - } @else if $elevation == 'lg' { - box-shadow: $shadow-soft-lg; - } @else if $elevation == 'xl' { - box-shadow: $shadow-soft-xl; - } -} - -// Neumorphic Button -@mixin neumorphic-button() { - background: linear-gradient(145deg, #ffffff, #f0f0f0); - box-shadow: $shadow-soft-sm; - transition: all $transition-base; - - &:hover { - box-shadow: $shadow-soft-md; - transform: translateY(-2px); - } - - &:active { - box-shadow: $shadow-inset-sm; - transform: translateY(0); - } -} - -// Morphing Dropdown -@mixin morphing-dropdown() { - @include glassmorphism-blue(0.8, 16px); - box-shadow: $shadow-morphing; - border-radius: $radius-lg; - overflow: hidden; - animation: morphIn 0.3s $spring-smooth; -} - -// Focus Ring -@mixin focus-ring($color: $primary-500) { - &:focus { - outline: none; - box-shadow: - 0 0 0 3px rgba($color, 0.1), - $shadow-soft-md; - border-color: rgba($color, 0.5); - } -} - -// ======================================== -// 11. ANIMATIONS -// ======================================== - -@keyframes morphIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-10px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } -} - -// ======================================== -// 12. UTILITY CLASSES -// ======================================== - -.backdrop-blur { - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); -} - -.glass-effect { - @include glassmorphism(); -} - -.glass-blue { - @include glassmorphism-blue(); -} - -.shadow-neumorphic { - box-shadow: $shadow-soft-md; -} - -.text-gradient { - background: linear-gradient(135deg, $primary-600, $primary-800); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -// ======================================== -// 13. RESPONSIVE UTILITIES -// ======================================== - -@mixin responsive($breakpoint) { - @media (min-width: $breakpoint) { - @content; - } -} - -// Usage: @include responsive($breakpoint-md) { ... } - -// ======================================== -// 14. DARK MODE SUPPORT -// ======================================== - -@mixin dark-mode { - @media (prefers-color-scheme: dark) { - @content; - } - - [data-theme="dark"] & { - @content; - } -} \ No newline at end of file diff --git a/design-mockups/styles/neumorphic-system.scss b/design-mockups/styles/neumorphic-system.scss deleted file mode 100644 index 8aa5825..0000000 --- a/design-mockups/styles/neumorphic-system.scss +++ /dev/null @@ -1,320 +0,0 @@ -// MonacoUSA Portal - Neumorphic Design System -// Professional, Modern, and Inviting Design Language - -// ============================================ -// 1. Color Palette -// ============================================ - -// Primary - Monaco Red (Sophisticated) -$primary-50: #FEF2F2; -$primary-100: #FEE2E2; -$primary-200: #FECACA; -$primary-300: #FCA5A5; -$primary-400: #F87171; -$primary-500: #DC2626; // Main brand -$primary-600: #B91C1C; // Hover states -$primary-700: #991B1B; -$primary-800: #7F1D1D; -$primary-900: #450A0A; - -// Neutral Grays (Professional Workspace) -$neutral-50: #FAFAFA; -$neutral-100: #F5F5F5; -$neutral-200: #E5E5E5; -$neutral-300: #D4D4D4; -$neutral-400: #A3A3A3; -$neutral-500: #737373; -$neutral-600: #525252; -$neutral-700: #404040; -$neutral-800: #262626; -$neutral-900: #171717; - -// Semantic Colors -$success-500: #10B981; -$success-100: #D1FAE5; -$warning-500: #F59E0B; -$warning-100: #FEF3C7; -$error-500: #EF4444; -$error-100: #FEE2E2; -$info-500: #3B82F6; -$info-100: #DBEAFE; - -// ============================================ -// 2. Neumorphic Shadow System -// ============================================ - -// Light Mode Shadows -$shadow-soft-xs: 2px 2px 4px rgba(0, 0, 0, 0.05), -2px -2px 4px rgba(255, 255, 255, 0.8); -$shadow-soft-sm: 4px 4px 8px rgba(0, 0, 0, 0.08), -4px -4px 8px rgba(255, 255, 255, 0.9); -$shadow-soft-md: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.95); -$shadow-soft-lg: 15px 15px 30px rgba(0, 0, 0, 0.12), -15px -15px 30px rgba(255, 255, 255, 1); -$shadow-soft-xl: 20px 20px 40px rgba(0, 0, 0, 0.15), -20px -20px 40px rgba(255, 255, 255, 1); - -// Inset Shadows (for pressed states) -$shadow-inset-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.08), inset -2px -2px 4px rgba(255, 255, 255, 0.9); -$shadow-inset-md: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.95); -$shadow-inset-lg: inset 8px 8px 16px rgba(0, 0, 0, 0.12), inset -8px -8px 16px rgba(255, 255, 255, 1); - -// Dark Mode Shadows -$shadow-dark-soft-sm: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.02); -$shadow-dark-soft-md: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.03); -$shadow-dark-soft-lg: 15px 15px 30px rgba(0, 0, 0, 0.5), -15px -15px 30px rgba(255, 255, 255, 0.04); -$shadow-dark-inset-md: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(255, 255, 255, 0.03); - -// ============================================ -// 3. Typography System -// ============================================ - -$font-heading: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -$font-body: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -$font-mono: 'JetBrains Mono', 'Monaco', 'Courier New', monospace; - -// Type Scale (Major Third - 1.25) -$text-xs: 0.75rem; // 12px -$text-sm: 0.875rem; // 14px -$text-base: 1rem; // 16px -$text-lg: 1.25rem; // 20px -$text-xl: 1.563rem; // 25px -$text-2xl: 1.953rem; // 31px -$text-3xl: 2.441rem; // 39px -$text-4xl: 3.052rem; // 49px - -// Font Weights -$font-light: 300; -$font-regular: 400; -$font-medium: 500; -$font-semibold: 600; -$font-bold: 700; - -// Line Heights -$leading-tight: 1.25; -$leading-normal: 1.5; -$leading-relaxed: 1.75; - -// ============================================ -// 4. Spacing System -// ============================================ - -$space-0: 0; -$space-1: 0.25rem; // 4px -$space-2: 0.5rem; // 8px -$space-3: 0.75rem; // 12px -$space-4: 1rem; // 16px -$space-5: 1.25rem; // 20px -$space-6: 1.5rem; // 24px -$space-8: 2rem; // 32px -$space-10: 2.5rem; // 40px -$space-12: 3rem; // 48px -$space-16: 4rem; // 64px -$space-20: 5rem; // 80px -$space-24: 6rem; // 96px - -// ============================================ -// 5. Border Radius -// ============================================ - -$radius-sm: 0.375rem; // 6px -$radius-md: 0.5rem; // 8px -$radius-lg: 0.75rem; // 12px -$radius-xl: 1rem; // 16px -$radius-2xl: 1.5rem; // 24px -$radius-3xl: 2rem; // 32px -$radius-full: 9999px; // Full round - -// ============================================ -// 6. Transitions -// ============================================ - -$transition-fast: 150ms ease-in-out; -$transition-base: 250ms ease-in-out; -$transition-slow: 350ms ease-in-out; -$transition-slower: 500ms ease-in-out; - -// Easing Functions -$ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1); -$ease-out-soft: cubic-bezier(0, 0, 0.2, 1); -$ease-in-soft: cubic-bezier(0.4, 0, 1, 1); - -// ============================================ -// 7. Breakpoints -// ============================================ - -$breakpoint-xs: 475px; -$breakpoint-sm: 640px; -$breakpoint-md: 768px; -$breakpoint-lg: 1024px; -$breakpoint-xl: 1280px; -$breakpoint-2xl: 1536px; - -// ============================================ -// 8. Z-Index Scale -// ============================================ - -$z-base: 0; -$z-dropdown: 1000; -$z-sticky: 1020; -$z-fixed: 1030; -$z-modal-backdrop: 1040; -$z-modal: 1050; -$z-popover: 1060; -$z-tooltip: 1070; -$z-notification: 1080; - -// ============================================ -// 9. Component-Specific Variables -// ============================================ - -// Buttons -$button-height-sm: 2rem; // 32px -$button-height-md: 2.5rem; // 40px -$button-height-lg: 3rem; // 48px -$button-padding-x: 1.5rem; // 24px -$button-border-width: 0; - -// Cards -$card-padding: 1.5rem; -$card-background: $neutral-100; -$card-border-radius: $radius-xl; - -// Inputs -$input-height: 2.75rem; // 44px -$input-padding-x: 1rem; // 16px -$input-border-width: 0; -$input-background: $neutral-100; -$input-border-radius: $radius-lg; - -// Sidebar -$sidebar-width: 280px; -$sidebar-width-collapsed: 80px; -$sidebar-background: $neutral-100; - -// ============================================ -// 10. Mixins -// ============================================ - -@mixin neumorphic($size: 'md', $type: 'raised', $dark: false) { - @if $dark { - @if $type == 'raised' { - @if $size == 'sm' { - box-shadow: $shadow-dark-soft-sm; - } @else if $size == 'md' { - box-shadow: $shadow-dark-soft-md; - } @else if $size == 'lg' { - box-shadow: $shadow-dark-soft-lg; - } - } @else if $type == 'pressed' { - box-shadow: $shadow-dark-inset-md; - } - } @else { - @if $type == 'raised' { - @if $size == 'sm' { - box-shadow: $shadow-soft-sm; - } @else if $size == 'md' { - box-shadow: $shadow-soft-md; - } @else if $size == 'lg' { - box-shadow: $shadow-soft-lg; - } @else if $size == 'xl' { - box-shadow: $shadow-soft-xl; - } - } @else if $type == 'pressed' { - @if $size == 'sm' { - box-shadow: $shadow-inset-sm; - } @else if $size == 'md' { - box-shadow: $shadow-inset-md; - } @else if $size == 'lg' { - box-shadow: $shadow-inset-lg; - } - } - } -} - -@mixin hover-lift($amount: 2px) { - transition: transform $transition-base, box-shadow $transition-base; - - &:hover:not(:disabled) { - transform: translateY(-$amount); - } -} - -@mixin focus-ring($color: $primary-500) { - &:focus-visible { - outline: none; - box-shadow: 0 0 0 3px rgba($color, 0.2); - } -} - -@mixin truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -@mixin responsive($breakpoint) { - @if $breakpoint == 'sm' { - @media (min-width: $breakpoint-sm) { @content; } - } @else if $breakpoint == 'md' { - @media (min-width: $breakpoint-md) { @content; } - } @else if $breakpoint == 'lg' { - @media (min-width: $breakpoint-lg) { @content; } - } @else if $breakpoint == 'xl' { - @media (min-width: $breakpoint-xl) { @content; } - } @else if $breakpoint == '2xl' { - @media (min-width: $breakpoint-2xl) { @content; } - } -} - -// ============================================ -// 11. Dark Mode Support -// ============================================ - -@mixin dark-mode { - @media (prefers-color-scheme: dark) { - @content; - } - - .dark & { - @content; - } -} - -// ============================================ -// 12. Utility Classes -// ============================================ - -.neumorphic-raised { - @include neumorphic('md', 'raised'); -} - -.neumorphic-pressed { - @include neumorphic('md', 'pressed'); -} - -.neumorphic-card { - background: $neutral-100; - border-radius: $radius-xl; - padding: $card-padding; - @include neumorphic('md', 'raised'); -} - -.neumorphic-button { - background: $neutral-100; - border-radius: $radius-lg; - padding: $space-3 $space-6; - @include neumorphic('sm', 'raised'); - transition: all $transition-base; - - &:hover { - @include neumorphic('md', 'raised'); - } - - &:active { - @include neumorphic('sm', 'pressed'); - } -} - -.text-gradient { - background: linear-gradient(135deg, $primary-600, $primary-800); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} \ No newline at end of file diff --git a/nuxt.config.ts b/nuxt.config.ts index f798802..4285951 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -162,8 +162,8 @@ export default defineNuxtConfig({ monacousa: { dark: false, colors: { - // Monaco Red Spectrum (from design-system.md) - primary: "#dc2626", // monaco-red-600 + // Refined Monaco Red Spectrum + primary: "#dc2626", // Professional primary 'primary-50': "#fef2f2", 'primary-100': "#fee2e2", 'primary-200': "#fecaca", @@ -175,40 +175,41 @@ export default defineNuxtConfig({ 'primary-800': "#991b1b", 'primary-900': "#7f1d1d", - // Neutral Palette - secondary: "#ffffff", - accent: "#f4f4f5", - background: "#ffffff", - surface: "#fafafa", - 'on-background': "#18181b", - 'on-surface': "#18181b", + // Improved Neutral Palette + secondary: "#64748b", // Neutral gray for secondary + accent: "#dc2626", // Monaco red as accent + background: "#fafafa", // Light gray background + surface: "#ffffff", // Pure white surfaces + 'on-background': "#1f2937", // Darker text on background + 'on-surface': "#1f2937", // Darker text on surface - // Semantic Colors - error: "#ef4444", + // Semantic Colors - More Professional + error: "#dc2626", warning: "#f59e0b", - info: "#0ea5e9", - success: "#10b981", + info: "#3b82f6", + success: "#22c55e", // Custom Properties for Glass Effects - 'glass-bg': "rgba(255, 255, 255, 0.7)", - 'glass-border': "rgba(255, 255, 255, 0.3)", - 'glass-dark': "rgba(0, 0, 0, 0.7)", + 'glass-bg': "rgba(255, 255, 255, 0.85)", + 'glass-border': "rgba(255, 255, 255, 0.18)", + 'glass-dark': "rgba(17, 24, 39, 0.6)", }, variables: { - 'border-color': '#e4e4e7', - 'border-opacity': 0.12, - 'high-emphasis-opacity': 0.87, - 'medium-emphasis-opacity': 0.60, - 'disabled-opacity': 0.38, - 'idle-opacity': 0.04, - 'hover-opacity': 0.08, - 'focus-opacity': 0.12, - 'selected-opacity': 0.12, - 'activated-opacity': 0.12, - 'pressed-opacity': 0.16, - 'dragged-opacity': 0.08, - 'shadow-glass': '0 8px 32px rgba(0, 0, 0, 0.1)', - 'shadow-monaco': '0 10px 40px rgba(220, 38, 38, 0.15)', + 'border-color': '#e5e7eb', + 'border-opacity': 0.08, + 'high-emphasis-opacity': 0.95, + 'medium-emphasis-opacity': 0.70, + 'disabled-opacity': 0.45, + 'idle-opacity': 0.02, + 'hover-opacity': 0.04, + 'focus-opacity': 0.08, + 'selected-opacity': 0.08, + 'activated-opacity': 0.10, + 'pressed-opacity': 0.12, + 'dragged-opacity': 0.06, + 'shadow-glass': '0 8px 32px rgba(31, 41, 55, 0.08)', + 'shadow-monaco': '0 10px 40px rgba(185, 28, 28, 0.1)', + 'shadow-elevated': '0 20px 25px -5px rgba(0, 0, 0, 0.1)', }, }, monacousa_dark: { @@ -246,26 +247,62 @@ export default defineNuxtConfig({ VCard: { elevation: 0, rounded: 'xl', + class: 'card-modern', }, VBtn: { elevation: 0, - rounded: 'xl', + rounded: 'lg', class: 'text-none font-medium', + size: 'default', + density: 'comfortable', }, VNavigationDrawer: { elevation: 0, + class: 'sidebar-modern', }, VAppBar: { elevation: 0, flat: true, + class: 'appbar-modern', + density: 'comfortable', }, VTextField: { variant: 'outlined', - rounded: 'xl', + rounded: 'lg', + density: 'comfortable', + class: 'input-modern', }, VSelect: { variant: 'outlined', - rounded: 'xl', + rounded: 'lg', + density: 'comfortable', + class: 'select-modern', + }, + VDataTable: { + class: 'table-modern', + fixedHeader: true, + hover: true, + }, + VChip: { + rounded: 'lg', + size: 'default', + class: 'chip-modern', + }, + VDialog: { + class: 'dialog-modern', + maxWidth: '600', + }, + VAlert: { + rounded: 'lg', + variant: 'tonal', + class: 'alert-modern', + }, + VProgressLinear: { + rounded: true, + height: '6', + }, + VProgressCircular: { + width: '3', }, }, }, diff --git a/pages/design-test.vue b/pages/design-test.vue deleted file mode 100644 index 696a0f1..0000000 --- a/pages/design-test.vue +++ /dev/null @@ -1,175 +0,0 @@ - - - - - \ No newline at end of file