Enhance component API with responsive props, color propagation, and typography utilities

首先阅读现有的 layout、visual component、Text、Headline 和 Button API，以识别当前的 prop 和颜色模式。盘点受影响的组件，并根据所请求的响应式 props、间距简写、颜色传递、对比度行为、排版工具以及 Section 尺寸变体定义完成标准；该 issue 未指定具体文件或测试。

Summary

Enhance Apsara's component-level APIs to improve developer experience, reduce boilerplate, and provide consistent patterns across the library.

1. Responsive Props on Layout Components

Add responsive object syntax to all layout prop values (gap, direction, padding, etc.):

<Flex gap={{ initial: "3", md: "5" }} direction={{ initial: "column", sm: "row" }}>

Support breakpoints: initial, sm, md, lg, xl.

2. Inline Spacing Props

Add shorthand padding/margin props (p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml) to layout components that map to the space scale:

<Box p="4" mx="auto" mt="6">

3. Systematic color Prop

Extend the color prop to all visual components (Badge, Callout, Text, Avatar, Chip, etc.), not just Button. Color should propagate to children through nesting, automatically adjusting internal tokens.

4. highContrast Prop

Add a highContrast boolean to all components that accept a color prop. This shifts colors to steps 9–12 of the scale for better contrast against the page background.

5. Typography Utility Props

Add the following props to Text and Headline:

• trim — remove leading/trailing whitespace for precise vertical alignment
• truncate — single-line ellipsis truncation
• wrap — control text wrapping (wrap, nowrap, balance, pretty)
• align — text alignment (left, center, right)
• Expand font weight options to 4 levels: light (300), regular (400), medium (500), bold (700)

6. Section Layout Component

Add a Section component for consistent vertical spacing between major page sections, with predefined size variants (small, medium, large).