Design Tokens
Peblla Device 设计系统的基础变量定义。所有值来源于 data/tokens.json，通过 ds-tokens.css 注入。
背景 Background
--ds-bg
页面底色 · #F5F5FA
--ds-surface
主内容面（卡片/面板） · #FFFFFF
--ds-surface-alt
替代面（输入框底/表格底） · #F0F0F5
--ds-surface-raised
浮起面（popover/toast） · #EAEAF0
--ds-surface-zebra
斑马纹行底色 · #FAFAFD
--ds-card-bg
卡片背景 · #FFFFFF
--ds-input-bg
输入框背景 · #F0F0F5
--ds-table-bg
表格背景 · #F0F0F5
文字 Text
--ds-text
标题/重要文字 · #1C1C1E
--ds-text-secondary
正文 · #636366
--ds-text-muted
辅助/次要 · #8E8E93
--ds-text-dim
最弱层级（placeholder/禁用） · #AEAEB2
边框 Border
--ds-border
默认边框 · #E5E5EA
--ds-border-strong
强调边框 · #D1D1D6
--ds-border-subtle
微妙分隔 · #E8E8ED
--ds-table-border
表格边框 · #C7C7CC
强调 Accent
--ds-accent
主品牌色（深蓝） · #2D47A0
--ds-accent-50
极浅品牌背景 · #f0f2f8
--ds-accent-100
浅品牌背景 · #e2e5f3
--ds-accent-200
品牌色浅中间调 · #c3cce8
--ds-accent-300
品牌色中间调 · #96a5d8
--ds-accent-400
品牌色深中间调 · #6278c5
--ds-accent-500
品牌色 hover · #3f57ab
--ds-accent-700
品牌色 pressed · #2b3a6d
--ds-accent-green
成功/确认 · #34A853
--ds-accent-mint
次要辅助 · #3AA88E
状态 Status
--ds-status-neutral
中性/待处理 · #8E8E93
--ds-status-success
成功/已完成 · #34A853
--ds-status-info
信息/进行中 · #1A9088
--ds-status-danger
错误/删除/取消 · #D32F2F
--ds-status-warning
警告/注意 · #E5930E
功能 Functional
--ds-chip-active-bg
Chip 激活背景 · #1C1C1E
--ds-chip-active-text
Chip 激活文字 · #FFFFFF
--ds-chip-inactive-border
Chip 非激活边框 · #D1D1D6
--ds-white
纯白 · #FFFFFF
--ds-black
纯黑 · #000000
--ds-transparent
透明 · transparent
排版 Typography
Font: Roboto · Letter Spacing: 2xl = -0.01em
间距 Spacing
圆角 Radius
sm
4px
Chip/Badge/小按钮
md
6px
输入框/卡片内子区域
lg
8px
卡片/面板
xl
12px
Modal/大面板
pill
100px
胶囊形
阴影 Shadow
shadow-sm
卡片
☀ 0 1px 2px rgba(165,165,175,0.15)
🌙 0 1px 3px rgba(0,0,0,0.4)
shadow-md
Popover/Dropdown
☀ 0 4px 12px rgba(165,165,175,0.2)
🌙 0 4px 12px rgba(0,0,0,0.5)
shadow-lg
Modal
☀ 0 8px 24px rgba(0,0,0,0.15)
🌙 0 8px 24px rgba(0,0,0,0.6)