From 3e281b13e3f431498dd61f30e240455d1f302af9 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 18 Dec 2024 11:31:06 +0100 Subject: [PATCH] Fix open state color for colorblind (#1136) * fix open state color for colorbling * add changeset * github-actions[bot] Regenerated snapshots --------- Co-authored-by: lukasoppermann --- .changeset/mean-islands-live.md | 5 +++++ ...k-colorblind-bgColor-open-emphasis-linux.png | Bin 818 -> 749 bytes ...lorblind-borderColor-open-emphasis-linux.png | Bin 873 -> 791 bytes ...-colorblind-borderColor-open-muted-linux.png | Bin 852 -> 767 bytes ...tches-dark-colorblind-fgColor-open-linux.png | Bin 838 -> 756 bytes ...t-colorblind-bgColor-open-emphasis-linux.png | Bin 843 -> 738 bytes ...lorblind-borderColor-open-emphasis-linux.png | Bin 886 -> 749 bytes ...ches-light-colorblind-fgColor-open-linux.png | Bin 845 -> 738 bytes .../dark.protanopia-deuteranopia.json5 | 10 +++++----- .../light.protanopia-deuteranopia.json5 | 10 +++++----- 10 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 .changeset/mean-islands-live.md diff --git a/.changeset/mean-islands-live.md b/.changeset/mean-islands-live.md new file mode 100644 index 000000000..08a64952b --- /dev/null +++ b/.changeset/mean-islands-live.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Change open role color from red to blue for colorblind themes diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-open-emphasis-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-bgColor-open-emphasis-linux.png index 001b8ef00479e16eafe1b60653fe17540e84d0fc..c54e94ee6439db7b2cf7bfd8c9f3f47e59a6dbe2 100644 GIT binary patch literal 749 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8*@_$r+7LgMk!dage(c!@6@aFBuq^mV3H5 zhE&XXd(A#;GNVj;;e8X+`i!<~PHlO5atAy=a?Cp>y`x+FQs5ks^9wGxZsIgEk+OB( zWRw5md2y4zeZ>RwHG0?k8_q3}W8k05p{VB6(J7Fm)G~ugOyAdx%hQea$Jx{u*L^NB z+P`jl&xyL-H}BT%`~9nK|J^ImerImx6b9y77@ii-Pxp`Kznp5D64UmwsOoD@#JX~O zJD`f5@-GR`&DX!;eEihHUEtwCwf^w0Egy^KD0fiPrBwAcEe*4|@$X-_ZQ>r8=Nw8l zH{N{BzFYtOzrR0Y^DPYzzbcB& uZ(u)b&1ER) literal 818 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8=cbN%6-;EI^8}ILO_JVcj{ImkbO{Z#-Qb zLn`LHz3!V89LUi2aI(DdrU?lPFYGLdD!(w7BX-6G(VHtvxJ9iCM0_8yDOr5FH{Iqu zmmS}n?{{|ZxOI09o5O*kSBwn*y*4!P9Aq+L;XWatqu@*n&b46v2Yc?O^_-UvfBdh? za@*{qSBmux-Tr4XFTVfr%cll)Z*;A)=j!&+(80sRXkfVgd~NczrTZx)GPZu9!wXYS+XELlz%Y032UzY U<;HLumUHx3vIVCg!0Pf=-ng9R* diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-borderColor-open-emphasis-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-borderColor-open-emphasis-linux.png index 9c19a43e8bb5b7a1fe7100a64cdbbfc735e2d015..02ba66b6d6ed54f7a9ef6285ba169fe4b238ec78 100644 GIT binary patch literal 791 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8*@_$r+7LgMk!dage(c!@6@aFBuq^E_%8+ zhE&XXdwsvxv_zTX53hv##`p4kQeED$?2SOvf@914+@qQ@Ugs=YtB{q&KgWrqMJVde zzA9v3mdUov%*M-P6><3cSojN)Nl9XCza44!#i8;CIfP~uR zw>KB3U$*9-zTEt^F0+Nbt<~R8|8DOV7hirK$d8DMy}iPm=fSnf;n&~W$41S(=6r0! z7NfmZyUllQE8g>e*F7VK^A~sK+^dc8mpFgyE&JCN!;S*Iya(|!*4$sA-gD6Yq5SVZ zMa$=X@V|Z6dW|~IF;!~%fU3bkN5gzyF+RQt3Xc!*g`Cfe3coF$XCNn^>!&p5^vQ$A zs}5E8@!4Gw28Q&mZGrg`2hOjbKg~RS^2=|JPF3wqWq7{a{rK4>V p*|m{-8TCxh2U0zWz{2D&n`o-R^gYscD}X7T!PC{xWt~$(69D0gFWCS9 literal 873 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8=cbN%6-;EI^8}ILO_JVcj{ImkbQd%APKc zAr*7pUboE(4U}lRSnIsVP~d}*;y;r|0!;$a+1$$~SVlxxa&(_LxRAqbf(6&nLkoJ< z1WsEpE@-#qMH znf{@F?%Ay$|6Dw~ao;wH_4oeGsNy?3xxj3m-HjPlOyM{7zg~B~HR0@$YsZpaamGB{ zrv59(Le_Ze_h+}S2>;7I&VG8OdI9HhW}0}1h9NcZMuXz2VCUoJr&oj%%KjvtJ@S2X zH!v(&@2AvLi!V;(vS3+gH*ihE8pIz}uzGfBA9cyhoB;u7$~tOOGCVA?OpnK6(Cg z7I|iUW8>Uy&-EM5#qc*g_iGUlRy^XuVJPV2LnY?4uMLK0PEY=NbobL|U-!gZk7nC& z|L*&JwY&E3z4u=3l`eCH%=+`Mc$qC~KmW`4T{bKH>jXoe&siJqopWE_UvB<&8e>JD zT*}s+E7W_^e|`$JP2^FsIkBaH-R|ZdtCi|K2j_n{xv%a|fd7x>x%%s0aW)qUQ_bmA z4F~!f1`PF&IiT?P6Mm z9$scl;Sigk7~#;Cz$n?oI?5p;433q(WVCtz>s882P6OHch{+WeHoCTr;uf&t+I^D5meVG0JnmrZ2vub}XzGq~(`*6+vdj^L6=i=^H|EV#1bJh7+s@WUe z_w)J6-_=>yhv(0fc>m&9pWpmz!pBY*Zc{kadv})pYtF|{EusY!kGOCc3Of0;2ndfH z=8lc~>-C@k@bFmJeETclfZ1Su=KE`2;m@yMFHbDAxMMeuxBBZe!N~Zv`{wW8U-9|V u{a@vKQ-LxcNfc7{9C6Bs3%SW`H}CMZTYw9$eib58C+o_<*S z%%syztPKWl!hJ$ON5OeR1J6Mw zqfri)Fj&+2>+AEpZ!LSDemkui!Cm^Z*0%c4y`tYwt>)M^+_kIOD>-}jTMPT>-pNzb zt2oSGpWU%5uD^f!_RY&b$g{g2Uw-?hGQ+#W(**`WIRD^2d&j`-gTjkkV8&qZboFyt I=akR{02*^1kN^Mx diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-bgColor-open-emphasis-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-bgColor-open-emphasis-linux.png index 25df9e4476afc1c2bc1d2db0886c069f49d4c5c2..b54c1e8419997e89e851b81b06fbf340df93f256 100644 GIT binary patch literal 738 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8*@_$r+7LgMk!dage(c!@6@aFBuq^=6Jd| zhE&XXd)Lq_CQ+g-P(4{eBia0sn95RbftUuB+*vxxTYbMxP}{nr;ed`}Y6176xy~wQ zpQN#BzB4($x8fXEoL$9(_y3L>@US~P_qAn+vlevnX%P@sJmSJ(NF}EA8ul~i4}X4l z`tIdt|DG1^UcKGt#LKM8%DR%`y>`}-*P_$X9!|cn(XO_7$KRc6!+ox_cVGQ}KK*Og z%#Sj%Z;!9P|Fz|1(Hz^3f-TSO>tAzTeri!IKuz~i)w8rT%;MHbYxm#!$8R=I?k)TJ zZ^t}?*uKr}hpP_!srkF3Znw>iJNs?&%D+zIw2al&Ki{9X?)ujWKO=b#2jn+|pDh+i nQfisOp{VB6(J4R==6{BX6$Yl4{3me(6D@(<{eN5Z=U^!XY+6F~XrOfl-ncoQ<-!4R`V&&2%k!Foq)1|~1^#ybiH7!^qN?c{VGgomgjAdD-Ddl7!B6K8` zTl}lxTTAU9#gp}o!_THgPGcg)WfgDrJ`)`|NZvVUm5yCzou$9~zlSGdz2t5DauRP{UE410T>`B`yE zkp6?TLZNj<|MT`HIN9CuQi^%{@h~vl=H{}>i2Kr22a$Q?>l6s0Mjpnr>mdKI;Vst0D*}P4gdfE literal 886 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8=cbN%6-;EI^8}ILO_JVcj{ImkbQd2A(dC zAr*7p-mvZK3zTVpXspjVS)eJ*TypKT<7^^A+8bCdXXZE@7s_#57`7l(Q_X5^zfZ@^ z&LcKl!RJ(VeZE&1tNlaOzv%g&`Ms%;(-;Ld%(7*85YH(#K{3LiErC(8i8Y0T2ApFz zZ!-UQ{r&s-FBjNSR-@EzQ4S>*Lm~ zYGJddr};k+*?0Drz#7xSyx-T}aL##j=i6Ig06$ZS5uPq@Bbog8jK!T=>%O|W*|zP5 z$6g(pTKMnS-NK*$9^VYM*tSvUv{5z7f&B$SOtea77$H~BFjvpK)%@TYP)1_#boFyt I=akR{01V+SrvLx| diff --git a/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-open-linux.png b/.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-light-colorblind-fgColor-open-linux.png index c814796f2d1a86f9ee7dc410f00ba958530d9d45..b54c1e8419997e89e851b81b06fbf340df93f256 100644 GIT binary patch literal 738 zcmeAS@N?(olHy`uVBq!ia0y~yVAKJ!S8*@_$r+7LgMk!dage(c!@6@aFBuq^=6Jd| zhE&XXd)Lq_CQ+g-P(4{eBia0sn95RbftUuB+*vxxTYbMxP}{nr;ed`}Y6176xy~wQ zpQN#BzB4($x8fXEoL$9(_y3L>@US~P_qAn+vlevnX%P@sJmSJ(NF}EA8ul~i4}X4l z`tIdt|DG1^UcKGt#LKM8%DR%`y>`}-*P_$X9!|cn(XO_7$KRc6!+ox_cVGQ}KK*Og z%#Sj%Z;!9P|Fz|1(Hz^3f-TSO>tAzTeri!IKuz~i)w8rT%;MHbYxm#!$8R=I?k)TJ zZ^t}?*uKr}hpP_!srkF3Znw>iJNs?&%D+zIw2al&Ki{9X?)ujWKO=b#2jn+|pDh+i nQfisOp{VB6(J4R==6{BX6$Yl4{3me(6D@|2bqjmxK9Y^C^&Cu;GqTQhO}+N z-Msp``TO?T&tJD*Z~5)nZ(mrh-cVm)B0F!6-|=+u%l{rPU;KQ-;k0?rE5C63`}+0K z*)4zn6n^OmwW|7ARaN&d@e5Dc2O+&H{rdCW{3CR?$Lk%8T4BGxzIWb+sJ#6#O{^&# zViOc29NH2XB}X|}!r+?I-TEIHUs|pf{eCL6rnTzRqpL4CS3muBdaHRA!*1K^-+8y* z*v`NjIg6Knke^*S@A*Y#hIfa&IR-&U|6z3~F|M0&blx*y{$TKQ^>bP0l+XkK{5Bxy diff --git a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 index acc30d816..0dbaa8952 100644 --- a/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 @@ -14,7 +14,7 @@ $type: 'color', }, open: { - $value: '{base.color.orange.3}', + $value: '{base.color.blue.3}', $type: 'color', }, closed: { @@ -47,12 +47,12 @@ }, open: { muted: { - $value: '{base.color.orange.4}', + $value: '{base.color.blue.4}', $type: 'color', alpha: 0.2, }, emphasis: { - $value: '{base.color.orange.5}', + $value: '{base.color.blue.5}', $type: 'color', }, }, @@ -71,12 +71,12 @@ borderColor: { open: { muted: { - $value: '{base.color.orange.4}', + $value: '{base.color.blue.4}', $type: 'color', alpha: 0.4, }, emphasis: { - $value: '{base.color.orange.4}', + $value: '{base.color.blue.4}', $type: 'color', }, }, diff --git a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 index 1c30bba3d..553498e91 100644 --- a/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +++ b/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 @@ -10,7 +10,7 @@ $type: 'color', }, open: { - $value: '{base.color.orange.5}', + $value: '{base.color.blue.5}', $type: 'color', }, closed: { @@ -35,11 +35,11 @@ }, open: { muted: { - $value: '{base.color.orange.0}', + $value: '{base.color.blue.0}', $type: 'color', }, emphasis: { - $value: '{base.color.orange.5}', + $value: '{base.color.blue.5}', $type: 'color', }, }, @@ -67,12 +67,12 @@ borderColor: { open: { muted: { - $value: '{base.color.orange.3}', + $value: '{base.color.blue.3}', $type: 'color', alpha: 0.4, }, emphasis: { - $value: '{base.color.orange.4}', + $value: '{base.color.blue.4}', $type: 'color', }, },