@framingui/styled
Token-enforced styled-components wrapper with runtime validation

Installation
npm install @framingui/styled styled-components
Usage
import { styled, tokens } from '@framingui/styled';
const Card = styled.div`
background: ${tokens.bg.surface.elevated};
padding: ${tokens.spacing[6]};
border-radius: ${tokens.radius.lg};
box-shadow: ${tokens.shadow.md};
`;
const Bad = styled.div`
background: #ffffff; // Error: Hardcoded value detected
padding: 16px; // Error: Hardcoded value detected
`;
Features
- Compile-time Type Safety: TypeScript enforces token types
- Runtime Validation: Detects hardcoded colors and spacing values
- IDE Autocomplete: Full IntelliSense support
- styled-components Compatible: Works with all styled-components features
License
MIT