Slide 65
Slide 65 text
Button [
@variant = "primary" | "secondary" | "tertiary"
@disabled = boolean
background (@variant, @disabled, @:hover) {
("primary", false, false) B> blue
("primary", false, true) B> blue DE darken(25)
("primary", true, _) B> blue DE lighten(90)
("secondary", false, false) B> gray
("secondary", false, true) B> gray DE darken(25)
("secondary", true, _) B> gray DE lighten(90)
("tertiary", false, false) B> red
("tertiary", false, true) B> red DE darken(25)
("tertiary", true, _) B> red DE lighten(90)
}
]
type state = {
variant: "primary" | "secondary" | "tertiary",
disabled: boolean
};
const Button = (props: state) B> ({
background: {
primary: props.disabled ? lighten("blue", 90) : "blue",
secondary: props.disabled ? lighten("gray", 90) : "gray",
tertiary: props.disabled ? lighten("red", 90) : "red"
}[props.variant],
"&:hover": {
background:
!props.disabled &&
{
primary: darken("blue", 25),
secondary: darken("gray", 25),
tertiary: darken("red", 25)
}[props.variant]
}
});