text: import{S as e,i as r,s as a,e as s,t as o,h as t,l as n,c,a as i,j as l,d,k as h,m as p,b as f,f as g,g as m,o as v,n as b,p as u,q as $,r as w}from"./client.7628e46f.js";import{C as x}from"./Code.4523955d.js";import"./index.9c86a623.js";function E(e){let r,a,E,y,T,k,S,A,j,C,H,P,B,N,D,I,M,R,V,q,z,F,G,J,K,L,O,Q,U,W,X,Y,Z,_,ee,re,ae,se,oe,te,ne,ce,ie,le,de,he,pe,fe,ge,me,ve,be,ue,$e,we,xe,Ee,ye,Te="{color}-{variant}",ke="{color}-{variant}",Se="{solid|dashed|dotted|none}";return L=new x({props:{code:'<div class="bg-deep-purple-500 text-white p-4">This div is deep purple.</div>'}}),se=new x({props:{code:'<h4 class="text-error-500">This header is error</h4>'}}),$e=new x({props:{code:'<div class="border-2 border-secondary-600 p-4">This div has secondary border</div>'}}),{c(){r=s("h4"),a=o("Color helper classes"),E=t(),y=s("p"),T=o("Right now Smelte adds very little to what Tailwind\n  "),k=s("a"),S=o("has"),A=t(),j=s("a"),C=o("to offer"),H=o("\n  dealing with color except for porting the Material design color\n  "),P=s("a"),B=o("palette"),N=o("\n  and adding a few extra utilities like caret color on inputs or colored ripple\n  animation effect. Colors themselves are configured in\n  "),D=s("a"),I=o("tailwind.config.js"),M=o("\n  ."),R=t(),V=s("h5"),q=o("Background"),z=t(),F=s("span"),G=o(".bg-"),J=o(Te),K=o("\ngives element appropriate background color:\n"),n(L.$$.fragment),O=t(),Q=s("div"),U=o("This div is deep purple."),W=t(),X=s("h5"),Y=o("Text"),Z=t(),_=s("span"),ee=o(".text-"),re=o(ke),ae=o("\nchanges text color accordingly:\n"),n(se.$$.fragment),oe=t(),te=s("h4"),ne=o("This header is error color"),ce=t(),ie=s("h5"),le=o("Border"),de=o("\nSame principle applies to border, but there are also border width\n"),he=s("span"),pe=o("border-"),fe=o("{n}"),ge=o("\nand type\n"),me=s("span"),ve=o("border-"),be=o(Se),ue=o("\nhelpers.\n"),n($e.$$.fragment),we=t(),xe=s("div"),Ee=o("This div has secondary color border"),this.h()},l(e){r=c(e,"H4",{class:!0});var s=i(r);a=l(s,"Color helper classes"),s.forEach(d),E=h(e),y=c(e,"P",{});var o=i(y);T=l(o,"Right now Smelte adds very little to what Tailwind\n  "),k=c(o,"A",{class:!0,href:!0});var t=i(k);S=l(t,"has"),t.forEach(d),A=h(o),j=c(o,"A",{class:!0,href:!0});var n=i(j);C=l(n,"to offer"),n.forEach(d),H=l(o,"\n  dealing with color except for porting the Material design color\n  "),P=c(o,"A",{class:!0,href:!0});var f=i(P);B=l(f,"palette"),f.forEach(d),N=l(o,"\n  and adding a few extra utilities like caret color on inputs or colored ripple\n  animation effect. Colors themselves are configured in\n  "),D=c(o,"A",{class:!0,href:!0});var g=i(D);I=l(g,"tailwind.config.js"),g.forEach(d),M=l(o,"\n  ."),o.forEach(d),R=h(e),V=c(e,"H5",{class:!0});var m=i(V);q=l(m,"Background"),m.forEach(d),z=h(e),F=c(e,"SPAN",{class:!0});var v=i(F);G=l(v,".bg-"),J=l(v,Te),v.forEach(d),K=l(e,"\ngives element appropriate background color:\n"),p(L.$$.fragment,e),O=h(e),Q=c(e,"DIV",{class:!0});var b=i(Q);U=l(b,"This div is deep purple."),b.forEach(d),W=h(e),X=c(e,"H5",{class:!0});var u=i(X);Y=l(u,"Text"),u.forEach(d),Z=h(e),_=c(e,"SPAN",{class:!0});var $=i(_);ee=l($,".text-"),re=l($,ke),$.forEach(d),ae=l(e,"\nchanges text color accordingly:\n"),p(se.$$.fragment,e),oe=h(e),te=c(e,"H4",{class:!0});var w=i(te);ne=l(w,"This header is error color"),w.forEach(d),ce=h(e),ie=c(e,"H5",{class:!0});var x=i(ie);le=l(x,"Border"),x.forEach(d),de=l(e,"\nSame principle applies to border, but there are also border width\n"),he=c(e,"SPAN",{class:!0});var ye=i(he);pe=l(ye,"border-"),fe=l(ye,"{n}"),ye.forEach(d),ge=l(e,"\nand type\n"),me=c(e,"SPAN",{class:!0});var Ae=i(me);ve=l(Ae,"border-"),be=l(Ae,Se),Ae.forEach(d),ue=l(e,"\nhelpers.\n"),p($e.$$.fragment,e),we=h(e),xe=c(e,"DIV",{class:!0});var je=i(xe);Ee=l(je,"This div has secondary color border"),je.forEach(d),this.h()},h(){f(r,"class","pb-8"),f(k,"class","a"),f(k,"href","https://tailwindcss.com/docs/background-color/"),f(j,"class","a"),f(j,"href","https://tailwindcss.com/docs/text-color/"),f(P,"class","a"),f(P,"href","https://material.io/design/color/#tools-for-picking-colors"),f(D,"class","a"),f(D,"href","https://github.com/matyunya/smelte/blob/master/tailwind.config.js"),f(V,"class","mt-6 mb-2"),f(F,"class","code-inline"),f(Q,"class","bg-deep-purple-500 text-white p-4"),f(X,"class","mt-6 mb-2"),f(_,"class","code-inline"),f(te,"class","text-error-500"),f(ie,"class","mt-6 mb-2"),f(he,"class","code-inline"),f(me,"class","code-inline"),f(xe,"class","border-2 border-secondary-600 p-4")},m(e,s){g(e,r,s),m(r,a),g(e,E,s),g(e,y,s),m(y,T),m(y,k),m(k,S),m(y,A),m(y,j),m(j,C),m(y,H),m(y,P),m(P,B),m(y,N),m(y,D),m(D,I),m(y,M),g(e,R,s),g(e,V,s),m(V,q),g(e,z,s),g(e,F,s),m(F,G),m(F,J),g(e,K,s),v(L,e,s),g(e,O,s),g(e,Q,s),m(Q,U),g(e,W,s),g(e,X,s),m(X,Y),g(e,Z,s),g(e,_,s),m(_,ee),m(_,re),g(e,ae,s),v(se,e,s),g(e,oe,s),g(e,te,s),m(te,ne),g(e,ce,s),g(e,ie,s),m(ie,le),g(e,de,s),g(e,he,s),m(he,pe),m(he,fe),g(e,ge,s),g(e,me,s),m(me,ve),m(me,be),g(e,ue,s),v($e,e,s),g(e,we,s),g(e,xe,s),m(xe,Ee),ye=!0},p:b,i(e){ye||(u(L.$$.fragment,e),u(se.$$.fragment,e),u($e.$$.fragment,e),ye=!0)},o(e){$(L.$$.fragment,e),$(se.$$.fragment,e),$($e.$$.fragment,e),ye=!1},d(e){e&&d(r),e&&d(E),e&&d(y),e&&d(R),e&&d(V),e&&d(z),e&&d(F),e&&d(K),w(L,e),e&&d(O),e&&d(Q),e&&d(W),e&&d(X),e&&d(Z),e&&d(_),e&&d(ae),w(se,e),e&&d(oe),e&&d(te),e&&d(ce),e&&d(ie),e&&d(de),e&&d(he),e&&d(ge),e&&d(me),e&&d(ue),w($e,e),e&&d(we),e&&d(xe)}}}export default class extends e{constructor(e){super(),r(this,e,null,E,a,{})}}
  