From 94f08bf1a5b2f9c074b9e993bad5a1512ed3e3ea Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Tue, 27 Sep 2022 11:59:19 +0200 Subject: [PATCH] feat(button): add secondary white variant (#1220) --- .../src/components/button/button.css | 39 +++++++++++++++-- .../components/button/Button.stories.mdx | 41 +++++++++++++++--- ...spec-js-button-button-icon-only-2-snap.png | Bin 1470 -> 1128 bytes ...spec-js-button-button-icon-only-3-snap.png | Bin 1473 -> 1130 bytes ...spec-js-button-button-secondary-2-snap.png | Bin 2383 -> 2026 bytes ...spec-js-button-button-secondary-3-snap.png | Bin 2314 -> 1924 bytes ...-spec-js-button-button-standard-2-snap.png | Bin 2198 -> 1813 bytes ...-spec-js-button-button-standard-3-snap.png | Bin 2185 -> 1799 bytes ...-button-button-with-icon-before-2-snap.png | Bin 2804 -> 2431 bytes ...-button-button-with-icon-before-3-snap.png | Bin 2770 -> 2400 bytes ...-js-button-dark-secondary-white-1-snap.png | Bin 0 -> 2127 bytes ...js-button-light-secondary-white-1-snap.png | Bin 0 -> 2132 bytes .../visual-tests/src/button.visual.spec.js | 1 + 13 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-dark-secondary-white-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-light-secondary-white-1-snap.png diff --git a/packages/components/src/components/button/button.css b/packages/components/src/components/button/button.css index 879c7f5faf..c136a10160 100644 --- a/packages/components/src/components/button/button.css +++ b/packages/components/src/components/button/button.css @@ -17,8 +17,7 @@ --radius: var(--telekom-radius-standard); --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard); - --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) - var(--telekom-color-functional-focus); + --color-focus: var(--telekom-color-functional-focus); --font-weight: var(--telekom-typography-font-weight-bold); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); @@ -56,6 +55,17 @@ --border-secondary-active: var(--telekom-color-ui-border-pressed); --border-secondary-focus: var(--telekom-color-functional-focus); + /* variant: secondary white */ + --border-secondary-white: var(--telekom-color-ui-white); + --color-secondary-white: var(--telekom-color-ui-white); + --background-secondary-white-hover: var( + --telekom-color-ui-state-fill-hovered-inverted + ); + --background-secondary-white-active: var( + --telekom-color-ui-state-fill-pressed-inverted + ); + --secondary-white-opacity: 0.5; + /* variant: ghost */ --radius-ghost: var(--radius); --border-width-ghost: var(--telekom-spacing-unit-x025); @@ -96,7 +106,8 @@ } .button:not(.button--disabled):focus { - box-shadow: var(--box-shadow-focus); + outline: var(--telekom-spacing-unit-x05) solid var(--color-focus); + outline-offset: var(--telekom-spacing-unit-x025); } .button.button--icon-before ::slotted(*) { @@ -200,3 +211,25 @@ .button--disabled.button--variant-ghost { color: var(--color-ghost-disabled); } + +.button--variant-secondary-white { + background: var(--background-secondary); + text-align: center; + border-radius: var(--radius-secondary); + border: var(--border-width-secondary) solid currentColor; + color: var(--color-secondary-white); + background-color: var(--background-secondary); + border-color: var(--border-secondary-white); +} + +.button--variant-secondary-white:not(.button--disabled):hover { + background-color: var(--background-secondary-white-hover); +} + +.button--variant-secondary-white:not(.button--disabled):active { + background-color: var(--background-secondary-white-active); +} + +.button--disabled.button--variant-secondary-white { + opacity: var(--secondary-white-opacity); +} diff --git a/packages/storybook-vue/stories/components/button/Button.stories.mdx b/packages/storybook-vue/stories/components/button/Button.stories.mdx index 834b8e9b42..8480b812d0 100644 --- a/packages/storybook-vue/stories/components/button/Button.stories.mdx +++ b/packages/storybook-vue/stories/components/button/Button.stories.mdx @@ -38,7 +38,8 @@ export const Template = (args, { argTypes }) => ({ ...ScaleButton.props, }, template: ` - + ({ + `, }); @@ -103,12 +105,9 @@ export const Template = (args, { argTypes }) => ({ --spacing-x-icon-only: var(--telekom-spacing-unit-x2); --min-height: var(--telekom-spacing-unit-x10); --radius: var(--telekom-radius-standard); - --transition: all var(--telekom-motion-duration-transition) var( - --telekom-motion-easing-standard - ); - --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) var( - --telekom-color-functional-focus - ); + --transition: all var(--telekom-motion-duration-transition) + var(--telekom-motion-easing-standard); + --color-focus: var(--telekom-color-functional-focus); --font-weight: var(--telekom-typography-font-weight-bold); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); @@ -146,6 +145,17 @@ export const Template = (args, { argTypes }) => ({ --border-secondary-active: var(--telekom-color-ui-border-pressed); --border-secondary-focus: var(--telekom-color-functional-focus); + /* variant: secondary white */ + --border-secondary-white: var(--telekom-color-ui-white); + --color-secondary-white: var(--telekom-color-ui-white); + --background-secondary-white-hover: var( + --telekom-color-ui-state-fill-hovered-inverted + ); + --background-secondary-white-active: var( + --telekom-color-ui-state-fill-pressed-inverted + ); + --secondary-white-opacity: 0.5; + /* variant: ghost */ --radius-ghost: var(--radius); --border-width-ghost: var(--telekom-spacing-unit-x025); @@ -178,6 +188,23 @@ For Shadow Parts, please inspect the element's #shadow. Label ``` +## Secondary White + + + + {Template.bind({})} + + + +```html +Label +``` + ## Disabled diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-icon-only-2-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-icon-only-2-snap.png index 9f6a63163991fedc8d6ca7feb1a34c67f51dd1f3..a3120162175cad68034aa883af8a6f1cfd633e53 100644 GIT binary patch literal 1128 zcmeAS@N?(olHy`uVBq!ia0y~yU;#22JUG~ZWJYBBL?Fdj9OUlAu1h#7D`zlSv+sLjzao*%_xa4(>zqtj zgd&Wtr=-nY@zUj}TGU4GTV0A`LTtJ%cK4sVzyDn|v+K0&_l@88Ex(^W<%uuQ%7&TW z;_fqp7~eR7BtrlrBZ$&c0Fe%?U^lL40C5;Z1wiBiCMFOS;s7EWxHv!*nxrHotLlXw zIU932YTEC4AU8E%v|!Ll-S<8I-}z6eVVkD>+?Ng%J)mI1$FO>5RFZq)QwqjJok z@Zp&bB!J;35yBv$?_(4<7UGbbNz z+1d*~r&v7;1-$%Y@1&aRL?#F!Ku=JXaOjB;*D*Pnfom*YwmsrX_(>J%*C+3_OJ7OVIVI-jaQ3dj*Q>$c_34aPfCI) zSZcXo!QfL23}EfHJ>cNIV!^QIL|~`vT8U3)KxHq29y4s1Jsl}HdzlaT@v&8|{%f+l za?W2wH2tdJ$Hqc$D~OX32uy}R(C|=7 qwes?JP$F0m`wlFEHOG*Z&Hgd$PO7*YzbFx$Mm$~pT-G@yGywoisDNVt literal 1470 zcmb7EZ%|W55Wj$cML?}s97Umnh*M|47AtBHQl((j0zxFUDntlLD}e~9gntRKj-}M0 zjL$-fU_)CF5=cOhgeWgWtsvS2YfIz_0kt6v1h4@yLL&4YooV~Qai(8>yLY$y+uhmS zD~yheaCKho3;=K??+J?mU=dWop2dz3KRr}%4hjM%CSn(mX+1{(aL6KueL%^o7}rOA zRly~6n3;)~W`E-$pR1=_=nfA^Kd-%ByD{_py5=Xk-NEj5?_5E#ShsbnmzjQWiZbe) zF`8tm`;+*so6pE9BYz~8>y5<)JLI>j?v-)542xyv$n(v=5W7#R ztXgZGuhI+VK}#TR9wR_Stz7{TR02C(xRY=c*e%9IG{6mjvp0?;!a^|{1^59tEW`1Y zPJ#%D>QP}CJGlwFV;;dgck1q3?+EMhG7}WnF1EeYWu(>nC!=VEX;b^auif@A8d_Uw z;IH(!z>>e0KUeLUDwnh#85~Fp7#2=w`heg)Bs|njmq(%y2P%PFc9BC6!$@rFm*FmNk=+2MtGVm!B1WDR+V{;kQTx8muHR)V3Qj z{1z~`r65jruqDNNO<>KWg6Y4W9G~}i6CclzWOm%)K%2AeBO?(W9^uBj`H1Hy%2KE! zZHnd4V6Tn~w!IrD`biVl(U&q~C`mY|6u&9@ILr5s@fKKiMk0gX%YlZp+F3VnexCO* zpEpxnQY5~AN;5Gp|Hy5IjyGwQTxGBR{TU0XQq2nQbWo%UsbVEg-!s1!bTW|jNo;*B zYkyBpU(R9Jz)A|wNpQNTkQ>m5N&kCoe{rGZW3GR9o>pb2?hW%vT2XYY8?p&_On8wL z5L(_D&(G`)#M2tgruW(puvt&;HTuD`TD2vH3nc)=-8jB_Y%-_a1(yrMRpzr^blcle z*3kPG_97KWZD#v~!BLjMGT8p@cqF%TE6hU8zhdeHy5lWXak;%`y=>M>3!a-7CUX>w zM+UXeJYTYu_i}7aw;ws4$VpdhfaQ^v2g4b9{ghtgyF4nuCRi@HINjJjpOt`bK}D|r z9_2*+u_*W^;C11Z{xjK?Pr-@YDF$LlLl0ozNv7q~a!5fE!~U4Yht_uyJHMfBy>uK+ zMWxUyS^_)sa5M&?b7twuNfKS3t`GkWs#m{o6KHh8h)E{knu=`J6eiNTkTv9aK$S62 z6oJ#agEK7Yrxa@YmHpc%#q|nm25)GzaTpS)qg_9DR@Vtddy)Q}Jb!&zY>A6x7uQHh z+ZiG>phbA>refcj1MTdA)|T(9O2s1>D{sUE=bE0E`o7adTde*@@uM{KTz-g|K9@dm zZDGv+9L$HFw*>@mGF-}P4}v@-@M53eVda$hrr1}Un#m1z?3V^L?VQGJrn;Ibi=Rkq z>Ki5ZBohG;KOlnCcT6+vuRd__x7b-hBUpTv!qMrT8Wo7YXMSx|CMFNoKC dIsfyYvN@GDzR`MJtq#YD$sb0B$#&7c_zR&MRJH&B diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-icon-only-3-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-icon-only-3-snap.png index 3f4d28eac7a638a965599210a0bbcf1830ed13c8..3b83e1405867787e035bcdd5f43735538708da51 100644 GIT binary patch literal 1130 zcmeAS@N?(olHy`uVBq!ia0y~yU;#22JUG~ZWJYBBL?Fdj9OUlAuJ(M%L8rBsTqsBZ$`1plx80flfAXX`9EW@?|%ld$$V|o zHu}oUi7asvx6%}rmcH7uiKDwj!8fPX>}%ckIsLzF{hcKIEWXG7Ec|g!;bbDv&W6si zW$zh*i~~P7fh5BP1`vlqN&!SVFoPYL(E#Ew@Cty)1&mA}%ESRgHn4GkC^SvW?mcbK zyKk+rcd@X2P4%|-AcHS(`-4DuHSXq(pfc%!@S3i?sOS6tfRyZ{J5j$#TQ+M=9!7-{{H#dx%}_`?;qPeC*5?9m#_Z&_1)?{e_mae zdH1eAR~cm7qIdDk77{YGb4%WyeXkzN4ix)0-H-Xe!*_LYG4Zw^f4zB}KS{-U{=XYn zRe*9CO~ybHZ?s?do6Ye5=NyP%6ICXn_gz0Om0V>ssX00?wM!VEu%jv-`h03IVVls zf74v{%4Zwvfl4jhE;3Aznaf#Fq6g$L1at$_@!RUJbN}%Jd3)C00Hq%WhrMi`e81&D m5!W+a9V9|T{vk5cHP|!0_*CJfQk(i2WU!~JpUXO@geCx&nS+f0 literal 1473 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 delta 2159 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 diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-standard-2-snap.png index d412151a70231f50428a7f8af1491dae50726868..be66bb37a982eeb7d66646c8749e805143e21889 100644 GIT binary patch literal 1813 zcma)6dpOf;9RH!C5YEw&3OSw?Dv=>gbe3FFY;@BY%GeYknrpFB=eTr}$uO7pkV_|* zaD-XtvXo_dHXWIaghf`5Y<8Bh^ZsmdkQ0hZAIRq9|4$7SRIP>DO_;R4lhjiw+-z0cEi?~%k}@o-Ayu>|ApS?q4c z8_lZ^DOUZa`QDSf?PmKf5*!L#*IqKr;)J@}=#^Zt3esa+GA$pk^Ts#6rJ~|zk!*$~ zJ?pH2@h@K5m}igJ$hE(s9c~g|KJ@qZR~}DSp@k=6lHSJ!)hh)GZc>LxksuT~iS8Wa z8GvFKm9P9#0749<1`Ix`sxaK7z%#V@CwN9{tb*a&O*`Iu?PM-ItSb|Z{wNa;`iOr3 z;nk+4a2AT*u5xoo_|}R%>lCO0lBZQ$K&+xW>x*%|0CVciVYW4;Pu z*ks<$3lhVPv&ed++BMow@)hRml9Hzn`}Idf^gOc*b>DzQyhAz|h-8C>&4aXeQ+MaX zfqQ?ei)z>S)gDpoQL~DM%;7wj3)7!-UOZc{HND%oB_*y^fB@h3d90bFFhnwh0Iz*yr6=9q6#_PA%kvOx%Hpy_KX`_oFGRf#vjZw#o?%{eq~|MS6!rPKs{s z2B(blqec+jmYIn<(C23X4&Gz+S5mU9@LD!Dh`Y{kQ|)WUpdC(^t`w9@+)3fh9?Mbs zpSJ;oy4t*9py+)M17pSVtFcf4^+C{q6X+F`q6DWKV8pl&r8dTq>lWGhec?lM={nr1 zh13#M_M5ZrLuzoE5cF~=1NrqDyC}L4p}v^BEd3ofNb&?m-4IoT|_xtTQI6IPfg4l~~#5oEW`U^vk&-bs-mF>4(y3w$rF%R6Y_d2ciwphK z*)-Q6;=dB++%-{-O=)4wjkfAR! zBk}V-_m@UnP^>0#;J`KI=+%A)*07^HrfmnpEcnLbdKPWp?)lB0R`ikB5V3cfJPN+5 z{sE~HeidCfmf9Rx!*UEV)z^#rR4#`M$4h*S;U8y3Fj-sin@+Hwb@R&4);IyE|FSphsn3E-#MjN-5zu9X|TO> zQO8p5?H23qZ0T*;aV&kZIaE+p$Jv&xY}neZ11iYdutSCM_Tp3gY^_qALddv2Ng~if z7kbEr%yGIMrtn6uYzc{=cZ;Zf+`i1`?=UMUe|p^F+|wW+2~*lA;j5C))QN^Q)*9ze zK3^<+5R0o6#*>-4oq4^o8ZKufWm>E|CFaodBVy%#24Q1wILi-Py@pvluPs-KKdx-2 zZUW+R!(*^C!UuH1an1UrGtTD8(^qD38=1y zqEwQ`csBE+wv$vk>|aOU^(C z?}=4JQ1q8ZtJ*ee>s_z{N!s_iiK}-%z~$D;Qv^u!-ctt%bY4NuDT`@@I?I8dw>Y&w zz_HOZrE#11)kYxR6sm6=YUYAkbq!+hWNN;sLP8^*QH<;2Cm0rT1XO#lD@ delta 1974 zcmX|CeK^y58~;&pI>OWGoHUVo>~v1CaFmy`EjlS@G*fhhP>;4nX$g7n*QrC-6Ni~v znW5tt&k%};%xJDWUMKUm$&fLxTWyTJnCG{1UC;UJ`@OF3eczwY{qp(Vk4>mM$@btE zz8H@a{t5Ku@rcZjILnSHX+Z=rsMIEkk?bA3`@|3X+s@UW``&BoZ(p3yNBrw|?AI4R znmZWmvTo`3_^J~A%|9}|&tH78$8YOniaD8~uOG!slQ0lIW!;smme%?Ml&d#zjeT@+ zqOE2E>u6UE#}(ik1FSkyPWio^4|vx%#0(*som9V zWNvBi;g7M5nmfx6H7d1{OrUtRx^EkVbEk?7+!O>F$s{)HoYL6?u(})A^vZDc^h!q zpr<8Dk2RDHj6crt2C0`#5m@}D_TIZicDb=}#G6k88u>tlUz7#ekeY(R*@j(|zJTb? zm6_N8nHFfY5qmu$y}1b;E@?qv$DGVuf32sBvpUV ziu8S%M@6zlsh3}jcTi!%;Db%`W2BUs)s1U6I%nk4GmMXIJ0O6st7mcf(`ED=43EG_ zT+V=LCpS*@`TxkVYIei!4ecwLC*n1a92d|gknx6ZuimAPFQi_S9f?bkIsWBosGpzJ z9Uh8IKN3b2^|$Clt;&fs0d|%4ouM2hT?iPp#}C)V`B6@)zl7XRm7@WTI)6cLQ#;u; z1*^e_|NY8OL`*uE1T6weE1=zM=%|7giz~uP8@; z0J+&QL*DVC_UsT%>7r2i>Y5{a!?Tef4{@E(ePWT4+V8+|6t{5kT8Y(+z;c3HDYZQ_ zeHIInhSs5ApQv*@y=McXzXf**Rz|S3bQ0|jM_W6HlCBUBj3S^gQJt-5iC$yUMEZ$+MDGX z`Qg7yKX}B0Kb&H@{w^ z+)Q9a_qX0VsFRm!fwu2bmduYq0$+ z{}sVo5IPDzh3DNoyV&+hs$O)y)m!?8lHQfWh8O?|87p~Vzz%b?ZCUEf7Q;=+{9Ioa zy9z_;X^uKke_Ztwp(nq8J`C}NAk%5&X>QA4d!VWi(^pXwIgjI!0(uL0T#^-s_9C~G=c&h0l62iBr zI=%~_c^daJ8!WyALZXu8oSkx+rg#FcYUaa|mK+jQ6>ivWk%Q}$wHX6HFn3??QZLK2 zEOD^kf<5_m<@Rmy3vP;Z605&?R9X)Wggvhs?L7WQF~ba|iufe0YSoz^cCxoCSlWH4 zi1p8KE;3M;_cLy}h^>8~$ydu7kh$; z-kB>jH~>QWd=npqrL63*42AT0`;wLE(qBqr&H^=YoGv(Kt(}=>>_;$Ed~W?)(!owz z1ZKcB+Uqjs5&zdzR82J$(zk@8-R7>YbY(g@?RN5oEt4XB)PZL3&qg}HtW4UL)^Z}1 zF!qkflh;QlE>kKp=pZvT^v%+id6=V9^$l(EFKGE#QZ_XI?r#1uz??*o8zxk@ttes{ zQ4;)otleE2^vh8~YVCYTxPUu%*5c+Rf?#P56n^f3d2R}0`2JcQ$vZ$SIpd~8^U?C= zDedVc@mSU z+VyuRD4i%S7=}@%C0)FFd#Guj;yaLU;7zK_L0Yw qZv6r4n|^XX-Q{k}$^S3H-IHNyBU{apzcQZdUNEP8JgR=Wbnk!8MdHx_ diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-standard-3-snap.png index 7e3ca8170513990ee3f3f9b682bdb7c3bb2ec0dd..a9dddf7d9cf4654dce10522b61911f63b7bc4e6d 100644 GIT binary patch literal 1799 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 diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-with-icon-before-2-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-with-icon-before-2-snap.png index e8438c677a92abcdbdbc826388f7c0b05b06057b..ccba593970201555a1a258593dbaae4a0f1bd5ab 100644 GIT binary patch literal 2431 zcmb_e`#;nBAOFx{MbyDLgzrN|6ry9XuWNHRA2^T4=ks~JKkv)y^?bkH&(G`mNpU-MQb|Em z0fHbUq?4lu1pNS-kkeLq@Vw@gOaMkE(&MB(L}zPHK+rZzq~ozOv1GxQkl?fYOR!mH z-n;sw(cfh8H+<_~Y}u>j()>VU+gK6nXN?z+)G`PME@}4H1;l>QkLI~OWCY|`1k$%w zWMn=r_de&!Q*pK~E()>t;of0f=H?udO+l&Uw?EshpAjS60(W=j>Mb{5E)EY1b1SKQ zvZQA%O1xsjDRu7B0-$`I%1okxh4NR`q{dC=-!UdaPNDe@s&SOEJPCFLQO^AlIN!h9 zRT|@{+_yee=+>sQ&0=ib7J%WJrkl*{?cyR6ChFSGkH{{Qa5&sRm9fWke5u}h(g{pcb3bMw6U_EQNc^Af z8SNss7vW_9Qi4(~lufJ~B<{M`W}gBKiTwQg$dA$ys(g@`g^7O3*v~vOsUdaKiBrVg ze`w^W?EFzh8G>+sgfz)DIU?{5&F>zXL`zBWziXhU4ded1cE;!0?WW)RN_K~Va1bP4 z!$SQhpLxP{7uBmw{c2aUWob}Oj^4yf>_He+6uxXHM%P)_Ig@uv=cY1@p_~EFfZoaX z$TU%I^;Jo+0GU=-TuS=F(5t#YEUXHNtd`8Rc(j1HxMNSI6>z!Kb$d-B8`avs9912{ zF4b)vUXbMU6QnC#b_|k`ihMs-fw}r4fClG$+A{$LUTCZrAb(LL$_|J*WY2O(7 zMdoCIEliVW&d+hR@L$oDkl?MZMXv-g@IUW+A=9*&Luu=|bQVQv7}duV?}mF0k*E49 z4d2&*RQql<%I$-03a6dDySb@0mGr>t${_+{`+~7~_qScot8J69tJjq!vpw5i$D?QB zr{=iBUD*zt#sqfv$yC1eg2d*kE15mBbYY%!u9rVrW=Bd-PVm5@uH3X+bX2x!fFnKN zHyw*b%Svl+bnMc|QwN)RhL5^3Z0bq@AZqOV_il6d!IK{>J`1p$eZ-?bAbQ3Yof( zR)*&&mbwPsq|vY_^?e8sEt3|kfMZv8Na+Ahw;gb3hdE8yA!B`>>6L-j)%PY1uM3$h z>q<$O4{udOo}OvH+baGxa_7j3!)+l)#E|64VF`$fv16q8$mS=lVRn@NiNs(`3n!P5)j0cd3=_ttSfxkO*o9(Z z%iTnn^l;C4{REJfPAmk5ULd`yV8Lsm<8IG$s}(C@<)EkpWtkfwr3D30mKHGBX8bvJ zc#R`}V~g$d(_aGPzkZSZ%IzFoqxJt37bha3FN9xdLFYZj!zBBjXtwZ2nK3~pTpHKy zWuEanh5qk;>;H&}i)2%5@&s7MT(kb23+G;puP>FE3FvZ`qGgVh#7EW#XlyFLDrF^o zquZYp`!-k(K!rq}nGZZmu+M;EpwnztUtNkjOf`%u-r>KPF()les_JZ{_h^P5e^~9) zm$~y+0~WN`PmH2nPS0y`#AmO!JOZn*LMuckv+0A)8YM^(f|@?L-*kl*Eqj+dt6$oz zE4G5v`m>su^=`6iBS>k`{U`maw)tY0G9enCGHm4gre&k+S+GyaX~3$cBJ(jt+}Map zzHkW#=DHm)EP$Mb4$6Sf@?$kosR$416qI#_HzV^&hmXRU|04=e7UsPTSPi%y42paw zdB0Q#q!nJHUmgS1Q=Z&wJC^ba4<v+R}NMh=o(7SAYvQN4Yq~CgOCvYeeDBlBY+>Pdo!;kv`-Gz0ht22&lbbXgd%w9PoXnh)0qlE$yH2mbxK;?0(et$%OH|Y48 u$F@?7dsAWf9HtFg+oLJ}bSUKin`RbE8$`6WRkeJQdPN>Tpz56!|-(`;g literal 2804 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 diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-with-icon-before-3-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-button-with-icon-before-3-snap.png index bf2edbbd6f615e2433666a49a37e8541b039e8e9..b6cf1af769beb259e7a777af988405975fb7b100 100644 GIT binary patch literal 2400 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 diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-dark-secondary-white-1-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-dark-secondary-white-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..e6f298c61cae86374d632a1a49dd3fbf3d8539f0 GIT binary patch literal 2127 zcmbtVdr*^C7XL7X1q;$0yS6xhZi}#LCD>4dK}fbLf;=l=G|IywffOOO;UPvQxU9}v zEm?ws5lBD;6oCMVD8U3+K?p(ugkT5>k%Bf52rqetB)y;Q%>K2`&h(G(ocqoBo!>p@ z-gD2n77}#CX5-e45Cqxy`5rn3K_7r66m4k%WL7!U1(X@(*paWH8nOKZ1X)`79r}CN zg~Dl7!Z}rnL&sb&QmaVZqrxbEk`>?Z8|ZYlv@**%<$m(BfPX3P;_e2wwYBX;j9rPo zEpq$zyf^MC;%Jy9BlDXRA&)ylItFgv2(Yo{?>$cugeYpJ=UN$70X9|VjfKWYPMpiC zK|G_M;R+?D_25tj0Ys8Xs&1S#gBLH^KthoDN3bl0Ho)p*94s?8Si&j_U@B23Ui*@Ldp^WS8@~OXkk=#Gi--~nch7Xq(i_6Pwt(Gi?$twX+ESOY7@5^X zfuXU|C;ro1ss(EPdPi>50oE_%p+Z&@mO=2RL_Wz#kd=Z%>)pO9-J+%H#qoQR#*hl+KN&g?qg#m%BPMI1La~3C&m$KVz;Ame{%m5qV+1*^7aF;SNel zn?@{prxFy+OP7Mb2Gk;)`!KB0 zCgV**g3dp21t&n71M0|}c^wp=)YXS=-i69$vrEW{qBdP?x2hI{l3ddI=k;Jr4ig^a z^s7lKhG?`dS-sxcePB%Pef_P~mo7TL#QNj1GEf^Wrm)k{eVc6J*)eth;sdEPReJ># zFVl&nOQMPReMeXUKF@QVHk;)6*Mvr%BN|&xriL=^Y581fifRZsB(1-{do06{@&qoS z3n@Q-2=!dYa5Z#x*Gi~5Lxllo<(lKt_! z8c?DjjM&RNP~|YRJjW)^CN%e4b}+4Tv_zJop!=L3gJIL5U z5kVm#;*N;9UZG_I6`^Fp?*34DmytMEtRk(rEE2j z(!azSnTn#CTAMz2?#!sW2A?gLZVBe8H_+pkgl6h4%A#`Vi>THE}8FWG{0+zNk>4xv)fA6CSj+Qc_oo zn2*n-5F_}XwDFEg}zfkyyAN1b5#zSap|c=XTA%kD@`)pDKm*usCr z0aK3mFIoe)tvD5;MIO`C4;qtzUX-Ue?kbWG3M)H+t=Mb;3!NKc4#qBMGp2Y0{B_L@ z@AxgU7y{4E)F~(6tE5r4_j>DyMVAU+3$b z5KaeE0Ef6gj)$(&czcjaL;hRk=Ns&=!I0S^`s*v~^~T9>KmhR{RfjtqxTGH(*c32+ zyDw#^dC7Q#OmmGnrT?-quC_8~r1s7yspW~U89Y}kMy18a&g@8A`DGiZJ$%_t(M{c7 z)y%I#3!;7e`GYKGL#VnC^r!y%+Jx_B&^Ccnj-4P=kkNSS%zD!_@GABYG?I?$cQ+wk z{Ts2_?#XCLWd#TWOfyCt&=9n^1D5YQY8(uB-)O^u2`M`Wqd3SkSp6ZkOqk()gEEtb YxcE~|=qEmcJ22AkaL}QeucQC*E7Jvf_W%F@ literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-light-secondary-white-1-snap.png b/packages/visual-tests/src/__image_snapshots__/button-visual-spec-js-button-light-secondary-white-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..89854e4ab3d5bd63f2ed7ea9d1a3448ef927c67c GIT binary patch literal 2132 zcmbtVX;f2Z8omJ$+-NIp8I~kHD#7W18Bqkn66&ZivIG$-fg*IYge@RT2oMrd>5;J_ zDikOZ0hL9lgi2V$5;$mL022fRC5BZL)Fi~90YZ|wmt+66XXYILyzjl|`<~}}@B7~8 z`7ZeR;-uPKtSU>0$ZS{n2Ms2Ag2EEs+gBUHr7?v%}lzH&Lj~zB%SMzeipA zEK3EO*`_=gV3G$MC;GKK@Dq&unp3`k1-JUW?bQ4@TQ+IzRrMcB;`ADImDXA6xS|y) zG+41nv!=n?2L=Yhz+xhrM!Cjd22Q0LK(-ia*+)*CNP=zIq znfRPepFGQ#({{BfuDa2No0p`@(g1RuOR^-Fi!%hKWS`nj-Y0x()MiMfH zC7HsyVzp?j`gLghZQAEhQHOdBJ-x8zPVE1*!uJs6r*HuCgo}n3wUyJ(s1|qnFO!LWA7_bm%!LY;Zi!jFCur!D?{c873*MvCZb3 zRoN7`%LB#41B#ntm9Nj8*q5k!?|s>~Le1Z@PyHr8Zx_9#(=|!#;<7U=b9XjlO<>o$ z`jFVVGJ|15s@0+IgS-yBompf0{bsHk6H^7A!RF%rpR4N$FVlY8r|S;OWtSkV`zQAC z@^XA4QdP}%naQWW%$UmYRv>+#Ey=xF3(eD8xKkWb+>7|25?d=n06hx)2NJ}1#ep>2tS-rH4pIKUW&p-9p8vms~YQHJv^r_D}7(ki8Jhe z;Dk6P$&*7fui@J!E#9Ic=|`t@|KJrJE74i=xuC~NP7n(w zuC0UH4I&zt+(QqXh;2 z&nD{bIxnsj{mq>bZlmi7g6U&-=r{2xpN56cOuH`xaXKCeM91JUC(nQ~{zLmnpjq!I z`_0@5ly{AG#LPiAW%fbFk*UDnK%rytlwm(e6&CcC<|6 z#3(v7v_N|@!>O44!FBxl>wz3bCdpK)6f8;qZeV?}tDW69uSSS&Aayt7$HC$vx63GS zw{%HvKz4QF%yO0Wvs40#>VEwK+z_;s@5YV_>P9Q23qkEWWYwitCUozfX5OdLm%)o? z$|$O)Hu{MAiXyHpBEoDS%1g|rEI7}80c|FG(IVcba|TE9|5f~C?-iwSne$t$K28JT zc8mIIGmmIu+6|{}_nxp=eWs-lpeA#I?ZsdM081|@e$++AEUc}q { ['standard'], ['secondary'], ['secondary-disabled'], + ['secondary-white'], ['disabled'], ['with-icon-before'], ['with-icon-after'],