@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
67 lines • 2.56 kB
JavaScript
import { Box, Typography, getContrastRatio, lighten, styled, } from '@mui/material';
import { blend } from '../../utils/colors.js';
export const CardLabel = styled(Box, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
padding: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: 24,
minWidth: 24,
userSelect: 'none',
fontSize: '1rem',
backgroundColor: blend(theme.palette.background.paper, theme.palette.common.white, 0.16),
color: theme.palette.text.primary,
...theme.applyStyles('light', {
backgroundColor: blend(theme.palette.background.paper, theme.palette.common.black, 0.12),
}),
variants: [
{
props: { variant: 'secondary' },
style: {
backgroundColor: blend(theme.palette.background.paper, theme.palette.secondary.main, 0.8),
color: getContrastRatio(theme.palette.common.white, blend(theme.palette.background.paper, theme.palette.secondary.main, 0.8)) >= 3
? theme.palette.common.white
: theme.palette.common.black,
...theme.applyStyles('light', {
backgroundColor: theme.palette.secondary.main,
color: getContrastRatio(theme.palette.common.white, theme.palette.secondary.main) >= 3
? theme.palette.common.white
: theme.palette.common.black,
}),
},
},
{
props: { variant: 'success' },
style: {
backgroundColor: blend(theme.palette.background.paper, theme.palette.success.main, 0.24),
color: lighten(theme.palette.success.main, 0.24),
...theme.applyStyles('light', {
backgroundColor: blend(theme.palette.background.paper, theme.palette.success.main, 0.16),
color: lighten(theme.palette.success.main, 0),
}),
},
},
],
}));
export const CardLabelTypography = styled(Typography, {
shouldForwardProp: (prop) => prop !== 'type',
})(({ theme }) => ({
padding: theme.spacing(0.75, 1.5),
fontSize: 12,
lineHeight: 1,
fontWeight: '600',
variants: [
{
props: {
type: 'icon',
},
style: {
padding: theme.spacing(0.75, 0, 0.75, 0.75),
},
},
],
}));
//# sourceMappingURL=CardLabel.js.map