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>
2026-04-26 17:30:07 +00:00 · 2025-11-17 12:27:10 -08:00
parent 3effe714f3
commit 471ccca1dd
106 changed files with 456 additions and 2135 deletions
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -5,8 +5,7 @@
      :key="badge.label"
      :class="
        cn(
-          'px-2 py-1 rounded text-xs font-medium uppercase tracking-wider text-white',
-          getBadgeColor(badge.type)
+          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background'
        )
      "
    >
@@ -26,17 +25,4 @@ type AssetBadge = {
 defineProps<{
  badges: AssetBadge[]
 }>()
-
-function getBadgeColor(type: AssetBadge['type']): string {
-  switch (type) {
-    case 'type':
-      return 'bg-azure-600/90 dark-theme:bg-azure-600/80'
-    case 'base':
-      return 'bg-jade-600/90 dark-theme:bg-jade-600/80'
-    case 'size':
-      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
-    default:
-      return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
-  }
-}
 </script>
--- a/src/platform/assets/components/AssetBrowserModal.stories.ts
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -70,7 +70,7 @@ export const Default: Story = {
      }
    },
    template: `
-      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 p-4">
        <AssetBrowserModal
          :node-type="nodeType"
          :input-name="inputName"
@@ -111,7 +111,7 @@ export const SingleAssetType: Story = {
      return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
    },
    template: `
-      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 p-4">
        <AssetBrowserModal
          :node-type="nodeType"
          :input-name="inputName"
@@ -154,7 +154,7 @@ export const NoLeftPanel: Story = {
      return { ...args, onAssetSelect, onClose, assets: mockAssets }
    },
    template: `
-      <div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
+      <div class="flex items-center justify-center min-h-screen bg-ash-800 p-4">
        <AssetBrowserModal
          :node-type="nodeType"
          :input-name="inputName"
--- a/src/platform/assets/components/AssetCard.stories.ts
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -32,8 +32,7 @@ const meta: Meta<typeof AssetCard> = {
  },
  decorators: [
    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900"><story /></div>'
+      template: '<div class="p-8 bg-base-background"><story /></div>'
    })
  ]
 }
@@ -48,8 +47,7 @@ export const Interactive: Story = {
  },
  decorators: [
    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-base-background max-w-96"><story /></div>'
    })
  ],
  parameters: {
@@ -69,8 +67,7 @@ export const NonInteractive: Story = {
  },
  decorators: [
    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-base-background max-w-96"><story /></div>'
    })
  ],
  parameters: {
@@ -92,8 +89,7 @@ export const WithPreviewImage: Story = {
  },
  decorators: [
    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-base-background max-w-96"><story /></div>'
    })
  ],
  parameters: {
@@ -114,8 +110,7 @@ export const FallbackGradient: Story = {
  },
  decorators: [
    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
+      template: '<div class="p-8 bg-base-background max-w-96"><story /></div>'
    })
  ],
  parameters: {
@@ -203,7 +198,7 @@ export const EdgeCases: Story = {
      return { edgeCases }
    },
    template: `
-      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-smoke-900">
+      <div class="grid grid-cols-4 gap-6 p-8 bg-base-background">
        <AssetCard
          v-for="asset in edgeCases"
          :key="asset.id"
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -40,19 +40,14 @@
          :class="
            cn(
              'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-ash-500',
-              'dark-theme:text-slate-100'
+              'text-muted-foreground'
            )
          "
        >
          {{ asset.description }}
        </p>
      </div>
-      <div
-        :class="
-          cn('flex gap-4 text-xs', 'text-stone-400', 'dark-theme:text-ash-300')
-        "
-      >
+      <div :class="cn('flex gap-4 text-xs text-muted-foreground')">
        <span v-if="asset.stats.stars" class="flex items-center gap-1">
          <i class="icon-[lucide--star] size-3" />
          {{ asset.stats.stars }}
@@ -101,23 +96,19 @@ const { error } = useImage({
 const shouldShowImage = computed(() => props.asset.preview_url && !error.value)

 const cardClasses = computed(() => {
-  const base = [
-    'rounded-xl',
-    'overflow-hidden',
-    'transition-all',
-    'duration-200'
-  ]
+  const base = cn(
+    'rounded-xl overflow-hidden transition-all duration-200 bg-modal-card-background'
+  )

  if (!props.interactive) {
-    return cn(...base, 'bg-smoke-100 dark-theme:bg-charcoal-800')
+    return base
  }

  return cn(
-    ...base,
+    base,
    'group',
    'appearance-none bg-transparent p-0 m-0',
    'font-inherit text-inherit outline-none cursor-pointer text-left',
-    'bg-smoke-100 dark-theme:bg-charcoal-800',
    'hover:bg-secondary-background',
    'border-none',
    'focus:outline-solid outline-azure-600 outline-4'
--- a/src/platform/assets/components/AssetFilterBar.stories.ts
+++ b/src/platform/assets/components/AssetFilterBar.stories.ts
@@ -26,11 +26,11 @@ const meta: Meta<typeof AssetFilterBar> = {
  decorators: [
    () => ({
      template: `
-        <div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
-          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-smoke-200 dark-theme:border-charcoal-600">
+        <div class="min-h-screen bg-base-background">
+          <div class="bg-base-background border-b border-border-default">
            <story />
          </div>
-          <div class="p-6 text-sm text-smoke-600 dark-theme:text-smoke-400">
+          <div class="p-6 text-sm text-muted-foreground">
            <p>Filter bar with proper chrome styling showing contextual background and borders.</p>
          </div>
        </div>
@@ -222,7 +222,7 @@ export const CategorySwitchingReactivity: Story = {
              'px-4 py-2 rounded border',
              selectedCategory === 'all'
                ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
+                : 'bg-secondary-background border-border-default'
            ]"
          >
            All (.safetensors + .pt, sd15 + sdxl)
@@ -233,7 +233,7 @@ export const CategorySwitchingReactivity: Story = {
              'px-4 py-2 rounded border',
              selectedCategory === 'checkpoints'
                ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
+                : 'bg-secondary-background border-border-default'
            ]"
          >
            Checkpoints (.safetensors, sd15 + sdxl)
@@ -244,7 +244,7 @@ export const CategorySwitchingReactivity: Story = {
              'px-4 py-2 rounded border',
              selectedCategory === 'loras'
                ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
+                : 'bg-secondary-background border-border-default'
            ]"
          >
            LoRAs (.pt, sd15 only)
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/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[]
--- a/src/platform/assets/components/Media3DTop.vue
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -1,14 +1,10 @@
 <template>
  <div class="relative size-full overflow-hidden rounded">
    <div
-      class="flex size-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background text-base-foreground"
    >
-      <i
-        class="icon-[lucide--box] text-3xl text-zinc-600 dark-theme:text-zinc-200"
-      />
-      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
-        $t('assetBrowser.media.threeDModelPlaceholder')
-      }}</span>
+      <i class="icon-[lucide--box] text-3xl" />
+      <span>{{ $t('assetBrowser.media.threeDModelPlaceholder') }}</span>
    </div>
  </div>
 </template>
--- a/src/platform/assets/components/MediaAssetButtonDivider.vue
+++ b/src/platform/assets/components/MediaAssetButtonDivider.vue
@@ -1,4 +1,3 @@
 <template>
-  <div class="h-[1px] bg-neutral-200 dark-theme:bg-neutral-700"></div>
+  <div class="h-px bg-border-default"></div>
 </template>
-<script setup lang="ts"></script>
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -25,7 +25,7 @@
        <!-- Loading State -->
        <template v-if="loading">
          <div
-            class="h-full w-full animate-pulse rounded-lg bg-zinc-200 dark-theme:bg-zinc-700"
+            class="size-full animate-pulse rounded-lg bg-modal-card-button-surface"
          />
        </template>

@@ -109,10 +109,10 @@
        <template v-if="loading">
          <div class="flex flex-col items-center justify-between gap-1">
            <div
-              class="h-4 w-2/3 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+              class="h-4 w-2/3 animate-pulse rounded bg-modal-card-background"
            />
            <div
-              class="h-3 w-1/2 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
+              class="h-3 w-1/2 animate-pulse rounded bg-modal-card-background"
            />
          </div>
        </template>
@@ -250,8 +250,8 @@ const containerClasses = computed(() =>
  cn(
    'gap-1 select-none',
    selected
-      ? 'border-3 border-zinc-900 dark-theme:border-white bg-zinc-200 dark-theme:bg-zinc-700'
-      : 'hover:bg-zinc-100 dark-theme:hover:bg-zinc-800'
+      ? 'border-3 border-base-foreground bg-modal-card-background'
+      : 'hover:bg-modal-card-background/70'
  )
 )

--- a/src/platform/assets/components/MediaAudioTop.vue
+++ b/src/platform/assets/components/MediaAudioTop.vue
@@ -1,14 +1,10 @@
 <template>
  <div class="relative size-full overflow-hidden rounded">
    <div
-      class="flex size-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background text-base-foreground"
    >
-      <i
-        class="icon-[lucide--music] text-3xl text-zinc-600 dark-theme:text-zinc-200"
-      />
-      <span class="text-zinc-600 dark-theme:text-zinc-200">{{
-        $t('assetBrowser.media.audioPlaceholder')
-      }}</span>
+      <i class="icon-[lucide--music] text-3xl" />
+      <span>{{ $t('assetBrowser.media.audioPlaceholder') }}</span>
    </div>
    <audio
      controls
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="relative size-full overflow-hidden rounded bg-zinc-200 dark-theme:bg-zinc-700/50"
+    class="relative size-full overflow-hidden rounded bg-modal-card-placeholder-background"
  >
    <img
      v-if="!error"
@@ -10,7 +10,7 @@
    />
    <div
      v-else
-      class="flex size-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
+      class="flex size-full items-center justify-center bg-modal-card-placeholder-background"
    >
      <i class="pi pi-image text-3xl text-smoke-400" />
    </div>