nepiedg
113 lines
3.1 KiB
SCSS
113 lines
3.1 KiB
SCSS
// ==========================================
|
|
// 薄荷绿浅色系主题 - 统一设计变量
|
|
// ==========================================
|
|
|
|
// ---- 主色调 (薄荷绿) ----
|
|
$color-primary: #34C8A0;
|
|
$color-primary-dark: #1AA37A;
|
|
$color-primary-deeper: #14936d;
|
|
$color-primary-light: #6ee7be;
|
|
$color-primary-soft: #E6F7F1;
|
|
$color-primary-softer: #F0FDF9;
|
|
$color-primary-bg: rgba(52, 200, 160, 0.08);
|
|
$color-primary-border: rgba(52, 200, 160, 0.14);
|
|
$color-primary-shadow: rgba(52, 200, 160, 0.12);
|
|
|
|
// ---- 功能色 ----
|
|
$color-success: #10B981;
|
|
$color-warning: #F59E0B;
|
|
$color-warning-bg: #FEF3C7;
|
|
$color-warning-text: #D97706;
|
|
$color-danger: #EF4444;
|
|
$color-danger-bg: rgba(239, 68, 68, 0.06);
|
|
$color-info: #3B82F6;
|
|
$color-info-bg: rgba(59, 130, 246, 0.08);
|
|
|
|
// ---- 文字色 ----
|
|
$text-primary: #111827;
|
|
$text-secondary: #4b5563;
|
|
$text-tertiary: #6b7280;
|
|
$text-muted: #9ca3af;
|
|
$text-disabled: #d1d5db;
|
|
$text-inverse: #ffffff;
|
|
$text-accent: $color-primary-dark;
|
|
|
|
// ---- 背景色 ----
|
|
$bg-page: #F5F8F6;
|
|
$bg-page-gradient: linear-gradient(180deg, $color-primary-soft 0%, $color-primary-softer 40%, #FAFFFE 100%);
|
|
$bg-card: #ffffff;
|
|
$bg-card-glass: rgba(255, 255, 255, 0.88);
|
|
$bg-card-hover: #f7faf8;
|
|
$bg-subtle: #fbfcfc;
|
|
$bg-muted: #f3f4f6;
|
|
|
|
// ---- 边框 ----
|
|
$border-light: rgba(15, 23, 42, 0.06);
|
|
$border-card: $color-primary-border;
|
|
$border-divider: #f0f0f0;
|
|
|
|
// ---- 圆角 ----
|
|
$radius-xs: 8rpx;
|
|
$radius-sm: 12rpx;
|
|
$radius-md: 16rpx;
|
|
$radius-lg: 20rpx;
|
|
$radius-xl: 24rpx;
|
|
$radius-2xl: 32rpx;
|
|
$radius-full: 999rpx;
|
|
|
|
// ---- 间距 ----
|
|
$spacing-xs: 8rpx;
|
|
$spacing-sm: 12rpx;
|
|
$spacing-md: 16rpx;
|
|
$spacing-lg: 24rpx;
|
|
$spacing-xl: 32rpx;
|
|
$spacing-2xl: 40rpx;
|
|
$spacing-page: 28rpx;
|
|
|
|
// ---- 阴影 ----
|
|
$shadow-sm: 0 4rpx 12rpx rgba(52, 200, 160, 0.06);
|
|
$shadow-card: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
|
$shadow-md: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
|
|
$shadow-lg: 0 18rpx 36rpx rgba(15, 23, 42, 0.08);
|
|
$shadow-btn: 0 12rpx 28rpx rgba(52, 200, 160, 0.22);
|
|
$shadow-fab: 0 18rpx 36rpx rgba(52, 200, 160, 0.3);
|
|
|
|
// ---- 字号 ----
|
|
$font-xs: 20rpx;
|
|
$font-sm: 22rpx;
|
|
$font-base: 24rpx;
|
|
$font-md: 26rpx;
|
|
$font-lg: 28rpx;
|
|
$font-xl: 30rpx;
|
|
$font-2xl: 34rpx;
|
|
$font-3xl: 40rpx;
|
|
$font-4xl: 52rpx;
|
|
$font-display: 74rpx;
|
|
|
|
// ---- 字重 ----
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
$font-weight-heavy: 800;
|
|
|
|
// ---- 行高 ----
|
|
$line-height-tight: 1.2;
|
|
$line-height-normal: 1.5;
|
|
$line-height-relaxed: 1.7;
|
|
|
|
// ---- 字体 ----
|
|
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
$font-family-number: 'DIN Alternate', $font-family-base;
|
|
|
|
// ---- 渐变 ----
|
|
$gradient-primary: linear-gradient(180deg, $color-primary 0%, $color-primary-dark 100%);
|
|
$gradient-primary-soft: linear-gradient(180deg, $color-primary-soft 0%, $color-primary-softer 100%);
|
|
$gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 249, 0.94) 100%);
|
|
$gradient-card-subtle: linear-gradient(180deg, $bg-subtle 0%, $bg-card-hover 100%);
|
|
|
|
// ---- 动画 ----
|
|
$transition-fast: 0.2s ease;
|
|
$transition-normal: 0.3s ease;
|
|
$transition-slow: 0.5s ease;
|