@teamsparta/stack-button
Version:
stack button
83 lines (81 loc) • 1.72 kB
JavaScript
// src/TextButton/TextButton.style.ts
import { css } from "@emotion/react";
import { bodyB, captionSb, subTitle3 } from "@teamsparta/stack-font";
import { vars } from "@teamsparta/stack-tokens";
import { getVar } from "@teamsparta/stack-utils";
var textButtonIconVariants = {
sm: {
svg: {
width: "16px",
height: "16px"
}
},
md: {
svg: {
width: "16px",
height: "16px"
}
},
lg: {
svg: {
width: "20px",
height: "20px"
}
}
};
var buttonTextFontVariants = {
sm: captionSb,
md: bodyB,
lg: subTitle3
};
var textButtonTextColorVar = "--stack-text-button-text-color";
var buttonTextCss = (sizes) => sizes.map(
({ breakpoint, size }) => css`
@media screen and (min-width: ${breakpoint}px) {
${buttonTextFontVariants[size]}
}
`
);
var buttonBaseCss = css({
position: "relative",
display: "inline-flex",
gap: "4px",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
outline: "none",
backgroundColor: "transparent",
border: "none",
textAlign: "center",
color: getVar(textButtonTextColorVar),
"&:focus": {
outline: "revert"
}
});
var addonCss = css({
display: "inline-flex",
alignItems: "center",
justifyContent: "center"
});
var textButtonColorVariants = {
default: {
[textButtonTextColorVar]: vars.neutral[50]
},
link: {
[textButtonTextColorVar]: vars.blue[70]
}
};
var buttonIconSizeCss = (sizes) => sizes.map(
({ breakpoint, size }) => css`
@media screen and (min-width: ${breakpoint}px) {
${textButtonIconVariants[size]}
}
`
);
export {
buttonTextCss,
buttonBaseCss,
addonCss,
textButtonColorVariants,
buttonIconSizeCss
};