1
This commit is contained in:
ChuXun
340
styles/design-tokens.wxss
Normal file
340
styles/design-tokens.wxss
Normal file
@@ -0,0 +1,340 @@
|
||||
/**
|
||||
* ============================================
|
||||
* 🎨 知芽小筑 - 企业级设计令牌系统
|
||||
* ============================================
|
||||
* 参考：小红书、Instagram、微信、Twitter
|
||||
* 版本：v3.0.0
|
||||
* 更新：2025-10-14
|
||||
*/
|
||||
|
||||
/* ==================== 🌈 颜色系统 ==================== */
|
||||
|
||||
page {
|
||||
/* ---------- 品牌主色 - 活力渐变系统 ---------- */
|
||||
--brand-primary: #667EEA;
|
||||
--brand-secondary: #764BA2;
|
||||
--brand-accent: #FF6B9D;
|
||||
|
||||
/* 主渐变色组 - 用于不同场景 */
|
||||
--gradient-purple-dream: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
|
||||
--gradient-ocean-blue: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
|
||||
--gradient-fresh-green: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%);
|
||||
--gradient-sunset-pink: linear-gradient(135deg, #FA709A 0%, #FEE140 100%);
|
||||
--gradient-midnight-city: linear-gradient(135deg, #30CFD0 0%, #330867 100%);
|
||||
--gradient-aurora: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 50%, #2BFF88 100%);
|
||||
|
||||
/* 场景专用渐变 */
|
||||
--gradient-home: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
|
||||
--gradient-course: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
|
||||
--gradient-forum: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 90%, #2BFF88 100%);
|
||||
--gradient-tools: linear-gradient(135deg, #FCCF31 0%, #F55555 100%);
|
||||
--gradient-profile: linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%);
|
||||
|
||||
/* ---------- 语义化颜色 ---------- */
|
||||
--color-success: #52C41A;
|
||||
--color-success-light: #95DE64;
|
||||
--color-success-bg: #F6FFED;
|
||||
--color-success-border: #B7EB8F;
|
||||
|
||||
--color-warning: #FAAD14;
|
||||
--color-warning-light: #FFC53D;
|
||||
--color-warning-bg: #FFFBE6;
|
||||
--color-warning-border: #FFE58F;
|
||||
|
||||
--color-error: #FF4D4F;
|
||||
--color-error-light: #FF7875;
|
||||
--color-error-bg: #FFF1F0;
|
||||
--color-error-border: #FFCCC7;
|
||||
|
||||
--color-info: #1890FF;
|
||||
--color-info-light: #69C0FF;
|
||||
--color-info-bg: #E6F7FF;
|
||||
--color-info-border: #91D5FF;
|
||||
|
||||
/* ---------- 中性色 - 文字系统 ---------- */
|
||||
--text-primary: #1A1A1A; /* 主要文字 - 标题 */
|
||||
--text-secondary: #595959; /* 次要文字 - 正文 */
|
||||
--text-tertiary: #8C8C8C; /* 三级文字 - 辅助信息 */
|
||||
--text-quaternary: #BFBFBF; /* 四级文字 - 占位符 */
|
||||
--text-disabled: #D9D9D9; /* 禁用文字 */
|
||||
--text-inverse: #FFFFFF; /* 反色文字 - 深色背景上 */
|
||||
--text-link: #4A90E2; /* 链接文字 */
|
||||
--text-link-hover: #357ABD; /* 链接悬停 */
|
||||
|
||||
/* ---------- 背景色系统 ---------- */
|
||||
--bg-page: #F5F7FA; /* 页面背景 */
|
||||
--bg-primary: #FFFFFF; /* 主要背景 - 卡片 */
|
||||
--bg-secondary: #FAFAFA; /* 次要背景 */
|
||||
--bg-tertiary: #F0F2F5; /* 三级背景 */
|
||||
--bg-hover: #F5F5F5; /* 悬停背景 */
|
||||
--bg-active: #E8E8E8; /* 激活背景 */
|
||||
--bg-disabled: #F5F5F5; /* 禁用背景 */
|
||||
--bg-mask: rgba(0, 0, 0, 0.6); /* 遮罩层 */
|
||||
|
||||
/* ---------- 毛玻璃效果（Glassmorphism）---------- */
|
||||
--glass-white: rgba(255, 255, 255, 0.7);
|
||||
--glass-white-light: rgba(255, 255, 255, 0.5);
|
||||
--glass-white-strong: rgba(255, 255, 255, 0.9);
|
||||
--glass-black: rgba(0, 0, 0, 0.5);
|
||||
--glass-black-light: rgba(0, 0, 0, 0.3);
|
||||
--glass-border: rgba(255, 255, 255, 0.18);
|
||||
--glass-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.37);
|
||||
|
||||
/* ---------- 边框色系统 ---------- */
|
||||
--border-base: #E5E5E5;
|
||||
--border-light: #F0F0F0;
|
||||
--border-lighter: #FAFAFA;
|
||||
--border-dark: #D9D9D9;
|
||||
--border-darker: #BFBFBF;
|
||||
--divider: #F0F0F0;
|
||||
|
||||
/* ==================== 📝 字体系统 ==================== */
|
||||
|
||||
/* ---------- 字体家族 ---------- */
|
||||
--font-family-base: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||
'Segoe UI', Arial, sans-serif;
|
||||
--font-family-display: 'DIN Alternate Bold', -apple-system-font, 'SF Pro Display',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--font-family-mono: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
|
||||
/* ---------- 字号系统（14级） ---------- */
|
||||
--font-size-2xs: 18rpx; /* 极小 - 法律文本 */
|
||||
--font-size-xs: 22rpx; /* 很小 - 辅助信息 */
|
||||
--font-size-sm: 26rpx; /* 小 - 次要文本 */
|
||||
--font-size-base: 30rpx; /* 基础 - 正文 */
|
||||
--font-size-md: 32rpx; /* 中等 */
|
||||
--font-size-lg: 36rpx; /* 大 - 小标题 */
|
||||
--font-size-xl: 40rpx; /* 超大 - 标题 */
|
||||
--font-size-2xl: 48rpx; /* 2倍大 - 大标题 */
|
||||
--font-size-3xl: 56rpx; /* 3倍大 - 页面标题 */
|
||||
--font-size-4xl: 64rpx; /* 4倍大 - 特大标题 */
|
||||
--font-size-5xl: 72rpx; /* 5倍大 - Hero标题 */
|
||||
--font-size-6xl: 96rpx; /* 6倍大 - 展示标题 */
|
||||
--font-size-7xl: 128rpx; /* 7倍大 - 超级展示 */
|
||||
--font-size-8xl: 160rpx; /* 8倍大 - 巨型标题 */
|
||||
|
||||
/* ---------- 字重系统 ---------- */
|
||||
--font-weight-thin: 100; /* 极细 */
|
||||
--font-weight-extralight: 200; /* 超细 */
|
||||
--font-weight-light: 300; /* 细 */
|
||||
--font-weight-regular: 400; /* 常规 */
|
||||
--font-weight-medium: 500; /* 中等 */
|
||||
--font-weight-semibold: 600; /* 半粗 */
|
||||
--font-weight-bold: 700; /* 粗 */
|
||||
--font-weight-extrabold: 800; /* 超粗 */
|
||||
--font-weight-black: 900; /* 最粗 */
|
||||
|
||||
/* ---------- 行高系统 ---------- */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-snug: 1.375;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.625;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* ---------- 字间距 ---------- */
|
||||
--letter-spacing-tighter: -0.05em;
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
--letter-spacing-widest: 0.1em;
|
||||
|
||||
/* ==================== 📏 间距系统 ==================== */
|
||||
|
||||
/* 基于4rpx的精细间距系统 */
|
||||
--space-0: 0rpx;
|
||||
--space-1: 4rpx;
|
||||
--space-2: 8rpx;
|
||||
--space-3: 12rpx;
|
||||
--space-4: 16rpx;
|
||||
--space-5: 20rpx;
|
||||
--space-6: 24rpx;
|
||||
--space-7: 28rpx;
|
||||
--space-8: 32rpx;
|
||||
--space-9: 36rpx;
|
||||
--space-10: 40rpx;
|
||||
--space-11: 44rpx;
|
||||
--space-12: 48rpx;
|
||||
--space-14: 56rpx;
|
||||
--space-16: 64rpx;
|
||||
--space-18: 72rpx;
|
||||
--space-20: 80rpx;
|
||||
--space-24: 96rpx;
|
||||
--space-28: 112rpx;
|
||||
--space-32: 128rpx;
|
||||
--space-36: 144rpx;
|
||||
--space-40: 160rpx;
|
||||
--space-44: 176rpx;
|
||||
--space-48: 192rpx;
|
||||
--space-52: 208rpx;
|
||||
--space-56: 224rpx;
|
||||
--space-60: 240rpx;
|
||||
--space-64: 256rpx;
|
||||
--space-72: 288rpx;
|
||||
--space-80: 320rpx;
|
||||
--space-96: 384rpx;
|
||||
|
||||
/* ==================== 🔲 圆角系统 ==================== */
|
||||
|
||||
--radius-none: 0rpx;
|
||||
--radius-xs: 4rpx;
|
||||
--radius-sm: 8rpx;
|
||||
--radius-base: 12rpx;
|
||||
--radius-md: 16rpx;
|
||||
--radius-lg: 20rpx;
|
||||
--radius-xl: 24rpx;
|
||||
--radius-2xl: 32rpx;
|
||||
--radius-3xl: 40rpx;
|
||||
--radius-4xl: 48rpx;
|
||||
--radius-full: 9999rpx;
|
||||
--radius-round: 50%;
|
||||
|
||||
/* ==================== 🌑 阴影系统 ==================== */
|
||||
|
||||
/* 基础阴影 - 层次感 */
|
||||
--shadow-none: none;
|
||||
--shadow-xs: 0 1rpx 2rpx 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.06), 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.04);
|
||||
--shadow-base: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.08), 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.1), 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 12rpx 24rpx 0 rgba(0, 0, 0, 0.12), 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);
|
||||
--shadow-xl: 0 16rpx 32rpx 0 rgba(0, 0, 0, 0.14), 0 12rpx 24rpx 0 rgba(0, 0, 0, 0.10);
|
||||
--shadow-2xl: 0 24rpx 48rpx 0 rgba(0, 0, 0, 0.18), 0 16rpx 32rpx 0 rgba(0, 0, 0, 0.12);
|
||||
--shadow-3xl: 0 32rpx 64rpx 0 rgba(0, 0, 0, 0.20), 0 24rpx 48rpx 0 rgba(0, 0, 0, 0.14);
|
||||
|
||||
/* 彩色阴影 - 品牌感 */
|
||||
--shadow-primary: 0 8rpx 24rpx -4rpx rgba(102, 126, 234, 0.4);
|
||||
--shadow-secondary: 0 8rpx 24rpx -4rpx rgba(118, 75, 162, 0.4);
|
||||
--shadow-success: 0 8rpx 24rpx -4rpx rgba(82, 196, 26, 0.4);
|
||||
--shadow-warning: 0 8rpx 24rpx -4rpx rgba(250, 173, 20, 0.4);
|
||||
--shadow-error: 0 8rpx 24rpx -4rpx rgba(255, 77, 79, 0.4);
|
||||
--shadow-info: 0 8rpx 24rpx -4rpx rgba(24, 144, 255, 0.4);
|
||||
|
||||
/* 内阴影 */
|
||||
--shadow-inner: inset 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* ==================== ⚡ 动画系统 ==================== */
|
||||
|
||||
/* ---------- 持续时间 ---------- */
|
||||
--duration-fastest: 100ms;
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 200ms;
|
||||
--duration-moderate: 300ms;
|
||||
--duration-slow: 400ms;
|
||||
--duration-slower: 500ms;
|
||||
--duration-slowest: 600ms;
|
||||
|
||||
/* ---------- 缓动函数 ---------- */
|
||||
--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-sharp: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
|
||||
/* ---------- 组合过渡 ---------- */
|
||||
--transition-fast: all var(--duration-fast) var(--ease-out);
|
||||
--transition-base: all var(--duration-normal) var(--ease-in-out);
|
||||
--transition-slow: all var(--duration-slow) var(--ease-in-out);
|
||||
|
||||
/* ==================== 📱 布局系统 ==================== */
|
||||
|
||||
/* ---------- 容器宽度 ---------- */
|
||||
--container-xs: 640rpx;
|
||||
--container-sm: 750rpx;
|
||||
--container-md: 960rpx;
|
||||
--container-lg: 1200rpx;
|
||||
--container-xl: 1400rpx;
|
||||
|
||||
/* ---------- Z-index 层级 ---------- */
|
||||
--z-index-base: 0;
|
||||
--z-index-dropdown: 1000;
|
||||
--z-index-sticky: 1010;
|
||||
--z-index-fixed: 1020;
|
||||
--z-index-modal-backdrop: 1030;
|
||||
--z-index-modal: 1040;
|
||||
--z-index-popover: 1050;
|
||||
--z-index-tooltip: 1060;
|
||||
--z-index-notification: 1070;
|
||||
|
||||
/* ---------- 安全区域 ---------- */
|
||||
--safe-area-inset-top: env(safe-area-inset-top);
|
||||
--safe-area-inset-right: env(safe-area-inset-right);
|
||||
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
||||
--safe-area-inset-left: env(safe-area-inset-left);
|
||||
|
||||
/* ==================== 🎭 特效系统 ==================== */
|
||||
|
||||
/* ---------- 模糊效果 ---------- */
|
||||
--blur-none: 0;
|
||||
--blur-sm: 8rpx;
|
||||
--blur-base: 16rpx;
|
||||
--blur-md: 24rpx;
|
||||
--blur-lg: 32rpx;
|
||||
--blur-xl: 40rpx;
|
||||
--blur-2xl: 80rpx;
|
||||
--blur-3xl: 160rpx;
|
||||
|
||||
/* ---------- 透明度 ---------- */
|
||||
--opacity-0: 0;
|
||||
--opacity-5: 0.05;
|
||||
--opacity-10: 0.1;
|
||||
--opacity-20: 0.2;
|
||||
--opacity-25: 0.25;
|
||||
--opacity-30: 0.3;
|
||||
--opacity-40: 0.4;
|
||||
--opacity-50: 0.5;
|
||||
--opacity-60: 0.6;
|
||||
--opacity-70: 0.7;
|
||||
--opacity-75: 0.75;
|
||||
--opacity-80: 0.8;
|
||||
--opacity-90: 0.9;
|
||||
--opacity-95: 0.95;
|
||||
--opacity-100: 1;
|
||||
|
||||
/* ---------- 渐变叠加效果 ---------- */
|
||||
--overlay-dark: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
--overlay-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
|
||||
}
|
||||
|
||||
/* ==================== 🌙 深色模式支持 ==================== */
|
||||
|
||||
[data-theme="dark"] {
|
||||
/* 文字颜色反转 */
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #B3B3B3;
|
||||
--text-tertiary: #808080;
|
||||
--text-quaternary: #595959;
|
||||
--text-disabled: #404040;
|
||||
--text-inverse: #1A1A1A;
|
||||
|
||||
/* 背景色反转 */
|
||||
--bg-page: #0A0A0A;
|
||||
--bg-primary: #1A1A1A;
|
||||
--bg-secondary: #262626;
|
||||
--bg-tertiary: #2F2F2F;
|
||||
--bg-hover: #333333;
|
||||
--bg-active: #404040;
|
||||
--bg-mask: rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
--glass-white: rgba(255, 255, 255, 0.1);
|
||||
--glass-white-light: rgba(255, 255, 255, 0.05);
|
||||
--glass-black: rgba(0, 0, 0, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* 边框色 */
|
||||
--border-base: #333333;
|
||||
--border-light: #262626;
|
||||
--border-dark: #404040;
|
||||
--divider: #262626;
|
||||
|
||||
/* 阴影调整 */
|
||||
--shadow-sm: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-base: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 8rpx 24rpx 0 rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 12rpx 32rpx 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
Reference in New Issue
Block a user