in src/button/styled-components.ts [443:693]
function getColorStyles({
// @ts-ignore
$theme,
// @ts-ignore
$colors,
// @ts-ignore
$isLoading,
// @ts-ignore
$isSelected,
// @ts-ignore
$kind,
// @ts-ignore
$disabled,
// @ts-ignore
$backgroundSafe,
}): ColorStyles {
if ($disabled) {
return Object.freeze({});
}
const backgroundSafeBoxShadow = $backgroundSafe ? `, ${$theme.lighting.shallowBelow}` : '';
if ($colors) {
return {
color: $colors.color,
backgroundColor: $colors.backgroundColor,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px rgba(0, 0, 0, 0.04) ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px rgba(0, 0, 0, 0.08) ${backgroundSafeBoxShadow}`,
},
};
}
switch ($kind) {
case KIND.primary:
if ($isSelected) {
return {
color: $theme.colors.buttonPrimarySelectedText || $theme.colors.buttonPrimaryText, // provide fallback values in case some projects customized the theme but do not provide the tokens.
backgroundColor:
$theme.colors.buttonPrimarySelectedFill || $theme.colors.buttonPrimaryFill,
};
}
if ($isLoading) {
return {
backgroundColor:
$theme.colors.buttonPrimaryLoadingFill || $theme.colors.buttonPrimaryFill,
};
}
return {
color: $theme.colors.buttonPrimaryText,
backgroundColor: $theme.colors.buttonPrimaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonPrimaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonPrimaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
case KIND.secondary:
if ($isSelected) {
return {
color: $theme.colors.buttonPrimaryText,
backgroundColor: $theme.colors.buttonPrimaryFill,
};
}
if ($isLoading) {
return {
backgroundColor:
$theme.colors.buttonSecondaryLoadingFill || $theme.colors.buttonSecondaryFill,
};
}
return {
color: $theme.colors.buttonSecondaryText,
backgroundColor: $theme.colors.buttonSecondaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonSecondaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonSecondaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
case KIND.tertiary:
if ($isSelected) {
return {
color: $theme.colors.buttonTertiarySelectedText || $theme.colors.buttonTertiaryText,
backgroundColor:
$theme.colors.buttonTertiarySelectedFill || $theme.colors.buttonTertiaryFill,
};
}
if ($isLoading) {
return {
backgroundColor:
$theme.colors.buttonTertiaryLoadingFill || $theme.colors.buttonTertiaryFill,
};
}
return {
color: $theme.colors.buttonTertiaryText,
backgroundColor: $theme.colors.buttonTertiaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonTertiaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonTertiaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
// Below are the danger button styles.(newly added, other customized themes system should provide the tokens)
case KIND.dangerPrimary: {
if ($isSelected) {
return {
color: $theme.colors.buttonDangerPrimarySelectedText,
backgroundColor: $theme.colors.buttonDangerPrimarySelectedFill,
};
}
if ($isLoading) {
return {
backgroundColor: $theme.colors.buttonDangerPrimaryLoadingFill,
};
}
return {
color: $theme.colors.buttonDangerPrimaryText,
backgroundColor: $theme.colors.buttonDangerPrimaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerPrimaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerPrimaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
}
case KIND.dangerSecondary: {
if ($isSelected) {
return {
color: $theme.colors.buttonDangerSecondarySelectedText,
backgroundColor: $theme.colors.buttonDangerSecondarySelectedFill,
};
}
if ($isLoading) {
return {
backgroundColor: $theme.colors.buttonDangerSecondaryLoadingFill,
};
}
return {
color: $theme.colors.buttonDangerSecondaryText,
backgroundColor: $theme.colors.buttonDangerSecondaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerSecondaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerSecondaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
}
case KIND.dangerTertiary: {
if ($isSelected) {
return {
color: $theme.colors.buttonDangerTertiarySelectedText,
backgroundColor: $theme.colors.buttonDangerTertiarySelectedFill,
};
}
if ($isLoading) {
return {
backgroundColor: $theme.colors.buttonDangerTertiaryLoadingFill,
};
}
return {
color: $theme.colors.buttonDangerTertiaryText,
backgroundColor: $theme.colors.buttonDangerTertiaryFill,
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerTertiaryHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active': {
boxShadow: `inset 999px 999px 0px ${$theme.colors.buttonDangerTertiaryActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
}
case BUTTON_GROUP_EXCLUSIVE_KINDS.outline: {
if ($isSelected) {
return {
color: $theme.colors.buttonOutlineSelectedText,
backgroundColor: $theme.colors.buttonOutlineSelectedFill,
};
}
if ($isLoading) {
return {
backgroundColor: $theme.colors.buttonOutlineLoadingFill,
};
}
return {
color: $theme.colors.buttonOutlineText,
backgroundColor: $theme.colors.buttonOutlineFill,
// adding overlay for hovered and pressed state (we previously used inset box shadow to simulate this, but cannot extend to border)
// This is ideally moved to root level, but putting here is less risky since it's probably ::after element is used or overridden somewhere.
position: 'relative' as const,
'::after': {
content: '""',
position: 'absolute' as const,
top: 0,
right: 0,
bottom: 0,
left: 0,
borderTopLeftRadius: 'inherit',
borderTopRightRadius: 'inherit',
borderBottomRightRadius: 'inherit',
borderBottomLeftRadius: 'inherit',
backgroundColor: 'transparent',
boxShadow: `0 0 0 ${$theme.sizing.scale0} transparent`,
pointerEvents: 'none',
},
// end of overlay
// Applies only on devices that support hovering, like desktop computers.
'@media (hover: hover)': {
':hover::after': {
backgroundColor: $theme.colors.buttonOutlineHoverOverlay,
// this box shadow is used to extend the overlay to the border
boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOutlineHoverOverlay} ${backgroundSafeBoxShadow}`,
},
},
':active::after': {
backgroundColor: $theme.colors.buttonOutlineActiveOverlay,
// this box shadow is used to extend the overlay to the border
boxShadow: `0 0 0 ${$theme.sizing.scale0} ${$theme.colors.buttonOutlineActiveOverlay} ${backgroundSafeBoxShadow}`,
},
};
}
default:
return Object.freeze({});
}
}