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