@unicity/design-system/dist/components/Typography/Typography.style.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { styled } from '@mui/material/styles';
import { Typography as MuiTypography } from '@mui/material';
export const StyledTypography = styled(MuiTypography, {
    shouldForwardProp: (prop) => !['truncate', 'lines', 'gradient', 'gradientColors', 'textShadow', 'shadowColor'].includes(prop),
})(({ theme, truncate, lines, gradient, gradientColors, textShadow, shadowColor }) => ({
    // Base styles
    lineHeight: 1.5,
    letterSpacing: '0.00938em',
    // Truncation styles
    ...(truncate && {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
    }),
    // Multi-line truncation
    ...(lines && lines > 1 && {
        overflow: 'hidden',
        display: '-webkit-box',
        WebkitLineClamp: lines,
        WebkitBoxOrient: 'vertical',
        textOverflow: 'ellipsis',
        whiteSpace: 'normal',
    }),
    // Gradient text effect
    ...(gradient && {
        background: gradientColors
            ? `linear-gradient(45deg, ${gradientColors[0]}, ${gradientColors[1]})`
            : `linear-gradient(45deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
        backgroundClip: 'text',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundSize: '200% 200%',
        animation: 'gradientShift 3s ease infinite',
    }),
    // Text shadow effect
    ...(textShadow && {
        textShadow: shadowColor
            ? `2px 2px 4px ${shadowColor}`
            : `2px 2px 4px ${theme.palette.text.primary}40`,
    }),
    // Custom display variants
    '&.MuiTypography-display1': {
        fontSize: '3.5rem',
        fontWeight: 300,
        lineHeight: 1.2,
        letterSpacing: '-0.01562em',
    },
    '&.MuiTypography-display2': {
        fontSize: '3rem',
        fontWeight: 300,
        lineHeight: 1.2,
        letterSpacing: '-0.00833em',
    },
    '&.MuiTypography-display3': {
        fontSize: '2.5rem',
        fontWeight: 400,
        lineHeight: 1.2,
        letterSpacing: '0em',
    },
    '&.MuiTypography-display4': {
        fontSize: '2rem',
        fontWeight: 400,
        lineHeight: 1.2,
        letterSpacing: '0.00735em',
    },
    // Responsive adjustments
    [theme.breakpoints.down('md')]: {
        '&.MuiTypography-h1': {
            fontSize: '2.5rem',
        },
        '&.MuiTypography-h2': {
            fontSize: '2rem',
        },
        '&.MuiTypography-h3': {
            fontSize: '1.75rem',
        },
        '&.MuiTypography-display1': {
            fontSize: '2.5rem',
        },
        '&.MuiTypography-display2': {
            fontSize: '2rem',
        },
    },
    [theme.breakpoints.down('sm')]: {
        '&.MuiTypography-h1': {
            fontSize: '2rem',
        },
        '&.MuiTypography-h2': {
            fontSize: '1.75rem',
        },
        '&.MuiTypography-h3': {
            fontSize: '1.5rem',
        },
        '&.MuiTypography-display1': {
            fontSize: '2rem',
        },
        '&.MuiTypography-display2': {
            fontSize: '1.75rem',
        },
    },
    // Gradient animation
    '@keyframes gradientShift': {
        '0%': {
            backgroundPosition: '0% 50%',
        },
        '50%': {
            backgroundPosition: '100% 50%',
        },
        '100%': {
            backgroundPosition: '0% 50%',
        },
    },
}));
//# sourceMappingURL=Typography.style.js.map