docs(theme): 同步浅色暖阳晨曦设计系统规范文档与活动发起页主题样式
这个提交包含在:
@@ -108,28 +108,28 @@ $border-subtle: #1E293B; // 卡片外描边/分割线
|
||||
$border-focus: #4F46E5; // 激活描边色
|
||||
```
|
||||
|
||||
#### 3.1.2 暖阳赤焰暖色系 (Sunset Amber & Warm Ember)
|
||||
以暖夜焦糖深褐黑为底色,以暖阳曜橙与琥珀金为流光,契合同城探店、陪吃、陪喝、陪唱等温暖治愈系生活场景:
|
||||
#### 3.1.2 浅色暖阳晨曦暖色系 (Light Warm Sunset Morning)
|
||||
以明亮温润的奶油米白为底色,以纯白卡片与曜橙暖金为视觉焦点,摆脱暗色压抑感,呈现治愈、清爽的日间同城生活陪伴体验:
|
||||
|
||||
```scss
|
||||
// 暖阳赤焰专属 Tokens
|
||||
$warm-bg-primary: #140E0A; // 页面全局最底色 (暖夜焦糖深褐黑)
|
||||
$warm-bg-surface: #221711; // 卡片容器底色 (暗夜暖咖琥珀)
|
||||
$warm-bg-surface-elevated: #2E1F17; // 次级浮层底色 (浅暖咖)
|
||||
$warm-bg-surface-glass: rgba(34, 23, 17, 0.85); // 拟态磨砂玻璃
|
||||
// 浅色暖阳晨曦专属 Tokens
|
||||
$warm-bg-primary: #FDFBF7; // 页面全局最底色 (温润奶油米白)
|
||||
$warm-bg-surface: #FFFFFF; // 卡片容器底色 (高洁暖白)
|
||||
$warm-bg-surface-elevated: #F8F5F0; // 次级浮层底色 (浅暖米杏)
|
||||
$warm-bg-surface-glass: rgba(255, 255, 255, 0.90); // 暖白透亮磨砂玻璃
|
||||
|
||||
// 品牌核心与暖色流光
|
||||
$warm-color-brand: #F97316; // 核心曜橙 (Primary CTA,极具温度与能量)
|
||||
$warm-color-brand-light: #FB923C; // 暖橙高光
|
||||
$warm-color-brand-gold: #F59E0B; // 琥珀暖金流光
|
||||
$warm-color-brand-glow: rgba(249, 115, 22, 0.35); // 暖橙弥散发光光晕
|
||||
$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B);
|
||||
$warm-color-brand: #EA580C; // 核心曜橙 (Primary CTA,浅底高对比度聚焦色)
|
||||
$warm-color-brand-light: #F97316; // 暖橙高光
|
||||
$warm-color-brand-gold: #F59E0B; // 暖金流光
|
||||
$warm-color-brand-glow: rgba(234, 88, 12, 0.18); // 柔和暖橙弥散微光
|
||||
$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #FB923C);
|
||||
|
||||
// 文本与无障碍对比色阶 (严格满足 WCAG AA 标准)
|
||||
$warm-text-primary: #FFF7ED; // 一级主文本 (暖白,对比度 > 13:1)
|
||||
$warm-text-secondary: #C7B5A7; // 二级描述文本 (暖灰褐,对比度 > 5.5:1)
|
||||
$warm-text-muted: #8C7565; // 三级占位说明 (暗咖灰,对比度 > 3.5:1)
|
||||
$warm-border-subtle: #342217; // 暖色分割线与卡片描边
|
||||
$warm-text-primary: #1C1917; // 一级主文本 (暖炭黑,对比度 > 15:1,超越 AAA 级)
|
||||
$warm-text-secondary: #57534E; // 二级描述文本 (暖深灰,对比度 > 7:1)
|
||||
$warm-text-muted: #78716C; // 三级占位说明 (暖中灰,对比度 > 4.5:1)
|
||||
$warm-border-subtle: #F0ECE4; // 浅米暖灰分割线与卡片描边
|
||||
$warm-border-focus: #EA580C; // 激活描边色
|
||||
```
|
||||
|
||||
|
||||
@@ -438,30 +438,61 @@ const handleSubmit = () => {
|
||||
}
|
||||
|
||||
.create-activity-container.theme-warm {
|
||||
background-color: #140E0A;
|
||||
background-color: #FDFBF7;
|
||||
|
||||
.mode-switch-wrap .mode-item {
|
||||
background-color: #221711;
|
||||
border-color: rgba(249, 115, 22, 0.12);
|
||||
background-color: #FFFFFF;
|
||||
border-color: #F0ECE4;
|
||||
box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.04);
|
||||
|
||||
.mode-text-box .mode-title {
|
||||
color: #1C1917;
|
||||
}
|
||||
.mode-text-box .mode-desc {
|
||||
color: #78716C;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(249, 115, 22, 0.15);
|
||||
border-color: #F97316;
|
||||
background: rgba(234, 88, 12, 0.08);
|
||||
border-color: #EA580C;
|
||||
.mode-text-box .mode-title {
|
||||
color: #EA580C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background-color: #221711;
|
||||
border-color: rgba(249, 115, 22, 0.12);
|
||||
background-color: #FFFFFF;
|
||||
border-color: #F0ECE4;
|
||||
box-shadow: 0 4rpx 20rpx rgba(28, 25, 23, 0.05);
|
||||
|
||||
.form-title {
|
||||
color: #1C1917;
|
||||
}
|
||||
.input-row {
|
||||
border-bottom-color: #F5F2EC;
|
||||
.row-label {
|
||||
color: #1C1917;
|
||||
}
|
||||
.row-input {
|
||||
color: #1C1917;
|
||||
}
|
||||
}
|
||||
.calc-preview {
|
||||
background: #F8F5F0;
|
||||
.preview-label {
|
||||
color: #78716C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
background-color: rgba(34, 23, 17, 0.95);
|
||||
border-top-color: rgba(249, 115, 22, 0.15);
|
||||
background-color: rgba(253, 251, 247, 0.95);
|
||||
border-top-color: #F0ECE4;
|
||||
|
||||
.btn-submit {
|
||||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||||
box-shadow: 0 4rpx 20rpx rgba(249, 115, 22, 0.45);
|
||||
box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户