@patreon/studio
Version:
Patreon Studio Design System
110 lines • 3.6 kB
JavaScript
export const getSpinnerColor = ({ variant, unfilled, }) => {
if (unfilled) {
return 'default';
}
switch (variant) {
case 'insetBlack':
case 'critical':
return 'light';
case 'insetWhite':
return 'dark';
case 'primary':
return 'inverted';
default:
return 'default';
}
};
// TODO: this is used by Pill + SegementedControl and should be shared somewhere else
export const getDimensions = ({ size, isMobile }) => {
if (isMobile) {
switch (size) {
case 'xs':
return '32px';
case 'sm':
return '36px';
case 'lg':
return '64px';
case 'md':
default:
return '44px';
}
}
switch (size) {
case 'xs':
return '28px';
case 'sm':
return '32px';
case 'lg':
return '52px';
case 'md':
default:
return '40px';
}
};
// Button padding changes depending the presence of icon, disclosure, and label
const paddingMap = {
labelOnly: {
mobile: { xs: '0 8px', sm: '0 18px', md: '0 20px', lg: '0 34px' },
desktop: { xs: '0 8px', sm: '0 16px', md: '0 20px', lg: '0 24px' },
},
labelAndIcon: {
mobile: { xs: '0 8px', sm: '0 18px 0 14px', md: '0 20px 0 18px', lg: '0 34px 0 30px' },
desktop: { xs: '0 8px', sm: '0 16px 0 12px', md: '0 20px 0 16px', lg: '0 24px 0 20px' },
},
disclosureAndLabel: {
mobile: { xs: '0 8px', sm: '0 14px 0 18px', md: '0 18px 0 20px', lg: '0 30px 0 34px' },
desktop: { xs: '0 8px', sm: '0 12px 0 16px', md: '0 16px 0 20px', lg: '0 20px 0 24px' },
},
iconAndDisclosureOnly: {
mobile: { xs: '0 8px', sm: '0 8px', md: '0 10px', lg: '0 20px' },
desktop: { xs: '0 8px', sm: '0 8px', md: '0 10px', lg: '0 14px' },
},
iconLabelAndDisclosure: {
mobile: { xs: '0 8px', sm: '0 14px', md: '0 18px', lg: '0 30px' },
desktop: { xs: '0 8px', sm: '0 12px', md: '0 16px', lg: '0 20px' },
},
};
export const getPadding = ({ size = 'md', isMobile, hasLabel, icon, disclosureIcon }) => {
const iconOnly = !!icon && !hasLabel && !disclosureIcon;
const labelAndIcon = !disclosureIcon && hasLabel && !!icon;
const disclosureAndLabel = !icon && !!disclosureIcon && hasLabel;
const iconAndDisclosureOnly = !!icon && !!disclosureIcon && !hasLabel;
const iconLabelAndDisclosure = !!icon && !!disclosureIcon && hasLabel;
// If it is an icon only button we set a fixed height and width
if (iconOnly) {
return '0';
}
const platform = isMobile ? 'mobile' : 'desktop';
if (labelAndIcon) {
return paddingMap.labelAndIcon[platform][size];
}
if (disclosureAndLabel) {
return paddingMap.disclosureAndLabel[platform][size];
}
if (iconAndDisclosureOnly) {
return paddingMap.iconAndDisclosureOnly[platform][size];
}
if (iconLabelAndDisclosure) {
return paddingMap.iconLabelAndDisclosure[platform][size];
}
return paddingMap.labelOnly[platform][size];
};
export const getIconSize = (size) => {
switch (size) {
case 'xs':
case 'sm':
return {
xs: '20px',
sm: '16px',
};
case 'lg':
return '24px';
case 'md':
default:
return {
xs: '24px',
sm: '20px',
};
}
};
//# sourceMappingURL=theme.js.map