@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.79 kB
JavaScript
import{base as o}from"../../BrandCore/primitiveVariables.js";const e=o=>({backgroundColor:o.custom.palette.interaction.none,color:o.custom.palette.icon.primary}),t=o=>({"&.MuiButtonBase-root":{color:o.custom.palette.icon.primary,backgroundColor:o.custom.palette.purple[100],"&:focus:before":{backgroundColor:"none"},"&:hover:before":{backgroundColor:o.custom.palette.interaction.hoverOnDark},"&:active:before":{backgroundColor:o.custom.palette.interaction.pressOnDark},"&:focus-visible:before":{backgroundColor:o.custom.palette.surface.transparent},"&.Mui-disabled":{backgroundColor:o.custom.palette.interaction.disabled,"&:before":{color:o.custom.palette.icon.disabled}}}}),r=o=>({backgroundColor:o.custom.palette.surface.raised,border:`1px solid ${o.custom.palette.stroke.default}`,color:o.custom.palette.icon.primary,"&.MuiIconButton-root:disabled":{border:"none"}}),a=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.raised,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),c=o=>({backgroundColor:o.custom.palette.surface.raised,boxShadow:o.custom.elevation.overlay,color:o.custom.palette.icon.primary,"&:focus-visible:after":{boxShadow:o.custom.boxShadow.input.focus},"&.MuiIconButton-root:disabled":{boxShadow:"none"}}),s=(o,e)=>({borderRadius:"default"===o?e.spacing(e.custom.radius.md):e.custom.radius.round}),u={xs:3*o,sm:3.5*o,md:4*o,lg:5*o,xl:6*o},i=o=>({height:u[o],width:u[o]}),l={xs:2*o,sm:2*o,md:2*o,lg:2.5*o,xl:3*o},n=o=>({height:l[o],width:l[o]});export{l as IconSizeMap,u as buttonSizeMap,e as defaultStyle,c as elevated,s as getIconButtonRadius,i as getIconButtonSizing,n as getIconSizing,r as outlined,a as raised,t as toggle};