[Grid] Add CSS Module, inline prop, and reduce inline styles #618
Description
Summary
Grid is a custom layout primitive using Radix Slot for asChild support. Uses all inline styles with no CSS Module.
Improvements
1. Add CSS Module
Grid has no CSS Module — all styles are inline. Add a CSS Module for consistency with other components and to enable design token usage.
2. Use CSS custom properties for dynamic values
Instead of inline styles, use CSS custom properties set via style prop and referenced in the CSS Module. This allows easier theming and override.
4. Add inline prop for inline-grid
No way to use display: inline-grid.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Add displayName (Add displayName to components and sub-components #676)
Files
packages/raystack/raystack/components/grid/