@unicity/design-system/dist/components/Chip/Chip.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 { Chip } from '@mui/material';
export const StyledChip = styled(Chip)(({ theme }) => ({
    borderRadius: `calc(${theme.shape.borderRadius}px * 3)`,
    fontWeight: theme.typography.fontWeightMedium,
    transition: theme.transitions.create([
        'background-color',
        'box-shadow',
        'transform',
    ], {
        duration: theme.transitions.duration.short,
    }),
    '&.MuiChip-clickable': {
        '&:hover': {
            transform: 'translateY(-1px)',
            boxShadow: theme.shadows[2],
        },
        '&:active': {
            transform: 'translateY(0)',
            boxShadow: theme.shadows[1],
        },
    },
    '&.MuiChip-sizeSmall': {
        fontSize: '9px',
        height: '16px',
        '& .MuiChip-label': {
            paddingLeft: theme.spacing(0.5),
            paddingRight: theme.spacing(0.5),
        },
    },
    '&.MuiChip-sizeMedium': {
        height: 32,
        fontSize: theme.typography.body2.fontSize,
        '& .MuiChip-label': {
            paddingLeft: theme.spacing(1.5),
            paddingRight: theme.spacing(1.5),
        },
    },
    '&.MuiChip-colorSuccess': {
        backgroundColor: theme.palette.success.main,
        color: theme.palette.success.contrastText,
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.success.main,
            borderColor: theme.palette.success.main,
        },
    },
    '&.MuiChip-colorError': {
        backgroundColor: theme.palette.error.main,
        color: theme.palette.error.contrastText,
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.error.main,
            borderColor: theme.palette.error.main,
        },
    },
    '&.MuiChip-colorWarning': {
        backgroundColor: theme.palette.warning.main,
        color: theme.palette.warning.contrastText,
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.warning.main,
            borderColor: theme.palette.warning.main,
        },
    },
    '&.MuiChip-colorInfo': {
        backgroundColor: theme.palette.info.main,
        color: theme.palette.info.contrastText,
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.info.main,
            borderColor: theme.palette.info.main,
        },
    },
    // Unicity color variants
    '&.MuiChip-colorUnicityGreen': {
        backgroundColor: theme.palette.mode === 'dark'
            ? theme.palette.unicityGreen?.main || '#43C06F'
            : theme.palette.unicityGreen?.light || '#D6F5E3',
        color: theme.palette.mode === 'dark'
            ? theme.palette.unicityGreen?.light || '#D6F5E3'
            : theme.palette.unicityGreen?.main || '#43C06F',
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.unicityGreen?.main || '#43C06F',
            borderColor: theme.palette.unicityGreen?.main || '#43C06F',
        },
    },
    '&.MuiChip-colorUnicityBlue': {
        backgroundColor: theme.palette.mode === 'dark'
            ? theme.palette.unicityBlue?.main || '#009ECF'
            : theme.palette.unicityBlue?.light || '#D6F5FF',
        color: theme.palette.mode === 'dark'
            ? theme.palette.unicityBlue?.light || '#D6F5FF'
            : theme.palette.unicityBlue?.main || '#009ECF',
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.unicityBlue?.main || '#009ECF',
            borderColor: theme.palette.unicityBlue?.main || '#009ECF',
        },
    },
    '&.MuiChip-colorUnicityPurple': {
        backgroundColor: theme.palette.mode === 'dark'
            ? theme.palette.unicityPurple?.main || '#BA71AA'
            : theme.palette.unicityPurple?.light || '#F8E3F3',
        color: theme.palette.mode === 'dark'
            ? theme.palette.unicityPurple?.light || '#F8E3F3'
            : theme.palette.unicityPurple?.main || '#BA71AA',
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.unicityPurple?.main || '#BA71AA',
            borderColor: theme.palette.unicityPurple?.main || '#BA71AA',
        },
    },
    '&.MuiChip-colorUnicityOrange': {
        backgroundColor: theme.palette.mode === 'dark'
            ? theme.palette.unicityOrange?.main || '#FFA77B'
            : theme.palette.unicityOrange?.light || '#FFE6DB',
        color: theme.palette.mode === 'dark'
            ? theme.palette.unicityOrange?.light || '#FFE6DB'
            : theme.palette.unicityOrange?.main || '#FFA77B',
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.unicityOrange?.main || '#FFA77B',
            borderColor: theme.palette.unicityOrange?.main || '#FFA77B',
        },
    },
    '&.MuiChip-colorUnicityNavy': {
        backgroundColor: theme.palette.mode === 'dark'
            ? theme.palette.unicityNavy?.main || '#183A5A'
            : theme.palette.unicityNavy?.light || '#E9EEF3',
        color: theme.palette.mode === 'dark'
            ? theme.palette.unicityNavy?.light || '#E9EEF3'
            : theme.palette.unicityNavy?.main || '#183A5A',
        '&.MuiChip-outlined': {
            backgroundColor: 'transparent',
            color: theme.palette.unicityNavy?.main || '#183A5A',
            borderColor: theme.palette.unicityNavy?.main || '#183A5A',
        },
    },
    '& .MuiChip-deleteIcon': {
        color: 'inherit',
        fontSize: '1.2em',
        '&:hover': {
            color: theme.palette.action.active,
        },
    },
}));
//# sourceMappingURL=Chip.style.js.map