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>