320 lines
8.6 KiB
SCSS
320 lines
8.6 KiB
SCSS
// 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;
|
|
} |