fix: hardcoded color tokens (not theme-aware) (#7366)

## Summary

Fixes instances of hardcoded color tokens (not semantic) which are not
theme-aware and therefore are incorrect on e.g. light mode.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7366-fix-hardcoded-color-tokens-not-theme-aware-2c66d73d365081e294aaff366fc78a8f)
by [Unito](https://www.unito.io)

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -3,7 +3,7 @@
   <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-white m-0">
+      <h1 class="text-2xl font-semibold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
@@ -62,7 +62,7 @@
       severity="primary"
       :label="$t('credits.topUp.buy')"
       :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
-      :pt="{ label: { class: 'text-white' } }"
+      :pt="{ label: { class: 'text-primary-foreground' } }"
       @click="handleBuy"
     />
   </div>

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -8,10 +8,10 @@
     ]"
     @click="$emit('select')"
   >
-    <span class="text-base font-bold text-white">
+    <span class="text-base font-bold text-base-foreground">
       {{ formattedCredits }}
     </span>
-    <span class="text-sm font-normal text-white">
+    <span class="text-sm font-normal text-muted-foreground">
       {{ description }}
     </span>
   </div>

src/platform/cloud/subscription/components/PricingTable.vue

@@ -14,7 +14,7 @@
           </span>
           <div
             v-if="tier.isPopular"
-            class="rounded-full bg-white px-1 text-xs font-semibold uppercase tracking-wide text-black h-[13px] leading-[13px]"
+            class="rounded-full bg-background px-1 text-xs font-semibold uppercase tracking-wide text-foreground h-[13px] leading-[13px]"
           >
             {{ t('subscription.mostPopular') }}
           </div>
@@ -65,22 +65,25 @@
           <span class="text-sm font-normal text-muted-foreground">
             {{ t('subscription.gpuLabel') }}
           </span>
-          <i class="pi pi-check text-xs text-white" />
+          <i class="pi pi-check text-xs text-success-foreground" />
         </div>
 
         <div class="flex flex-row items-center justify-between">
           <span class="text-sm font-normal text-muted-foreground">
             {{ t('subscription.addCreditsLabel') }}
           </span>
-          <i class="pi pi-check text-xs text-white" />
+          <i class="pi pi-check text-xs text-success-foreground" />
         </div>
 
         <div class="flex flex-row items-center justify-between">
           <span class="text-sm font-normal text-muted-foreground">
             {{ t('subscription.customLoRAsLabel') }}
           </span>
-          <i v-if="tier.customLoRAs" class="pi pi-check text-xs text-white" />
-          <i v-else class="pi pi-times text-xs text-muted" />
+          <i
+            v-if="tier.customLoRAs"
+            class="pi pi-check text-xs text-success-foreground"
+          />
+          <i v-else class="pi pi-times text-xs text-muted-foreground" />
         </div>
 
         <div class="flex flex-col gap-2">
@@ -119,7 +122,8 @@
           class="h-10 w-full"
           :pt="{
             label: {
-              class: 'font-inter text-sm font-bold leading-normal text-white'
+              class:
+                'font-inter text-sm font-bold leading-normal text-primary-foreground'
             }
           }"
           @click="() => handleSubscribe(tier.key)"
@@ -149,10 +153,10 @@
         {{ t('subscription.videoEstimateExplanation') }}
       </p>
       <a
-        href="http://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+        href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-sm text-blue-500 hover:text-blue-400 underline"
+        class="text-sm text-azure-600 hover:text-azure-400 underline"
       >
         {{ t('subscription.videoEstimateTryTemplate') }}
       </a>

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -46,7 +46,7 @@
           severity="secondary"
           icon="pi pi-comments"
           icon-pos="right"
-          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleContactUs"
         />
         <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
@@ -56,7 +56,7 @@
           severity="secondary"
           icon="pi pi-external-link"
           icon-pos="right"
-          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleViewEnterprise"
         />
       </div>