From 74cf601a85000d7d75b99ba1bcc1ac43a6a57e24 Mon Sep 17 00:00:00 2001
From: Marcos Ramos <marcoshpramos@gmail.com>
Date: Fri, 17 Jan 2025 14:44:59 -0300
Subject: [PATCH] chore: change shadows to folow the storyblok design system

---
 src/storybook/design/Shadows.mdx |  2 +-
 src/theme/light-theme.tsx        | 14 +++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/storybook/design/Shadows.mdx b/src/storybook/design/Shadows.mdx
index ccbda6f..754759d 100644
--- a/src/storybook/design/Shadows.mdx
+++ b/src/storybook/design/Shadows.mdx
@@ -28,7 +28,7 @@ export const Shadows = () => {
                     Display
                 </Typography>
             </Grid>
-            {Object.keys(theme.shadows).map((index) => (
+            {Object.keys(theme.shadows.slice(0, 5)).map((index) => (
                 <>
                     <Grid item xs={3}>
                         <Typography variant="subtitle1">
diff --git a/src/theme/light-theme.tsx b/src/theme/light-theme.tsx
index 872449c..5055695 100644
--- a/src/theme/light-theme.tsx
+++ b/src/theme/light-theme.tsx
@@ -62,15 +62,11 @@ import {
 
 const shadows = [
   'none',
-  ...new Array(24)
-    .fill(0)
-    .map((_, i) => i + 1)
-    .map((i) => [0, i / 12, i, i / 4])
-    .map((v) => v.map(Math.ceil))
-    .map(
-      (v) =>
-        `${v[0]}px ${v[1]}px ${v[2]}px ${v[3]}px ${alpha(sb_info_950, 0.07)}`,
-    ),
+  '0px 4px 8px 0px rgba(27, 36, 63, 0.08)',
+  '0px 8px 24px 0px rgba(27, 36, 63, 0.08)',
+  '0px 16px 32px 0px rgba(27, 36, 63, 0.08)',
+  '0px 16px 48px 0px rgba(27, 36, 63, 0.08)',
+  ...Array(20).fill('none'),
 ] as Theme['shadows']
 
 const spacing = (factor?: number) => Math.floor(factor ?? 1) * 4