chore: allow for group-hover in dynamic TW theming

ably · Sep 24, 2024 · 7b98b73 · 7b98b73
1 parent 57ce625
commit 7b98b73
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 33 deletions.
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
@@ -45,10 +45,10 @@ const PricingCards = ({
           <Fragment key={title.content}>
             {delimiterColumn(index)}
             <div
-              className={`relative border ${t("border-neutral-1100")} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter ? "@[520px]:flex-row @[920px]:flex-col" : ""} min-w-[272px]`}
+              className={`relative border ${t("border-neutral-1100")} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter ? "@[520px]:flex-row @[920px]:flex-col" : ""} min-w-[272px] overflow-hidden`}
             >
               <div
-                className={`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${t("bg-neutral-1300")} ${cta ? `${t("group-hover:bg-neutral-1200")} ` : ""} transition-[colors,opacity] opacity-25 group-hover:opacity-100`}
+                className={`absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl ${t("bg-neutral-1300")} ${cta ? `${t("group-hover:bg-neutral-1200")} group-hover:opacity-100` : ""} transition-[colors,opacity] opacity-25 blur-md`}
               ></div>
               <div
                 className={`relative z-10 flex flex-col gap-24 ${delimiter ? "@[520px]:flex-1 @[920px}:flex-none" : ""}`}

diff --git a/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap b/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
@@ -4,8 +4,8 @@ exports[`Features/Pricing Cards ConsumptionDarkMode smoke-test 1`] = `
 <div class="bg-gradient-to-r from-blue-500 to-pink-500 p-32">
   <div class="@container flex justify-center">
     <div class="flex flex-col items-center @[920px]:flex-row gap-8">
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -99,8 +99,8 @@ exports[`Features/Pricing Cards ConsumptionDarkMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -194,8 +194,8 @@ exports[`Features/Pricing Cards ConsumptionDarkMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -290,8 +290,8 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
 <div class=" p-32">
   <div class="@container flex justify-center">
     <div class="flex flex-col items-center @[920px]:flex-row gap-8">
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -385,8 +385,8 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -480,8 +480,8 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px}:flex-none">
           <div>
@@ -576,8 +576,8 @@ exports[`Features/Pricing Cards PlansDarkMode smoke-test 1`] = `
 <div class="bg-gradient-to-r from-blue-500 to-pink-500 p-32">
   <div class="@container flex justify-center">
     <div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -676,8 +676,8 @@ exports[`Features/Pricing Cards PlansDarkMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -789,8 +789,8 @@ exports[`Features/Pricing Cards PlansDarkMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -913,8 +913,8 @@ exports[`Features/Pricing Cards PlansDarkMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-1300 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1060,8 +1060,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
 <div class=" p-32">
   <div class="@container flex justify-center">
     <div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1160,8 +1160,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1273,8 +1273,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1397,8 +1397,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px]">
-        <div class="absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200  transition-[colors,opacity] opacity-25 group-hover:opacity-100">
+      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25 blur-md">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>

diff --git a/src/core/styles/colors/utils.ts b/src/core/styles/colors/utils.ts
@@ -26,8 +26,10 @@ export const determineThemeColor = (
   } else {
     const splitColor = color.split("-");
 
-    if (splitColor.length === 3) {
-      const [property, palette, variant] = splitColor;
+    if (splitColor.length >= 3) {
+      const property = splitColor.slice(0, splitColor.length - 2).join("-");
+      const palette = splitColor[splitColor.length - 2];
+      const variant = splitColor[splitColor.length - 1];
 
       const paletteColors = Object.keys(colorNames).includes(palette)
         ? colorNames[palette as keyof typeof colorNames]

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
     {
       pattern:
         /^(text|bg|from|to)-(neutral|orange|yellow|green|blue|violet|pink)-[\d]{1,2}00.*/,
-      variants: ["hover", "focus"],
+      variants: ["hover", "focus", "group-hover"],
     },
   ],
   theme: {