Rinjae
120 lines
3.2 KiB
SCSS
120 lines
3.2 KiB
SCSS
// -----------------------------------------------------------------------------
|
|
// This file contains all application-wide SASS variables
|
|
// Based on design/styles-v2.css - Modern vibrant design system
|
|
// -----------------------------------------------------------------------------
|
|
|
|
// Color Palette - Vibrant and Modern
|
|
// Primary colors
|
|
$primary-blue: #0049b4; // 광주은행 블루
|
|
$secondary-blue: #c3dfea; // Deep blue
|
|
$accent-cyan: #00D4FF; // Sky blue accent
|
|
$accent-yellow: #FFD93D; // Yellow accent
|
|
$accent-orange: #FF6B6B; // Orange accent
|
|
$accent-green: #6BCF7F; // Green accent
|
|
$accent-purple: #A78BFA; // Purple accent
|
|
|
|
$main-bg: #EDF9FE;
|
|
|
|
// Neutral colors
|
|
$text-dark: #1A1A2E; // Main text color
|
|
$text-gray: #64748B; // Secondary text
|
|
$text-light: #94A3B8; // Light text
|
|
$white: #FFFFFF; // Pure white
|
|
$gray-bg: #F8FAFC; // Light background
|
|
$light-bg: #EFF6FF; // Blue tinted background
|
|
$border-gray: #E2E8F0; // Border color
|
|
$black: #000000; // Pure black
|
|
$gray-800: #1F2937; // Dark gray
|
|
$gray-900: #111827; // Darker gray
|
|
|
|
|
|
// Shadows
|
|
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
$shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
|
|
$shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
|
|
$shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
|
|
|
|
// Typography
|
|
$font-family-primary: '원신한', 'OneShinhan', 'Spoqa Han Sans Neo', 'SpoqaHanSans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-family-mono: 'Fira Code', 'Courier New', monospace;
|
|
|
|
// Font sizes
|
|
$font-size-xs: 12px;
|
|
$font-size-sm: 14px;
|
|
$font-size-base: 16px;
|
|
$font-size-md: 18px;
|
|
$font-size-lg: 20px;
|
|
$font-size-xl: 24px;
|
|
$font-size-2xl: 32px;
|
|
$font-size-3xl: 40px;
|
|
$font-size-4xl: 48px;
|
|
$font-size-5xl: 56px;
|
|
|
|
// Font weights
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
$font-weight-extrabold: 800;
|
|
|
|
// Line heights
|
|
$line-height-tight: 1.2;
|
|
$line-height-normal: 1.6;
|
|
$line-height-loose: 1.8;
|
|
|
|
// Spacing
|
|
$spacing-xs: 4px;
|
|
$spacing-sm: 8px;
|
|
$spacing-md: 16px;
|
|
$spacing-lg: 24px;
|
|
$spacing-xl: 32px;
|
|
$spacing-2xl: 40px;
|
|
$spacing-3xl: 48px;
|
|
$spacing-4xl: 64px;
|
|
$spacing-5xl: 80px;
|
|
$spacing-6xl: 100px;
|
|
|
|
// Border radius
|
|
$border-radius-sm: 6px;
|
|
$border-radius-md: 8px;
|
|
$border-radius-lg: 12px;
|
|
$border-radius-xl: 16px;
|
|
$border-radius-2xl: 20px;
|
|
$border-radius-full: 50px;
|
|
$border-radius-circle: 50%;
|
|
|
|
// Layout
|
|
$container-max-width: 1280px;
|
|
$header-height: 80px;
|
|
|
|
// Breakpoints
|
|
$breakpoint-xs: 480px;
|
|
$breakpoint-sm: 768px;
|
|
$breakpoint-md: 1024px;
|
|
$breakpoint-lg: 1280px;
|
|
$breakpoint-xl: 1440px;
|
|
|
|
// Z-index
|
|
$z-index-dropdown: 100;
|
|
$z-index-sticky: 200;
|
|
$z-index-fixed: 300;
|
|
$z-index-header: 350;
|
|
$z-index-modal-backdrop: 400;
|
|
$z-index-modal: 500;
|
|
$z-index-popover: 600;
|
|
$z-index-tooltip: 700;
|
|
$z-index-notification: 800;
|
|
|
|
// Animation
|
|
$transition-base: all 0.3s ease;
|
|
$transition-fast: all 0.15s ease;
|
|
$transition-slow: all 0.5s ease;
|
|
|
|
// Component specific variables
|
|
$button-padding-x: 32px;
|
|
$button-padding-y: 16px;
|
|
$card-padding: 32px;
|
|
$input-padding-x: 16px;
|
|
$input-padding-y: 12px;
|
|
$input-height: 48px;
|