Shadows

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
    */

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,
+    },
   },
 }

src/alf/tokens.ts

@@ -1,6 +1,7 @@
 export const color = {
   white: '#FFFFFF',
   black: '#080B12',
+  trueBlack: '#000000',
 
   gray_25: `#FCFCFD`,
   gray_50: `#F9FAFB`,

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>
+  )
+}

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>