prestyled
Version:
React components for styling web projects, based upon Theme UI
3 lines (2 loc) • 18.1 kB
JavaScript
"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("@theme-ui/preset-tailwind")),a=require("@theme-ui/color"),r=require("theme-ui"),o=require("react"),n=require("styled-system"),i=t(require("@emotion/styled"));function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(t[r]=a[r])}return t}).apply(this,arguments)}function l(t,e){if(null==t)return{};var a,r,o={},n=Object.keys(t);for(r=0;r<n.length;r++)e.indexOf(a=n[r])>=0||(o[a]=t[a]);return o}var c,d,h,g,m,u,f,p,v,x,b=s(s({},e.alerts&&e.alerts),{},{primary:{color:"background"},secondary:{color:"background",bg:"secondary"},accent:{color:"background",bg:"accent"},highlight:{color:"text",bg:"highlight"}}),y=s(s({},e.badges),{},{primary:{color:"background"},highlight:{color:"text",bg:"highlight"},accent:{color:"background",bg:"accent"},outline:{color:"primary",bg:"transparent",boxShadow:"inset 0 0 0 1px"},circle:{height:16,minWidth:16,lineHeight:"16px",textAlign:"center",borderRadius:9999}}),S=s({},e.borders&&e.borders),j=s({},e.borderWidths&&e.borderWidths),k=s({},e.borderStyles&&e.borderStyles),C={cursor:"pointer",ml:1,"&:first-of-type":{ml:0}},T=s(s({},e.buttons),{},{default:s(s({},C),{},{color:"text",backgroundColor:"grayLight","&:hover":{backgroundColor:"gray"}}),primary:{variant:"buttons.default",color:"white",backgroundColor:"primary","&:hover":{backgroundColor:"primaryHighlight"}},secondary:{variant:"buttons.primary",color:"background",bg:"secondary"}}),z=s(s({},e.cards&&e.cards),{},{default:{padding:2,borderRadius:4,boxShadow:"0 0 8px rgba(0, 0, 0, 0.125)"}}),B=s(s({},e.colors),{},{transparent:"transparent",text:"grayBlack",background:"#ffffff",primary:"#3333ee",secondary:"#111199",muted:"#f6f6f6",highlight:"#efeffe",accent:"#660099",darken:"rgba(0, 0, 0, .25)",aqua:"#7fdbff",black:"#111",blue:"#0074d9",fuchsia:"#f012be",green:"#2ecc40",lime:"#01ff70",maroon:"#85144b",navy:"#001f3f",olive:"#3d9970",orange:"#ff851b",purple:"#b10dc9",red:"#ff4136",silver:"#ddd",teal:"#39cccc",white:"white",yellow:"#ffdc00"}),O={grayBlack:"#22292f",grayDarkest:"#3d4852",grayDarker:"#606f7b",grayDark:"#8795a1",gray:"#b8c2cc",grayLight:"#dae1e7",grayLighter:"#f1f5f8",grayLightest:"#f8fafc"},w=s(s(s({},B),O),{},{primary:B.blue,background:B.white,text:O.grayDarkest,msAppTileColor:O.grayDarkest,modes:{dark:{text:B.gray[4],textInverted:B.gray[5],background:B.gray[9],backgroundTransparent:a.transparentize(B.gray[9],.8),backgroundInverted:B.black,primary:"#0cf",secondary:"#90c"}}}),F=s(s({},e.forms&&e.forms),{},{label:{fontSize:1,fontWeight:"bold"},input:{borderColor:"gray","&:focus":{borderColor:"primary",boxShadow:function(t){var e;return"0 0 0 2px "+(null===(e=t.colors)||void 0===e?void 0:e.primary)},outline:"none"}},select:{borderColor:"gray","&:focus":{borderColor:"primary",boxShadow:function(t){var e;return"0 0 0 2px "+(null===(e=t.colors)||void 0===e?void 0:e.primary)},outline:"none"}},textarea:{borderColor:"gray","&:focus":{borderColor:"primary",boxShadow:function(t){var e;return"0 0 0 2px "+(null===(e=t.colors)||void 0===e?void 0:e.primary)},outline:"none"}},slider:{bg:"muted"}}),D=s({},e.grids&&e.grids),W=s({},e.images&&e.images),L=s(s({},e.links&&e.links),{},{nav:{display:"block",width:"100%",px:2,py:2,color:"inherit",textDecoration:"none",fontSize:1,fontWeight:"bold",bg:"transparent",transitionProperty:"background-color",transitionTimingFunction:"ease-out",transitionDuration:".2s",borderRadius:2,"&:hover":{bg:"highlight"},"&.active":{color:"primary",bg:"highlight"}}}),A=function(t){return"@media screen and (min-width:"+t+")"},M=["sm","md","lg","xl","xxl"],H=[32,40,48,64,75].map((function(t){return t+"em"})).map(A).reduce((function(t,e,a){var r;return s(s({},t),{},((r={})[""+M[a]]=e,r))}),s({},e.mediaQueries&&e.mediaQueries)),I=s({},e.messages&&e.messages),P=s({},e.opacities&&e.opacities),R=s({},e.radii&&e.radii),q=s({},e.shadows&&e.shadows),N=s(s({},e.sizes&&e.sizes),{},{sectionContentMax:1200,sectionContent:["90%","90%","70%"]}),U=[].concat(e.space&&e.space,["0em","0.5em","1em","2em","3em","4em","5em","6em"]),Q=["0.625rem","0.75rem","0.875rem","1rem","1.0625rem","1.125rem","1.1875rem","1.25rem","1.5rem","1.5625rem","1.9375rem","2rem","2.5rem","3rem","4rem"],E=s(s({},e.styles),{},{root:{fontFamily:"body",color:"text",bg:"background",lineHeight:1.6},img:{maxWidth:"100%",height:"auto"},p:{color:"text"},h6:{variant:"text.heading",fontSize:Q[3],fontWeight:"bold",marginTop:"0.2em",marginBottom:"0.7em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[3]+" * -0.7)"}},h5:(c={variant:"text.heading",fontSize:Q[4],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[4]+" * -0.7)"}},c[""+H.lg]={fontSize:Q[7],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[7]+" * -0.7)"}},c),h4:(d={variant:"text.heading",fontSize:Q[5],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[5]+" * -0.7)"}},d[""+H.lg]={fontSize:Q[9],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[9]+" * -0.7)"}},d),h3:(h={variant:"text.heading",fontSize:Q[6],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[6]+" * -0.7)"}},h[""+H.lg]={fontSize:Q[10],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[10]+" * -0.7)"}},h),h2:(g={variant:"text.heading",fontSize:Q[7],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[7]+" * -0.7)"}},g[""+H.lg]={fontSize:Q[12],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[12]+" * -0.7)"}},g),h1:(m={variant:"text.heading",fontSize:Q[8],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[8]+" * -0.7)"}},m[""+H.lg]={fontSize:Q[13],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+Q[13]+" * -0.7)"}},m),a:{color:"primary","&:hover":{color:"secondary"}},pre:{fontFamily:"monospace",fontSize:1,p:3,color:"text",bg:"muted",overflow:"auto",code:{color:"inherit"}},code:{fontFamily:"monospace",fontSize:1},inlineCode:{fontFamily:"monospace",color:"secondary",bg:"muted"},table:{width:"100%",my:4,borderCollapse:"separate",borderSpacing:0,"th, td":{textAlign:"left",py:"4px",pr:"4px",pl:0,borderColor:"muted",borderBottomStyle:"solid"}},th:{verticalAlign:"bottom",borderBottomWidth:"2px"},td:{verticalAlign:"top",borderBottomWidth:"1px"},hr:{border:0,borderBottom:"1px solid",borderColor:"muted"},xray:{"*":{outline:"1px solid rgba(0, 192, 255, .25)"}},navlink:{display:"inline-block",fontWeight:"bold",color:"inherit",textDecoration:"none",":hover,:focus":{color:"primary"}}}),_={name:"Default",alerts:b,badges:y,borders:S,borderStyles:k,borderWidths:j,buttons:T,cards:z,colors:w,fonts:{heading:"system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",body:"system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",mono:"Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"},fontSizes:Q,fontWeights:{medium:500,bold:700,regular:400,heading:500},forms:F,grids:D,images:W,landingPage:{section:{default:{backgroundColor:"background",minHeight:"60px"},primary:{variant:"landingPage.section.default",backgroundColor:"primary"}},sectionContent:{default:{margin:"0 auto",maxWidth:"sectionContentMax",width:["90%","90%","90%","70%"],py:[3,4]}}},letterSpacings:{normal:"normal",caps:"0.015em"},lineHeights:{standard:1.6,display:1.25,heading:1.25},links:L,mediaQueries:H,messages:I,opacities:P,radii:R,shadows:q,sizes:N,space:U,styles:E,text:s(s({},e.text&&e.text),{},{default:{color:"text",fontSize:3},xxsmall:{color:"text",fontSize:0},xsmall:{color:"text",fontSize:1},small:{color:"text",fontSize:2},heading:{fontFamily:"heading",fontWeight:"normal",lineHeight:"heading",color:"text"},primary:{variant:"text.default",color:"primary"},secondary:{variant:"text.default",color:"secondary"},accent:{variant:"text.default",color:"accent"},muted:{variant:"text.default",color:"muted"},display:{variant:"text.heading",fontSize:[5,6],fontWeight:"display",lineHeight:"display",letterSpacing:"-0.03em",mt:3},caps:{variant:"text.default",textTransform:"uppercase",letterSpacing:"caps"},h1:E.h1,h2:E.h2,h3:E.h3,h4:E.h4,h5:E.h5,h6:E.h6}),zIndices:s({},e.zIndices&&e.zIndices)},G=["0.625rem","0.75rem","0.875rem","1rem","1.0625rem","1.125rem","1.1875rem","1.25rem","1.5rem","1.5625rem","1.9375rem","2rem","2.5rem","3rem","4rem"],J=s(s({},e.styles),{},{root:{fontFamily:"body",color:"text",bg:"background"},img:{maxWidth:"100%",height:"auto"},p:{color:"text"},h6:{variant:"text.heading",fontSize:G[3],fontWeight:"bold",marginTop:"0.2em",marginBottom:"0.7em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[3]+" * -0.7)"}},h5:(u={variant:"text.heading",fontSize:G[4],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[4]+" * -0.7)"}},u[""+H.lg]={fontSize:G[7],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[7]+" * -0.7)"}},u),h4:(f={variant:"text.heading",fontSize:G[5],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[5]+" * -0.7)"}},f[""+H.lg]={fontSize:G[9],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[9]+" * -0.7)"}},f),h3:(p={variant:"text.heading",fontSize:G[6],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[6]+" * -0.7)"}},p[""+H.lg]={fontSize:G[10],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[10]+" * -0.7)"}},p),h2:(v={variant:"text.heading",fontSize:G[7],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[7]+" * -0.7)"}},v[""+H.lg]={fontSize:G[12],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[12]+" * -0.7)"}},v),h1:(x={variant:"text.heading",fontSize:G[8],marginBottom:"0.7em",marginTop:"0.2em","& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[8]+" * -0.7)"}},x[""+H.lg]={fontSize:G[13],"& + h1, & + h2, & + h3, & + h4, & + h5, & + h6":{marginTop:"calc("+G[13]+" * -0.7)"}},x),a:{color:"primary","&:hover":{color:"secondary"}},pre:{fontFamily:"monospace",fontSize:1,p:3,color:"text",bg:"muted",overflow:"auto",code:{color:"inherit"}},code:{fontFamily:"monospace",fontSize:1},inlineCode:{fontFamily:"monospace",color:"secondary",bg:"muted"},table:{width:"100%",my:4,borderCollapse:"separate",borderSpacing:0,"th, td":{textAlign:"left",py:"4px",pr:"4px",pl:0,borderColor:"muted",borderBottomStyle:"solid"}},th:{verticalAlign:"bottom",borderBottomWidth:"2px"},td:{verticalAlign:"top",borderBottomWidth:"1px"},hr:{border:0,borderBottom:"1px solid",borderColor:"muted"},xray:{"*":{outline:"1px solid rgba(0, 192, 255, .25)"}},navlink:{display:"inline-block",fontWeight:"bold",color:"inherit",textDecoration:"none",":hover,:focus":{color:"primary"}}}),K=s(s({},e.text&&e.text),{},{default:{color:"text",fontSize:3},xxsmall:{color:"text",fontSize:0},xsmall:{color:"text",fontSize:1},small:{color:"text",fontSize:2},heading:{fontFamily:"heading",fontWeight:"normal",lineHeight:"heading",color:"text"},primary:{variant:"text.default",color:"primary"},secondary:{variant:"text.default",color:"secondary"},accent:{variant:"text.default",color:"accent"},muted:{variant:"text.default",color:"muted"},display:{variant:"text.heading",fontSize:[5,6],fontWeight:"display",lineHeight:"display",letterSpacing:"-0.03em",mt:3},caps:{variant:"text.default",textTransform:"uppercase",letterSpacing:"caps"},h1:J.h1,h2:J.h2,h3:J.h3,h4:J.h4,h5:J.h5,h6:J.h6}),V={grayBlack:"#22292f",grayDarkest:"#3d4852",grayDarker:"#606f7b",grayDark:"#8795a1",gray:"#b8c2cc",grayLight:"#dae1e7",grayLighter:"#f1f5f8",grayLightest:"#f8fafc"},X=s(s({},V),{},{primaryDarkest:"#012949",primaryDarker:"#024376",primaryDark:"#035CA3",primary:"#0476D0",primaryLight:"#088FFA",primaryLighter:"#35A4FB",primaryLightest:"#62B8FC",msAppTileColor:"#0476D0",background:"#FFF",text:V.grayDarkest}),Y=s(s({},_),{},{colors:X,styles:J,fonts:{heading:"'Lato', sans-serif",body:"'Lato', sans-serif",mono:"Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"},fontSizes:G,fontWeights:{medium:500,bold:700,regular:400,heading:500},lineHeights:{standard:1.6,display:1.25,heading:1.25},letterSpacings:{normal:"normal",caps:"0.015em"},text:K}),Z=function(t){var e=t.variant,a=void 0===e?"theme.buttons.close":e,o=l(t,["variant"]);return r.jsx(r.Close,Object.assign({},o,{variant:a}))},$=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Input,Object.assign({},o,{variant:a}))},tt=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Label,Object.assign({},o,{variant:a}))},et=o.forwardRef((function(t,e){var a=t.as,o=void 0===a?$:a,n=t.variant,i=void 0===n?"forms.formField.default":n,s=t.label,c=t.name,d=l(t,["as","variant","label","name"]);return r.jsx(r.Box,Object.assign({},d,{sx:{variant:i}}),r.jsx(tt,{htmlFor:c},s),r.jsx(o,{ref:e,id:c,name:c}))})),at=o.forwardRef((function(t,e){var a=t.variant,o=void 0===a?"default":a,n=l(t,["variant"]);return r.jsx(r.Link,Object.assign({ref:e},n,{variant:o}))})),rt=o.forwardRef((function(t,e){var a=t.variant,o=void 0===a?"default":a,n=l(t,["variant"]);return r.jsx(r.NavLink,Object.assign({ref:e},n,{variant:o}))})),ot=i(r.Box)({display:"grid"},n.grid,n.system({minColumnWidth:{property:"gridTemplateColumns",scale:"space",transform:function(t,e){return t?"repeat(auto-fit, minmax("+function(t,e){return void 0===e&&(e=[]),function(t){return"number"==typeof t?t+"px":t}(e[t]||t)}(t,e)+", 1fr))":null}},numColumns:{property:"gridTemplateColumns",transform:function(t){return t?"repeat("+t+", 1fr)":null}}}));exports.Alert=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Alert,Object.assign({},o,{variant:a}))},exports.Avatar=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Avatar,Object.assign({},o,{variant:a}))},exports.Badge=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Badge,Object.assign({},o,{variant:a}))},exports.Button=function(t){var e=t.variant,a=void 0===e?"default":e,o=t.type,n=void 0===o?"button":o,i=l(t,["variant","type"]);return r.jsx(r.Button,Object.assign({},i,{type:n,variant:a}))},exports.Card=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Card,Object.assign({},o,{variant:a}))},exports.Checkbox=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Checkbox,Object.assign({},o,{variant:a}))},exports.Close=Z,exports.CloseButton=Z,exports.Divider=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Divider,Object.assign({},o,{variant:a}))},exports.Donut=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Donut,Object.assign({},o,{variant:a}))},exports.Embed=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Embed,Object.assign({},o,{variant:a}))},exports.Field=et,exports.FormField=et,exports.Heading=function(t){var e,a=t.variant,o=void 0===a?"default":a,n=t.as,i=void 0===n?"h2":n,s=l(t,["variant","as"]);switch(o){case"h1":case"h2":case"h3":case"h4":case"h5":case"h6":e=o;break;default:switch(i){case"h1":case"h2":case"h3":case"h4":case"h5":case"h6":e=i;break;default:e=o}}return r.jsx(r.Heading,Object.assign({},s,{variant:e,as:i}))},exports.IconButton=function(t){var e=t.variant,a=void 0===e?"theme.buttons.icon":e,o=l(t,["variant"]);return r.jsx(r.IconButton,Object.assign({},o,{variant:a}))},exports.Image=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Image,Object.assign({},o,{variant:a}))},exports.Input=$,exports.Label=tt,exports.LandingPageSection=function(t){var e=t.variant,a=t.as,o=l(t,["variant","as"]);return r.jsx(r.Box,Object.assign({},o,{variant:e?"landingPage.section."+e:"landingPage.section.default",as:a||"section"}))},exports.LandingPageSectionContent=function(t){var e=t.variant,a=l(t,["variant"]);return r.jsx(r.Box,Object.assign({},a,{variant:e?"landingPage.sectionContent."+e:"landingPage.sectionContent.default"}))},exports.Link=at,exports.MenuButton=function(t){var e=t.variant,a=void 0===e?"theme.buttons.menu":e,o=l(t,["variant"]);return r.jsx(r.MenuButton,Object.assign({},o,{variant:a}))},exports.Message=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Message,Object.assign({},o,{variant:a}))},exports.NavLink=rt,exports.Progress=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Progress,Object.assign({},o,{variant:a}))},exports.Radio=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Radio,Object.assign({},o,{variant:a}))},exports.Select=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Select,Object.assign({},o,{variant:a}))},exports.Slider=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Slider,Object.assign({},o,{variant:a}))},exports.Spinner=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Spinner,Object.assign({},o,{variant:a}))},exports.Stack=ot,exports.Text=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Text,Object.assign({},o,{variant:a}))},exports.Textarea=function(t){var e=t.variant,a=void 0===e?"default":e,o=l(t,["variant"]);return r.jsx(r.Textarea,Object.assign({},o,{variant:a}))},exports.defaultTheme=_,exports.portfolioBlueTheme=Y;
//# sourceMappingURL=prestyled.cjs.production.min.js.map