#Shadow Tokens

阴影 Token 系统，定义了不同层级的阴影效果，用于创建界面的深度感和层次感。

#基础用法

#设计规范

#阴影层级

系统提供 4 个阴影层级，从轻微阴影到明显阴影，满足不同场景的使用需求：

#阴影参数说明

阴影值采用 box-shadow 标准格式：

• X 偏移：水平偏移量（当前都为 0）
• Y 偏移：垂直偏移量（当前都为 2px）
• 模糊半径：控制阴影的模糊程度（8px - 16px）
• 扩展半径：控制阴影的扩展范围（当前都为 0）
• 颜色：阴影颜色，使用 rgba 控制透明度

#使用建议

#选择合适的阴影

// 默认卡片 - 使用极轻微阴影
<div className="shadow-xs rounded-lg p-4">
  卡片内容
</div>

// 悬浮按钮 - 使用小阴影
<button className="shadow-sm rounded hover:shadow-md transition-shadow">
  按钮
</button>

// 弹窗 - 使用默认阴影
<div className="shadow rounded-xl p-6">
  弹窗内容
</div>

// 模态框 - 使用大阴影
<div className="shadow-lg rounded-2xl p-8">
  模态框内容
</div>

#阴影与层级关系

阴影大小应该与元素的层级关系成正比：

• 浅层元素（默认状态的卡片、面板）：shadow-xs
• 中层元素（悬浮状态、下拉菜单）：shadow-sm 或 shadow
• 深层元素（弹窗、模态框）：shadow 或 shadow-lg

#动态阴影

// 静态状态使用小阴影，悬浮时使用大阴影
<div className="shadow-xs hover:shadow-lg transition-all duration-300">
  卡片内容
</div>

#注意事项

1. 性能考虑：阴影会影响渲染性能，避免在大量列表中使用
2. 组合使用：阴影可以与其他效果（如圆角、边框）组合使用
3. 深色模式：在深色模式下可能需要调整阴影的透明度
4. 响应式：移动设备上可以适当减小阴影以提升性能