feat(widget): apply UI theme provided by consumer (#3182)

apps/cowswap-frontend/src/legacy/theme/index.tsx

@@ -17,7 +17,11 @@ import {
   themeVariables as baseThemeVariables,
 } from 'legacy/theme/baseTheme'
 
+import { useInjectedWidgetPalette } from 'modules/injectedWidget'
+
+import { mapWidgetTheme } from './mapWidgetTheme'
 import { Colors } from './styled'
+
 export type TextProps = Omit<TextPropsOriginal, 'css'> & { override?: boolean }
 
 export const MEDIA_WIDTHS = {
@@ -172,9 +176,18 @@ export function theme(darkmode: boolean, isInjectedWidgetMode: boolean): Default
 
 export default function ThemeProvider({ children }: { children?: React.ReactNode }) {
   const darkMode = useIsDarkMode()
-  const isInjectedWidgetMode = isInjectedWidget()
+  const injectedWidgetTheme = useInjectedWidgetPalette()
+
+  const themeObject = useMemo(() => {
+    const widgetMode = isInjectedWidget()
+    const defaultTheme = theme(darkMode, widgetMode)
+
+    if (widgetMode) {
+      return mapWidgetTheme(injectedWidgetTheme, defaultTheme)
+    }
 
-  const themeObject = useMemo(() => theme(darkMode, isInjectedWidgetMode), [darkMode, isInjectedWidgetMode])
+    return defaultTheme
+  }, [darkMode, injectedWidgetTheme])
 
   return <StyledComponentsThemeProvider theme={themeObject}>{children}</StyledComponentsThemeProvider>
 }

apps/cowswap-frontend/src/legacy/theme/mapWidgetTheme.ts

@@ -0,0 +1,31 @@
+import type { InjectedWidgetPalette } from '@cowprotocol/widget-lib'
+
+import { css, DefaultTheme } from 'styled-components/macro'
+
+// Map the provided data from consumer to styled-components theme
+export function mapWidgetTheme(
+  widgetTheme: InjectedWidgetPalette | undefined,
+  defaultTheme: DefaultTheme
+): DefaultTheme {
+  if (!widgetTheme) return defaultTheme
+
+  return {
+    ...defaultTheme,
+    bg3: widgetTheme.widgetBackground,
+    bg4: widgetTheme.widgetBackground,
+    cardBackground: widgetTheme.widgetBackground,
+    text1: widgetTheme.textColor,
+    primary1: widgetTheme.primaryColor,
+    primary2: widgetTheme.primaryColor,
+    primary3: widgetTheme.primaryColor,
+    primary4: widgetTheme.primaryColor,
+    bg2: widgetTheme.primaryColor,
+    body: {
+      ...defaultTheme.body,
+      background: css`
+        background-color: ${widgetTheme.screenBackground};
+        background-image: none;
+      `,
+    },
+  }
+}

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetPalette.ts

@@ -0,0 +1,10 @@
+import type { InjectedWidgetPalette } from '@cowprotocol/widget-lib'
+
+import { useInjectedWidgetParams } from './useInjectedWidgetParams'
+
+// The theme palette provided by a consumer
+export function useInjectedWidgetPalette(): InjectedWidgetPalette | undefined {
+  const state = useInjectedWidgetParams()
+
+  return state.palette
+}

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetParams.ts

@@ -1,7 +1,9 @@
 import { useAtomValue } from 'jotai'
 
+import type { CowSwapWidgetAppParams } from '@cowprotocol/widget-lib'
+
 import { injectedWidgetParamsAtom } from '../state/injectedWidgetParamsAtom'
 
-export function useInjectedWidgetParams() {
+export function useInjectedWidgetParams(): CowSwapWidgetAppParams {
   return useAtomValue(injectedWidgetParamsAtom)
 }

apps/cowswap-frontend/src/modules/injectedWidget/index.ts

@@ -1,3 +1,4 @@
 export { InjectedWidgetUpdater } from './updaters/InjectedWidgetUpdater'
 export { useInjectedWidgetParams } from './hooks/useInjectedWidgetParams'
 export { useInjectedWidgetMetaData } from './hooks/useInjectedWidgetMetaData'
+export { useInjectedWidgetPalette } from './hooks/useInjectedWidgetPalette'

apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts

@@ -55,6 +55,12 @@ export function useWidgetParamsAndSettings(
       appParams: {
         dynamicHeightEnabled,
         enabledTradeTypes,
+        // palette: {
+        //   primaryColor: '#d9258e',
+        //   screenBackground: '#c7860f',
+        //   widgetBackground: '#eed4a7',
+        //   textColor: '#413931',
+        // },
       },
     }
 

libs/widget-lib/src/types.ts

@@ -39,12 +39,20 @@ export interface CowSwapWidgetUrlParams {
   theme?: CowSwapTheme
 }
 
+export interface InjectedWidgetPalette {
+  primaryColor: string
+  screenBackground: string
+  widgetBackground: string
+  textColor: string
+}
+
 export interface CowSwapWidgetAppParams {
   logoUrl?: string
   hideLogo?: boolean
   hideNetworkSelector?: boolean
   dynamicHeightEnabled?: boolean
   enabledTradeTypes?: TradeType[]
+  palette?: InjectedWidgetPalette
 }
 
 export interface CowSwapWidgetSettings {