refactor: text-primary (#22141)

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -163,7 +163,7 @@
       {#if config.storageTemplate.enabled}
         <hr />
 
-        <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('variables')}</h3>
+        <h3 class="text-base font-medium text-primary">{$t('variables')}</h3>
 
         <section class="support-date">
           {#await getSupportDateTimeFormat()}
@@ -180,7 +180,7 @@
         </section>
 
         <div class="flex flex-col mt-4">
-          <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('template')}</h3>
+          <h3 class="text-base font-medium text-primary">{$t('template')}</h3>
 
           <div class="my-2 text-sm">
             <h4 class="uppercase">{$t('preview')}</h4>
@@ -192,7 +192,7 @@
               values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }}
             >
               {#snippet children({ message })}
-                <span class="font-semibold text-immich-primary dark:text-immich-dark-primary">{message}</span>
+                <span class="font-semibold text-primary">{message}</span>
               {/snippet}
             </FormatMessage>
           </p>
@@ -200,7 +200,7 @@
           <p class="text-sm">
             <FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}>
               {#snippet children({ message })}
-                <code class="text-immich-primary dark:text-immich-dark-primary">{message}</code>
+                <code class="text-primary">{message}</code>
               {/snippet}
             </FormatMessage>
           </p>
@@ -214,10 +214,7 @@
           <form autocomplete="off" class="flex flex-col" onsubmit={preventDefault(bubble('submit'))}>
             <div class="flex flex-col my-2">
               {#if templateOptions}
-                <label
-                  class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
-                  for="preset-select"
-                >
+                <label class="font-medium text-primary text-sm" for="preset-select">
                   {$t('preset')}
                 </label>
                 <select
@@ -257,7 +254,7 @@
 
             {#if !minified}
               <div id="migration-info" class="mt-2 text-sm">
-                <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('notes')}</h3>
+                <h3 class="text-base font-medium text-primary">{$t('notes')}</h3>
                 <section class="flex flex-col gap-2">
                   <p>
                     <FormatMessage
@@ -265,7 +262,7 @@
                       values={{ job: $t('admin.storage_template_migration_job') }}
                     >
                       {#snippet children({ message })}
-                        <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+                        <a href={AppRoute.ADMIN_JOBS} class="text-primary">
                           {message}
                         </a>
                       {/snippet}

web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte

@@ -27,7 +27,7 @@
   </div>
   <div class="flex gap-[40px]">
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('year')}</p>
+      <p class="uppercase font-medium text-primary">{$t('year')}</p>
       <ul>
         {#each options.yearOptions as yearFormat, index (index)}
           <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
@@ -36,7 +36,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('month')}</p>
+      <p class="uppercase font-medium text-primary">{$t('month')}</p>
       <ul>
         {#each options.monthOptions as monthFormat, index (index)}
           <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
@@ -45,7 +45,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('week')}</p>
+      <p class="uppercase font-medium text-primary">{$t('week')}</p>
       <ul>
         {#each options.weekOptions as weekFormat, index (index)}
           <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
@@ -54,7 +54,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('day')}</p>
+      <p class="uppercase font-medium text-primary">{$t('day')}</p>
       <ul>
         {#each options.dayOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -63,7 +63,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('hour')}</p>
+      <p class="uppercase font-medium text-primary">{$t('hour')}</p>
       <ul>
         {#each options.hourOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -72,7 +72,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('minute')}</p>
+      <p class="uppercase font-medium text-primary">{$t('minute')}</p>
       <ul>
         {#each options.minuteOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -81,7 +81,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('second')}</p>
+      <p class="uppercase font-medium text-primary">{$t('second')}</p>
       <ul>
         {#each options.secondOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>

web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte

@@ -9,7 +9,7 @@
 <div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
   <div class="flex gap-[50px]">
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filename')}</p>
+      <p class="uppercase font-medium text-primary">{$t('filename')}</p>
       <ul>
         <li>{`{{filename}}`} - IMG_123</li>
         <li>{`{{ext}}`} - jpg</li>
@@ -17,14 +17,14 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filetype')}</p>
+      <p class="uppercase font-medium text-primary">{$t('filetype')}</p>
       <ul>
         <li>{`{{filetype}}`} - VID or IMG</li>
         <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
       </ul>
     </div>
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('other')}</p>
+      <p class="uppercase font-medium text-primary">{$t('other')}</p>
       <ul>
         <li>{`{{assetId}}`} - Asset ID</li>
         <li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>