From 5e832f3f0c82c899cedb39f9fa8c1fe952f62a15 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 15 Jan 2024 18:52:11 -0600
Subject: [PATCH] Shadows

---
 src/alf/atoms.ts                       | 19 +++++++++
 src/alf/themes.ts                      | 43 +++++++++++++++++++++
 src/alf/tokens.ts                      |  1 +
 src/view/screens/Storybook/Shadows.tsx | 53 ++++++++++++++++++++++++++
 src/view/screens/Storybook/index.tsx   |  4 +-
 5 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/view/screens/Storybook/Shadows.tsx

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index d2dafac7eb..c0d20e9c77 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -209,6 +209,25 @@ export const atoms = {
     borderBottomWidth: 1,
   },
 
+  /*
+   * Shadow
+   */
+  shadow_sm: {
+    shadowRadius: 8,
+    shadowOpacity: 0.1,
+    elevation: 8,
+  },
+  shadow_md: {
+    shadowRadius: 16,
+    shadowOpacity: 0.1,
+    elevation: 16,
+  },
+  shadow_lg: {
+    shadowRadius: 32,
+    shadowOpacity: 0.1,
+    elevation: 24,
+  },
+
   /*
    * Padding
    */
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index 103693b0b3..dc45944563 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -1,5 +1,6 @@
 import * as tokens from '#/alf/tokens'
 import type {Mutable} from '#/alf/types'
+import {atoms} from '#/alf/atoms'
 
 export type ThemeName = 'light' | 'dim' | 'dark'
 export type ReadonlyTheme = typeof light
@@ -156,6 +157,18 @@ export const light = {
     border_contrast: {
       borderColor: lightPalette.contrast_400,
     },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowColor: lightPalette.black,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowColor: lightPalette.black,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowColor: lightPalette.black,
+    },
   },
 }
 
@@ -202,6 +215,21 @@ export const dim: Theme = {
     border_contrast: {
       borderColor: darkPalette.contrast_300,
     },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
   },
 }
 
@@ -248,5 +276,20 @@ export const dark: Theme = {
     border_contrast: {
       borderColor: darkPalette.contrast_300,
     },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: tokens.color.trueBlack,
+    },
   },
 }
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index ff8a8ebb8b..0bcffaebef 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -1,6 +1,7 @@
 export const color = {
   white: '#FFFFFF',
   black: '#080B12',
+  trueBlack: '#000000',
 
   gray_25: `#FCFCFD`,
   gray_50: `#F9FAFB`,
diff --git a/src/view/screens/Storybook/Shadows.tsx b/src/view/screens/Storybook/Shadows.tsx
new file mode 100644
index 0000000000..f92112395f
--- /dev/null
+++ b/src/view/screens/Storybook/Shadows.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {H1, Text} from '#/components/Typography'
+
+export function Shadows() {
+  const t = useTheme()
+
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Shadows</H1>
+
+      <View style={[a.flex_row, a.gap_5xl]}>
+        <View
+          style={[
+            a.flex_1,
+            a.justify_center,
+            a.px_lg,
+            a.py_2xl,
+            t.atoms.bg,
+            t.atoms.shadow_sm,
+          ]}>
+          <Text>shadow_sm</Text>
+        </View>
+
+        <View
+          style={[
+            a.flex_1,
+            a.justify_center,
+            a.px_lg,
+            a.py_2xl,
+            t.atoms.bg,
+            t.atoms.shadow_md,
+          ]}>
+          <Text>shadow_md</Text>
+        </View>
+
+        <View
+          style={[
+            a.flex_1,
+            a.justify_center,
+            a.px_lg,
+            a.py_2xl,
+            t.atoms.bg,
+            t.atoms.shadow_lg,
+          ]}>
+          <Text>shadow_lg</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index bde3b33b2a..2cd956becb 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -14,6 +14,7 @@ import {Links} from './Links'
 import {Forms} from './Forms'
 import {Dialogs} from './Dialogs'
 import {Breakpoints} from './Breakpoints'
+import {Shadows} from './Shadows'
 
 export function Storybook() {
   const t = useTheme()
@@ -53,7 +54,6 @@ export function Storybook() {
             </Button>
           </View>
 
-          <Dialogs />
           <ThemeProvider theme="light">
             <Theming />
           </ThemeProvider>
@@ -66,9 +66,11 @@ export function Storybook() {
 
           <Typography />
           <Spacing />
+          <Shadows />
           <Buttons />
           <Links />
           <Forms />
+          <Dialogs />
           <Breakpoints />
         </View>
       </CenteredView>