@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.39 kB
JavaScript
import{paperClasses as e}from"@mui/material";import{getInteractionStateStyles as t}from"../styleblocks/interactionStates.js";import{selectedState as a}from"../styleblocks/selectedStyle.js";const s=e=>({boxShadow:e.custom.elevation.raised}),o=e=>({boxShadow:e.custom.elevation.overlay}),r=e=>({boxShadow:e.custom.elevation.float}),u=t=>({backgroundColor:a(t).backgroundColor,[`&.${e.root}`]:{outline:`1px solid ${t.custom.palette.blue[500]}`}}),c=(e,a,s)=>({cursor:"pointer",transition:"all 150ms ease","&:hover":{boxShadow:r(e).boxShadow,background:t(e,"hover",a?e.custom.palette.blue[0]:e.custom.palette.surface.raised)},"&:active":{boxShadow:r(e).boxShadow,background:t(e,"active",a?e.custom.palette.blue[0]:e.custom.palette.surface.raised)}}),l=(e,t)=>{switch(t){case"xs":return e.spacing(e.custom.radius.xs);case"sm":return e.spacing(e.custom.radius.sm);case"md":return e.spacing(e.custom.radius.md);case"lg":return e.spacing(e.custom.radius.lg);default:return e.spacing(e.custom.radius.xl)}},i=(e,t)=>{switch(e){case"sunken":return t.custom.palette.surface.sunken;case"raised":case"float":return t.custom.palette.surface.raised;case"overlay":return t.custom.palette.surface.overlay;default:return t.custom.palette.surface.default}};export{i as backgroundBasedOnVariation,c as createInteractiveStates,r as float,l as getBorderRadius,o as overlay,s as raised,u as surfaceSelectedState};