From dee4f8238571d150859932f0df9b874e3d20f290 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Thu, 22 Aug 2024 12:27:36 +0100 Subject: [PATCH 01/16] chore: implement new brand --- documentation/components/app/Header.tsx | 4 ++-- documentation/components/markdown/index.tsx | 4 +--- documentation/components/page/Header.tsx | 2 +- documentation/components/page/Layout.tsx | 2 +- documentation/package.json | 2 +- documentation/pages/_app.tsx | 5 +++++ documentation/pages/_document.tsx | 2 +- .../assets/national-2-condensed-bold.woff2 | Bin 0 -> 41206 bytes lib/package.json | 6 +++--- lib/sandbox/index.html | 2 +- lib/src/components/dialog/DialogHeading.tsx | 1 - lib/src/components/heading/Heading.tsx | 13 ++++++++----- yarn.lock | 8 ++++---- 13 files changed, 28 insertions(+), 23 deletions(-) create mode 100644 documentation/public/assets/national-2-condensed-bold.woff2 diff --git a/documentation/components/app/Header.tsx b/documentation/components/app/Header.tsx index be7c40e10..2fbfc5dab 100644 --- a/documentation/components/app/Header.tsx +++ b/documentation/components/app/Header.tsx @@ -8,7 +8,7 @@ import { Flex, Drawer } from '@atom-learning/components' -import logo from '@atom-learning/theme/lib/assets/atom/logo.svg' +import logo from '@atom-learning/theme/lib/assets/logos/atom/atom-learning-logotype-primary.svg' import * as React from 'react' import buildConstants from '~/lib/build/constants.json' @@ -19,7 +19,7 @@ import { useTheme } from '~/utilities/hooks/useTheme' const NavigationHeader = () => ( - + ( - - ), + h2: (props) => , h3: (props) => , h4: (props) => , h5: (props) => , diff --git a/documentation/components/page/Header.tsx b/documentation/components/page/Header.tsx index 87919f1c7..1cccb24cd 100644 --- a/documentation/components/page/Header.tsx +++ b/documentation/components/page/Header.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { Box } from '@atom-learning/components' +import { Box, Heading } from '@atom-learning/components' import { Container } from '~/components/page' export const Header = ({ children }) => { diff --git a/documentation/components/page/Layout.tsx b/documentation/components/page/Layout.tsx index 98d636df9..32425a9be 100644 --- a/documentation/components/page/Layout.tsx +++ b/documentation/components/page/Layout.tsx @@ -44,7 +44,7 @@ export const Layout: React.FC = (props) => { >
- + {removeStartingNumber(title)} diff --git a/documentation/package.json b/documentation/package.json index 19e96c533..0be0af08a 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -14,7 +14,7 @@ "dependencies": { "@atom-learning/components": "0.0.0-semantically-released", "@atom-learning/icons": "^1.20.0", - "@atom-learning/theme": "3.1.0", + "@atom-learning/theme": "4.0.0-beta.1", "@lukeed/uuid": "^2.0.0", "lodash.kebabcase": "^4.1.1", "netlify-cms-app": "^2.15.72", diff --git a/documentation/pages/_app.tsx b/documentation/pages/_app.tsx index 3647fc680..9edf34bc5 100644 --- a/documentation/pages/_app.tsx +++ b/documentation/pages/_app.tsx @@ -8,6 +8,11 @@ import { useIsMounted } from '~/utilities/hooks/useIsMounted' import { Layout as AppLayout } from '~/components/app' globalCss({ + '@font-face': { + fontFamily: '"National 2 Condensed"', + fontWeight: 700, + src: `url(/assets/national-2-condensed-bold.woff2) format('woff2')` + }, '*': { boxSizing: 'border-box' }, body: { margin: 0 } })() diff --git a/documentation/pages/_document.tsx b/documentation/pages/_document.tsx index 1066ba118..4eb7f051f 100644 --- a/documentation/pages/_document.tsx +++ b/documentation/pages/_document.tsx @@ -10,7 +10,7 @@ const Document = () => { Gvf^!iN3WS1qgU>+{ftF|iHUcCAkXQ?d zE&v1|1&<^Lon;J!A6tv?kpz}Bhv2FKow>^lUf~pu{Sw^|YS}k4I+aUu<0)2!FHyr&4 zdN@_so$M^hc$qlU)l7?Ju}i%UHxPj?lJBj%hf1dr~f1m9L^bPlrOQ!-s5)$8k__n(&@h@H)Q^8!Yx_NWi z-ghDz2cw(zv>0BNbG7=SWil1^{te=nFDsF+Q?_k-_gRiZ6! zhTExFuv5_)?Eb-`G@_>w$we8<633^RwLBZic2STlT>TGRA0>icZTVPbA!#Hc0sWt+ zr<%Ru{}zm;y$xv4FWT6;(Zc9Sp^zO~CQBGXL1Wu?**a|YZ@s(Ao-Dp$w&4LUpB)9; z@)p3!?G?@yAxsb}`EEA zb$B(mi`wR`>TbLB-)>QV>$}ATz_MK4Yip6j3Dl?J_v)&uEcd}LcXkLN0ZJ;jwL2d6 zz2{?)Q#)N^PKVat&ngEbm*8vO?9c2n2S6PF+sPe}(mmJn;t-k4l3lK1WQ%q7gOOO2 zA;AC%A&8e6V-OZ8Q5btrjL8lbnn4DZqS0VjiH6kfepJPxmDPI$9)m?0tbX~{^H#oR z22TxO0n>Xf%~k;aR;^_Z;NAnO)GHB^QHEJ~mBTqJTrNCPqNMEXQ-K48k+AaV=lQw) zx$mvm-Xf_{BSZO8{QaFMt@6N>kY)lu%U<~slK!~e4ad@f}$F6CYOyPXs0Kor0UA0w7xo0Gk z6{|!I`N#}`3?E{9b#?DlhKm#`Nd?$;FFOBg?`QrJWPmTy5IhPj5DU}x_$pQ5WT!2a zUrR?xgzn7r+@VArs7xIEoW^!4pLM7jpQaQ974 zx?I$(1(^*qy!;OU@Ox+JNTb_c-=n{)P3ri$%I&6vlozldSOiOG2+ZRlpn&yfO#L21 zkR^y9&O~bxlbYC{UjOyxw7F5xIo+4CCmSl!RUBdrL%`!z3ha=w; z&o`7j7L7do?9BH7qO1Oa`&CJyf@Zma-qU^ znT(H(3nGQeXk>UB$@=K)qpuHA1(^?XW#I?8c=)&)@4mVzv1UGds`OahWz%n`&lO_UdVNmJMT>XpGXXNd~|+6%dbP zlFYm7D!ASNP~|R3N7SZhu&C3PQ~?)tkuqK2`Oj4QQr`F2)6`$vgT>cw$kStz6l_A$ z4{eZbl8}W$*EEWyn$Lr=91PcZes9#MCIz4|oNuhOE;QbyyFr#4r=4gW&(q(hoQY*W z*)71=EsJdwdQ%D}*7*WuD3#Yui&d#ZMGHor+$&HlS{?w!-f#f|Jn>_${@a_`=Mt@L z17aaf{4oEaU=mfMScsHLh_pzpgwXhVP0jW{=-{X2Ss2&}LgwTino(}Aii*)Nm&#OZ z)1@f!-~SNsKV^a<84)C6k9^F85^_k&Y3Bk6bBCr>D6Y7!c5mkPcFC>P-dgV^6~TUBJ`gq-k5LarK!#rKYQ z0S_VL7fME7aveLZRGKg^TNrrsSWImBJ~Ik-d4wk58pTnJtp4S+owl8CuTM5hcDe12 z%nP0-jPNuggfJ$gy}x#v6Rk2fZ2r5yWUuB*Hz5cij1WSIa0qTnELc!IJUq&f=_cZ1 zaDLy!k|J_?FKhM<)V-{|eEWI(DI$Ua6UdNE?vXvMMylRB3ufk=5uWVKX(!J!r2&rxcC8~rrIN49Wz6+4T2B^g;1IK?zi`QRgL_Yw!c*xk1S2lGH9^w zj^Vs+>C{TgZ`TtL2WZ%Gg60xp_&zCM16VQPyWU}Ox}FY40A1lqg$AVFK@(bJ2Nx2EwUB1&U|dA z?YEr2C{2_mNoAVySQckj}ae{(4-;KRnmU|4X6N`fLY*cGLdW`FOt8Yq*4kgYKlRU=29?|RazvF zUF5{MR57M*t|z_@xsMiC|oafQWL%IPXu2p8xRRf*!Fd|alO?aFwS3#hc7 zCK4-onH}UzD;FLdJ!eC8#|UDSP zt2emc$aUj~P1aiEwZv~3YHhYnY3;~`9_R$xZpI`&;g!|kaLMiLSx&EvMw#8RmE_5^ zuZBe>TE!l8Cti?rcc0pkX_M_8c^F>&#x@U+`Y`UxgLu3E1Z2-f9k_}9VcV9LO$txWo(yuT~^~~@0X_vy=wOMs1Hy2cuvo(x6_oq zg9c9t{!{ed@emBdNYQ9}1+0Ws)3Rr$tETZjPVdJ!s$!QC zKhDOvJYyV_Kj>&{fh9u7-me#Bcq8R(hUxRrsPVXHf=20?WfqAi@mw`i(8vD_H=E#z z|5TcMER6J59s-Vm-gX08P-ru|sM4!RLmn@$;g$E(R^Popr@L$rF^-@rF#VgKjJ*it zd?Y*ENguS0$9@*kp715O>$&UdN&WE9W?JW*+}(5+lRm398N}FF>D{kHocm+FEX~#s z!(-{Wt&~+Cq>qVDd>&XWNK2b8s|{c(Yf((;?|+Cr2i5x%Vy}CV zZc1k7-MxAs3wr6J-_+vqcw!YH#u%&7Xf(EJu?T`7G?38nRR8tv zF_j`}eHRNY5@aZfIvZnwtb{0-ZY7+p2uNguY{D%Hid||N)XQVx2@N#TObe~F(IK5~ zy6K^pKKe61;+mjf5^Abg9Ex$_kx3TW<7!EATAtO;r@}>aS*=>!=J(xkL;Dd8N_cK2 zrCBv&x->Tmrm`07{`U-JMY6LSvJUgJY8NTbzR6iE?vC^lz3lLuu1GG?s^QK0*0iqL zaQG-UMJ0+PN^WI$bDF(B?ZbrPOFo{{B)i`nJHRdn6BxxW48?%}@o z5I)YH8tEd{uhnY_>6xSFL zQpsXyP41Dq;`Io16^&JJQcjzb39p1=^Z4=RL`f={S$3YrY=`b+Y^mUZ3xq>c6IKw# z8&!s;Av3EfRK%BeSA6v-PL%uF-RwSmFkCV6>4A@+PAy#RGe15(X)@E+ndS0`6rF~a zS6AtE`=)XG)7`z;9?K1$nwjI9V@*tDMNu$mVn`5*+Q$zFsOT!Wh**Whq$s~s-Z=AU zbQY0sJoyAMD6C?K@T$_~S*rhT;;Z7iTFaWvl|8Ks>gS3l$W{zA#L3B3r7c0Y97$EJ zrBsw z$Hrp|e;FG5DjM;<4iyA}2lIE$4rieyJ}EfQCw|YajXn9mp1Lg-iMx6? zK!?~=lufeHKZ}3!|F(%&h(|=Rs!=(xEdxvnD=}Tlu!pO$eYS6_(&At!DaaNeEJ`f^ z_QXqw<^d%Pc79VLn#}*ImvTMr#WbCMct83msf>@uGEyv3eWG!a`bQHkF=0>c*U2~Q z??hfv2vFOK(vim0XY+X_j?^|)`|E_;kTk&Kf# z=^bfrdl&Jl8*jXW?e40CM^uj*hC;=Ro}kVLG&rcOdhN_T#vW~~4dK0{Lg6q+Sa5*i1k^V(s>&jZSQ&*jZmv+P+; zX3nw8k37ZsWpO1(v)jA7SV*2&tvq}2C$?W?=S?p_u;sKKKRkM9rXWEjF$hve#3mI2 z6d8>j$q9m0R?}Mj9%W)NLQ?6@`sc1gQq|*v3_f6?`j~nsI*jar955D1beS~;iDS|A z5l-9b_7J#G_(;9vm_RL6vFoKo&v zG%1B%1PK8>S-PPN*|JGD4~2n+w?4*5B!Ed38blrtMFH5g6bBMA0uT`(DPYJY0#Dym zbmT4o(tLJxC`Q4lK&h5k@xq9u6eu8j#A407#|}LuoY{$`k+r^+b@X9RLkpP=m)#>( z1@}RL7GQK!i}KO+w*X9qzyYJr9QSG@o?f_gIR;J?#8S-JffUe~ zM*1dr716*@ZV!IX4kg4u_{!4z)oU}YiG>$5GE8TvW;F(QekgY;wf&lz7_)Q&R7C1E z+z9Z!W+wfBDAc3+pzPmOg5uTBEU+kV5n)|2M1%jQU47bY;7Bijo+U030CY18YFaHn z{mtC*!q2uaec7Q9L8kSYWOx$PiE30|klF5q*lPavsh-tdEX8KpWdN^Q@(mIP!iRta zk6*UU!y8S1rhi*Z6%5E@g?>K1QU4%lok&w?F)%zrPI>x@IoQZ$BT^xt;BGP`?EmRT zO&{6v%o~>UCL*#iD(j0Laee;_83e3Nl{U5t+ylNEc+Up9$?mn-t`bi&trh+KP_Cqq zhtjmou1n?2zTb&dZ(zk)$Jq~e_PxmJf6lucpg|5R)`Os2|9pR(LCC>-^%P|8*523Lmo~LPIgXHIe)PRj%xP z8X9sY6YOetP$=jA0kaD^Vz~s6 zfm8tOQ=KH~whjpT*j1whwkcv|pVGHIM5*>n>Ok)#rgjGVg;TX+>ifJB-H4R**OLdG zX|B1P`m~q^G)jySoS~641=$|z&UTStlME!#h=gdTR7W!-C2vTXKH&2K5vUKu$d3TS zhZ`T&mz4=6|n9@b2Fhs+VZZ8x$#m7<#p`40r z0EQo5nDvsG<;NEYow018*>z)m$QkRE->e>fK93|CAZE6yL`uWF7Eh zWai+xtF=OTG5xRYHE0yR-tlLQZ^U5($3jz!4`4 zne6w$Jdh=d?jZwDJ+k0wP4boD7g`>X?DBqb0g1G=@xK|(cacT50`E}q4#9rwou85L z#tSd0SX)F=i6K(5qFPS|_Fk8I@=b-GpDA38D0pl*@D zOpaq{Yt0IZF%o;uo!&`geC|IKF;Splt{lMPAZZ1yBRe2e^bqeW=c9hmKMiy2@suoa zDSx^7oWAyMUPj9dlbFDm%JwX^^QR$E`YzC~dTbLjva7>jc@3Mm|N_ z9YIKH-6IB;qzkr3J};ly=GT46>PlGDxbt)6j8WKSMINVOa)Qe*MQ>nr4Zf#Y6LRX3Z7 z<>qTtF-X=$`EisfR$(|2W(+kH1xjhjR*iqM2MzgN3R78j^}sgQI_lu1l6OKl=MrEQ zAk4|6vI#xN-T!SAP_`=OqK1-RT1xUVjfUl>L)PQ^ZbTZQ0r-4boIr53u_mlw+%lEC zexv4wF<~0T_ggxu@)f>T{l)r~Fs84|$UE183yIuGh5h0?qGSj`h*wvTH;|bVdt~^9 z2dSLxXNvmG{zZ6tB=<9&)pXh4FUm3vpYDXa|#u zPtDVUKK;fdJ|1R!%UNli^k`}CpjK4=veo#)^l6*@roz>Xg55p|;wSnRaFAiFDc+qV zfi{$P#;u}HxiAS-*SjJO7rO{ttEl+NUupH^+(J??paM{GpVr)S*nK&koS9dp&c$gmW!{Y z&9FrtUdj1{9_ftAx(A_Vk-{)CK?xi`Ux}|AVG5$MVw5$GV8-CsXB3)N5HMdDU;`_8pL< zhy-HAA<+Xa5-5Xnn`*}~&2>>_g6mtwaq!RKvx2n+idoIzpW+-F-_xUfRVI$VoAqM} z=&KT&f)d;CM&kF5*n-!p7wlnaF-F=`S&Yxght%kVS!nym%%G2g102Z_gR^<8EwF&Q zC6@EBQUGtkg82#|by7H))2_SjyeLsFh!NwWcenyX zh!H7XdMVX}32FZND?NjF?qpoHyP1~jUginh&nuPe=BAO;f^>3QltEq_^UBYsfPxOx zp|E51DJrla#f28Bw98#l)$Jar>0=-D^|`P5VN_8#0++R%jg_Pp3X{oSmU8K8w8_(< zSG9g$JTVa+o~Bo}UzwI$3_2%4vB^!O-RcQ41CG!-Ys;cHR}8iyvJKI8 z4m&vQ?*04`Y}$Usv27+ zQ#z$~ZILnv$S7MT*)vzLWcgdOv1TWE4k>d6SFX89QLR*YLS1$9QhI)v8Y!Gl&{?Jt zOY=Q-xG+hrwcApVz%wqaJghv75XKW6G!8+2bX!}1WvxF)idqm_VHn+J&~BpUX&0s0 z0&aV-i>KB;D(y#{XB|3$LhRGqzlIYINOn*P6i0HAql?RCrL=q+tk1pHsz=DnKP76(=i(RRT9L1akcVEzd9D1*i>f)Uq1fF*%aa zLX;kIiRB}CVlJs5#>uZP#wh|;!0{A_dHnU&YY^)(p?>{J^{io~jy(zTZSBEShnnaM zh{#a@`kAAYiE#lxG|c++F*wYI0t7;&K#Us_26_m9A({Y85nMtz6E4Z0<+Y^Zx5ma+ zpb&0c@tbO{f6aAC8Aw!-(-McLuI3nOr!{u6W#PA=`^9lcSma z8V(+o7`tRV4OQDIcKN_Av;O4Qv=;M{tZsuB-t`>CD#+>B)cx{Sa*Z}P;suYA>@$TA zLAqQ5l@#>syi3-HseXP>$B{>;hkGPjEJkD06Ts18#k08;y zU%lInHhUfB>zn}6D7zGPiEfCKCPTh*^|AHJdmHr{_RJffOr^gTWB8BARbvVr9<~dT zrar!UvV92@1Re#dv=~IQr>{2fA3H8QEr`or?skJUHrZ~k!+f0^1-#A^kOG+-VkEgE zBj&!w#zC=4^_q3+HyU4jTGzolUreWessuyBih|EymY+aGlOYSAP(_q|-j|(tTV#cG zeC)J89{qB6OHT14bw!jU_Zlxd;6UU_O2_dvPHDFbH}o6|M>;b|2`x4QF`<9oVdD^X z%P4I;@E8vz5f4?#t4dK-3agS|mC98oID7^LiYt>GWuF?GToWV31G!4oYSwMo3m;7R z7X`79C`uXSR9r>M3_0@ERA&RNf`D=X(Fr9y^2o80s6%}l%!cSvxdJph>Nb<*IGT3Ppi16Mj9r+nV z6;{92&`!kVyL%6(@Df1zfOlQ$v4NF0c-_)cb$FS9mzNGmf+zuaQqz&=$n3J%O%FpMOTL~ZQC5Rom-CEdarmX2M#4R8`alRkw|tj22Tc~;Qc(}K2M z_U?j^dVwl0J8WY0j8gKI`}J<#8zf`3`4_P$jGj;tUV&@Ho9X#_cKyoT z;06XEzbh9Vwm|`Y?rQT?SD^YD3fEF=ZMD}|e~|_nY^V*e`44e(UF&)`y4kHBmQiMp z$|}2@a?2~ff(k3DxROdMtGtRTdpEj7H#jrD$Qoc_WwzFs9xT=~xciU{eOSgmJaZq>EFYPrmu2!_ zHNs|ZWT7fls!|Qjo&-$zO7bBVQYcVs{cY-AFZwsV!5{0EwkLbG59A0aQK!R*1uG8R zB*Xe49@bBZuzpF0^;-(8KN4X5l>}=BUI7~bFNX~(kP&zksM2z;nun56{O5k{a_<2j zr!=L2EOM=|9odo}{>cM*t71@8_wzvx5wX%LE1^^F${G)Yh2cm2LN9I07k_ZAvRBH9 zN@;i$Yi<=#XQjHHyPDa9F(N@%$7KzrGvchdY;D}uBHvmm<6^1bDc;!Uh#om~(8Zv1 zhX1-HNbh$FAS6@JFxf^}89iqMV@%pOi7A_ax_D;qt1|4=gCXI~w;UE&;(vclolJ|e z9ON(md>}ucDB!O#GgEo|0Q?F_t=*LrEOZRaR+qE0F>#k4J1|vxzo6X6qXTbw{O~G#rVoe4%Avq#ND?hlQOBD<=-NN z2k#=!Ux8o3AiD8TxiEBsqAap)Iei8D@37)98mp@6YO1ZS`X2YBh8kgA!9c31=2~j4 zt@b+VtgCLALFA^JXtJrkL6C3=$qsvcG6_Mr5Y#pZB7>kd!k})K1Ozn(gQ}_#7_ge^ z2K}%xbO>42JguM5oABXyZ>9oB!;{6K!mhhA7wFdck=j->Y6t2?JRwtfF#8nV74U>; z17%O?36YI5vxnuMLWVybwOm%nprFb#Bn1EMQYA{2DTfFI2y%&3m~asy$y{;O4L99# zTeMhl?sy3iprD~YWbj-rJ^^_O6e$r?rAFTd2!>0hiH&)enypb`28aI@!Z`MpiL>q0 zmW#y=fYi;E!ohgrRsmQ4`I>HJRk>gsM5Ewj48!mQaPJ4e&EZS0e)F1-_JRMdaMFxe z#MT#89Xt!re-;C5K>$J1l|cBhF#{WD%U^Qj0v#O#BMHRv2NM$u3mZE*I2|fWBvPqN zmbpAF6iQ`Qs-#wHGysqg+#m>s5hN)ZGYrQGA|<(26iqWsT6X0)m4@dRrpq>TI(q#E zMq`*v%;qf&*Ra{x?K>Ep!r7UN%lGQKxbfh&$8=s1Dm_spo|rR9kjjwBSIwzBC{!rb zQ*pA?)j>l|4b8MH)&)J?3@kDR6C-A(Sy*TdHdgFxbFjb}T%5SMR?B=(sN=z_Za(ID zhy{*Kuqy+QC@{^A36^2XZpO9?HHTL(u+@aQhG;(IV+vV1?K^Zby_P|@v1;^tAb>_7 z--CIF1QZMg8O~cGkZ>r(Xf~O^qQ|kp2LXqOpTrwEC?r(!G+yh$pkdNy@yZSk3zt2Q zmwpI%3waTRSV$sT%6b-ZDTQn$YgMR~G^(|H(uH2jpxemvDa^(#c(%-4v9{Re)6;F( zS+lp%KP+KjHi0_uikPU3WrPi=OuSxC%o(M*17` zauTLS%#1hZ#Yxc2rt^FemNZuMt$DTyh83puwmjX1J(Gj&jy$n~?SSJrm&ac4ISY6c zhKNrrILRBPLNXD#c*V;D5TFbsU&;L{)F2pI!#xtHdW>@(1cF4T#BiEfOn~X%mQRKN z)BoVm4L{AKX&ks6Cu9=f5T>j-S!0J&&PkT)zDJp-Y(=xpV6Pz(MoBu>a4*Us|PJfw{+c${NvBiq%$*c2z6#`I9qF{(-Ndg zmm#~^shjQ36oz2Du>J?|b)1e1Cl=X>7Q+(cgs%--@1 zbXRa>we^lw{ywW*v-#|$DgTmK)-v1d1pN5_nHAt-=BfMJpHaG>dt7|7-*EgVpEiv@ z{UF^Bg8ia(+=>VC=n2n}03wGs_o$3|!MMbbfN`avgjtG)$#pocGc3aa`>}OQ&2L>w zv5~!PPHQ_*XTyD$SD}=76>W9@Pb)sbEo^;<^3~m{{IU`tP>^7kgphV5f4!|nZb36$ z?p&2^j6kc~lwFgW{J&DN9?9r@!Q|bJf!6d{<2`FpZDFFJ<6vOp$|l5Dq?m$)OtmsJ z%yMh3wAvBcF{Tv*oZ?%1#MKw&# zZ*4raaP@?jRvzlj)nT4aUFPeyP_G4gEYfGOeoG8kX2?>5Rv59~3#*J-=ef<^@bT7G z?``qUHXrQt*$$s<_t9RH_L#8SSH5Q8KK?l9yA%F7>bK+mI#n#3D*?{C7!CZRgI{uB z;I55c+2xCUrm{&=c@X{7{9TV zYWnQKNwcmJ*t*{B*q%8Wv~UL_27p(2*`joSo&tz8Zu&T(KiP9k14j#HA-6eFY*K`#n2>jlf^*3jH)oq^+82scmWU#8xm?pWQY4XvqV$D5 zk7c7S1GeTd@2G9XIjO?}o)tXCO>;PkMl4GVHkLth|H(AYFFa3uBx*Vx*vnA+9-DWG zIsGb9u5**$VxM|b>FHCD9si^tx4xAjVo%?qlA8qQJ41j@f0x*OTlL+FJAF%vC)Sl} z9Zl+E%g0scA6rstJ(=^0wfKg}pH{N?xM@f+^S-$cwCu>2Atw7la!WFe8yNR%q8rpLxD8j=D_c4^qMqDW_k(-bp4rh-6?6U_yi8K+DVo7{>xur-MEXPWuaX|9}JU0p>e^$A5r! zteh-31cN>ZSQ*H@+#m+D;k}A#NsAhmAdX{vA?3uec3Tc&zjr3w9o`Il7p4D7AS@~| zm~eEhiPmtfsg9-O=<)oYcJm3YNpw zQEAa%a-X|G%ARUkQTJxdL_;cCDVtLK=nh6)%~qPulu0)F-Iy_Gs-1C5(At!x@s}p# zt_bo+^OWYzv=2Gy`#=lIDWy7f)NyB;Ny=u?^2cd6Z0`5pnBA`T z%Ma)8uRm!yQOdJf=;#XhWiSn)4!WlLfo?%9JmV?TuX`0mp6`2Hxz(Zg=y^x!&sL8v z)Pm=sL~iJy_38b6`r7!Jeb;EsrdO3658og?vQftPqU2PuQJ&FArKP<=oV9QsK2$VH zjaS}zt(<@-j7^GT>5sF52NhYN(Y#USM4B+9OHSPLPdE5fZh2<0~NaQ*;^kJJ!sgtA_r&_f6bXyePtSC#~R z#fI53k=I^6NyJDBBRxsAQ_)Bg;mGKMit^h41y-3su7(R$u<&p{!$2OTl?A+#20s)` zG(R=inMvMY`suQv>9Olgk5fC1{VZm!HUm#uG}t(CfmHc<)NYTWo7Srg&`H?5SB4bl98xysRMu7Lx-*q5{gBK>^mAT{56o zEy_qDVFKyfEVMZgA%WYnQ_>BQ#!Y^rjGyP1j3i2y>NLJO^0K|E>}7YkxWEPIV45<- z6~s`1k_58?h^#1^jQ3h~9{=#&u4G0p+fRM)dM6ssNU4R_I4mZ`Sb0dS$^nWwDIg>| zH+*YA#xNCHk>WPLZV1JQu!bTNWnkk<+%hy-z=_j%yG1KVyYCpUTY|iZOR_mYrVfFf zlu(mIUyH<&&I`3XZWQmP^PZ4WlGS^jbe#&83LO*34{G1ou3vkVv6@*#^sVFO*Ch&m z#lik2+q@B7hJRExUBv)vPzqTkS^PCfd1laTw_mqhyL3v`k$)vg*%h$SM0IP+M9Hdstg6U?8?Q?rLHz`Z_&n_I6|RQ>WP#Etz+*47D8dS_C_R$&GxD zD7zeDhQ9;%`$m#q%$|^LK4reQoT4O6^{RO{Pq^^N*st!GUwyXk{8%IIvrcc(BjAvl zLu#9WQ*l;^XrT8UeH|(Rm)|TdDm6$HDavwtv^(2$uZIA@u^v_8QBST6v4i zE1It3yXL~OaxW^09mUbgtHhiq>tS?pxnGAEpU*GWP;XkDLv!3rwm`01DBcofKz2`$2|a0x=eHPmCL_xwf0@$xb=%k2Y_c^Q*LqQ^2&<$#KNQTi zcv(4$#2$pPnXwQ8QP|-;V=Qq^gp}J`wcsC5u&o^xt=axI2HZh1s}*EfS!P7Gp!J?M zl$AZbcp9OcEQmzfj$JFZ&%GCp7?_%2c4?5pJSfr5=tbzJo}jz~8r4|5H^@?X6FH>f z;4MG)ioo-E!u|)h{K37UM$)BrDV7=L>YYlp3jt=6X=pEGO*KB#lX1@72D;iylnIS< z`9`SIwI|#m?14U__kGpBC0z=%yTCfk8=Z<&{{?msYk$Qj%{mW%_@c1>*auJPlbi*1 z9Xct^Y;JGgH!UZ+hq*W2Di#AhyZjPbAvz`9Exfgv?vNI7GVo1}Ya@53+b)EmSid@Sku7$!UIf^; zng7rTjm%qsC8!Rf2o+b6z48@}w{lxj@+*V30$Hn|%l}cCgh%)9ew4fC)fiBlhH3qw zP{Sjw_yTq8*6JF4h3nW?KXpj@Sr385-rO-0tA*%a1W3bptAE%PuYMbSEe0U)V@{ zLIb;)y2bFfDz49f&Gs;fB)_ZF-fq5}#G!@xG|v=MJi29}zvl|hl)6U@UR9m9&X5N&RB{ds7AY{!xe)n^(ra(=Ch4n zpL2nPQ`-bu%=1o$n57pR3>kMFi(+#e0AcFYC`waQSZe($^-mG{Z6Z85Co5a}=vd(%{zx&+} zZdXT#zuzl|zoq;Wf0fta`obL?&`<-Gv5foQ7e@mSR5?GR*uXy>#Rg|_b*WKeF19+O z8B`(_!u6tlvF|#_K@_&Ry_T$`3oZ^;$sfW$;##^L#Hil`Z*+nhc>CG2yT==RXjDiH zF*BYI|KOE!Mi@zF>BS0Mw~s?>@(ya*eOOTa;O81nFN#9c_Z%-_V{Cgy2z@%{RgA;i zcF^&=-GZG=Q|Fuoi3iuP<+clAZ!Q({V0B3BKQc#3j%JgFvOXb3Ss^#jmFIa6VPq__ z{2;-6UGu>knYOU0)m1yYBiJ=o_P-qgB z1VI!76tHWktRZ%F3vW4ungf*3(^YNINW7&nj@@%MQ4a!|PCE_95Qk`o)qKT6KD*|~ zzafK?Si~}3rM3IG##^F|b2|u|t@U)xk z>)$+ho0_Bd95*p1YSd*^*MvxXds-&sx$b_a;hE)N( zB9V|Io-2uc9WE?+U*m$vCAt(n%PN%d-1wm>a_K#Yo>i={Lh3K@FJNo5pWMCppIKyz zK05q)21$faz>)+X`gC5jINf(@U1@vp(z>YYs1MmaCYr3p%V{%vI8j+AdO5YleVR9B zfOoLN$MWpqO^T5w{O~O>+flZtOHRScJrcvXZ&16m^KJt=Q5{pfa++_F@TGz)%1X=A zDv!?xg~mG03}w@aY;|L)I=u|;Jf9_3Jn;7T%L*MfqvUfo#fK_#OBrMpxgwNILpbJt zTTmPj7Ak4Ek7a-Zp1OEOQy3Yv%`mkF#A4W?gxy3Pe9s?a=-E*-pYaR>ZR zyMU4b=uO==Z#j?@)-P61Ye=GH#+ccIlChz|CO1*8e2x8rayL8VO~$1If-03dHxWLO zNxLg3D{d<^V?j526^O$-6kA5U4N0uw9u`hhvFOXOn-5ss05S#j2A$j^D7B?N8hOdXuL}ze=8PVxz?wTHa8|~Yf&vvKB zQmD2XtwoNkq1KjE*5Us25StCRUj=JV-)?Pg3-P|0 zin$V+@5AO60fj?}Z_U+->64;RbIe_)_C;D=*(eJAi*@z(aMOWGy_T4p+i{|!_%@GdAIET{XJLsfO z$i#{zdzsKxVrmIltv)}Yl=R3B;b zZ`Ys|FO{L0519nN9KV@zCUVI^|3M)o;N+U4^AS1S(XanRZbGV!)1II-VExqTvuRmk zQC|LffLVyM3&)B`ab}dgI!V4TkQ?3j)_fABK93JB9gw=2<2j^Hf22OgfkFpTpwW1N z1LirigR;52o)%rKw|jBa?U>@#A?~Fy1sIX^PpUxO;cE)R19&>Oh zl6Ct+UMRa5SRZ(Q{qS@iqnpt;-M7APrjOoDzch2>um+>}HWSTw$i$Twv7^(`2UIlV zDmb~OqoqG0`X14X5KV*3yk0Z!Z1DR00k4WzMfxKt{KY<^?>jm$-AK!s$HVb0JAO9h zFhY%lr&9fYk={ey;V@hJVPLA?&%syz|CFq`nD4BuJF8zaPZ-uwZ+EOOw4U=$yet-NAK)shr>`xD9kqXYW%<3_z! zANwtI0-SJ&ALm}iqwuS5%2sgZ1B?=hR-$oPv{2J(87?Ue9giAC$0}UbGwHXcIBSQQ zQq9JJ5$%+myJa`b(tUL+b`NJ2cMldIs0=!SeEP*CyLZ#*kZ;VUGCSf75fqewB4Cvk z3syxy@_+~-QERbxy%WUk;jZQ^U;&~^ry*+Y2YaE`=&DSac6?~4X1toESd}t4{jvvT z%ZOmXDyvEA^lus&svmdi>|ON;R>lK3NldK3AIEs(lI4s&s|)7XA$GRf?2r?mt09JV zBtrQ@LRM9%YHs@Wae;!(mZQ;fHd}G^h+)7JwA7asGM+B(L8w$cxrn96*7)2y{JoOV zU~-sDww(OpXF%ktR-SXz>xhH1tci!!4Qf1J&O5|C^0TFmzQ@A_g-vwJcid?}Hs z6h!&`RinOeqfcEYAMK*iegSA-^VBnq3|Y;F-hSOW1^4^_%ycaM))cY0lU*WGNCqbD z01t&9=afxFLN^&7(CH5ujE8jk2lSgyrk?!&W3FY;R7~Ait&sFbGWnnE;CIGDkN14t zj@V{;C+*#->Zx;S#!F*28WU&DiT@@R&pi^ zH^3Er3~u6;O+7gZbwuA@(s-Ca2?gs% zA8#6c?7DD2H{Fw$9>+^x>3=+wbB^St4?f1LGSg?K#zosf<=a!-JQF)rKFD7)zT$r?)89g58lag zaBdYfUHVq|3?$?vIJu?)t@t+c0Ep4|>ZfUHmXr~IKVpj%TCvt^wZ;&Vnyf@F63sMM zS52eGiY1i(*&hs({vZ~fNkZ8&`mrf0s|lxC-u)QDi3Cqfoai4S=}>9WVu>OSruO^O zNpV13=fY~3dVM>`uc_HC^>!~_=J_V;gJ)arH9C!=NfFD*%Dw~<09Zh$zqCvH`Vl8F zq1zqOD40j`@~t(oY0%d)(ci2X0dL4>CsH^1r)%B*4a1STF(dNf36jzIP7l>6N&Dqz z*y_|1&NEKD@xu&x#=dJ{09$RhVdW$Mr?6VFiXD)z?k%lz>GJYwG@uGmNLTOZQ)7f* z!FwY~$%+GIq8vJ+4My0&Vy?pj(frt{U$=(4w|+6zCx?>Fa=C^lw98$G@X{$4AAJp>o$YzPeWxuW}|Ml6?y%acVUMuXZHC zs2g`1@?SYHUIMAPhHE;H80{8}`rB<%s=PbBC3$Gq=`T;p|1^wqb-Fj0GBmrJ^_jlo zJVR&0NBsRHRoE0dV>H!EtiV5q@@+Qr5qKYd!7M9u*`nf0t(NMz`_S)^EAHcitmKq$ zvCFsFZz;F>ts(U1X;8(!fBjv8dLmO=IEKp8B@6fe&litW;!y8mbIOjD#vE{(l0b`Tand7waDt+tAwuN- znO{^T5+uiN&V%28LW`0;aJ0Dm;%DD_e!DMf-&PxC=Xm@@eh@3j4Bu{QC*~LXY;Ivg z0kCHDq-~4}hbj3( zq=XSE^I4>{j}X{|N>Cz2?c;Hy915TZ06}?GA@a|^kh+Gu$*GlTK#o3#GQHiK`jABW zAQd)5Bt0B6F11V5{Qk(LNi(1^mpP{|Vu}>v5^(w~ zUy+cUo?2e?{M&Abn*cdB4GLjfrNU;c)bUi9l9d2Ujs5lNF+4Y@edLd+}nnQa13 zAu!vz+wPR<)N+BWz+=ZHI?iP6VBXj?4{#Ur;Njm5FhUp(lr!OCTahBm|L= zOZ=~`rA?8*$RU|UG!pRzMUI?N6Z5XjI`?O)Q#EjyQaz#7`J(TRXxkixU+lHJii7!c zQ2+k$bna64@PL~n69W#Hz@L-Z#;EXri2>3-HGe&!CO+ST^#pDu0q5!0!fp2C>c%yC zAgOkoTU;efw?Z)-1nfr`nDfbSkja;n7ZpCBTEXZ)QlTR-F!!g)t;_;x`NFByDZe*D zYaR~ca#8u$0X&ayxvdzx#PM;%kFmd?rIEl1m3B?PLNP zx0_Qo8Q(U13QiKYfdSS(tv7U8XvRRDIelh^9{TByB@@G#v7kcLSIcg)78lqA{ zRBGcZ~i8CL*1ChK>j0X@48Lqttkbb zUA6dyfyB+m8u->dwb$v>977tPnQQsBJ$1YBP2^iOs1k9MXk$- z?tmSkXcs!P3$9E#PtG!o!!Co>iPhPrOxV2m`}ZiY0)i$%_QM_dg5%+>fxiMU}lFX4vIQAop6{A<1isW#eiMe?UdIUBMvH*h%X zGc&hUu@QxclPgpWM-*lLkLu(_hbp7ag6Igjo)VOlr0u(*tEB0c;(`T!fk~t=|6yb+ zipsMIS0Ny?EeWLW@Wh!SByM7>3wjP0OVB0vn7G$skGFOY3#d5Yu;2^|5Fv% zL&Z}`+UZHx*vApu=w4V;wqYrlZ?8O8uXN=DDTJof!jzKXnT;h@o#18|y>H-V`CH-Wr8De_CpDNF_TWX|5RR z$Jcw$ya!Xi&F|&I61#pp`XlW8w;spa~=#qxb&{bwOZ20zu@yj zQohx#WNl1O5VROC;P;*75B73#dH6c!I^Tpn{-}oeSqadsP+$)ud9G5bEW<0`hdAmN zlaNew@^sXP-_Dey2*OVddhFw1_;>OS{Z<_5?YPg zn!rZK21rdX==@+irqi&oy|EXnTFSejqrdkbb*0T(RcOdLZLD}1jKMUb5r01RX;dr; zFOw}r)OisE3Y4K0F$(?&;@6ZYZga|F4BnYH5~<^&ySaF*v98hK@P+lig-hS{*!?Dg z0fuk-DYX`P$p6Qnykng?o3b|v-W8_4NHQcS^L?4Hlcs;aN`kGtI`2z=9(lj{eb~rR zSKMaY{f)#)h(Rz=+Y#<+>R)(%`sCV;z2YF_aNoCUOcmSCpWUg;+wy?2K~l4JcXWdQ z>#>|M6=h}E^A~^9$SpNW+C6*al>R(ImAil!555+cX149v2tmJ_O5{dF+D!%rwZ!m7`v9aV_nBlPc52%-TL+;9#6-SH|jh1|JDT6-&I>dvR*tShXzoIIKl02+rA98Fsn4q(<#dx1aGB5t*TQ?5vtWqO{!H= zgt^W*TyBb!bf944L^@ezwNNza_~XnwO@I zBNX~j&RPDWc3NV<7S91PD)TSor|3sar z?r#!t>BXc;_v@-4HFQN7)ZA#!?R%NyP0kiox<9J%t6!E{<7Az9FqKAv6LIVVADsKL z%gv}#yH4xw+H2<3WmW$S(X2mP%Q#us1xEo_Q>WSBYc$b_Db4)NBWbiFIO50bw5t5_ z@3AI}cs&I}yg9^_9_*XRb7Soduil$ef+a18b@FA9a(QJ7qN-yu6|FtqbgD5#Ij%yX z#?;NnB7m2{ghUWxGX6EY>ZkolTT(2DRoYwq_aglvqvyQ@n2swqV~L1=fri|(&{@RE zW*S4yCPy&r(dc)#js9GbZ#f0}q1aSrZEkc}nnE%9VMgxnWb${sOl1bQlf(Klmw60N zx(gkkCzu)<^hU4mVEwxJcfzl158a~bRIROu54;=~YTia^jf45}hi)azz21eB>pKEX zEu(g0Lm<{L%1C_^AipRmxD6nBCVokl*tIZOYfiye1YUM?j4v^^pf*Ek?ehggD=fvv zf>q7fj_Q*=R~^N`dxZt}0rLHVg0Hr&+Q|$X2bX)p+w-ma&s$p?-0qeJYiWV?7N{%R zP;3m|X%j^X!~Y$mCC_Dw0ki`?P>C z9^MfMH18N6Z-&_fO^tcT#`JW+P*+z>ntWcXekv2q9I+xsw0FDic6T?7x7)k<85;<= z`&8tfXh$JFi=hiO8|?m|Th_XzYjmtU-x3A=P-HH%HV5tI#>N=^5F_;qGWj7dQ^?|W za+qJ{GI!ufi?D%o^_x>?sPoQxLu(h_Y`(Wmx<%QpTqBD2z8u$3yZv%22r-y7cr9`3 z^=_3+dfO#-&miPfPUtY*_1)!Di&SGGrmHCMP8-+CV8&+5@wZ?;77 ztxtaAUDsacMhMqCBA)}KlrM<2Yw2`? zXK=8XH2FMH&31N$yL#ul@q;l%v;F1%yOH*g-t*#bKd@Z6?BfL76)JM`LR&E*n_*}O z8*PEGN2A>xT=%m>o^>AdagnLi+Sq8b;lzeP2J867xefZpRh zSi5rm)$ohk1GY#zr7No91Fyz~n)gv!;!=HchHfN|K)m{^Q+;#uNUJ~x*zMp80K8}I z|C1}tTBs~MMc>Dn|N|;PKb}GX%n!wyz=* z>8%?$33y|wEa?=oP0JG|1KT_v|F%h0S?ej$YbSg}ZF+j#2XsFfI@Pw0&eqPsk}llP zKY6dXU+cQr-CVz+-P+A(ZNlTOP}8P1w-hFm7>4>Ly``?vEe+3htsASzv&@4&Dm0f_ z8-rFuL!)7kk@^k*yv)nOF}a;=#=E)9jX1&uXn%Tw$=9IO)p}>0p%n|u%{R9NZjrW2 zM=Rnzuf_#x_g@Z!5QCh-=N^NQOdHVLG-A{H0s6rjRo?o z`#}btL16UP8}$CkYz7!W`)&D&0eJjbF7GU!aHeIdeT#Sru5i-LsfvyWGp!MvvsjZJ!da()PBwL@4-`GPV@ewLq5 zgGJtjK2rlBxfJu7aYnapA5ySnoMcPgJAGg zBx()}PUh`LAA&$~(Wr|MNXms(DCl7<_AnHhip5+;;TTD4et^?K(#lw%*oFI#S0c?O zzx;ka-=-1+f8M}C|7I21g#w9NC2qT!td8zQQe{U3$KZ&g^E5{h@T2Fj&#u*7Gj35w z;7UCj_jH+S$a@Yj8Vto;%%*9o?@SvTdAq{iUlW9Q*U{rW*?WyfeL*wQY|bA z)9s&Xc8-t#c)jbyc3EVJ=c?Wj>_SA2J!+Z5-~7{7+4N!{VNN&f(mDvajAbb%p&3(BI1bi zlVrebF_ZiETs7`D3QW{(a!`5_TInzEs2EHU1QIx^PLnoTNwgZ$1jxJa;eL-f|o}y!03f zwd}vhXYx*r>TaL$8>;Um!bXFc@nzOupR-=}gLigZ><`ueyJ2YWT-042<7wA@S(4pU?ZX0>r?K0x`}5E(xE`9u?oUCtVf{U@ z{}|Z31{_}tR*wYdZ-U+H=}rx7`#Kbzvpx~n{0gi-NI4oyu@9vu(SvA@T^LJoIqUZU zmnRw_b$DiXcS@ky_Bo!2*D1S{qSpc1{0!{}V;!yJRbf>KLaX1%8p&}5QdO*k1vjsi z4y=Q}S__bAxqT`^RkJRX1`>c&X1XomUr=v1j*x@0k{a&7Y!VU2k@}p{O?wMpTP|J{Np7Ld2E#GF2i^*Mj^Z(-G98ryp~tc5&29V zMs|;w{2{C1*;wIgi|IUGI*3yH_$(!`6pb=4&wm##&k6s6r|=)ri_jYGK`ccd+?FpR z@OJJ^guhI>OOInkFQny1K}_aZHdZ>%yPer13Nl&1V2>&22Sp|CEH%Z6u=e1ZYFdVe z2I#uqg9jL26g&uCCscwgihvhq*|rqy06Z7iFb^7}$cRI{9vC%-pv%sJZ-n%2SLDc* z4o=1zAfNg%yl<9cEkBD`S*k3A>m`S+ADaV?`;xUg=XT!aDZtSL5Y9(!`0#D_@2u@u zJHjjBt=NZ0<`4y;^SP@@K+k-3CAgTsjk4?3H%AtE{oPY_qw>a}FFDJOv99X<^mE!B zYTB{k%`yTT$`5z60;Q^*rHg4S_?m^u%2`rz!{B=R_jWKOpi6S$Oz~O99x-sBgVl=x zO9w>q#CUr{r;IM@5{@O%m9uCc*YU?CPXE?Ee=7S8Seo64+c zl>9}if@K`iHc7w`VywTMv2(>06{~DBzaNVvnjLG^I7$Axc6<5v^-h(%6x!EV*wztN zWqKr%B=dRVi6{985q0fOrRi>6h-iLobaxg-l9nEhR;>RN=Imae?-J|JvLZ?2wRjBbD{;& zlwjlgsapc0i_|;CIIK|%`%={IbMuzOsoOZ$p7c|r3e0%kzq>zyCFnqf+#!mgCK%QC>!0=Q{SIECq(>`5?PZw=eUZ>>2DM%A1uWadXu`9TylelT0Hy}Ct(fijnSu2q$Uu=gzT4A?uFI`mGR^odcei}({oR?0Glu1;R5XgXi zVXMrcfPiV$z@fPav=24r69S=%Y0YVhW0azXX>9FE@ZtC~#gh<>pD6)E2Ilvd|MN^e zCWVet!Gg~MV^G*6H{T*aGi>$-68;zn86|=|it+}@vjOL6Y?a>{lhdrQer3z%3oZpk zf=nN3F~t&-7rnehM1O%2)c+zAbi^-9h2YBufD|LV3@Ag$tr=i9NYXj5N<g)`^VxY`VuE-P zRluze1*X;m4>E;La2BRoXVEw+w*a^j6q^w zETB_T?N-Es@RWZUGu%cc#*QfY#U!d2kedtExGe*kwxtUkq}IAMuU6nC!!it_lA7^7 zbEMxiY}LQtHd~CO_PIIjqR~zEcpNCqiVfz80&`iTBxXBrheyb znCm67GrXkgg+mxjjKOSbdEV-rPAHxefr4^odB%TPL-a+$Ho>Us;I-%QinEMOG#+aM z+M9%zTybZ2{zgceH=v`J zH5ut;Q_NV~(00)mGM|geXXjcj*9-r^Uf!p9jv-(#I|(Ovr*i2yEUhCVN2Sz{)dQoA znjd^DBQ+mt=dlYs7*SL#AgGoC$ZSJP0BNB@4oiu^c61uzdK{)DndQx6P6G@SAt;*5 zmUzGi>0(r8<@F#@DMkxXl?obyywI>C1|}V^W8BwBJY)7gq|pP#@6l-H#k`!UZ)(+t zJ_FIvL_3g#(I8DvW0Ct-@5^SMI9p}*vUs=SHOR2zj*K#C_<6FwOiBo=M%c3G(q8#8 z`o%Ds+w^HTe8W^A3T!}>qN~QT*=S5$vO4sPx|A1-#KIbGb%tN4CM1=0OHyFkGnV!R zBF_0K8ptDRBZU*pfQ=j!O7=`ui4WElN&C4hoqUc_yD#~t!PBl zHVQvM3acogXtFD0(%=R?4^@It1Et&= zvKnsv_3tcZW*KO_UJ`0I30m(TB&3&+Ivwu_JRE3^81RPDEIeU37@TBr_2)__+S#FD z_USG@+E-|{IoiDCZyl3<)|W=iFaYD9q|)Nm6P)jPO`L>X^bEloPSwR%re*v}IVq6m zJ;AK;wm3FE%uLUQ_{qG+0<$#zexYIO#lxWn4HsQL0~rO{%pvsCd)xI`eC_Rc0z`?J6L<>m63Fbjek52G#rca%o;^nG(1PcAaYQr?kr;32w$|T z>ZDS`nr_^$82$&W^1^JvLpttER;!ZtRU*1ZLB5)SWyw$F!=}wWrst+kg>VZc@G@6P zo1(=sVyw--igSsDwu_dO3mB&yUl|kU?`}@USNMz8|;dY0dZAPK^XE$K%q6xgyQwgaaO{2 zZX;_=4#kApwK;gUX(yZNZ0dF%kZA=JbWMo8{m7Prh$SIxcez;6N9}mN}HK8eZA2RlxX}Mxlot z6G{ruqE1lxGYPm3m?!0SrPU`GJD-oJR!oJ6Qvdt>IufBG3CZ>xw^v$cvtDun-j)&p zAQ@Do0p-ZsX?Fbp4^Qwwp9~KuChU0e@f|=smT}HqDrw#`;D2cweknG66BWCYA|m zp59j&CF)R1-%kc=av8qoq&9i_1s|U)Oc%aTKl4;K27DYvEf#y(+>6nip%v{Gfp0~+ z7{vxgptzvJSKzIf%}fx(Q&(Vm1MG-dHX2pvU$?>j!YdJ zp2J8gN8^d3Rgknn&uvj0(aU}=Z@UMYz?t@R?mMqwUML~jvtbQ?!%718qaYyt(@Z#Q z0+6X(jv;D2j}C)%<1?lEu_0_?o47-05%MInKt?kWXp_l_bDukz1!$3F3EC@lSy({h ztM8Ys#st_@e;y0koNw>EiIk4pT+}V=Xguys931pWhFWHzUniTHa3wOvUdEZzaIBsg zJ2zjU>teTq6T@{FwEi3brJ$FaKL>+rS?`K6O9#C6%65?6{kT@$w_=8_cr9D3&aWH} zMPj%$C;N#CMAYRU5N6OV~*Y%(t9?ZP!*38)Z-0*D+dDjHd0|)Muyf-IB+H`h8 zB+zT}m=}dxjk(XmAb`;6BgKqx)}=Xj2wbfxeD(%65>x}S)wmQhQomZ|jB4 zNk;Q@%c!h}9ywQ&JRP3W$Q&6SIJmKs$D+m1nE9!(e;r}hEWQ0+8Vi+m_o(8@MuR3i zusO->cqvVgkgBH&N!j>Rj2z?eVJ1(9r99>7&{TOId8y*bRt%2MvOe?rUX?D-Y zas&OzpV#^I(#}Y~#o+f^u4!7Irbk1NjjVcUA0+cly48*oawrbYHx@NzV3hZS1nQxs zVzir$pWXgZ!~BwCMof_H*r6TGht7<}$u06c4cEx#K z)f;=b${MAR&m0dy^}S{$$DydIsX98b9Iq#$n%t2!4YWGCdP)O zx)97HG*S-VA1`a3#ztkWJm11gl%bDy=+6=HwBD*DJMY+GT*Xv6@W|94`-VppM_Ma+ zX-&feE(K`JS2^{bya#FhxjQYVqlPVMW1^2T71lsSZL=9%EGDujFMu3S+&I|a3m0Z8 zqu<8zN2i1D>!(%kXA@%s6b#J!@yajRMmITM&sltF z2?EUDs^o|fBV~8`XsZVV?z}M(hi$rVw~`nZI^2sgHI4O+^P;x%!}CPm*0s#sV6_puJ+6SQ=|jEaG`wN68EL(kB2Iqj#_E1I`b;n` z;b9hx_3SjZO?J*--8_*?c1gnx@}lpB*Very)956RJ&#k%PAAauwl-5LK4MMOB7Ijh zKo`5%--%_3fGPVMVTKYox<8_k7d7UgnBX`0gqV}BYn{fY*)4g@r zm$JXK4<}LNY45toT^YG)ih%of+D}Bh-zaexEuU6cri$6ltFA1J*~?px%3IPbJu9W% zx*e{~aUwoU1Bwk#pkF$iI! zAFqJRrqGM*BHyGix?HMjJ?=pm)bKrCdV}%YIXoD zYE5maa2CK|RWBR6o_SmINDAKOo_u2h%T!uyYbstkLM(}}bwLb<2TK65Gk>1emd0HT zvSo2-G}62!(k>pf7a~%+rodXOnK~wuPARP`t+Uz=T+%0=hVt8d>SCalj46omlP{{U zlr?-~4Jo>EF-c6iF1}HH2Q+-Y>>zsL6=A)m@i`e(bE0Y*K>TC+Y~X;f>CAyH$GdzD zecX@PJS!|R`GtaLw!U6n%iXHK@EUu$oK@H>59~AF@-&v){NZcZXU1KUvAr&GxK zL3X_*c?7;V54--1%6M9UifC>?Ahg-0p!}Fn2Ht)(0Pbft5rW#w=M9~&-qik>W+CGdK7x0_{r~6 zel#Rl+Ft2PiZtg&lC$iFlYERK#4z32=NAho_6Bj@WseK;4CPk!Sh(49~ zM~x-ru5C+RmtaDHsp#m_a$y+93?XJHl1k{|L?)(71XzW;FJ4mV6fnMb`kqyqX*ZpP zg(F(Sr9;QT$0SJJm-sHKYJ#+vnl|QdO>4$3Ez^>T*=1ArY(qu|XUg1D`E&z4_AuI+ z=`UN*kK>~5=Grz6!cE&R<2DTx*a~#H-a#~HL_@(4_!l>ZEVh{)M_^Y5r%>%ju4V`? z-@D6KVVLFdSHPw()0~;_%XW|!+0(LNP|!Zc?BpW=v_yzZnK6hA9LS{!L(J7~3y3cy zt0?XxcG(j2yw zo!sR;)Oa*)KsjqM!2kitM*j1M*{N2RJf0{s}y*8obvo_ z1NtPN*Rn5l`Q5HexJW19?i@Y58LlKuD=LQFTXy*xp@?rfE_-r)E@uXTiln?>P|}Ve zfpU&?Xo!cv-fMgH14@6gCyMU~x@@r!gFPo=T^iMg$_e1e+mt?-vD? znC$C2!s|apBiT~RNo}p%dwRWSx2-E>o!Zy;>M@Bm?;CKEeZft>YqKM71aLdYrdtyeSrc}j`X<_ur0BkC7~(GDvDP%rUU zvHU#^{!k#D#XD#V*nT^m`Uu!~Ev7!5K8VB3h?805Q=BY!|0WPLs3nRqv?Q=WRomxmW z+zX3FRBZ*ty>%CR>f4`hY~{^vYi=G6w%*g1&d2Jl&Dr(m8YKr#v-pNFe)X^AY(6qB zdgH(Jaq0?_zsx6kZZ(Zv@r72HG8LiQZz;AZNLC@s32V;<(nZLsX(jr*6~#W3JIbyY zEAHZnqsy!g^dalohz6HM(2_=@#(S1-gB1({r=)0P2~Di_E61`KHJ(UBl$%n344kV( z_9Fw|y0i>oB?xu(G!Xh#Fap9c3OkksrzJ7&W_IWJ97Vx~9Bdx5kTA+5YV#W@$zq{4 zP5DpoC@tO>c@U|s-n0qDBNSE3?=If+{~-Ny=V8G{|ua+A%Y zmC6f=P1&MCVjIskYq4@tkcX;DTzDC-a2tTIMN(yNagfpR;=SO_7Ar&N_Q*F~js*4q z-||m9*G9zCu@BfP#iiCSaZRgPY}$2pTg6_tp?%&;dDJ35^JXEjnSCY~ly(GQwHgU1 z<}Tl#1R5Who$T5gvNbmF56p`#&0V7-GE;{_5TL~<*qw&j)nn>b+Yl_8t8BeGaejIN z{P! z+a23)=htk@_QT{2DV|C#gTRWb*x%%HfAy0$0zfjSRY@r{r&$3p#)FA-;!;hF$d?99 zB+nGvgeVwYo_@58rU`NiBM=nF;5cAB(wtaqB{BS*2PX_gH_x0%l~%K#RBrWt@-mr} zdnrYSFDS$yHAY8?u`f?noj)}azGib9@9{TDaN+=%{7ETq3!@kT6C{7OMr5CVL!}<( zQ5j8Z=XnoBS|@>Ku%|tLpP=GoV z4^1mA@7v7&kzDcD9(_Rq>C&M`kaAiAtpvzH@tP4onVpN)z_yr|RpsvCZqHn-AN`_h zW(IO$8m+|jJLyp828d447B_FTCgjJ9jm&=RX-MTZPRx!#cd@6HtH3UlmVjUvI{iK4 zaSxa88JS~-;rXQ{)Hr+Y$L6)wprxUs`u{Ji7*I@Qj$`4p!^~- zl4@u9XQYyrsil=&4&Aw72AGxzll@;zWplMsCe6`*eW;WTZ|sp+H*J+;l)klO{{P0#{w9|@CJz%tF?Bh1 zC@Hx>@9`*G&7QGl{(SD=B6mA)08#e*YiQT=UoW0+dg*b{DOIvc@=#^MDwGUK31ZrV zAC^n9MEUIn?#UoA2h+rrMVRVO_ASihZ^nM}=^%rB>Jl<(MCGVX2LTdj&F@>uJLIH_ z?09WkjEUtMwRw3y-TBt^Ia78w3hN;B{vpVd*b`d^c!_kG3<9F{;=PyR=0w;%5j<5z zP66d4!+AQGI#?HM(||fl1yK)|Hmfq6mmEnRo5MI<-X+!BGw?DH{?XCdyUSdz)y-XY z1vB}ZZ<6HW0g;U9fhegUHv84d$G6Qs|2z8_qw#Pg9_>YvSV+xalq(I>h!%ylv; zdezdOzw2{IO{Ryk(rR5-by~7PZ@%o$-q#7Tbl^p=)CxFQF93JioU@%u2L@RIdm(g) zRtVpgIs2m+;&!1y1uIaKEd^^eKuTzm4M%M9L)9!tVhK^t{f;= z;CGQ#E(XCST{7GI_5*7Y6RE~N1^i@*sF`;_k0Ye2zsPx9E;E7l?4l_HpM9`N4lGCF z8WIA@s*@JVu|P~6@X0*a1BKnKahp)j?*m-p0SE}PjfD(m;bOLm01Y!86}4fbC6J>V zl%v~hJoz)E2$p4CVgki(ZGYxWNIywbX$Rk{>9>G-Ub!FyZM{E9bGrRgfFEu}-`CmKA;p}HMN}_wx;FoJhdZBo;XtBz%v!69W znp=CraD~;+%uX@l?zQ4p9_tlQIf2|$EL+u?sUwNv!EIHBA1w`II@GFzDnT8PkKS^^ zDnaZN{ufM(08DJ&gT>QW$B&Lkk{tfH3P?fO$!o)J5YcF zcQ@s`Xj#G{2MgQyJZ_YYs-p-{0L|H;oTrU3d~{79CQ#9^0gK=5ULT0uhmJc; zfR<bJP@`gEo`I0ZyY# zay0G{Fm2vp0<=*@#zZvStePx3{B8l(MA=N0CZSz-YQ-KTz;j zfQb|@EapfkmT%TnMYf2Z`2nPv4BG;Nr{ct&?GoE?&QtJoFJ12WY{VwmBWKtf%1~!I z`ZmVRviA{Wz$2%JS0?lS>aifQB#ook6S-3>ajv*zG(5^5l1_KcFcYw#R!F72J&A3c zlXIW=sOriEi_eF_rfg}hkw}~*to<1_A#}PY%~1j3UvL*LK0DYqL#L6!m#8zMLb#@9 zfKUz$W1|{yAZRC+l}!a6-wP2qWL$RfGGt9N^IV8l+hqDt6g*XUaA#kIO1xxx3aRLa zjBpW^X_uRmuA^*9RpGI1IBG^DktIkh#HeIs9*8V?<1*~Y+Nt<~UG5|r$O?v((+f0; zJ8%I902l>=y7+WLE->;HExBOLZ1ERmE@?C}L59uy#045d?aWI9SW(0mF3*jxX%lv8 z7K7my!L_1L4h&-}I7%RFh}?O{INctJRou7Th0%nfBZ9)Fh#vg#Ot?HCeWti&F09CFagQ*)9f2^= zI~70J(?mw4D(D4ym)NX`6T_Z>{HDO9#$1t<8|r4KW$bD_7p&z?S&}qTiIc?UeFCBS z;q*!xsasLPhAI|~8mx(2gE=reC!0nDB6xOE4&Z6G@f{m!AY!QAFJC;=A}mymO%qr; zLdCLrN`_0A2S>Cz*e0LGMTq8FYfqHs)jy4daMM&T-3niqip{Eu!gY}Gu36&xp{-L%neOxba>cd}R@yV(+%SU3k!nS=~f5qdK; zApV&HE5Te%(^UEmmcJ!eG#J8yB~JV}Wn6>}PL7BiYT6fk6#B|q0E!ySxwI(GmfPw~ z$g~CDE>WJS_pytIv_Q;gZSr1dWR|d8DJq;)i8MT}$UDDfm={DndmAqCeP}h21Pf2a zr%zao1ZkS?K83>9!uU}lkq{<kt*Wu*%RyVSwPwp2f(Nh`F=orDafnr=8kL)_MdS zV$lM29TE9atbBovq9t&LwQ#ZCQmdo!?vM+CL01iaKC5yf>&jk6HtSBB(fhpoorhWz z$;>x`jK~uCSiKY`Ol3HI7yz_>t__=8CS8lp&id9&B*c_XaH^M{3*&olW48AQ*3x2l zD_es5HJ`7qx8NTVo?J_0KI27Uj{;-aBa7-2X=B^S(9M;XtIdI(aRNikCQnjMN9rnV7O`MEo zSPML*6TZe@ucn;pwy~Fy-G`Gf#+a9X@=#mMFr~F=0~jJJ)GMMRvnisgaQZMrX#L)U zqIqFkk)pJ9EzGhf(p2a~J*k zY9{XHzN_WVnp@El3+I@GlaM=UHBCiImxBXp};Q>aA;ItZb73p}mU2>!f#=FN^{?9I=%272w{j^wGH6{|Jn8rCV51x`Va=iY^$A5JVq%CZ%pK zhPC+n(UfyPPxdl$#pYxf+m^iFHfKvpM{7Ax+y{tmoB@F#e%}mjsNu+Lh__xNcRSIh zbzOspZ&Yb26XM&YD&+T?r0L!d8Qw2%Z`(HCxaRcM(aTy@U;h98#xdPPC3@zNHNqpz zA`V6zG_UId;m6Ka@oJ5p8!Kk^kN`bn+H?;%pbgKhl(it9@bY#IBC$G$sR zjeSqvA6#=ZrDMsec;vrP`KFv!<;4&Z%_>tXoIaen&dbqbo_S)zUctKw@$HhPVS6G? z#qN9G^fasF1iP!6qq=gj{!kWtNN@Q4!^6Ss(MyOCy+b+*I7N)n2?1v{b|{ki@n?y%lC?ByHC%uQ^ulF6 zYCl~+I4xG2=wORtd_}7dgAc4(`f`5P7zYT!;{z%O&>DLgStvVEBj@9C<)P+1!>;&^ zAS23CFJg6z7EPF%!s)}Ou}@QL;)KZ<20tObUD7mcPo$~ngN*L8lC&%@=Zz_+w~odT zs|r89d4n7R5G8(gbcqNEV=6dwErKV=hH8Wk1Qn3PLjpMP#sQ8w zc8_4J4bCt$i8VMgIS;0b4>DvDN8>&(#*RDdBNOO6a6w=cflP$JK*k45R)!-@Q~lKv z>Rs-zn|h<*=?y6duq^ClWaZ){8KoR6GZjG&flFkx$FW0{ol%WqWGKv=fWghHn&j41 zoeCSr;9-Alp!EQ61CXYYv3ui%XSJk?homfQM!Hxe{QT}MPC|$rJWHqKGcz(pV48^{ z!CY6gn1jZaO2@)KBls8?a)F?NQAdUu2;$MuV=xWjn4x=uh&Z?bLX$zal8F@|e(}Lq zfg~9@fKDciAEnwL$MX)jqG3~y-e_{2?5}=#$Ll-9bv?%3@-8)yY}DF$4QQxqF{0jA zj7No&9i!rmrihSej-x4;W*y5pll`_OpH-|=3`pS5M7BkY5D`!V>m`Gv}?TkYaAz?t_g&Ek*Z6ix0YOqCR zCSQ?3?C@Y_c?3w;(rw}S+UC_;dPvI|c91ffX$gOR{!B(rg%eHrwKdKuNm63fO@$PV z^BHuNwTmnB*=13&Ei zZt>ih&SN%a!Y&!A?!9%zjYC|48BqMlY=1>0$IOwq{oQ!^oX(#`E*H6shv_x1PG)0W zdvA|90DVOa4dABjy+KsN5aw8)CW|J_3&b?x&O_HOmm23%MpQzP($-}pWF!{h?O&H*{a2` z@XtUX%#deP8M-FeL2>#1UjzgP66vd$4`C4(C!yBhh!w$?0{CG^uB48}eV&MM(+9~g zJvo<*0Rc215?kK&%^?Duqnr>wi(u{5E)d>n~eI>HGMT~dJxEzPr z-XuU`PE(Bg#_iUi)jCq*ds$0c*NI5>M4F1-k6w8Gx-I+cwk@kn3=18~WS1@c>v?1x zA*&X`Tuo$LO3{)b&_3l<9W}34wMrpXit}?dz|N@JLyE{Ns{&m!oFL)ybrqGy-l}~S z`>D&LI&j+Hh!w%t0>oTnPcKCeGR|1He7Z5fnX^^#;}F;5jZVw^o*98LdPR@m_Pr>d z((N|(EkD#fkj2<{3MB1j7hmgeBIU^K^uHz@wxLaqQ#%e!*p)C(29{ z!q@dQG3%U2Q_&9@+uru|bUJ-r%Hgu$II4$M75)zboK;e)Ol5xEf@`g*7SU2JCCd@+ z+~22Ht5(j|vZu`=OS*+n6?!Y;hCxpSE|5XGi4u>!H5pL*m6pJxJAGvp2Btcv6TMnn zVoe~)JQ~M5RomaF-F4DZOtT_uFWhKZ%5$ zST{JF4BZg1|Jc)`k^iBciFmNzv-Hcx@507BtU}seOx&R=lM3% z`&PJQ4BI*Bc?qFjF~LUaSob0fqAyjYMo<25aXp? z#dCrgrdX3=f~I;uy4D5P!OolbkkeB~X-KR3=fB8v5b?NQIF}en9RmryQd~(&r5uE) zj+^t$Evax;Nz3TC4y3ue2~wbwoTfULFo3}2I|)M!XN0jRs>#eKVZvu%;( zIp&9*&sID)rWn|V3CcM3snDU+Ag#(G1|A3j^}5QXXyv`{zDxI7OMwQEx*LA`u203uCUX~uPFa>CtV*!vya9tg8#^hL1%mwpx zQ4qprduDhlcAx8}H-;_@ec4`Zb5vF?mfw}Jn04V-Wl09oAAc)B$|O*sptaD7GNnc- zsglOB$OWYdvRYZzBz33^-%YRvT@+Vdudf6~kU+Z}agz5|9>+Xc_!3mGJPiqrFDIiF zL;+&1v1hs9JYL~kIymDjhT2qt1L^?|2*|L>uSY3Zv<;{M1+ZZKh*TcK)^+S7!Zbr5 z!5D_PGbKq`qtq^?DIvRd(w8F-Gwe>vc#2BlH&sOj(jR{-#o8uFfdbYQSdhH8ia6%!Dwf+XifpPi%U5-XH<;cQ}rKTjxru8I`KEx+<}-Cg{{8 z&~z`oD7-lh-84H4eJ`|pvEr^wWSIO`eAl)h^Rd~KG?W;ZB11ZBl{H)#Gi%NDmAUWI zGL~kovAj!JSh9796}lOXgV2?M88qSV0Fy-0f=QVqBHbjHvc|P!9b;rP$FWg}KPh2> zOsdhiH-u0=U7rhGY7Nt-E|SmzV{CwC#0JTI_xBRH(^VE6pV7(_#Bq#$MmcU$(izi~ ztgmTGsch#7&oai24hXKaRTO2o!Ls{0btg}||slw$g zICYS_@CosQ=v##q3=!`DS5&crE0rWNJCsnWA+_W^=N-|^G+h`Jg8+lnqj6xu7iP4W zt}leHjYcS_btRz(&VMfJj@S?w$}`Bd=IZkojQs^ko=(Tu=d|nRKzd`I)9#k0jIo%v zA)6+9&~AZD#$K0V>%3^KT&%h)(=BO)zby+HFMqK%2p+nOdOo+UZKojkSNJ78z~y@lef-*C~E4S)k2D4T&1ReOf-G5OW}6az+19ns9Xwq{!Z{|uI%^8_&A zW8fUe04L6tgy#X{Fo6`!=QRWnm_kB;p*kuFb8G?B$gY0)miND9nA`0b`<4s4J&@Vh z_slzEju2U<)TN@3a@WQ<2P#EndS?Gky8l|i< zGR+#9?xoj-w~lQ-X18rw%|x}(U76`AGyG%Q$T-Q>xmNPF&spG0*SRie(}r{KI>3B* za8}#NY}Z;tpVwJnHxV7^Eod5y?pip5N4@S^VP)O>*(|fg&1!2QKf$V5Dc0F{QCf?W zqElul_s(XR@P&n_IQF&BGt?MGpvb}u3aQr$x`vFzr;>iU3?9E1lw;Y)$J;!7&&U0t zWHF8-``$~QOPOU_V~LD5AvvOq)ohM+2qPn5iqW`-Gg_zo>1pQkFf=M?c|U`1*S7+# zowh2?T9xkokg@r+ujkY0=<1fkWx;yX4s=!j=wJH|8hJTxz3Y_dhMc!z?R($1#&+$c zd~+llkB{2w`h%tVnO_|TVPUj`H<7)|2P(tB>b`>u1Y$O6C!DHVIbZ}2&eYQ&4xL^) zqULclkiIWKbjs}Mh3HL2LsrxEjnXU9IK{BY!2%kad^~#nVsT89f#Nmr^rNUe%RW7g z{U9WgtzO~vjTf1$T7$96eiPRD-aRB9}ASLP>B*N?Kj`exThmyu@XyfFr~&d3$}(_z=-~=2u_rQKdfgcB^V}6r-g=J& z@@6xJn=A8llGf(6=#&{`I~vD4=L%Y=+Gi}iAx%(>iacy!#LwgpW{{yAGZx1*9Vx~) zQNfa7M=*Hrl;WQ`?)mu``$@=TN6BU6sGu{ z`@e+qCKKKC@E|0q2M z0TuFo?Poq>i~gR9)7O9>UtB*X|FmxB;&Zc}p=lH%2LlL9-~3(v1*RwWiO)kJ{(y1p zG|3m7d+ieKmUrsQ^flDV==2O>A5U^4pjUoqke{-K)&ofO@SYwz<5a$o^TMtI_g{Js zYIm_4q|v*mV;8cuLt_|6eo#N09yd`;0ykXvHCDju7vaPX5^`m+Kum;?UC-gE>@`3P zBl1lH+Bft}{H4YV*cy&tO`o#+l!eVrrX>)mC2&(rfGVS^{R*m{K(Eog5H9;|!z!1g zK3v5B>w`ofIxlhm%EN1sLskU*n_ri!FdW~uci^mNMEkEl0|JhZlS z6(t!$AHre%$m!vUf_g%ilWpl!T@MS`g^QRdiF{tpUx7{ONOrx07w5Vsm!mlMWdVcL zku;VPxtxY-0mGetH?4kYt|v{0ia6DtgjRS-JD>@udf$SkBv>rjyL|{hvWlou zf~{tnF^SX}VYw^X*%qK0M;B$HDU*_W>thRPDxu!5G!bOs&BVOo3;t;$uD3WDX;h3T z6_E{Qa}bFr&RCfOn|od(MiTfhSMN@bWEUClfD3W}r1+{PvBxTn0#6_vq96mVLKobG z$CXfN>uUi##wy5NZ`VfwRrw;jfzAkJcu#A{<@FE-qPBy!19zOxdyIHGX>tR>^uoO8 znc1RPfV(aFDHa4IlLk6!>gL6Gw2)|>841jEQ9>GPCNRW@BLo!umk4`Rnp%&ahbS;8 zs-sye&7CEWkma%HB^ra`VnNiu?VKB;BH?AMDB5GJ zu@qpelUHQSE@(G4a5ESOV7A#f2*37T4>k_5uhqt(#QnJ9;o({zu`L{0$pN_CfH4rg zwHg@OxMtwoCTfsa>{Ekm_l7hmOr8;g8sM+#P9u34a+F@L7z{eEN4*jT)8K(HSghV2 z0UYF@aot*BvX8<9^DgSA>oXv^4IM<}L+&_RQ%20u-fzW0;8{UMc9kPo$vQ|B{I^YL zS*~uqtjp?FEWi3xe?C&PD)Qk_Pb_kIs0oQ>TC8PRZP7_<&ks=01F7ihpIEhAu1(5~ zNjb}wdlCZ-|Kb=k80sWM#eH^AZ677p<5|p#ECzd_+ui#k*{2C+5z3j*qhk-Fek_o` zMofK?v6nFvzj?t(8MecXTTj6KA5Gj8f1t?AQ*d0ZFI@buLEDKoVAps~ooJ(PKp(*3FF1twX6*VHwjq%k59 zsDPHVBgAc?2`zVPb&H`h$If+Bo{1_BCWQz?U;~XqVv$ag21cO=5;G876&IelvK&bP zPcCv%hrEc4Llj0bRHzoLyYqJa|OBhDh+3kB5;F1-8f_iwb|uz#U3Pa)^!?uq`NJ!V`_LpeZ)u zcpkfB0{(VR$&R=>0*A3j3FNCA4w=n|_hm_05qp7om5gH(&lpF5o$%_m%|t*63s*r=4-CrkW+T+gVwr-VQJQ zfk}QjyXvl|UZ0$+&jlBq2lmoo*5nmg;X~&YccF`3=O<1q9$fA#3o5uvg(NLhIJ}4= zC6S&h^4^$;$&aJTl1nMIw9>oNT~*y9$5ps~0|pHl7GcDgr`_*C4~-hf#qR9xBS|Ka zBp)StPPOWkt8mvnux~Fsjy9To2dfc`BU_`veeV?pf&(WTY~uTV+hOukEyyL#HgiEo zrrAxQq*Vz+;V-RfQ~?6rK*q+zQ6g?^Ols`Mp`Lo{tG|H;8)~?bMjLCqr#-qdf6UPf8fCv*R$@$+49@VT_tTwxovx}?MtkQ6pLZJfr>}d95mhB9; zIa@lL=yokVU`gqL-eqp~?HdQa-&(mV3ZiQ9HFk+z>2EedfB8>&f_tL$%gNWQY{Pyb zUetd}?8n@o`^D0Jmpm+PQymIf$iBA3VWz*}h?ko@io1@-P2^)b_8rf|0T`Sy16s|s`NVJHspM) z(JcUSu3H7S(8!aI_$E+@1`ckZNHG!#U5sEWQCc8P9n8_pnR7c+rq1oC>+Rfu1{!5pGQ&~h2{g=!Ac;&%N6!!$S7Y^AkyOKSq|~bnH8?pj zcD8DJHR^Lg1D_M=O`6%wK^Zj?hmx!Dk8D1exVM}GGQdc#V*v({7$ks~#=9ys`TIWxp$&5o! zU26F%B@GA%Gp+pVk;k&0+ZtA){+Z~!nHcq>?6Sh+Lxk@jYEKD z$(0FjofSA>ZgRqi5C+)_TmS?h!+@U(VMvV%G$7yO*|R6l9x)Dl)4{$dGVK{N3r|+I zwUvb6|An5j&Avne1d%iao-{`?B9ek8`%062FOq_#rfJ6D!NknMla;N#rgI@?K79E- ze9^$>l~VZsJh_!sW7cBqoG{)!X#_iZ1HW*>!K&T^;;wdD+lqa`UekLXLU61ElzcCR zFOIZ;CAA02V^JP8*9-DXk0XNm!IVcP)NL~wQ`W?e z(1lr$uU5sS7aUL8rL`V=|W4~24HiT1(Z#PjOf#Q?&pus6{b_AzPX{VQ~El*Ud zhA7DJaCRi4LJUeUv{0L1lu{s`U7Yhu@lc?()bVw)5*#yt$WkG7qEU8I z*~v7e{Tt$?g}}UEZIi^HY)ES8TP{q{>{Q{3np7MNcvl5%YD9xlrxm?C(ps%7LB@nI z3I{zIgF+ZhBrlMr!C871SqicLU1DCI>ae`IQ85=MI02~L7+gzMT(H-?% z@Z`&q)8)2Q|CSMv5D96H`rtWWepK5z61P3d6YR)G`y#sl4tH4+#FR|Mai#zMBFVvx z{Fx2-YKX@jsns$v&2kLiG(r=BOvNyF z;275?aKjUE)>E*5=-?Cds;I;+N_5fYU#}QcH?w1$z~vW!CV^iN{C9hIK(jo2Kgg%R z4t*`LrE6x}z;!MCyP?rcz=G6-?i$PmHU~0Wd%>~;p0p$2xk5La>#+WlzU-Pj05u3I z$p2v!Ebjco-KerEI`lbCRZFGmK{~=2XDkB@2!WMJ42iQCWIi+h3LVRa0ZptCQhxBB q(h2DiY8Nn%C8Uaw$_le4vqI;ELp9<#q#IE6AXX8@+%ZPW0X_rWkGW+4 literal 0 HcmV?d00001 diff --git a/lib/package.json b/lib/package.json index e4eaaf455..9aa7c926d 100644 --- a/lib/package.json +++ b/lib/package.json @@ -60,7 +60,7 @@ "devDependencies": { "@atom-learning/icons": "1.20.0", "@atom-learning/jest-stitches": "1.0.10", - "@atom-learning/theme": "3.1.0", + "@atom-learning/theme": "4.0.0-beta.1", "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^11.0.0", "@radix-ui/react-id": "0.1.5", @@ -121,12 +121,12 @@ }, "peerDependencies": { "@atom-learning/icons": "^1.0.0", - "@atom-learning/theme": "^3.0.0", + "@atom-learning/theme": "^3 || ^4", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "dependencies": { - "@atom-learning/theme": "3.1.0", + "@atom-learning/theme": "4.0.0-beta.1", "@dnd-kit/core": "^6.0.5", "@dnd-kit/modifiers": "^6.0.0", "@dnd-kit/sortable": "^7.0.1", diff --git a/lib/sandbox/index.html b/lib/sandbox/index.html index ee192d661..c977d127e 100644 --- a/lib/sandbox/index.html +++ b/lib/sandbox/index.html @@ -6,7 +6,7 @@ - +
diff --git a/lib/src/components/dialog/DialogHeading.tsx b/lib/src/components/dialog/DialogHeading.tsx index 5f05d844f..7bbc180d8 100644 --- a/lib/src/components/dialog/DialogHeading.tsx +++ b/lib/src/components/dialog/DialogHeading.tsx @@ -10,7 +10,6 @@ export const DialogHeading = ({ size="sm" css={{ borderBottom: '1px solid $tonal100', - fontFamily: '$body', p: `0 $5 $5 $5`, mb: '$5', mx: '-$5', diff --git a/lib/src/components/heading/Heading.tsx b/lib/src/components/heading/Heading.tsx index 974c31d01..df8e388cc 100644 --- a/lib/src/components/heading/Heading.tsx +++ b/lib/src/components/heading/Heading.tsx @@ -18,29 +18,32 @@ export const StyledHeading = styled('h2', { ...capsize(0.3864) }, sm: { + fontFamily: '$body', fontSize: '$lg', lineHeight: 1.14, - ...capsize(0.2174, 0.2254) + ...capsize(0.2078, 0.2078) }, md: { fontSize: '$xl', lineHeight: 1.14, - ...capsize(0.2174, 0.2254) + letterSpacing: '0.015em', + ...capsize(0.15, 0.28) }, lg: { fontSize: '$2xl', lineHeight: 1.08, - ...capsize(0.1865, 0.1945) + letterSpacing: '0.01em', + ...capsize(0.12, 0.27) }, xl: { fontSize: '$3xl', lineHeight: 1.12, - ...capsize(0.206, 0.214) + ...capsize(0.16, 0.28) }, xxl: { fontSize: '$4xl', lineHeight: 1.06, - ...capsize(0.1793, 0.1873) + ...capsize(0.13, 0.25) } }, noCapsize: { diff --git a/yarn.lock b/yarn.lock index ea441d351..83603eb43 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28,10 +28,10 @@ chalk "^4.1.0" css "^3.0.0" -"@atom-learning/theme@3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@atom-learning/theme/-/theme-3.1.0.tgz#32a00575833715b142ea2543a9ebc24fb86ba6cc" - integrity sha512-TmhGgslOs7j92CYYznzzUS1Qv4+gb0jVyLNIyUn7RWC1tlgf7+66ka1VNWhKmD6W4kiAG0ejZuKdWiOe01eZ4Q== +"@atom-learning/theme@4.0.0-beta.1": + version "4.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@atom-learning/theme/-/theme-4.0.0-beta.1.tgz#7f428caf17aa5d95e52cec89cf7d1a799f8efcde" + integrity sha512-/vnY08G//YC46mogGZ9eHtlGlbXCdvHwARm3K9plX0VNeZpt+2CNe0Ze3qBepF/4rw1TpewmhTFvbecefZ1Cbw== "@babel/code-frame@7.12.11": version "7.12.11" From d69bd246a84a247eebae495c8555d8720a20ac05 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Fri, 23 Aug 2024 10:48:54 +0100 Subject: [PATCH 02/16] chore: implement new brand again again --- documentation/content/components.badge.md | 4 +++- documentation/package.json | 2 +- lib/package.json | 4 ++-- .../badge/stitches.badge.colorscheme.config.ts | 10 ++++++++++ .../color-scheme/stitches.colorscheme.config.ts | 4 ++++ yarn.lock | 8 ++++---- 6 files changed, 24 insertions(+), 8 deletions(-) diff --git a/documentation/content/components.badge.md b/documentation/content/components.badge.md index b604f203e..56c1f62e5 100644 --- a/documentation/content/components.badge.md +++ b/documentation/content/components.badge.md @@ -37,7 +37,7 @@ tabs: The following semantic themes are available: `success`, `warning`, `danger`, `neutral`, `info`. - The following non-semantic themes are available `grey`, `blue`, `purple`, `cyan`, `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`. + The following non-semantic themes are available `grey`, `blue`, `pink`, `purple`, `cyan`, `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`. If no theme is passed in. The badge theme defaults to "info". @@ -55,6 +55,7 @@ tabs: Grey Blue + Pink Purple Cyan Green @@ -77,6 +78,7 @@ tabs: Grey Blue + Pink Purple Cyan Green diff --git a/documentation/package.json b/documentation/package.json index 0be0af08a..be3183cdb 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -14,7 +14,7 @@ "dependencies": { "@atom-learning/components": "0.0.0-semantically-released", "@atom-learning/icons": "^1.20.0", - "@atom-learning/theme": "4.0.0-beta.1", + "@atom-learning/theme": "4.0.0-beta.3", "@lukeed/uuid": "^2.0.0", "lodash.kebabcase": "^4.1.1", "netlify-cms-app": "^2.15.72", diff --git a/lib/package.json b/lib/package.json index 9aa7c926d..7da846353 100644 --- a/lib/package.json +++ b/lib/package.json @@ -60,7 +60,7 @@ "devDependencies": { "@atom-learning/icons": "1.20.0", "@atom-learning/jest-stitches": "1.0.10", - "@atom-learning/theme": "4.0.0-beta.1", + "@atom-learning/theme": "4.0.0-beta.3", "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^11.0.0", "@radix-ui/react-id": "0.1.5", @@ -126,7 +126,7 @@ "react-dom": "^17 || ^18 || ^19" }, "dependencies": { - "@atom-learning/theme": "4.0.0-beta.1", + "@atom-learning/theme": "4.0.0-beta.3", "@dnd-kit/core": "^6.0.5", "@dnd-kit/modifiers": "^6.0.0", "@dnd-kit/sortable": "^7.0.1", diff --git a/lib/src/components/badge/stitches.badge.colorscheme.config.ts b/lib/src/components/badge/stitches.badge.colorscheme.config.ts index 1347a7747..03b500629 100644 --- a/lib/src/components/badge/stitches.badge.colorscheme.config.ts +++ b/lib/src/components/badge/stitches.badge.colorscheme.config.ts @@ -71,6 +71,15 @@ const blue = createTheme({ } }) +const pink = createTheme({ + colors: { + textSubtle: '$pink1000', + backgroundSubtle: '$pink200', + textBold: '#FFF', + backgroundBold: '$pink800' + } +}) + const purple = createTheme({ colors: { textSubtle: '$purple1000', @@ -160,6 +169,7 @@ export const colorSchemes = { warning, grey, blue, + pink, purple, cyan, green, diff --git a/lib/src/experiments/color-scheme/stitches.colorscheme.config.ts b/lib/src/experiments/color-scheme/stitches.colorscheme.config.ts index b9dc00308..1f5a35122 100644 --- a/lib/src/experiments/color-scheme/stitches.colorscheme.config.ts +++ b/lib/src/experiments/color-scheme/stitches.colorscheme.config.ts @@ -47,6 +47,8 @@ export const bases = { grey2: { colorName: 'grey' }, blue1: { colorName: 'blue', color0: '#FFFFFF' }, blue2: { colorName: 'blue' }, + pink1: { colorName: 'pink', color0: '#FFFFFF' }, + pink2: { colorName: 'pink' }, purple1: { colorName: 'purple', color0: '#FFFFFF' }, purple2: { colorName: 'purple' }, cyan1: { colorName: 'cyan', color0: '#FFFFFF' }, @@ -88,6 +90,8 @@ export const accents = { grey2: { colorName: 'grey' }, blue1: { colorName: 'blue', color0: '#FFFFFF' }, blue2: { colorName: 'blue' }, + pink1: { colorName: 'pink', color0: '#FFFFFF' }, + pink2: { colorName: 'pink' }, purple1: { colorName: 'purple', color0: '#FFFFFF' }, purple2: { colorName: 'purple' }, cyan1: { colorName: 'cyan', color0: '#FFFFFF' }, diff --git a/yarn.lock b/yarn.lock index 83603eb43..018c3dd8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28,10 +28,10 @@ chalk "^4.1.0" css "^3.0.0" -"@atom-learning/theme@4.0.0-beta.1": - version "4.0.0-beta.1" - resolved "https://registry.yarnpkg.com/@atom-learning/theme/-/theme-4.0.0-beta.1.tgz#7f428caf17aa5d95e52cec89cf7d1a799f8efcde" - integrity sha512-/vnY08G//YC46mogGZ9eHtlGlbXCdvHwARm3K9plX0VNeZpt+2CNe0Ze3qBepF/4rw1TpewmhTFvbecefZ1Cbw== +"@atom-learning/theme@4.0.0-beta.3": + version "4.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@atom-learning/theme/-/theme-4.0.0-beta.3.tgz#fa1c593733bc1380afef8de3dcf668096c04b2a7" + integrity sha512-ZqgFnjX0elwmS/szh881V8OxE0f4pGfPmMYub94skcPng8HdKEhXw7QSNY60jG/POLUOcEEdSUHKXiPr0ncOuw== "@babel/code-frame@7.12.11": version "7.12.11" From 56c9dc1a9a64e20004f3394ffe7e313bcae9bfc8 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Thu, 29 Aug 2024 12:50:46 +0100 Subject: [PATCH 03/16] fix: update heading style --- lib/package.json | 4 ++-- lib/src/components/heading/Heading.tsx | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/package.json b/lib/package.json index ce5924397..691e45fe4 100644 --- a/lib/package.json +++ b/lib/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", "module": "dist/index.js", - "version": "0.0.0-semantically-released", + "version": "4.0.0-beta.7", "description": "", "files": [ "dist" @@ -17,7 +17,7 @@ "build:proptypes": "node ./scripts/generate-component-props.mjs", "start:sandbox": "vite -c ./sandbox/vite.config.js", "add-component": "node ./scripts/add-component.mjs", - "prepublish": "run-s clean build:lib build:types build:proptypes", + "prepublishOnly": "yarn run clean && yarn run build:lib && yarn run build:types && yarn run build:proptypes", "clean": "del ./dist/", "format": "prettier 'src/**/*.{js,ts,tsx}' --write", "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix", diff --git a/lib/src/components/heading/Heading.tsx b/lib/src/components/heading/Heading.tsx index 4d47ef182..4a4822cb3 100644 --- a/lib/src/components/heading/Heading.tsx +++ b/lib/src/components/heading/Heading.tsx @@ -5,7 +5,6 @@ import type { Override } from '~/utilities' import { capsize } from '~/utilities' export const StyledHeading = styled('h2', { - fontFamily: '$display', fontWeight: 700, m: 0, variants: { @@ -23,22 +22,26 @@ export const StyledHeading = styled('h2', { ...capsize(0.2078, 0.2078) }, md: { + fontFamily: '$body', fontSize: '$xl', lineHeight: 1.14, ...capsize(0.15, 0.28) }, lg: { + fontFamily: '$display', fontSize: '$2xl', lineHeight: 1.08, letterSpacing: '0.01em', ...capsize(0.12, 0.27) }, xl: { + fontFamily: '$display', fontSize: '$3xl', lineHeight: 1.12, ...capsize(0.16, 0.28) }, xxl: { + fontFamily: '$display', fontSize: '$4xl', lineHeight: 1.06, ...capsize(0.13, 0.25) From 36e9008faad0886417f07152c9147db8b8da0cd3 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 9 Sep 2024 12:30:32 +0100 Subject: [PATCH 04/16] fix: capsize, add new weight and family props to Text --- .../banner/banner-slim/BannerSlimText.tsx | 2 +- lib/src/components/calendar/Calendar.tsx | 3 +- .../data-table/DataTableMetaData.tsx | 2 +- lib/src/components/heading/Heading.tsx | 12 +++---- .../section-message/SectionMessageTitle.tsx | 12 ++----- lib/src/components/text/Text.tsx | 32 +++++++++++++++---- 6 files changed, 39 insertions(+), 24 deletions(-) diff --git a/lib/src/components/banner/banner-slim/BannerSlimText.tsx b/lib/src/components/banner/banner-slim/BannerSlimText.tsx index 819a47527..384a46fd7 100644 --- a/lib/src/components/banner/banner-slim/BannerSlimText.tsx +++ b/lib/src/components/banner/banner-slim/BannerSlimText.tsx @@ -7,7 +7,6 @@ import { useBannerContext } from '../BannerContext' const StyledText = styled(Text, { color: 'var(--banner-heading-color)', - fontWeight: '600', variants: { containerSize: { sm: {}, @@ -34,6 +33,7 @@ export const BannerSlimText = (props: React.ComponentProps) => { return ( {weekday} diff --git a/lib/src/components/data-table/DataTableMetaData.tsx b/lib/src/components/data-table/DataTableMetaData.tsx index 181a63c07..d680d52a6 100644 --- a/lib/src/components/data-table/DataTableMetaData.tsx +++ b/lib/src/components/data-table/DataTableMetaData.tsx @@ -49,7 +49,7 @@ export const DataTableMetaData = ({ } return ( - {`${selectedRows || totalRows} ${ + {`${selectedRows || totalRows} ${ (selectedRows || totalRows) === 1 ? 'item' : 'items' } ${selectedRows ? 'selected' : ''} ${ isSorted ? getSortingString(sorting) : '' diff --git a/lib/src/components/heading/Heading.tsx b/lib/src/components/heading/Heading.tsx index 4a4822cb3..4ad3fd3fa 100644 --- a/lib/src/components/heading/Heading.tsx +++ b/lib/src/components/heading/Heading.tsx @@ -19,32 +19,32 @@ export const StyledHeading = styled('h2', { fontFamily: '$body', fontSize: '$lg', lineHeight: 1.14, - ...capsize(0.2078, 0.2078) + ...capsize(0.2078) }, md: { fontFamily: '$body', fontSize: '$xl', lineHeight: 1.14, - ...capsize(0.15, 0.28) + ...capsize(0.2078) }, lg: { fontFamily: '$display', fontSize: '$2xl', lineHeight: 1.08, letterSpacing: '0.01em', - ...capsize(0.12, 0.27) + ...capsize(0.1405, 0.2405) }, xl: { fontFamily: '$display', fontSize: '$3xl', lineHeight: 1.12, - ...capsize(0.16, 0.28) + ...capsize(0.16, 0.26) }, xxl: { fontFamily: '$display', fontSize: '$4xl', - lineHeight: 1.06, - ...capsize(0.13, 0.25) + lineHeight: 1, + ...capsize(0.1, 0.2) } }, noCapsize: { diff --git a/lib/src/components/section-message/SectionMessageTitle.tsx b/lib/src/components/section-message/SectionMessageTitle.tsx index 700ed798d..60675f3ac 100644 --- a/lib/src/components/section-message/SectionMessageTitle.tsx +++ b/lib/src/components/section-message/SectionMessageTitle.tsx @@ -2,16 +2,10 @@ import React from 'react' import { Text } from '../text' -export const SectionMessageTitle = ({ - css, - ...rest -}: React.ComponentProps): JSX.Element => ( +export const SectionMessageTitle = (props: React.ComponentProps): JSX.Element => ( ) diff --git a/lib/src/components/text/Text.tsx b/lib/src/components/text/Text.tsx index 2142e1e22..202e7c5b6 100644 --- a/lib/src/components/text/Text.tsx +++ b/lib/src/components/text/Text.tsx @@ -28,14 +28,23 @@ export const getTextVariant: (options: { }) export const StyledText = styled('p', { - fontFamily: '$body', - fontWeight: 400, - margin: 0, + m: 0, /** Allow nesting `` inside `` without forcing a new line and spacing. */ '& > &': { '&:before, &:after': { display: 'none' } }, - variants: textVariants + variants: { + ...textVariants, + weight: { + regular: { fontWeight: 400 }, + bold: { fontWeight: 600 } + }, + family: { + body: { fontFamily: '$body' }, + display: { fontFamily: '$display' }, + mono: { fontFamily: '$mono' }, + } + } }) type TextProps = Override< @@ -57,8 +66,19 @@ type TextProps = Override< > export const Text: React.ForwardRefExoticComponent = - React.forwardRef(({ size = 'md', ...remainingProps }, ref) => ( - + React.forwardRef(({ + size = 'md', + weight = 'regular', + family = 'body', + ...remainingProps + }, ref) => ( + )) Text.displayName = 'Text' From 9b1eeeda8f0be4bf9021c134fa834799c4ad1135 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 9 Sep 2024 12:30:40 +0100 Subject: [PATCH 05/16] chore: snapshots --- .../__snapshots__/Accordion.test.tsx.snap | 98 +++-- .../avatar/__snapshots__/Avatar.test.tsx.snap | 142 ++++--- .../badge/__snapshots__/Badge.test.tsx.snap | 378 +++++++++-------- .../__snapshots__/BannerRegular.test.tsx.snap | 288 +++++++------ .../__snapshots__/BannerSlim.test.tsx.snap | 391 ++++++++++-------- .../__snapshots__/Calendar.test.tsx.snap | 39 +- .../__snapshots__/CheckboxTree.test.tsx.snap | 40 +- .../CreatePasswordField.test.tsx.snap | 56 ++- .../__snapshots__/DataTable.test.tsx.snap | 370 ++++++++++------- .../__snapshots__/DateField.test.tsx.snap | 58 +-- .../__snapshots__/DateInput.test.tsx.snap | 61 +-- .../dialog/__snapshots__/Dialog.test.tsx.snap | 50 ++- .../drawer/__snapshots__/Drawer.test.tsx.snap | 98 +++-- .../__snapshots__/EmptyState.test.tsx.snap | 24 +- .../__snapshots__/FieldWrapper.test.tsx.snap | 76 ++-- .../__snapshots__/Heading.test.tsx.snap | 16 +- .../__snapshots__/InlineMessage.test.tsx.snap | 26 +- .../__snapshots__/InputField.test.tsx.snap | 82 ++-- .../input/__snapshots__/Input.test.tsx.snap | 72 ++-- .../link/__snapshots__/Link.test.tsx.snap | 184 +++++---- .../MarkdownContent.test.tsx.snap | 217 +++++----- .../NavigationMenuVertical.test.tsx.snap | 254 +++++++----- .../NavigationMenu.test.tsx.snap | 124 +++--- .../NumberInputField.test.tsx.snap | 82 ++-- .../__snapshots__/NumberInput.test.tsx.snap | 48 ++- .../__snapshots__/Pagination.test.tsx.snap | 98 +++-- .../__snapshots__/PasswordField.test.tsx.snap | 24 +- .../__snapshots__/PasswordInput.test.tsx.snap | 24 +- .../__snapshots__/SearchField.test.tsx.snap | 82 ++-- .../__snapshots__/SearchInput.test.tsx.snap | 72 ++-- .../SectionMessage.test.tsx.snap | 42 +- .../__snapshots__/SideBar.test.tsx.snap | 196 +++++---- .../__snapshots__/SliderField.test.tsx.snap | 26 +- .../slider/__snapshots__/Slider.test.tsx.snap | 26 +- .../spacer/__snapshots__/Spacer.test.tsx.snap | 26 +- .../__snapshots__/StackContent.test.tsx.snap | 60 +-- .../tabs/__snapshots__/Tabs.test.tsx.snap | 126 +++--- .../text/__snapshots__/Text.test.tsx.snap | 24 +- .../TileInteractive.test.tsx.snap | 98 +++-- .../TileToggleGroup.test.tsx.snap | 98 +++-- .../tile/__snapshots__/Tile.test.tsx.snap | 98 +++-- .../__snapshots__/TopBar.test.tsx.snap | 244 ++++++----- .../tree/__snapshots__/Tree.test.tsx.snap | 30 +- 43 files changed, 2667 insertions(+), 2001 deletions(-) diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap index b7082c23b..c3a8ba3ad 100644 --- a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap +++ b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Accordion component renders an accordion 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Accordion component renders an accordion 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap index e4ce931b1..dd16d0f83 100644 --- a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +++ b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap @@ -24,14 +24,12 @@ exports[`Avatar component renders a fallback icon instead of an initial if name object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -52,23 +50,31 @@ exports[`Avatar component renders a fallback icon instead of an initial if name width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMBZYr-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); @@ -80,18 +86,18 @@ exports[`Avatar component renders a fallback icon instead of an initial if name stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -99,7 +105,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name } @media { - .c-dyvMgW-ildsiYK-css { + .c-ctivzP-ildsiYK-css { color: var(--colors-tonal400); } @@ -167,14 +173,12 @@ exports[`Avatar component renders an icon avatar 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -195,23 +199,31 @@ exports[`Avatar component renders an icon avatar 1`] = ` width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMBZYr-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); @@ -223,18 +235,18 @@ exports[`Avatar component renders an icon avatar 1`] = ` stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -242,7 +254,7 @@ exports[`Avatar component renders an icon avatar 1`] = ` } @media { - .c-dyvMgW-ildsiYK-css { + .c-ctivzP-ildsiYK-css { color: var(--colors-tonal400); } @@ -345,14 +357,12 @@ exports[`Avatar component renders an inital avatar 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -373,23 +383,31 @@ exports[`Avatar component renders an inital avatar 1`] = ` width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMBZYr-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); @@ -401,18 +419,18 @@ exports[`Avatar component renders an inital avatar 1`] = ` stroke-width: 1.75; } - .c-dyvMgW-bhKTXb-size-xs { + .c-ctivzP-bhKTXb-size-xs { font-size: var(--fontSizes-xs); line-height: 1.6; } - .c-dyvMgW-bhKTXb-size-xs::before { + .c-ctivzP-bhKTXb-size-xs::before { content: ''; margin-bottom: -0.4364em; display: table; } - .c-dyvMgW-bhKTXb-size-xs::after { + .c-ctivzP-bhKTXb-size-xs::after { content: ''; margin-top: -0.4364em; display: table; @@ -420,7 +438,7 @@ exports[`Avatar component renders an inital avatar 1`] = ` } @media { - .c-dyvMgW-ildsiYK-css { + .c-ctivzP-ildsiYK-css { color: var(--colors-tonal400); } @@ -441,7 +459,7 @@ exports[`Avatar component renders an inital avatar 1`] = ` class="c-hMBZYr c-hMBZYr-fDXBFo-size-xs" >

A

@@ -473,14 +491,12 @@ exports[`Avatar component renders an xs size with the fallback icon when src and object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -501,23 +517,31 @@ exports[`Avatar component renders an xs size with the fallback icon when src and width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMBZYr-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); @@ -531,7 +555,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and } @media { - .c-dyvMgW-ildsiYK-css { + .c-ctivzP-ildsiYK-css { color: var(--colors-tonal400); } @@ -599,14 +623,12 @@ exports[`Avatar component renders the initial of the name when the src of the im object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @@ -617,26 +639,34 @@ exports[`Avatar component renders the initial of the name when the src of the im width: var(--sizes-5); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { - .c-dyvMgW-ildsiYK-css { + .c-ctivzP-ildsiYK-css { color: var(--colors-tonal400); } } @@ -646,7 +676,7 @@ exports[`Avatar component renders the initial of the name when the src of the im class="c-hMBZYr c-hMBZYr-kMhpXP-size-lg" >

B

diff --git a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap index 0dba7ac25..0c26d0816 100644 --- a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap +++ b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Badge component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Badge component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Badge component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Badge component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Badge component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Badge component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Badge component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Badge component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -319,14 +331,12 @@ exports[`Badge component renders 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -349,28 +359,36 @@ exports[`Badge component renders 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -382,7 +400,7 @@ exports[`Badge component renders 1`] = ` role="status" >

Some Text

@@ -393,7 +411,7 @@ exports[`Badge component renders 1`] = ` exports[`Badge component renders a md size and danger theme 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -428,22 +446,34 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -456,18 +486,18 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -482,8 +512,8 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -504,18 +534,18 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -598,7 +628,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -631,7 +661,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -656,7 +686,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -716,14 +746,12 @@ exports[`Badge component renders a md size and danger theme 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -746,28 +774,36 @@ exports[`Badge component renders a md size and danger theme 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -786,7 +822,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` role="status" >

Some Text

@@ -797,7 +833,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` exports[`Badge component renders with an icon 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -832,22 +868,34 @@ exports[`Badge component renders with an icon 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -860,18 +908,18 @@ exports[`Badge component renders with an icon 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -886,8 +934,8 @@ exports[`Badge component renders with an icon 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -908,18 +956,18 @@ exports[`Badge component renders with an icon 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -1002,7 +1050,7 @@ exports[`Badge component renders with an icon 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -1035,7 +1083,7 @@ exports[`Badge component renders with an icon 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -1060,7 +1108,7 @@ exports[`Badge component renders with an icon 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -1120,14 +1168,12 @@ exports[`Badge component renders with an icon 1`] = ` margin-right: var(--space-1); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1160,28 +1206,36 @@ exports[`Badge component renders with an icon 1`] = ` padding-bottom: var(--space-0); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-goUgMm-ktaGtY-overflow-wrap { white-space: wrap; } @@ -1216,7 +1270,7 @@ exports[`Badge component renders with an icon 1`] = ` />

Some Text

diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap index cd9fc7603..05ef8bb1e 100644 --- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap +++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BannerRegular component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`BannerRegular component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`BannerRegular component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`BannerRegular component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`BannerRegular component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`BannerRegular component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`BannerRegular component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`BannerRegular component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -330,8 +342,7 @@ exports[`BannerRegular component renders 1`] = ` flex-grow: 1; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -341,14 +352,12 @@ exports[`BannerRegular component renders 1`] = ` color: var(--banner-heading-color); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -410,40 +419,49 @@ exports[`BannerRegular component renders 1`] = ` padding: var(--space-4); } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-bYxtOe-llIiIE-containerSize-sm { margin-bottom: var(--space-4); } @@ -488,14 +506,14 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md { + .c-ctivzP-flAohk-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::before { + .c-ctivzP-flAohk-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; @@ -503,7 +521,7 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::after { + .c-ctivzP-flAohk-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -611,12 +629,12 @@ exports[`BannerRegular component renders 1`] = ` class="c-PJLV c-gjbGPV c-gjbGPV-lppGPL-size-sm c-gjbGPV-iOglxG-size-md" >

Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

@@ -653,7 +671,7 @@ exports[`BannerRegular component renders 1`] = ` exports[`BannerRegular component renders dismissible variant 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -688,22 +706,34 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -716,18 +746,18 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -742,8 +772,8 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -764,18 +794,18 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -858,7 +888,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -891,7 +921,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -916,7 +946,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -980,8 +1010,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` flex-grow: 1; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -991,14 +1020,12 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` color: var(--banner-heading-color); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1098,40 +1125,49 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` padding: var(--space-4); } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-bYxtOe-llIiIE-containerSize-sm { margin-bottom: var(--space-4); } @@ -1191,14 +1227,14 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md { + .c-ctivzP-flAohk-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::before { + .c-ctivzP-flAohk-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; @@ -1206,7 +1242,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` } @media (min-width: 800px) { - .c-dyvMgW-flAohk-size-md::after { + .c-ctivzP-flAohk-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -1329,12 +1365,12 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` class="c-PJLV c-gjbGPV c-gjbGPV-lppGPL-size-sm c-gjbGPV-iOglxG-size-md" >

Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

diff --git a/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap b/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap index d17b3a2db..8a969185d 100644 --- a/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap +++ b/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BannerSlim component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`BannerSlim component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`BannerSlim component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`BannerSlim component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`BannerSlim component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`BannerSlim component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`BannerSlim component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`BannerSlim component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -348,20 +360,17 @@ exports[`BannerSlim component renders 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-cBoNQA { + .c-ehbeFv { color: var(--banner-heading-color); - font-weight: 600; } .c-kaaUSm { @@ -424,28 +433,36 @@ exports[`BannerSlim component renders 1`] = ` width: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-fGHEql-size-sm { width: 100%; } @@ -561,7 +578,7 @@ exports[`BannerSlim component renders 1`] = ` />

Link your Prime and Nucleus accounts to see all your information in one place.

@@ -583,7 +600,7 @@ exports[`BannerSlim component renders 1`] = ` exports[`BannerSlim component renders dismissible variant 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -618,22 +635,34 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -646,18 +675,18 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -672,8 +701,8 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -694,18 +723,18 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -788,7 +817,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -821,7 +850,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -846,7 +875,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -928,20 +957,17 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-cBoNQA { + .c-ehbeFv { color: var(--banner-heading-color); - font-weight: 600; } .c-kaaUSm { @@ -1035,28 +1061,36 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` width: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-fGHEql-size-sm { width: 100%; } @@ -1192,7 +1226,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` color: var(--colors-primary1000); } - .c-cBoNQA-cRYaBy-cv { + .c-ehbeFv-cRYaBy-cv { margin-right: var(--space-6); } } @@ -1221,7 +1255,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` />

Link your Prime and Nucleus accounts to see all your information in one place.

@@ -1260,7 +1294,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` exports[`BannerSlim component renders sm variant 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -1295,22 +1329,34 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -1323,18 +1369,18 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -1349,8 +1395,8 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -1371,18 +1417,18 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -1465,7 +1511,7 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -1498,7 +1544,7 @@ exports[`BannerSlim component renders sm variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -1523,7 +1569,7 @@ exports[`BannerSlim component renders sm variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -1605,20 +1651,17 @@ exports[`BannerSlim component renders sm variant 1`] = ` object-fit: cover; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-cBoNQA { + .c-ehbeFv { color: var(--banner-heading-color); - font-weight: 600; } .c-kaaUSm { @@ -1712,28 +1755,36 @@ exports[`BannerSlim component renders sm variant 1`] = ` width: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-fGHEql-size-sm { width: 100%; } @@ -1869,7 +1920,7 @@ exports[`BannerSlim component renders sm variant 1`] = ` color: var(--colors-primary1000); } - .c-cBoNQA-cRYaBy-cv { + .c-ehbeFv-cRYaBy-cv { margin-right: var(--space-6); } } @@ -1898,7 +1949,7 @@ exports[`BannerSlim component renders sm variant 1`] = ` />

Link your Prime and Nucleus accounts to see all your information in one place.

diff --git a/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap b/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap index 9dbebf063..af90d3672 100644 --- a/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap +++ b/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap @@ -113,14 +113,12 @@ exports[`Calendar component renders 1`] = ` grid-gap: var(--space-1) var(--space-2); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -188,23 +186,31 @@ exports[`Calendar component renders 1`] = ` width: 20px; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-nNuCY-huXVXM-isOutsideMonth-true { color: var(--colors-tonal200); } @@ -279,8 +285,7 @@ exports[`Calendar component renders 1`] = ` margin-bottom: var(--space-3); } - .c-dyvMgW-idQvJRf-css { - font-weight: 600; + .c-ctivzP-igjdJOs-css { text-align: center; } } @@ -346,37 +351,37 @@ exports[`Calendar component renders 1`] = ` class="c-fPxPMR c-fPxPMR-ihbtntv-css" > Sun Mon Tue Wed Thu Fri Sat diff --git a/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap b/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap index 76fa8cebe..f81743cda 100644 --- a/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap +++ b/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap @@ -78,14 +78,12 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` cursor: not-allowed; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -178,28 +176,36 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` width: var(--sizes-1); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-elrktp-size-sm { height: var(--sizes-3); width: var(--sizes-3); @@ -253,7 +259,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Top level @@ -303,7 +309,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Trigger With Submenu @@ -336,7 +342,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> 1 @@ -363,7 +369,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> 2 @@ -413,7 +419,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> All but nested @@ -446,7 +452,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Nested: #1 @@ -473,7 +479,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Nested: #2 diff --git a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap index 9d930d6b5..6b5ccbc0b 100644 --- a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap +++ b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap @@ -25,14 +25,12 @@ exports[`CreatePasswordField component displays validation styling to the input border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -199,23 +197,31 @@ exports[`CreatePasswordField component displays validation styling to the input height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -255,18 +261,18 @@ exports[`CreatePasswordField component displays validation styling to the input stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -353,7 +359,7 @@ exports[`CreatePasswordField component displays validation styling to the input margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -387,7 +393,7 @@ exports[`CreatePasswordField component displays validation styling to the input > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -618,23 +622,31 @@ exports[`CreatePasswordField component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -752,7 +764,7 @@ exports[`CreatePasswordField component renders 1`] = ` > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -485,23 +483,31 @@ exports[`DataTable EmptyState renders custom empty state 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -546,18 +552,18 @@ exports[`DataTable EmptyState renders custom empty state 1`] = ` background: white; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -612,6 +618,10 @@ exports[`DataTable EmptyState renders custom empty state 1`] = ` cursor: grab; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + .c-dScekx-kupcZn-size-md { height: var(--sizes-1); width: var(--sizes-1); @@ -814,10 +824,6 @@ exports[`DataTable EmptyState renders custom empty state 1`] = ` pointer-events: none; } - .c-dyvMgW-iecBjWS-css { - font-weight: 600; - } - .c-dhzjXW-ijTlYpr-css { justify-content: flex-end; align-items: center; @@ -918,7 +924,7 @@ exports[`DataTable EmptyState renders custom empty state 1`] = ` No data available

Something is missing

@@ -957,14 +963,12 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] = border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1233,23 +1237,31 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] = height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -1294,18 +1306,18 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] = background: white; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -2459,7 +2471,7 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] = exports[`DataTable component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -2494,22 +2506,34 @@ exports[`DataTable component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -2522,18 +2546,18 @@ exports[`DataTable component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -2548,8 +2572,8 @@ exports[`DataTable component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -2570,18 +2594,18 @@ exports[`DataTable component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -2664,7 +2688,7 @@ exports[`DataTable component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -2697,7 +2721,7 @@ exports[`DataTable component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -2722,7 +2746,7 @@ exports[`DataTable component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -2804,14 +2828,12 @@ exports[`DataTable component renders 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -3023,23 +3045,31 @@ exports[`DataTable component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -3084,18 +3114,18 @@ exports[`DataTable component renders 1`] = ` background: white; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -3201,7 +3231,7 @@ exports[`DataTable component renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" >

1 - 10 of 18 items

@@ -3601,7 +3631,7 @@ exports[`DataTable component renders 1`] = ` exports[`DataTable server-side renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -3636,22 +3666,34 @@ exports[`DataTable server-side renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -3664,18 +3706,18 @@ exports[`DataTable server-side renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -3690,8 +3732,8 @@ exports[`DataTable server-side renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -3712,18 +3754,18 @@ exports[`DataTable server-side renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -3806,7 +3848,7 @@ exports[`DataTable server-side renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -3839,7 +3881,7 @@ exports[`DataTable server-side renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -3864,7 +3906,7 @@ exports[`DataTable server-side renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -3946,14 +3988,12 @@ exports[`DataTable server-side renders 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -4384,23 +4424,31 @@ exports[`DataTable server-side renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -4445,18 +4493,18 @@ exports[`DataTable server-side renders 1`] = ` background: white; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -4511,6 +4559,10 @@ exports[`DataTable server-side renders 1`] = ` cursor: grab; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + .c-dScekx-kupcZn-size-md { height: var(--sizes-1); width: var(--sizes-1); @@ -4699,10 +4751,6 @@ exports[`DataTable server-side renders 1`] = ` pointer-events: none; } - .c-dyvMgW-iecBjWS-css { - font-weight: 600; - } - .c-dhzjXW-ijTlYpr-css { justify-content: flex-end; align-items: center; @@ -4778,7 +4826,7 @@ exports[`DataTable server-side renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -5115,7 +5163,7 @@ exports[`DataTable server-side renders 1`] = ` class="c-kzpziV" >

1 - 10 of 18 items

@@ -5199,14 +5247,12 @@ exports[`DataTable sticky columns renders 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -5637,23 +5683,31 @@ exports[`DataTable sticky columns renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -5698,18 +5752,18 @@ exports[`DataTable sticky columns renders 1`] = ` background: white; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -5764,6 +5818,10 @@ exports[`DataTable sticky columns renders 1`] = ` cursor: grab; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + .c-dScekx-kupcZn-size-md { height: var(--sizes-1); width: var(--sizes-1); @@ -5882,10 +5940,6 @@ exports[`DataTable sticky columns renders 1`] = ` pointer-events: none; } - .c-dyvMgW-iecBjWS-css { - font-weight: 600; - } - .c-dhzjXW-ijTlYpr-css { justify-content: flex-end; align-items: center; diff --git a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap index 0db41ec28..35108bd9a 100644 --- a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap +++ b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap @@ -25,14 +25,12 @@ exports[`DateField component renders a field in error state 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -123,23 +121,31 @@ exports[`DateField component renders a field in error state 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -170,18 +176,18 @@ exports[`DateField component renders a field in error state 1`] = ` stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -231,7 +237,7 @@ exports[`DateField component renders a field in error state 1`] = ` margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -267,7 +273,7 @@ exports[`DateField component renders a field in error state 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -366,14 +372,12 @@ exports[`DateField component renders a field with a text input 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -458,23 +462,31 @@ exports[`DateField component renders a field with a text input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -548,7 +560,7 @@ exports[`DateField component renders a field with a text input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -89,23 +87,31 @@ exports[`DateInput component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -157,7 +163,7 @@ exports[`DateInput component renders 1`] = ` > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -447,23 +451,31 @@ exports[`DateInput component renders lg size 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -493,23 +505,27 @@ exports[`DateInput component renders lg size 1`] = ` width: 20px; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + .c-nNuCY-huXVXM-isOutsideMonth-true { color: var(--colors-tonal200); } @@ -613,8 +629,7 @@ exports[`DateInput component renders lg size 1`] = ` margin-bottom: var(--space-3); } - .c-dyvMgW-idQvJRf-css { - font-weight: 600; + .c-ctivzP-igjdJOs-css { text-align: center; } @@ -633,7 +648,7 @@ exports[`DateInput component renders lg size 1`] = ` >

TITLE

@@ -265,8 +264,7 @@ exports[`Dialog component with custom background renders 1`] = ` vertical-align: middle; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -344,20 +342,21 @@ exports[`Dialog component with custom background renders 1`] = ` stroke-width: 1.75; } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } @@ -399,9 +398,8 @@ exports[`Dialog component with custom background renders 1`] = ` width: var(--sizes-5); } - .c-jryFOR-ijkrzPY-css { + .c-iUMJTc-ihTftrn-css { border-bottom: 1px solid var(--colors-tonal100); - font-family: var(--fonts-body); padding: 0 var(--space-5) var(--space-5) var(--space-5); margin-bottom: var(--space-5); margin-left: calc(var(--space-5)*-1); @@ -492,8 +490,7 @@ exports[`Dialog component without close button renders 1`] = ` vertical-align: middle; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } @@ -566,20 +563,21 @@ exports[`Dialog component without close button renders 1`] = ` stroke-width: 1.75; } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } diff --git a/lib/src/components/drawer/__snapshots__/Drawer.test.tsx.snap b/lib/src/components/drawer/__snapshots__/Drawer.test.tsx.snap index da347f108..0fc1d1fdb 100644 --- a/lib/src/components/drawer/__snapshots__/Drawer.test.tsx.snap +++ b/lib/src/components/drawer/__snapshots__/Drawer.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Drawer opens the popover once trigger is clicked 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/empty-state/__snapshots__/EmptyState.test.tsx.snap b/lib/src/components/empty-state/__snapshots__/EmptyState.test.tsx.snap index b862a2a63..413c404b6 100644 --- a/lib/src/components/empty-state/__snapshots__/EmptyState.test.tsx.snap +++ b/lib/src/components/empty-state/__snapshots__/EmptyState.test.tsx.snap @@ -23,14 +23,12 @@ exports[`EmptyState component renders a component 1`] = ` margin: 0; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -50,23 +48,31 @@ exports[`EmptyState component renders a component 1`] = ` margin-bottom: var(--space-3); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-cXdTNb-kSBam-size-sm { font-size: var(--fontSizes-sm); margin-bottom: var(--space-4); @@ -83,7 +89,7 @@ exports[`EmptyState component renders a component 1`] = ` No users found!

You need to add some users before you can use this feature

diff --git a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap index 6e22e875e..fdc8f8266 100644 --- a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap +++ b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap @@ -12,7 +12,7 @@ exports[`FieldWrapper component renders 1`] = ` margin: 0; } - .c-bmSGqY { + .c-cVWBGG { background: unset; border: unset; padding: unset; @@ -22,38 +22,38 @@ exports[`FieldWrapper component renders 1`] = ` text-decoration: none; } - .c-bmSGqY:focus, - .c-bmSGqY:hover { + .c-cVWBGG:focus, + .c-cVWBGG:hover { color: var(--colors-primary900); text-decoration: underline; } - .c-bmSGqY:active { + .c-cVWBGG:active { color: var(--colors-primary1000); } - .c-bmSGqY[disabled] { + .c-cVWBGG[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } - .c-dyvMgW > .c-bmSGqY, - .c-jryFOR > .c-bmSGqY, - .c-PJLV > .c-bmSGqY, - .c-bYNGXt > .c-bmSGqY { + .c-ctivzP > .c-cVWBGG, + .c-iUMJTc > .c-cVWBGG, + .c-PJLV > .c-cVWBGG, + .c-bYNGXt > .c-cVWBGG { font-size: 100%; line-height: 1; } - .c-dyvMgW > .c-bmSGqY::before, - .c-dyvMgW > .c-bmSGqY::after, - .c-jryFOR > .c-bmSGqY::before, - .c-jryFOR > .c-bmSGqY::after, - .c-PJLV > .c-bmSGqY::before, - .c-PJLV > .c-bmSGqY::after, - .c-bYNGXt > .c-bmSGqY::before, - .c-bYNGXt > .c-bmSGqY::after { + .c-ctivzP > .c-cVWBGG::before, + .c-ctivzP > .c-cVWBGG::after, + .c-iUMJTc > .c-cVWBGG::before, + .c-iUMJTc > .c-cVWBGG::after, + .c-PJLV > .c-cVWBGG::before, + .c-PJLV > .c-cVWBGG::after, + .c-bYNGXt > .c-cVWBGG::before, + .c-bYNGXt > .c-cVWBGG::after { content: none; } @@ -70,14 +70,12 @@ exports[`FieldWrapper component renders 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -137,18 +135,18 @@ exports[`FieldWrapper component renders 1`] = ` font-weight: 600; } - .c-bmSGqY-bndJoy-size-sm { + .c-cVWBGG-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-bmSGqY-bndJoy-size-sm::before { + .c-cVWBGG-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-bmSGqY-bndJoy-size-sm::after { + .c-cVWBGG-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -158,23 +156,31 @@ exports[`FieldWrapper component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-PJLV-iymbh-theme-error { color: var(--colors-danger); } @@ -185,18 +191,18 @@ exports[`FieldWrapper component renders 1`] = ` stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -218,7 +224,7 @@ exports[`FieldWrapper component renders 1`] = ` margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -237,7 +243,7 @@ exports[`FieldWrapper component renders 1`] = ` Example Field Example error diff --git a/lib/src/components/heading/__snapshots__/Heading.test.tsx.snap b/lib/src/components/heading/__snapshots__/Heading.test.tsx.snap index f314ad359..26bb51b2e 100644 --- a/lib/src/components/heading/__snapshots__/Heading.test.tsx.snap +++ b/lib/src/components/heading/__snapshots__/Heading.test.tsx.snap @@ -2,35 +2,35 @@ exports[`Heading component renders a heading 1`] = ` @media { - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } } @media { - .c-jryFOR-fOoUdm-size-md { + .c-iUMJTc-iEIMJs-size-md { + font-family: var(--fonts-body); font-size: var(--fontSizes-xl); line-height: 1.14; } - .c-jryFOR-fOoUdm-size-md::before { + .c-iUMJTc-iEIMJs-size-md::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-fOoUdm-size-md::after { + .c-iUMJTc-iEIMJs-size-md::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } }

HEADING

diff --git a/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap b/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap index 6d328d8c6..90abc6cf5 100644 --- a/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap +++ b/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap @@ -16,14 +16,12 @@ exports[`InlineMessage component renders an inline message 1`] = ` vertical-align: middle; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @@ -39,22 +37,30 @@ exports[`InlineMessage component renders an inline message 1`] = ` stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -62,7 +68,7 @@ exports[`InlineMessage component renders an inline message 1`] = ` margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -93,7 +99,7 @@ exports[`InlineMessage component renders an inline message 1`] = ` /> This is an Inline Message diff --git a/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap b/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap index 047228dac..49a7bb4d4 100644 --- a/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap +++ b/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap @@ -25,14 +25,12 @@ exports[`InputField component renders a field in error state 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -102,23 +100,31 @@ exports[`InputField component renders a field in error state 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-kOvGWL-kRqBPT-disabled-true { opacity: 0.3; cursor: not-allowed; @@ -138,18 +144,18 @@ exports[`InputField component renders a field in error state 1`] = ` stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -177,7 +183,7 @@ exports[`InputField component renders a field in error state 1`] = ` margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -210,7 +216,7 @@ exports[`InputField component renders a field in error state 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -281,14 +287,12 @@ exports[`InputField component renders a field with a number input 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -342,22 +346,30 @@ exports[`InputField component renders a field with a number input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -396,7 +408,7 @@ exports[`InputField component renders a field with a number input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -496,22 +506,30 @@ exports[`InputField component renders a field with a text input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -550,7 +568,7 @@ exports[`InputField component renders a field with a text input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -58,22 +56,30 @@ exports[`Input component renders a number input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -89,7 +95,7 @@ exports[`Input component renders a number input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ikLAKdM-css" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -157,22 +161,30 @@ exports[`Input component renders a text input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -188,7 +200,7 @@ exports[`Input component renders a text input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ikLAKdM-css" > @@ -215,14 +227,12 @@ exports[`Input component renders lg size 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -254,23 +264,31 @@ exports[`Input component renders lg size 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-kOvGWL-kRqBPT-disabled-true { opacity: 0.3; cursor: not-allowed; @@ -294,7 +312,7 @@ exports[`Input component renders lg size 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg" >
diff --git a/lib/src/components/link/__snapshots__/Link.test.tsx.snap b/lib/src/components/link/__snapshots__/Link.test.tsx.snap index d61974453..bb6d654a0 100644 --- a/lib/src/components/link/__snapshots__/Link.test.tsx.snap +++ b/lib/src/components/link/__snapshots__/Link.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Link component can be nested within Text and Heading 1`] = ` @media { - .c-bmSGqY { + .c-cVWBGG { background: unset; border: unset; padding: unset; @@ -12,149 +12,155 @@ exports[`Link component can be nested within Text and Heading 1`] = ` text-decoration: none; } - .c-bmSGqY:focus, - .c-bmSGqY:hover { + .c-cVWBGG:focus, + .c-cVWBGG:hover { color: var(--colors-primary900); text-decoration: underline; } - .c-bmSGqY:active { + .c-cVWBGG:active { color: var(--colors-primary1000); } - .c-bmSGqY[disabled] { + .c-cVWBGG[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } - .c-dyvMgW > .c-bmSGqY, - .c-jryFOR > .c-bmSGqY, - .c-PJLV > .c-bmSGqY, - .c-bYNGXt > .c-bmSGqY { + .c-ctivzP > .c-cVWBGG, + .c-iUMJTc > .c-cVWBGG, + .c-PJLV > .c-cVWBGG, + .c-bYNGXt > .c-cVWBGG { font-size: 100%; line-height: 1; } - .c-dyvMgW > .c-bmSGqY::before, - .c-dyvMgW > .c-bmSGqY::after, - .c-jryFOR > .c-bmSGqY::before, - .c-jryFOR > .c-bmSGqY::after, - .c-PJLV > .c-bmSGqY::before, - .c-PJLV > .c-bmSGqY::after, - .c-bYNGXt > .c-bmSGqY::before, - .c-bYNGXt > .c-bmSGqY::after { + .c-ctivzP > .c-cVWBGG::before, + .c-ctivzP > .c-cVWBGG::after, + .c-iUMJTc > .c-cVWBGG::before, + .c-iUMJTc > .c-cVWBGG::after, + .c-PJLV > .c-cVWBGG::before, + .c-PJLV > .c-cVWBGG::after, + .c-bYNGXt > .c-cVWBGG::before, + .c-bYNGXt > .c-cVWBGG::after { content: none; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } } @media { - .c-bmSGqY-gvmVBy-size-md { + .c-cVWBGG-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-bmSGqY-gvmVBy-size-md::before { + .c-cVWBGG-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-bmSGqY-gvmVBy-size-md::after { + .c-cVWBGG-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-bmSGqY-jvTRJO-size-lg { + .c-cVWBGG-jvTRJO-size-lg { font-size: var(--fontSizes-lg); line-height: 1.52; } - .c-bmSGqY-jvTRJO-size-lg::before { + .c-cVWBGG-jvTRJO-size-lg::before { content: ''; margin-bottom: -0.3983em; display: table; } - .c-bmSGqY-jvTRJO-size-lg::after { + .c-cVWBGG-jvTRJO-size-lg::after { content: ''; margin-top: -0.3983em; display: table; } - .c-bmSGqY-fmPQHp-noCapsize-true::before, - .c-bmSGqY-fmPQHp-noCapsize-true::after { + .c-cVWBGG-fmPQHp-noCapsize-true::before, + .c-cVWBGG-fmPQHp-noCapsize-true::after { display: none !important; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-jryFOR-fOoUdm-size-md { + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-iUMJTc-iEIMJs-size-md { + font-family: var(--fonts-body); font-size: var(--fontSizes-xl); line-height: 1.14; } - .c-jryFOR-fOoUdm-size-md::before { + .c-iUMJTc-iEIMJs-size-md::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-fOoUdm-size-md::after { + .c-iUMJTc-iEIMJs-size-md::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } }

@@ -164,7 +170,7 @@ exports[`Link component can be nested within Text and Heading 1`] = ` exports[`Link component renders an anchor 1`] = ` @media { - .c-bmSGqY { + .c-cVWBGG { background: unset; border: unset; padding: unset; @@ -174,55 +180,55 @@ exports[`Link component renders an anchor 1`] = ` text-decoration: none; } - .c-bmSGqY:focus, - .c-bmSGqY:hover { + .c-cVWBGG:focus, + .c-cVWBGG:hover { color: var(--colors-primary900); text-decoration: underline; } - .c-bmSGqY:active { + .c-cVWBGG:active { color: var(--colors-primary1000); } - .c-bmSGqY[disabled] { + .c-cVWBGG[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } - .c-dyvMgW > .c-bmSGqY, - .c-jryFOR > .c-bmSGqY, - .c-PJLV > .c-bmSGqY, - .c-bYNGXt > .c-bmSGqY { + .c-ctivzP > .c-cVWBGG, + .c-iUMJTc > .c-cVWBGG, + .c-PJLV > .c-cVWBGG, + .c-bYNGXt > .c-cVWBGG { font-size: 100%; line-height: 1; } - .c-dyvMgW > .c-bmSGqY::before, - .c-dyvMgW > .c-bmSGqY::after, - .c-jryFOR > .c-bmSGqY::before, - .c-jryFOR > .c-bmSGqY::after, - .c-PJLV > .c-bmSGqY::before, - .c-PJLV > .c-bmSGqY::after, - .c-bYNGXt > .c-bmSGqY::before, - .c-bYNGXt > .c-bmSGqY::after { + .c-ctivzP > .c-cVWBGG::before, + .c-ctivzP > .c-cVWBGG::after, + .c-iUMJTc > .c-cVWBGG::before, + .c-iUMJTc > .c-cVWBGG::after, + .c-PJLV > .c-cVWBGG::before, + .c-PJLV > .c-cVWBGG::after, + .c-bYNGXt > .c-cVWBGG::before, + .c-bYNGXt > .c-cVWBGG::after { content: none; } } @media { - .c-bmSGqY-gvmVBy-size-md { + .c-cVWBGG-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-bmSGqY-gvmVBy-size-md::before { + .c-cVWBGG-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-bmSGqY-gvmVBy-size-md::after { + .c-cVWBGG-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -231,7 +237,7 @@ exports[`Link component renders an anchor 1`] = `
.c-bmSGqY, - .c-jryFOR > .c-bmSGqY, - .c-PJLV > .c-bmSGqY, - .c-bYNGXt > .c-bmSGqY { + .c-ctivzP > .c-cVWBGG, + .c-iUMJTc > .c-cVWBGG, + .c-PJLV > .c-cVWBGG, + .c-bYNGXt > .c-cVWBGG { font-size: 100%; line-height: 1; } - .c-dyvMgW > .c-bmSGqY::before, - .c-dyvMgW > .c-bmSGqY::after, - .c-jryFOR > .c-bmSGqY::before, - .c-jryFOR > .c-bmSGqY::after, - .c-PJLV > .c-bmSGqY::before, - .c-PJLV > .c-bmSGqY::after, - .c-bYNGXt > .c-bmSGqY::before, - .c-bYNGXt > .c-bmSGqY::after { + .c-ctivzP > .c-cVWBGG::before, + .c-ctivzP > .c-cVWBGG::after, + .c-iUMJTc > .c-cVWBGG::before, + .c-iUMJTc > .c-cVWBGG::after, + .c-PJLV > .c-cVWBGG::before, + .c-PJLV > .c-cVWBGG::after, + .c-bYNGXt > .c-cVWBGG::before, + .c-bYNGXt > .c-cVWBGG::after { content: none; } } @media { - .c-bmSGqY-gvmVBy-size-md { + .c-cVWBGG-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-bmSGqY-gvmVBy-size-md::before { + .c-cVWBGG-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-bmSGqY-gvmVBy-size-md::after { + .c-cVWBGG-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-bmSGqY-jvTRJO-size-lg { + .c-cVWBGG-jvTRJO-size-lg { font-size: var(--fontSizes-lg); line-height: 1.52; } - .c-bmSGqY-jvTRJO-size-lg::before { + .c-cVWBGG-jvTRJO-size-lg::before { content: ''; margin-bottom: -0.3983em; display: table; } - .c-bmSGqY-jvTRJO-size-lg::after { + .c-cVWBGG-jvTRJO-size-lg::after { content: ''; margin-top: -0.3983em; display: table; @@ -327,7 +333,7 @@ exports[`Link component renders an large anchor 1`] = `
*:not(:first-child) { + .c-bJoNOb > *:not(:first-child) { margin-top: var(--space-5); } - .c-gvpzZh > *:not(:last-child) { + .c-bJoNOb > *:not(:last-child) { margin-bottom: var(--space-5); } - .c-gvpzZh > .c-jryFOR { + .c-bJoNOb > .c-iUMJTc { max-width: 65ch; } - .c-gvpzZh > .c-dyvMgW { + .c-bJoNOb > .c-ctivzP { max-width: 75ch; } - .c-gvpzZh > .c-bBdCwN { + .c-bJoNOb > .c-bBdCwN { max-width: 75ch; } - .c-gvpzZh > .c-fNKiiB { + .c-bJoNOb > .c-fNKiiB { margin-top: var(--space-5); margin-bottom: var(--space-5); } - .c-gvpzZh > .c-iSBxEZ { + .c-bJoNOb > .c-iSBxEZ { display: block; } - .c-gvpzZh > .c-iSBxEZ:not(:first-child) { + .c-bJoNOb > .c-iSBxEZ:not(:first-child) { margin-top: var(--space-6); } - .c-gvpzZh > .c-iSBxEZ:not(:last-child) { + .c-bJoNOb > .c-iSBxEZ:not(:last-child) { margin-bottom: var(--space-6); } @@ -44,20 +44,17 @@ exports[`MarkdownContent component renders 1`] = ` background: var(--colors-tonal100); } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -106,7 +103,7 @@ exports[`MarkdownContent component renders 1`] = ` padding: var(--space-3); } - .c-bmSGqY { + .c-cVWBGG { background: unset; border: unset; padding: unset; @@ -116,38 +113,38 @@ exports[`MarkdownContent component renders 1`] = ` text-decoration: none; } - .c-bmSGqY:focus, - .c-bmSGqY:hover { + .c-cVWBGG:focus, + .c-cVWBGG:hover { color: var(--colors-primary900); text-decoration: underline; } - .c-bmSGqY:active { + .c-cVWBGG:active { color: var(--colors-primary1000); } - .c-bmSGqY[disabled] { + .c-cVWBGG[disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; } - .c-dyvMgW > .c-bmSGqY, - .c-jryFOR > .c-bmSGqY, - .c-PJLV > .c-bmSGqY, - .c-bYNGXt > .c-bmSGqY { + .c-ctivzP > .c-cVWBGG, + .c-iUMJTc > .c-cVWBGG, + .c-PJLV > .c-cVWBGG, + .c-bYNGXt > .c-cVWBGG { font-size: 100%; line-height: 1; } - .c-dyvMgW > .c-bmSGqY::before, - .c-dyvMgW > .c-bmSGqY::after, - .c-jryFOR > .c-bmSGqY::before, - .c-jryFOR > .c-bmSGqY::after, - .c-PJLV > .c-bmSGqY::before, - .c-PJLV > .c-bmSGqY::after, - .c-bYNGXt > .c-bmSGqY::before, - .c-bYNGXt > .c-bmSGqY::after { + .c-ctivzP > .c-cVWBGG::before, + .c-ctivzP > .c-cVWBGG::after, + .c-iUMJTc > .c-cVWBGG::before, + .c-iUMJTc > .c-cVWBGG::after, + .c-PJLV > .c-cVWBGG::before, + .c-PJLV > .c-cVWBGG::after, + .c-bYNGXt > .c-cVWBGG::before, + .c-bYNGXt > .c-cVWBGG::after { content: none; } @@ -163,110 +160,122 @@ exports[`MarkdownContent component renders 1`] = ` width: 100%; } - .c-jryFOR-bSbzjX-size-lg { + .c-iUMJTc-glvsPs-size-lg { + font-family: var(--fonts-display); font-size: var(--fontSizes-2xl); line-height: 1.08; + letter-spacing: 0.01em; } - .c-jryFOR-bSbzjX-size-lg::before { + .c-iUMJTc-glvsPs-size-lg::before { content: ''; - margin-bottom: -0.1865em; + margin-bottom: -0.1405em; display: table; } - .c-jryFOR-bSbzjX-size-lg::after { + .c-iUMJTc-glvsPs-size-lg::after { content: ''; - margin-top: -0.1945em; + margin-top: -0.2405em; display: table; } - .c-jryFOR-kYeJd-size-xl { + .c-iUMJTc-gwyVDE-size-xl { + font-family: var(--fonts-display); font-size: var(--fontSizes-3xl); line-height: 1.12; } - .c-jryFOR-kYeJd-size-xl::before { + .c-iUMJTc-gwyVDE-size-xl::before { content: ''; - margin-bottom: -0.206em; + margin-bottom: -0.16em; display: table; } - .c-jryFOR-kYeJd-size-xl::after { + .c-iUMJTc-gwyVDE-size-xl::after { content: ''; - margin-top: -0.214em; + margin-top: -0.26em; display: table; } - .c-jryFOR-fOoUdm-size-md { + .c-iUMJTc-iEIMJs-size-md { + font-family: var(--fonts-body); font-size: var(--fontSizes-xl); line-height: 1.14; } - .c-jryFOR-fOoUdm-size-md::before { + .c-iUMJTc-iEIMJs-size-md::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-fOoUdm-size-md::after { + .c-iUMJTc-iEIMJs-size-md::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm { + .c-iUMJTc-kCkEYj-size-sm { + font-family: var(--fonts-body); font-size: var(--fontSizes-lg); line-height: 1.14; } - .c-jryFOR-dtbHih-size-sm::before { + .c-iUMJTc-kCkEYj-size-sm::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-dtbHih-size-sm::after { + .c-iUMJTc-kCkEYj-size-sm::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-jryFOR-llheLm-size-xs { + .c-iUMJTc-hcLaKt-size-xs { font-family: var(--fonts-body); - font-weight: 600; font-size: var(--fontSizes-md); line-height: 1.5; } - .c-jryFOR-llheLm-size-xs::before { + .c-iUMJTc-hcLaKt-size-xs::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-jryFOR-llheLm-size-xs::after { + .c-iUMJTc-hcLaKt-size-xs::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-bBdCwN-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; @@ -316,18 +325,18 @@ exports[`MarkdownContent component renders 1`] = ` font-weight: bold; } - .c-bmSGqY-gvmVBy-size-md { + .c-cVWBGG-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-bmSGqY-gvmVBy-size-md::before { + .c-cVWBGG-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-bmSGqY-gvmVBy-size-md::after { + .c-cVWBGG-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; @@ -351,13 +360,13 @@ exports[`MarkdownContent component renders 1`] = `

Headings

@@ -365,32 +374,32 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
@@ -398,7 +407,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Emphasis

@@ -406,7 +415,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Blockquotes

@@ -456,7 +465,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Lists

@@ -464,7 +473,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Unordered

@@ -475,7 +484,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Create a list by starting a line with

Sub-lists are made by indenting 2 spaces:

@@ -512,7 +521,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Marker character change forces new list start:

@@ -523,7 +532,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Ac tristique libero volutpat at

@@ -536,7 +545,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Facilisis in pretium nisl aliquet

@@ -549,7 +558,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Nulla volutpat aliquam velit

@@ -562,14 +571,14 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Very easy!

Ordered

@@ -580,7 +589,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Lorem ipsum dolor sit amet

@@ -589,7 +598,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Consectetur adipiscing elit

@@ -598,7 +607,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

Integer molestie lorem at massa

@@ -607,7 +616,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

You can use sequential numbers...

@@ -616,7 +625,7 @@ exports[`MarkdownContent component renders 1`] = ` class="c-PJLV" >

...or keep all the numbers as

Code

@@ -639,12 +648,12 @@ exports[`MarkdownContent component renders 1`] = ` class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Inline code

This is inline

Indented code

@@ -667,7 +676,7 @@ line 2 of code line 3 of code

Block code "fences"

@@ -680,7 +689,7 @@ line 3 of code class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Links

@@ -688,10 +697,10 @@ line 3 of code class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Images

@@ -724,7 +733,7 @@ line 3 of code class="c-fNKiiB c-fNKiiB-jokUAR-orientation-horizontal c-fNKiiB-ifGHEql-css" />

Minion .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -409,23 +419,31 @@ exports[`NavigationMenuVertical renders 1`] = ` gap: var(--space-2); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-rTOZb-jLELKD-size-lg { min-height: var(--sizes-5); } @@ -459,7 +477,7 @@ exports[`NavigationMenuVertical renders 1`] = ` class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > Button @@ -478,7 +496,7 @@ exports[`NavigationMenuVertical renders 1`] = ` class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > Relative Link @@ -499,7 +517,7 @@ exports[`NavigationMenuVertical renders 1`] = ` class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > External Link @@ -514,7 +532,7 @@ exports[`NavigationMenuVertical renders 1`] = ` exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -549,22 +567,34 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -577,18 +607,18 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -603,8 +633,8 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -625,18 +655,18 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -719,7 +749,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -752,7 +782,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -777,7 +807,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -819,14 +849,12 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = display: flex; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -938,23 +966,31 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = gap: var(--space-2); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-rTOZb-jLELKD-size-lg { min-height: var(--sizes-5); } @@ -1003,7 +1039,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > Button @@ -1022,7 +1058,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > Relative Link @@ -1043,7 +1079,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > External Link @@ -1067,7 +1103,7 @@ exports[`NavigationMenuVertical renders accordion and interacts correctly 1`] = class="c-dhzjXW c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > Accordion Trigger diff --git a/lib/src/components/navigation/__snapshots__/NavigationMenu.test.tsx.snap b/lib/src/components/navigation/__snapshots__/NavigationMenu.test.tsx.snap index 6c237d1ae..f35540894 100644 --- a/lib/src/components/navigation/__snapshots__/NavigationMenu.test.tsx.snap +++ b/lib/src/components/navigation/__snapshots__/NavigationMenu.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Nav component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Nav component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Nav component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Nav component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Nav component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Nav component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Nav component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Nav component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -423,14 +435,12 @@ exports[`Nav component renders 1`] = ` display: flex; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -504,23 +514,31 @@ exports[`Nav component renders 1`] = ` stroke-width: 1.5; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-govTNd-hasWGL-elementType-dropdownItem[data-active] { background: var(--colors-backgroundSelected); color: var(--colors-textSelected); @@ -665,12 +683,12 @@ exports[`Nav component renders 1`] = ` class="c-dhzjXW c-dhzjXW-iiTKOFX-css" >

Colours

Atom Learning color palette

diff --git a/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap b/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap index 778cac720..1cc092014 100644 --- a/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap +++ b/lib/src/components/number-input-field/__snapshots__/NumberInputField.test.tsx.snap @@ -139,14 +139,12 @@ exports[`NumberInputField component renders a field in error state - has no prog border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -215,23 +213,31 @@ exports[`NumberInputField component renders a field in error state - has no prog height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-kOvGWL-kRqBPT-disabled-true { opacity: 0.3; cursor: not-allowed; @@ -251,18 +257,18 @@ exports[`NumberInputField component renders a field in error state - has no prog stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -323,7 +329,7 @@ exports[`NumberInputField component renders a field in error state - has no prog margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -381,7 +387,7 @@ exports[`NumberInputField component renders a field in error state - has no prog aria-valuemax="9007199254740991" aria-valuemin="0" aria-valuenow="0" - class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd" + class="c-ctivzP c-ctivzP-gvmVBy-size-md c-ctivzP-eMzMJc-weight-regular c-ctivzP-cyRcZm-family-body c-foJWJd" id="numberInputField" inputmode="numeric" name="numberInputField" @@ -440,7 +446,7 @@ exports[`NumberInputField component renders a field in error state - has no prog /> Cannot enter values less than 7 @@ -594,14 +600,12 @@ exports[`NumberInputField component renders a field with a disabled input - has border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -670,23 +674,31 @@ exports[`NumberInputField component renders a field with a disabled input - has height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-kOvGWL-kRqBPT-disabled-true { opacity: 0.3; cursor: not-allowed; @@ -792,7 +804,7 @@ exports[`NumberInputField component renders a field with a disabled input - has aria-valuemax="9007199254740991" aria-valuemin="0" aria-valuenow="0" - class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd" + class="c-ctivzP c-ctivzP-gvmVBy-size-md c-ctivzP-eMzMJc-weight-regular c-ctivzP-cyRcZm-family-body c-foJWJd" disabled="" id="numberInputField" inputmode="numeric" @@ -977,14 +989,12 @@ exports[`NumberInputField component renders a field with a number input - has no border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1053,22 +1063,30 @@ exports[`NumberInputField component renders a field with a number input - has no height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -1170,7 +1188,7 @@ exports[`NumberInputField component renders a field with a number input - has no aria-valuemax="9007199254740991" aria-valuemin="0" aria-valuenow="0" - class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd" + class="c-ctivzP c-ctivzP-gvmVBy-size-md c-ctivzP-eMzMJc-weight-regular c-ctivzP-cyRcZm-family-body c-foJWJd" id="numberInputField" inputmode="numeric" name="numberInputField" diff --git a/lib/src/components/number-input/__snapshots__/NumberInput.test.tsx.snap b/lib/src/components/number-input/__snapshots__/NumberInput.test.tsx.snap index 5c824a4cf..20e969d0f 100644 --- a/lib/src/components/number-input/__snapshots__/NumberInput.test.tsx.snap +++ b/lib/src/components/number-input/__snapshots__/NumberInput.test.tsx.snap @@ -133,14 +133,12 @@ exports[`NumberInput component renders lg size 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -199,23 +197,31 @@ exports[`NumberInput component renders lg size 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-kOvGWL-hSbHZR-size-lg { height: var(--sizes-5); } @@ -298,7 +304,7 @@ exports[`NumberInput component renders lg size 1`] = ` aria-valuemax="9007199254740991" aria-valuemin="0" aria-valuenow="0" - class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd" + class="c-ctivzP c-ctivzP-gvmVBy-size-md c-ctivzP-eMzMJc-weight-regular c-ctivzP-cyRcZm-family-body c-foJWJd" inputmode="numeric" name="test" pattern="[0-9]*" @@ -467,14 +473,12 @@ exports[`NumberInput component renders number input 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -521,22 +525,30 @@ exports[`NumberInput component renders number input 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -616,7 +628,7 @@ exports[`NumberInput component renders number input 1`] = ` aria-valuemax="9007199254740991" aria-valuemin="0" aria-valuenow="0" - class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd" + class="c-ctivzP c-ctivzP-gvmVBy-size-md c-ctivzP-eMzMJc-weight-regular c-ctivzP-cyRcZm-family-body c-foJWJd" inputmode="numeric" name="test" pattern="[0-9]*" diff --git a/lib/src/components/pagination/__snapshots__/Pagination.test.tsx.snap b/lib/src/components/pagination/__snapshots__/Pagination.test.tsx.snap index a2e8ef18c..0fef65f4f 100644 --- a/lib/src/components/pagination/__snapshots__/Pagination.test.tsx.snap +++ b/lib/src/components/pagination/__snapshots__/Pagination.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Pagination component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Pagination component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Pagination component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Pagination component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Pagination component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Pagination component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Pagination component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Pagination component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/password-field/__snapshots__/PasswordField.test.tsx.snap b/lib/src/components/password-field/__snapshots__/PasswordField.test.tsx.snap index 3e08ce314..13ab5d8df 100644 --- a/lib/src/components/password-field/__snapshots__/PasswordField.test.tsx.snap +++ b/lib/src/components/password-field/__snapshots__/PasswordField.test.tsx.snap @@ -25,14 +25,12 @@ exports[`PasswordField component renders a password field 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -165,23 +163,31 @@ exports[`PasswordField component renders a password field 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -269,7 +275,7 @@ exports[`PasswordField component renders a password field 1`] = ` > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -137,23 +135,31 @@ exports[`PasswordInput component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -210,7 +216,7 @@ exports[`PasswordInput component renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icFLuKp-css" >
diff --git a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap index 941ece34d..9a5acd7a8 100644 --- a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap +++ b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap @@ -25,14 +25,12 @@ exports[`SearchField component renders a field in error state - has no programma border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -115,23 +113,31 @@ exports[`SearchField component renders a field in error state - has no programma height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -163,18 +169,18 @@ exports[`SearchField component renders a field in error state - has no programma stroke-width: 1.5; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; @@ -212,7 +218,7 @@ exports[`SearchField component renders a field in error state - has no programma margin-right: var(--space-2); } - .c-dyvMgW-iiTbKsx-css { + .c-ctivzP-iiTbKsx-css { transform: translateY(var(--space-0)); } } @@ -247,7 +253,7 @@ exports[`SearchField component renders a field in error state - has no programma class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -337,14 +343,12 @@ exports[`SearchField component renders a field with a disabled input - has no pr border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -421,23 +425,31 @@ exports[`SearchField component renders a field with a disabled input - has no pr height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -505,7 +517,7 @@ exports[`SearchField component renders a field with a disabled input - has no pr class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-kRqBPT-disabled-true" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -644,23 +654,31 @@ exports[`SearchField component renders a field with a search input - has no prog height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -723,7 +741,7 @@ exports[`SearchField component renders a field with a search input - has no prog class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -81,23 +79,31 @@ exports[`SearchInput component renders 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -137,7 +143,7 @@ exports[`SearchInput component renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -180,14 +186,12 @@ exports[`SearchInput component renders clear button when non-empty defaultValue border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -311,23 +315,31 @@ exports[`SearchInput component renders clear button when non-empty defaultValue height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -399,7 +411,7 @@ exports[`SearchInput component renders clear button when non-empty defaultValue class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -444,14 +456,12 @@ exports[`SearchInput component renders lg size 1`] = ` border-color: var(--colors-blue800); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -575,23 +585,31 @@ exports[`SearchInput component renders lg size 1`] = ` height: var(--sizes-4); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-hMRxhp-dMrjnF-size-md { height: var(--sizes-2); width: var(--sizes-2); @@ -657,7 +675,7 @@ exports[`SearchInput component renders lg size 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg" > diff --git a/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap b/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap index 13b15e8f2..e4b8687eb 100644 --- a/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap +++ b/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap @@ -16,14 +16,12 @@ exports[`renders SectionMessage component and has no programmatically detectable vertical-align: middle; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -121,40 +119,52 @@ exports[`renders SectionMessage component and has no programmatically detectable stroke-width: 1.5; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-ecBjWS-weight-bold { + font-weight: 600; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + .c-oUmPa-elrktp-size-sm { height: var(--sizes-3); width: var(--sizes-3); @@ -217,11 +227,7 @@ exports[`renders SectionMessage component and has no programmatically detectable margin-bottom: var(--space-2); } - .c-dyvMgW-iecBjWS-css { - font-weight: 600; - } - - .c-dyvMgW-ibDwMAO-css { + .c-ctivzP-ibDwMAO-css { color: var(--colors-grey900); } @@ -265,12 +271,12 @@ exports[`renders SectionMessage component and has no programmatically detectable class="c-PJLV c-PJLV-ihLIGwZ-css" >

Title message

This is the description

diff --git a/lib/src/components/side-bar/__snapshots__/SideBar.test.tsx.snap b/lib/src/components/side-bar/__snapshots__/SideBar.test.tsx.snap index d910e531d..8600f6f60 100644 --- a/lib/src/components/side-bar/__snapshots__/SideBar.test.tsx.snap +++ b/lib/src/components/side-bar/__snapshots__/SideBar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`SideBar component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`SideBar component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`SideBar component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`SideBar component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`SideBar component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`SideBar component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`SideBar component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`SideBar component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -439,7 +451,7 @@ exports[`SideBar component renders 1`] = ` exports[`SideBar component renders as static type 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -474,22 +486,34 @@ exports[`SideBar component renders as static type 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -502,18 +526,18 @@ exports[`SideBar component renders as static type 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -528,8 +552,8 @@ exports[`SideBar component renders as static type 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -550,18 +574,18 @@ exports[`SideBar component renders as static type 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -644,7 +668,7 @@ exports[`SideBar component renders as static type 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -677,7 +701,7 @@ exports[`SideBar component renders as static type 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -702,7 +726,7 @@ exports[`SideBar component renders as static type 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap b/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap index 4577984b4..b527474d5 100644 --- a/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap +++ b/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap @@ -84,14 +84,12 @@ exports[`SliderField component renders 1`] = ` cursor: not-allowed; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @@ -123,22 +121,30 @@ exports[`SliderField component renders 1`] = ` background: var(--colors-tonal200); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -148,7 +154,7 @@ exports[`SliderField component renders 1`] = ` margin-bottom: var(--space-3); } - .c-dyvMgW-iQwDky-css { + .c-ctivzP-iQwDky-css { margin-top: var(--space-4); color: var(--colors-tonal300); width: 100%; @@ -213,7 +219,7 @@ exports[`SliderField component renders 1`] = ` value="50" />

Current value is 50

diff --git a/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap b/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap index f279b8622..c8ae7f60a 100644 --- a/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap +++ b/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap @@ -313,14 +313,12 @@ exports[`Slider.Value component renders 1`] = ` cursor: not-allowed; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @@ -330,26 +328,34 @@ exports[`Slider.Value component renders 1`] = ` background: var(--colors-tonal200); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { - .c-dyvMgW-iQwDky-css { + .c-ctivzP-iQwDky-css { margin-top: var(--space-4); color: var(--colors-tonal300); width: 100%; @@ -358,7 +364,7 @@ exports[`Slider.Value component renders 1`] = `

Current value is 50

diff --git a/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap b/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap index 61e4aadef..8b3b6ee05 100644 --- a/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap +++ b/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap @@ -6,14 +6,12 @@ exports[`Spacer component renders 1`] = ` display: flex; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -25,22 +23,30 @@ exports[`Spacer component renders 1`] = ` } @media { - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } } @media { @@ -54,7 +60,7 @@ exports[`Spacer component renders 1`] = ` class="c-dhzjXW c-dhzjXW-ilgjzAj-css" >

flex item left

@@ -62,7 +68,7 @@ exports[`Spacer component renders 1`] = ` class="c-gJAAjO" />

flex item right

diff --git a/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap b/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap index 6ad263ea2..e128febf7 100644 --- a/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap +++ b/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap @@ -2,57 +2,54 @@ exports[`StackContent component renders a stack content 1`] = ` @media { - .c-gvpzZh > *:not(:first-child) { + .c-bJoNOb > *:not(:first-child) { margin-top: var(--space-5); } - .c-gvpzZh > *:not(:last-child) { + .c-bJoNOb > *:not(:last-child) { margin-bottom: var(--space-5); } - .c-gvpzZh > .c-jryFOR { + .c-bJoNOb > .c-iUMJTc { max-width: 65ch; } - .c-gvpzZh > .c-dyvMgW { + .c-bJoNOb > .c-ctivzP { max-width: 75ch; } - .c-gvpzZh > .c-bBdCwN { + .c-bJoNOb > .c-bBdCwN { max-width: 75ch; } - .c-gvpzZh > .c-fNKiiB { + .c-bJoNOb > .c-fNKiiB { margin-top: var(--space-5); margin-bottom: var(--space-5); } - .c-gvpzZh > .c-iSBxEZ { + .c-bJoNOb > .c-iSBxEZ { display: block; } - .c-gvpzZh > .c-iSBxEZ:not(:first-child) { + .c-bJoNOb > .c-iSBxEZ:not(:first-child) { margin-top: var(--space-6); } - .c-gvpzZh > .c-iSBxEZ:not(:last-child) { + .c-bJoNOb > .c-iSBxEZ:not(:last-child) { margin-bottom: var(--space-6); } - .c-jryFOR { - font-family: var(--fonts-display); + .c-iUMJTc { font-weight: 700; margin: 0; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -83,40 +80,49 @@ exports[`StackContent component renders a stack content 1`] = ` } @media { - .c-jryFOR-fOoUdm-size-md { + .c-iUMJTc-iEIMJs-size-md { + font-family: var(--fonts-body); font-size: var(--fontSizes-xl); line-height: 1.14; } - .c-jryFOR-fOoUdm-size-md::before { + .c-iUMJTc-iEIMJs-size-md::before { content: ''; - margin-bottom: -0.2174em; + margin-bottom: -0.2078em; display: table; } - .c-jryFOR-fOoUdm-size-md::after { + .c-iUMJTc-iEIMJs-size-md::after { content: ''; - margin-top: -0.2254em; + margin-top: -0.2078em; display: table; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-fNKiiB-jokUAR-orientation-horizontal { height: 1px; width: 100%; @@ -166,15 +172,15 @@ exports[`StackContent component renders a stack content 1`] = `

HEADING

TEXT

diff --git a/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap b/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap index 17e9c190e..232f94e48 100644 --- a/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap +++ b/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Tabs component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Tabs component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Tabs component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Tabs component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Tabs component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Tabs component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Tabs component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Tabs component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -332,14 +344,12 @@ exports[`Tabs component renders 1`] = ` } @media { - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -428,22 +438,30 @@ exports[`Tabs component renders 1`] = ` } @media { - .c-dyvMgW-bndJoy-size-sm { + .c-ctivzP-bndJoy-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; } - .c-dyvMgW-bndJoy-size-sm::before { + .c-ctivzP-bndJoy-size-sm::before { content: ''; margin-bottom: -0.4056em; display: table; } - .c-dyvMgW-bndJoy-size-sm::after { + .c-ctivzP-bndJoy-size-sm::after { content: ''; margin-top: -0.4056em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } }
@@ -476,7 +494,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 1 @@ -497,7 +515,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 2 @@ -520,7 +538,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 3 diff --git a/lib/src/components/text/__snapshots__/Text.test.tsx.snap b/lib/src/components/text/__snapshots__/Text.test.tsx.snap index 9628987f0..cf744a733 100644 --- a/lib/src/components/text/__snapshots__/Text.test.tsx.snap +++ b/lib/src/components/text/__snapshots__/Text.test.tsx.snap @@ -2,40 +2,46 @@ exports[`Text component renders some text 1`] = ` @media { - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } } @media { - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } }

TEXT

diff --git a/lib/src/components/tile-interactive/__snapshots__/TileInteractive.test.tsx.snap b/lib/src/components/tile-interactive/__snapshots__/TileInteractive.test.tsx.snap index 0ee11c996..c017ad408 100644 --- a/lib/src/components/tile-interactive/__snapshots__/TileInteractive.test.tsx.snap +++ b/lib/src/components/tile-interactive/__snapshots__/TileInteractive.test.tsx.snap @@ -3,7 +3,7 @@ exports[`TileInteractive component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`TileInteractive component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`TileInteractive component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`TileInteractive component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`TileInteractive component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`TileInteractive component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`TileInteractive component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`TileInteractive component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/tile-toggle-group/__snapshots__/TileToggleGroup.test.tsx.snap b/lib/src/components/tile-toggle-group/__snapshots__/TileToggleGroup.test.tsx.snap index 814a3e57d..94e54b828 100644 --- a/lib/src/components/tile-toggle-group/__snapshots__/TileToggleGroup.test.tsx.snap +++ b/lib/src/components/tile-toggle-group/__snapshots__/TileToggleGroup.test.tsx.snap @@ -3,7 +3,7 @@ exports[`TileToggleGroup component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`TileToggleGroup component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`TileToggleGroup component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/tile/__snapshots__/Tile.test.tsx.snap b/lib/src/components/tile/__snapshots__/Tile.test.tsx.snap index 97ecd06a7..0bea9f88c 100644 --- a/lib/src/components/tile/__snapshots__/Tile.test.tsx.snap +++ b/lib/src/components/tile/__snapshots__/Tile.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Tile component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`Tile component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`Tile component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`Tile component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`Tile component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`Tile component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`Tile component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`Tile component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; diff --git a/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap b/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap index 514031430..983d0d33c 100644 --- a/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap +++ b/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap @@ -3,7 +3,7 @@ exports[`TopBar component renders 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -38,22 +38,34 @@ exports[`TopBar component renders 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -66,18 +78,18 @@ exports[`TopBar component renders 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -92,8 +104,8 @@ exports[`TopBar component renders 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -114,18 +126,18 @@ exports[`TopBar component renders 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -208,7 +220,7 @@ exports[`TopBar component renders 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -241,7 +253,7 @@ exports[`TopBar component renders 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -266,7 +278,7 @@ exports[`TopBar component renders 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -344,14 +356,12 @@ exports[`TopBar component renders 1`] = ` text-decoration: none; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -454,23 +464,31 @@ exports[`TopBar component renders 1`] = ` width: auto; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -528,7 +546,7 @@ exports[`TopBar component renders 1`] = ` href="atomlearning.co.uk" >

Admin Panel

@@ -588,7 +606,7 @@ exports[`TopBar component renders 1`] = ` exports[`TopBar component renders the lg variant 1`] = ` @media { :root, - .t-bgDNai { + .t-ibLFLe { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -623,22 +641,34 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-blue600: hsl(213, 100%, 71%); --colors-blue700: hsl(214, 100%, 58%); --colors-blue800: hsl(217, 92%, 51%); - --colors-blue900: hsl(223, 78%, 44%); + --colors-blue900: hsl(223, 79%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); - --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); - --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); - --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); - --colors-purple1000: hsl(266, 82%, 32%); - --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); + --colors-pink100: hsl(311, 100%, 98%); + --colors-pink200: hsl(310, 100%, 95%); + --colors-pink300: hsl(311, 100%, 90%); + --colors-pink400: hsl(313, 100%, 80%); + --colors-pink500: hsl(313, 83%, 72%); + --colors-pink600: hsl(315, 82%, 66%); + --colors-pink700: hsl(316, 63%, 56%); + --colors-pink800: hsl(317, 63%, 44%); + --colors-pink900: hsl(318, 63%, 37%); + --colors-pink1000: hsl(319, 55%, 33%); + --colors-pink1100: hsl(318, 98%, 16%); + --colors-pink1200: hsl(318, 97%, 12%); + --colors-purple100: hsl(246, 83%, 98%); + --colors-purple200: hsl(244, 74%, 95%); + --colors-purple300: hsl(246, 76%, 92%); + --colors-purple400: hsl(246, 74%, 85%); + --colors-purple500: hsl(249, 72%, 76%); + --colors-purple600: hsl(252, 70%, 66%); + --colors-purple700: hsl(256, 65%, 62%); + --colors-purple800: hsl(252, 51%, 51%); + --colors-purple900: hsl(257, 54%, 42%); + --colors-purple1000: hsl(257, 53%, 35%); + --colors-purple1100: hsl(255, 57%, 23%); + --colors-purple1200: hsl(255, 76%, 13%); --colors-cyan100: hsl(198, 100%, 97%); --colors-cyan200: hsl(199, 100%, 94%); --colors-cyan300: hsl(201, 100%, 89%); @@ -651,18 +681,18 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-cyan1000: hsl(205, 100%, 21%); --colors-cyan1100: hsl(206, 97%, 15%); --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); + --colors-green100: hsl(148, 93%, 94%); + --colors-green200: hsl(149, 95%, 91%); + --colors-green300: hsl(147, 87%, 85%); + --colors-green400: hsl(148, 84%, 70%); + --colors-green500: hsl(148, 75%, 54%); + --colors-green600: hsl(148, 77%, 45%); + --colors-green700: hsl(148, 84%, 36%); + --colors-green800: hsl(158, 79%, 29%); + --colors-green900: hsl(166, 71%, 24%); + --colors-green1000: hsl(166, 67%, 20%); + --colors-green1100: hsl(169, 88%, 10%); + --colors-green1200: hsl(155, 92%, 5%); --colors-magenta100: hsl(330, 100%, 99%); --colors-magenta200: hsl(329, 100%, 96%); --colors-magenta300: hsl(332, 100%, 92%); @@ -677,8 +707,8 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-magenta1200: hsl(334, 62%, 10%); --colors-red100: hsl(0, 100%, 99%); --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); + --colors-red300: hsl(0, 100%, 96%); + --colors-red400: hsl(357, 100%, 93%); --colors-red500: hsl(356, 96%, 83%); --colors-red600: hsl(357, 90%, 73%); --colors-red700: hsl(357, 80%, 59%); @@ -699,18 +729,18 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-teal1000: hsl(183, 100%, 13%); --colors-teal1100: hsl(187, 92%, 10%); --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); + --colors-orange100: hsl(45, 100%, 96%); + --colors-orange200: hsl(46, 100%, 89%); + --colors-orange300: hsl(46, 100%, 77%); + --colors-orange400: hsl(44, 100%, 65%); + --colors-orange500: hsl(41, 100%, 55%); + --colors-orange600: hsl(29, 100%, 55%); + --colors-orange700: hsl(35, 95%, 50%); + --colors-orange800: hsl(22, 94%, 54%); + --colors-orange900: hsl(22, 100%, 46%); + --colors-orange1000: hsl(20, 100%, 39%); + --colors-orange1100: hsl(18, 100%, 27%); + --colors-orange1200: hsl(18, 100%, 21%); --colors-yellow100: hsl(53, 94%, 93%); --colors-yellow200: hsl(54, 92%, 85%); --colors-yellow300: hsl(54, 92%, 75%); @@ -793,7 +823,7 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-brandYellowAccent: hsl(33, 100%, 50%); --colors-infoLight: hsl(215, 100%, 98%); --colors-info: hsl(217, 92%, 51%); - --colors-infoMid: hsl(223, 78%, 44%); + --colors-infoMid: hsl(223, 79%, 44%); --colors-infoDark: hsl(228, 82%, 35%); --colors-successLight: hsl(119, 44%, 94%); --colors-success: hsl(119, 100%, 27%); @@ -826,7 +856,7 @@ exports[`TopBar component renders the lg variant 1`] = ` --colors-primary600: hsl(213, 100%, 71%); --colors-primary700: hsl(214, 100%, 58%); --colors-primary800: hsl(217, 92%, 51%); - --colors-primary900: hsl(223, 78%, 44%); + --colors-primary900: hsl(223, 79%, 44%); --colors-primary1000: hsl(228, 82%, 35%); --colors-primary1100: hsl(228, 63%, 23%); --colors-primary1200: hsl(227, 57%, 11%); @@ -851,7 +881,7 @@ exports[`TopBar component renders the lg variant 1`] = ` --fontSizes-4xl: 5.625rem; --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; - --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-display: 'National 2 Condensed', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sizes-0: 0.5rem; --sizes-1: 1rem; @@ -929,14 +959,12 @@ exports[`TopBar component renders the lg variant 1`] = ` text-decoration: none; } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -1039,23 +1067,31 @@ exports[`TopBar component renders the lg variant 1`] = ` width: auto; } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-PrXKS-size-md { height: var(--sizes-4); width: var(--sizes-4); @@ -1122,7 +1158,7 @@ exports[`TopBar component renders the lg variant 1`] = ` href="atomlearning.co.uk" >

Admin Panel

diff --git a/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap b/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap index cdd08762f..9b03ef05a 100644 --- a/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap +++ b/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap @@ -28,14 +28,12 @@ exports[`Tree renders 1`] = ` padding-left: var(--space-6); } - .c-dyvMgW { - font-family: var(--fonts-body); - font-weight: 400; + .c-ctivzP { margin: 0; } - .c-dyvMgW > .c-dyvMgW:before, - .c-dyvMgW > .c-dyvMgW:after { + .c-ctivzP > .c-ctivzP:before, + .c-ctivzP > .c-ctivzP:after { display: none; } @@ -123,28 +121,36 @@ exports[`Tree renders 1`] = ` gap: var(--space-2); } - .c-dyvMgW-gvmVBy-size-md { + .c-ctivzP-gvmVBy-size-md { font-size: var(--fontSizes-md); line-height: 1.5; } - .c-dyvMgW-gvmVBy-size-md::before { + .c-ctivzP-gvmVBy-size-md::before { content: ''; margin-bottom: -0.3864em; display: table; } - .c-dyvMgW-gvmVBy-size-md::after { + .c-ctivzP-gvmVBy-size-md::after { content: ''; margin-top: -0.3864em; display: table; } - .c-dyvMgW-fmPQHp-noCapsize-true::before, - .c-dyvMgW-fmPQHp-noCapsize-true::after { + .c-ctivzP-fmPQHp-noCapsize-true::before, + .c-ctivzP-fmPQHp-noCapsize-true::after { display: none !important; } + .c-ctivzP-eMzMJc-weight-regular { + font-weight: 400; + } + + .c-ctivzP-cyRcZm-family-body { + font-family: var(--fonts-body); + } + .c-oUmPa-elrktp-size-sm { height: var(--sizes-3); width: var(--sizes-3); @@ -186,7 +192,7 @@ exports[`Tree renders 1`] = ` class="c-dhzjXW c-rbNxa c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > #1 @@ -223,7 +229,7 @@ exports[`Tree renders 1`] = ` Trigger With Submenu From 1385bb814a751d7f33c1c2622c23db9c51a73429 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 9 Sep 2024 12:40:33 +0100 Subject: [PATCH 06/16] fix: props in docs --- documentation/components/app/Header.tsx | 2 +- .../markdown/editor-component/ColorTokenList.tsx | 2 +- .../markdown/editor-component/ComponentProps.tsx | 2 +- .../editor-component/token-list/TokenListItem.tsx | 8 +------- 4 files changed, 4 insertions(+), 10 deletions(-) diff --git a/documentation/components/app/Header.tsx b/documentation/components/app/Header.tsx index 2fbfc5dab..bdb044cb4 100644 --- a/documentation/components/app/Header.tsx +++ b/documentation/components/app/Header.tsx @@ -34,7 +34,7 @@ const BrandSwitch = () => { const { theme, updateTheme } = useTheme() return ( - + Brand { - {`$${token}`} + {`$${token}`} {value} diff --git a/documentation/components/markdown/editor-component/ComponentProps.tsx b/documentation/components/markdown/editor-component/ComponentProps.tsx index d3b68f985..107292fc3 100644 --- a/documentation/components/markdown/editor-component/ComponentProps.tsx +++ b/documentation/components/markdown/editor-component/ComponentProps.tsx @@ -106,7 +106,7 @@ export const ComponentProps: React.FC<{ component }> = ({ component }) => { return ( - + {component} diff --git a/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx b/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx index 371f7ff66..e06fab563 100644 --- a/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx +++ b/documentation/components/markdown/editor-component/token-list/TokenListItem.tsx @@ -2,13 +2,7 @@ import { Flex, Box, styled, Text } from '@atom-learning/components' import * as React from 'react' const TokenListItemToken = ({ token }: { token: string }) => ( - + {`$${token}`} ) From 078d4ed04269ed1f459aaef43cb85b2829819010 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 9 Sep 2024 13:51:33 +0100 Subject: [PATCH 07/16] fix: rename to normal --- lib/package.json | 2 +- .../avatar/__snapshots__/Avatar.test.tsx.snap | 14 +++---- .../badge/__snapshots__/Badge.test.tsx.snap | 12 +++--- .../__snapshots__/BannerRegular.test.tsx.snap | 8 ++-- .../__snapshots__/CheckboxTree.test.tsx.snap | 16 +++---- .../CreatePasswordField.test.tsx.snap | 8 ++-- .../__snapshots__/DataTable.test.tsx.snap | 20 ++++----- .../__snapshots__/DateField.test.tsx.snap | 10 ++--- .../__snapshots__/DateInput.test.tsx.snap | 8 ++-- .../__snapshots__/EmptyState.test.tsx.snap | 4 +- .../__snapshots__/FieldWrapper.test.tsx.snap | 6 +-- .../__snapshots__/InlineMessage.test.tsx.snap | 4 +- .../__snapshots__/InputField.test.tsx.snap | 14 +++---- .../input/__snapshots__/Input.test.tsx.snap | 12 +++--- .../link/__snapshots__/Link.test.tsx.snap | 4 +- .../MarkdownContent.test.tsx.snap | 42 +++++++++---------- .../NavigationMenuVertical.test.tsx.snap | 18 ++++---- .../NavigationMenu.test.tsx.snap | 6 +-- .../NumberInputField.test.tsx.snap | 14 +++---- .../__snapshots__/NumberInput.test.tsx.snap | 8 ++-- .../__snapshots__/PasswordField.test.tsx.snap | 4 +- .../__snapshots__/PasswordInput.test.tsx.snap | 4 +- .../__snapshots__/SearchField.test.tsx.snap | 14 +++---- .../__snapshots__/SearchInput.test.tsx.snap | 12 +++--- .../SectionMessage.test.tsx.snap | 4 +- .../__snapshots__/SliderField.test.tsx.snap | 4 +- .../slider/__snapshots__/Slider.test.tsx.snap | 4 +- .../spacer/__snapshots__/Spacer.test.tsx.snap | 6 +-- .../__snapshots__/StackContent.test.tsx.snap | 4 +- .../tabs/__snapshots__/Tabs.test.tsx.snap | 8 ++-- lib/src/components/text/Text.tsx | 4 +- .../text/__snapshots__/Text.test.tsx.snap | 4 +- .../__snapshots__/TopBar.test.tsx.snap | 8 ++-- .../tree/__snapshots__/Tree.test.tsx.snap | 6 +-- 34 files changed, 158 insertions(+), 158 deletions(-) diff --git a/lib/package.json b/lib/package.json index 691e45fe4..7d0ab6a74 100644 --- a/lib/package.json +++ b/lib/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", "module": "dist/index.js", - "version": "4.0.0-beta.7", + "version": "4.0.0-beta.8", "description": "", "files": [ "dist" diff --git a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap index dd16d0f83..0e37e2ec5 100644 --- a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +++ b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap @@ -67,7 +67,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -216,7 +216,7 @@ exports[`Avatar component renders an icon avatar 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -400,7 +400,7 @@ exports[`Avatar component renders an inital avatar 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -459,7 +459,7 @@ exports[`Avatar component renders an inital avatar 1`] = ` class="c-hMBZYr c-hMBZYr-fDXBFo-size-xs" >

A

@@ -534,7 +534,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -656,7 +656,7 @@ exports[`Avatar component renders the initial of the name when the src of the im display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -676,7 +676,7 @@ exports[`Avatar component renders the initial of the name when the src of the im class="c-hMBZYr c-hMBZYr-kMhpXP-size-lg" >

B

diff --git a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap index 0c26d0816..6e8eb5433 100644 --- a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap +++ b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap @@ -381,7 +381,7 @@ exports[`Badge component renders 1`] = ` display: none !important; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -400,7 +400,7 @@ exports[`Badge component renders 1`] = ` role="status" >

Some Text

@@ -796,7 +796,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` display: none !important; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -822,7 +822,7 @@ exports[`Badge component renders a md size and danger theme 1`] = ` role="status" >

Some Text

@@ -1228,7 +1228,7 @@ exports[`Badge component renders with an icon 1`] = ` display: none !important; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -1270,7 +1270,7 @@ exports[`Badge component renders with an icon 1`] = ` />

Some Text

diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap index 05ef8bb1e..dfb5a9f1e 100644 --- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap +++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap @@ -454,7 +454,7 @@ exports[`BannerRegular component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -634,7 +634,7 @@ exports[`BannerRegular component renders 1`] = ` Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

@@ -1160,7 +1160,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -1370,7 +1370,7 @@ exports[`BannerRegular component renders dismissible variant 1`] = ` Get ready for entrance exams

Talk to our admissions experts on to learn how to support your child. This is an example lor!

diff --git a/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap b/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap index f81743cda..8e638f57e 100644 --- a/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap +++ b/lib/src/components/checkbox-tree/__snapshots__/CheckboxTree.test.tsx.snap @@ -198,7 +198,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` display: none !important; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -259,7 +259,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Top level @@ -309,7 +309,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Trigger With Submenu @@ -342,7 +342,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> 1 @@ -369,7 +369,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> 2 @@ -419,7 +419,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> All but nested @@ -452,7 +452,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Nested: #1 @@ -479,7 +479,7 @@ exports[`CheckboxTree component renders a checkbox 1`] = ` value="on" /> Nested: #2 diff --git a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap index 6b5ccbc0b..fa22b13db 100644 --- a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap +++ b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap @@ -214,7 +214,7 @@ exports[`CreatePasswordField component displays validation styling to the input display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -393,7 +393,7 @@ exports[`CreatePasswordField component displays validation styling to the input >

Something is missing

@@ -1254,7 +1254,7 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] = display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -3062,7 +3062,7 @@ exports[`DataTable component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -3231,7 +3231,7 @@ exports[`DataTable component renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" >

1 - 10 of 18 items

@@ -4441,7 +4441,7 @@ exports[`DataTable server-side renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -4826,7 +4826,7 @@ exports[`DataTable server-side renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -5163,7 +5163,7 @@ exports[`DataTable server-side renders 1`] = ` class="c-kzpziV" >

1 - 10 of 18 items

@@ -5700,7 +5700,7 @@ exports[`DataTable sticky columns renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } diff --git a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap index 35108bd9a..b60a52d4d 100644 --- a/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap +++ b/lib/src/components/date-field/__snapshots__/DateField.test.tsx.snap @@ -138,7 +138,7 @@ exports[`DateField component renders a field in error state 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -273,7 +273,7 @@ exports[`DateField component renders a field in error state 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -479,7 +479,7 @@ exports[`DateField component renders a field with a text input 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -560,7 +560,7 @@ exports[`DateField component renders a field with a text input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" >

You need to add some users before you can use this feature

diff --git a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap index fdc8f8266..e5a629915 100644 --- a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap +++ b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap @@ -173,7 +173,7 @@ exports[`FieldWrapper component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -255,7 +255,7 @@ exports[`FieldWrapper component renders 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > Example error diff --git a/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap b/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap index 90abc6cf5..a6ece3811 100644 --- a/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap +++ b/lib/src/components/inline-message/__snapshots__/InlineMessage.test.tsx.snap @@ -54,7 +54,7 @@ exports[`InlineMessage component renders an inline message 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -99,7 +99,7 @@ exports[`InlineMessage component renders an inline message 1`] = ` /> This is an Inline Message diff --git a/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap b/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap index 49a7bb4d4..edadc6526 100644 --- a/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap +++ b/lib/src/components/input-field/__snapshots__/InputField.test.tsx.snap @@ -117,7 +117,7 @@ exports[`InputField component renders a field in error state 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -216,7 +216,7 @@ exports[`InputField component renders a field in error state 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -363,7 +363,7 @@ exports[`InputField component renders a field with a number input 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -408,7 +408,7 @@ exports[`InputField component renders a field with a number input 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -281,7 +281,7 @@ exports[`Input component renders lg size 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -312,7 +312,7 @@ exports[`Input component renders lg size 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg" >
diff --git a/lib/src/components/link/__snapshots__/Link.test.tsx.snap b/lib/src/components/link/__snapshots__/Link.test.tsx.snap index bb6d654a0..4429822d8 100644 --- a/lib/src/components/link/__snapshots__/Link.test.tsx.snap +++ b/lib/src/components/link/__snapshots__/Link.test.tsx.snap @@ -119,7 +119,7 @@ exports[`Link component can be nested within Text and Heading 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -148,7 +148,7 @@ exports[`Link component can be nested within Text and Heading 1`] = `

diff --git a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap index 9a5acd7a8..d98f7f4d6 100644 --- a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap +++ b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap @@ -130,7 +130,7 @@ exports[`SearchField component renders a field in error state - has no programma display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -253,7 +253,7 @@ exports[`SearchField component renders a field in error state - has no programma class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-iuasYV-state-error" > This field is required @@ -442,7 +442,7 @@ exports[`SearchField component renders a field with a disabled input - has no pr display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -517,7 +517,7 @@ exports[`SearchField component renders a field with a disabled input - has no pr class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-kOvGWL-kRqBPT-disabled-true" > @@ -332,7 +332,7 @@ exports[`SearchInput component renders clear button when non-empty defaultValue display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -411,7 +411,7 @@ exports[`SearchInput component renders clear button when non-empty defaultValue class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md" > @@ -602,7 +602,7 @@ exports[`SearchInput component renders lg size 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -675,7 +675,7 @@ exports[`SearchInput component renders lg size 1`] = ` class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg" > diff --git a/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap b/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap index e4b8687eb..7c8bcdef6 100644 --- a/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap +++ b/lib/src/components/section-message/__snapshots__/SectionMessage.test.tsx.snap @@ -161,7 +161,7 @@ exports[`renders SectionMessage component and has no programmatically detectable display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -276,7 +276,7 @@ exports[`renders SectionMessage component and has no programmatically detectable Title message

This is the description

diff --git a/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap b/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap index b527474d5..a642fe456 100644 --- a/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap +++ b/lib/src/components/slider-field/__snapshots__/SliderField.test.tsx.snap @@ -138,7 +138,7 @@ exports[`SliderField component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -219,7 +219,7 @@ exports[`SliderField component renders 1`] = ` value="50" />

Current value is 50

diff --git a/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap b/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap index c8ae7f60a..dc4acdbc8 100644 --- a/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap +++ b/lib/src/components/slider/__snapshots__/Slider.test.tsx.snap @@ -345,7 +345,7 @@ exports[`Slider.Value component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -364,7 +364,7 @@ exports[`Slider.Value component renders 1`] = `

Current value is 50

diff --git a/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap b/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap index 8b3b6ee05..f2179c282 100644 --- a/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap +++ b/lib/src/components/spacer/__snapshots__/Spacer.test.tsx.snap @@ -40,7 +40,7 @@ exports[`Spacer component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -60,7 +60,7 @@ exports[`Spacer component renders 1`] = ` class="c-dhzjXW c-dhzjXW-ilgjzAj-css" >

flex item left

@@ -68,7 +68,7 @@ exports[`Spacer component renders 1`] = ` class="c-gJAAjO" />

flex item right

diff --git a/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap b/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap index e128febf7..a480c6824 100644 --- a/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap +++ b/lib/src/components/stack-content/__snapshots__/StackContent.test.tsx.snap @@ -115,7 +115,7 @@ exports[`StackContent component renders a stack content 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -180,7 +180,7 @@ exports[`StackContent component renders a stack content 1`] = ` HEADING

TEXT

diff --git a/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap b/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap index 232f94e48..58b1fd098 100644 --- a/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap +++ b/lib/src/components/tabs/__snapshots__/Tabs.test.tsx.snap @@ -455,7 +455,7 @@ exports[`Tabs component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -494,7 +494,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 1 @@ -515,7 +515,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 2 @@ -538,7 +538,7 @@ exports[`Tabs component renders 1`] = ` type="button" > Trigger 3 diff --git a/lib/src/components/text/Text.tsx b/lib/src/components/text/Text.tsx index 202e7c5b6..7c252762a 100644 --- a/lib/src/components/text/Text.tsx +++ b/lib/src/components/text/Text.tsx @@ -36,7 +36,7 @@ export const StyledText = styled('p', { variants: { ...textVariants, weight: { - regular: { fontWeight: 400 }, + normal: { fontWeight: 400 }, bold: { fontWeight: 600 } }, family: { @@ -68,7 +68,7 @@ type TextProps = Override< export const Text: React.ForwardRefExoticComponent = React.forwardRef(({ size = 'md', - weight = 'regular', + weight = 'normal', family = 'body', ...remainingProps }, ref) => ( diff --git a/lib/src/components/text/__snapshots__/Text.test.tsx.snap b/lib/src/components/text/__snapshots__/Text.test.tsx.snap index cf744a733..5f41cc9dd 100644 --- a/lib/src/components/text/__snapshots__/Text.test.tsx.snap +++ b/lib/src/components/text/__snapshots__/Text.test.tsx.snap @@ -30,7 +30,7 @@ exports[`Text component renders some text 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -41,7 +41,7 @@ exports[`Text component renders some text 1`] = `

TEXT

diff --git a/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap b/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap index 983d0d33c..a755c84d5 100644 --- a/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap +++ b/lib/src/components/top-bar/__snapshots__/TopBar.test.tsx.snap @@ -481,7 +481,7 @@ exports[`TopBar component renders 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -546,7 +546,7 @@ exports[`TopBar component renders 1`] = ` href="atomlearning.co.uk" >

Admin Panel

@@ -1084,7 +1084,7 @@ exports[`TopBar component renders the lg variant 1`] = ` display: table; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -1158,7 +1158,7 @@ exports[`TopBar component renders the lg variant 1`] = ` href="atomlearning.co.uk" >

Admin Panel

diff --git a/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap b/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap index 9b03ef05a..d87da5196 100644 --- a/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap +++ b/lib/src/components/tree/__snapshots__/Tree.test.tsx.snap @@ -143,7 +143,7 @@ exports[`Tree renders 1`] = ` display: none !important; } - .c-ctivzP-eMzMJc-weight-regular { + .c-ctivzP-eMzMJc-weight-normal { font-weight: 400; } @@ -192,7 +192,7 @@ exports[`Tree renders 1`] = ` class="c-dhzjXW c-rbNxa c-dhzjXW-jroWjL-align-center c-dhzjXW-kaVYFn-gap-2" > #1 @@ -229,7 +229,7 @@ exports[`Tree renders 1`] = ` Trigger With Submenu From 4d8640635be57c750232151cebe44a9a77dfb8b1 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 9 Sep 2024 13:59:58 +0100 Subject: [PATCH 08/16] chore: replace tonal with grey --- lib/src/components/action-icon/ActionIcon.tsx | 2 +- .../__snapshots__/ActionIcon.test.tsx.snap | 32 +- lib/src/components/avatar/Avatar.tsx | 10 +- lib/src/components/avatar/AvatarInitial.tsx | 2 +- .../avatar/__snapshots__/Avatar.test.tsx.snap | 92 +- .../__snapshots__/BannerSlim.test.tsx.snap | 22 +- lib/src/components/button/Button.tsx | 2 +- lib/src/components/calendar/Calendar.tsx | 10 +- lib/src/components/calendar/Day.tsx | 8 +- .../__snapshots__/Calendar.test.tsx.snap | 128 +-- .../components/carousel/CarouselArrows.tsx | 2 +- .../carousel/CarouselPagination.tsx | 2 +- .../__snapshots__/Carousel.test.tsx.snap | 40 +- .../__snapshots__/CheckboxField.test.tsx.snap | 34 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 26 +- .../__snapshots__/CheckboxTree.test.tsx.snap | 42 +- lib/src/components/checkbox/Checkbox.tsx | 2 +- .../__snapshots__/Checkbox.test.tsx.snap | 16 +- .../ChipDismissibleGroupItem.tsx | 2 +- .../ChipDismissibleGroup.test.tsx.snap | 24 +- .../chip-toggle-group/ChipToggleGroupItem.tsx | 10 +- .../ChipToggleGroup.test.tsx.snap | 30 +- lib/src/components/combobox/ComboboxInput.tsx | 12 +- .../components/combobox/ComboboxOption.tsx | 4 +- .../components/combobox/ComboboxPopover.tsx | 2 +- .../__snapshots__/Combobox.test.tsx.snap | 78 +- .../CreatePasswordField.test.tsx.snap | 96 +- .../__snapshots__/DataTable.test.tsx.snap | 920 +++++++++--------- .../__snapshots__/DateField.test.tsx.snap | 52 +- .../__snapshots__/DateInput.test.tsx.snap | 70 +- lib/src/components/dialog/DialogHeading.tsx | 2 +- .../dialog/__snapshots__/Dialog.test.tsx.snap | 34 +- lib/src/components/divider/Divider.tsx | 2 +- .../__snapshots__/Divider.test.tsx.snap | 18 +- .../drawer/__snapshots__/Drawer.test.tsx.snap | 12 +- .../dropdown-menu/DropdownMenuItem.tsx | 2 +- .../dropdown-menu/DropdownMenuSeparator.tsx | 2 +- .../__snapshots__/DropdownMenu.test.tsx.snap | 28 +- .../components/empty-state/EmptyStateBody.tsx | 2 +- .../empty-state/EmptyStateTitle.tsx | 2 +- .../__snapshots__/EmptyState.test.tsx.snap | 16 +- .../field-wrapper/FieldDescription.tsx | 2 +- .../__snapshots__/FieldWrapper.test.tsx.snap | 14 +- .../inline-message/InlineMessage.config.ts | 2 +- .../__snapshots__/InputField.test.tsx.snap | 42 +- lib/src/components/label/Label.tsx | 2 +- .../label/__snapshots__/Label.test.tsx.snap | 34 +- .../MarkdownContent.test.tsx.snap | 82 +- .../components/MarkdownCode.tsx | 4 +- .../components/MarkdownInlineCode.tsx | 4 +- .../navigation/NavigationMenuDropdownItem.tsx | 2 +- .../NavigationMenu.test.tsx.snap | 6 +- .../NotificationBadge.test.tsx.snap | 16 +- .../NumberInputField.test.tsx.snap | 192 ++-- .../number-input/NumberInputStepper.tsx | 12 +- .../__snapshots__/NumberInput.test.tsx.snap | 108 +- .../__snapshots__/Pagination.test.tsx.snap | 16 +- .../__snapshots__/PasswordField.test.tsx.snap | 42 +- .../__snapshots__/PasswordInput.test.tsx.snap | 28 +- .../components/progress-bar/ProgressBar.tsx | 2 +- .../__snapshots__/ProgressBar.test.tsx.snap | 16 +- .../RadioButtonField.test.tsx.snap | 46 +- .../components/radio-button/RadioButton.tsx | 8 +- .../__snapshots__/RadioButton.test.tsx.snap | 36 +- lib/src/components/radio-card/RadioCard.tsx | 4 +- .../__snapshots__/RadioCard.test.tsx.snap | 28 +- .../__snapshots__/SearchField.test.tsx.snap | 72 +- .../components/search-input/SearchInput.tsx | 2 +- .../__snapshots__/SearchInput.test.tsx.snap | 74 +- .../SectionMessage.test.tsx.snap | 28 +- .../__snapshots__/SelectField.test.tsx.snap | 34 +- lib/src/components/select/Select.tsx | 6 +- .../select/__snapshots__/Select.test.tsx.snap | 122 +-- .../__snapshots__/SliderField.test.tsx.snap | 26 +- lib/src/components/slider/Slider.tsx | 2 +- lib/src/components/slider/SliderSteps.tsx | 2 +- lib/src/components/slider/SliderValue.tsx | 2 +- .../slider/__snapshots__/Slider.test.tsx.snap | 22 +- .../__snapshots__/StackContent.test.tsx.snap | 30 +- .../components/stepper/StepperStepBullet.tsx | 8 +- .../stepper/StepperStepContainer.tsx | 12 +- .../components/stepper/StepperStepLabel.tsx | 4 +- .../__snapshots__/Stepper.test.tsx.snap | 166 ++-- lib/src/components/switch/Switch.tsx | 4 +- .../switch/__snapshots__/Switch.test.tsx.snap | 82 +- lib/src/components/table/TableBody.tsx | 2 +- lib/src/components/table/TableCell.tsx | 4 +- lib/src/components/table/TableFooterCell.tsx | 2 +- lib/src/components/table/TableHeader.tsx | 2 +- .../table/__snapshots__/Table.test.tsx.snap | 206 ++-- .../__snapshots__/TextareaField.test.tsx.snap | 68 +- lib/src/components/textarea/Textarea.tsx | 10 +- .../__snapshots__/Textarea.test.tsx.snap | 22 +- .../toggle-group/ToggleGroupItem.tsx | 8 +- .../__snapshots__/ToggleGroup.test.tsx.snap | 42 +- lib/src/components/tooltip/TooltipContent.tsx | 4 +- .../__snapshots__/Tooltip.test.tsx.snap | 28 +- lib/src/components/top-bar/TopBarBrand.tsx | 4 +- .../__snapshots__/TopBar.test.tsx.snap | 112 +-- .../tree/__snapshots__/Tree.test.tsx.snap | 12 +- .../OptionalTooltipWrapper.test.tsx.snap | 28 +- 101 files changed, 1946 insertions(+), 1946 deletions(-) diff --git a/lib/src/components/action-icon/ActionIcon.tsx b/lib/src/components/action-icon/ActionIcon.tsx index fc7a26fa5..d8b96bfb0 100644 --- a/lib/src/components/action-icon/ActionIcon.tsx +++ b/lib/src/components/action-icon/ActionIcon.tsx @@ -106,7 +106,7 @@ const StyledButton = styled('button', { // prettier-ignore compoundVariants: [ - getSimpleVariant('neutral', '$tonal300', '$primary900', '$primary1000'), + getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'), getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'), getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'), getSimpleVariant('success', '$success', '$successMid', '$successDark'), diff --git a/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap b/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap index 50bb5ccb6..5f21729c9 100644 --- a/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap +++ b/lib/src/components/action-icon/__snapshots__/ActionIcon.test.tsx.snap @@ -33,8 +33,8 @@ exports[`ActionIcon component renders 1`] = ` vertical-align: middle; } - .c-hVoQtf { - background-color: var(--colors-tonal500); + .c-hkdxUu { + background-color: var(--colors-grey900); border-radius: var(--radii-0); box-shadow: var(--shadows-0); color: white; @@ -50,7 +50,7 @@ exports[`ActionIcon component renders 1`] = ` } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { + .c-hkdxUu { animation-duration: 75ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; @@ -58,25 +58,25 @@ exports[`ActionIcon component renders 1`] = ` } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + .c-hkdxUu[data-state="delayed-open"][data-side="top"] { animation-name: k-ftcNPK; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + .c-hkdxUu[data-state="delayed-open"][data-side="right"] { animation-name: k-hbaHED; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + .c-hkdxUu[data-state="delayed-open"][data-side="bottom"] { animation-name: k-daNevH; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + .c-hkdxUu[data-state="delayed-open"][data-side="left"] { animation-name: k-fvyGIa; } } @@ -94,7 +94,7 @@ exports[`ActionIcon component renders 1`] = ` stroke-width: 1.5; } - .c-hVoQtf-gWQnqe-size-md { + .c-hkdxUu-gWQnqe-size-md { max-width: 250px; } } @@ -160,8 +160,8 @@ exports[`ActionIcon component renders an external link with the correct attribut vertical-align: middle; } - .c-hVoQtf { - background-color: var(--colors-tonal500); + .c-hkdxUu { + background-color: var(--colors-grey900); border-radius: var(--radii-0); box-shadow: var(--shadows-0); color: white; @@ -177,7 +177,7 @@ exports[`ActionIcon component renders an external link with the correct attribut } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf { + .c-hkdxUu { animation-duration: 75ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; @@ -185,25 +185,25 @@ exports[`ActionIcon component renders an external link with the correct attribut } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + .c-hkdxUu[data-state="delayed-open"][data-side="top"] { animation-name: k-ftcNPK; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + .c-hkdxUu[data-state="delayed-open"][data-side="right"] { animation-name: k-hbaHED; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + .c-hkdxUu[data-state="delayed-open"][data-side="bottom"] { animation-name: k-daNevH; } } @media (prefers-reduced-motion: no-preference) { - .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + .c-hkdxUu[data-state="delayed-open"][data-side="left"] { animation-name: k-fvyGIa; } } @@ -221,7 +221,7 @@ exports[`ActionIcon component renders an external link with the correct attribut stroke-width: 1.5; } - .c-hVoQtf-gWQnqe-size-md { + .c-hkdxUu-gWQnqe-size-md { max-width: 250px; } } diff --git a/lib/src/components/avatar/Avatar.tsx b/lib/src/components/avatar/Avatar.tsx index d1bc574fd..b94f90449 100644 --- a/lib/src/components/avatar/Avatar.tsx +++ b/lib/src/components/avatar/Avatar.tsx @@ -12,9 +12,9 @@ const avatarRootStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', - color: '$tonal400', + color: '$grey800', borderRadius: '$round', - border: '2px solid $tonal100', + border: '2px solid $grey200', backgroundColor: '$white', overflow: 'hidden', variants: { @@ -35,12 +35,12 @@ const StyledButton = styled('button', { ...avatarRootStyles, '&:not([disabled])': { '&:hover': { - borderColor: '$tonal400', - backgroundColor: '$tonal50' + borderColor: '$grey800', + backgroundColor: '$grey100' }, '&:active': { borderColor: '$primary800', - backgroundColor: '$tonal100' + backgroundColor: '$grey200' }, '&:focus-visible': focusVisibleStyleBlock() }, diff --git a/lib/src/components/avatar/AvatarInitial.tsx b/lib/src/components/avatar/AvatarInitial.tsx index 0faa842f2..0ca0dfdf8 100644 --- a/lib/src/components/avatar/AvatarInitial.tsx +++ b/lib/src/components/avatar/AvatarInitial.tsx @@ -28,7 +28,7 @@ export const AvatarInitial = () => { } return ( - + {name[0].toUpperCase()} ) diff --git a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap index 0e37e2ec5..84e5a36a5 100644 --- a/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +++ b/lib/src/components/avatar/__snapshots__/Avatar.test.tsx.snap @@ -2,13 +2,13 @@ exports[`Avatar component renders a fallback icon instead of an initial if name is missing 1`] = ` @media { - .c-hMBZYr { + .c-fmVwAE { display: flex; justify-content: center; align-items: center; - color: var(--colors-tonal400); + color: var(--colors-grey800); border-radius: var(--radii-round); - border: 2px solid var(--colors-tonal100); + border: 2px solid var(--colors-grey200); background-color: var(--colors-white); overflow: hidden; } @@ -45,7 +45,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } @@ -75,7 +75,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name font-family: var(--fonts-body); } - .c-hMBZYr-fDXBFo-size-xs { + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -105,8 +105,8 @@ exports[`Avatar component renders a fallback icon instead of an initial if name } @media { - .c-ctivzP-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -123,7 +123,7 @@ exports[`Avatar component renders a fallback icon instead of an initial if name
somobody's avatar

A

@@ -469,13 +469,13 @@ exports[`Avatar component renders an inital avatar 1`] = ` exports[`Avatar component renders an xs size with the fallback icon when src and name are missing 1`] = ` @media { - .c-hMBZYr { + .c-fmVwAE { display: flex; justify-content: center; align-items: center; - color: var(--colors-tonal400); + color: var(--colors-grey800); border-radius: var(--radii-round); - border: 2px solid var(--colors-tonal100); + border: 2px solid var(--colors-grey200); background-color: var(--colors-white); overflow: hidden; } @@ -512,7 +512,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and } @media { - .c-hMBZYr-kMhpXP-size-lg { + .c-fmVwAE-kMhpXP-size-lg { height: var(--sizes-5); width: var(--sizes-5); } @@ -542,7 +542,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and font-family: var(--fonts-body); } - .c-hMBZYr-fDXBFo-size-xs { + .c-fmVwAE-fDXBFo-size-xs { height: var(--sizes-2); width: var(--sizes-2); } @@ -555,8 +555,8 @@ exports[`Avatar component renders an xs size with the fallback icon when src and } @media { - .c-ctivzP-ildsiYK-css { - color: var(--colors-tonal400); + .c-ctivzP-iksoatv-css { + color: var(--colors-grey800); } .c-PJLV-ieGSWOZ-css { @@ -573,7 +573,7 @@ exports[`Avatar component renders an xs size with the fallback icon when src and

B

diff --git a/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap b/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap index 8a969185d..9dfcbc6ff 100644 --- a/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap +++ b/lib/src/components/banner/banner-slim/__snapshots__/BannerSlim.test.tsx.snap @@ -1212,17 +1212,17 @@ exports[`BannerSlim component renders dismissible variant 1`] = ` background: rgba(255, 255, 255, 0.75); } - .c-oUmPa-jCxibG-cv { + .c-oUmPa-fVNhqX-cv { background: transparent; - color: var(--colors-tonal300); + color: var(--colors-grey700); } - .c-oUmPa-jCxibG-cv:not(:disabled):hover, - .c-oUmPa-jCxibG-cv:not(:disabled):focus { + .c-oUmPa-fVNhqX-cv:not(:disabled):hover, + .c-oUmPa-fVNhqX-cv:not(:disabled):focus { color: var(--colors-primary900); } - .c-oUmPa-jCxibG-cv:not(:disabled):active { + .c-oUmPa-fVNhqX-cv:not(:disabled):active { color: var(--colors-primary1000); } @@ -1271,7 +1271,7 @@ exports[`BannerSlim component renders dismissible variant 1`] = `