@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.86 kB
JavaScript
import{alpha as e}from"@mui/material";const t=e=>`linear-gradient(135deg, ${e.custom.palette.purple[400]} 0%, ${e.custom.palette.purple[200]} 100%)`,a=e=>`linear-gradient(135deg, ${e.custom.palette.purple[0]} 0%, ${e.custom.palette.purple[100]} 100%)`,r=e=>`linear-gradient(135deg, ${e.custom.palette.blue[400]} 0%, ${e.custom.palette.purple[600]} 100%)`,l=t=>`radial-gradient(54.59% 50% at 0% 50.04%, ${e(t.custom.palette.blue[1e3],.2)} 0%, ${e(t.custom.palette.blue[500],.2)} 100%), linear-gradient(135deg, ${t.custom.palette.purple[500]} 0%, ${t.custom.palette.purple[1e3]} 100%)`,p=e=>`linear-gradient(135deg, ${e.custom.palette.blue[0]} 0%, ${e.custom.palette.purple[0]} 100%)`,o=e=>({background:r(e),backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}),n=(e,t=1,a)=>{const l=a??e.custom.palette.surface.default;return{border:`${t}px solid transparent`,background:`${l.includes("gradient")?l:`linear-gradient(${l}, ${l})`} padding-box, ${r(e)} border-box`}},u=e=>({color:"transparent",background:r(e),maskImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.75 3c.207 0 .375.168.375.375a3 3 0 003 3 .375.375 0 010 .75 3 3 0 00-3 3 .375.375 0 01-.75 0 3 3 0 00-3-3 .375.375 0 110-.75 3 3 0 003-3c0-.207.168-.375.375-.375zM15.875 7.875a.375.375 0 00-.75 0c0 2.9-2.35 5.25-5.25 5.25a.375.375 0 000 .75c2.9 0 5.25 2.35 5.25 5.25a.375.375 0 00.75 0c0-2.9 2.35-5.25 5.25-5.25a.375.375 0 000-.75 5.25 5.25 0 01-5.25-5.25zM6.125 13.875a.375.375 0 00-.75 0 3 3 0 01-3 3 .375.375 0 000 .75 3 3 0 013 3 .375.375 0 00.75 0 3 3 0 013-3 .375.375 0 000-.75 3 3 0 01-3-3z'/%3E%3C/svg%3E\")",maskSize:"contain",maskRepeat:"no-repeat",maskPosition:"center"});export{t as tone1,a as tone2,r as tone3,u as tone3_ai_icon,n as tone3_border,o as tone3_lowOpacity_text,l as tone4,p as tone5};