feat(ui): add inner glow effect to glass surfaces

itsjavi · Sep 2, 2024 · f8cd91f · f8cd91f
1 parent 54de3a7
commit f8cd91f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/src/components/recipes.ts b/src/components/recipes.ts
@@ -1,6 +1,7 @@
 export const recipeStyles = {
   glassBorder: ["border-gray-200/60 dark:border-gray-700/60"],
-  glassBg: ["bg-white/70 dark:bg-gray-950/60"],
+  glassBg: ["bg-white/60 dark:bg-gray-950/60"],
+  glassInnerShadow: ["shadow-inset-white", "dark:shadow-inset-gray"],
 };
 
 export const glassContainerClasses = [

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
@@ -6,7 +6,7 @@ import * as React from "react";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { type VariantProps, cva } from "class-variance-authority";
-import { blurVariant, glassContainerClasses } from "../recipes";
+import { blurVariant, glassContainerClasses, recipeStyles } from "../recipes";
 
 const twStyles = {
   overlay: [
@@ -66,17 +66,25 @@ const alertDialogContentVariants = cva(cn(twStyles.content), {
 
 export interface AlertDialogProps
   extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
-    VariantProps<typeof alertDialogContentVariants> {}
+    VariantProps<typeof alertDialogContentVariants> {
+  innerGlow?: boolean;
+}
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   AlertDialogProps
->(({ className, blur, variant, ...props }, ref) => (
+>(({ className, blur, variant, innerGlow, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
-      className={cn(alertDialogContentVariants({ blur, variant }), className)}
+      className={cn(
+        alertDialogContentVariants({ blur, variant }),
+        {
+          [recipeStyles.glassInnerShadow.join(" ")]: innerGlow,
+        },
+        className,
+      )}
       {...props}
     />
   </AlertDialogPortal>

diff --git a/src/lib/create-preset.ts b/src/lib/create-preset.ts
@@ -62,6 +62,11 @@ export const createTailwindPreset = ({
           md: "calc(var(--radius) - 2px)",
           sm: "calc(var(--radius) - 4px)",
         },
+        boxShadow: {
+          "inset-white": "inset 0 0 12px rgba(255,255,255,0.80)",
+          "inset-gray": "inset 0 0 12px rgba(127,127,127,0.08)",
+          "inset-black": "inset 0 0 12px rgba(0,0,0,0.80)",
+        },
         keyframes: {
           "accordion-down": {
             from: {

diff --git a/stories/alert-dialog.stories.tsx b/stories/alert-dialog.stories.tsx
@@ -15,6 +15,9 @@ const meta: Meta<typeof AlertDialogContent> = {
       control: "select",
       options: ["default", "sm", "md", "lg", "xl", "2xl", "3xl"],
     },
+    innerGlow: {
+      control: "boolean",
+    },
   },
   args: {
     variant: "glass",