From 3eb036b5e3f0c38a537dfa6adec1a38e7686f56f Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 10 Mar 2025 06:57:19 -0700
Subject: [PATCH] Fix dark mode card surface in workflow templates dialog
 (#2942)

---
 .../content/manager/packCard/PackCard.vue     | 10 +----
 .../templates/TemplateWorkflowCard.vue        |  2 +-
 tailwind.config.js                            | 37 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 5fcb277775..411e0415cd 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -1,8 +1,7 @@
 <template>
   <Card
-    class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-[0_0_15px_rgba(0,0,0,0.15),0_10px_15px_-3px_rgba(0,0,0,0.12),0_4px_6px_-4px_rgba(0,0,0,0.08)] transition-all duration-200"
+    class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-elevation-4 dark-theme:bg-dark-elevation-1 transition-all duration-200"
     :class="{
-      'bg-[#ffffff08]': !isLightTheme,
       'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
     }"
     :pt="{
@@ -89,12 +88,10 @@
 
 <script setup lang="ts">
 import Card from 'primevue/card'
-import { computed } from 'vue'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackInstallButton from '@/components/dialog/content/manager/PackInstallButton.vue'
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import type { components } from '@/types/comfyRegistryTypes'
 import { formatNumber } from '@/utils/formatUtil'
 
@@ -102,9 +99,4 @@ defineProps<{
   nodePack: components['schemas']['Node']
   isSelected?: boolean
 }>()
-
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
-)
 </script>
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 7aa229a48b..f05050a48e 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -2,7 +2,7 @@
   <Card
     ref="cardRef"
     :data-testid="`template-workflow-${template.name}`"
-    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-4px_rgba(0,0,0,0.05)]"
+    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1"
     :pt="{
       body: { class: 'p-0' }
     }"
diff --git a/tailwind.config.js b/tailwind.config.js
index 36cd991324..ad0b42818f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -179,9 +179,44 @@ export default {
       textColor: {
         muted: 'var(--p-text-muted-color)',
         highlight: 'var(--p-primary-color)'
+      },
+
+      /**
+       * Box shadows for different elevation levels
+       * https://m3.material.io/styles/elevation/overview
+       */
+      boxShadow: {
+        'elevation-0': 'none',
+        'elevation-1':
+          '0 0 2px 0px rgb(0 0 0 / 0.01), 0 1px 2px -1px rgb(0 0 0 / 0.03), 0 1px 1px -1px rgb(0 0 0 / 0.01)',
+        'elevation-2':
+          '0 0 10px 0px rgb(0 0 0 / 0.06), 0 6px 8px -2px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04)',
+        'elevation-3':
+          '0 0 15px 0px rgb(0 0 0 / 0.10), 0 8px 12px -3px rgb(0 0 0 / 0.09), 0 3px 5px -4px rgb(0 0 0 / 0.06)',
+        'elevation-4':
+          '0 0 18px 0px rgb(0 0 0 / 0.12), 0 10px 15px -3px rgb(0 0 0 / 0.11), 0 4px 6px -4px rgb(0 0 0 / 0.08)',
+        'elevation-5':
+          '0 0 20px 0px rgb(0 0 0 / 0.14), 0 12px 16px -4px rgb(0 0 0 / 0.13), 0 5px 7px -5px rgb(0 0 0 / 0.10)'
+      },
+
+      /**
+       * Background colors for different elevation levels
+       * https://m3.material.io/styles/elevation/overview
+       */
+      backgroundColor: {
+        'dark-elevation-0': 'rgba(255, 255, 255, 0)',
+        'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
+        'dark-elevation-2': 'rgba(255, 255, 255, 0.03)',
+        'dark-elevation-3': 'rgba(255, 255, 255, 0.04)',
+        'dark-elevation-4': 'rgba(255, 255, 255, 0.08)',
+        'dark-elevation-5': 'rgba(255, 255, 255, 0.12)'
       }
     }
   },
 
-  plugins: []
+  plugins: [
+    function ({ addVariant }) {
+      addVariant('dark-theme', '.dark-theme &')
+    }
+  ]
 }