From 2acb2ac181ceee2c263534ff9df416357b90f3e5 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 20 May 2025 11:13:12 -0700
Subject: [PATCH] [Style] Increase template card elevation in dark mode (#3946)

---
 src/components/templates/TemplateWorkflowCard.vue | 2 +-
 tailwind.config.js                                | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index cdc569fdc..e1ce70ba1 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-elevation-2 dark-theme:bg-dark-elevation-1 h-full"
+    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
     :pt="{
       body: { class: 'p-0 h-full flex flex-col' }
     }"
diff --git a/tailwind.config.js b/tailwind.config.js
index dc2a69710..598163bb6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -189,6 +189,8 @@ export default {
         '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-1.5':
+          '0 0 2px 0px rgb(0 0 0 / 0.025), 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':
@@ -206,10 +208,11 @@ export default {
       backgroundColor: {
         'dark-elevation-0': 'rgba(255, 255, 255, 0)',
         'dark-elevation-1': 'rgba(255, 255, 255, 0.01)',
+        'dark-elevation-1.5': 'rgba(255, 255, 255, 0.015)',
         '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)'
+        'dark-elevation-5': 'rgba(2 55, 255, 255, 0.12)'
       }
     }
   },