From 4bb159b9fc7ebe0ecc7618cf01750ddb2a0191f2 Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:58:29 -0800
Subject: [PATCH] chore(BaseStyles): Add vrt tests (#5346)

* Add tests for basestyles

* Add changeset

* test(vrt): update snapshots

* Add snapshot

* Remove changeset

---------

Co-authored-by: JelloBagel <JelloBagel@users.noreply.github.com>
---
 ...yles-Dev-Default-dark-colorblind-linux.png | Bin 0 -> 4722 bytes
 ...seStyles-Dev-Default-dark-dimmed-linux.png | Bin 0 -> 4722 bytes
 ...s-Dev-Default-dark-high-contrast-linux.png | Bin 0 -> 4735 bytes
 .../BaseStyles-Dev-Default-dark-linux.png     | Bin 0 -> 4722 bytes
 ...yles-Dev-Default-dark-tritanopia-linux.png | Bin 0 -> 4722 bytes
 ...les-Dev-Default-light-colorblind-linux.png | Bin 0 -> 4738 bytes
 ...-Dev-Default-light-high-contrast-linux.png | Bin 0 -> 4735 bytes
 .../BaseStyles-Dev-Default-light-linux.png    | Bin 0 -> 4738 bytes
 ...les-Dev-Default-light-tritanopia-linux.png | Bin 0 -> 4738 bytes
 e2e/components/BaseStyles.test.ts             |  44 ++++++++++++++++++
 packages/react/src/BaseStyles.dev.stories.tsx |  11 +++++
 .../react/src/__tests__/BaseStyles.test.tsx   |  33 +++++++++++++
 .../__snapshots__/BaseStyles.test.tsx.snap    |  19 ++++++++
 13 files changed, 107 insertions(+)
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-colorblind-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-dimmed-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-high-contrast-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-tritanopia-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-colorblind-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-high-contrast-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-linux.png
 create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-tritanopia-linux.png
 create mode 100644 e2e/components/BaseStyles.test.ts
 create mode 100644 packages/react/src/BaseStyles.dev.stories.tsx
 create mode 100644 packages/react/src/__tests__/BaseStyles.test.tsx
 create mode 100644 packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-colorblind-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..37c22f9b6eb1bb1f2c969686f7145fcbccff1f88
GIT binary patch
literal 4722
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-I-V|$
zAr*7p-u3O7n=0AxFnEJ-;xb;}Bg;g4=9XME;@PUEx@mH0^N}Mfg_3pi8vD3=)?A%?
zP~gH;Ud|=g{;kOE`N*CWac$Fzw>~0Arkzn(yOu@#EzfGcQbW(+D=(8CW$dVqwd{Vs
z=l<`#mD9@oiq1uDO}qPxk%8gE!}8PrtAVb0u;2L(GlN6R4t9nHjzWG02Ej*i3=B#~
zY#A6_I)Dl~1imvc2q?Z|WKeJ-SK;Z--?iuM|IeNt_iOr5+3)xNUoU=c_xk{|d0pB0
zdG6`=s<J;;WmQ$ZfAYkL4d|qQbN%7g9q~H)ckkoJzw2ufvZ{XhumAtk{r9)KUpsf_
z?WsTBCu{%r=lOdU#m~N)|0{a&;bHD=yS+}$j0_G}jUNBI7M&OS+wt(>?eV*J7d}4b
z+}^LFqx0sL>BpzByWd5WA8&MKZ*OaxW|dn~^5ww6X7PVz4<EM6{W^4b{`}eV|DRmw
zENzw(aW98~p`iHJiBEF3H<g~2kFU;MxqJ8iZNFbVcqQC#U-t6S(t`;GKabpdtnT;b
z&d$#-E-wCG_&>b-eO-RtKk3Pn!`H<~@~~CQ*T1=P<%_tw+Pvy-H=p*hGccGhOg;AZ
z%$YOh^J_l+nz}Z6Tix&7_apb*+xORa`Tv5fjc?eS5B~i8JUu=Ay`*%s*1O~HrRUF@
z6{qtXXr2B4dp9?yA3t_%nz=Ls!<{+PB)@<D{CU59-Jf4mTU%SRuPZAnfA8y`U-|iL
zwzjjgvwZyix|NsR+^+5U{Jq?+;@_PQA5MHqV`gZWeHj=`$MoXoRe!xI>|gtO<!kZh
z&!0`ZSD%@Za`vmXvU0Xw+>RYWn?V8E^(X4w%3yW#+N_eYv}bQ-8h5W>{eFM_$48Sk
z+Lcyi-QM;)Y<=9`A7yWEZJlkNZ&&;4i`N-oWQJ-Beg7SQr~dbc58vlkKAX33qwj39
zw{z$GxvRZC=l;Ihm4Eg3eK_Qvzx!>qzrC%M)vnan)1KFTIK1=p^nMx3O;Ed!{Js7B
z-oHynj?9(c{rSbl<o$oHuDAdGpgF$2<owCW>eFx8TU-C0>Mr;5$=&k*-=0qIm-~Hm
zRp@FpHMM^q-|f~m1O`*c+NjNWC*SV`W<+@<?XUb>85j=ypFzu1PyKu}Y9e*YqtS32
z4M*~8v(eNuntDc44~?3NqnT?obB$)M(ac4~-sfnMGFqezha%;N`uvioM?!bM_yHUv
OVeoYIb6Mw<&;$VU3wf6S

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-dimmed-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..00f46281bf45ef81a68bc96e95219602f70fd99b
GIT binary patch
literal 4722
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-I-V|$
zAr*7p-Z|SJS}uFwVYJK}gB5{^mk%}=GxMtG?Ap3}*TxNbyNe1!&9ADxYMNxAtIt`g
z%&fBZR%`F$(~FjFv_5_8*gw`R4^N4LK<61jMhU`cX$KATE_CT%KDs3Nar^U=v2*^M
zdq3}YY~8z)JHIz>yxY&iz|io&UfS+0Baq?Wwu7CafuoS0fkE(*90P;W5nBcZmyT)%
zh7N)63=9H_?-&^robE6)IJA(f@S4!~_IcJOwMD<~i+z7{^YgR(dv|u1zdyde{Qtkd
z`EzO?zx#OR%$Z<+o1JYS7yW;74(<ersO7Kw`uqL;{QP`;czAjLe&nyO`g(PK?C%G+
zj=#CTxBB}NbM^9fcXk$~KYg_HW<1cGxLL8wZ!$0_WcHT7Gp|WIeB#;J@B7-?+wHA(
zm%hIC_;~;Q$bH786|a7-e7^s~&-1dDMJbOj9J{*C%*v|j&5MmcfBtM{=eH|=v2*Fs
z*2TyB@@{TQ&E3q%aNsY<!1A2?A797+%i6m6x7>a62+2Pgzn&ag8{K>`;n$ay;dQ@G
zE$**-`~Cf%&+*^w|Mk{(dv`BCHz#giZMA{KoH_I6{rq|6x_tGUubb1an*qc6PWv^9
z@8Rp?YF|E`{x0_BzS`s4=hyvu_i<gj{Jgny_eOtfKKS6**Vo0x#mULZtB?LYa^%N+
z{rG(#@r2CGm#3y`$ID7b-_BuRD5#H0zN4?JJJ-Jc-@U0%pFZvHb9XcA?eE?H?^gEz
zKQk8g#{aoAJ$(1A6DLlboo)U;HZmqg=H`}6sLx{S0(KW<KRmSi{k}hw<?rv_0R+GP
zMJp@+pY%ytdG@pC&#xz&F)*x%n!f+goVjyrGj6}Q^ZR}L&-STPr%IdWt=aYe)6>qm
z*6nTo{`n@Se14XDdtcGZOH04b;ALP~bxrl%`MK8SHa36Wl+TxymX@x~__9)co=x$u
zGwWh^hu!{vEqZ_Lht2$UpU;%Lxx0gcxcPl;ePZFm^8EdK<$z)DaCMi>wBonT*}=iV
z>}vdbDjv0;F3;Ql{a(Bukp1Xr_v*LvXV0#Fc!HaqujciYFDrooz%8yPV^{OzF#rEu
z5F?nAcgz3Wk`By(c8sq-Mes2&eAur}dE%yib{RF1I>pXtIF5!R`IXja>KRQvqp62R
zEyB^vHJZ6bGuLS5qGBg=v`85(QigYt@{g^2`pc8$f)itaeOLxhS3j3^P6<r_J`{KE

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-high-contrast-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7e1e1dc3c2683dbbb934c02130fe6248f528ad5
GIT binary patch
literal 4735
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-mYyz-
zAr*7p-i==|zf|_X$NQPL8Lyv{R7o)sJ}fI_v-9j(``i;znzLB~pM=h;Uom6dJJ!AW
z98E8j!WM7PaCK_ZoAxYZT7AZ63(Xfvhx#6t)ZaK&b}o|joxeEyu`}oN_~tG79;aU?
ze*XRMn)&VLpU#%IpO>DI@llnTf#Jdb`|Wlw7#SEEzPImSXK3Ik<Y!<Id?d%fpmfBR
zfx)Gtnt`E1;5!3@fZ{tw1_h@(%nS}K<SKk7{C$7jqmSY0|31ifOPkgFI%EC+#*UBE
zxZ{7H&HcXr^ZJ)JA1Ax>+5NfD{8<7RNEQ0~;r4a3cKtTZ4zu6++5C8)jLpaGi~aw+
z+Niz$&yUvc>*MP`ze}HQXZiK|%l-1z&tBeN7rni#k&T(5VO8a^zl&VEr|rMJiC^Ek
z{9BiHn9cUrCoeDe&)-#gIz4~)-%I^5yI!xHd-(9-;=8#yIZxLuFWXo8;=);JvvvDZ
zFMs*+#d!biok>T#ex7AxU=Uw^^z-hVnm@O;_sh?F{bt+m?elD_ziF4>t$uW*^I$^3
zb=&WMpC0&Uz3<Obclqi+``^_kyf#luOMAEPd-ig_xl%lA<#k{80sVNd`1{=Z|IU>^
zHwOlFOv^LL@9ca&b+xaVpRcdUs`<ly|Np%=AAQa5ZutJR^X4Xb9=7~_Kd(J`@_Kdn
z+F9D~uE*8?)&3nfSNAv2&QDKH{{0;vz4z5Fs1t!+K6B>GySwM-?=R9j%ietO#fcNM
zOjrN6{QPa_)Q1lrp4R_=Bc@zhR@SoU%Zs1dmoFPDD=UAV&C9@`=l8kiH@CH+>DNQt
z`nh+%t^F*%e0ln_JM~FfC0}AS?X9eeUVNBS{~MTI?qxg9o3^?9{gE3tt^%F@?*9K<
zZ=Ro-Y25z2?`voHx3$sLe<!JWr|s8^-}h%$w%yN9M~*n10ft~Gx6t?7^?Q<UZc6R{
zQ*wM&==HTRm0u6@+x~cN|91DsW75xV{XhKHK5AFVOaHPQdFg0NySlfF_gAE3WxYzb
z|Nj(jNdBI}g3D{8^>)8mtpD%d%}!hWd;2Osi|?yA4vdoLx9lx{{>qKE``@{G-LJ>{
z_UhaIzjNWjg><{^KYx6D%xx&mz!1XAtGn+>^E{wuD&%#pNM|uJH2gQDW%{Rnjv6(Q
zIwjL+IF5!R`Ssdp>KRQvqp62RjmFW;HJZ6bGuLS5qGCUEv`85(Qiem3@-d(B;HwKe
T?^FZ3unY{Iu6{1-oD!M<zax0l

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..37c22f9b6eb1bb1f2c969686f7145fcbccff1f88
GIT binary patch
literal 4722
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-I-V|$
zAr*7p-u3O7n=0AxFnEJ-;xb;}Bg;g4=9XME;@PUEx@mH0^N}Mfg_3pi8vD3=)?A%?
zP~gH;Ud|=g{;kOE`N*CWac$Fzw>~0Arkzn(yOu@#EzfGcQbW(+D=(8CW$dVqwd{Vs
z=l<`#mD9@oiq1uDO}qPxk%8gE!}8PrtAVb0u;2L(GlN6R4t9nHjzWG02Ej*i3=B#~
zY#A6_I)Dl~1imvc2q?Z|WKeJ-SK;Z--?iuM|IeNt_iOr5+3)xNUoU=c_xk{|d0pB0
zdG6`=s<J;;WmQ$ZfAYkL4d|qQbN%7g9q~H)ckkoJzw2ufvZ{XhumAtk{r9)KUpsf_
z?WsTBCu{%r=lOdU#m~N)|0{a&;bHD=yS+}$j0_G}jUNBI7M&OS+wt(>?eV*J7d}4b
z+}^LFqx0sL>BpzByWd5WA8&MKZ*OaxW|dn~^5ww6X7PVz4<EM6{W^4b{`}eV|DRmw
zENzw(aW98~p`iHJiBEF3H<g~2kFU;MxqJ8iZNFbVcqQC#U-t6S(t`;GKabpdtnT;b
z&d$#-E-wCG_&>b-eO-RtKk3Pn!`H<~@~~CQ*T1=P<%_tw+Pvy-H=p*hGccGhOg;AZ
z%$YOh^J_l+nz}Z6Tix&7_apb*+xORa`Tv5fjc?eS5B~i8JUu=Ay`*%s*1O~HrRUF@
z6{qtXXr2B4dp9?yA3t_%nz=Ls!<{+PB)@<D{CU59-Jf4mTU%SRuPZAnfA8y`U-|iL
zwzjjgvwZyix|NsR+^+5U{Jq?+;@_PQA5MHqV`gZWeHj=`$MoXoRe!xI>|gtO<!kZh
z&!0`ZSD%@Za`vmXvU0Xw+>RYWn?V8E^(X4w%3yW#+N_eYv}bQ-8h5W>{eFM_$48Sk
z+Lcyi-QM;)Y<=9`A7yWEZJlkNZ&&;4i`N-oWQJ-Beg7SQr~dbc58vlkKAX33qwj39
zw{z$GxvRZC=l;Ihm4Eg3eK_Qvzx!>qzrC%M)vnan)1KFTIK1=p^nMx3O;Ed!{Js7B
z-oHynj?9(c{rSbl<o$oHuDAdGpgF$2<owCW>eFx8TU-C0>Mr;5$=&k*-=0qIm-~Hm
zRp@FpHMM^q-|f~m1O`*c+NjNWC*SV`W<+@<?XUb>85j=ypFzu1PyKu}Y9e*YqtS32
z4M*~8v(eNuntDc44~?3NqnT?obB$)M(ac4~-sfnMGFqezha%;N`uvioM?!bM_yHUv
OVeoYIb6Mw<&;$VU3wf6S

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-dark-tritanopia-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..37c22f9b6eb1bb1f2c969686f7145fcbccff1f88
GIT binary patch
literal 4722
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-I-V|$
zAr*7p-u3O7n=0AxFnEJ-;xb;}Bg;g4=9XME;@PUEx@mH0^N}Mfg_3pi8vD3=)?A%?
zP~gH;Ud|=g{;kOE`N*CWac$Fzw>~0Arkzn(yOu@#EzfGcQbW(+D=(8CW$dVqwd{Vs
z=l<`#mD9@oiq1uDO}qPxk%8gE!}8PrtAVb0u;2L(GlN6R4t9nHjzWG02Ej*i3=B#~
zY#A6_I)Dl~1imvc2q?Z|WKeJ-SK;Z--?iuM|IeNt_iOr5+3)xNUoU=c_xk{|d0pB0
zdG6`=s<J;;WmQ$ZfAYkL4d|qQbN%7g9q~H)ckkoJzw2ufvZ{XhumAtk{r9)KUpsf_
z?WsTBCu{%r=lOdU#m~N)|0{a&;bHD=yS+}$j0_G}jUNBI7M&OS+wt(>?eV*J7d}4b
z+}^LFqx0sL>BpzByWd5WA8&MKZ*OaxW|dn~^5ww6X7PVz4<EM6{W^4b{`}eV|DRmw
zENzw(aW98~p`iHJiBEF3H<g~2kFU;MxqJ8iZNFbVcqQC#U-t6S(t`;GKabpdtnT;b
z&d$#-E-wCG_&>b-eO-RtKk3Pn!`H<~@~~CQ*T1=P<%_tw+Pvy-H=p*hGccGhOg;AZ
z%$YOh^J_l+nz}Z6Tix&7_apb*+xORa`Tv5fjc?eS5B~i8JUu=Ay`*%s*1O~HrRUF@
z6{qtXXr2B4dp9?yA3t_%nz=Ls!<{+PB)@<D{CU59-Jf4mTU%SRuPZAnfA8y`U-|iL
zwzjjgvwZyix|NsR+^+5U{Jq?+;@_PQA5MHqV`gZWeHj=`$MoXoRe!xI>|gtO<!kZh
z&!0`ZSD%@Za`vmXvU0Xw+>RYWn?V8E^(X4w%3yW#+N_eYv}bQ-8h5W>{eFM_$48Sk
z+Lcyi-QM;)Y<=9`A7yWEZJlkNZ&&;4i`N-oWQJ-Beg7SQr~dbc58vlkKAX33qwj39
zw{z$GxvRZC=l;Ihm4Eg3eK_Qvzx!>qzrC%M)vnan)1KFTIK1=p^nMx3O;Ed!{Js7B
z-oHynj?9(c{rSbl<o$oHuDAdGpgF$2<owCW>eFx8TU-C0>Mr;5$=&k*-=0qIm-~Hm
zRp@FpHMM^q-|f~m1O`*c+NjNWC*SV`W<+@<?XUb>85j=ypFzu1PyKu}Y9e*YqtS32
z4M*~8v(eNuntDc44~?3NqnT?obB$)M(ac4~-sfnMGFqezha%;N`uvioM?!bM_yHUv
OVeoYIb6Mw<&;$VU3wf6S

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-colorblind-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-colorblind-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..c72be79709825e54427f3470ce174c129cadb862
GIT binary patch
literal 4738
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-Hl8ky
zAr*7p-i=>zuT=KH$Mo5|Z*G2j=+?Ar=dwBzi><TIWwG3KnXtqn>e#<!P7@PZ8#yld
zwt60os6W!uk&vD3rE$+QJkZ=VbBF!$rz+bo#AHldQ*36Hw7i=+dGk3vzIjW&$LY`O
zzW@1eZGF7m^!$0<&&~6*va*2g`161E|1^FeV~^nxTLuP~j%o&m4uS6s3<8Sp7#S3t
z?l3brwCrGKXy7OWsuFx8$H1UOu0q4vJO00sEx%Xr_}O*cfA2cg?^j+m-T&`wzW%>A
z_iEY0;`gTgs``7(_q+Xv2Rdv(H~pI&4|l|on4^C$E>7N^_xsGR-r3iB;=b=ZU;nYy
zet*Tszy3Bqe@Ab7S95;W*XwKUZpeMUww+IY=Hi143=6WR75=}K{okr~VP~iD^LP6y
zUR}91ce`GM!T*KK)%@@7|Nb5xck|=R+y5;sEiY%DpKGx*`TE=Z=#7syy35slNoQ|A
z{P0`s_PJJHr{6pabkg)?r_;XQ_?SLFcKbtS<GX)P{%iis_Icm`xp%#%>&f!4-M{<!
zEr0C~<$n8rpU;}#{}TWGy?sH!#e$3T?%t2tQSdOq;K#jrccs_e|8in+f9=C_)@kOz
z5RGX{ll-o%ti8YV{@&;7ZHoW=2;cv&_vP#5e6muqvF5Sgnh!oWrM*r<GSaf_%?+Qz
z`X?`L+{(W0GyQLZfdrrU+PJ^#HYOiWGnWP$H4A9eVb^Z6+7ExlWlC-~6<_}^F<(Nu
z`q!)P>#VmMS^j+Gt-sgia^~a5k55nA`?cwF`{B;cPN?T1kNrKW8@uPnuioo-%imu=
z7awCIb8buh$w{g}<<Hmm^!Kli*jS^N#>~*L%JS#-ITtUMs{8%Ryn5o)>U(>uei_&Q
z`}6el^s`&)@7~JhmzSJ9r>6AR>z9|8|Nn8P^WxU*=SgM^3@c_$-f@3p?dzGw!sT~s
z&)>Lw+;5Ie<$q@Wx-ZG*cBL;q`1~$^d!y{zo144e|2$O;H2>ku$ML^D#deGHZ_lax
z>s`Re(9k_&@{aoBx7XLaIIwT}|6kj6=ijQk{LKH~qv`v9UF5Id@UZrE`mOz0S5Gw7
z+SmR2DW3P^$JzNiQg2_ma^<l7-S5**>(B4L2}&OKfFiSPnHd;9u+3O)eg&9A|0h$F
z$f=)gMopwn@iQ8Zqv1$?<u#gmMpMsd>Y-7~a5Qs`X0Fl9HJZ7o*x4K{QbvoE5m2N&
ay6<56Ku4$MzAkXQgu&C*&t;ucLK6VMVTYRl

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-high-contrast-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..616a524b0a2352bdaa0e12027df6d38562588462
GIT binary patch
literal 4735
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-mYyz-
zAr*7p-hI3JUa9PXkJ+;qZ+JaN_vS6%=x359iZ9Zv{Q{%Ux@~q85K@#<J(~4JrAcAM
za;|@j&!WsLF29->$nvo5n#tUym+zYJ-tICHPfO@2zLvm#?Bzkm*;j8iH><zgd%gSh
z!S}!Z?c1+Ezde5)`~K{MU%mhx#qi_*_77*}fQ*Xdj%o&m4uS6s3<8Sp7#S3t?l3br
zwCrGKXy7R1XJ8O~1XQJT#Fl}<g<OS6dWHW_&bIs8*c<-;_M^xB_8SX6F73DZwVK<$
z`ug^=*iX|Qp82{-G&^tq<8zigKsWtS-w$_0$Iq_c&h32pzkjGtTN`2g>s$GqFDqxq
z*L*xLey{$)f%WG3H>+NrNIk52I`2l+<Acrq=PxHPFa($$-(g?=?#{~V)_?miufJRS
za_QvgZTEI$TwL^*|NY;m&iwm+eGlKBcf0P}o0~WNtn2<9xt4qT{?4ke`Fu9NjwJtf
zcXPA*wehXG|G(6{&5R5Oj=r3<)Ark);{CgGe!jZ-?%v<Gce%xMeq5YaJzX!>N`mLx
zo$~X$udl6taNK_9*J-o=zy24yd%v{|-~0XFe|L-P%ki+;|2b%TI(*&U_y26~|2cO3
zxfw8AV_Kd`d{0geuX%61`&_(b*_)f|YrbY1U-!4GEVvx{*f`Z*g6G=0SYxxYqZ1dq
zr+5EO=aap)<6$#cqV4d*Utix_7Jb=XJe!w+LC>$a=l8>c9~1fW>+U*s|0}(6<jIqV
zhu!b}+O~B4S|4BEy?;K%r(5SHB^5pGn)-ZwPY;i}y83f7X`nOa0G%PeEv4kkuh+n^
z`X2jSzpsZU{qFvhlBA?Zf2MYJp1is`?CkLzP{8WvpT4;z^Usk^`*qRgWlyKRPPgM0
z*NZW&Uelj{=ffA{_GQbKrR|$%Rr>1Z^ZNR$KYrAlVPjwj{Vep|djF2cUtV6`UR!s3
zqO!aHoF9kZmf!h#?|W{=tCf-W^L{>^8*f$o?2LHX8yjGJY)n3X@6*iNZtm{(-)}}g
zPc~y<STSq*j{Sc=mA|d8c(1+w&)Z#R&3oc&?>7Jb_V>+l{+Qyk%Wi&KA8r2a!oB(b
zU$%<h+n;!OtNbk^Tid@U^uOuG@2jy(V`gYr#d`Vj<@|5JgmyqWVc)-nV!+%WFHFPq
zPyHM<Y9e(?rqOU54M+0pwb9fwntDc44~-g)qnT?obB$)M(ac4~e&}eCGFqeziz4Me
a%fhN#vLDu-TM8U3VeoYIb6Mw<&;$TIZGVaY

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..c72be79709825e54427f3470ce174c129cadb862
GIT binary patch
literal 4738
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-Hl8ky
zAr*7p-i=>zuT=KH$Mo5|Z*G2j=+?Ar=dwBzi><TIWwG3KnXtqn>e#<!P7@PZ8#yld
zwt60os6W!uk&vD3rE$+QJkZ=VbBF!$rz+bo#AHldQ*36Hw7i=+dGk3vzIjW&$LY`O
zzW@1eZGF7m^!$0<&&~6*va*2g`161E|1^FeV~^nxTLuP~j%o&m4uS6s3<8Sp7#S3t
z?l3brwCrGKXy7OWsuFx8$H1UOu0q4vJO00sEx%Xr_}O*cfA2cg?^j+m-T&`wzW%>A
z_iEY0;`gTgs``7(_q+Xv2Rdv(H~pI&4|l|on4^C$E>7N^_xsGR-r3iB;=b=ZU;nYy
zet*Tszy3Bqe@Ab7S95;W*XwKUZpeMUww+IY=Hi143=6WR75=}K{okr~VP~iD^LP6y
zUR}91ce`GM!T*KK)%@@7|Nb5xck|=R+y5;sEiY%DpKGx*`TE=Z=#7syy35slNoQ|A
z{P0`s_PJJHr{6pabkg)?r_;XQ_?SLFcKbtS<GX)P{%iis_Icm`xp%#%>&f!4-M{<!
zEr0C~<$n8rpU;}#{}TWGy?sH!#e$3T?%t2tQSdOq;K#jrccs_e|8in+f9=C_)@kOz
z5RGX{ll-o%ti8YV{@&;7ZHoW=2;cv&_vP#5e6muqvF5Sgnh!oWrM*r<GSaf_%?+Qz
z`X?`L+{(W0GyQLZfdrrU+PJ^#HYOiWGnWP$H4A9eVb^Z6+7ExlWlC-~6<_}^F<(Nu
z`q!)P>#VmMS^j+Gt-sgia^~a5k55nA`?cwF`{B;cPN?T1kNrKW8@uPnuioo-%imu=
z7awCIb8buh$w{g}<<Hmm^!Kli*jS^N#>~*L%JS#-ITtUMs{8%Ryn5o)>U(>uei_&Q
z`}6el^s`&)@7~JhmzSJ9r>6AR>z9|8|Nn8P^WxU*=SgM^3@c_$-f@3p?dzGw!sT~s
z&)>Lw+;5Ie<$q@Wx-ZG*cBL;q`1~$^d!y{zo144e|2$O;H2>ku$ML^D#deGHZ_lax
z>s`Re(9k_&@{aoBx7XLaIIwT}|6kj6=ijQk{LKH~qv`v9UF5Id@UZrE`mOz0S5Gw7
z+SmR2DW3P^$JzNiQg2_ma^<l7-S5**>(B4L2}&OKfFiSPnHd;9u+3O)eg&9A|0h$F
z$f=)gMopwn@iQ8Zqv1$?<u#gmMpMsd>Y-7~a5Qs`X0Fl9HJZ7o*x4K{QbvoE5m2N&
ay6<56Ku4$MzAkXQgu&C*&t;ucLK6VMVTYRl

literal 0
HcmV?d00001

diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-Default-light-tritanopia-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..c72be79709825e54427f3470ce174c129cadb862
GIT binary patch
literal 4738
zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-Hl8ky
zAr*7p-i=>zuT=KH$Mo5|Z*G2j=+?Ar=dwBzi><TIWwG3KnXtqn>e#<!P7@PZ8#yld
zwt60os6W!uk&vD3rE$+QJkZ=VbBF!$rz+bo#AHldQ*36Hw7i=+dGk3vzIjW&$LY`O
zzW@1eZGF7m^!$0<&&~6*va*2g`161E|1^FeV~^nxTLuP~j%o&m4uS6s3<8Sp7#S3t
z?l3brwCrGKXy7OWsuFx8$H1UOu0q4vJO00sEx%Xr_}O*cfA2cg?^j+m-T&`wzW%>A
z_iEY0;`gTgs``7(_q+Xv2Rdv(H~pI&4|l|on4^C$E>7N^_xsGR-r3iB;=b=ZU;nYy
zet*Tszy3Bqe@Ab7S95;W*XwKUZpeMUww+IY=Hi143=6WR75=}K{okr~VP~iD^LP6y
zUR}91ce`GM!T*KK)%@@7|Nb5xck|=R+y5;sEiY%DpKGx*`TE=Z=#7syy35slNoQ|A
z{P0`s_PJJHr{6pabkg)?r_;XQ_?SLFcKbtS<GX)P{%iis_Icm`xp%#%>&f!4-M{<!
zEr0C~<$n8rpU;}#{}TWGy?sH!#e$3T?%t2tQSdOq;K#jrccs_e|8in+f9=C_)@kOz
z5RGX{ll-o%ti8YV{@&;7ZHoW=2;cv&_vP#5e6muqvF5Sgnh!oWrM*r<GSaf_%?+Qz
z`X?`L+{(W0GyQLZfdrrU+PJ^#HYOiWGnWP$H4A9eVb^Z6+7ExlWlC-~6<_}^F<(Nu
z`q!)P>#VmMS^j+Gt-sgia^~a5k55nA`?cwF`{B;cPN?T1kNrKW8@uPnuioo-%imu=
z7awCIb8buh$w{g}<<Hmm^!Kli*jS^N#>~*L%JS#-ITtUMs{8%Ryn5o)>U(>uei_&Q
z`}6el^s`&)@7~JhmzSJ9r>6AR>z9|8|Nn8P^WxU*=SgM^3@c_$-f@3p?dzGw!sT~s
z&)>Lw+;5Ie<$q@Wx-ZG*cBL;q`1~$^d!y{zo144e|2$O;H2>ku$ML^D#deGHZ_lax
z>s`Re(9k_&@{aoBx7XLaIIwT}|6kj6=ijQk{LKH~qv`v9UF5Id@UZrE`mOz0S5Gw7
z+SmR2DW3P^$JzNiQg2_ma^<l7-S5**>(B4L2}&OKfFiSPnHd;9u+3O)eg&9A|0h$F
z$f=)gMopwn@iQ8Zqv1$?<u#gmMpMsd>Y-7~a5Qs`X0Fl9HJZ7o*x4K{QbvoE5m2N&
ay6<56Ku4$MzAkXQgu&C*&t;ucLK6VMVTYRl

literal 0
HcmV?d00001

diff --git a/e2e/components/BaseStyles.test.ts b/e2e/components/BaseStyles.test.ts
new file mode 100644
index 00000000000..22735f58ea5
--- /dev/null
+++ b/e2e/components/BaseStyles.test.ts
@@ -0,0 +1,44 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    id: 'behaviors-basestyles-dev--default',
+    title: 'Dev Default',
+  },
+] as const
+
+test.describe('BaseStyles', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `BaseStyles.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx
new file mode 100644
index 00000000000..d313f089009
--- /dev/null
+++ b/packages/react/src/BaseStyles.dev.stories.tsx
@@ -0,0 +1,11 @@
+import {BaseStyles} from '.'
+import type {Meta} from '@storybook/react'
+import React from 'react'
+import type {ComponentProps} from './utils/types'
+
+export default {
+  title: 'Behaviors/BaseStyles/Dev',
+  component: BaseStyles,
+} as Meta<ComponentProps<typeof BaseStyles>>
+
+export const Default = () => <BaseStyles>Hello</BaseStyles>
diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx
new file mode 100644
index 00000000000..e7608955463
--- /dev/null
+++ b/packages/react/src/__tests__/BaseStyles.test.tsx
@@ -0,0 +1,33 @@
+import {render} from '@testing-library/react'
+import MatchMediaMock from 'jest-matchmedia-mock'
+import 'jest-styled-components'
+import React from 'react'
+import {BaseStyles} from '..'
+
+let matchMedia: MatchMediaMock
+
+describe('BaseStyles', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock()
+  })
+
+  afterEach(() => {
+    matchMedia.clear()
+  })
+
+  it('has default styles', () => {
+    const {container} = render(<BaseStyles></BaseStyles>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('respects styling props', () => {
+    const styles = {
+      color: '#f00',
+      fontFamily: 'Arial',
+      lineHeight: '3.5',
+    }
+
+    const {container} = render(<BaseStyles {...styles}></BaseStyles>)
+    expect(container.children[0]).toHaveStyle({color: '#f00', 'font-family': 'Arial', 'line-height': '3.5'})
+  })
+})
diff --git a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
new file mode 100644
index 00000000000..18c719e6bff
--- /dev/null
+++ b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseStyles has default styles 1`] = `
+.c0 {
+  font-family: normal;
+  line-height: default;
+  color: fg.default;
+}
+
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-color-mode="light"
+    data-portal-root="true"
+    font-family="normal"
+  />
+</div>
+`;