From b862028b44c8c25ded30bf6865eaf68ec24758bb Mon Sep 17 00:00:00 2001
From: utkarsh_33 <60460-Utkarsh_33@users.noreply.drupalcode.org>
Date: Thu, 6 Mar 2025 18:35:10 +0000
Subject: [PATCH] Issue #3503140 by utkarsh_33, phenaproxima: The Svelte code
 should not have custom logic for the Gin theme

---
 .cspell-project-words.txt                     |   1 -
 css/gin.css                                   |  23 ++++++++++++++++++
 css/pb.css                                    |  17 -------------
 sveltejs/public/build/bundle.js               | Bin 292801 -> 290808 bytes
 sveltejs/public/build/bundle.js.map           | Bin 265699 -> 263913 bytes
 sveltejs/src/ProcessInstallListButton.svelte  |  19 +++------------
 sveltejs/src/Project/ProjectIcon.svelte       |   7 ++----
 .../src/Project/ProjectStatusIndicator.svelte |  15 ++----------
 8 files changed, 30 insertions(+), 52 deletions(-)

diff --git a/.cspell-project-words.txt b/.cspell-project-words.txt
index 20ae7c91f..aeaa07c4a 100644
--- a/.cspell-project-words.txt
+++ b/.cspell-project-words.txt
@@ -14,4 +14,3 @@ CURLOPT
 RETURNTRANSFER
 varchar
 techdebt
-darkmode
diff --git a/css/gin.css b/css/gin.css
index cb08e3e50..75c821c77 100644
--- a/css/gin.css
+++ b/css/gin.css
@@ -512,3 +512,26 @@
   /* Move the dropbutton slightly away from the "installed" badge. */
   margin-block-start: 4px;
 }
+.gin--dark-mode .project_status-indicator__label {
+  color: var(--gin-status-success-text);
+}
+
+[data-gin-accent="blue"] .pb-layout__main .views-bulk-actions {
+  background: rgba(var(--gin-color-sticky-rgb), 0.9);
+}
+
+.gin--dark-mode [data-gin-accent="blue"] .pb-layout__main .views-bulk-actions {
+  background: rgba(27, 27, 29, 0.8);
+}
+
+[data-gin-accent="blue"] .views-bulk-actions__item {
+  color: var(--gin-color-text-light);
+}
+
+.gin--dark-mode button.project_status-indicator.project_status-indicator {
+  margin-bottom: 5px;
+  margin-left: 5px;
+  background: none;
+  font-size: 16px;
+  font-weight: 700;
+}
diff --git a/css/pb.css b/css/pb.css
index ff014832d..f8ac39f1c 100644
--- a/css/pb.css
+++ b/css/pb.css
@@ -1108,20 +1108,3 @@
   padding: 5px;
   font-size: 0.79rem;
 }
-/* @todo Remove this class, and its uses in the Svelte app, when we have a cleaner
- * way to ensure that it looks good in Gin. */
-.pb-layout__main .views-bulk-actions-gin {
-  background: rgba(var(--gin-color-sticky-rgb), 0.9);
-}
-
-.views-bulk-actions__item-gin {
-  color: var(--gin-color-text-light);
-}
-
-button.project_status-indicator.project_status-indicator-gin {
-  margin-bottom: 5px;
-  margin-left: 5px;
-  background: none;
-  font-size: 16px;
-  font-weight: 700;
-}
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index 076fffd0663ee9781d0a35db2556bdb153284a18..06a845d9e7cb46cd312ebf43b500a48ec698798b 100644
GIT binary patch
delta 639
zcmX^3Uhv0#!3}+D7>y?PuhC>Q+`MxQC*yQ~RTgcS$mE@CET=DzW9FUSzkoT5$;4pu
zsdaUXOlHQLy*6|+GMSo8_dUX>H(6mX%Vf??S75p}b8MDjVlvX4d}oWqWV@|WF!9M8
zn=Ll)-WtioVrFh-H2KUr$?0E08C5oi?wH9qeW5Pn^~pzfwNC%z$jCc6@Sx)44ZFJ;
z4L95DiDR0+{vV_C<m!{0oA>SWVw_%R%&0UyB%4`ma_R|j{>;4MlEj>x_@vU3lKeb{
z$;&UQOfRfsQkZ=GfEI`$KKa6FtI0(NWf=`OPdK=Rae74}6VLSBlFSC18xEJTOn!Po
ziqUY>Nf*Y+%6mjuj1<(=CI=i;o}6>qnbC0bhSN`(7|o{t3uaNAy#1W%X4UgXj7(-G
z(+vfgCAds=6p~Aeic<4RrUwWzOHH13!FBoxL1y0RHiFE&jE0lHU+|bb;Vu8<{g?Qg
z|6JPs=Mtk$&vcn^M!xAE4l}V$_X}d0u>EH|Qwrns^@&W9)AMtf*dcz~kjNx4nemq7
z_P>ct&l$I`3uB6BoW3EAk!8ByZD#f93u2iiCs%$DoIW#^X~X2(i}<H+Sj1?vT`rP|
zlX3b1UlzH^`l~pnD`qmyo^Bt_#5OtqzWVfj0cN-9d09-gj7HPnWHISXKCp~)`ivYV
zk?rSmnEF+jOf0u2Ok%pvIXPh!+xF5qOq*G3^z{{-GZORCQx!@wQWXjkOEMJ7Gg9*u
z(lhfEQWA@@LBhGI3Yo<Usd<S>IjJdnTnY*b3Y?i~3L4WDTbaa!HPrReGxKzHL8^6g
U^HWmQHQTcmGHuUV$Q*tR08SV2{{R30

delta 2022
zcmexyU-002!3}+Dru*(;7Mi?ZjRd3d=ACOe85u36H_l*|o%~=eFOt;coog(of0JgC
zoSd~TZu)6wX70_G*OfA|n44LdOb?vStg*RdLn7n!176JBlOJsSi==Zi$7UHOCJW8U
zceY4Ow%aO&BsH01v&H7!TO*lREDWrSCZAa+x!G{XUdHJz8q8*s|G%-C9JlKYTT*FB
zNq*k+!2Qe`(+}@w7M~oxdkvd$tb(nr?d0`;q&6$>v1bDD6>V*&pFhGZy18~=FyrL)
z`=yxDGp8>|W|o@%A(M$i1Y%5la!z7#aeP@~PHC!w?c@*p^@Wubv=#KVAkxkt+0^36
z3!ey2KM=#jI(-2nBmeYcSC|Eu6l^CK9MF+afGN+(c1$kG%+G^rnO^^bQ39l#eRBRu
ztI2N<$TAvl=03QEk<oPe#@CF2(<iK9VxOKciOF-i<aK7==?ePHT+?%yn8c>X&u5mL
zuFcFOv-$Ahb<ES}JYW`cL~)IlzJig0nwkPc5XA?IwzdiySj53TlYu!E6n;==YUwK^
zmsCU>#!mm&$s`R98CU=(US?LATzFiH(Rg|RGn4%Eb=Ax<lWX^JP8K+EKrpEk-M?m6
zn2jbE9niuZA{#C+%S}J6&%y%=K$Ynat}(NKeK+~S2@zHckdGz{oK%|3ebSlHc(eb>
zr%a%f$I7faIqHm|xq^a%0%uNY3Dnn6=Ua0jiKDql!B#<CeRJm-6UOQL9y3ZanoquQ
zHiOyF$YT1z$BYt;#*?GZdDv7#4B*t)S8ym!O;t!PF4iwd(n~HbhDv0nDQKvtXXdFZ
zWacTP6qObv<^-pflw{_m7lX`^6xKm?5y;lbdIwbM)itfTpk{D_3_;bam!6rYmy%eN
zotvMMssM^MbwhPc1(<U<IaO3L^U4x)GE)*uQZ<Y~mSFK-S!QZ^u`VbsbQ8geuUHr4
zR84Cxh3Tb6O#G}0sX4`|lMkE~S26?{ffVr|cV^}lmn7!o#6uFy^!I{{lG9gMG4fA;
z^@NdM4I&B+XdS3mKz5;|^X8rBw(mU0=+XmAHi7$@#i!@!uy9Uqn8nCC-TFOqKTBR|
zPR``O&8pM)`ZM`Ww>!-!I$bS>>AnmsoB1RrrRG3wf~H90>4|MjicSzmprmnI1*L+b
z{H)aElKA41#FElt-ORj{%;dz9{33W}MDi#&BTjy>pL2UfEYovFCPTC7jyoBfrtkX5
zJb(JsU?y8gLj1Rz*<pHi6jQ+DX+Nc>=O!|RO_z3K<efhE0kfz)#1&|+w17v~^tUlg
z5_ml`IdF+2IIY)1j6(R;1eER}f+)TOB?+uKnKa)+L(?c$6XM$G2QDykPZ#K7;zZBu
z64L|DGI?+3OJX|BIQ{;8Mov?RtDsH=r5AOS>;?*B<RF2lnC_U%qBniVD`ubRK`Bh-
z(|$4QCc{!SIhhO;JovJXt*xzsx}iEKFG?7L^9jgZNRGypR-id$dctEyQAuN1?m+j@
zbhcO~c@d~uXdbAA=PCmFAUWz=3X`lNN?2mEY`b78(?nG!Q={!mx|r^BP7m{8G1%Tb
cg=r^?6R7mSQ3MegI_(Q*GHqWtlR5kv0HYVpUjP6A

diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map
index a0de0f37d72a61d19b6071f4d02e33cb01921c39..093692945097b7a3aef08ca240467c94f6cf73ea 100644
GIT binary patch
delta 608
zcmaDnTi|7{K*JWs;9RztJOu?6tLYbW8HKkm%w?R;IK68wqu})WQyF=tOBXT<O<z#J
zC^7v^0b}>}l0rsjM*hsa;*!LiocN^Dl9K#9h3S*?8CA9)D`Mn|n(k7{s5ia*9HaX5
zb>|p2Pj5NLD8(5cpOcuBniHe6z4Sbz62FzczJhZ`VqSWxLP<udLP26lhC+EpYMw%R
zW}ZSyVo^3oI5$-xvsfWDFEJ@6HAN5P!pt-Ujp>3H8O5|U)b-Lc^K^AVYISq-Q&QD6
z71Y!eN-7Id6>M#771W{bOHEO4XT8t3o%KG`YYFZ`XH#b#XGcdz9na|telaO-m-)eT
zgL(S5-%O`Dt*t#Bvz)zj+^2nEme{WQmx-T|-P18O$4SS1`oG^ya?^K5GxM-P6iv^Y
zz$`z#^A{8M^bh}-LYOO@jHiBN5t|<SpUH^TI^5AeZ~MvrOumfM749;NvF18Cdsa*r
ztYH?}p1{PsKbJ9Zx?%zIG`4hSNB4B6=?z89iqj96FtafQ7*E$LWKL(wbe*14$gDU$
zp`Tfh&B)c!%hF}~#;wdM)7=V~<EJO^Gi$P$xgzv}l(B|8CRsX9cNAfkpYCysS#tUv
zC1ypobZ6&G*P!W!%*>+G&rfCM+J3%-c|8|n=Jxt}=9O%$o{q-OQPUlFGYfCeY-3Jh
z5wP}jbggoNhLEG9<Ma;)m_@ZRog5uA!J^(ep5VZ9boA8mc69XC33qf1*Ku`pbhP$#
Wbk1{~Zq&_e&6Mf1J+GU&v<UzVbjhRu

delta 1874
zcmaFaEAV)>K*JWs;9MgGg`Ct9g{0DwlKed9oW$bd)MD$HJeX)swqtThCR|3rRzY2T
zdq6JZX2xg*1r;lWYLHR|1$})5hvL*!h2-L5{emRD<l<t8cxIY{hI)Etp1MM2o<d4d
zX+dI6aB4|OW?p)+CQPpas^uUnrmGh+s${8y-JzhMpa3!kRkvPxW}aS3Vo`Q(eoCr>
zqOGlhx}iFfksw2{xV<bhwY*q2sWc~BHxcZwVqK8yrmuU#2-1NR1|Vl-<`tJD=H$df
z0!MwimO7K{bgnE$eny4q3i*s$A_~<YqfkPqcDh$SW4EjVrcLqjnI);YAp5po&1ZCG
z<gbR93k~$z?cRlqTv6t*kVkV1Brp(B<&&6{ngi7ea_jU1lNi<NDT)yVH8r$2LJehG
zj8I1LfP$?8qx$stGmH`{AWuRZ42nI7Dhvn5pJ9~efT^7Rp@mUI43A1iXz(vM#mF|j
z^E9KP04VU00;zWTs?&^{MWBI-Y+LR2hBJ&x{Pmzz1WA@SlB9x~8blsnT7!lHTy05Z
zL8<~+5Sm<4Q`AAGz!PIZVo3%lhT8S+FmBho!*ol6CELZ+dHUPK%qrUrzB1imp3e1?
z=`4G(hhv75k<)bf>CAHM*7+WeIZheVA53Q!pZ>v^nU~4jdHcPeOqz_WrQVJ%>C@$=
zGfPju;Ka<rWo>P3?dh2Ar0+7F=QoosTcx*Sj&nIg=K()vURF;>XLIN23obFsPv<vb
z=ANGMn<<2;$a(s{-%Orz!H&*FPCAK>j)^+Xj*gDjo{r8*V3v-jqod>Wg&j<y?2gvf
z;g0?V+j;&l`7#=MJErP8gRFG*)^T-obObBZ@pg3d2C+PKk{unB!4e>|s+@G(rx*TV
zlF$ZQ;qK_@u2byn=veFwu>@=<NMVkPjyue->4JSsQet2e!5ToefYcN@>v)0<o38(t
ziASp3$<eXg3E3QLPe*r4XQ+(=2piL#939i0rXS2?R%6R`axQW*o$fe+S$6t?HfFBr
zc0SBp(*yo7nN3e%W9Hia^e<CVE_1F^()7d(X8Gx7bC^>=62h$M&W`Tx(-U%;6}WR<
z93AzYKn~8HuK0;bnl;<qF(42ebJI7hVrFA<ESb)m!<^2P?=syxhgos@1qEh4PHSsx
zBUeYSEEl-R6B)q<Dstze8OUyJo$CcPQVJZ+)9;^SW}QAkmsyZ4+%e0k%6Yo}WoD~9
z=PYOdfMN?0jj$kd1&0hM+;WiBWIH)JW`o`C4vHnHDo`S_wzl?mbT@Rewhnc4^+u0T
zPe(^jToIGu3Jr55M3`GRIXYTEEe6N3r=v4GZd8$7QRwXGScsM$Tn$~IMhYS;&2)Bj
z%$$B8lUb83-PyU=#eBMe2D9XLzC7k_T#WhKk5(|RWMfTq%y3DYp8JJajoH=GY5InA
zW~uGH^~}*M%ASs{#!x4L!wa0mKpul6T2DvkvgrbSOw#;d32;DqIy&b$PnT_B7H4)X
faGGx3!fefvT;imY>gbp{{l7l5==KRM%#lq1M|4R9

diff --git a/sveltejs/src/ProcessInstallListButton.svelte b/sveltejs/src/ProcessInstallListButton.svelte
index c0c756481..8c6668dd6 100644
--- a/sveltejs/src/ProcessInstallListButton.svelte
+++ b/sveltejs/src/ProcessInstallListButton.svelte
@@ -10,8 +10,6 @@
   let loading = false;
 
   const { Drupal } = window;
-  let buttonClasses;
-  let bulkActionClasses = '';
 
   $: currentInstallList = $installList || [];
   $: installListLength = currentInstallList.length;
@@ -29,26 +27,15 @@
     projectsToActivate = [];
     clearInstallList();
   }
-  $: {
-    // @see css/pb.css
-    if ('gin' in drupalSettings) {
-      buttonClasses = 'button--small button button--primary';
-      if (drupalSettings.gin.darkmode !== '1') {
-        bulkActionClasses = 'views-bulk-actions-gin';
-      }
-    } else {
-      buttonClasses = 'install_button';
-    }
-  }
 </script>
 
 <div
-  class=" views-bulk-actions pb-install_bulk_actions {bulkActionClasses}"
+  class="views-bulk-actions pb-install_bulk_actions"
   data-drupal-sticky-vbo={installListLength !== 0}
 >
   <div
     class="views-bulk-actions__item
-  views-bulk-actions__item--status views-bulk-actions__item-gin"
+  views-bulk-actions__item--status"
   >
     {#if installListLength === 0}
       {Drupal.t('No projects selected')}
@@ -61,7 +48,7 @@
     {/if}
   </div>
   <button
-    class="project__action_button install_button_common {buttonClasses}"
+    class="project__action_button install_button_common install_button button--small button button--primary"
     on:click={handleClick}
   >
     {#if loading}
diff --git a/sveltejs/src/Project/ProjectIcon.svelte b/sveltejs/src/Project/ProjectIcon.svelte
index fa19914a0..b8474374a 100644
--- a/sveltejs/src/Project/ProjectIcon.svelte
+++ b/sveltejs/src/Project/ProjectIcon.svelte
@@ -40,11 +40,8 @@
   };
   const { alt, title } = typeToImg[type];
   let { path } = typeToImg[type];
-  if (
-    'gin' in drupalSettings &&
-    drupalSettings.gin.darkmode === '1' &&
-    type === 'installed'
-  ) {
+  // Change the path when gin dark theme is enabled.
+  if (document.querySelector('.gin--dark-mode') && type === 'installed') {
     path = 'green-checkmark-icon';
   }
 </script>
diff --git a/sveltejs/src/Project/ProjectStatusIndicator.svelte b/sveltejs/src/Project/ProjectStatusIndicator.svelte
index 4ae3a375f..2e812ce9e 100644
--- a/sveltejs/src/Project/ProjectStatusIndicator.svelte
+++ b/sveltejs/src/Project/ProjectStatusIndicator.svelte
@@ -1,27 +1,16 @@
 <script>
   export let project;
   export let statusText;
-  let buttonClasses = '';
-  let buttonLabelClasses = '';
 
   const { Drupal } = window;
-  $: {
-    // @see css/pb.css
-    if ('gin' in drupalSettings && drupalSettings.gin.darkmode === '1') {
-      buttonClasses = 'project_status-indicator-gin';
-      buttonLabelClasses = 'project_status-indicator__label-gin';
-    } else {
-      buttonLabelClasses = 'project_status-indicator__label';
-    }
-  }
 </script>
 
-<button class="project_status-indicator {buttonClasses}" aria-disabled="true">
+<button class="project_status-indicator" aria-disabled="true">
   <slot />
   <span class="visually-hidden">
     {Drupal.t('@module is', {
       '@module': `${project.title}`,
     })}
   </span>
-  <span class={buttonLabelClasses}>{statusText}</span>
+  <span class="project_status-indicator__label">{statusText}</span>
 </button>
-- 
GitLab