From 4582d43a6b84a75a8cb3531808ccd6269faf112b Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Tue, 19 Dec 2023 09:52:12 -0800 Subject: [PATCH] [C-3494] Add shadow to icon (#6980) --- packages/harmony/rollup.config.mjs | 3 +- packages/harmony/src/components/icon.ts | 3 +- .../foundations/theme/shadows.ts | 61 +++++++++++++++++ .../harmony-native/foundations/theme/theme.ts | 66 +------------------ .../components/AudiusValues.tsx | 2 +- svgr-template.js | 27 +++++++- 6 files changed, 95 insertions(+), 67 deletions(-) create mode 100644 packages/mobile/src/harmony-native/foundations/theme/shadows.ts diff --git a/packages/harmony/rollup.config.mjs b/packages/harmony/rollup.config.mjs index 48ed6db9423..77cdedddcc4 100644 --- a/packages/harmony/rollup.config.mjs +++ b/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 { diff --git a/packages/harmony/src/components/icon.ts b/packages/harmony/src/components/icon.ts index a9c6806f90e..8f757a4384d 100644 --- a/packages/harmony/src/components/icon.ts +++ b/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 diff --git a/packages/mobile/src/harmony-native/foundations/theme/shadows.ts b/packages/mobile/src/harmony-native/foundations/theme/shadows.ts new file mode 100644 index 00000000000..b209f8d373f --- /dev/null +++ b/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 } + } +} diff --git a/packages/mobile/src/harmony-native/foundations/theme/theme.ts b/packages/mobile/src/harmony-native/foundations/theme/theme.ts index 90b78da37fd..f0b92ffbe7a 100644 --- a/packages/mobile/src/harmony-native/foundations/theme/theme.ts +++ b/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 diff --git a/packages/mobile/src/screens/sign-on-screen/components/AudiusValues.tsx b/packages/mobile/src/screens/sign-on-screen/components/AudiusValues.tsx index e2c56caea39..5bdb32d4542 100644 --- a/packages/mobile/src/screens/sign-on-screen/components/AudiusValues.tsx +++ b/packages/mobile/src/screens/sign-on-screen/components/AudiusValues.tsx @@ -33,7 +33,7 @@ const AudiusValue = (props: AudiusValueProps) => { const { icon: Icon, text } = props return ( - + { +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})