react-vite-themes/dist/components/atoms/Typography/Typography.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import React from 'react';
import { cn } from '../../../utils';
import './Typography.scss';
export const Typography = ({ variant = 'p', size = 'md', weight = 'normal', color = 'inherit', align = 'left', className, children, ...props }) => {
    const typographyClasses = cn('typography', `typography--${size}`, `typography--${weight}`, `typography--${color}`, `typography--${align}`, className);
    // Map 'body' variant to 'span' element for no default margins/padding
    const elementType = variant === 'body' ? 'span' : variant;
    return React.createElement(elementType, { className: typographyClasses, ...props }, children);
};