From b1b27e8a2a053bd3f476e2814bd0949d00b682ea Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sat, 21 Sep 2024 12:36:40 -0400 Subject: [PATCH 1/3] Custom highlight background --- assets/custom-highlight-background.png | Bin 0 -> 17629 bytes src/Skeleton.tsx | 5 ++++ src/SkeletonStyleProps.ts | 2 ++ src/__stories__/Skeleton.stories.tsx | 31 +++++++++++++++++++++++++ src/skeleton.css | 13 +++++++---- 5 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 assets/custom-highlight-background.png diff --git a/assets/custom-highlight-background.png b/assets/custom-highlight-background.png new file mode 100644 index 0000000000000000000000000000000000000000..9ae38ec83a6fdfaf441d77d50953cb8ef8360701 GIT binary patch literal 17629 zcmd742T&Bvzbb@-#z!M!kL|!p6;GscmLA!v>#QK<<6a@KYQ%h zv2*f|AF3Zab^>wi*m3PMe}Ov?`P?Wt9d}TdlR1{v!Z-^qPFYARNgq3w8-&<5rUKW0 zzjzEg96NTthVt)ty_TH_xA(8Iv^+$C}w{Qf@(Gthj z=5pbauA|et67z8yj<`9^?veSz-u|?OTc8ien4TiR@hdIq1US9&fx+>$GB5a$V{Lz% z9|tGVDhM3^VUM76dFB)W9FN8R7hVc^L#p<_cF!y&)`>o0wlk%vtxeU?%7YXuRyfi^ zioCa8N?Q|H8`xN|81t$_9{*yjdY>ZVx~3oIV|}JU*vvNi=m$VuciCj9z)ASAbP>y&NZX#3^Rcs`<0YoAg3cQE>IiP9fuT`II;qKNTF*S$3J1jP{=_iV*ETjb4(jQu+& zD00hjjOdDI5qGUGKA~n{UKO_MR*_v~^yifxV|BLs*F87d?}RnF3n&nt#^)zp4|x5C zG9G<Z+CAUO_mmW4kOpE1y z{zS!nL->R24@o;I`JL&Z7eB{W9RJ8fqyC3^)imwHM<*|?CP@sqRftEOe6sLzu%NZW zKXfpEvS8$ydDS^zy9=P&y4HXG%mF9;|C2M~e|PSg-5}(Q6`xz%nPWHG#IwN3y5$Qm z;rxx4a3($?FR9I>llGt}wawJVOpk_JPQ{Jyr&^%<#RJwM^I@%-p43hJ1~Q;fN8hM6S`Y`Z4PV}jfy&j!1CRt;x<|dy zLJgOK9E2Oxv9(F_XAP_d`ht2dmz1=ju*j4h4=F?VnQ}t^cclZDM;dF#R#+qJXrel~J3#ytb2&+IoTXsti~druEq#;zHD+J-;j*1R-#4|Ho?q%5%8 z9@bactax${emW&v=85?YTxVG99JK29H6<5p*)B?MoD4XuGMSUp@2Py|@2S*(wbqMB z&TNbC=G$MA~WE}wHmf7VxTFv!hRC`owX@oaOJ@Fo$1>_zbjzW(}*Zpl+r zn9&cmyiDKW+Z!&VYZJq@l((aJMdQJFOMwjwjng?EZ)#-*j32^scyVWrrs?PGp`!GD zaGL2^Vyss3bg;3G6QLGb+)?Z~E@U!Cm;YeXj z!TQxk>-4Fod{1Z}rVD(5iq%5`>P4c>KH>tSK7=Kig<>ytzmPICd`xTjAd32`5l+5y z{I&#~f$vjQ$jI`Z_-VyAUo8_=lnABqh#D!qu3ta-*EYyi;cSLJ86$^W8HxgqPx019|Y@U znHWlOnfT8nX#<#JB9TTri=!*o_|n>kdO1lEHdk~)7Vl+FIk@h^4{N^JC0vAn z7P_jNPOy$9neCLH$d@kG*1FWL;Lmjtq2h4yT0^1wbsDQ`Li@{4LMFBvrlFbg1jQUl zQRiBkGPW53ys*PB{1UhubzQowR(rN#b8 zt;qA3LQS}huGP+UY1~o%3RMv7C9$5rInS8wjk_kt|fAXp8b80Gx9dNhZPW$#NSGE1Url;Tbz1*WlVBEH~ z1H2&Z%d)8p7Z?uETJ0%r-g@;VQZ1b1rM~RwV7TGHE0v>Y&Vy#H9!KfTx?<#8dJ$ZM zQCP1@96@KQ+U!!-nJ%>}TxYYak!AR&vMi{}x||3NWBQD0UYa@qM82NApt7cuZu^@^ zR=*BJTQ)RPyOz3S>uB!+&&vFjjK~aZH?ZYOm8!OOn zWuMJ?((q1OgyKJe?Hm)^2CEM8CFONnO`hb{pW_HN2~_Kc+VsdG8nJBV3cL|>mL$^-@o zed8Q#dyS>C%SMT9(G9q0_A^JAc&kOf^Qyc=j=i-QRA!`*yHILUX^uZ^Axi{|FbnO; z`2|Sk%@`5npQX0TO&^MFPK(rejhI9tOyW|Nd~l>Ye50u*XqGgR0bh0`G+Mi_JyEAA zzmlp;==iPrNeh)KXpWXPeS(iq%_!le`HL4Z=e1zAqmOBfBK%SaY()pECK}FAF0uq$ z;MCa6+UkRzPv=Dh&j#entD@gah&UiK-dHJ~8#YZYAj%lICXKOP&|r*==xC@#voZt> z80R;`kNE=p^@U72W>`~F?L)D0Pc=j>q-kaJ&W$jgHhb zh};RxP+Ao}pj)5uXd;2>*n77Stw84A+#bw+H9;3BoVIT`>CDrrByN|8LW)OqY;t6& zWI#o0`8Ha}eaVJxIZaodT5?7*{`2LfUd}qQNP5|HlaTS^?SlBBEdAW!O{E9j-04Ia z+msQfa*6saCN4xV^RtZ$$OlL5F@(>i6kCYnv#3g}&<3_JSBlZ4#fNLV-Vnu$^>kk7 z9h`z(BpZs2H$)J7&ZK+j^9rs+^zIW=5?Z8QkdwNfH)Bl%VW{@OG84*}t-q@e^D4c& zlMVGzJ<~*XP@QdOiZ7MYuIR&(q%9Sd`Riu{I+c?6D8{Tw*)b1jJY6@!yizRZ+5T&C z_4<*%91cVDiR8eRp`>$m8AO=}0lv1Ze+6NFbJQd;H5PFp@~uxL@df&>ooN*Phg=$% zW||?Z`L-2qVEv<5WSu3~(oGW+dw+hu^tv{~`jRZi?U2LAd5megH>0{l5UyrSazpZW za!b}8O9T!zwU@IkRS3*lnPhXG5Q>;7jW^lV$NXnT&#r-f99x{B(_+uj+F3wgzP zq{TAi;^o0K&ip}H_ZH4Uk3^M*gNF-JpDL2umvyANge+Ky!GVmHJf5Et0?4mWm;oK zEJkK2M;v#O5TaY0dvP6;I%(U2{n>BJ;@+Rb?g|Quo5NJF9Clu$v2UeLX-= zYZd zYE5cxy`xd#M@XKX zy7$>s03ly%?>AYnCW$+^Qvc-}PTWvqT E8Wj^V<=QlTFK%>gsD9o=!JI|E(nDf? ze!f@Ch^)}<*L)c`u zb89@3HnlEA4=OK?T-kd&B-h1B{@hjQB1KD%&lnPR_3oajhr&D!`maXe)n;&z3otEa zNZg^z0?~&v5;L?Mq^35L-oP`S3TaLyG&mre^dl5yT0(5DP-)=U9zI|Dj_3WfA)|N@ zLsdR2lQG48SwYxbwZwIJw}fGdOJs8BqPk*0jlNUhQi%aD4C<`ZmFFzS6)UgyoR^Zb zY0wa~V5#k5!G2{xeGuyzA)Coey}g_c(j;1-bgziit}8J;kfa}t!7%y_>9nF&bXwpX zPM`Wz8Z1@7onrSGaiw?1xe&NU(AyZpI}X0|n=&drF;quN5YXYczeSKsg=79!@X7WF zdIc?~esK#HuAm=4#nmf-pAW^RuUlQ|O)+heN&bI^7J^*Vt6nXf%e#HtiamxVKCY95J16~W%wX0sg4WI7&@b8N7#cV^f=p=8+ z`WGW62Bz`=ieHx$z%iKg@u%$9FjaL@V%HX!s<(0C9ZdP(E+#edqArR1esOy6FQqsF zlw!cnTPRKYiVveh_g5`}v$c53gOy$T7N2x+-&fXNF{?X-HD^C8X769Vc@xp+j-g+M zOZncFzbXrGYf<&&YO`&>QDJ(9ZS14U(fz}9ayu6yYwf!2(D(s4ei|~HtjGn*XilZc zt6;&;6vYyG>R-Z`u*6F-K(XmbzK8!q-GhGe4ybWE+ga&yxMI1!DET|k9O(!ZSiB*VnO#uDV> zF%e=Ktc{#I`yc^Wbc!lvvXfAM!j|w!-V}w@4^T5@RI`-HiJ+C2ShMz5xcm2WfBD7` zELV^R*Cb6YTiITrGXq~?8XvJI31-t_jxGIt#*p?EeSfsbi~a^FoZ6kXB&l!Tei55I zCH|$}CJ**rPK?vPEc;&POdP%Ewfs9qphXV{RPl77`1Wc^60n<4W!&z-o?~Dykf-K> z%!5bF>YH~*T7Mq0b8V}Q7zys>>Z{Qu;H9iL!r@2pa|bp|^N07-7fMYlZGnc|CMSIR zgt)ct8vI}iJ<&7yN%hxJ@M*5)+L(nEP;K5-ycRoLtJhvZAA^G6JKke z6=0(U>ig`jr}n^EMI!DNV^7#Bf^ zOtp)&!ZY#XdmiLsmEOc6$z1#|Vs8NquaIwyGOJCNUtT7J5oOeijMC|rr!&^#cn06) zhxd8em)h4l^$MRum1b}vieuddH@6rEg+W!@M{yVIZRtE)d=8l?0fu^E(0(rSumTPRHr7m{)IP zUe!-8wPJakZaaLY4+$ahi8jBYeeN%;T{4E(V9Ep$P}s;4N0(01{mTKl z)^Hbv6!2}24cedUo0$>hO9Ej&7l@-38k3|h-Ic?IePDBJk+}}n(>SYxU|w83h;`fk zRrbeH9;LmgzVx%wfsZ!78ejf|&c%P0G-`oY4zTsVu3*05Rk^$ib>NkCRTT0pb{Y?S z0<{Lqbl#10#8^pKulUGSwo;@0iuS&uY-r#Bxm3RA<&VW&MhH?Od1fxeh-BID26iyK zkT7uTRIL+EVX>e+jzAO|ouRdtq9F%;vwOZF)^h>)-yhZvNo1krWqQxAoZA6l6c5;2 zfm5A+_B$UJLL>2x_mIOTvwYggPwb5o=bI8mdBxJO3E3f{VXZ|4gC(7E{4c)IqWsQ)^L-OnFeP|Z4pD23nvWC>@^m!U;*nfD352Anrl!KR zG;f{Gc7M3}aPcAin%YOMKz&F^QHE~y7U5Uojro0nDP`U}k#E1&aXb-g)>lh4OQmEj5@=|gGZAST`PB2( zk^-v>Q@i^{@kwrm1G!oSY5tQUvV_l?P@#@3*K*>3(M!fVIO4dVV1>qh1q{OPxIz!f z@!h+vo@LzM&5+fbO}&JQ3a|3@{A|tPs{!PsviH9au$&0`nuER~mAkTuzqTF5y;?!| zZOJuan<4R>dXY1q(6&Xt$d9@#P*( zVZdYoU$)Ru(L7-;s6Goyr9|L|bXPDHpZ56!i8AQxpTsS4Ntni4&jL5-(*MrVRQk|y zs)C9Op*JBF%#Se?C10NBXBQaJXzrhuOEL+sO#e!b?v2eZ9jge| zXgLR*qx&TE^i0+uT3MV^uzF?it5C~^yYb?RLzgef0h!m?+foiqc$G*x=x2B=aV%5 zaS_?Xi=%~flHr;l^2i->7UvEDxhV;+IKstm#O3W0uprxIHPH;87Sn-KlN+n6xLEWF zMe!`>(MG>M9XztRw0EGeU>9ss8LA}n06mHX5iUg$yJh**+x!wi=xtP{0_5d26T^QS zl<~itxc;w$CjXO`t~EfU2)+m3m7>`YSGh^c8@b!o{X@kL>tcgf=X__VM;j~UfCXc z8u8nnJXmPaw6L7~B%H`s&&Zk*=Vs}~!*>74r^##+_D~IP_Fp6}!gQUwA-m>|NiwC;8iTcHsTp?QNyi9e_;z zh1NGWZVbMCCjtBMK3n5jzOg(f8=s2LOR+fU$vu<#pRIda605G&8$Xwt#@!1l?Mnk0 zj*G>uiS0-#5Pmf^ZH^0B5AQH}GOQN;&J8!O`exHvu$XP*zFIE5rDl8j*s-T&{!Nh1 ziM3Oc@|lV;e8)v6MQ#2jg(Q29+>x5@6OG$%vgzkfzo~<*Zhpg5$=-EIC1-MNC)Sfm zs-R%8AKw9m{*}C_nxq(@c8EN)>(f>(kGs^XAu; ziM8l<&CewUXXmqZ%#rtdq1_4zH)ZwiqFI4^ct7oQqx+8?ZVm8?WyQTNvM7 z7X98Xxg1L7Fgkhcn148^&iD3>ClC4L2TIU4w;jcI`%B(NP$epUt|*UqEKyuHzOopA z=V_ubm=970f$=_BC zOSO)?Euz=E(hKUV3I1lsv&3aG7&y2wPPbUZWYik)x)Y70ep0bDye~G;%4Z`L@Y8ef zW&Ka4-sj}QtwL`Ly(wDZdQ;?npACc8A()hPH2^WIs|$XmIH4gOEkc3jEO`;*Kjr55 zo|D}}1nsvu9}LA+UQK5JkMvHEs?C3W9Q3{!@#&KHeq;?s4M;EZ`2P{y^?#y5{)OK!HJa`k+Mw$qjj*qfHsh7ayFM0X{T|(A06ojZ z>Gd>qM5BZy*q_*G4zI*Ok?AG2Z=qr>$7WgB13T*qi^~bRhd>oFj=OB|tJxf=CQhRpyBRtq!}ZfUOm#%H z9X%xrqI;V7#d`GCa!0>MWp^xxRz!Q&mnzPiVZ5BhPS5H?`dnPhsC-No{N45vqfSek^cn3|d~18w^V=7i21lH8JuJh6v>!ZpfVUkM?azCz z(J~d?8ev}LFEc28BhP?%sSC$xoCzB@aY_N+pTgm3e zvyR_AAUDOPjlKoC@ZoQG(*o1p<k(d;-+LQDT&<;D6321^f$3un~Loth8rN zyd;wgA-a|iLh}G$xlHJpPhR^gkm^$_&_-Hs7-%EcX2em*S9w{ST!<%v#ymEf$X6Sq zT5yhKRc*1`XHEnPm5_zV!yNsF@ zd8UQz`A+nSC7^xMQ4ZcQUcY8}X6X(J;DuiKo`KE8(k5evh^bk;3C(Nw737%B}tv^4GV42VQH zDnX!;b^cWgtlABdTZCU&3=x{Jfze|M*^s7r0tl?=F)v$TRp9gU5}x9K)amxj-w;p8 z=*iI@C%kqN2M==EmybChJD$0TJ0Pv|;-(>pYZ}szrrjy}BQQ0%=y9@aLJT3tj3I*X zw3~hkx{+t|?56)9WIca$9y)!;@2&KMd&cwGx5WW%}kRaAY`@6K9kQvNoJ7Io& z(d9RA^Q>E{8;BPjo{4EHz>(} z$4HYkZ`f}dvd$Gjh+BZsPPw~hqzO#YkHB;Pmvr?1S1g?WwKe!pE%`r3nv)_}>aV+J zWEfRSR%-A$FX{I`Pl@eV3y!>JLEM<_M9+34&l0xW1guL7ln0&usx55Kk55QQc%|qx z^wwn1ioEots6}(Jrod`C#R|BZuhUEbwBJa&^!0Yehub{&5R?2WLvPuRR+|D+i0GOd@r4fezIXy_srZhsxw;yIKo8_S4`|1;Ps0TB06KZ{j9c5!#ldQb!by5M zXr>5Uln>4SFajD*`>&{9I)T=AkMGS# zKmj`gA+hBaJM%>qHiMTEqN!Ah+Qs`ux8m+v)f8F{u0FJp?+#91E>)aBnyzgo8M3Xp zSliSyS1tn~gw;}f5xw9yB%j;G5gB(~UG3*}r#`mQIz@_~Q^`5JrYCIMy5i^|cDsUk z)YmjyqH#}XfsQzCZ+*c3CA?nU>$IK)ZkwhOc&R_a%x@5$$~SpA<(lMz_6p)lKG*TA+VH^AF6&2XYL9_WhwWa!x%rCKRaH<@9{Gp!Hh ztME;KDZbFDs+`tA_kxT7dnsi_Jl_`vv`j&-6XQ#%x3|_P)9fUrZM_ii{%y`DI*GS! zo;>5Lx^@^D@$*39Nz`}gI0Em0WNg6!9pGWDOe~UD-YW*Me{qhaGUeYgZZ{kh`dt9L zxq?$CqcKcx3VurTTYvmB2ie4u;FYug=n2*Y@0#V@-U5YkZuc2;A#(GUqZV#e{JF#1 zy>jmqX#c;1PWPV|@?ZRj`S`wDT((|@*Gp5`gJQQYxLSvGxor#`j+RXcX1g|987^PU zzI)ZME#y(u)vE@gkRQ+JEk6q>o+nxA1_ZS*!$Rq>5#W=RKQD($H(^*vCI8no*sH!1 zzrW;&|83ZPpwdV@jS3RKlYZS@M(eJZz7`KElP*{=y{93n8z&f@{r|$>sZy@~=C}Dy zKb3vD>;?X!%$WoxwJ5|@gO#9AhO5zVk&K{)1{#@#BJdXSBbsd0hf55@TD`TxMi2cn ziZmRzJMn83j`+31eEeEMiW!O@fdgLE9J(LM5Xz5!y-HN9d3dfS!rZvlh9SgC!CYEJ z5e5ze%R8t0{XayskXdbSHe;5E)oU~qi>QgE>b|9o{Pr(zVk#7A^qu`Ju!3h;Li1)k zuv0&EV4aRsDAl&_Mw6{=8Z^|I4Q04J-fYllgfd#N7{L&L*usv+H-T0}_N!b3F2(NI zyI73;!MP8;|0d=6#WBah7z`gLLeH&51|*A}&{Yat;gj(!snCsg7iI9zNFoT}6$pVm zD_eD+c@-DME`c6%p1W^h4CA2G>KM!wJ>wRi=QpWU;kJ+;F;w8S)SiDFkhVikQ&0pO zFo7;$G}ohg%dRia7lnn;S2LlK4H)1U>4xdfN1mOnr-U|1Dt z--sYUYi;-Q%OxzT1Ze8OdLX+_K`Wp($~0jzDr|=PeB%kclNZpsB6h66EQ0br1%=a) z;_i6dqExWL(M_K}m8d2k2PP8H3isVS`Vu;J^eF$@U!0WMonF~o0C&F~JrV?qVWIE8 zKpOqev;6-LWW@hvPN(r7bK^SyYxquOv3yIAY2g(l1i&$u{Dl zm{d}X$UUA|aqH*;9-xnHA}Lx+@kxx>iFQcwN`cMbX^OK^0O*@{|A=r;F$&I!zq!Ev zF=D^$on5@JM=UUf$um;uoi%Q2CZo{;S77D3>nF$}n_U_jCkh<*??ZdjiZ*OFvP_#i z#R}r=#15&)Mr)+T>&N=G_TBeDxE=WX^D?joIr)8@<}7U1Dlw}Lwi4g7N&|^ujt?#*WqNwA50;INw5kHf`asW5!lorCmHv&^3yVALPV1#(;``i@qE*WlA@V zuLs8L2LdB6jNmgSyT|Dd2CwV<-4{If)d4xMWx!@SsPg<2(R0vg0Fa8ExQTxlv@0?u z9V8!iQc;{Ici6OWJw!Ko*tEDO^bLL{c6~7W$n01BujO4UmEVbxR7dAmU2I^1(*<`a zNy#$R2m!)Vmz$gKtmV5T=RZ0+H2WAgd6rfv9Vte(#jd${jD{tRmu$sln>N*vW2net z^d|=mcMYROR+a@Cia~0nPnX&ZSs*BT4;cPqyt~%x=2dbBFCW@^lN*@9o$q0b-|$bb zoZ{Jy=B1FP^#T{yEY5%*efIy|i;qI{zBk{~^bNx`QK82i;%=utypuZQS#G(MXy2P3 z)DYV%e$!chGiT`KWDWl5)&u;nPw&kRCod4ony!Zqa=ZRxTe@?+c(eNSL>OWzJi4{i z$Tlip)poyhE(T+NV6+@Ee`Fs|k{}xvFJ-t-4oD5N_Qtse>3h}<+ix;2hoyUYhwJZ_ zmYTKLp;CtLXz%Mf&N12VW-oni@^XEzzqdX(*%3d?9lme&M&E;YqIjl$eX=@as)|#rFY*_w$-E0jtd+ZMf@|{^^zT-B9d+B!k+Xu0%C|XpC%p~sRPMBLO-?Vz zu}Vpq2ktM#I!vS-N$Pp61@_w$2Q8W!?aF184-2^_>g_7@mG^p^CVvVWvPrqspx0`8 z4LGG@ywYM`Y}~fruhhROwKMHENzN|Tso0+Ln{dxAd0atOx!UM#_%gwRjQ)<85R;4L z8I_n5-yKn#CT<7qmG1v)aG2O(Jz`^L+`YOx_Qj$pDDeIhW%1vw_8m0d!OYArzsGp& zT(c*Rd56X`9-iKv9jgqFXL2gp-(MLe@|+h_@^bC7o6vrLpsOsgpeeH1W<<0*e}I{r zUK@Pi%~t6-t1{utBk{-)zdx2N6(+@K|80NuGjrp$_xq~m*X?~`Tvt}tQr>#s@RrZlCi|*4 zM!|>+`$okxKgK71pRBwQ&bZ=Qyz#oV5q;W2mRs8(_bA0|>o7i4gnSgFUwp(qfeZIg z%<^iKL)8=Wd3HbOmyW(STk>Mo^!&%RZ~4H!rsC+X@FH2V+kGO;^XSQDy!~Ls5li8s zgFk6-+JN6X-kIp*d1zoeN?x?DAF&G&+xAKy%HOVR9Cj~%wA4S}Y`<)17fjxAON55j z&)FZvWrv^Mis8PnF>pTOGgvy^;T=Q!8OR{iV z^)u7y9(1&rUHm?9P|IId@0VN{URN%-MDU|tF7?~k>f8x7NOt~_#qaU8?s;kBigc;` z^3#C#&%|FjUz44 z^4)UpemP&GbWvSFPv+TjFQaQ-Z|4GV!i(%Rc3S0+Htl%6j1}TWzPpvqjc$jJIpang zUsE$Dx)shzX&yO#rLL6Q9C^;aFWK##K9arnOPYV5rTaaKS&hj(huT|nbM=AQ4lV9T z%~O4IHe73OA%TBiq{k4yj;V|QCda9-qaWV{kz@N z-Oho*W6QXTl)Z|%(>x(#<0vVQV(O#Ej^E~Pbq5)-)Uc;}t*P+uYjn42N@*Yb#`5n! z=}yZI9y3b!N)%Oc+)L*=Fx-59#9rgA8Ji%wF37*n-W`v!NNYK?xOV6_XLoe7W;*pS zOH^BMJ|F+QryW0A)|+O?6W!vSIH!c4_3=iPKN2$7v0K~6*kPx6fCQM<_G^!_+)~87 z8~O07!Ol(V;fE>KWgC^6%U=S*%e6O0@vCdw>5?1_Sv#NSYVgKea+=K8a}JW<_uh#M zPkWoyVBJ zJ2E@i91XR|J_-|euK_Zd=x3-*--{D>@4TQ{-$W2TQjII#mBZ0aM(Qc6$3m?`ZlC7Z z*EVdVLM&{_#o`jnS8+y-o$D&71KmvqSGOuV^srASdU&x?`#`#9cvY_Z8h)we9(pm> zJJ``V_O{iss9w*=!PRaf^r8fi4!6~E>}{1{_c(FK(On#3A`NpjjXNx5sZ!H1Qhf8r zcH}U3 z5Kqa2>qZ_abKI^TjS@Kb$<^fT#oHNJJ(p^IB(YZT}dR`PSP}r>fYJyRwD>uXK)K)2jAMh zO<0K-8aE#+k(=NaL^vB7T=N~Ajxcu7Y4)M_ZMq)p8lGxgv?E=-dGj9PLPPU(x^YCZ z@7NHLcW6ae5MfC-6_=?_crhH`#hVHjnSZDEl^S6MLOWNpycEWzl1*K+FskWWMXH{( zL~=V2Ryqf{2ruvo&D9w8DB}p8>G-F<#)kX|LPd%%OC&~bGUi%8F|xkRUetN_kMk1Gz=5R+n-bQNU$`lLJ0Jp%6&udlvir{!W<*%{I1W7%u0 zg49y#H7`28SZp>|)7+a3Wo?;>#?*MHn2&AHn2+_oKTz;;=;N8pvqmaQZKSM~KJdO- z*=jx(#3Lc!;xhZu^0L=03!L#zCrf=({Ds{&^qA$QeoMMT`xWPj?9<+Q0oBwZa_4G9 zPJ2FRk$Bu(Eo~IOeqNoxyO?fYm6x4baqFtmJ;KT(K}3Dy?bA5;ejBOU0tom=3VQ2! z{9H8VK#E&?`G~KWEgCa#xMmzl4!+R1*$)jB#YbTdM%aay$%cYwm%r!{;E2N3(rymM zMA@-e`_d?k*p}=2q2kuTZjLggC9Rql+aq>g+_!}YE7^F}b2ZiFBR4KA00}s*eWv$) zzvYoBjx!&o#_JGnC4AUp3i0!NPp(qTm@GR2n?P^nL1w zzt1cOxYPibkuY!K3g76sTs9QXs5mAH}pOS9#VKwT;3 z3ENu-$=m0_(-E-?pTXm#qx-6EM``MWHVyEXNcnR=lI|eC1~sZQ%Pg~6UeqiPx_+}f zC=CzKc&;UPkVEG>EvY3PQa30!q|a5qd@s)viK$5r2gTDZ&sR9T`}5?%IUmppwcuZ) zk_vA9&_+e}U((%Th5=Q7^MuDmV?w%aq^ixtX4L(|RARG6(=t!E~;CD6L&#{kceiMyxFw&bXOGI^|vct#LN56sv`v$CnbTwYW zidOfanT8M|n#7^M4-|mqW$xV|Gi01LVa0?0>~hF7k1%27c)v^SX%usCfaPVO7D+9k z7CyqtOToY6Rny?2ISrgjlW%%Aq<;VhSR%9dz*eX+?-1B!sU$nK3nB?pt{Fg5LYt6t z=xdi=!8+f}F|>2w3%h^;Cp2>G>%^4{Mq>uOaO#AwvSX31m7x|>+U8@CROXkJLsIOd z3^v7F_X0=L55Mv!@@go7!Ioktc==*&+qdp0DN!8IVUN4vN{FZ07{1lMEW@PZ!Fs4E$4b{+GG28CtrznuYy4u{!b*dTc=!ZR|_$ zON91^Nj}=hE{<2)NC49$<5hvC;3R2l!(RoEp~{Mny& zml8mw0Ozr!0AOFuSx{Fw2~V+@X|OvZ8jz3M29p81#@Cn!l?B}*IFq6|MG z4ZJ5U_!NAIOa`>^-O9tD65r-N?v;jbYoau!1<#b*9Lb^+dI7=OJV6c4!O0}zRU`Za`sLt(DOU{D?nT+_P+G0tfb90E?l0air5CeqeLb4ebHv8Gc;k9}z&R%aRl6b;B-(-A!;nZ}9O z1|ua%xp$EhL6A#>^nYV9%sgPrMGJE>{zVH17DHG_`4C3*x#n9yte&k0rXz>mR})sH zeCD>nurB;q>Jdd8H7no$G=kTJ?~mn&6IX4(=Td_?KrY6=D5LkK%_spg@xF*Q(#r&k zVeNt#X-L&$l~|+eUIVYOn2^)i5Tp2m7Lgr2%gYsarg6p*-2hg*g+f-`2xr>aHA7}K zU@;;mQAo*D*|C!VHS}7>>TMyg7|+qW>)ZLn>e4Q#%;6z=EKVOT;?YI|nj_})Jh8fc z?E~s+7bG6Wh42HwW<3{r_Id*TtFLkGlAH~go<@QQvOmBZmnoPkM;;0Z==ea!bS`M= z0GUes*ScRdmn|;L@t5WF+idN zAQQ|5=D^U`lH6paKpuQLkpyp4;U{v9mILdslyJx|Yh6cn} zB!&HoWHW84*1=N618|pW3gDjA??6H}K1l?Tfd34#u-1`;9Aot<$iEQJI}k%9h*&3M zF;g)Z9G_5cLLgV|@ppD*y?7 z@cXM4p!)Ab5>^J}0f;O+_LG%e(qe1_e9ykC6$z%Rg{)UafGTHmZ>g@M0k1JC*2MsA zWdk;<;XYH8POx!As0d&sd~iSleE`O`+y=-WbwwFWI@*-oCeGQ9C#NoFa@O= zQ{=ok9z%HXXb=n~s-HE}(cAr|vsC(Kbf;go8*%L=tDbRsc-{xSapj&_p5Eweb;ed1-_3S?d+T+U+ zL6~3Goq{&lTwAJN^u}PG*rUffG6Boezq&yLG2aXgl?9OCBB@r`<%Skz9O9xtvOg$D z(89Qx^O~jn7H#)KIv~L^Af6zAvIABD;3{|nTDU0*?sFcZVD~_jnqogGsQV8vyhgOf z>(db6z?a~`Wu2G>!0N%3K1?@FDZ<WhDMzq)D8E}MN5BV-ptQ!uYhirajRKzd+aQskfrbz$R7Pv{7J8=}E z#oNLb$}h^Y0AD4a4OxFVdQ4maMBHn>CHSv%f4W8D{nHiR#}uN%zxRsm=>H~n^~T!K b@fM3EtTo{z_}@p49g}~g{4h)Asn7oa`qsy; literal 0 HcmV?d00001 diff --git a/src/Skeleton.tsx b/src/Skeleton.tsx index e7c37d9..bf10d70 100644 --- a/src/Skeleton.tsx +++ b/src/Skeleton.tsx @@ -18,6 +18,8 @@ function styleOptionsToCssProperties({ direction, duration, enableAnimation = defaultEnableAnimation, + + customHighlightBackground, }: SkeletonStyleProps & { circle: boolean }): CSSProperties & Record<`--${string}`, string> { const style: ReturnType = {}; @@ -41,6 +43,9 @@ function styleOptionsToCssProperties({ if (typeof highlightColor !== 'undefined') style['--highlight-color'] = highlightColor; + if (typeof customHighlightBackground === 'string') + style['--custom-highlight-background'] = customHighlightBackground; + return style; } diff --git a/src/SkeletonStyleProps.ts b/src/SkeletonStyleProps.ts index 4631386..f504eb3 100644 --- a/src/SkeletonStyleProps.ts +++ b/src/SkeletonStyleProps.ts @@ -10,4 +10,6 @@ export interface SkeletonStyleProps { duration?: number; direction?: 'ltr' | 'rtl'; enableAnimation?: boolean; + + customHighlightBackground?: string; } diff --git a/src/__stories__/Skeleton.stories.tsx b/src/__stories__/Skeleton.stories.tsx index 561fdf9..5892fb9 100644 --- a/src/__stories__/Skeleton.stories.tsx +++ b/src/__stories__/Skeleton.stories.tsx @@ -427,3 +427,34 @@ export const PrefersReducedMotion = () => ( /> ); + +export const HighlightWidth = () => ( +
+

Default

+ +
+ +

Narrow highlight

+ +
+ +

Wide highlight

+ +
+ +

Fun gradient

+ +
+); diff --git a/src/skeleton.css b/src/skeleton.css index 19270dd..f0c3680 100644 --- a/src/skeleton.css +++ b/src/skeleton.css @@ -32,11 +32,14 @@ right: 0; height: 100%; background-repeat: no-repeat; - background-image: linear-gradient( - 90deg, - var(--base-color), - var(--highlight-color), - var(--base-color) + background-image: var( + --custom-highlight-background, + linear-gradient( + 90deg, + var(--base-color) 0%, + var(--highlight-color) 50%, + var(--base-color) 100% + ) ); transform: translateX(-100%); From d9f88d9eec4142f5c655f793c6926562ae42f203 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sat, 21 Sep 2024 12:45:07 -0400 Subject: [PATCH 2/3] update README --- README.md | 19 +++++++++++++++++++ tsconfig.json | 2 +- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8618fc3..50d7628 100644 --- a/README.md +++ b/README.md @@ -235,6 +235,13 @@ return ( true + + customHighlightBackground?: string + + Allows you to override the background-image property of the highlight element, enabling you to fully customize the gradient. See example below. + + undefined + @@ -273,6 +280,18 @@ const wrapped2 = ( ); ``` +### Custom Highlight Background + +You may want to make the gradient used in the highlight element narrower or wider. To do this, you can set the `customHighlightBackground` prop. Here's an example of a narrow highlight: + +```tsx + +``` + +**If you use this prop, the `baseColor` and `highlightColor` props are ignored,** but you can still reference their corresponding CSS variables as shown in the above example. + +![Custom highlight background example](assets/custom-highlight-background.png) + ## Troubleshooting ### The skeleton width is 0 when the parent has `display: flex`! diff --git a/tsconfig.json b/tsconfig.json index 49a6903..2ccda84 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "jsx": "react", /* Modules */ - "module": "ESNext", + "module": "nodenext", "moduleResolution": "nodenext", /* Emit */ From c0973458b88b1f17cca93dcbf4b7c3ffa029d1c9 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sat, 21 Sep 2024 12:48:22 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98066b6..59e3f20 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 3.5.0 + +### Features + +- Add optional `customHighlightBackground` prop. (#233) + ## 3.4.0 ### Features diff --git a/package.json b/package.json index 31f0b66..860e1cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-loading-skeleton", - "version": "3.4.0", + "version": "3.5.0", "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.", "keywords": [ "react",