diff --git a/src/components/recipes.ts b/src/components/recipes.ts index 78aa408..b4e8b35 100644 --- 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 index 9e6b19a..8cf078e 100644 --- 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, - VariantProps {} + VariantProps { + innerGlow?: boolean; +} const AlertDialogContent = React.forwardRef< React.ElementRef, AlertDialogProps ->(({ className, blur, variant, ...props }, ref) => ( +>(({ className, blur, variant, innerGlow, ...props }, ref) => ( diff --git a/src/lib/create-preset.ts b/src/lib/create-preset.ts index 2212ec5..6271f00 100644 --- 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 index f700adc..d78aab7 100644 --- a/stories/alert-dialog.stories.tsx +++ b/stories/alert-dialog.stories.tsx @@ -15,6 +15,9 @@ const meta: Meta = { control: "select", options: ["default", "sm", "md", "lg", "xl", "2xl", "3xl"], }, + innerGlow: { + control: "boolean", + }, }, args: { variant: "glass",