@helpwave/hightide-native 0.3.2 → 0.4.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "src"
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.3.1",
-    "@helpwave/hightide-utils": "0.1.0"
+    "@helpwave/hightide-utils": "0.1.0",
+    "@helpwave/hightide-design": "0.4.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -57,7 +57,7 @@ const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>
   tokenOverride: TStyle,
   userOverwrite?: StyleOverwrite<ChatMessageBubbleState, TStyle>
 ): StyleOverwrite<ChatMessageBubbleState, TStyle> => (
-    (prev, state) => {
+    (state, prev) => {
       const withTokenOverride = {
         ...(prev as object),
         ...(tokenOverride as object),
@@ -68,7 +68,7 @@ const mergeBubbleStyleOverwrite = <TStyle extends StyleProp<ViewStyle> | object>
       }
 
       if (typeof userOverwrite === 'function') {
-        return userOverwrite(withTokenOverride, state)
+        return userOverwrite(state, withTokenOverride)
       }
 
       return {
@@ -196,16 +196,16 @@ export const ChatAttachmentMessageBubble = ({
         accessibilityLabel={downloadLabel}
         disabled={onDownload == null}
         onPress={onDownload}
-        containerStyle={(_, pressableState) => (
+        style={(pressableState) => (
           contentResolvers.container(pressableState, contentContainerStyle)
         )}
-        stateLayerStyle={(_, pressableState) => (
+        stateLayerStyle={(pressableState) => (
           contentResolvers.stateLayer(pressableState)
         )}
-        textStyle={(_, pressableState) => (
+        textStyle={(pressableState) => (
           contentResolvers.text(pressableState)
         )}
-        iconStyle={(_, pressableState) => (
+        iconStyle={(pressableState) => (
           contentResolvers.icon(pressableState)
         )}
       >

package/src/components/chat/ChatConversationRow.tsx

@@ -8,9 +8,7 @@ import {
 } from 'react'
 import {
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -46,8 +44,7 @@ export type ChatConversationRowProps = Omit<PressableProps, 'children' | 'style'
   unreadCount?: number,
   isSelected?: boolean,
   sentIndicator?: ChatConversationSentIndicator,
-  style?: StyleProp<ViewStyle>,
-  rowStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  style?: StyleOverwrite<PressableState, PressableContainerStyle>,
   contentContainerStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
   headerRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
   messageRowStyle?: StyleOverwrite<ChatConversationRowState, ChatConversationRowMessageRowStyle>,
@@ -83,7 +80,6 @@ export const ChatConversationRow = ({
   sentIndicator,
   disabled,
   style,
-  rowStyle,
   contentContainerStyle,
   headerRowStyle,
   messageRowStyle,
@@ -141,28 +137,28 @@ export const ChatConversationRow = ({
 
     return cloneElement(avatarElement, {
       size: avatarSize,
-      avatarStyle: (_, avatarState) => avatarTheme.container(
+      avatarStyle: (avatarState) => avatarTheme.container(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarStyle ?? avatarElement.props.avatarStyle
       ),
-      imageStyle: (_, avatarState) => avatarTheme.image(
+      imageStyle: (avatarState) => avatarTheme.image(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarElement.props.imageStyle
       ),
-      textStyle: (_, avatarState) => avatarTheme.text(
+      textStyle: (avatarState) => avatarTheme.text(
         {
           ...avatarState,
           size: avatarSize,
         },
         avatarElement.props.textStyle
       ),
-      iconStyle: (_, avatarState) => avatarTheme.icon(
+      iconStyle: (avatarState) => avatarTheme.icon(
         {
           ...avatarState,
           size: avatarSize,
@@ -176,23 +172,22 @@ export const ChatConversationRow = ({
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={style}
-      containerStyle={(_, pressableState) => {
+      style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).container(
           pressableState,
-          rowStyle
+          style
         )
       }}
-      stateLayerStyle={(_, pressableState) => {
+      stateLayerStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).stateLayer(pressableState)
       }}
-      textStyle={(_, pressableState) => {
+      textStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).text(pressableState)
       }}
-      iconStyle={(_, pressableState) => {
+      iconStyle={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return theme.components.chat.conversationRow.pressable(state).icon(pressableState)
       }}
@@ -228,21 +223,23 @@ export const ChatConversationRow = ({
                 )}
               </View>
               <View style={resolvedMessageRow}>
-                {sentIndicator && (
-                  <ThemedIcon
-                    icon={sentIndicatorIcon}
-                    size={resolvedSentIndicator.size}
-                    strokeWidth={resolvedSentIndicator.strokeWidth}
-                    color={resolvedSentIndicator.color}
-                  />
-                )}
-                {preview != null && (
-                  typeof preview === 'string' || typeof preview === 'number' ? (
-                    <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
-                  ) : (
-                    preview
-                  )
-                )}
+                <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: theme.spacing.xs  /* TODO replace this with a theme style */ }}>
+                  {sentIndicator && (
+                    <ThemedIcon
+                      icon={sentIndicatorIcon}
+                      size={resolvedSentIndicator.size}
+                      strokeWidth={resolvedSentIndicator.strokeWidth}
+                      color={resolvedSentIndicator.color}
+                    />
+                  )}
+                  {preview != null && (
+                    typeof preview === 'string' || typeof preview === 'number' ? (
+                      <ThemedText style={resolvedPreview} numberOfLines={1}>{preview}</ThemedText>
+                    ) : (
+                      preview
+                    )
+                  )}
+                </View>
                 {isUnread && (
                   <View style={unreadBadge}>
                     <ThemedText style={unreadBadgeText}>{unreadCount}</ThemedText>

package/src/components/chat/ChatMessageComposer.tsx

@@ -20,6 +20,7 @@ import type {
   ChatMessageComposerStyle
 } from '../../theme/types/components/chat'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { StyleAdapterUtils } from '../../theme'
 
 export type ChatMessageComposerProps = Omit<ViewProps, 'style'> & {
   value?: string,
@@ -108,8 +109,8 @@ export const ChatMessageComposer = ({
           disabled={disabled || !(value ?? '').trim()}
           size="sm"
           onPress={send}
-          containerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
-          stateLayerStyle={(prev) => ({ ...prev, borderRadius: 999 })}
+          style={{ ...StyleAdapterUtils.borderRadius({ type: 'all', value: 999 }) }}
+          stateLayerStyle={{ ...StyleAdapterUtils.borderRadius({ type: 'all', value: 999 }) }}
         />
       </View>
     </View>

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -2,7 +2,6 @@ import {
   useMemo,
   type ReactNode
 } from 'react'
-import type { StyleProp, ViewStyle } from 'react-native'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import {
@@ -25,8 +24,7 @@ export type ChatQuickReplyChipProps = Omit<
 > & {
   isActive?: boolean,
   children?: ReactNode,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
+  style?: StyleOverwrite<PressableState, PressableContainerStyle>,
   textStyle?: StyleOverwrite<PressableState, PressableTextStyle>,
   iconStyle?: StyleOverwrite<PressableState, PressableIconStyle>,
 }
@@ -36,7 +34,6 @@ export const ChatQuickReplyChip = ({
   children,
   disabled,
   style,
-  containerStyle,
   textStyle,
   iconStyle,
   ...props
@@ -52,17 +49,16 @@ export const ChatQuickReplyChip = ({
     <ThemedPressable
       {...props}
       disabled={disabled}
-      style={style}
-      containerStyle={(_, pressableState) => (
-        pressableResolvers.container(pressableState, containerStyle)
+      style={(pressableState) => (
+        pressableResolvers.container(pressableState, style)
       )}
-      stateLayerStyle={(_, pressableState) => (
+      stateLayerStyle={(pressableState) => (
         pressableResolvers.stateLayer(pressableState)
       )}
-      textStyle={(_, pressableState) => (
+      textStyle={(pressableState) => (
         pressableResolvers.text(pressableState, textStyle)
       )}
-      iconStyle={(_, pressableState) => (
+      iconStyle={(pressableState) => (
         pressableResolvers.icon(pressableState, iconStyle)
       )}
     >

package/src/components/chat/ChatThreadHeader.tsx

@@ -114,44 +114,44 @@ export const ChatThreadHeader = ({
       <ThemedPressable
         onPress={onPress}
         disabled={disabled}
-        containerStyle={(_, pressableState) => (
+        style={(pressableState) => (
           pressableResolvers.container(pressableState, pressableContainerStyle)
         )}
-        stateLayerStyle={(_, pressableState) => (
+        stateLayerStyle={(pressableState) => (
           pressableResolvers.stateLayer(pressableState)
         )}
-        textStyle={(_, pressableState) => (
+        textStyle={(pressableState) => (
           pressableResolvers.text(pressableState)
         )}
-        iconStyle={(_, pressableState) => (
+        iconStyle={(pressableState) => (
           pressableResolvers.icon(pressableState)
         )}
       >
         <Avatar
           {...resolvedAvatar}
           size={avatarSize}
-          avatarStyle={(_, avatarState) => avatarTheme.container(
+          avatarStyle={(avatarState) => avatarTheme.container(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.avatarStyle
           )}
-          imageStyle={(_, avatarState) => avatarTheme.image(
+          imageStyle={(avatarState) => avatarTheme.image(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.imageStyle
           )}
-          textStyle={(_, avatarState) => avatarTheme.text(
+          textStyle={(avatarState) => avatarTheme.text(
             {
               ...avatarState,
               size: avatarSize,
             },
             resolvedAvatar.textStyle
           )}
-          iconStyle={(_, avatarState) => avatarTheme.icon(
+          iconStyle={(avatarState) => avatarTheme.icon(
             {
               ...avatarState,
               size: avatarSize,

package/src/components/user-interaction/Button.tsx

@@ -2,9 +2,7 @@ import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
@@ -13,7 +11,7 @@ import type { ComponentSize, ButtonVariant } from '@helpwave/hightide-design/sem
 import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import type { IconComponent } from '../../icons/types'
+import type { IconComponent, IconStyle } from '../../icons/types'
 import type {
   ButtonState,
   ButtonStyle,
@@ -41,10 +39,10 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   children: string,
   leadingIcon?: IconComponent,
   trailingIcon?: IconComponent,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
+  style?: StyleOverwrite<ButtonState, ButtonStyle>,
   stateLayerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
   textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
+  iconStyle?: StyleOverwrite<ButtonState, IconStyle>,
 }
 
 type PressableInteraction = {
@@ -63,9 +61,9 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
   leadingIcon,
   trailingIcon,
   style,
-  containerStyle,
   stateLayerStyle,
   textStyle,
+  iconStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -98,16 +96,13 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
       onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [
-          theme.components.button.container(state, containerStyle),
-          style,
-        ]
+        return theme.components.button.container(state, style)
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedText = theme.components.button.text(state, textStyle)
-        const resolvedIcon = theme.components.button.icon(state)
+        const resolvedIcon = theme.components.button.icon(state, iconStyle)
 
         return (
           <Fragment>

package/src/components/user-interaction/IconButton.tsx

@@ -2,9 +2,7 @@ import { Fragment, forwardRef } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps,
-  type StyleProp,
-  type ViewStyle
+  type PressableProps
 } from 'react-native'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type {
@@ -20,7 +18,7 @@ import type {
   IconButtonStyle
 } from '../../theme/types/components/iconButton'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { IconComponent } from '../../icons'
+import type { IconComponent, IconStyle } from '../../icons'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display'
@@ -40,9 +38,9 @@ export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   variant?: IconButtonVariant,
   icon: IconComponent,
   accessibilityLabel: string,
-  style?: StyleProp<ViewStyle>,
-  containerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  style?: StyleOverwrite<IconButtonState, IconButtonStyle>,
   stateLayerStyle?: StyleOverwrite<IconButtonState, IconButtonStyle>,
+  iconStyle?:  StyleOverwrite<IconButtonState, IconStyle>,
 }
 
 type PressableInteraction = {
@@ -60,8 +58,8 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
   disabled,
   accessibilityLabel,
   style,
-  containerStyle,
   stateLayerStyle,
+  iconStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
   ...props
@@ -96,15 +94,12 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        return [
-          theme.components.iconButton.container(state, containerStyle),
-          style,
-        ]
+        return theme.components.iconButton.container(state, style)
       }}
     >
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
-        const resolvedIcon = theme.components.iconButton.icon(state)
+        const resolvedIcon = theme.components.iconButton.icon(state, iconStyle)
 
         return (
           <Fragment>

package/src/components/user-interaction/ThemedPressable.tsx

@@ -33,13 +33,13 @@ export const ThemedPressableUtil = {
   coloringColorVariants: ['normal', 'tonal', 'transparent'] as const satisfies readonly ColoringColorVariant[],
 }
 
-export type ThemedPressableProps = PressableProps & {
+export type ThemedPressableProps = Omit<PressableProps, 'style'> & {
   size?: ThemedPressableSize,
   color?: ColorPairToken,
   coloringStyle?: ColoringStyle,
   coloringColorVariant?: ColoringColorVariant,
   hasAdditionalHorizontalPadding?: boolean,
-  containerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
+  style?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   stateLayerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   iconStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableIconStyle>,
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
@@ -61,7 +61,6 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
   hasAdditionalHorizontalPadding = false,
   disabled,
   style,
-  containerStyle,
   stateLayerStyle,
   iconStyle,
   textStyle,
@@ -98,21 +97,18 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       hitSlop={hitSlop}
       onLayout={onLayout}
       style={(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
-        const resolvedStyle = typeof style === 'function' ? style(pressableState) : style
-        return [
-          theme.components.themedPressable.container(state, containerStyle),
-          resolvedStyle,
-        ]
+        const state = resolveState(pressableState)
+        return theme.components.themedPressable.container(state, style)
       }}
     >
       {(pressableState) => {
-        const state = resolveState(pressableState as PressableInteraction)
+        const state = resolveState(pressableState)
         const resolvedText = theme.components.themedPressable.text(state, textStyle)
         const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
         const resolvedChildren = typeof children === 'function'
           ? children(pressableState)
           : children
+        const backroundColor = theme.components.themedPressable.container(state, style).backgroundColor
 
         return (
           <Fragment>
@@ -128,6 +124,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
             />
             <ContentThemeOverrideProvider
               foreground={resolvedText.color}
+              background={backroundColor}
               textStyle={resolvedText}
               iconStyle={resolvedIcon}
             >

package/src/components/visualization-and-display/Avatar.tsx

@@ -226,19 +226,19 @@ export const AvatarGroup = ({
               isGrouped
               groupIndex={index}
               ImageComponent={avatar.ImageComponent ?? ImageComponent}
-              avatarStyle={(_, state) => avatarResolvers.container({
+              avatarStyle={(state) => avatarResolvers.container({
                 ...state,
                 ...avatarState,
               })}
-              imageStyle={(_, state) => avatarResolvers.image({
+              imageStyle={(state) => avatarResolvers.image({
                 ...state,
                 ...avatarState,
               })}
-              textStyle={(_, state) => avatarResolvers.text({
+              textStyle={(state) => avatarResolvers.text({
                 ...state,
                 ...avatarState,
               })}
-              iconStyle={(_, state) => avatarResolvers.icon({
+              iconStyle={(state) => avatarResolvers.icon({
                 ...state,
                 ...avatarState,
               })}
@@ -294,10 +294,10 @@ export const AvatarWithStatus = ({
         {...avatarProps}
         size={size}
         color={color}
-        avatarStyle={(_, state) => avatarResolvers.container(state, avatarStyle)}
-        imageStyle={(_, state) => avatarResolvers.image(state, imageStyle)}
-        textStyle={(_, state) => avatarResolvers.text(state, textStyle)}
-        iconStyle={(_, state) => avatarResolvers.icon(state, iconStyle)}
+        avatarStyle={(state) => avatarResolvers.container(state, avatarStyle)}
+        imageStyle={(state) => avatarResolvers.image(state, imageStyle)}
+        textStyle={(state) => avatarResolvers.text(state, textStyle)}
+        iconStyle={(state) => avatarResolvers.icon(state, iconStyle)}
       />
       <View style={resolvedStatusDot} />
     </View>

package/src/components/visualization-and-display/Chip.tsx

@@ -82,6 +82,7 @@ export const Chip = ({
     >
       <ContentThemeOverrideProvider
         foreground={resolvedTextStyle.color}
+        background={resolvedChipStyle.backgroundColor}
         textStyle={resolvedTextStyle}
         iconStyle={resolvedIconStyle}
       >

package/src/components/visualization-and-display/ThemedIcon.tsx

@@ -1,3 +1,5 @@
+import type {
+  ColorValue } from 'react-native'
 import {
   View,
   type ViewProps
@@ -16,7 +18,7 @@ export type ThemedIconAppearance = Appearance
 export type ThemedIconProps = Omit<ViewProps, 'children'> & {
   icon: IconComponent,
   size?: IconSize | number,
-  color?: string,
+  color?: ColorValue,
   strokeWidth?: number,
   appearance?: ThemedIconAppearance,
 }

package/src/global-contexts/content-theme/ContentThemeContext.ts

@@ -8,6 +8,7 @@ import type { IconStyle } from '../../icons'
 
 export type ContentThemeContextValue = {
   foreground: ColorValue,
+  background: ColorValue,
   textStyle: TextStyle,
   iconStyle: IconStyle,
 }

package/src/global-contexts/content-theme/ContentThemeProvider.tsx

@@ -16,14 +16,16 @@ export type ContentThemeRootProviderProps = PropsWithChildren & ContentThemeCont
 export const ContentThemeRootProvider = ({
   children,
   foreground,
+  background,
   textStyle,
   iconStyle,
 }: ContentThemeRootProviderProps) => {
   const value = useMemo((): ContentThemeContextValue => ({
     foreground,
+    background,
     textStyle,
     iconStyle,
-  }), [foreground, textStyle, iconStyle])
+  }), [foreground, background, textStyle, iconStyle])
 
   return (
     <ContentThemeContext.Provider value={value}>
@@ -32,7 +34,7 @@ export const ContentThemeRootProvider = ({
   )
 }
 
-type ForegroundOverride =
+type ColorOverride =
   | ColorValue
   | ((prev: ColorValue) => ColorValue)
 
@@ -45,38 +47,53 @@ type IconStyleOverride =
   | ((prev: IconStyle, foreground: ColorValue) => IconStyle)
 
 export type ContentThemeOverrideProviderProps = PropsWithChildren & {
-  foreground?: ForegroundOverride,
+  foreground?: ColorOverride,
+  background?: ColorOverride,
   textStyle?: TextStyleOverride,
   iconStyle?: IconStyleOverride,
+  isKeepingTextColor?: boolean,
+  isKeepingIconColor?: boolean,
 }
 
 export const ContentThemeOverrideProvider = ({
   children,
   foreground: foregroundOverride,
+  background: backroundOverride,
   textStyle: textStyleOverride,
   iconStyle: iconStyleOverride,
+  isKeepingIconColor = false,
+  isKeepingTextColor = false,
 }: ContentThemeOverrideProviderProps) => {
   const parent = useContentTheme()
 
   const value = useMemo((): ContentThemeContextValue => {
-    const foreground = typeof foregroundOverride === 'function'
+    const newForeground = typeof foregroundOverride === 'function'
       ? foregroundOverride(parent.foreground)
-      : foregroundOverride ?? parent.foreground
+      : foregroundOverride
+
+    const newBackground = typeof backroundOverride === 'function'
+      ? backroundOverride(parent.background)
+      : backroundOverride
 
     const textStyle = typeof textStyleOverride === 'function'
-      ? textStyleOverride(parent.textStyle, foreground)
+      ? textStyleOverride(parent.textStyle, parent.foreground)
       : textStyleOverride ?? parent.textStyle
 
+    if(!isKeepingTextColor && newForeground !== undefined) textStyle['color'] = newForeground
+
     const iconStyle = typeof iconStyleOverride === 'function'
-      ? iconStyleOverride(parent.iconStyle, foreground)
+      ? iconStyleOverride(parent.iconStyle, parent.foreground)
       : iconStyleOverride ?? parent.iconStyle
 
+    if(!isKeepingIconColor && newForeground !== undefined) iconStyle['color'] = newForeground
+
     return {
-      foreground,
+      foreground: newForeground ?? parent.foreground,
+      background: newBackground ?? parent.background,
       textStyle,
       iconStyle,
     }
-  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride])
+  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride, backroundOverride, isKeepingTextColor, isKeepingIconColor])
 
   return (
     <ContentThemeContext.Provider value={value}>

package/src/icons/types.ts

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react'
+import type { ColorValue } from 'react-native'
 
 export type IconStyle = {
   size?: number,
-  color?: string,
+  color?: ColorValue,
   strokeWidth?: number,
 }
 

package/src/theme/adapters/style-adapter-utils.ts

@@ -1,6 +1,8 @@
-import type {
-  TextStyle,
-  ViewStyle
+import {
+  StyleSheet,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle
 } from 'react-native'
 
 import type {
@@ -24,6 +26,36 @@ import {
 import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
 import type { IconStyle } from '../../icons'
 
+function getStyleProperty<
+  T extends ViewStyle,
+  K extends keyof T
+>(
+  style: StyleProp<T>,
+  property: K
+): T[K] {
+  if (style == null) {
+    return undefined as T[K]
+  }
+
+  if (Array.isArray(style)) {
+    for (let i = style.length - 1; i >= 0; i--) {
+      const value = getStyleProperty(
+        style[i] as StyleProp<T>,
+        property
+      )
+
+      if (value !== undefined) {
+        return value
+      }
+    }
+
+    return undefined as T[K]
+  }
+
+  const flattened = StyleSheet.flatten(style) as T
+  return flattened[property]
+}
+
 type OptionalViewStyle<K extends keyof ViewStyle> = {
   [P in K]?: ViewStyle[P]
 }
@@ -144,7 +176,6 @@ const alignContentStyleAdapter = (
 const borderRadiusStyleAdapter = (
   borderRadius?: BorderRadiusToken
 ): OptionalViewStyle<
-  | 'borderRadius'
   | 'borderTopLeftRadius'
   | 'borderTopRightRadius'
   | 'borderBottomLeftRadius'
@@ -156,16 +187,14 @@ const borderRadiusStyleAdapter = (
 
   if (borderRadius.type === 'all') {
     return {
-      borderRadius: borderRadius.value,
-      borderTopLeftRadius: undefined,
-      borderTopRightRadius: undefined,
-      borderBottomLeftRadius: undefined,
-      borderBottomRightRadius: undefined,
+      borderTopLeftRadius:  borderRadius.value,
+      borderTopRightRadius:  borderRadius.value,
+      borderBottomLeftRadius:  borderRadius.value,
+      borderBottomRightRadius:  borderRadius.value,
     }
   }
 
   return {
-    borderRadius: undefined,
     borderTopLeftRadius: borderRadius.topLeft,
     borderTopRightRadius: borderRadius.topRight,
     borderBottomLeftRadius: borderRadius.bottomLeft,
@@ -428,6 +457,7 @@ export const StyleAdapterUtils = {
   container: containerStyleAdapter,
   text: textStyleAdapter,
   icon: iconStyleAdapter,
+  stylePropResolver: getStyleProperty
 }
 
 export type StyleAdapters = typeof StyleAdapterUtils

package/src/theme/resolvers/chat/conversation-row.ts

@@ -67,20 +67,14 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
         themeTokens,
         semanticResolvers: semanticTokens,
-        overrides: {
-          size: pressableOverrides.overrides?.size,
-          color: pressableOverrides.overrides?.color,
-          coloringStyle: pressableOverrides.overrides?.coloringStyle,
-          coloringColorVariant: pressableOverrides.overrides?.coloringColorVariant,
-          hasAdditionalHorizontalPadding: pressableOverrides.overrides?.hasAdditionalHorizontalPadding,
-        },
+        overrides: pressableOverrides.overrides ?? {},
         state: toPressableInteractionState(pressableState),
       })
 
       return {
         container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
           ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
-          ...StyleAdapterUtils.container(pressableOverrides.container  = {}),
+          ...StyleAdapterUtils.container(pressableOverrides.container ?? {}),
         })),
         stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
           ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
@@ -89,15 +83,15 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
           right: 0,
           bottom: 0,
           left: 0,
-          ...StyleAdapterUtils.container(pressableOverrides.stateLayer  = {}),
+          ...StyleAdapterUtils.container(pressableOverrides.stateLayer ?? {}),
         })),
         text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
-          ...StyleAdapterUtils.text(pressableOverrides.text  = {}),
+          ...StyleAdapterUtils.text(pressableOverrides.text ?? {}),
         })),
         icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
           ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
-          ...StyleAdapterUtils.icon(pressableOverrides.icon  = {}),
+          ...StyleAdapterUtils.icon(pressableOverrides.icon ?? {}),
         })),
       }
     }),

package/src/theme/types/resolver.ts

@@ -41,7 +41,7 @@ export const toPressableInteractionState = (
 }
 
 export type StyleOverwrite<TState, TStyle> =
-  TStyle | ((prev: TStyle, state: TState) => TStyle)
+  TStyle | ((state: TState, prev: TStyle) => TStyle)
 
 export type StyleResolverFunction<TState, TStyle> = (
   props: TState,
@@ -67,7 +67,7 @@ export const createStyleResolver = <TState, TStyle>(
     }
 
     if (typeof overwrite === 'function') {
-      return (overwrite as (prev: TStyle, state: TState) => TStyle)(base, props)
+      return (overwrite as (state: TState, prev: TStyle) => TStyle)(props, base)
     }
 
     return [base, overwrite] as TStyle
@@ -91,7 +91,7 @@ export const createValueResolver = <TState, TValue>(
     }
 
     if (typeof overwrite === 'function') {
-      return (overwrite as (prev: TValue, state: TState) => TValue)(base, props)
+      return (overwrite as (state: TState, prev: TValue) => TValue)(props, base)
     }
 
     return overwrite