Files
photo-live/apps/mobile/lib/ui/tokens.dart
T
2026-09-21 14:55:29 +08:00

84 lines
3.6 KiB
Dart
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/// UI-01 设计令牌(方案 §3.1/§3.2):色彩、间距、圆角、动效时长。
///
/// - 语义色(成功/等待/错误)不占用 Material ColorScheme 角色(secondary
/// 虽承载等待色,但组件层统一走令牌),浅色值为方案基准;深色场景用
/// `*Dark` 变体——深色表面上直接使用浅色基准会跌破对比度目标,组件按
/// [Brightness] 选择(见 StateBadge)。
/// - 间距 4/8/12/16/24/32;页面左右默认 [kSpace16]。
/// - 圆角:卡片 16 / 输入框与按钮 12 / 小标签 8,避免全部做成胶囊。
/// - 动效:轻量状态 [kMotionFast]、轮播/照片过渡 [kMotionCarousel];
/// 系统「减少动态效果」开启时 [motion] 统一归零(禁用非必要动效)。
library;
import 'package:flutter/material.dart';
// ── 语义色(浅色基准,方案 §3.1)──────────────────────────────────────────
/// 成功:已上传等完成事实(#16794B)。
const Color kColorSuccess = Color(0xFF16794B);
/// 等待:等待网络、等待调度(#996300)。
const Color kColorWaiting = Color(0xFF996300);
/// 错误:需要用户处理的失败(#B42318)。
const Color kColorError = Color(0xFFB42318);
/// 信息:中性提示(与主色一致,#1A73E8)。
const Color kColorInfo = Color(0xFF1A73E8);
/// 分隔线:轻分隔,不用粗边框(#E5EAF1)。
const Color kColorDivider = Color(0xFFE5EAF1);
/// 次文字:时间、地点、说明(#5E6878)。
const Color kColorTextSecondary = Color(0xFF5E6878);
// ── 语义色(深色变体:深色表面对应提亮值)──────────────────────────────
/// 成功(深色表面用)。
const Color kColorSuccessDark = Color(0xFF34D399);
/// 等待(深色表面用)。
const Color kColorWaitingDark = Color(0xFFFCD34D);
/// 错误(深色表面用)。
const Color kColorErrorDark = Color(0xFFF87171);
/// 信息(深色表面用,与深色主色一致)。
const Color kColorInfoDark = Color(0xFF8AB4F8);
/// 次文字(深色表面用)。
const Color kColorTextSecondaryDark = Color(0xFFA6B0C0);
// ── 间距(4/8/12/16/24/32)───────────────────────────────────────────────
const double kSpace4 = 4.0;
const double kSpace8 = 8.0;
const double kSpace12 = 12.0;
const double kSpace16 = 16.0;
const double kSpace24 = 24.0;
const double kSpace32 = 32.0;
// ── 圆角(卡片 16 / 输入框与按钮 12 / 小标签 8)────────────────────────
const double kRadiusCard = 16.0;
const double kRadiusInput = 12.0;
const double kRadiusBadge = 8.0;
// ── 动效时长(轻量 150-220ms / 轮播 250-350ms)────────────────────────
/// 轻量状态过渡(选中态、chip 切换等)。
const Duration kMotionFast = Duration(milliseconds: 180);
/// 轮播/照片过渡。
const Duration kMotionCarousel = Duration(milliseconds: 300);
/// 「减少动态效果」开启时的时长(等价禁用非必要动效)。
const Duration kMotionReduce = Duration.zero;
/// 当前上下文的动效时长:默认 [kMotionFast],`carousel: true` 取
/// [kMotionCarousel];系统「减少动态效果」开启时一律 [kMotionReduce]。
Duration motion(BuildContext context, {bool carousel = false}) {
if (MediaQuery.disableAnimationsOf(context)) return kMotionReduce;
return carousel ? kMotionCarousel : kMotionFast;
}