Fix new theme gradient and lottie

packages/harmony/src/foundations/color/primitive.css

@@ -266,9 +266,9 @@ html[data-theme='default-light'] {
   --harmony-dark-red: #c44357;
   --harmony-green: #0f9e48;
   --harmony-light-green: #a74cff;
-  --harmony-gradient-color-1: #6f55d8;
-  --harmony-gradient-color-2: #d767e1;
-  --harmony-gradient: linear-gradient(315deg, #6f55d8 0%, #d767e1 100%);
+  --harmony-gradient-color-1: #7f6ad6;
+  --harmony-gradient-color-2: #5b44b8;
+  --harmony-gradient: linear-gradient(315deg, #7f6ad6 0%, #5b44b8 100%);
   --harmony-coin-gradient: linear-gradient(
     85deg,
     #7f6ad6 -4.82%,
@@ -319,9 +319,9 @@ html[data-theme='default-dark'] {
   --harmony-dark-red: #c44357;
   --harmony-green: #84df64;
   --harmony-light-green: #c67cff;
-  --harmony-gradient-color-1: #6f55d8;
-  --harmony-gradient-color-2: #d767e1;
-  --harmony-gradient: linear-gradient(315deg, #6f55d8 0%, #d767e1 100%);
+  --harmony-gradient-color-1: #806ad8;
+  --harmony-gradient-color-2: #9e8ee8;
+  --harmony-gradient: linear-gradient(315deg, #806ad8 0%, #9e8ee8 100%);
   --harmony-coin-gradient: linear-gradient(
     85deg,
     #806ad8 -4.82%,

packages/harmony/src/foundations/color/primitive.ts

@@ -50,9 +50,9 @@ const defaultLightPrimitives = {
     blue: '#7F6AD6',
     darkRed: '#C44357',
     glassOverlay: '#00000014',
-    gradientStop1: '#6F55D8',
-    gradientStop2: '#D767E1',
-    gradient: 'linear-gradient(315deg, #6F55D8 0%, #D767E1 100%)',
+    gradientStop1: '#7F6AD6',
+    gradientStop2: '#5B44B8',
+    gradient: 'linear-gradient(315deg, #7F6AD6 0%, #5B44B8 100%)',
     coinGradient:
       'linear-gradient(85deg, #7F6AD6 -4.82%, #A74CFF 49.8%, #7F6AD6 104.43%)',
     coinGradientColor1: '#7F6AD6',
@@ -121,9 +121,9 @@ const defaultDarkPrimitives = {
     blue: '#806AD8',
     darkRed: '#C44357',
     glassOverlay: '#0F0F0F99',
-    gradientStop1: '#6F55D8',
-    gradientStop2: '#D767E1',
-    gradient: 'linear-gradient(315deg, #6F55D8 0%, #D767E1 100%)',
+    gradientStop1: '#806AD8',
+    gradientStop2: '#9E8EE8',
+    gradient: 'linear-gradient(315deg, #806AD8 0%, #9E8EE8 100%)',
     coinGradient:
       'linear-gradient(85deg, #806AD8 -4.82%, #C67CFF 49.8%, #806AD8 104.43%)',
     coinGradientColor1: '#806AD8',

packages/mobile/ios/Podfile.lock

@@ -1329,7 +1329,7 @@ PODS:
     - React
     - react-native-google-cast/NoBluetoothArm (= 4.6.2)
   - react-native-google-cast/NoBluetoothArm (4.6.2):
-    - google-cast-sdk-dynamic-xcframework-no-bluetooth
+    - google-cast-sdk-dynamic-xcframework-no-bluetooth (= 4.7.1)
     - React
     - react-native-google-cast/RNGoogleCast
   - react-native-google-cast/RNGoogleCast (4.6.2):
@@ -2532,7 +2532,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 4f90a074d1eb269e32d5563c53b70d469180cece
   react-native-fast-crypto: b30594570dab23aca7e74e206b2c03e28a006216
   react-native-get-random-values: 384787fd76976f5aec9465aff6fa9e9129af1e74
-  react-native-google-cast: 18b9b2fc518caabfa65d309409e160b3fc6d1733
+  react-native-google-cast: 0a82cf63114470403e41e04ffa2b13d6448b6112
   react-native-image-picker: f104798044ef2c9211c42a48025d0693b5f34981
   react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
   react-native-keyboard-controller: 7c1271a9fe703b7ee588b75d6c486eda79e5081b

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audius/mobile",
-  "version": "1.5.165",
+  "version": "1.5.166",
   "private": true,
   "scripts": {
     "android:dev": "ENVFILE=.env.dev turbo run android -- --mode=prodDebug",

packages/web/package.json

@@ -3,7 +3,7 @@
   "productName": "Audius",
   "description": "The Audius web client reference implementation",
   "author": "Audius",
-  "version": "1.5.165",
+  "version": "1.5.166",
   "private": true,
   "scripts": {
     "DEV & BUILD========================================": "",

packages/web/src/components/animated-button/AnimatedButtonProvider.tsx

@@ -12,6 +12,8 @@ import cn from 'classnames'
 import Lottie, { LottieRefCurrentProps } from 'lottie-react'
 
 import { SeoLink } from 'components/link'
+import { applyThemeToLottie } from 'utils/lottieTheme'
+import { useLottieThemeColors } from 'utils/theme/theme'
 
 import styles from './AnimatedButtonProvider.module.css'
 
@@ -129,45 +131,54 @@ const AnimatedButton = ({
       {buttonElement}
     </SeoLink>
   ) : (
-    <button {...rootProps}>{buttonElement}</button>
+    <button {...rootProps} {...buttonProps}>
+      {buttonElement}
+    </button>
   )
 }
 
+export type LottieThemeVariant = 'accent' | 'neutral'
+
 export type AnimatedButtonProviderProps = {
-  darkMode: boolean
+  /** @deprecated No longer used - theme applied via useLottieThemeColors */
+  darkMode?: boolean
   isMatrix: boolean
-  iconDarkJSON: () => Promise<any>
-  iconLightJSON: () => Promise<any>
+  /** Base Lottie JSON loader - theme colors applied at runtime */
+  iconJSON: () => Promise<IconJSON>
+  /** 'accent' = active state, 'neutral' = inactive state. Defaults from isActive. */
+  variant?: LottieThemeVariant
 } & BaseAnimatedButtonProps
 
 const AnimatedButtonProvider = ({
-  darkMode,
-  iconDarkJSON,
-  iconLightJSON,
+  iconJSON: iconJSONLoader,
+  isActive,
+  variant: variantProp,
   ...buttonProps
 }: AnimatedButtonProviderProps) => {
   const [iconJSON, setIconJSON] = useState<IconJSON | null>(null)
-  const defaultAnimations = useRef<IconJSON | null>(null)
-  const darkAnimations = useRef<IconJSON | null>(null)
+  const baseAnimation = useRef<IconJSON | null>(null)
+  const themeColors = useLottieThemeColors()
+  const variant = variantProp ?? (isActive ? 'accent' : 'neutral')
 
   useEffect(() => {
-    const loadAnimations = async () => {
-      if (darkMode) {
-        if (!darkAnimations.current) {
-          darkAnimations.current = await iconDarkJSON()
-        }
-        setIconJSON({ ...darkAnimations.current })
-      } else {
-        if (!defaultAnimations.current) {
-          defaultAnimations.current = await iconLightJSON()
-        }
-        setIconJSON({ ...defaultAnimations.current })
+    const loadAndTheme = async () => {
+      if (!baseAnimation.current) {
+        baseAnimation.current = await iconJSONLoader()
       }
+      setIconJSON(
+        applyThemeToLottie(
+          baseAnimation.current,
+          themeColors,
+          variant
+        ) as IconJSON
+      )
     }
-    loadAnimations()
-  }, [darkMode, setIconJSON, iconDarkJSON, iconLightJSON])
+    loadAndTheme()
+  }, [iconJSONLoader, themeColors, variant])
 
-  return iconJSON && <AnimatedButton iconJSON={iconJSON} {...buttonProps} />
+  return iconJSON ? (
+    <AnimatedButton iconJSON={iconJSON} isActive={isActive} {...buttonProps} />
+  ) : null
 }
 
 export default memo(AnimatedButtonProvider)

packages/web/src/components/animated-button/AnimatedIconButton.tsx

@@ -11,23 +11,12 @@ export enum AnimatedIconType {
   REPOST_LIGHT = 'REPOST_LIGHT'
 }
 
-const animationMap = {
-  [AnimatedIconType.FAVORITE]: {
-    dark: 'iconFavoriteDark',
-    light: 'iconFavoriteLight'
-  },
-  [AnimatedIconType.REPOST]: {
-    dark: 'iconRepostDark',
-    light: 'iconRepostLight'
-  },
-  [AnimatedIconType.FAVORITE_LIGHT]: {
-    dark: 'iconFavoriteLighterDark',
-    light: 'iconFavoriteLighterLight'
-  },
-  [AnimatedIconType.REPOST_LIGHT]: {
-    dark: 'iconRepostLighterDark',
-    light: 'iconRepostLighterLight'
-  }
+/** Base asset path per icon - theme applied at runtime via useLottieThemeColors */
+const animationMap: Record<AnimatedIconType, string> = {
+  [AnimatedIconType.FAVORITE]: 'iconFavoriteLight',
+  [AnimatedIconType.REPOST]: 'iconRepostLight',
+  [AnimatedIconType.FAVORITE_LIGHT]: 'iconFavoriteLighterLight',
+  [AnimatedIconType.REPOST_LIGHT]: 'iconRepostLighterLight'
 }
 
 type AnimatedIconButtonProps = {
@@ -36,44 +25,54 @@ type AnimatedIconButtonProps = {
   isDisabled?: boolean
   isActive?: boolean
   className?: string
+  wrapperClassName?: string
   stopPropagation?: boolean
   activeClassName?: string
   disabledClassName?: string
   icon: AnimatedIconType
-  darkMode: boolean
+  /** @deprecated Theme applied at runtime - no longer used */
+  darkMode?: boolean
   isMatrix?: boolean
+  'aria-label'?: string
 }
 
 const AnimatedIconButton = ({
   onClick,
   href,
   className,
+  wrapperClassName,
   activeClassName,
   disabledClassName,
   icon,
-  darkMode,
   isMatrix = false,
   isDisabled = false,
   isActive = false,
-  stopPropagation = false
+  stopPropagation = false,
+  'aria-label': ariaLabel,
+  ...rest
 }: AnimatedIconButtonProps) => {
-  const { dark, light } = animationMap[icon]
+  const assetPath = animationMap[icon]
   const [uniqueKey] = useState(`${uuid()}-${icon}`)
   return (
     <AnimatedButtonProvider
       uniqueKey={uniqueKey}
       isActive={isActive}
       isDisabled={isDisabled}
-      darkMode={darkMode}
       isMatrix={isMatrix}
-      onClick={onClick || ((e: MouseEvent) => {})}
+      onClick={onClick ?? (() => {})}
       href={href}
-      iconLightJSON={() => import(`../../assets/animations/${light}.json`)}
-      iconDarkJSON={() => import(`../../assets/animations/${dark}.json`)}
+      iconJSON={() =>
+        import(`../../assets/animations/${assetPath}.json`).then(
+          (m) => m.default
+        )
+      }
       activeClassName={activeClassName}
       disabledClassName={disabledClassName}
       className={className}
+      wrapperClassName={wrapperClassName}
       stopPropagation={stopPropagation}
+      aria-label={ariaLabel}
+      {...rest}
     />
   )
 }

packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx

@@ -15,15 +15,13 @@ const ExploreButton = ({
     <AnimatedBottomButton
       uniqueKey='explore-button'
       isActive={isActive}
-      darkMode={darkMode}
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() =>
-        import('../../../assets/animations/iconSearchExplore.json')
-      }
-      iconDarkJSON={() =>
-        import('../../../assets/animations/iconSearchExplore.json')
+      iconJSON={() =>
+        import('../../../assets/animations/iconSearchExplore.json').then(
+          (m) => m.default
+        )
       }
       {...buttonProps}
     />

packages/web/src/components/bottom-bar/buttons/FeedButton.tsx

@@ -16,14 +16,12 @@ const FeedButton = ({
       uniqueKey='feed-button'
       isMatrix={isMatrixMode}
       isActive={isActive}
-      darkMode={darkMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() =>
-        import('../../../assets/animations/iconFeedLight.json')
-      }
-      iconDarkJSON={() =>
-        import('../../../assets/animations/iconFeedDark.json')
+      iconJSON={() =>
+        import('../../../assets/animations/iconFeedLight.json').then(
+          (m) => m.default
+        )
       }
       {...buttonProps}
     />

packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx

@@ -15,15 +15,13 @@ const LibraryButton = ({
     <AnimatedBottomButton
       uniqueKey='library-button'
       isActive={isActive}
-      darkMode={darkMode}
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() =>
-        import('../../../assets/animations/iconFavoriteLight.json')
-      }
-      iconDarkJSON={() =>
-        import('../../../assets/animations/iconFavoriteDark.json')
+      iconJSON={() =>
+        import('../../../assets/animations/iconFavoriteLight.json').then(
+          (m) => m.default
+        )
       }
       {...buttonProps}
     />

packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx

@@ -15,16 +15,14 @@ const ProfileButton = ({
     <AnimatedBottomButton
       uniqueKey='profile-button'
       isActive={isActive}
-      darkMode={darkMode}
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
       aria-label='Profile Page'
-      iconLightJSON={() =>
-        import('../../../assets/animations/iconProfileLight.json')
-      }
-      iconDarkJSON={() =>
-        import('../../../assets/animations/iconProfileDark.json')
+      iconJSON={() =>
+        import('../../../assets/animations/iconProfileLight.json').then(
+          (m) => m.default
+        )
       }
       {...buttonProps}
     />

packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx

@@ -15,15 +15,13 @@ const TrendingButton = ({
     <AnimatedBottomButton
       uniqueKey='trending-button'
       isActive={isActive}
-      darkMode={darkMode}
       isMatrix={isMatrixMode}
       onClick={onClick}
       href={href}
-      iconLightJSON={() =>
-        import('../../../assets/animations/iconTrendingLight.json')
-      }
-      iconDarkJSON={() =>
-        import('../../../assets/animations/iconTrendingDark.json')
+      iconJSON={() =>
+        import('../../../assets/animations/iconTrendingLight.json').then(
+          (m) => m.default
+        )
       }
       {...buttonProps}
     />