[Audit 012] Material Design 3

Design Tokens · Dynamic Color

M3 革命性特性：从单一种子颜色动态生成完整调色板。这是色彩系统的范式转变。

10%

20%

30%

40%

50%

60%

70%

80%

90%

95%

98%

99%

Token	Value	Role
--md3-primary	#6750A4	Main brand color
--md3-on-primary	#FFFFFF	Text on primary
--md3-primary-container	#EADDFF	Primary surfaces
--md3-secondary	#625B71	Secondary actions
--md3-tertiary	#7D5260	Accent color
--md3-error	#B3261E	Error states

Design Tokens · Elevation

M3 新的 0-5 级 Elevation 系统，不再依赖阴影，而是使用色调和阴影组合。

Level 1
Cards, FAB resting

Level 2
Menus, Cards hover

Level 3
Submenus, Modal

/* M3 Elevation Tokens */
:root {
    --md3-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --md3-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
    --md3-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
    --md3-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
    --md3-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3);
}
                

Design Tokens · Typography

M3 使用 5 种文本风格：Display / Headline / Title / Body / Label，每种有 large/medium/small。

Style	Size	Weight
Display	57/45/36px	400
Headline	32/28/24px	400
Title	22/16/14px	400/500
Body	16/14/12px	400
Label	14/12/11px	500

/* Typography Token Examples */
:root {
    --md3-display-large: 57px;
    --md3-headline-medium: 28px;
    --md3-title-large: 22px;
    --md3-body-large: 16px;
    --md3-label-medium: 12px;
}
                

Design Tokens · Motion

M3 定义了详细的时间曲线，从 50ms 到 1000ms，配合 easing 函数。

/* M3 Motion Tokens */
:root {
    /* Duration - 从极快到极慢 */
    --md3-motion-duration-short-1: 50ms;
    --md3-motion-duration-short-4: 200ms;
    --md3-motion-duration-medium-2: 300ms;
    --md3-motion-duration-long-4: 800ms;
    
    /* Easing Curves */
    --md3-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md3-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md3-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* Usage */
.md3-component {
    transition: all 200ms var(--md3-motion-easing-standard);
}
                

Design Tokens · Border Radius

M3 新圆角系统：extra-small(4px) → extra-large(28px)，支持 full(9999px) 药丸形状。

4px
extra-small

8px
small

12px
medium

16px
large

/* M3 Border Radius */
:root {
    --md3-radius-extra-small: 4px;
    --md3-radius-small: 8px;
    --md3-radius-medium: 12px;
    --md3-radius-large: 16px;
    --md3-radius-extra-large: 28px;
    --md3-radius-full: 9999px;
}
                

Component Preview

M3 组件风格：圆角、层次感、动态配色、涟漪效果。

Filter chip

/* M3 Button Styles */
.m3-btn-filled {
    background: var(--md3-primary);
    color: var(--md3-on-primary);
    border-radius: 20px; /* Full rounded */
    padding: 10px 24px;
    transition: box-shadow 200ms var(--md3-motion-easing-emphasized);
}

.m3-btn-filled:hover {
    box-shadow: var(--md3-elevation-2);
}

.m3-btn-tonal {
    background: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
}

.m3-chip {
    background: var(--md3-surface-variant);
    border-radius: var(--md3-radius-small);
}
                

Design Philosophy

动态配色 (Dynamic Color)： M3 最大的创新。用户可以从壁纸中提取颜色，系统自动生成协调的调色板。这是"个性化"与"一致性"的新平衡。
表达性 (Expressive)： M3 鼓励个性化，从严格的 Material 规范转向"Material You"。圆角可大可小，颜色可以定制，但保持底层一致性。
统一性 (Unified)： 从手机到手表到 TV，同一套设计语言。Responsive layout 组件自动适应不同屏幕尺寸。
无障碍 (Accessible)： 颜色对比度自动检查，确保 WCAG 合规。M3 的色彩系统内置了对比度保证。

The Formula

Material You = Personal × Adaptive − Rigid

材质我的 = 个性化 × 适应 - 僵硬

从 Material Design (2014) 到 Material You (2021)，Google 完成了一次自我革命。不是更"Material"，而是更"你"。