xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(tokens): align _tokens.scss with uni.scss values

Browse Source 
All color, typography, and spacing values now match uni.scss.
Added semantic colors and $font-size-xxs/$font-size-4xl.
This commit is contained in:
jacobxu666
2026-06-26 09:42:54 +08:00
parent dcba287aeb
commit 72d1c16f6d
1 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_tokens.scss
+32 -20
View File
@@ -1,44 +1,56 @@
// ============================================
// Design Tokens — Minimalist Modern
// Design Tokens — Aligned with uni.scss
// ============================================
// ⚠️ 所有值必须与 src/uni.scss 保持一致
// uni.scss 是 source of truth，此文件仅为 main.scss 的兼容层
// === COLORS ===
// Brand accent — Electric Blue
$color-accent: #0052FF;
$color-accent-secondary: #4D7CFF;
// Brand accent
$color-accent: #3c9cff;
$color-accent-secondary: #398ade;
$color-accent-foreground: #FFFFFF;
// Semantic
$color-success: #10B981;
$color-warning: #F59E0B;
$color-error: #EF4444;
$color-success: #5ac725;
$color-warning: #f9ae3d;
$color-error: #e53935;
// Neutrals
$color-background: #FAFAFA;
$color-foreground: #0F172A;
$color-muted: #F1F5F9;
$color-muted-foreground: #64748B;
$color-border: #E2E8F0;
$color-background: #f3f4f6;
$color-foreground: #111111;
$color-muted: #f4f4f5;
$color-muted-foreground: #333333;
$color-border: #eeeeee;
$color-card: #FFFFFF;
$color-ring: #0052FF;
$color-ring: #3c9cff;
// Semantic (价格/状态)
$color-price: #e53935;
$color-price-highlight: #FFD600;
$color-status-pending: #ff9500;
$color-status-success: #00b42a;
$color-status-cancel: #86909c;
// Gradients
$gradient-accent: linear-gradient(135deg, #{$color-accent}, #{$color-accent-secondary});
// === TYPOGRAPHY ===
$font-family-display: 'Noto Serif SC', 'STSong', 'SimSun', serif;
$font-family-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
$font-family-display: 'SourceHanSerifCN', '思源宋体', serif;
$font-family-body: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$font-family-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
$font-size-xxs: 18rpx;
$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-base: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-title: 38rpx;
$font-size-2xl: 44rpx;
$font-size-3xl: 56rpx;
$font-size-4xl: 64rpx;
$font-size-display: 72rpx;
$font-weight-normal: 400;
@@ -79,7 +91,7 @@ $shadow-sm: 0 2rpx 8rpx rgba(15, 23, 42, 0.04);
$shadow-base: 0 4rpx 16rpx rgba(15, 23, 42, 0.08);
$shadow-lg: 0 8rpx 32rpx rgba(15, 23, 42, 0.12);
$shadow-xl: 0 16rpx 48rpx rgba(15, 23, 42, 0.16);
$shadow-accent: 0 8rpx 24rpx rgba(0, 82, 255, 0.25);
$shadow-accent: 0 8rpx 24rpx rgba(60, 156, 255, 0.25);
// === TRANSITIONS ===
@@ -110,8 +122,8 @@ $uni-color-error: $color-error;
$uni-text-color: $color-foreground;
$uni-text-color-inverse: #FFFFFF;
$uni-text-color-grey: $color-muted-foreground;
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;
$uni-text-color-placeholder: #999999;
$uni-text-color-disable: #c8c9cc;
$uni-bg-color: $color-background;
$uni-bg-color-grey: $color-muted;
$uni-bg-color-hover: #f1f1f1;
@@ -122,7 +134,7 @@ $uni-font-size-base: $font-size-base;
$uni-font-size-lg: $font-size-lg;
$uni-font-size-title: 40rpx;
$uni-font-size-subtitle: $font-size-xl;
$uni-font-size-paragraph: 30rpx;
$uni-font-size-paragraph: $font-size-base;
$uni-img-size-sm: 40rpx;
$uni-img-size-base: 52rpx;
$uni-img-size-lg: 80rpx;
@@ -139,4 +151,4 @@ $uni-spacing-col-lg: 24rpx;
$uni-opacity-disabled: 0.3;
$uni-color-title: $color-foreground;
$uni-color-subtitle: $color-muted-foreground;
$uni-color-paragraph: #3f536e;
$uni-color-paragraph: $color-muted-foreground;