chore: change shadows to folow the storyblok design system

storyblok · Jan 17, 2025 · 74cf601 · 74cf601
1 parent 72547b8
commit 74cf601
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git 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
@@ -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