@leafygreen-ui/button
Advanced tools
Comparing version 19.0.2 to 19.0.3
# @leafygreen-ui/button | ||
## 19.0.3 | ||
### Patch Changes | ||
- c7f7fff56: Refactors Button component internals | ||
- Updated dependencies [703db871f] | ||
- @leafygreen-ui/palette@3.4.6 | ||
## 19.0.2 | ||
@@ -4,0 +12,0 @@ |
@@ -1,2 +0,2 @@ | ||
import n,{useRef as e,useEffect as r}from"react";import o from"prop-types";import a from"@leafygreen-ui/box";import{css as t,cx as l}from"@leafygreen-ui/emotion";import{useDarkMode as i,useUsingKeyboardContext as c}from"@leafygreen-ui/leafygreen-provider";import{transitionDuration as d,fontFamilies as g,typeScales as s,BaseFontSize as b}from"@leafygreen-ui/tokens";import{registerRipple as u}from"@leafygreen-ui/ripple";import{Theme as p,createUniqueClassName as h,getTheme as f}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import{transparentize as x,mix as k}from"polished";function m(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,o)}return r}function w(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?m(Object(r),!0).forEach((function(e){v(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function v(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function O(){return O=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},O.apply(this,arguments)}function D(n,e){if(null==n)return{};var r,o,a=function(n,e){if(null==n)return{};var r,o,a={},t=Object.keys(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||(a[r]=n[r]);return a}(n,e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(a[r]=n[r])}return a}function P(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var j,z,G,B,S,N,M,E,L,q,F,C,I,X,K,H,R,T,Y,A,J,Q,U,V,W,Z,$,_,nn,en,rn,on,an,tn,ln,cn,dn,gn,sn,bn,un,pn,hn,fn,yn,xn,kn,mn,wn,vn,On,Dn,Pn={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},jn={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},zn={Body1:13,Body2:16},Gn=function(n){return"\n 0 0 0 2px ".concat(n,", \n 0 0 0 4px ").concat(y.blue.light1,";\n")},Bn=t(j||(j=P(["\n // unset browser default\n appearance: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n border: 1px solid transparent;\n display: inline-flex;\n align-items: stretch;\n transition: all ","ms ease-in-out;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n font-family: ",";\n border-radius: 6px;\n\n &:focus {\n outline: none;\n }\n\n &[disabled],\n &:disabled {\n pointer-events: none;\n }\n\n &:active,\n &:focus,\n &:hover {\n text-decoration: none;\n }\n"])),d.default,g.default),Sn=(v(H={},p.Light,(v(E={},Pn.Default,t(z||(z=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.gray.light3,y.gray.base,y.black,y.black,y.white,y.gray.light2)),v(E,Pn.Primary,t(G||(G=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Not quite dark3\n border-color: #00593f; // Not quite dark3\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.green.dark2,y.green.dark2,y.white,y.white,y.green.light2)),v(E,Pn.PrimaryOutline,t(B||(B=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.dark2,y.green.dark2,y.green.dark2,x(.96,y.green.base),y.green.light2)),v(E,Pn.Danger,t(S||(S=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #c82222; // not quite dark1\n border-color: #c82222; // not quite dark1\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.red.base,y.red.base,y.white,y.white,y.red.light3)),v(E,Pn.DangerOutline,t(N||(N=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.red.light1,y.red.base,y.red.dark2,x(.96,y.red.base),y.red.base,y.red.light3)),v(E,Pn.BaseGreen,t(M||(M=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.dark2,y.green.dark3,y.green.dark3,k(.96,y.green.base,y.green.dark3),y.green.light2)),E)),v(H,p.Dark,(v(K={},Pn.Default,t(L||(L=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n background-color: ",";\n border-color: ",";\n color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.gray.dark2,y.gray.base,y.white,y.white,y.gray.dark1,y.gray.base,y.white,y.gray.dark2)),v(K,Pn.Primary,t(q||(q=P(["\n background-color: ",";\n border: 1px solid ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Off palette\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.green.dark2,y.green.base,y.white,y.white,y.white,y.green.dark3)),v(K,Pn.PrimaryOutline,t(F||(F=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.base,y.green.base,y.green.base,x(.96,y.green.base),y.green.base,y.green.dark3)),v(K,Pn.Danger,t(C||(C=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n border-color: ",";\n color: ",";\n background-color: #c82222; // Off palette\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),y.red.base,y.red.light1,y.white,y.white,y.red.light1,y.white,y.yellow.dark3)),v(K,Pn.DangerOutline,t(I||(I=P(["\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),y.red.light1,y.red.light1,y.red.light1,y.red.light1,x(.96,y.red.base),y.yellow.dark3)),v(K,Pn.BaseGreen,t(X||(X=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.dark2,y.green.dark3,y.green.dark3,k(.96,y.green.base,y.green.light3),y.green.dark2,y.green.dark3)),K)),H),Nn=(v(rn={},p.Light,(v(U={},Pn.Default,t(R||(R=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.white,Gn(y.white))),v(U,Pn.Primary,t(T||(T=P(["\n &:focus {\n color: ",";\n background-color: #00593f; // Not quite dark3\n box-shadow: ",";\n }\n "])),y.white,Gn(y.white))),v(U,Pn.PrimaryOutline,t(Y||(Y=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.green.base),Gn(y.white))),v(U,Pn.Danger,t(A||(A=P(["\n &:focus {\n color: ",";\n background-color: #c82222; // not quite dark1\n box-shadow: ",";\n }\n "])),y.white,Gn(y.white))),v(U,Pn.DangerOutline,t(J||(J=P(["\n &:focus {\n color: ",";\n box-shadow: ",";\n }\n "])),y.red.dark2,Gn(y.white))),v(U,Pn.BaseGreen,t(Q||(Q=P(["\n &:focus {\n box-shadow: ",";\n }\n "])),Gn(y.white))),U)),v(rn,p.Dark,(v(en={},Pn.Default,t(V||(V=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.gray.dark1,Gn(y.black))),v(en,Pn.Primary,t(W||(W=P(["\n &:focus {\n background-color: #00593f; // Off palette\n box-shadow: ",";\n }\n "])),Gn(y.black))),v(en,Pn.PrimaryOutline,t(Z||(Z=P(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.green.base),y.green.base,Gn(y.black))),v(en,Pn.Danger,t($||($=P(["\n &:focus {\n background-color: #c82222; // Off palette\n box-shadow: ",";\n }\n "])),Gn(y.black))),v(en,Pn.DangerOutline,t(_||(_=P(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.red.base),y.red.light1,Gn(y.black))),v(en,Pn.BaseGreen,t(nn||(nn=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.green.base,Gn(y.black))),en)),rn),Mn=(v(tn={},p.Light,t(on||(on=P(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),y.gray.light2,y.gray.light1,y.gray.base,Gn(y.white))),v(tn,p.Dark,t(an||(an=P(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),y.gray.dark3,y.gray.dark1,y.gray.dark1,Gn(y.black))),tn),En=(v(sn={},jn.XSmall,t(ln||(ln=P(["\n height: 22px;\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1em;\n font-weight: bold;\n letter-spacing: 0.4px;\n "])))),v(sn,jn.Small,t(cn||(cn=P(["\n height: 28px;\n "])))),v(sn,jn.Default,t(dn||(dn=P(["\n height: 36px;\n "])))),v(sn,jn.Large,t(gn||(gn=P(["\n height: 48px;\n font-size: 18px;\n line-height: 24px;\n "])))),sn),Ln=(v(pn={},b.Body1,t(bn||(bn=P(["\n font-size: ","px;\n line-height: ","px;\n font-weight: 500; // Medium\n "])),s.body1.fontSize,s.body1.lineHeight)),v(pn,b.Body2,t(un||(un=P(["\n font-size: ","px;\n line-height: ","px;\n // Pixel pushing for optical alignment purposes\n transform: translateY(1px);\n font-weight: 500; // Medium\n "])),s.body2.fontSize,s.body2.lineHeight)),pn),qn=h("button");var Fn,Cn,In,Xn,Kn,Hn,Rn,Tn,Yn,An,Jn,Qn,Un,Vn,Wn,Zn,$n,_n,ne,ee,re,oe,ae,te,le,ie,ce,de,ge,se,be,ue,pe,he,fe,ye,xe,ke,me,we,ve,Oe,De,Pe=(v(yn={},p.Light,(v(hn={},Pn.Default,y.gray.light2),v(hn,Pn.Primary,y.green.dark1),v(hn,Pn.PrimaryOutline,x(.76,y.green.base)),v(hn,Pn.Danger,y.red.light1),v(hn,Pn.DangerOutline,x(.76,y.red.base)),v(hn,Pn.BaseGreen,y.green.light1),hn)),v(yn,p.Dark,(v(fn={},Pn.Default,y.gray.base),v(fn,Pn.Primary,y.green.dark1),v(fn,Pn.PrimaryOutline,x(.76,y.green.base)),v(fn,Pn.Danger,y.red.dark2),v(fn,Pn.DangerOutline,x(.76,y.red.light1)),v(fn,Pn.BaseGreen,y.green.dark1),fn)),yn),je=t(xn||(xn=P(["\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 5px;\n"]))),ze=t(kn||(kn=P(["\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n pointer-events: none;\n position: relative;\n z-index: 0;\n"]))),Ge=(v(Dn={},jn.XSmall,t(mn||(mn=P(["\n padding: 0 7px; // 8px - 1px border\n gap: 6px;\n "])))),v(Dn,jn.Small,t(wn||(wn=P(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),v(Dn,jn.Default,t(vn||(vn=P(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),v(Dn,jn.Large,t(On||(On=P(["\n padding: 0 15px; // 16px - 1px border\n gap: 8px;\n "])))),Dn),Be=(v(Wn={},p.Light,(v(Rn={},Pn.Default,t(Fn||(Fn=P(["\n color: ",";\n "])),y.gray.base)),v(Rn,Pn.Primary,t(Cn||(Cn=P(["\n color: ",";\n "])),y.green.light2)),v(Rn,Pn.PrimaryOutline,t(In||(In=P(["\n color: ",";\n "])),y.green.dark2)),v(Rn,Pn.Danger,t(Xn||(Xn=P(["\n color: ",";\n "])),y.red.light3)),v(Rn,Pn.DangerOutline,t(Kn||(Kn=P(["\n color: ",";\n "])),y.red.light1)),v(Rn,Pn.BaseGreen,t(Hn||(Hn=P(["\n color: ",";\n "])),y.green.dark2)),Rn)),v(Wn,p.Dark,(v(Vn={},Pn.Default,t(Tn||(Tn=P(["\n color: ",";\n "])),y.gray.light2)),v(Vn,Pn.Primary,t(Yn||(Yn=P(["\n color: ",";\n "])),y.green.light2)),v(Vn,Pn.PrimaryOutline,t(An||(An=P(["\n color: ",";\n "])),y.green.base)),v(Vn,Pn.Danger,t(Jn||(Jn=P(["\n color: ",";\n "])),y.red.light2)),v(Vn,Pn.DangerOutline,t(Qn||(Qn=P(["\n color: ",";\n "])),y.red.light1)),v(Vn,Pn.BaseGreen,t(Un||(Un=P(["\n color: ",";\n "])),y.green.dark2)),Vn)),Wn),Se=(v(se={},p.Light,(v(oe={},Pn.Default,t(Zn||(Zn=P(["\n color: ",";\n "])),y.black)),v(oe,Pn.Primary,t($n||($n=P(["\n color: ",";\n "])),y.white)),v(oe,Pn.PrimaryOutline,t(_n||(_n=P(["\n color: ",";\n "])),y.green.dark2)),v(oe,Pn.Danger,t(ne||(ne=P(["\n color: ",";\n "])),y.white)),v(oe,Pn.DangerOutline,t(ee||(ee=P(["\n color: ",";\n "])),y.red.base)),v(oe,Pn.BaseGreen,t(re||(re=P(["\n color: ",";\n "])),y.green.dark3)),oe)),v(se,p.Dark,(v(ge={},Pn.Default,t(ae||(ae=P(["\n color: ",";\n "])),y.white)),v(ge,Pn.Primary,t(te||(te=P(["\n color: ",";\n "])),y.white)),v(ge,Pn.PrimaryOutline,t(le||(le=P(["\n color: ",";\n "])),y.green.base)),v(ge,Pn.Danger,t(ie||(ie=P(["\n color: ",";\n "])),y.white)),v(ge,Pn.DangerOutline,t(ce||(ce=P(["\n color: ",";\n "])),y.red.light1)),v(ge,Pn.BaseGreen,t(de||(de=P(["\n color: ",";\n "])),y.green.dark3)),ge)),se),Ne=t(be||(be=P(["\n ."," {\n &:hover,\n &:active {\n color: currentColor;\n }\n }\n"])),qn),Me=(v(ye={},jn.XSmall,t(ue||(ue=P(["\n height: 14px;\n width: 14px;\n "])))),v(ye,jn.Small,t(pe||(pe=P(["\n height: 16px;\n width: 16px;\n "])))),v(ye,jn.Default,t(he||(he=P(["\n height: 16px;\n width: 16px;\n "])))),v(ye,jn.Large,t(fe||(fe=P(["\n height: 20px;\n width: 20px;\n "])))),ye),Ee=(v(me={},p.Light,t(xe||(xe=P(["\n color: ",";\n "])),y.gray.light1)),v(me,p.Dark,t(ke||(ke=P(["\n color: ",";\n "])),y.gray.dark1)),me),Le=t(we||(we=P(["\n color: ",";\n"])),y.gray.dark2);function qe(e){var r,o=e.glyph,a=e.variant,t=e.size,i=e.darkMode,c=e.disabled,d=e.isIconOnlyButton,g=e.className,s=!d&&{"aria-hidden":!0,role:"presentation"},b=f(i),u=d?Se:Be;return n.cloneElement(o,w({className:l(u[b][a],Me[t],(r={},v(r,Ne,d),v(r,Ee[b],c),v(r,Le,c&&d&&i),r),g)},s))}qe.displayName="ButtonIcon";var Fe=function(o){var a,c=o.rightGlyph,d=o.leftGlyph,g=o.darkMode,s=o.disabled,b=void 0!==s&&s,p=o.variant,h=void 0===p?Pn.Default:p,f=o.size,y=void 0===f?jn.Default:f,x=o.children,k=i(g),m=k.darkMode,w=k.theme,D=e(null);r((function(){var n,e=Pe[w][h];return null==D.current||b||(n=u(D.current,{backgroundColor:e})),n}),[D,h,m,b,w]);var j=null!==(a=(d||c)&&!x)&&void 0!==a&&a,z={variant:h,size:y,darkMode:m,disabled:b,isIconOnlyButton:j};return n.createElement(n.Fragment,null,n.createElement("div",{className:l(je),ref:D}),n.createElement("div",{className:l(ze,Ge[y],v({},t(ve||(ve=P(["\n justify-content: space-between;\n "]))),!!c&&m))},d&&n.createElement(qe,O({glyph:d,className:t(Oe||(Oe=P(["\n justify-self: right;\n "])))},z)),x,c&&n.createElement(qe,O({glyph:c,className:t(De||(De=P(["\n justify-self: left;\n "])))},z))))},Ce=["variant","size","darkMode","baseFontSize","disabled","onClick","leftGlyph","rightGlyph","children","className","as","type"],Ie=n.forwardRef((function(e,r){var o=e.variant,t=void 0===o?Pn.Default:o,d=e.size,g=void 0===d?jn.Default:d,s=e.darkMode,u=e.baseFontSize,p=void 0===u?b.Body1:u,h=e.disabled,y=void 0!==h&&h,x=e.onClick,k=e.leftGlyph,m=e.rightGlyph,O=e.children,P=e.className,j=e.as,z=e.type,G=D(e,Ce),B=c().usingKeyboard,S=i(s).darkMode,N=function(n){var e=n.variant,r=n.size,o=n.darkMode,a=n.baseFontSize,t=n.disabled,i=n.usingKeyboard,c=f(o),d=Sn[c][e],g=Nn[c][e];return l(Bn,d,Ln[a],En[r],v({},g,i&&!t),v({},Mn[c],t))}({variant:t,size:g,darkMode:S,baseFontSize:p,disabled:y,usingKeyboard:B}),M=!(!G.href&&"a"!==j||y),E=w(w({type:M?void 0:z||"button",className:l(qn,N,P),ref:r,as:j||(M?"a":"button")},"string"!=typeof G.href&&{disabled:y}),{},{"aria-disabled":y,onClick:y?void 0:x},G),L={rightGlyph:m,leftGlyph:k,darkMode:S,disabled:y,variant:t,size:g};return n.createElement(a,E,n.createElement(Fe,L,O))}));Ie.displayName="Button",Ie.propTypes={variant:o.oneOf(Object.values(Pn)),baseFontSize:o.oneOf(Object.values(b)),size:o.oneOf(Object.values(jn)),darkMode:o.bool,disabled:o.bool,leftGlyph:o.element,rightGlyph:o.element,href:o.string};export{zn as FontSize,jn as Size,Pn as Variant,Ie as default}; | ||
import n,{useRef as e,useEffect as r}from"react";import o from"prop-types";import a from"@leafygreen-ui/box";import{css as t,cx as l}from"@leafygreen-ui/emotion";import{useDarkMode as i,useUsingKeyboardContext as c}from"@leafygreen-ui/leafygreen-provider";import{transitionDuration as d,fontFamilies as g,typeScales as s,BaseFontSize as b}from"@leafygreen-ui/tokens";import{registerRipple as u}from"@leafygreen-ui/ripple";import{createUniqueClassName as p,Theme as h,getTheme as f}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import{transparentize as x,mix as k}from"polished";function m(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,o)}return r}function w(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?m(Object(r),!0).forEach((function(e){v(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function v(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function O(){return O=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n},O.apply(this,arguments)}function D(n,e){if(null==n)return{};var r,o,a=function(n,e){if(null==n)return{};var r,o,a={},t=Object.keys(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||(a[r]=n[r]);return a}(n,e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);for(o=0;o<t.length;o++)r=t[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(a[r]=n[r])}return a}function P(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var j,z,G,B,S,N,M,E,L,q,F,C,I,X,K,H,R,T,Y,A,J,Q,U,V,W,Z,$,_,nn,en,rn,on,an,tn,ln,cn,dn,gn,sn,bn,un,pn,hn,fn,yn,xn,kn,mn,wn,vn,On=p("button"),Dn={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},Pn={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},jn={Body1:13,Body2:16},zn=(v(K={},h.Light,(v(M={},Dn.Default,t(j||(j=P(["\n color: ",";\n "])),y.gray.base)),v(M,Dn.Primary,t(z||(z=P(["\n color: ",";\n "])),y.green.light2)),v(M,Dn.PrimaryOutline,t(G||(G=P(["\n color: ",";\n "])),y.green.dark2)),v(M,Dn.Danger,t(B||(B=P(["\n color: ",";\n "])),y.red.light3)),v(M,Dn.DangerOutline,t(S||(S=P(["\n color: ",";\n "])),y.red.light1)),v(M,Dn.BaseGreen,t(N||(N=P(["\n color: ",";\n "])),y.green.dark2)),M)),v(K,h.Dark,(v(X={},Dn.Default,t(E||(E=P(["\n color: ",";\n "])),y.gray.light2)),v(X,Dn.Primary,t(L||(L=P(["\n color: ",";\n "])),y.green.light2)),v(X,Dn.PrimaryOutline,t(q||(q=P(["\n color: ",";\n "])),y.green.base)),v(X,Dn.Danger,t(F||(F=P(["\n color: ",";\n "])),y.red.light2)),v(X,Dn.DangerOutline,t(C||(C=P(["\n color: ",";\n "])),y.red.light1)),v(X,Dn.BaseGreen,t(I||(I=P(["\n color: ",";\n "])),y.green.dark2)),X)),K),Gn=(v(en={},h.Light,(v(Q={},Dn.Default,t(H||(H=P(["\n color: ",";\n "])),y.black)),v(Q,Dn.Primary,t(R||(R=P(["\n color: ",";\n "])),y.white)),v(Q,Dn.PrimaryOutline,t(T||(T=P(["\n color: ",";\n "])),y.green.dark2)),v(Q,Dn.Danger,t(Y||(Y=P(["\n color: ",";\n "])),y.white)),v(Q,Dn.DangerOutline,t(A||(A=P(["\n color: ",";\n "])),y.red.base)),v(Q,Dn.BaseGreen,t(J||(J=P(["\n color: ",";\n "])),y.green.dark3)),Q)),v(en,h.Dark,(v(nn={},Dn.Default,t(U||(U=P(["\n color: ",";\n "])),y.white)),v(nn,Dn.Primary,t(V||(V=P(["\n color: ",";\n "])),y.white)),v(nn,Dn.PrimaryOutline,t(W||(W=P(["\n color: ",";\n "])),y.green.base)),v(nn,Dn.Danger,t(Z||(Z=P(["\n color: ",";\n "])),y.white)),v(nn,Dn.DangerOutline,t($||($=P(["\n color: ",";\n "])),y.red.light1)),v(nn,Dn.BaseGreen,t(_||(_=P(["\n color: ",";\n "])),y.green.dark3)),nn)),en),Bn=t(rn||(rn=P(["\n ."," {\n &:hover,\n &:active {\n color: currentColor;\n }\n }\n"])),On),Sn=(v(cn={},Pn.XSmall,t(on||(on=P(["\n height: 14px;\n width: 14px;\n "])))),v(cn,Pn.Small,t(an||(an=P(["\n height: 16px;\n width: 16px;\n "])))),v(cn,Pn.Default,t(tn||(tn=P(["\n height: 16px;\n width: 16px;\n "])))),v(cn,Pn.Large,t(ln||(ln=P(["\n height: 20px;\n width: 20px;\n "])))),cn),Nn=(v(sn={},h.Light,t(dn||(dn=P(["\n color: ",";\n "])),y.gray.light1)),v(sn,h.Dark,t(gn||(gn=P(["\n color: ",";\n "])),y.gray.dark1)),sn),Mn=t(bn||(bn=P(["\n color: ",";\n"])),y.gray.dark2);function En(e){var r,o=e.glyph,a=e.variant,t=e.size,i=e.darkMode,c=e.disabled,d=e.isIconOnlyButton,g=e.className,s=!d&&{"aria-hidden":!0,role:"presentation"},b=f(i),u=d?Gn:zn;return n.cloneElement(o,w({className:l(u[b][a],Sn[t],(r={},v(r,Bn,d),v(r,Nn[b],c),v(r,Mn,c&&d&&i),r),g)},s))}En.displayName="ButtonIcon";var Ln,qn,Fn,Cn,In,Xn,Kn,Hn,Rn,Tn,Yn,An,Jn,Qn,Un,Vn,Wn,Zn,$n,_n,ne,ee,re,oe,ae,te,le,ie,ce,de,ge,se,be,ue,pe,he,fe,ye,xe,ke,me,we,ve,Oe,De,Pe=(v(hn={},h.Light,(v(un={},Dn.Default,y.gray.light2),v(un,Dn.Primary,y.green.dark1),v(un,Dn.PrimaryOutline,x(.76,y.green.base)),v(un,Dn.Danger,y.red.light1),v(un,Dn.DangerOutline,x(.76,y.red.base)),v(un,Dn.BaseGreen,y.green.light1),un)),v(hn,h.Dark,(v(pn={},Dn.Default,y.gray.base),v(pn,Dn.Primary,y.green.dark1),v(pn,Dn.PrimaryOutline,x(.76,y.green.base)),v(pn,Dn.Danger,y.red.dark2),v(pn,Dn.DangerOutline,x(.76,y.red.light1)),v(pn,Dn.BaseGreen,y.green.dark1),pn)),hn),je=t(fn||(fn=P(["\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 5px;\n"]))),ze=t(yn||(yn=P(["\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n pointer-events: none;\n position: relative;\n z-index: 0;\n"]))),Ge=(v(vn={},Pn.XSmall,t(xn||(xn=P(["\n padding: 0 7px; // 8px - 1px border\n gap: 6px;\n "])))),v(vn,Pn.Small,t(kn||(kn=P(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),v(vn,Pn.Default,t(mn||(mn=P(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),v(vn,Pn.Large,t(wn||(wn=P(["\n padding: 0 15px; // 16px - 1px border\n gap: 8px;\n "])))),vn),Be=function(o){var a,c=o.rightGlyph,d=o.leftGlyph,g=o.darkMode,s=o.disabled,b=void 0!==s&&s,p=o.variant,h=void 0===p?Dn.Default:p,f=o.size,y=void 0===f?Pn.Default:f,x=o.children,k=i(g),m=k.darkMode,w=k.theme,D=e(null);r((function(){var n,e=Pe[w][h];return null==D.current||b||(n=u(D.current,{backgroundColor:e})),n}),[D,h,m,b,w]);var j=null!==(a=(d||c)&&!x)&&void 0!==a&&a,z={variant:h,size:y,darkMode:m,disabled:b,isIconOnlyButton:j};return n.createElement(n.Fragment,null,n.createElement("div",{className:l(je),ref:D}),n.createElement("div",{className:l(ze,Ge[y],v({},t(Ln||(Ln=P(["\n justify-content: space-between;\n "]))),!!c&&m))},d&&n.createElement(En,O({glyph:d,className:t(qn||(qn=P(["\n justify-self: right;\n "])))},z)),x,c&&n.createElement(En,O({glyph:c,className:t(Fn||(Fn=P(["\n justify-self: left;\n "])))},z))))},Se=function(n){return"\n 0 0 0 2px ".concat(n,", \n 0 0 0 4px ").concat(y.blue.light1,";\n")},Ne=t(Cn||(Cn=P(["\n // unset browser default\n appearance: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n border: 1px solid transparent;\n display: inline-flex;\n align-items: stretch;\n transition: all ","ms ease-in-out;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n font-family: ",";\n border-radius: 6px;\n\n &:focus {\n outline: none;\n }\n\n &[disabled],\n &:disabled {\n pointer-events: none;\n }\n\n &:active,\n &:focus,\n &:hover {\n text-decoration: none;\n }\n"])),d.default,g.default),Me=(v($n={},h.Light,(v(Yn={},Dn.Default,t(In||(In=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.gray.light3,y.gray.base,y.black,y.black,y.white,y.gray.light2)),v(Yn,Dn.Primary,t(Xn||(Xn=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Not quite dark3\n border-color: #00593f; // Not quite dark3\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.green.dark2,y.green.dark2,y.white,y.white,y.green.light2)),v(Yn,Dn.PrimaryOutline,t(Kn||(Kn=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.dark2,y.green.dark2,y.green.dark2,x(.96,y.green.base),y.green.light2)),v(Yn,Dn.Danger,t(Hn||(Hn=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #c82222; // not quite dark1\n border-color: #c82222; // not quite dark1\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.red.base,y.red.base,y.white,y.white,y.red.light3)),v(Yn,Dn.DangerOutline,t(Rn||(Rn=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.red.light1,y.red.base,y.red.dark2,x(.96,y.red.base),y.red.base,y.red.light3)),v(Yn,Dn.BaseGreen,t(Tn||(Tn=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.dark2,y.green.dark3,y.green.dark3,k(.96,y.green.base,y.green.dark3),y.green.light2)),Yn)),v($n,h.Dark,(v(Zn={},Dn.Default,t(An||(An=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n background-color: ",";\n border-color: ",";\n color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.gray.dark2,y.gray.base,y.white,y.white,y.gray.dark1,y.gray.base,y.white,y.gray.dark2)),v(Zn,Dn.Primary,t(Jn||(Jn=P(["\n background-color: ",";\n border: 1px solid ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Off palette\n box-shadow: 0 0 0 3px ",";\n }\n "])),y.green.dark2,y.green.base,y.white,y.white,y.white,y.green.dark3)),v(Zn,Dn.PrimaryOutline,t(Qn||(Qn=P(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.base,y.green.base,y.green.base,x(.96,y.green.base),y.green.base,y.green.dark3)),v(Zn,Dn.Danger,t(Un||(Un=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n border-color: ",";\n color: ",";\n background-color: #c82222; // Off palette\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),y.red.base,y.red.light1,y.white,y.white,y.red.light1,y.white,y.yellow.dark3)),v(Zn,Dn.DangerOutline,t(Vn||(Vn=P(["\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),y.red.light1,y.red.light1,y.red.light1,y.red.light1,x(.96,y.red.base),y.yellow.dark3)),v(Zn,Dn.BaseGreen,t(Wn||(Wn=P(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),y.green.base,y.green.dark2,y.green.dark3,y.green.dark3,k(.96,y.green.base,y.green.light3),y.green.dark2,y.green.dark3)),Zn)),$n),Ee=(v(ue={},h.Light,(v(te={},Dn.Default,t(_n||(_n=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.white,Se(y.white))),v(te,Dn.Primary,t(ne||(ne=P(["\n &:focus {\n color: ",";\n background-color: #00593f; // Not quite dark3\n box-shadow: ",";\n }\n "])),y.white,Se(y.white))),v(te,Dn.PrimaryOutline,t(ee||(ee=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.green.base),Se(y.white))),v(te,Dn.Danger,t(re||(re=P(["\n &:focus {\n color: ",";\n background-color: #c82222; // not quite dark1\n box-shadow: ",";\n }\n "])),y.white,Se(y.white))),v(te,Dn.DangerOutline,t(oe||(oe=P(["\n &:focus {\n color: ",";\n box-shadow: ",";\n }\n "])),y.red.dark2,Se(y.white))),v(te,Dn.BaseGreen,t(ae||(ae=P(["\n &:focus {\n box-shadow: ",";\n }\n "])),Se(y.white))),te)),v(ue,h.Dark,(v(be={},Dn.Default,t(le||(le=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.gray.dark1,Se(y.black))),v(be,Dn.Primary,t(ie||(ie=P(["\n &:focus {\n background-color: #00593f; // Off palette\n box-shadow: ",";\n }\n "])),Se(y.black))),v(be,Dn.PrimaryOutline,t(ce||(ce=P(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.green.base),y.green.base,Se(y.black))),v(be,Dn.Danger,t(de||(de=P(["\n &:focus {\n background-color: #c82222; // Off palette\n box-shadow: ",";\n }\n "])),Se(y.black))),v(be,Dn.DangerOutline,t(ge||(ge=P(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),x(.96,y.red.base),y.red.light1,Se(y.black))),v(be,Dn.BaseGreen,t(se||(se=P(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),y.green.base,Se(y.black))),be)),ue),Le=(v(fe={},h.Light,t(pe||(pe=P(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),y.gray.light2,y.gray.light1,y.gray.base,Se(y.white))),v(fe,h.Dark,t(he||(he=P(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),y.gray.dark3,y.gray.dark1,y.gray.dark1,Se(y.black))),fe),qe=(v(we={},Pn.XSmall,t(ye||(ye=P(["\n height: 22px;\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1em;\n font-weight: bold;\n letter-spacing: 0.4px;\n "])))),v(we,Pn.Small,t(xe||(xe=P(["\n height: 28px;\n "])))),v(we,Pn.Default,t(ke||(ke=P(["\n height: 36px;\n "])))),v(we,Pn.Large,t(me||(me=P(["\n height: 48px;\n font-size: 18px;\n line-height: 24px;\n "])))),we),Fe=(v(De={},b.Body1,t(ve||(ve=P(["\n font-size: ","px;\n line-height: ","px;\n font-weight: 500; // Medium\n "])),s.body1.fontSize,s.body1.lineHeight)),v(De,b.Body2,t(Oe||(Oe=P(["\n font-size: ","px;\n line-height: ","px;\n // Pixel pushing for optical alignment purposes\n transform: translateY(1px);\n font-weight: 500; // Medium\n "])),s.body2.fontSize,s.body2.lineHeight)),De);var Ce=["variant","size","darkMode","baseFontSize","disabled","onClick","leftGlyph","rightGlyph","children","className","as","type"],Ie=n.forwardRef((function(e,r){var o=e.variant,t=void 0===o?Dn.Default:o,d=e.size,g=void 0===d?Pn.Default:d,s=e.darkMode,u=e.baseFontSize,p=void 0===u?b.Body1:u,h=e.disabled,y=void 0!==h&&h,x=e.onClick,k=e.leftGlyph,m=e.rightGlyph,O=e.children,P=e.className,j=e.as,z=e.type,G=D(e,Ce),B=c().usingKeyboard,S=i(s).darkMode,N=function(n){var e=n.variant,r=n.size,o=n.darkMode,a=n.baseFontSize,t=n.disabled,i=n.usingKeyboard,c=f(o),d=Me[c][e],g=Ee[c][e];return l(Ne,d,Fe[a],qe[r],v({},g,i&&!t),v({},Le[c],t))}({variant:t,size:g,darkMode:S,baseFontSize:p,disabled:y,usingKeyboard:B}),M=!(!G.href&&"a"!==j||y),E=w(w({type:M?void 0:z||"button",className:l(On,N,P),ref:r,as:j||(M?"a":"button")},"string"!=typeof G.href&&{disabled:y}),{},{"aria-disabled":y,onClick:y?void 0:x},G),L={rightGlyph:m,leftGlyph:k,darkMode:S,disabled:y,variant:t,size:g};return n.createElement(a,E,n.createElement(Be,L,O))}));Ie.displayName="Button",Ie.propTypes={variant:o.oneOf(Object.values(Dn)),baseFontSize:o.oneOf(Object.values(b)),size:o.oneOf(Object.values(Pn)),darkMode:o.bool,disabled:o.bool,leftGlyph:o.element,rightGlyph:o.element,href:o.string};export{jn as FontSize,Pn as Size,Dn as Variant,Ie as default}; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/box"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/ripple"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("polished")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/box","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/ripple","@leafygreen-ui/lib","@leafygreen-ui/palette","polished"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/button"]={},e.React,e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/ripple"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.polished)}(this,(function(e,n,t,r,a,o,l,i,s,c,p){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=d(n),u=d(t),b=d(r);function h(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function f(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?h(Object(t),!0).forEach((function(n){y(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):h(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function y(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(){return x=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}function k(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,w,O,D,z,P,j,S,B,G,T,q,M,N,E,F,L,C,I,K,R,X,H,U,_,V,Y,A,J,Q,W,Z,$,ee,ne,te,re,ae,oe,le,ie,se,ce,pe,de,ge,ue,be,he,fe,ye,xe,ke={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},me={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},ve=function(e){return"\n 0 0 0 2px ".concat(e,", \n 0 0 0 4px ").concat(c.palette.blue.light1,";\n")},we=a.css(v||(v=m(["\n // unset browser default\n appearance: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n border: 1px solid transparent;\n display: inline-flex;\n align-items: stretch;\n transition: all ","ms ease-in-out;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n font-family: ",";\n border-radius: 6px;\n\n &:focus {\n outline: none;\n }\n\n &[disabled],\n &:disabled {\n pointer-events: none;\n }\n\n &:active,\n &:focus,\n &:hover {\n text-decoration: none;\n }\n"])),l.transitionDuration.default,l.fontFamilies.default),Oe=(y(F={},s.Theme.Light,(y(S={},ke.Default,a.css(w||(w=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.gray.light3,c.palette.gray.base,c.palette.black,c.palette.black,c.palette.white,c.palette.gray.light2)),y(S,ke.Primary,a.css(O||(O=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Not quite dark3\n border-color: #00593f; // Not quite dark3\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.dark2,c.palette.white,c.palette.white,c.palette.green.light2)),y(S,ke.PrimaryOutline,a.css(D||(D=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.dark2,c.palette.green.dark2,p.transparentize(.96,c.palette.green.base),c.palette.green.light2)),y(S,ke.Danger,a.css(z||(z=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #c82222; // not quite dark1\n border-color: #c82222; // not quite dark1\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.red.base,c.palette.red.base,c.palette.white,c.palette.white,c.palette.red.light3)),y(S,ke.DangerOutline,a.css(P||(P=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.red.light1,c.palette.red.base,c.palette.red.dark2,p.transparentize(.96,c.palette.red.base),c.palette.red.base,c.palette.red.light3)),y(S,ke.BaseGreen,a.css(j||(j=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.dark2,c.palette.green.dark3,c.palette.green.dark3,p.mix(.96,c.palette.green.base,c.palette.green.dark3),c.palette.green.light2)),S)),y(F,s.Theme.Dark,(y(E={},ke.Default,a.css(B||(B=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n background-color: ",";\n border-color: ",";\n color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.gray.dark2,c.palette.gray.base,c.palette.white,c.palette.white,c.palette.gray.dark1,c.palette.gray.base,c.palette.white,c.palette.gray.dark2)),y(E,ke.Primary,a.css(G||(G=m(["\n background-color: ",";\n border: 1px solid ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Off palette\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.base,c.palette.white,c.palette.white,c.palette.white,c.palette.green.dark3)),y(E,ke.PrimaryOutline,a.css(T||(T=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.base,c.palette.green.base,c.palette.green.base,p.transparentize(.96,c.palette.green.base),c.palette.green.base,c.palette.green.dark3)),y(E,ke.Danger,a.css(q||(q=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n border-color: ",";\n color: ",";\n background-color: #c82222; // Off palette\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),c.palette.red.base,c.palette.red.light1,c.palette.white,c.palette.white,c.palette.red.light1,c.palette.white,c.palette.yellow.dark3)),y(E,ke.DangerOutline,a.css(M||(M=m(["\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),c.palette.red.light1,c.palette.red.light1,c.palette.red.light1,c.palette.red.light1,p.transparentize(.96,c.palette.red.base),c.palette.yellow.dark3)),y(E,ke.BaseGreen,a.css(N||(N=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.dark2,c.palette.green.dark3,c.palette.green.dark3,p.mix(.96,c.palette.green.base,c.palette.green.light3),c.palette.green.dark2,c.palette.green.dark3)),E)),F),De=(y(W={},s.Theme.Light,(y(H={},ke.Default,a.css(L||(L=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.white,ve(c.palette.white))),y(H,ke.Primary,a.css(C||(C=m(["\n &:focus {\n color: ",";\n background-color: #00593f; // Not quite dark3\n box-shadow: ",";\n }\n "])),c.palette.white,ve(c.palette.white))),y(H,ke.PrimaryOutline,a.css(I||(I=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.green.base),ve(c.palette.white))),y(H,ke.Danger,a.css(K||(K=m(["\n &:focus {\n color: ",";\n background-color: #c82222; // not quite dark1\n box-shadow: ",";\n }\n "])),c.palette.white,ve(c.palette.white))),y(H,ke.DangerOutline,a.css(R||(R=m(["\n &:focus {\n color: ",";\n box-shadow: ",";\n }\n "])),c.palette.red.dark2,ve(c.palette.white))),y(H,ke.BaseGreen,a.css(X||(X=m(["\n &:focus {\n box-shadow: ",";\n }\n "])),ve(c.palette.white))),H)),y(W,s.Theme.Dark,(y(Q={},ke.Default,a.css(U||(U=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.gray.dark1,ve(c.palette.black))),y(Q,ke.Primary,a.css(_||(_=m(["\n &:focus {\n background-color: #00593f; // Off palette\n box-shadow: ",";\n }\n "])),ve(c.palette.black))),y(Q,ke.PrimaryOutline,a.css(V||(V=m(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.green.base),c.palette.green.base,ve(c.palette.black))),y(Q,ke.Danger,a.css(Y||(Y=m(["\n &:focus {\n background-color: #c82222; // Off palette\n box-shadow: ",";\n }\n "])),ve(c.palette.black))),y(Q,ke.DangerOutline,a.css(A||(A=m(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.red.base),c.palette.red.light1,ve(c.palette.black))),y(Q,ke.BaseGreen,a.css(J||(J=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.green.base,ve(c.palette.black))),Q)),W),ze=(y(ee={},s.Theme.Light,a.css(Z||(Z=m(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),c.palette.gray.light2,c.palette.gray.light1,c.palette.gray.base,ve(c.palette.white))),y(ee,s.Theme.Dark,a.css($||($=m(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),c.palette.gray.dark3,c.palette.gray.dark1,c.palette.gray.dark1,ve(c.palette.black))),ee),Pe=(y(oe={},me.XSmall,a.css(ne||(ne=m(["\n height: 22px;\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1em;\n font-weight: bold;\n letter-spacing: 0.4px;\n "])))),y(oe,me.Small,a.css(te||(te=m(["\n height: 28px;\n "])))),y(oe,me.Default,a.css(re||(re=m(["\n height: 36px;\n "])))),y(oe,me.Large,a.css(ae||(ae=m(["\n height: 48px;\n font-size: 18px;\n line-height: 24px;\n "])))),oe),je=(y(se={},l.BaseFontSize.Body1,a.css(le||(le=m(["\n font-size: ","px;\n line-height: ","px;\n font-weight: 500; // Medium\n "])),l.typeScales.body1.fontSize,l.typeScales.body1.lineHeight)),y(se,l.BaseFontSize.Body2,a.css(ie||(ie=m(["\n font-size: ","px;\n line-height: ","px;\n // Pixel pushing for optical alignment purposes\n transform: translateY(1px);\n font-weight: 500; // Medium\n "])),l.typeScales.body2.fontSize,l.typeScales.body2.lineHeight)),se),Se=s.createUniqueClassName("button");var Be,Ge,Te,qe,Me,Ne,Ee,Fe,Le,Ce,Ie,Ke,Re,Xe,He,Ue,_e,Ve,Ye,Ae,Je,Qe,We,Ze,$e,en,nn,tn,rn,an,on,ln,sn,cn,pn,dn,gn,un,bn,hn,fn,yn,xn,kn=.76,mn=(y(de={},s.Theme.Light,(y(ce={},ke.Default,c.palette.gray.light2),y(ce,ke.Primary,c.palette.green.dark1),y(ce,ke.PrimaryOutline,p.transparentize(kn,c.palette.green.base)),y(ce,ke.Danger,c.palette.red.light1),y(ce,ke.DangerOutline,p.transparentize(kn,c.palette.red.base)),y(ce,ke.BaseGreen,c.palette.green.light1),ce)),y(de,s.Theme.Dark,(y(pe={},ke.Default,c.palette.gray.base),y(pe,ke.Primary,c.palette.green.dark1),y(pe,ke.PrimaryOutline,p.transparentize(kn,c.palette.green.base)),y(pe,ke.Danger,c.palette.red.dark2),y(pe,ke.DangerOutline,p.transparentize(kn,c.palette.red.light1)),y(pe,ke.BaseGreen,c.palette.green.dark1),pe)),de),vn=a.css(ge||(ge=m(["\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 5px;\n"]))),wn=a.css(ue||(ue=m(["\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n pointer-events: none;\n position: relative;\n z-index: 0;\n"]))),On=(y(xe={},me.XSmall,a.css(be||(be=m(["\n padding: 0 7px; // 8px - 1px border\n gap: 6px;\n "])))),y(xe,me.Small,a.css(he||(he=m(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),y(xe,me.Default,a.css(fe||(fe=m(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),y(xe,me.Large,a.css(ye||(ye=m(["\n padding: 0 15px; // 16px - 1px border\n gap: 8px;\n "])))),xe),Dn=(y(He={},s.Theme.Light,(y(Ee={},ke.Default,a.css(Be||(Be=m(["\n color: ",";\n "])),c.palette.gray.base)),y(Ee,ke.Primary,a.css(Ge||(Ge=m(["\n color: ",";\n "])),c.palette.green.light2)),y(Ee,ke.PrimaryOutline,a.css(Te||(Te=m(["\n color: ",";\n "])),c.palette.green.dark2)),y(Ee,ke.Danger,a.css(qe||(qe=m(["\n color: ",";\n "])),c.palette.red.light3)),y(Ee,ke.DangerOutline,a.css(Me||(Me=m(["\n color: ",";\n "])),c.palette.red.light1)),y(Ee,ke.BaseGreen,a.css(Ne||(Ne=m(["\n color: ",";\n "])),c.palette.green.dark2)),Ee)),y(He,s.Theme.Dark,(y(Xe={},ke.Default,a.css(Fe||(Fe=m(["\n color: ",";\n "])),c.palette.gray.light2)),y(Xe,ke.Primary,a.css(Le||(Le=m(["\n color: ",";\n "])),c.palette.green.light2)),y(Xe,ke.PrimaryOutline,a.css(Ce||(Ce=m(["\n color: ",";\n "])),c.palette.green.base)),y(Xe,ke.Danger,a.css(Ie||(Ie=m(["\n color: ",";\n "])),c.palette.red.light2)),y(Xe,ke.DangerOutline,a.css(Ke||(Ke=m(["\n color: ",";\n "])),c.palette.red.light1)),y(Xe,ke.BaseGreen,a.css(Re||(Re=m(["\n color: ",";\n "])),c.palette.green.dark2)),Xe)),He),zn=(y(an={},s.Theme.Light,(y(Qe={},ke.Default,a.css(Ue||(Ue=m(["\n color: ",";\n "])),c.palette.black)),y(Qe,ke.Primary,a.css(_e||(_e=m(["\n color: ",";\n "])),c.palette.white)),y(Qe,ke.PrimaryOutline,a.css(Ve||(Ve=m(["\n color: ",";\n "])),c.palette.green.dark2)),y(Qe,ke.Danger,a.css(Ye||(Ye=m(["\n color: ",";\n "])),c.palette.white)),y(Qe,ke.DangerOutline,a.css(Ae||(Ae=m(["\n color: ",";\n "])),c.palette.red.base)),y(Qe,ke.BaseGreen,a.css(Je||(Je=m(["\n color: ",";\n "])),c.palette.green.dark3)),Qe)),y(an,s.Theme.Dark,(y(rn={},ke.Default,a.css(We||(We=m(["\n color: ",";\n "])),c.palette.white)),y(rn,ke.Primary,a.css(Ze||(Ze=m(["\n color: ",";\n "])),c.palette.white)),y(rn,ke.PrimaryOutline,a.css($e||($e=m(["\n color: ",";\n "])),c.palette.green.base)),y(rn,ke.Danger,a.css(en||(en=m(["\n color: ",";\n "])),c.palette.white)),y(rn,ke.DangerOutline,a.css(nn||(nn=m(["\n color: ",";\n "])),c.palette.red.light1)),y(rn,ke.BaseGreen,a.css(tn||(tn=m(["\n color: ",";\n "])),c.palette.green.dark3)),rn)),an),Pn=a.css(on||(on=m(["\n ."," {\n &:hover,\n &:active {\n color: currentColor;\n }\n }\n"])),Se),jn=(y(dn={},me.XSmall,a.css(ln||(ln=m(["\n height: 14px;\n width: 14px;\n "])))),y(dn,me.Small,a.css(sn||(sn=m(["\n height: 16px;\n width: 16px;\n "])))),y(dn,me.Default,a.css(cn||(cn=m(["\n height: 16px;\n width: 16px;\n "])))),y(dn,me.Large,a.css(pn||(pn=m(["\n height: 20px;\n width: 20px;\n "])))),dn),Sn=(y(bn={},s.Theme.Light,a.css(gn||(gn=m(["\n color: ",";\n "])),c.palette.gray.light1)),y(bn,s.Theme.Dark,a.css(un||(un=m(["\n color: ",";\n "])),c.palette.gray.dark1)),bn),Bn=a.css(hn||(hn=m(["\n color: ",";\n"])),c.palette.gray.dark2);function Gn(e){var n,t=e.glyph,r=e.variant,o=e.size,l=e.darkMode,i=e.disabled,c=e.isIconOnlyButton,p=e.className,d=!c&&{"aria-hidden":!0,role:"presentation"},u=s.getTheme(l),b=c?zn:Dn;return g.default.cloneElement(t,f({className:a.cx(b[u][r],jn[o],(n={},y(n,Pn,c),y(n,Sn[u],i),y(n,Bn,i&&c&&l),n),p)},d))}Gn.displayName="ButtonIcon";var Tn=function(e){var t,r=e.rightGlyph,l=e.leftGlyph,s=e.darkMode,c=e.disabled,p=void 0!==c&&c,d=e.variant,u=void 0===d?ke.Default:d,b=e.size,h=void 0===b?me.Default:b,f=e.children,k=o.useDarkMode(s),v=k.darkMode,w=k.theme,O=n.useRef(null);n.useEffect((function(){var e,n=mn[w][u];return null==O.current||p||(e=i.registerRipple(O.current,{backgroundColor:n})),e}),[O,u,v,p,w]);var D=null!==(t=(l||r)&&!f)&&void 0!==t&&t,z={variant:u,size:h,darkMode:v,disabled:p,isIconOnlyButton:D};return g.default.createElement(g.default.Fragment,null,g.default.createElement("div",{className:a.cx(vn),ref:O}),g.default.createElement("div",{className:a.cx(wn,On[h],y({},a.css(fn||(fn=m(["\n justify-content: space-between;\n "]))),!!r&&v))},l&&g.default.createElement(Gn,x({glyph:l,className:a.css(yn||(yn=m(["\n justify-self: right;\n "])))},z)),f,r&&g.default.createElement(Gn,x({glyph:r,className:a.css(xn||(xn=m(["\n justify-self: left;\n "])))},z))))},qn=["variant","size","darkMode","baseFontSize","disabled","onClick","leftGlyph","rightGlyph","children","className","as","type"],Mn=g.default.forwardRef((function(e,n){var t=e.variant,r=void 0===t?ke.Default:t,i=e.size,c=void 0===i?me.Default:i,p=e.darkMode,d=e.baseFontSize,u=void 0===d?l.BaseFontSize.Body1:d,h=e.disabled,x=void 0!==h&&h,m=e.onClick,v=e.leftGlyph,w=e.rightGlyph,O=e.children,D=e.className,z=e.as,P=e.type,j=k(e,qn),S=o.useUsingKeyboardContext().usingKeyboard,B=o.useDarkMode(p).darkMode,G=function(e){var n=e.variant,t=e.size,r=e.darkMode,o=e.baseFontSize,l=e.disabled,i=e.usingKeyboard,c=s.getTheme(r),p=Oe[c][n],d=De[c][n],g=Pe[t],u=je[o];return a.cx(we,p,u,g,y({},d,i&&!l),y({},ze[c],l))}({variant:r,size:c,darkMode:B,baseFontSize:u,disabled:x,usingKeyboard:S}),T=!(!j.href&&"a"!==z||x),q=f(f({type:T?void 0:P||"button",className:a.cx(Se,G,D),ref:n,as:z||(T?"a":"button")},"string"!=typeof j.href&&{disabled:x}),{},{"aria-disabled":x,onClick:x?void 0:m},j),M={rightGlyph:w,leftGlyph:v,darkMode:B,disabled:x,variant:r,size:c};return g.default.createElement(b.default,q,g.default.createElement(Tn,M,O))}));Mn.displayName="Button",Mn.propTypes={variant:u.default.oneOf(Object.values(ke)),baseFontSize:u.default.oneOf(Object.values(l.BaseFontSize)),size:u.default.oneOf(Object.values(me)),darkMode:u.default.bool,disabled:u.default.bool,leftGlyph:u.default.element,rightGlyph:u.default.element,href:u.default.string},e.FontSize={Body1:13,Body2:16},e.Size=me,e.Variant=ke,e.default=Mn,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/box"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/ripple"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("polished")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/box","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/ripple","@leafygreen-ui/lib","@leafygreen-ui/palette","polished"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/button"]={},e.React,e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/ripple"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.polished)}(this,(function(e,n,t,r,a,o,l,i,s,c,p){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=d(n),u=d(t),b=d(r);function h(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function f(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?h(Object(t),!0).forEach((function(n){y(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):h(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function y(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(){return x=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}function k(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var v,w,O,D,z,P,j,S,B,G,T,q,M,N,E,F,L,C,I,K,R,X,H,U,_,V,Y,A,J,Q,W,Z,$,ee,ne,te,re,ae,oe,le,ie,se,ce,pe,de,ge,ue,be,he,fe,ye=s.createUniqueClassName("button"),xe={Default:"default",Primary:"primary",PrimaryOutline:"primaryOutline",Danger:"danger",DangerOutline:"dangerOutline",BaseGreen:"baseGreen"},ke={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},me=(y(E={},s.Theme.Light,(y(j={},xe.Default,a.css(v||(v=m(["\n color: ",";\n "])),c.palette.gray.base)),y(j,xe.Primary,a.css(w||(w=m(["\n color: ",";\n "])),c.palette.green.light2)),y(j,xe.PrimaryOutline,a.css(O||(O=m(["\n color: ",";\n "])),c.palette.green.dark2)),y(j,xe.Danger,a.css(D||(D=m(["\n color: ",";\n "])),c.palette.red.light3)),y(j,xe.DangerOutline,a.css(z||(z=m(["\n color: ",";\n "])),c.palette.red.light1)),y(j,xe.BaseGreen,a.css(P||(P=m(["\n color: ",";\n "])),c.palette.green.dark2)),j)),y(E,s.Theme.Dark,(y(N={},xe.Default,a.css(S||(S=m(["\n color: ",";\n "])),c.palette.gray.light2)),y(N,xe.Primary,a.css(B||(B=m(["\n color: ",";\n "])),c.palette.green.light2)),y(N,xe.PrimaryOutline,a.css(G||(G=m(["\n color: ",";\n "])),c.palette.green.base)),y(N,xe.Danger,a.css(T||(T=m(["\n color: ",";\n "])),c.palette.red.light2)),y(N,xe.DangerOutline,a.css(q||(q=m(["\n color: ",";\n "])),c.palette.red.light1)),y(N,xe.BaseGreen,a.css(M||(M=m(["\n color: ",";\n "])),c.palette.green.dark2)),N)),E),ve=(y(Q={},s.Theme.Light,(y(X={},xe.Default,a.css(F||(F=m(["\n color: ",";\n "])),c.palette.black)),y(X,xe.Primary,a.css(L||(L=m(["\n color: ",";\n "])),c.palette.white)),y(X,xe.PrimaryOutline,a.css(C||(C=m(["\n color: ",";\n "])),c.palette.green.dark2)),y(X,xe.Danger,a.css(I||(I=m(["\n color: ",";\n "])),c.palette.white)),y(X,xe.DangerOutline,a.css(K||(K=m(["\n color: ",";\n "])),c.palette.red.base)),y(X,xe.BaseGreen,a.css(R||(R=m(["\n color: ",";\n "])),c.palette.green.dark3)),X)),y(Q,s.Theme.Dark,(y(J={},xe.Default,a.css(H||(H=m(["\n color: ",";\n "])),c.palette.white)),y(J,xe.Primary,a.css(U||(U=m(["\n color: ",";\n "])),c.palette.white)),y(J,xe.PrimaryOutline,a.css(_||(_=m(["\n color: ",";\n "])),c.palette.green.base)),y(J,xe.Danger,a.css(V||(V=m(["\n color: ",";\n "])),c.palette.white)),y(J,xe.DangerOutline,a.css(Y||(Y=m(["\n color: ",";\n "])),c.palette.red.light1)),y(J,xe.BaseGreen,a.css(A||(A=m(["\n color: ",";\n "])),c.palette.green.dark3)),J)),Q),we=a.css(W||(W=m(["\n ."," {\n &:hover,\n &:active {\n color: currentColor;\n }\n }\n"])),ye),Oe=(y(te={},ke.XSmall,a.css(Z||(Z=m(["\n height: 14px;\n width: 14px;\n "])))),y(te,ke.Small,a.css($||($=m(["\n height: 16px;\n width: 16px;\n "])))),y(te,ke.Default,a.css(ee||(ee=m(["\n height: 16px;\n width: 16px;\n "])))),y(te,ke.Large,a.css(ne||(ne=m(["\n height: 20px;\n width: 20px;\n "])))),te),De=(y(oe={},s.Theme.Light,a.css(re||(re=m(["\n color: ",";\n "])),c.palette.gray.light1)),y(oe,s.Theme.Dark,a.css(ae||(ae=m(["\n color: ",";\n "])),c.palette.gray.dark1)),oe),ze=a.css(le||(le=m(["\n color: ",";\n"])),c.palette.gray.dark2);function Pe(e){var n,t=e.glyph,r=e.variant,o=e.size,l=e.darkMode,i=e.disabled,c=e.isIconOnlyButton,p=e.className,d=!c&&{"aria-hidden":!0,role:"presentation"},u=s.getTheme(l),b=c?ve:me;return g.default.cloneElement(t,f({className:a.cx(b[u][r],Oe[o],(n={},y(n,we,c),y(n,De[u],i),y(n,ze,i&&c&&l),n),p)},d))}Pe.displayName="ButtonIcon";var je,Se,Be,Ge,Te,qe,Me,Ne,Ee,Fe,Le,Ce,Ie,Ke,Re,Xe,He,Ue,_e,Ve,Ye,Ae,Je,Qe,We,Ze,$e,en,nn,tn,rn,an,on,ln,sn,cn,pn,dn,gn,un,bn,hn,fn,yn,xn,kn=.76,mn=(y(ce={},s.Theme.Light,(y(ie={},xe.Default,c.palette.gray.light2),y(ie,xe.Primary,c.palette.green.dark1),y(ie,xe.PrimaryOutline,p.transparentize(kn,c.palette.green.base)),y(ie,xe.Danger,c.palette.red.light1),y(ie,xe.DangerOutline,p.transparentize(kn,c.palette.red.base)),y(ie,xe.BaseGreen,c.palette.green.light1),ie)),y(ce,s.Theme.Dark,(y(se={},xe.Default,c.palette.gray.base),y(se,xe.Primary,c.palette.green.dark1),y(se,xe.PrimaryOutline,p.transparentize(kn,c.palette.green.base)),y(se,xe.Danger,c.palette.red.dark2),y(se,xe.DangerOutline,p.transparentize(kn,c.palette.red.light1)),y(se,xe.BaseGreen,c.palette.green.dark1),se)),ce),vn=a.css(pe||(pe=m(["\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 5px;\n"]))),wn=a.css(de||(de=m(["\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n pointer-events: none;\n position: relative;\n z-index: 0;\n"]))),On=(y(fe={},ke.XSmall,a.css(ge||(ge=m(["\n padding: 0 7px; // 8px - 1px border\n gap: 6px;\n "])))),y(fe,ke.Small,a.css(ue||(ue=m(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),y(fe,ke.Default,a.css(be||(be=m(["\n padding: 0 11px; // 12px - 1px border\n gap: 6px;\n "])))),y(fe,ke.Large,a.css(he||(he=m(["\n padding: 0 15px; // 16px - 1px border\n gap: 8px;\n "])))),fe),Dn=function(e){var t,r=e.rightGlyph,l=e.leftGlyph,s=e.darkMode,c=e.disabled,p=void 0!==c&&c,d=e.variant,u=void 0===d?xe.Default:d,b=e.size,h=void 0===b?ke.Default:b,f=e.children,k=o.useDarkMode(s),v=k.darkMode,w=k.theme,O=n.useRef(null);n.useEffect((function(){var e,n=mn[w][u];return null==O.current||p||(e=i.registerRipple(O.current,{backgroundColor:n})),e}),[O,u,v,p,w]);var D=null!==(t=(l||r)&&!f)&&void 0!==t&&t,z={variant:u,size:h,darkMode:v,disabled:p,isIconOnlyButton:D};return g.default.createElement(g.default.Fragment,null,g.default.createElement("div",{className:a.cx(vn),ref:O}),g.default.createElement("div",{className:a.cx(wn,On[h],y({},a.css(je||(je=m(["\n justify-content: space-between;\n "]))),!!r&&v))},l&&g.default.createElement(Pe,x({glyph:l,className:a.css(Se||(Se=m(["\n justify-self: right;\n "])))},z)),f,r&&g.default.createElement(Pe,x({glyph:r,className:a.css(Be||(Be=m(["\n justify-self: left;\n "])))},z))))},zn=function(e){return"\n 0 0 0 2px ".concat(e,", \n 0 0 0 4px ").concat(c.palette.blue.light1,";\n")},Pn=a.css(Ge||(Ge=m(["\n // unset browser default\n appearance: none;\n padding: 0;\n margin: 0;\n background-color: transparent;\n border: 1px solid transparent;\n display: inline-flex;\n align-items: stretch;\n transition: all ","ms ease-in-out;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n z-index: 0;\n font-family: ",";\n border-radius: 6px;\n\n &:focus {\n outline: none;\n }\n\n &[disabled],\n &:disabled {\n pointer-events: none;\n }\n\n &:active,\n &:focus,\n &:hover {\n text-decoration: none;\n }\n"])),l.transitionDuration.default,l.fontFamilies.default),jn=(y(_e={},s.Theme.Light,(y(Le={},xe.Default,a.css(Te||(Te=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.gray.light3,c.palette.gray.base,c.palette.black,c.palette.black,c.palette.white,c.palette.gray.light2)),y(Le,xe.Primary,a.css(qe||(qe=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Not quite dark3\n border-color: #00593f; // Not quite dark3\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.dark2,c.palette.white,c.palette.white,c.palette.green.light2)),y(Le,xe.PrimaryOutline,a.css(Me||(Me=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.dark2,c.palette.green.dark2,p.transparentize(.96,c.palette.green.base),c.palette.green.light2)),y(Le,xe.Danger,a.css(Ne||(Ne=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: #c82222; // not quite dark1\n border-color: #c82222; // not quite dark1\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.red.base,c.palette.red.base,c.palette.white,c.palette.white,c.palette.red.light3)),y(Le,xe.DangerOutline,a.css(Ee||(Ee=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.red.light1,c.palette.red.base,c.palette.red.dark2,p.transparentize(.96,c.palette.red.base),c.palette.red.base,c.palette.red.light3)),y(Le,xe.BaseGreen,a.css(Fe||(Fe=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.dark2,c.palette.green.dark3,c.palette.green.dark3,p.mix(.96,c.palette.green.base,c.palette.green.dark3),c.palette.green.light2)),Le)),y(_e,s.Theme.Dark,(y(Ue={},xe.Default,a.css(Ce||(Ce=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n background-color: ",";\n border-color: ",";\n color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.gray.dark2,c.palette.gray.base,c.palette.white,c.palette.white,c.palette.gray.dark1,c.palette.gray.base,c.palette.white,c.palette.gray.dark2)),y(Ue,xe.Primary,a.css(Ie||(Ie=m(["\n background-color: ",";\n border: 1px solid ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: #00593f; // Off palette\n box-shadow: 0 0 0 3px ",";\n }\n "])),c.palette.green.dark2,c.palette.green.base,c.palette.white,c.palette.white,c.palette.white,c.palette.green.dark3)),y(Ue,xe.PrimaryOutline,a.css(Ke||(Ke=m(["\n background-color: transparent;\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.base,c.palette.green.base,c.palette.green.base,p.transparentize(.96,c.palette.green.base),c.palette.green.base,c.palette.green.dark3)),y(Ue,xe.Danger,a.css(Re||(Re=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n border-color: ",";\n color: ",";\n background-color: #c82222; // Off palette\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),c.palette.red.base,c.palette.red.light1,c.palette.white,c.palette.white,c.palette.red.light1,c.palette.white,c.palette.yellow.dark3)),y(Ue,xe.DangerOutline,a.css(Xe||(Xe=m(["\n border-color: ",";\n color: ",";\n\n &:focus {\n color: ",";\n }\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n box-shadow: 0px 0px 0px 3px ","; // yes, yellow\n }\n "])),c.palette.red.light1,c.palette.red.light1,c.palette.red.light1,c.palette.red.light1,p.transparentize(.96,c.palette.red.base),c.palette.yellow.dark3)),y(Ue,xe.BaseGreen,a.css(He||(He=m(["\n background-color: ",";\n border-color: ",";\n color: ",";\n\n &:hover,\n &:active {\n color: ",";\n background-color: ",";\n border-color: ",";\n box-shadow: 0px 0px 0px 3px ",";\n }\n "])),c.palette.green.base,c.palette.green.dark2,c.palette.green.dark3,c.palette.green.dark3,p.mix(.96,c.palette.green.base,c.palette.green.light3),c.palette.green.dark2,c.palette.green.dark3)),Ue)),_e),Sn=(y(ln={},s.Theme.Light,(y(Ze={},xe.Default,a.css(Ve||(Ve=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.white,zn(c.palette.white))),y(Ze,xe.Primary,a.css(Ye||(Ye=m(["\n &:focus {\n color: ",";\n background-color: #00593f; // Not quite dark3\n box-shadow: ",";\n }\n "])),c.palette.white,zn(c.palette.white))),y(Ze,xe.PrimaryOutline,a.css(Ae||(Ae=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.green.base),zn(c.palette.white))),y(Ze,xe.Danger,a.css(Je||(Je=m(["\n &:focus {\n color: ",";\n background-color: #c82222; // not quite dark1\n box-shadow: ",";\n }\n "])),c.palette.white,zn(c.palette.white))),y(Ze,xe.DangerOutline,a.css(Qe||(Qe=m(["\n &:focus {\n color: ",";\n box-shadow: ",";\n }\n "])),c.palette.red.dark2,zn(c.palette.white))),y(Ze,xe.BaseGreen,a.css(We||(We=m(["\n &:focus {\n box-shadow: ",";\n }\n "])),zn(c.palette.white))),Ze)),y(ln,s.Theme.Dark,(y(on={},xe.Default,a.css($e||($e=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.gray.dark1,zn(c.palette.black))),y(on,xe.Primary,a.css(en||(en=m(["\n &:focus {\n background-color: #00593f; // Off palette\n box-shadow: ",";\n }\n "])),zn(c.palette.black))),y(on,xe.PrimaryOutline,a.css(nn||(nn=m(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.green.base),c.palette.green.base,zn(c.palette.black))),y(on,xe.Danger,a.css(tn||(tn=m(["\n &:focus {\n background-color: #c82222; // Off palette\n box-shadow: ",";\n }\n "])),zn(c.palette.black))),y(on,xe.DangerOutline,a.css(rn||(rn=m(["\n &:focus {\n background-color: ",";\n border-color: ",";\n box-shadow: ",";\n }\n "])),p.transparentize(.96,c.palette.red.base),c.palette.red.light1,zn(c.palette.black))),y(on,xe.BaseGreen,a.css(an||(an=m(["\n &:focus {\n background-color: ",";\n box-shadow: ",";\n }\n "])),c.palette.green.base,zn(c.palette.black))),on)),ln),Bn=(y(pn={},s.Theme.Light,a.css(sn||(sn=m(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),c.palette.gray.light2,c.palette.gray.light1,c.palette.gray.base,zn(c.palette.white))),y(pn,s.Theme.Dark,a.css(cn||(cn=m(["\n &,\n &:hover {\n background-color: ",";\n border-color: ",";\n color: ",";\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: ",";\n }\n "])),c.palette.gray.dark3,c.palette.gray.dark1,c.palette.gray.dark1,zn(c.palette.black))),pn),Gn=(y(hn={},ke.XSmall,a.css(dn||(dn=m(["\n height: 22px;\n text-transform: uppercase;\n font-size: 12px;\n line-height: 1em;\n font-weight: bold;\n letter-spacing: 0.4px;\n "])))),y(hn,ke.Small,a.css(gn||(gn=m(["\n height: 28px;\n "])))),y(hn,ke.Default,a.css(un||(un=m(["\n height: 36px;\n "])))),y(hn,ke.Large,a.css(bn||(bn=m(["\n height: 48px;\n font-size: 18px;\n line-height: 24px;\n "])))),hn),Tn=(y(xn={},l.BaseFontSize.Body1,a.css(fn||(fn=m(["\n font-size: ","px;\n line-height: ","px;\n font-weight: 500; // Medium\n "])),l.typeScales.body1.fontSize,l.typeScales.body1.lineHeight)),y(xn,l.BaseFontSize.Body2,a.css(yn||(yn=m(["\n font-size: ","px;\n line-height: ","px;\n // Pixel pushing for optical alignment purposes\n transform: translateY(1px);\n font-weight: 500; // Medium\n "])),l.typeScales.body2.fontSize,l.typeScales.body2.lineHeight)),xn);var qn=["variant","size","darkMode","baseFontSize","disabled","onClick","leftGlyph","rightGlyph","children","className","as","type"],Mn=g.default.forwardRef((function(e,n){var t=e.variant,r=void 0===t?xe.Default:t,i=e.size,c=void 0===i?ke.Default:i,p=e.darkMode,d=e.baseFontSize,u=void 0===d?l.BaseFontSize.Body1:d,h=e.disabled,x=void 0!==h&&h,m=e.onClick,v=e.leftGlyph,w=e.rightGlyph,O=e.children,D=e.className,z=e.as,P=e.type,j=k(e,qn),S=o.useUsingKeyboardContext().usingKeyboard,B=o.useDarkMode(p).darkMode,G=function(e){var n=e.variant,t=e.size,r=e.darkMode,o=e.baseFontSize,l=e.disabled,i=e.usingKeyboard,c=s.getTheme(r),p=jn[c][n],d=Sn[c][n],g=Gn[t],u=Tn[o];return a.cx(Pn,p,u,g,y({},d,i&&!l),y({},Bn[c],l))}({variant:r,size:c,darkMode:B,baseFontSize:u,disabled:x,usingKeyboard:S}),T=!(!j.href&&"a"!==z||x),q=f(f({type:T?void 0:P||"button",className:a.cx(ye,G,D),ref:n,as:z||(T?"a":"button")},"string"!=typeof j.href&&{disabled:x}),{},{"aria-disabled":x,onClick:x?void 0:m},j),M={rightGlyph:w,leftGlyph:v,darkMode:B,disabled:x,variant:r,size:c};return g.default.createElement(b.default,q,g.default.createElement(Dn,M,O))}));Mn.displayName="Button",Mn.propTypes={variant:u.default.oneOf(Object.values(xe)),baseFontSize:u.default.oneOf(Object.values(l.BaseFontSize)),size:u.default.oneOf(Object.values(ke)),darkMode:u.default.bool,disabled:u.default.bool,leftGlyph:u.default.element,rightGlyph:u.default.element,href:u.default.string},e.FontSize={Body1:13,Body2:16},e.Size=ke,e.Variant=xe,e.default=Mn,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
//# sourceMappingURL=index.js.map |
@@ -1,11 +0,2 @@ | ||
import { Theme } from '@leafygreen-ui/lib'; | ||
import { ButtonProps, Size, Variant } from './types'; | ||
export declare const ButtonClassName: string; | ||
export declare function getClassName({ variant, size: sizeProp, darkMode, baseFontSize, disabled, usingKeyboard, }: Required<Pick<ButtonProps, 'baseFontSize' | 'variant' | 'size' | 'darkMode' | 'disabled'> & { | ||
usingKeyboard: boolean; | ||
}>): string; | ||
export declare const rippleColors: Record<Theme, Record<Variant, string>>; | ||
export declare const rippleStyle: string; | ||
export declare const buttonContentStyle: string; | ||
export declare const buttonContentSizeStyle: Record<Size, string>; | ||
//# sourceMappingURL=styles.d.ts.map |
{ | ||
"name": "@leafygreen-ui/button", | ||
"version": "19.0.2", | ||
"version": "19.0.3", | ||
"description": "leafyGreen UI Kit Button", | ||
@@ -26,3 +26,3 @@ "main": "./dist/index.js", | ||
"@leafygreen-ui/lib": "^10.0.0", | ||
"@leafygreen-ui/palette": "^3.4.5", | ||
"@leafygreen-ui/palette": "^3.4.6", | ||
"@leafygreen-ui/ripple": "^1.1.7", | ||
@@ -29,0 +29,0 @@ "@leafygreen-ui/tokens": "^1.4.1", |
@@ -1,489 +0,3 @@ | ||
import { mix, transparentize } from 'polished'; | ||
import { createUniqueClassName } from '@leafygreen-ui/lib'; | ||
import { css, cx } from '@leafygreen-ui/emotion'; | ||
import { createUniqueClassName, getTheme, Theme } from '@leafygreen-ui/lib'; | ||
import { palette } from '@leafygreen-ui/palette'; | ||
import { | ||
BaseFontSize, | ||
fontFamilies, | ||
transitionDuration, | ||
typeScales, | ||
} from '@leafygreen-ui/tokens'; | ||
import { ButtonProps, Size, Variant } from './types'; | ||
const focusBoxShadow = (color: string) => ` | ||
0 0 0 2px ${color}, | ||
0 0 0 4px ${palette.blue.light1}; | ||
`; | ||
const baseButtonStyles = css` | ||
// unset browser default | ||
appearance: none; | ||
padding: 0; | ||
margin: 0; | ||
background-color: transparent; | ||
border: 1px solid transparent; | ||
display: inline-flex; | ||
align-items: stretch; | ||
transition: all ${transitionDuration.default}ms ease-in-out; | ||
position: relative; | ||
text-decoration: none; | ||
cursor: pointer; | ||
z-index: 0; | ||
font-family: ${fontFamilies.default}; | ||
border-radius: 6px; | ||
&:focus { | ||
outline: none; | ||
} | ||
&[disabled], | ||
&:disabled { | ||
pointer-events: none; | ||
} | ||
&:active, | ||
&:focus, | ||
&:hover { | ||
text-decoration: none; | ||
} | ||
`; | ||
const colorSet: Record<Theme, Record<Variant, string>> = { | ||
[Theme.Light]: { | ||
[Variant.Default]: css` | ||
background-color: ${palette.gray.light3}; | ||
border-color: ${palette.gray.base}; | ||
color: ${palette.black}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.black}; | ||
background-color: ${palette.white}; | ||
box-shadow: 0 0 0 3px ${palette.gray.light2}; | ||
} | ||
`, | ||
[Variant.Primary]: css` | ||
background-color: ${palette.green.dark2}; | ||
border-color: ${palette.green.dark2}; | ||
color: ${palette.white}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.white}; | ||
background-color: #00593f; // Not quite dark3 | ||
border-color: #00593f; // Not quite dark3 | ||
box-shadow: 0 0 0 3px ${palette.green.light2}; | ||
} | ||
`, | ||
[Variant.PrimaryOutline]: css` | ||
background-color: transparent; | ||
border-color: ${palette.green.dark2}; | ||
color: ${palette.green.dark2}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.green.dark2}; | ||
background-color: ${transparentize(0.96, palette.green.base)}; | ||
box-shadow: 0px 0px 0px 3px ${palette.green.light2}; | ||
} | ||
`, | ||
[Variant.Danger]: css` | ||
background-color: ${palette.red.base}; | ||
border-color: ${palette.red.base}; | ||
color: ${palette.white}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.white}; | ||
background-color: #c82222; // not quite dark1 | ||
border-color: #c82222; // not quite dark1 | ||
box-shadow: 0px 0px 0px 3px ${palette.red.light3}; | ||
} | ||
`, | ||
[Variant.DangerOutline]: css` | ||
background-color: transparent; | ||
border-color: ${palette.red.light1}; | ||
color: ${palette.red.base}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.red.dark2}; | ||
background-color: ${transparentize(0.96, palette.red.base)}; | ||
border-color: ${palette.red.base}; | ||
box-shadow: 0px 0px 0px 3px ${palette.red.light3}; | ||
} | ||
`, | ||
[Variant.BaseGreen]: css` | ||
background-color: ${palette.green.base}; | ||
border-color: ${palette.green.dark2}; | ||
color: ${palette.green.dark3}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.green.dark3}; | ||
background-color: ${mix(0.96, palette.green.base, palette.green.dark3)}; | ||
box-shadow: 0px 0px 0px 3px ${palette.green.light2}; | ||
} | ||
`, | ||
}, | ||
[Theme.Dark]: { | ||
[Variant.Default]: css` | ||
background-color: ${palette.gray.dark2}; | ||
border-color: ${palette.gray.base}; | ||
color: ${palette.white}; | ||
&:focus { | ||
color: ${palette.white}; | ||
} | ||
&:hover, | ||
&:active { | ||
background-color: ${palette.gray.dark1}; | ||
border-color: ${palette.gray.base}; | ||
color: ${palette.white}; | ||
box-shadow: 0px 0px 0px 3px ${palette.gray.dark2}; | ||
} | ||
`, | ||
[Variant.Primary]: css` | ||
background-color: ${palette.green.dark2}; | ||
border: 1px solid ${palette.green.base}; | ||
color: ${palette.white}; | ||
&:focus { | ||
color: ${palette.white}; | ||
} | ||
&:hover, | ||
&:active { | ||
color: ${palette.white}; | ||
background-color: #00593f; // Off palette | ||
box-shadow: 0 0 0 3px ${palette.green.dark3}; | ||
} | ||
`, | ||
[Variant.PrimaryOutline]: css` | ||
background-color: transparent; | ||
border-color: ${palette.green.base}; | ||
color: ${palette.green.base}; | ||
&:focus { | ||
color: ${palette.green.base}; | ||
} | ||
&:hover, | ||
&:active { | ||
color: ${palette.green.base}; | ||
background-color: ${transparentize(0.96, palette.green.base)}; | ||
border-color: ${palette.green.base}; | ||
box-shadow: 0px 0px 0px 3px ${palette.green.dark3}; | ||
} | ||
`, | ||
[Variant.Danger]: css` | ||
background-color: ${palette.red.base}; | ||
border-color: ${palette.red.light1}; | ||
color: ${palette.white}; | ||
&:focus { | ||
color: ${palette.white}; | ||
} | ||
&:hover, | ||
&:active { | ||
border-color: ${palette.red.light1}; | ||
color: ${palette.white}; | ||
background-color: #c82222; // Off palette | ||
box-shadow: 0px 0px 0px 3px ${palette.yellow.dark3}; // yes, yellow | ||
} | ||
`, | ||
[Variant.DangerOutline]: css` | ||
border-color: ${palette.red.light1}; | ||
color: ${palette.red.light1}; | ||
&:focus { | ||
color: ${palette.red.light1}; | ||
} | ||
&:hover, | ||
&:active { | ||
color: ${palette.red.light1}; | ||
background-color: ${transparentize(0.96, palette.red.base)}; | ||
box-shadow: 0px 0px 0px 3px ${palette.yellow.dark3}; // yes, yellow | ||
} | ||
`, | ||
[Variant.BaseGreen]: css` | ||
background-color: ${palette.green.base}; | ||
border-color: ${palette.green.dark2}; | ||
color: ${palette.green.dark3}; | ||
&:hover, | ||
&:active { | ||
color: ${palette.green.dark3}; | ||
background-color: ${mix( | ||
0.96, | ||
palette.green.base, | ||
palette.green.light3, | ||
)}; | ||
border-color: ${palette.green.dark2}; | ||
box-shadow: 0px 0px 0px 3px ${palette.green.dark3}; | ||
} | ||
`, | ||
}, | ||
}; | ||
const focusStyle: Record<Theme, Record<Variant, string>> = { | ||
[Theme.Light]: { | ||
[Variant.Default]: css` | ||
&:focus { | ||
background-color: ${palette.white}; | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Variant.Primary]: css` | ||
&:focus { | ||
color: ${palette.white}; | ||
background-color: #00593f; // Not quite dark3 | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Variant.PrimaryOutline]: css` | ||
&:focus { | ||
background-color: ${transparentize(0.96, palette.green.base)}; | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Variant.Danger]: css` | ||
&:focus { | ||
color: ${palette.white}; | ||
background-color: #c82222; // not quite dark1 | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Variant.DangerOutline]: css` | ||
&:focus { | ||
color: ${palette.red.dark2}; | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Variant.BaseGreen]: css` | ||
&:focus { | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
}, | ||
[Theme.Dark]: { | ||
[Variant.Default]: css` | ||
&:focus { | ||
background-color: ${palette.gray.dark1}; | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
[Variant.Primary]: css` | ||
&:focus { | ||
background-color: #00593f; // Off palette | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
[Variant.PrimaryOutline]: css` | ||
&:focus { | ||
background-color: ${transparentize(0.96, palette.green.base)}; | ||
border-color: ${palette.green.base}; | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
[Variant.Danger]: css` | ||
&:focus { | ||
background-color: #c82222; // Off palette | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
[Variant.DangerOutline]: css` | ||
&:focus { | ||
background-color: ${transparentize(0.96, palette.red.base)}; | ||
border-color: ${palette.red.light1}; | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
[Variant.BaseGreen]: css` | ||
&:focus { | ||
background-color: ${palette.green.base}; | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
}, | ||
}; | ||
const disabledStyle: Record<Theme, string> = { | ||
[Theme.Light]: css` | ||
&, | ||
&:hover { | ||
background-color: ${palette.gray.light2}; | ||
border-color: ${palette.gray.light1}; | ||
color: ${palette.gray.base}; | ||
cursor: not-allowed; | ||
} | ||
&:focus { | ||
box-shadow: ${focusBoxShadow(palette.white)}; | ||
} | ||
`, | ||
[Theme.Dark]: css` | ||
&, | ||
&:hover { | ||
background-color: ${palette.gray.dark3}; | ||
border-color: ${palette.gray.dark1}; | ||
color: ${palette.gray.dark1}; | ||
cursor: not-allowed; | ||
} | ||
&:focus { | ||
box-shadow: ${focusBoxShadow(palette.black)}; | ||
} | ||
`, | ||
}; | ||
const sizeStyle: Record<Size, string> = { | ||
[Size.XSmall]: css` | ||
height: 22px; | ||
text-transform: uppercase; | ||
font-size: 12px; | ||
line-height: 1em; | ||
font-weight: bold; | ||
letter-spacing: 0.4px; | ||
`, | ||
[Size.Small]: css` | ||
height: 28px; | ||
`, | ||
[Size.Default]: css` | ||
height: 36px; | ||
`, | ||
[Size.Large]: css` | ||
height: 48px; | ||
font-size: 18px; | ||
line-height: 24px; | ||
`, | ||
}; | ||
const fontStyles: Record<BaseFontSize, string> = { | ||
[BaseFontSize.Body1]: css` | ||
font-size: ${typeScales.body1.fontSize}px; | ||
line-height: ${typeScales.body1.lineHeight}px; | ||
font-weight: 500; // Medium | ||
`, | ||
[BaseFontSize.Body2]: css` | ||
font-size: ${typeScales.body2.fontSize}px; | ||
line-height: ${typeScales.body2.lineHeight}px; | ||
// Pixel pushing for optical alignment purposes | ||
transform: translateY(1px); | ||
font-weight: 500; // Medium | ||
`, | ||
}; | ||
export const ButtonClassName = createUniqueClassName('button'); | ||
export function getClassName({ | ||
variant, | ||
size: sizeProp, | ||
darkMode, | ||
baseFontSize, | ||
disabled, | ||
usingKeyboard, | ||
}: Required< | ||
Pick< | ||
ButtonProps, | ||
'baseFontSize' | 'variant' | 'size' | 'darkMode' | 'disabled' | ||
> & { usingKeyboard: boolean } | ||
>) { | ||
const theme = getTheme(darkMode); | ||
const color = colorSet[theme][variant]; | ||
const focus = focusStyle[theme][variant]; | ||
const size = sizeStyle[sizeProp]; | ||
const fontSize = fontStyles[baseFontSize]; | ||
return cx( | ||
baseButtonStyles, | ||
color, | ||
fontSize, | ||
size, | ||
{ [focus]: usingKeyboard && !disabled }, | ||
{ [disabledStyle[theme]]: disabled }, | ||
); | ||
} | ||
const rippleOpacity = 0.76; | ||
export const rippleColors: Record<Theme, Record<Variant, string>> = { | ||
[Theme.Light]: { | ||
[Variant.Default]: palette.gray.light2, | ||
[Variant.Primary]: palette.green.dark1, | ||
[Variant.PrimaryOutline]: transparentize(rippleOpacity, palette.green.base), | ||
[Variant.Danger]: palette.red.light1, | ||
[Variant.DangerOutline]: transparentize(rippleOpacity, palette.red.base), | ||
[Variant.BaseGreen]: palette.green.light1, | ||
}, | ||
[Theme.Dark]: { | ||
[Variant.Default]: palette.gray.base, | ||
[Variant.Primary]: palette.green.dark1, | ||
[Variant.PrimaryOutline]: transparentize(rippleOpacity, palette.green.base), | ||
[Variant.Danger]: palette.red.dark2, | ||
[Variant.DangerOutline]: transparentize(rippleOpacity, palette.red.light1), | ||
[Variant.BaseGreen]: palette.green.dark1, | ||
}, | ||
}; | ||
export const rippleStyle = css` | ||
overflow: hidden; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
bottom: 0; | ||
border-radius: 5px; | ||
`; | ||
export const buttonContentStyle = css` | ||
display: grid; | ||
grid-auto-flow: column; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100%; | ||
width: 100%; | ||
pointer-events: none; | ||
position: relative; | ||
z-index: 0; | ||
`; | ||
export const buttonContentSizeStyle: Record<Size, string> = { | ||
[Size.XSmall]: css` | ||
padding: 0 7px; // 8px - 1px border | ||
gap: 6px; | ||
`, | ||
[Size.Small]: css` | ||
padding: 0 11px; // 12px - 1px border | ||
gap: 6px; | ||
`, | ||
[Size.Default]: css` | ||
padding: 0 11px; // 12px - 1px border | ||
gap: 6px; | ||
`, | ||
[Size.Large]: css` | ||
padding: 0 15px; // 16px - 1px border | ||
gap: 8px; | ||
`, | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
252233
41
1752
1