6151fde7c4
- match-tokens: alias 增加值条件映射，支持 doctor/patient variant 自动检测 - parse-prototype: 支持 IosFrame label prop 提取（JSX 属性模式） - interaction-rules: login-cta 增加 exclude_patterns 避免"立即关注"误报 - tokens.yml: T.pri/T.priL/T.priD alias 改为数组格式，按值匹配 variant 验证: 患者端 T.pri→--tk-pri 确认，医生端 T.pri→--tk-pri.doctor 确认
424 lines
9.3 KiB
YAML
424 lines
9.3 KiB
YAML
version: 1
|
||
updated: "2026-05-17"
|
||
|
||
# ============================================================================
|
||
# Design Token 注册表
|
||
# 数据源: apps/miniprogram/src/styles/tokens.scss + variables.scss
|
||
# ============================================================================
|
||
|
||
colors:
|
||
# --- 主色系（赤土橙） ---
|
||
- token: --tk-pri
|
||
value: "#C4623A"
|
||
scss_var: "$pri"
|
||
role: 主色/赤土橙 accent
|
||
|
||
- token: --tk-pri-l
|
||
value: "#F0DDD4"
|
||
scss_var: "$pri-l"
|
||
role: 主色浅/赤土浅
|
||
|
||
- token: --tk-pri-d
|
||
value: "#8B3E1F"
|
||
scss_var: "$pri-d"
|
||
role: 主色深/赤土深
|
||
|
||
# --- 阴影色（含透明度） ---
|
||
- token: --tk-shadow-btn
|
||
value: "0 4px 16px rgba(196, 98, 58, 0.3)"
|
||
scss_var: "$shadow-btn"
|
||
role: 主按钮阴影
|
||
|
||
- token: --tk-shadow-tab
|
||
value: "0 2px 8px rgba(196, 98, 58, 0.25)"
|
||
scss_var: "$shadow-tab"
|
||
role: 选中Tab阴影
|
||
|
||
# --- 文字色 ---
|
||
- token: --tk-text-secondary
|
||
value: "#78716C"
|
||
scss_var: "$tx3"
|
||
role: 淡文字/辅助文字
|
||
|
||
# --- 卡片背景 ---
|
||
- token: --tk-card-bg
|
||
value: "#FFFFFF"
|
||
scss_var: "$card"
|
||
role: 卡片白底
|
||
|
||
# --- 医生端覆盖色（.doctor-mode 下自动替换 --tk-pri*） ---
|
||
- token: --tk-pri.doctor
|
||
value: "#3A6B8C"
|
||
scss_var: "$doc-pri"
|
||
role: 医生端主色/靛蓝
|
||
note: 仅在 .doctor-mode 下覆盖 --tk-pri
|
||
|
||
- token: --tk-pri-l.doctor
|
||
value: "#D4E5F0"
|
||
scss_var: "$doc-pri-l"
|
||
role: 医生端浅色
|
||
|
||
- token: --tk-pri-d.doctor
|
||
value: "#2A4F6A"
|
||
scss_var: "$doc-pri-d"
|
||
role: 医生端深色
|
||
|
||
# --- 未映射到 Token 的 SCSS 变量（原型中有但 tokens.scss 未声明为 CSS 变量） ---
|
||
unmapped_scss_variables:
|
||
- scss_var: "$bg"
|
||
value: "#F5F0EB"
|
||
role: 页面主背景/温润米底
|
||
note: "原型 T.bg 映射目标，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$tx"
|
||
value: "#2D2A26"
|
||
role: 主文字色/暖黑
|
||
note: "原型 T.tx 映射目标，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$tx2"
|
||
value: "#5A554F"
|
||
role: 次文字色/暖灰
|
||
note: "原型 T.tx2 近似映射，elder-mode 下 --tk-text-secondary 覆盖为此值"
|
||
|
||
- scss_var: "$bd"
|
||
value: "#E8E2DC"
|
||
role: 边框色
|
||
note: "原型 T.bd 映射目标，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$bd-l"
|
||
value: "#F0EBE5"
|
||
role: 浅边框色
|
||
|
||
- scss_var: "$acc"
|
||
value: "#5B7A5E"
|
||
role: 鼠尾草绿/成功色
|
||
note: "原型中成功色，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$acc-l"
|
||
value: "#E8F0E8"
|
||
role: 成功浅色
|
||
|
||
- scss_var: "$dan"
|
||
value: "#B54A4A"
|
||
role: 危险色/柔红
|
||
note: "原型中危险色，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$dan-l"
|
||
value: "#FDEAEA"
|
||
role: 危险浅色
|
||
|
||
- scss_var: "$wrn"
|
||
value: "#C4873A"
|
||
role: 警告色/暖琥珀
|
||
note: "原型中警告色，tokens.scss 未声明为 CSS 变量"
|
||
|
||
- scss_var: "$wrn-l"
|
||
value: "#FFF3E0"
|
||
role: 警告浅色
|
||
|
||
- scss_var: "$surface-alt"
|
||
value: "#EDE8E2"
|
||
role: 辅助底色
|
||
|
||
- scss_var: "$wechat"
|
||
value: "#07C160"
|
||
role: 微信绿
|
||
|
||
typography:
|
||
- token: --tk-font-display
|
||
value: "72px"
|
||
note: 大屏展示
|
||
elder: "80px"
|
||
|
||
- token: --tk-font-hero
|
||
value: "48px"
|
||
note: 启动页标题
|
||
elder: "56px"
|
||
|
||
- token: --tk-font-h1
|
||
value: "28px"
|
||
note: 页面标题 serif bold
|
||
elder: "32px"
|
||
|
||
- token: --tk-font-h2
|
||
value: "22px"
|
||
note: 副标题、用户名 serif bold
|
||
elder: "25px"
|
||
|
||
- token: --tk-font-body-lg
|
||
value: "18px"
|
||
note: 按钮文字、section 标题 fontWeight:600
|
||
elder: "22px"
|
||
|
||
- token: --tk-font-body
|
||
value: "16px"
|
||
note: 正文、输入框、icon 文字（最常用 UI 字号）
|
||
elder: "22px"
|
||
|
||
- token: --tk-font-body-sm
|
||
value: "14px"
|
||
note: 副文本、描述
|
||
elder: "19px"
|
||
|
||
- token: --tk-font-num
|
||
value: "30px"
|
||
note: 数值 serif bold
|
||
elder: "34px"
|
||
|
||
- token: --tk-font-num-lg
|
||
value: "34px"
|
||
note: 大数值
|
||
elder: "40px"
|
||
|
||
- token: --tk-font-cap
|
||
value: "13px"
|
||
note: 说明文字（第一高频字号）
|
||
elder: "18px"
|
||
|
||
- token: --tk-font-nav
|
||
value: "18px"
|
||
note: 导航栏标题 serif bold
|
||
elder: "22px"
|
||
|
||
- token: --tk-font-micro
|
||
value: "11px"
|
||
note: 角标、tag
|
||
elder: "17px"
|
||
|
||
structure:
|
||
- token: --tk-line-height
|
||
value: "1.5"
|
||
elder: "1.7"
|
||
|
||
spacing:
|
||
- token: --tk-gap-2xs
|
||
value: "4px"
|
||
scss_var: "$sp-2xs"
|
||
elder: "6px"
|
||
|
||
- token: --tk-gap-xs
|
||
value: "8px"
|
||
scss_var: "$sp-xs"
|
||
elder: "12px"
|
||
|
||
- token: --tk-gap-sm
|
||
value: "12px"
|
||
scss_var: "$sp-sm"
|
||
elder: "16px"
|
||
|
||
- token: --tk-gap-md
|
||
value: "16px"
|
||
scss_var: "$sp-md"
|
||
elder: "20px"
|
||
|
||
- token: --tk-section-gap
|
||
value: "20px"
|
||
scss_var: "$sp-section"
|
||
elder: "28px"
|
||
|
||
- token: --tk-gap-lg
|
||
value: "24px"
|
||
scss_var: "$sp-lg"
|
||
elder: "32px"
|
||
|
||
- token: --tk-gap-xl
|
||
value: "32px"
|
||
scss_var: "$sp-xl"
|
||
elder: "40px"
|
||
|
||
- token: --tk-gap-2xl
|
||
value: "48px"
|
||
scss_var: "$sp-2xl"
|
||
elder: "56px"
|
||
|
||
- token: --tk-page-padding
|
||
value: "20px"
|
||
elder: "28px"
|
||
|
||
- token: --tk-card-padding
|
||
value: "20px"
|
||
elder: "28px"
|
||
|
||
- token: --tk-card-padding-sm
|
||
value: "16px"
|
||
elder: "20px"
|
||
|
||
- token: --tk-card-padding-lg
|
||
value: "28px"
|
||
elder: "36px"
|
||
|
||
radius:
|
||
- token: --tk-card-radius
|
||
value: "16px"
|
||
scss_var: "$r"
|
||
elder: "20px"
|
||
|
||
radius_unmapped:
|
||
- scss_var: "$r-sm"
|
||
value: "12px"
|
||
note: "原型 T.rSm 映射目标"
|
||
- scss_var: "$r-xs"
|
||
value: "8px"
|
||
note: "原型 T.rXs 映射目标"
|
||
- scss_var: "$r-lg"
|
||
value: "20px"
|
||
- scss_var: "$r-pill"
|
||
value: "999px"
|
||
|
||
sizing:
|
||
- token: --tk-touch-min
|
||
value: "48px"
|
||
role: 最小触控区
|
||
elder: "56px"
|
||
|
||
- token: --tk-btn-primary-h
|
||
value: "52px"
|
||
role: 主按钮高度
|
||
elder: "60px"
|
||
|
||
- token: --tk-input-height
|
||
value: "56px"
|
||
role: 输入框高度
|
||
elder: "64px"
|
||
|
||
- token: --tk-tabbar-space
|
||
value: "100px"
|
||
role: TabBar 底部安全区
|
||
elder: "120px"
|
||
|
||
feedback:
|
||
- token: --tk-touch-feedback-opacity
|
||
value: "0.85"
|
||
role: 触控反馈透明度
|
||
elder: "0.8"
|
||
|
||
tag:
|
||
- token: --tk-tag-font-size
|
||
value: "11px"
|
||
elder: "13px"
|
||
|
||
- token: --tk-tag-padding-v
|
||
value: "3px"
|
||
elder: "5px"
|
||
|
||
- token: --tk-tag-padding-h
|
||
value: "8px"
|
||
elder: "12px"
|
||
|
||
shadow_unmapped:
|
||
# tokens.scss 中的 --tk-shadow-btn/tab 是复合值（含偏移+模糊+颜色）
|
||
# 以下为 variables.scss 中的其他阴影，未声明为 CSS Token
|
||
- scss_var: "$shadow-sm"
|
||
value: "0 1px 4px rgba(45, 42, 38, 0.06)"
|
||
role: 小阴影
|
||
|
||
- scss_var: "$shadow-md"
|
||
value: "0 2px 12px rgba(45, 42, 38, 0.10)"
|
||
role: 中阴影
|
||
|
||
- scss_var: "$shadow-lg"
|
||
value: "0 8px 32px rgba(45, 42, 38, 0.15)"
|
||
role: 大阴影
|
||
|
||
# ============================================================================
|
||
# 原型 Key → Token 映射（aliases）
|
||
# 用于设计移交时自动匹配原型属性到实际 Token
|
||
# ============================================================================
|
||
aliases:
|
||
prototype_keys:
|
||
T.pri:
|
||
- value: "#C4623A"
|
||
token: --tk-pri
|
||
status: exact_match
|
||
variant: patient
|
||
- value: "#3A6B8C"
|
||
token: --tk-pri.doctor
|
||
status: exact_match
|
||
variant: doctor
|
||
|
||
T.priL:
|
||
- value: "#F0DDD4"
|
||
token: --tk-pri-l
|
||
status: exact_match
|
||
variant: patient
|
||
- value: "#D4E5F0"
|
||
token: --tk-pri-l.doctor
|
||
status: exact_match
|
||
variant: doctor
|
||
|
||
T.priD:
|
||
- value: "#8B3E1F"
|
||
token: --tk-pri-d
|
||
status: exact_match
|
||
variant: patient
|
||
- value: "#2A4F6A"
|
||
token: --tk-pri-d.doctor
|
||
status: exact_match
|
||
variant: doctor
|
||
|
||
T.bg:
|
||
token: null
|
||
nearest: --tk-card-bg
|
||
scss_var: "$bg"
|
||
value: "#F5F0EB"
|
||
status: unmatched
|
||
note: "原型页面背景色，tokens.scss 未声明为 CSS 变量，直接用 $bg SCSS 变量"
|
||
|
||
T.card:
|
||
token: --tk-card-bg
|
||
status: exact_match
|
||
|
||
T.surface:
|
||
token: --tk-card-bg
|
||
status: approximate
|
||
note: "原型中 surface ≈ 卡片白底"
|
||
|
||
T.tx:
|
||
token: null
|
||
nearest: --tk-text-secondary
|
||
scss_var: "$tx"
|
||
value: "#2D2A26"
|
||
status: unmatched
|
||
note: "主文字色，tokens.scss 未声明为 CSS 变量，直接用 $tx SCSS 变量"
|
||
|
||
T.tx2:
|
||
token: null
|
||
nearest: --tk-text-secondary
|
||
scss_var: "$tx2"
|
||
value: "#5A554F"
|
||
status: unmatched
|
||
note: "次文字色，tokens.scss 未声明，elder-mode 下 --tk-text-secondary 覆盖为此值"
|
||
|
||
T.tx3:
|
||
token: --tk-text-secondary
|
||
scss_var: "$tx3"
|
||
value: "#78716C"
|
||
status: exact_match
|
||
|
||
T.bd:
|
||
token: null
|
||
scss_var: "$bd"
|
||
value: "#E8E2DC"
|
||
status: unmatched
|
||
note: "边框色（不是圆角），tokens.scss 未声明为 CSS 变量"
|
||
|
||
T.r:
|
||
token: --tk-card-radius
|
||
scss_var: "$r"
|
||
value: "16px"
|
||
status: exact_match
|
||
|
||
T.rSm:
|
||
token: null
|
||
scss_var: "$r-sm"
|
||
value: "12px"
|
||
status: unmatched
|
||
note: "tokens.scss 未声明，需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量"
|
||
|
||
T.rXs:
|
||
token: null
|
||
scss_var: "$r-xs"
|
||
value: "8px"
|
||
status: unmatched
|
||
note: "tokens.scss 未声明，需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量"
|