361 lines
7.9 KiB
SCSS
361 lines
7.9 KiB
SCSS
// 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;
|
|
}
|
|
} |