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

[ravisuhag]

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).