in src/button/styled-components.ts [353:444]
function getColorStyles({
// @ts-ignore
$theme,
// @ts-ignore
$colors,
// @ts-ignore
$isLoading,
// @ts-ignore
$isSelected,
// @ts-ignore
$kind,
// @ts-ignore
$disabled,
}): ColorStyles {
if ($colors) {
return {
color: $colors.color,
backgroundColor: $colors.backgroundColor,
':hover': {
boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)',
},
':active': {
boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)',
},
};
}
if ($disabled) {
return Object.freeze({});
}
switch ($kind) {
case KIND.primary:
if ($isSelected) {
return {
color: $theme.colors.buttonPrimarySelectedText,
backgroundColor: $theme.colors.buttonPrimarySelectedFill,
};
}
return {
color: $theme.colors.buttonPrimaryText,
backgroundColor: $theme.colors.buttonPrimaryFill,
':hover': {
backgroundColor: $isLoading
? $theme.colors.buttonPrimaryActive
: $theme.colors.buttonPrimaryHover,
},
':active': {
backgroundColor: $theme.colors.buttonPrimaryActive,
},
};
case KIND.secondary:
if ($isSelected) {
return {
color: $theme.colors.buttonPrimaryText,
backgroundColor: $theme.colors.buttonPrimaryFill,
};
}
return {
color: $theme.colors.buttonSecondaryText,
backgroundColor: $theme.colors.buttonSecondaryFill,
':hover': {
backgroundColor: $isLoading
? $theme.colors.buttonSecondaryActive
: $theme.colors.buttonSecondaryHover,
},
':active': {
backgroundColor: $theme.colors.buttonSecondaryActive,
},
};
case KIND.tertiary:
if ($isSelected) {
return {
color: $theme.colors.buttonTertiarySelectedText,
backgroundColor: $theme.colors.buttonTertiarySelectedFill,
};
}
return {
color: $theme.colors.buttonTertiaryText,
backgroundColor: $theme.colors.buttonTertiaryFill,
':hover': {
backgroundColor: $isLoading
? $theme.colors.buttonTertiaryActive
: $theme.colors.buttonTertiaryHover,
},
':active': {
backgroundColor: $theme.colors.buttonTertiaryActive,
},
};
default:
return Object.freeze({});
}
}