/** * Design Tokens - Super Player App * 基于 UI/UX Pro Max 专业方法论 * * 包含：颜色、间距、排版、阴影、动画、Z-index 系统 */ :root { /* ======================================== 颜色系统 - Light Mode ======================================== */ /* 主色 - Warm & Energetic */ --color-primary: #FFB800; --color-primary-hover: #FFD24E; --color-primary-active: #E6A600; /* 辅助色 */ --color-secondary: #EF6F9E; --color-secondary-hover: #FFB4CB; --color-secondary-active: #D65A88; /* 中性色 */ --color-surface: #FFFFFF; --color-background: #F9FAFB; --color-border: rgba(0, 0, 0, 0.1); /* 文本颜色 */ --color-text-primary: #111827; --color-text-secondary: #6B7280; --color-text-tertiary: #9CA3AF; --color-text-disabled: #D1D5DB; /* 语义色 */ --color-success: #10B981; --color-success-bg: #D1FAE5; --color-error: #EF4444; --color-error-bg: #FEE2E2; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-info: #3B82F6; --color-info-bg: #DBEAFE; /* ======================================== 颜色系统 - Dark Mode ======================================== */ --color-primary-dark: #FFD24E; --color-secondary-dark: #FFB4CB; --color-surface-dark: #1D2028; --color-background-dark: #0E0F12; --color-border-dark: rgba(255, 255, 255, 0.1); --color-text-primary-dark: #FFF7EE; --color-text-secondary-dark: #9FA4AE; --color-text-tertiary-dark: #6B7280; --color-text-disabled-dark: #4B5563; /* ======================================== 间距系统 (4pt/8dp 递增) ======================================== */ --spacing-0: 0; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; /* ======================================== 排版系统 ======================================== */ /* 字体栈 */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 字体大小 */ --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 */ /* 行高 */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* 字重 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ======================================== 圆角系统 ======================================== */ --radius-none: 0; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ======================================== 阴影系统 ======================================== */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ======================================== 动画系统 ======================================== */ /* 时长 */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; /* 缓动函数 */ --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-spring: cubic-bezier(0.36, 0.66, 0.04, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ======================================== Z-index 系统 ======================================== */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 40; --z-modal-backdrop: 100; --z-modal: 110; --z-drawer: 110; --z-popover: 120; --z-toast: 1000; /* ======================================== 触摸目标尺寸 ======================================== */ --touch-target-min: 44px; /* iOS 标准 */ --touch-spacing-min: 8px; /* 最小间距 */ /* ======================================== 断点系统 ======================================== */ --breakpoint-sm: 375px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1440px; /* ======================================== 容器宽度 ======================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* ======================================== 特殊效果 ======================================== */ --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px; --blur-xl: 24px; --backdrop-blur: blur(20px); --backdrop-opacity: 0.6; } /* ======================================== Dark Mode 切换 ======================================== */ @media (prefers-color-scheme: dark) { :root { --color-primary: var(--color-primary-dark); --color-secondary: var(--color-secondary-dark); --color-surface: var(--color-surface-dark); --color-background: var(--color-background-dark); --color-border: var(--color-border-dark); --color-text-primary: var(--color-text-primary-dark); --color-text-secondary: var(--color-text-secondary-dark); --color-text-tertiary: var(--color-text-tertiary-dark); --color-text-disabled: var(--color-text-disabled-dark); } } /* 手动切换 Dark Mode */ [data-theme="dark"] { --color-primary: var(--color-primary-dark); --color-secondary: var(--color-secondary-dark); --color-surface: var(--color-surface-dark); --color-background: var(--color-background-dark); --color-border: var(--color-border-dark); --color-text-primary: var(--color-text-primary-dark); --color-text-secondary: var(--color-text-secondary-dark); --color-text-tertiary: var(--color-text-tertiary-dark); --color-text-disabled: var(--color-text-disabled-dark); } /* ======================================== 减少动效支持 ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }