[C-3494] Add shadow to icon

packages/harmony/rollup.config.mjs

@@ -11,7 +11,8 @@ const external = [
   ...Object.keys(pkg.peerDependencies),
   '@emotion/react/jsx-runtime',
   '@emotion/cache',
-  '@emotion/is-prop-valid'
+  '@emotion/is-prop-valid',
+  '@emotion/css'
 ]
 
 export default {

packages/harmony/src/components/icon.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, SVGProps } from 'react'
 
-import type { IconColors } from 'foundations'
+import type { IconColors, ShadowOptions } from 'foundations'
 
 export const iconSizes = {
   xs: 14,
@@ -20,6 +20,7 @@ export type IconProps = {
   size?: IconSize
   sizeW?: IconSize
   sizeH?: IconSize
+  shadow?: ShadowOptions
 }
 
 type SVGIconProps = SVGBaseProps & IconProps

packages/mobile/src/harmony-native/foundations/theme/shadows.ts

@@ -0,0 +1,61 @@
+export const shadows = {
+  near: {
+    // IOS
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    shadowColor: '#000',
+    // Android
+    elevation: 1
+  },
+  mid: {
+    // IOS
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 4 },
+    shadowColor: '#000',
+    // Android
+    elevation: 2
+  },
+  midInverted: {
+    // IOS
+    shadowOpacity: 0.06,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: -4 },
+    shadowColor: '#000',
+    // Android
+    elevation: 2
+  },
+  far: {
+    // IOS
+    shadowOffset: { width: 0, height: 8 },
+    shadowRadius: 16,
+    shadowOpacity: 0.08,
+    shadowColor: '#000',
+    // Android
+    elevation: 3
+  },
+  emphasis: {
+    // IOS
+    shadowOffset: { width: 0, height: 1.34018 },
+    shadowRadius: 8,
+    shadowOpacity: 0.2,
+    shadowColor: '#000',
+    // Android
+    elevation: 6
+  },
+  special: {
+    // IOS
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 17,
+    shadowOpacity: 0.2,
+    shadowColor: '#565776',
+    // Android
+    elevation: 6
+  },
+  flat: {
+    elevation: 0,
+    shadowRadius: 0,
+    shadowOffset: { width: 0, height: 0 }
+  }
+}

packages/mobile/src/harmony-native/foundations/theme/theme.ts

@@ -4,6 +4,8 @@ import {
 } from '@audius/harmony'
 import { mapValues, merge } from 'lodash'
 
+import { shadows } from './shadows'
+
 // linear-gradient at 315deg
 const baseLinearGradient = {
   start: { x: 0, y: 1 },
@@ -80,70 +82,8 @@ const typographyOverrides = {
   )
 }
 
-const shadowOverrides = {
-  near: {
-    // IOS
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    shadowColor: '#000',
-    // Android
-    elevation: 1
-  },
-  mid: {
-    // IOS
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: 4 },
-    shadowColor: '#000',
-    // Android
-    elevation: 2
-  },
-  midInverted: {
-    // IOS
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    shadowOffset: { width: 0, height: -4 },
-    shadowColor: '#000',
-    // Android
-    elevation: 2
-  },
-  far: {
-    // IOS
-    shadowOffset: { width: 0, height: 8 },
-    shadowRadius: 16,
-    shadowOpacity: 0.08,
-    shadowColor: '#000',
-    // Android
-    elevation: 3
-  },
-  emphasis: {
-    // IOS
-    shadowOffset: { width: 0, height: 1.34018 },
-    shadowRadius: 8,
-    shadowOpacity: 0.2,
-    shadowColor: '#000',
-    // Android
-    elevation: 6
-  },
-  special: {
-    // IOS
-    shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 17,
-    shadowOpacity: 0.2,
-    shadowColor: '#565776',
-    // Android
-    elevation: 6
-  },
-  flat: {
-    elevation: 0,
-    shadowRadius: 0,
-    shadowOffset: { width: 0, height: 0 }
-  }
-}
-
 const commonFoundations = {
-  shadows: shadowOverrides,
+  shadows,
   typography: {
     ...harmonyThemes.day.typography,
     ...typographyOverrides

packages/mobile/src/screens/sign-on-screen/components/AudiusValues.tsx

@@ -33,7 +33,7 @@ const AudiusValue = (props: AudiusValueProps) => {
   const { icon: Icon, text } = props
   return (
     <Flex alignItems='center' justifyContent='center' gap='m' direction='row'>
-      <Icon color='staticWhite' size='l' />
+      <Icon color='staticWhite' size='l' shadow='emphasis' />
       <Text
         variant='title'
         size='l'

svgr-template.js

@@ -1,8 +1,30 @@
-const template = (variables, { tpl }) => {
+const webImports = `
+  import {css, cx} from '@emotion/css'
+`
+
+const nativeImports = `
+  import {css} from '@emotion/native'
+`
+
+const webStyles = `
+  const {className: classNameProp} = other
+  const className = shadow ? css({ filter: theme.shadows.drop }) : undefined
+  other.className = cx(className, classNameProp)
+`
+
+const nativeStyles = `
+  const {style: styleProp} = other
+  const style = shadow ? css(theme.shadows[shadow]) : undefined
+  other.style = style ? [style, styleProp] : styleProp
+`
+
+const template = (variables, { tpl, options }) => {
+  const { native } = options
   return tpl`
 ${variables.imports};
 import {useTheme} from '@emotion/react'
 import {forwardRef} from 'react'
+${native ? nativeImports : webImports}
 
 ${variables.interfaces};
 
@@ -15,6 +37,7 @@ const ${variables.componentName} = forwardRef((${variables.props}, ref) => {
     sizeW,
     height: heightProp,
     width: widthProp,
+    shadow,
     ...other
   } = props
 
@@ -30,6 +53,8 @@ const ${variables.componentName} = forwardRef((${variables.props}, ref) => {
 
   const fillColor = other.fill ?? theme.color.icon[color] ?? 'red'
 
+  ${native ? nativeStyles : webStyles}
+
   props = {...other, ref, fillColor}
 
   return (${variables.jsx})