Style: Design System use across more components (#6705)

## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/platform/assets/components/AssetGrid.vue

@@ -8,24 +8,19 @@
     :aria-colcount="-1"
     :aria-setsize="assets.length"
   >
-    <AssetCard
-      v-for="asset in assets"
-      :key="asset.id"
-      :asset="asset"
-      :interactive="true"
-      role="gridcell"
-      @select="$emit('assetSelect', $event)"
-    />
-
+    <!-- Loading state -->
+    <div
+      v-if="loading"
+      class="col-span-full flex items-center justify-center py-20"
+    >
+      <i
+        class="icon-[lucide--loader] size-12 animate-spin text-muted-foreground"
+      />
+    </div>
     <!-- Empty state -->
     <div
-      v-if="assets.length === 0"
-      :class="
-        cn(
-          'col-span-full flex flex-col items-center justify-center py-16',
-          'text-ash-300 dark-theme:text-ash-800'
-        )
-      "
+      v-else-if="assets.length === 0"
+      class="col-span-full flex flex-col items-center justify-center py-16 text-muted-foreground"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">
@@ -33,19 +28,16 @@
       </h3>
       <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
     </div>
-
-    <!-- Loading state -->
-    <div
-      v-if="loading"
-      class="col-span-full flex items-center justify-center py-20"
-    >
-      <i
-        class="icon-[lucide--loader]"
-        :class="
-          cn('size-12 animate-spin', 'text-ash-300 dark-theme:text-ash-800')
-        "
+    <template v-else>
+      <AssetCard
+        v-for="asset in assets"
+        :key="asset.id"
+        :asset="asset"
+        :interactive="true"
+        role="gridcell"
+        @select="$emit('assetSelect', $event)"
       />
-    </div>
+    </template>
   </div>
 </template>
 
@@ -55,7 +47,6 @@ import { computed } from 'vue'
 import AssetCard from '@/platform/assets/components/AssetCard.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { createGridStyle } from '@/utils/gridUtil'
-import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
   assets: AssetDisplayItem[]