diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx index 432248b..50a9b44 100644 --- a/app/(dashboard)/dashboard/page.tsx +++ b/app/(dashboard)/dashboard/page.tsx @@ -23,7 +23,7 @@ export default function DashboardPage() {
diff --git a/app/globals.css b/app/globals.css index 1b1e990..49159cf 100644 --- a/app/globals.css +++ b/app/globals.css @@ -46,6 +46,8 @@ --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); + --shadow-card: var(--card-shadow); + --shadow-card-hover: var(--card-shadow-hover); } :root { @@ -82,8 +84,9 @@ --sidebar-accent-foreground: oklch(0.36 0.1 46.65); --sidebar-border: oklch(0.94 0 0); --sidebar-ring: oklch(0.701 0.189 46.65); - --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 2px 8px -1px rgba(0, 0, 0, 0.04); - --shadow-card-hover: 0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 6px 20px -4px rgba(0, 0, 0, 0.08); + --card-shadow: 0 1px 3px 0 rgba(30, 40, 55, 0.04), 0 4px 12px -2px rgba(30, 40, 55, 0.06); + --card-shadow-hover: + 0 4px 16px -2px rgba(30, 40, 55, 0.07), 0 8px 24px -4px rgba(30, 40, 55, 0.09); } .dark { @@ -119,8 +122,8 @@ --sidebar-accent-foreground: oklch(0.98 0.01 46.65); --sidebar-border: oklch(0.23 0 0); --sidebar-ring: oklch(0.701 0.189 46.65); - --shadow-card: 0 1px 2px 0 rgba(255, 255, 255, 0.02), 0 2px 8px -1px rgba(0, 0, 0, 0.15); - --shadow-card-hover: 0 2px 8px -2px rgba(0, 0, 0, 0.12), 0 6px 20px -4px rgba(0, 0, 0, 0.18); + --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.12); + --card-shadow-hover: 0 4px 16px -2px rgba(0, 0, 0, 0.14), 0 8px 24px -4px rgba(0, 0, 0, 0.18); } @layer base { diff --git a/components/ui/card.tsx b/components/ui/card.tsx index 83b49b9..2c0b19d 100644 --- a/components/ui/card.tsx +++ b/components/ui/card.tsx @@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {