From bef5844056bb3d599e07a50e8406972011e5cabc Mon Sep 17 00:00:00 2001
From: Mona Aghili <28711325+MonaAghili@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:41:39 +0330
Subject: [PATCH 1/2] Chore: Modify card and overlay components styles

---
 priv/templates/components/card.eex    | 112 +++++++++++++-------------
 priv/templates/components/overlay.eex |  34 ++++----
 2 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/priv/templates/components/card.eex b/priv/templates/components/card.eex
index aa66115d..1f6d8aea 100644
--- a/priv/templates/components/card.eex
+++ b/priv/templates/components/card.eex
@@ -144,7 +144,7 @@ defmodule <%= @module %> do
     <div
       id={@id}
       class={[
-        "overflow-hidden",
+        "overflow-hidden [&:has(.overlay)]:relative [&:has(.overlay)]:overlayed-card",
         space_class(@space),
         border_class(@border, @variant),
         color_variant(@variant, @color),
@@ -304,7 +304,7 @@ defmodule <%= @module %> do
     default: nil,
     doc: "A unique identifier is used to manage state and interaction"
 
-  attr :space, :string, values: @sizes, default: "extra_small", doc: "Space between items"
+  attr :space, :string, default: nil, doc: "Space between items"
 
   attr :padding, :string,
     values: @sizes ++ ["none"],
@@ -531,84 +531,84 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "white" in @color do %>
   defp color_variant("default", "white") do
      [
-      "bg-white text-black"
+      "[&:not(:has(.overlay))]:bg-white text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "dark" in @color do %>
   defp color_variant("default", "dark") do
      [
-      "bg-[#282828] text-white"
+      "[&:not(:has(.overlay))]:bg-[#282828] text-white"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "natural" in @color do %>
   defp color_variant("default", "natural") do
      [
-      "bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#4B4B4B] text-white dark:[&:not(:has(.overlay))]:bg-[#DDDDDD] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "primary" in @color do %>
   defp color_variant("default", "primary") do
     [
-      "bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#007F8C] text-white dark:[&:not(:has(.overlay))]:bg-[#01B8CA] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "secondary" in @color do %>
   defp color_variant("default", "secondary") do
     [
-      "bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#266EF1] text-white dark:[&:not(:has(.overlay))]:bg-[#6DAAFB] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "success" in @color do %>
   defp color_variant("default", "success") do
     [
-      "bg-[#0E8345] text-white dark:bg-[#06C167] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#0E8345] text-white dark:[&:not(:has(.overlay))]:bg-[#06C167] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "warning" in @color do %>
   defp color_variant("default", "warning") do
     [
-      "bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#CA8D01] text-white dark:[&:not(:has(.overlay))]:bg-[#FDC034] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "danger" in @color do %>
   defp color_variant("default", "danger") do
     [
-      "bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#DE1135] text-white dark:[&:not(:has(.overlay))]:bg-[#FC7F79] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "info" in @color do %>
   defp color_variant("default", "info") do
     [
-      "bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#0B84BA] text-white dark:[&:not(:has(.overlay))]:bg-[#3EB7ED] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "misc" in @color do %>
   defp color_variant("default", "misc") do
     [
-      "bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#8750C5] text-white dark:[&:not(:has(.overlay))]:bg-[#BA83F9] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "dawn" in @color do %>
   defp color_variant("default", "dawn") do
     [
-      "bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#A86438] text-white dark:[&:not(:has(.overlay))]:bg-[#DB976B] dark:text-black"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "silver" in @color do %>
   defp color_variant("default", "silver") do
      [
-      "bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black"
+      "[&:not(:has(.overlay))]:bg-[#868686] text-white dark:[&:not(:has(.overlay))]:bg-[#A6A6A6] dark:text-black"
     ]
   end
   <% end %>
@@ -689,7 +689,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "natural" in @color do %>
   defp color_variant("shadow", "natural") do
     [
-      "bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#4B4B4B] text-white dark:[&:not(:has(.overlay))]:bg-[#DDDDDD] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none"
     ]
   end
@@ -697,7 +697,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "primary" in @color do %>
   defp color_variant("shadow", "primary") do
     [
-      "bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#007F8C] text-white dark:[&:not(:has(.overlay))]:bg-[#01B8CA] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(0,149,164,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,149,164,0.5)] dark:shadow-none"
     ]
   end
@@ -705,7 +705,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "secondary" in @color do %>
   defp color_variant("shadow", "secondary") do
     [
-      "bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#266EF1] text-white dark:[&:not(:has(.overlay))]:bg-[#6DAAFB] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(6,139,238,0.5)] shadow-[0px_10px_15px_-3px_rgba(6,139,238,0.5)] dark:shadow-none"
     ]
   end
@@ -713,7 +713,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "success" in @color do %>
   defp color_variant("shadow", "success") do
     [
-      "bg-[#0E8345] text-white hover:bg-[#166C3B] dark:bg-[#06C167] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#0E8345] text-white hover:[&:not(:has(.overlay))]:bg-[#166C3B] dark:[&:not(:has(.overlay))]:bg-[#06C167] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(0,154,81,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,154,81,0.5)] dark:shadow-none"
     ]
   end
@@ -721,7 +721,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "warning" in @color do %>
   defp color_variant("shadow", "warning") do
      [
-      "bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#CA8D01] text-white dark:[&:not(:has(.overlay))]:bg-[#FDC034] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(252,176,1,0.5)] shadow-[0px_10px_15px_-3px_rgba(252,176,1,0.5)] dark:shadow-none"
     ]
   end
@@ -729,7 +729,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "danger" in @color do %>
   defp color_variant("shadow", "danger") do
     [
-      "bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#DE1135] text-white dark:[&:not(:has(.overlay))]:bg-[#FC7F79] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(248,52,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(248,52,70,0.5)] dark:shadow-none"
     ]
   end
@@ -737,7 +737,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "info" in @color do %>
   defp color_variant("shadow", "info") do
     [
-      "bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#0B84BA] text-white dark:[&:not(:has(.overlay))]:bg-[#3EB7ED] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(14,165,233,0.5)] shadow-[0px_10px_15px_-3px_rgba(14,165,233,0.5)] dark:shadow-none"
     ]
   end
@@ -745,7 +745,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "misc" in @color do %>
   defp color_variant("shadow", "misc") do
     [
-      "bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#8750C5] text-white dark:[&:not(:has(.overlay))]:bg-[#BA83F9] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(169,100,247,0.5)] shadow-[0px_10px_15px_-3px_rgba(169,100,247,0.5)] dark:shadow-none"
     ]
   end
@@ -753,7 +753,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "dawn" in @color do %>
   defp color_variant("shadow", "dawn") do
     [
-      "bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#A86438] text-white dark:[&:not(:has(.overlay))]:bg-[#DB976B] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(210,125,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(210,125,70,0.5)] dark:shadow-none"
     ]
   end
@@ -761,7 +761,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "silver" in @color do %>
   defp color_variant("shadow", "silver") do
     [
-      "bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black",
+      "[&:not(:has(.overlay))]:bg-[#868686] text-white dark:[&:not(:has(.overlay))]:bg-[#A6A6A6] dark:text-black",
       "shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none"
     ]
   end
@@ -771,94 +771,94 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "white" in @color do %>
   defp color_variant("bordered", "white") do
     [
-      "bg-white text-black border-[#DDDDDD]"
+      "[&:not(:has(.overlay))]:bg-white text-black border-[#DDDDDD]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "dark" in @color do %>
   defp color_variant("bordered", "dark") do
     [
-      "bg-[#282828] text-white border-[#727272]"
+      "[&:not(:has(.overlay))]:bg-[#282828] text-white border-[#727272]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "natural" in @color do %>
   defp color_variant("bordered", "natural") do
     [
-      "text-[#282828] border-[#282828] bg-[#F3F3F3]",
-      "dark:text-[#E8E8E8] dark:border-[#E8E8E8] dark:bg-[#4B4B4B]"
+      "text-[#282828] border-[#282828] [&:not(:has(.overlay))]:bg-[#F3F3F3]",
+      "dark:text-[#E8E8E8] dark:border-[#E8E8E8] dark:[&:not(:has(.overlay))]:bg-[#4B4B4B]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "primary" in @color do %>
   defp color_variant("bordered", "primary") do
     [
-      "text-[#016974] border-[#016974] bg-[#E2F8FB]",
-      "dark:text-[#77D5E3] dark:border-[#77D5E3] dark:bg-[#002D33]"
+      "text-[#016974] border-[#016974] [&:not(:has(.overlay))]:bg-[#E2F8FB]",
+      "dark:text-[#77D5E3] dark:border-[#77D5E3] dark:[&:not(:has(.overlay))]:bg-[#002D33]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "secondary" in @color do %>
   defp color_variant("bordered", "secondary") do
     [
-      "text-[#175BCC] border-[#175BCC] bg-[#EFF4FE]",
-      "dark:text-[#A9C9FF] dark:border-[#A9C9FF] dark:bg-[#002661]"
+      "text-[#175BCC] border-[#175BCC] [&:not(:has(.overlay))]:bg-[#EFF4FE]",
+      "dark:text-[#A9C9FF] dark:border-[#A9C9FF] dark:[&:not(:has(.overlay))]:bg-[#002661]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "success" in @color do %>
   defp color_variant("bordered", "success") do
     [
-      "text-[#166C3B] border-[#166C3B] bg-[#EAF6ED]",
-      "dark:text-[#7FD99A] dark:border-[#7FD99A] dark:bg-[#002F14]"
+      "text-[#166C3B] border-[#166C3B] [&:not(:has(.overlay))]:bg-[#EAF6ED]",
+      "dark:text-[#7FD99A] dark:border-[#7FD99A] dark:[&:not(:has(.overlay))]:bg-[#002F14]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "warning" in @color do %>
   defp color_variant("bordered", "warning") do
     [
-      "text-[#976A01] border-[#976A01] bg-[#FFF7E6]",
-      "dark:text-[#FDD067] dark:border-[#FDD067] dark:bg-[#322300]"
+      "text-[#976A01] border-[#976A01] [&:not(:has(.overlay))]:bg-[#FFF7E6]",
+      "dark:text-[#FDD067] dark:border-[#FDD067] dark:[&:not(:has(.overlay))]:bg-[#322300]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "danger" in @color do %>
   defp color_variant("bordered", "danger") do
     [
-      "text-[#BB032A] border-[#BB032A] bg-[#FFF0EE]",
-      "dark:text-[#FFB2AB] dark:border-[#FFB2AB] dark:bg-[#520810]"
+      "text-[#BB032A] border-[#BB032A] [&:not(:has(.overlay))]:bg-[#FFF0EE]",
+      "dark:text-[#FFB2AB] dark:border-[#FFB2AB] dark:[&:not(:has(.overlay))]:bg-[#520810]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "info" in @color do %>
   defp color_variant("bordered", "info") do
     [
-      "text-[#0B84BA] border-[#0B84BA] bg-[#E7F6FD]",
-      "dark:text-[#6EC9F2] dark:border-[#6EC9F2] dark:bg-[#03212F]"
+      "text-[#0B84BA] border-[#0B84BA] [&:not(:has(.overlay))]:bg-[#E7F6FD]",
+      "dark:text-[#6EC9F2] dark:border-[#6EC9F2] dark:[&:not(:has(.overlay))]:bg-[#03212F]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "misc" in @color do %>
   defp color_variant("bordered", "misc") do
     [
-      "text-[#653C94] border-[#653C94] bg-[#F6F0FE]",
-      "dark:text-[#CBA2FA] dark:border-[#CBA2FA] dark:bg-[#221431]"
+      "text-[#653C94] border-[#653C94] [&:not(:has(.overlay))]:bg-[#F6F0FE]",
+      "dark:text-[#CBA2FA] dark:border-[#CBA2FA] dark:[&:not(:has(.overlay))]:bg-[#221431]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "dawn" in @color do %>
   defp color_variant("bordered", "dawn") do
     [
-      "text-[#7E4B2A] border-[#7E4B2A] bg-[#FBF2ED]",
-      "dark:text-[#E4B190] dark:border-[#E4B190] dark:bg-[#2A190E]"
+      "text-[#7E4B2A] border-[#7E4B2A] [&:not(:has(.overlay))]:bg-[#FBF2ED]",
+      "dark:text-[#E4B190] dark:border-[#E4B190] dark:[&:not(:has(.overlay))]:bg-[#2A190E]"
     ]
   end
   <% end %>
   <%= if is_nil(@color) or "silver" in @color do %>
   defp color_variant("bordered", "silver") do
     [
-      "text-[#727272] border-[#727272] bg-[#F3F3F3]",
-      "dark:text-[#BBBBBB] dark:border-[#BBBBBB] dark:bg-[#4B4B4B]"
+      "text-[#727272] border-[#727272] [&:not(:has(.overlay))]:bg-[#F3F3F3]",
+      "dark:text-[#BBBBBB] dark:border-[#BBBBBB] dark:[&:not(:has(.overlay))]:bg-[#4B4B4B]"
     ]
   end
   <% end %>
@@ -939,7 +939,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "natural" in @color do %>
   defp color_variant("gradient", "natural") do
     [
-      "bg-gradient-to-br from-[#282828] to-[#727272] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#282828] to-[#727272] text-white",
       "dark:from-[#A6A6A6] dark:to-[#FFFFFF] dark:text-black"
     ]
   end
@@ -947,7 +947,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "primary" in @color do %>
   defp color_variant("gradient", "primary") do
     [
-      "bg-gradient-to-br from-[#016974] to-[#01B8CA] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#016974] to-[#01B8CA] text-white",
       "dark:from-[#01B8CA] dark:to-[#B0E7EF] dark:text-black"
     ]
   end
@@ -955,7 +955,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "secondary" in @color do %>
   defp color_variant("gradient", "secondary") do
     [
-      "bg-gradient-to-br from-[#175BCC] to-[#6DAAFB] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#175BCC] to-[#6DAAFB] text-white",
       "dark:from-[#6DAAFB] dark:to-[#CDDEFF] dark:text-black"
     ]
   end
@@ -963,7 +963,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "success" in @color do %>
   defp color_variant("gradient", "success") do
     [
-      "bg-gradient-to-br from-[#166C3B] to-[#06C167] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#166C3B] to-[#06C167] text-white",
       "dark:from-[#06C167] dark:to-[#B1EAC2] dark:text-black"
     ]
   end
@@ -971,7 +971,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "warning" in @color do %>
   defp color_variant("gradient", "warning") do
     [
-      "bg-gradient-to-br from-[#976A01] to-[#FDC034] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#976A01] to-[#FDC034] text-white",
       "dark:from-[#FDC034] dark:to-[#FEDF99] dark:text-black"
     ]
   end
@@ -979,7 +979,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "danger" in @color do %>
   defp color_variant("gradient", "danger") do
     [
-      "bg-gradient-to-br from-[#BB032A] to-[#FC7F79] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#BB032A] to-[#FC7F79] text-white",
       "dark:from-[#FC7F79] dark:to-[#FFD2CD] dark:text-black"
     ]
   end
@@ -987,7 +987,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "info" in @color do %>
   defp color_variant("gradient", "info") do
     [
-      "bg-gradient-to-br from-[#08638C] to-[#3EB7ED] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#08638C] to-[#3EB7ED] text-white",
       "dark:from-[#3EB7ED] dark:to-[#9FDBF6] dark:text-black"
     ]
   end
@@ -995,7 +995,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "misc" in @color do %>
   defp color_variant("gradient", "misc") do
    [
-      "bg-gradient-to-br from-[#653C94] to-[#BA83F9] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#653C94] to-[#BA83F9] text-white",
       "dark:from-[#BA83F9] dark:to-[#DDC1FC] dark:text-black"
     ]
   end
@@ -1003,7 +1003,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "dawn" in @color do %>
   defp color_variant("gradient", "dawn") do
     [
-      "bg-gradient-to-br from-[#7E4B2A] to-[#DB976B] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#7E4B2A] to-[#DB976B] text-white",
       "dark:from-[#DB976B] dark:to-[#EDCBB5] dark:text-black"
     ]
   end
@@ -1011,7 +1011,7 @@ defmodule <%= @module %> do
   <%= if is_nil(@color) or "silver" in @color do %>
   defp color_variant("gradient", "silver") do
     [
-      "bg-gradient-to-br from-[#5E5E5E] to-[#A6A6A6] text-white",
+      "[&:not(:has(.overlay))]:bg-gradient-to-br from-[#5E5E5E] to-[#A6A6A6] text-white",
       "dark:from-[#868686] dark:to-[#BBBBBB] dark:text-black"
     ]
   end
diff --git a/priv/templates/components/overlay.eex b/priv/templates/components/overlay.eex
index bc7c62f6..270363f2 100644
--- a/priv/templates/components/overlay.eex
+++ b/priv/templates/components/overlay.eex
@@ -3,10 +3,10 @@ defmodule <%= @module %> do
   The `<%= @module %>` module provides a versatile overlay component for
   Phoenix LiveView applications, allowing developers to create layered content effects.
   It supports various customization options, including color themes, opacity levels,
-  and blur effects, which enable the creation of visually engaging overlays.
+  and backdrop effects, which enable the creation of visually engaging overlays.
 
   This component is designed to be highly adaptable, offering predefined color themes,
-  opacity variations, and blur sizes to match the needs of different interface designs.
+  opacity variations, and backdrop sizes to match the needs of different interface designs.
   The `<%= @module %>` is perfect for creating modal backgrounds, loading screens,
   and other interactive elements that require content layering.
   """
@@ -42,7 +42,7 @@ defmodule <%= @module %> do
   ]
 
   @doc """
-  Renders an `overlay` element with customizable color, opacity, and blur options.
+  Renders an `overlay` element with customizable color, opacity, and backdrop options.
 
   The overlay can be used to create various visual effects such as loading screens or background dimming.
 
@@ -66,7 +66,7 @@ defmodule <%= @module %> do
 
   attr :color, :string, values: @colors, default: "natural", doc: "Determines color theme"
   attr :opacity, :string, values: @opacities ++ [nil], default: nil, doc: ""
-  attr :blur, :string, values: @sizes ++ ["none", nil], default: nil, doc: ""
+  attr :backdrop, :string, values: @sizes ++ ["none", nil], default: nil, doc: ""
   attr :class, :string, default: nil, doc: "Custom CSS class for additional styling"
 
   attr :rest, :global,
@@ -84,7 +84,7 @@ defmodule <%= @module %> do
         "absolute inset-0 z-50",
         color_class(@color),
         opacity_class(@opacity),
-        blur_class(@blur),
+        backdrop_class(@backdrop),
         @class
       ]}
       {@rest}
@@ -201,31 +201,31 @@ defmodule <%= @module %> do
   defp opacity_class(_), do: nil
 
   <%= if is_nil(@size) or "extra_small" in @size do %>
-  defp blur_class("extra_small") do
-    "backdrop-blur-[1px]"
+  defp backdrop_class("extra_small") do
+    "backdrop-backdrop-[1px]"
   end
   <% end %>
   <%= if is_nil(@size) or "small" in @size do %>
-  defp blur_class("small") do
-    "backdrop-blur-[2px]"
+  defp backdrop_class("small") do
+    "backdrop-backdrop-[2px]"
   end
   <% end %>
   <%= if is_nil(@size) or "medium" in @size do %>
-  defp blur_class("medium") do
-    "backdrop-blur-[3px]"
+  defp backdrop_class("medium") do
+    "backdrop-backdrop-[3px]"
   end
   <% end %>
   <%= if is_nil(@size) or "large" in @size do %>
-  defp blur_class("large") do
-    "backdrop-blur-[4px]"
+  defp backdrop_class("large") do
+    "backdrop-backdrop-[4px]"
   end
   <% end %>
   <%= if is_nil(@size) or "extra_large" in @size do %>
-  defp blur_class("extra_large") do
-    "backdrop-blur-[5px]"
+  defp backdrop_class("extra_large") do
+    "backdrop-backdrop-[5px]"
   end
   <% end %>
 
-  defp blur_class(params) when is_binary(params), do: params
-  defp blur_class(_), do: nil
+  defp backdrop_class(params) when is_binary(params), do: params
+  defp backdrop_class(_), do: nil
 end

From f800a9bb9d90be0df6244c98774e676325f72955 Mon Sep 17 00:00:00 2001
From: Mona Aghili <28711325+MonaAghili@users.noreply.github.com>
Date: Sun, 22 Dec 2024 21:50:12 +0330
Subject: [PATCH 2/2] Fix issues

---
 priv/templates/components/card.eex    | 4 ++--
 priv/templates/components/overlay.eex | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/priv/templates/components/card.eex b/priv/templates/components/card.eex
index 1f6d8aea..3ab8d209 100644
--- a/priv/templates/components/card.eex
+++ b/priv/templates/components/card.eex
@@ -144,7 +144,7 @@ defmodule <%= @module %> do
     <div
       id={@id}
       class={[
-        "overflow-hidden [&:has(.overlay)]:relative [&:has(.overlay)]:overlayed-card",
+        "overflow-hidden [&:has(.overlay)]:relative",
         space_class(@space),
         border_class(@border, @variant),
         color_variant(@variant, @color),
@@ -267,7 +267,7 @@ defmodule <%= @module %> do
 
   def card_media(assigns) do
     ~H"""
-    <div id={@id}>
+    <div id={@id} class="card-media">
       <img
         src={@src}
         alt={@alt}
diff --git a/priv/templates/components/overlay.eex b/priv/templates/components/overlay.eex
index 270363f2..84484a0e 100644
--- a/priv/templates/components/overlay.eex
+++ b/priv/templates/components/overlay.eex
@@ -81,7 +81,7 @@ defmodule <%= @module %> do
     <div
       id={@id}
       class={[
-        "absolute inset-0 z-50",
+        "overlay absolute inset-0 z-50",
         color_class(@color),
         opacity_class(@opacity),
         backdrop_class(@backdrop),