@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.42 kB
JavaScript
;require("react/jsx-runtime"),require("@mui/material");var e=require("../../BrandCore/Icon/Icon.js"),t=require("../../BrandCore/primitiveVariables.js"),o=require("../utils/typography.util.js");const r=(e,t)=>({backgroundColor:e.custom.palette.interaction.none,color:t?e.custom.palette.text.negative:e.custom.palette.text.primary,fontWeight:300,"&:focus:before":{boxShadow:e.custom.palette.interaction.none},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus}}),a={xs:3*t.base,sm:3.5*t.base,md:4*t.base,lg:5*t.base,xl:6*t.base,xxl:7*t.base,xxxl:8*t.base},s={xs:.5*t.base,sm:.5*t.base,md:t.base,lg:t.base,xl:t.base,xxl:t.base,xxxl:t.base};exports.buttonHeightMap=a,exports.buttonInteraction=(e,t)=>({cursor:"pointer","&:hover":{backgroundColor:e.custom.palette.interaction.hover},"&:focus":{backgroundColor:e.custom.palette.interaction.hover},"&:active":{backgroundColor:e.custom.palette.interaction.press},"&:disabled":{backgroundColor:e.custom.palette.interaction.disabled,color:e.custom.palette.text.disabled},...t&&{backgroundColor:e.custom.palette.interaction.press,"&:hover":{backgroundColor:e.custom.palette.interaction.press},"&:focus":{backgroundColor:e.custom.palette.interaction.press},"&:active":{backgroundColor:e.custom.palette.interaction.press}},...r(e,!1)}),exports.getButtonSizing=e=>({height:a[e],paddingLeft:t.base,paddingRight:t.base}),exports.getButtonTypography=e=>({"& .MuiBox-root":{lineHeight:"120%",fontSize:o.fontSizemap[e],paddingLeft:s[e],paddingRight:s[e]}}),exports.getIconSizing=t=>({"& .MuiButton-icon":{margin:0,".MuiSvgIcon-root":{height:e.iconSizeMap[t],width:e.iconSizeMap[t]}},"& .MuiSvgIcon-root":{height:e.iconSizeMap[t],width:e.iconSizeMap[t]}}),exports.outlined=(e,t)=>({backgroundColor:e.custom.palette.surface.raised,color:t?e.custom.palette.text.negative:e.custom.palette.text.primary,border:`1px solid ${e.custom.palette.stroke.default}`,"&:focus:before":{boxShadow:e.custom.palette.interaction.none},"&:hover":{backgroundColor:e.custom.palette.surface.raised},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus},"&:active":{backgroundColor:e.custom.palette.surface.raised},"&:disabled":{border:`1px solid ${e.custom.palette.stroke.disabled}`}}),exports.primary=(e,t)=>({backgroundColor:t?e.custom.palette.red[500]:e.custom.palette.purple[500],color:e.custom.palette.text.lockedWhite,"&:focus:before":{boxShadow:e.custom.palette.interaction.none},"&:hover":{backgroundColor:t?e.custom.palette.red[500]:e.custom.palette.purple[500],color:e.custom.palette.text.lockedWhite,"&::before":{backgroundColor:e.custom.palette.interaction.hoverOnDark}},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus,"&::before":{backgroundColor:e.custom.palette.interaction.hoverOnDark}},"&:active":{backgroundColor:t?e.custom.palette.red[500]:e.custom.palette.purple[500],color:e.custom.palette.text.lockedWhite,"&::before":{backgroundColor:e.custom.palette.interaction.pressOnDark}}}),exports.secondary=(e,t)=>({backgroundColor:t?e.custom.palette.red[0]:e.custom.palette.purple[0],color:t?e.custom.palette.text.negative:e.custom.palette.text.primary,"&:focus:before":{boxShadow:e.custom.palette.interaction.none},"&:hover":{backgroundColor:t?e.custom.palette.red[0]:e.custom.palette.purple[0]},"&:focus-visible":{boxShadow:e.custom.boxShadow.input.focus},"&:active":{backgroundColor:t?e.custom.palette.red[0]:e.custom.palette.purple[0]}}),exports.subtle=r;