@helpwave/hightide-native 0.1.1 → 0.3.0

package/src/theme/resolvers/chat/attachment-message-bubble.ts

@@ -1,13 +1,7 @@
 import type {
-  ChatMessageDirection,
-  ContainerTokens,
-  IconTokens,
-  TextStyleTokens
+  ChatMessageDirection
 } from '@helpwave/hightide-design/component-token-resolvers'
 
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toIconStyle } from '../../adapters/icon-style-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatAttachmentMessageBubbleDownloadIconContainerStyle,
   ChatAttachmentMessageBubbleDownloadIconStyle,
@@ -25,6 +19,7 @@ import type {
   ChatMessageBubbleMetaDataStatusContainerStyle,
   ChatMessageBubbleMetaDataTextStyle,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableStateLayerStyle,
   PressableTextStyle
@@ -36,17 +31,7 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
-const toOptionalContainerStyle = (tokens?: ContainerTokens): ChatMessageBubbleContainerStyle => (
-  tokens === undefined ? {} : toContainerStyle(tokens)
-)
-
-const toOptionalTextStyle = (tokens?: TextStyleTokens): ChatMessageBubbleBodyTextStyle => (
-  tokens === undefined ? {} : toTextStyle(tokens)
-)
-
-const toOptionalIconStyle = (tokens?: IconTokens): ChatMessageBubbleMetaDataIconStyle => (
-  tokens === undefined ? {} : toIconStyle(tokens)
-)
+import { StyleAdapterUtils } from '../../adapters'
 
 export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver<
   ChatAttachmentMessageBubbleThemeResolvers
@@ -64,33 +49,33 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
   return {
     chatMessageBubbleOverrides: {
       container: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleContainerStyle => (
-        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.container)
+        StyleAdapterUtils.container(resolve(state.direction).chatMessageBubbleOverrides.container ?? {})
       )),
       body: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleBodyStyle => (
-        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.body)
+        StyleAdapterUtils.container(resolve(state.direction).chatMessageBubbleOverrides.body ?? {})
       )),
       bodyText: createStyleResolver((state: ChatAttachmentMessageBubbleState): ChatMessageBubbleBodyTextStyle => (
-        toOptionalTextStyle(resolve(state.direction).chatMessageBubbleOverrides.bodyText)
+        StyleAdapterUtils.text(resolve(state.direction).chatMessageBubbleOverrides.bodyText = {})
       )),
       metaDataContainer: createStyleResolver((
         state: ChatAttachmentMessageBubbleState
       ): ChatMessageBubbleMetaDataContainerStyle => (
-        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataContainer)
+        StyleAdapterUtils.container(resolve(state.direction).chatMessageBubbleOverrides.metaDataContainer = {})
       )),
       metaDataStatusContainer: createStyleResolver((
         state: ChatAttachmentMessageBubbleState
       ): ChatMessageBubbleMetaDataStatusContainerStyle => (
-        toOptionalContainerStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataStatusContainer)
+        StyleAdapterUtils.container(resolve(state.direction).chatMessageBubbleOverrides.metaDataStatusContainer = {})
       )),
       metaDataText: createStyleResolver((
         state: ChatAttachmentMessageBubbleState
       ): ChatMessageBubbleMetaDataTextStyle => (
-        toOptionalTextStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataText)
+        StyleAdapterUtils.text(resolve(state.direction).chatMessageBubbleOverrides.metaDataText = {})
       )),
       metaDataIcon: createValueResolver((
         state: ChatAttachmentMessageBubbleState
       ): ChatMessageBubbleMetaDataIconStyle => (
-        toOptionalIconStyle(resolve(state.direction).chatMessageBubbleOverrides.metaDataIcon)
+        StyleAdapterUtils.icon(resolve(state.direction).chatMessageBubbleOverrides.metaDataIcon = {})
       )),
     },
     contentContainer: createValueResolver((state: ChatAttachmentMessageBubbleState) => {
@@ -111,53 +96,56 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
 
       return {
         container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
-          ...toContainerStyle(resolvePressable(pressableState).container),
-          ...toOptionalContainerStyle(contentContainer.container),
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
+          ...StyleAdapterUtils.container(contentContainer.container = {}),
         })),
         stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
-          ...toContainerStyle(resolvePressable(pressableState).stateLayer),
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
           position: 'absolute',
           top: 0,
           right: 0,
           bottom: 0,
           left: 0,
-          ...toOptionalContainerStyle(contentContainer.stateLayer),
+          ...StyleAdapterUtils.container(contentContainer.stateLayer = {}),
         })),
         text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
-          ...toTextStyle(resolvePressable(pressableState).text),
-          ...toOptionalTextStyle(contentContainer.text),
+          ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
+          ...StyleAdapterUtils.text(contentContainer.text = {}),
         })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => (
+          StyleAdapterUtils.icon(resolvePressable(pressableState).icon)
+        )),
       }
     }),
     fileIconContainer: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleFileIconContainerStyle => (
-      toContainerStyle(resolve(state.direction).fileIconContainer)
+      StyleAdapterUtils.container(resolve(state.direction).fileIconContainer)
     )),
     fileIcon: createValueResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleFileIconStyle => (
-      toIconStyle(resolve(state.direction).fileIcon)
+      StyleAdapterUtils.icon(resolve(state.direction).fileIcon)
     )),
     downloadIconContainer: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleDownloadIconContainerStyle => (
-      toContainerStyle(resolve(state.direction).downloadIconContainer)
+      StyleAdapterUtils.container(resolve(state.direction).downloadIconContainer)
     )),
     downloadIcon: createValueResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleDownloadIconStyle => (
-      toIconStyle(resolve(state.direction).downloadIcon)
+      StyleAdapterUtils.icon(resolve(state.direction).downloadIcon)
     )),
     fileNameText: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleFileNameTextStyle => (
-      toTextStyle(resolve(state.direction).fileNameText)
+      StyleAdapterUtils.text(resolve(state.direction).fileNameText)
     )),
     fileMetadataText: createStyleResolver((
       state: ChatAttachmentMessageBubbleState
     ): ChatAttachmentMessageBubbleFileMetadataTextStyle => (
-      toTextStyle(resolve(state.direction).fileMetadataText)
+      StyleAdapterUtils.text(resolve(state.direction).fileMetadataText)
     )),
   }
 }

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

@@ -1,4 +1,3 @@
-import { toContainerStyle } from '../../adapters/container-adapter'
 import type {
   ChatConversationListFooterStyle,
   ChatConversationListHeaderStyle,
@@ -10,6 +9,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatConversationListThemeResolvers: ComponentThemeResolver<ChatConversationListThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -22,14 +23,14 @@ export const toChatConversationListThemeResolvers: ComponentThemeResolver<ChatCo
 
   return {
     container: createSimpleStyleResolver((): ChatConversationListStyle => ({
-      ...toContainerStyle(resolve().container),
+      ...StyleAdapterUtils.container(resolve().container),
       flex: 1,
     })),
     header: createSimpleStyleResolver((): ChatConversationListHeaderStyle => (
-      toContainerStyle(resolve().header)
+      StyleAdapterUtils.container(resolve().header)
     )),
     footer: createSimpleStyleResolver((): ChatConversationListFooterStyle => (
-      toContainerStyle(resolve().footer)
+      StyleAdapterUtils.container(resolve().footer)
     )),
   }
 }

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

@@ -1,24 +1,46 @@
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toIconStyle } from '../../adapters/icon-style-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
+  AvatarTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+
+import {
+  createAvatarStyleResolvers,
+  mergeAvatarTokens,
+  toDesignAvatarSize,
+  withNumericAvatarSize
+} from '../avatar'
+import type {
+  ChatConversationRowContentContainerStyle,
+  ChatConversationRowHeaderRowStyle,
+  ChatConversationRowMessageRowStyle,
   ChatConversationRowPreviewStyle,
+  ChatConversationRowSentIndicatorStyle,
   ChatConversationRowState,
-  ChatConversationRowStyle,
   ChatConversationRowThemeResolvers,
   ChatConversationRowTimestampStyle,
   ChatConversationRowTitleStyle,
   ChatConversationRowUnreadBadgeStyle,
   ChatConversationRowUnreadBadgeTextStyle,
-  ChatMessageBubbleMetaDataIconStyle
+  PressableContainerStyle,
+  PressableIconStyle,
+  PressableState,
+  PressableStateLayerStyle,
+  PressableTextStyle
 } from '../../types/components/chat'
+import type {
+  AvatarState,
+  AvatarThemeResolvers
+} from '../../types/components/avatar'
 import {
   createSimpleStyleResolver,
   createSimpleValueResolver,
   createStyleResolver,
+  createValueResolver,
+  toPressableInteractionState,
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatConversationRowThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -39,26 +61,104 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
   })
 
   return {
-    container: createStyleResolver((state: ChatConversationRowState): ChatConversationRowStyle => (
-      toContainerStyle(resolve(state).container)
+    pressable: createValueResolver((state: ChatConversationRowState) => {
+      const { pressableOverrides } = resolve(state)
+
+      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,
+        },
+        state: toPressableInteractionState(pressableState),
+      })
+
+      return {
+        container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
+          ...StyleAdapterUtils.container(pressableOverrides.container  = {}),
+        })),
+        stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          ...StyleAdapterUtils.container(pressableOverrides.stateLayer  = {}),
+        })),
+        text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
+          ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
+          ...StyleAdapterUtils.text(pressableOverrides.text  = {}),
+        })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+          ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
+          ...StyleAdapterUtils.icon(pressableOverrides.icon  = {}),
+        })),
+      }
+    }),
+    contentContainer: createStyleResolver((state: ChatConversationRowState): ChatConversationRowContentContainerStyle => (
+      StyleAdapterUtils.container(resolve(state).contentContainer)
+    )),
+    headerRow: createStyleResolver((state: ChatConversationRowState): ChatConversationRowHeaderRowStyle => (
+      StyleAdapterUtils.container(resolve(state).headerRow)
+    )),
+    messageRow: createStyleResolver((state: ChatConversationRowState): ChatConversationRowMessageRowStyle => (
+      StyleAdapterUtils.container(resolve(state).messageRow)
     )),
     title: createStyleResolver((state: ChatConversationRowState): ChatConversationRowTitleStyle => (
-      toTextStyle(resolve(state).title)
+      StyleAdapterUtils.text(resolve(state).title)
     )),
     timestamp: createStyleResolver((state: ChatConversationRowState): ChatConversationRowTimestampStyle => (
-      toTextStyle(resolve(state).timestamp)
+      StyleAdapterUtils.text(resolve(state).timestamp)
     )),
     preview: createStyleResolver((state: ChatConversationRowState): ChatConversationRowPreviewStyle => (
-      toTextStyle(resolve(state).preview)
+      StyleAdapterUtils.text(resolve(state).preview)
     )),
     unreadBadge: createSimpleStyleResolver((): ChatConversationRowUnreadBadgeStyle => (
-      toContainerStyle(resolve().unreadBadge)
+      StyleAdapterUtils.container(resolve().unreadBadge)
     )),
     unreadBadgeText: createSimpleStyleResolver((): ChatConversationRowUnreadBadgeTextStyle => (
-      toTextStyle(resolve().unreadBadgeText)
+      StyleAdapterUtils.text(resolve().unreadBadgeText)
     )),
-    sentIndicator: createSimpleValueResolver((): ChatMessageBubbleMetaDataIconStyle => (
-      toIconStyle(resolve().sentIndicator)
+    sentIndicator: createSimpleValueResolver((): ChatConversationRowSentIndicatorStyle => (
+      StyleAdapterUtils.icon(resolve().sentIndicator)
     )),
+    avatar: createValueResolver((state: AvatarState): AvatarThemeResolvers => {
+      const { avatarOverride } = resolve()
+
+      const resolveTokens = (avatarState: AvatarState): AvatarTokens => {
+        const tokens = mergeAvatarTokens(
+          componentTokens.avatar({
+            themeTokens,
+            semanticResolvers: semanticTokens,
+            config: {
+              isGrouped: avatarState.isGrouped,
+              groupIndex: avatarState.groupIndex,
+            },
+            overrides: {
+              color: avatarState.color ?? state.color ?? avatarOverride.overrides?.color,
+              size: toDesignAvatarSize(
+                avatarState.size ?? state.size ?? avatarOverride.overrides?.size
+              ),
+            },
+          }),
+          avatarOverride
+        )
+
+        const size = avatarState.size ?? state.size ?? avatarOverride.container?.size?.width
+        if (typeof size === 'number') {
+          return withNumericAvatarSize(tokens, size)
+        }
+
+        return tokens
+      }
+
+      return createAvatarStyleResolvers(resolveTokens, themeTokens)
+    }),
   }
 }

package/src/theme/resolvers/chat/date-divider.ts

@@ -1,5 +1,3 @@
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatDateDividerStyle,
   ChatDateDividerTextStyle,
@@ -10,6 +8,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatDateDividerThemeResolvers: ComponentThemeResolver<ChatDateDividerThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -22,10 +22,10 @@ export const toChatDateDividerThemeResolvers: ComponentThemeResolver<ChatDateDiv
 
   return {
     container: createSimpleStyleResolver((): ChatDateDividerStyle => (
-      toContainerStyle(resolve().container)
+      StyleAdapterUtils.container(resolve().container)
     )),
     text: createSimpleStyleResolver((): ChatDateDividerTextStyle => (
-      toTextStyle(resolve().text)
+      StyleAdapterUtils.text(resolve().text)
     )),
   }
 }

package/src/theme/resolvers/chat/message-bubble.ts

@@ -1,8 +1,5 @@
 import type { ChatMessageDirection } from '@helpwave/hightide-design/component-token-resolvers'
 
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toIconStyle } from '../../adapters/icon-style-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatMessageBubbleBodyStyle,
   ChatMessageBubbleBodyTextStyle,
@@ -20,6 +17,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatMessageBubbleThemeResolvers: ComponentThemeResolver<ChatMessageBubbleThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -33,25 +32,25 @@ export const toChatMessageBubbleThemeResolvers: ComponentThemeResolver<ChatMessa
 
   return {
     container: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleContainerStyle => (
-      toContainerStyle(resolve(state.direction).container)
+      StyleAdapterUtils.container(resolve(state.direction).container)
     )),
     body: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleBodyStyle => (
-      toContainerStyle(resolve(state.direction).body)
+      StyleAdapterUtils.container(resolve(state.direction).body)
     )),
     bodyText: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleBodyTextStyle => (
-      toTextStyle(resolve(state.direction).bodyText)
+      StyleAdapterUtils.text(resolve(state.direction).bodyText)
     )),
     metaDataContainer: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataContainerStyle => (
-      toContainerStyle(resolve(state.direction).metaDataContainer)
+      StyleAdapterUtils.container(resolve(state.direction).metaDataContainer)
     )),
     metaDataStatusContainer: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataStatusContainerStyle => (
-      toContainerStyle(resolve(state.direction).metaDataStatusContainer)
+      StyleAdapterUtils.container(resolve(state.direction).metaDataStatusContainer)
     )),
     metaDataText: createStyleResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataTextStyle => (
-      toTextStyle(resolve(state.direction).metaDataText)
+      StyleAdapterUtils.text(resolve(state.direction).metaDataText)
     )),
     metaDataIcon: createValueResolver((state: ChatMessageBubbleState): ChatMessageBubbleMetaDataIconStyle => (
-      toIconStyle(resolve(state.direction).metaDataIcon)
+      StyleAdapterUtils.icon(resolve(state.direction).metaDataIcon)
     )),
   }
 }

package/src/theme/resolvers/chat/message-composer.ts

@@ -1,5 +1,3 @@
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type { TextStyle } from 'react-native'
 import type {
   ChatMessageComposerInputStyle,
@@ -12,6 +10,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatMessageComposerThemeResolvers: ComponentThemeResolver<ChatMessageComposerThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -24,12 +24,11 @@ export const toChatMessageComposerThemeResolvers: ComponentThemeResolver<ChatMes
 
   return {
     container: createSimpleStyleResolver((): ChatMessageComposerStyle => (
-      toContainerStyle(resolve().container)
+      StyleAdapterUtils.container(resolve().container)
     )),
     input: createSimpleStyleResolver((): ChatMessageComposerInputStyle => ({
-      ...toContainerStyle(resolve().input),
-      ...toTextStyle(resolve().text),
-      flex: 1,
+      ...StyleAdapterUtils.container(resolve().input),
+      ...StyleAdapterUtils.text(resolve().text),
     })),
     placeholderColor: createSimpleValueResolver((): TextStyle => ({
       color: resolve().placeholder.color

package/src/theme/resolvers/chat/message-list.ts

@@ -1,4 +1,3 @@
-import { toContainerStyle } from '../../adapters/container-adapter'
 import type {
   ChatMessageListStyle,
   ChatMessageListThemeResolvers
@@ -8,6 +7,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatMessageListThemeResolvers: ComponentThemeResolver<ChatMessageListThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -20,7 +21,7 @@ export const toChatMessageListThemeResolvers: ComponentThemeResolver<ChatMessage
 
   return {
     container: createSimpleStyleResolver((): ChatMessageListStyle => ({
-      ...toContainerStyle(resolve().container),
+      ...StyleAdapterUtils.container(resolve().container),
       flex: 1,
     })),
   }

package/src/theme/resolvers/chat/quick-reply-chip.ts

@@ -1,14 +1,8 @@
-import type {
-  ContainerTokens,
-  TextStyleTokens
-} from '@helpwave/hightide-design/component-token-resolvers'
-
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatQuickReplyChipState,
   ChatQuickReplyChipThemeResolvers,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableStateLayerStyle,
   PressableTextStyle
@@ -20,13 +14,7 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
-const toOptionalContainerStyle = (tokens?: ContainerTokens): PressableContainerStyle => (
-  tokens === undefined ? {} : toContainerStyle(tokens)
-)
-
-const toOptionalTextStyle = (tokens?: TextStyleTokens): PressableTextStyle => (
-  tokens === undefined ? {} : toTextStyle(tokens)
-)
+import { StyleAdapterUtils } from '../../adapters'
 
 export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuickReplyChipThemeResolvers> = ({
   themeTokens,
@@ -58,21 +46,25 @@ export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuic
 
       return {
         container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
-          ...toContainerStyle(resolvePressable(pressableState).container),
-          ...toOptionalContainerStyle(tokens.container),
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
+          ...StyleAdapterUtils.container(tokens.container = {}),
         })),
         stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
-          ...toContainerStyle(resolvePressable(pressableState).stateLayer),
+          ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
           position: 'absolute',
           top: 0,
           right: 0,
           bottom: 0,
           left: 0,
-          ...toOptionalContainerStyle(tokens.stateLayer),
+          ...StyleAdapterUtils.container(tokens.stateLayer = {}),
         })),
         text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
-          ...toTextStyle(resolvePressable(pressableState).text),
-          ...toOptionalTextStyle(tokens.text),
+          ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
+          ...StyleAdapterUtils.text(tokens.text = {}),
+        })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+          ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
+          ...StyleAdapterUtils.icon(tokens.icon = {}),
         })),
       }
     }),

package/src/theme/resolvers/chat/system-line.ts

@@ -1,8 +1,5 @@
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
-import { toContainerStyle } from '../../adapters/container-adapter'
-import { toIconStyle } from '../../adapters/icon-style-adapter'
-import { toTextStyle } from '../../adapters/text-style-adapter'
 import type {
   ChatSystemLineIconStyle,
   ChatSystemLineState,
@@ -16,6 +13,8 @@ import {
   type ComponentThemeResolver
 } from '../../types/resolver'
 
+import { StyleAdapterUtils } from '../../adapters'
+
 export const toChatSystemLineThemeResolvers: ComponentThemeResolver<ChatSystemLineThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -29,13 +28,13 @@ export const toChatSystemLineThemeResolvers: ComponentThemeResolver<ChatSystemLi
 
   return {
     container: createStyleResolver((state: ChatSystemLineState): ChatSystemLineStyle => (
-      toContainerStyle(resolve(state.color).container)
+      StyleAdapterUtils.container(resolve(state.color).container)
     )),
     text: createStyleResolver((state: ChatSystemLineState): ChatSystemLineTextStyle => (
-      toTextStyle(resolve(state.color).text)
+      StyleAdapterUtils.text(resolve(state.color).text)
     )),
     icon: createValueResolver((state: ChatSystemLineState): ChatSystemLineIconStyle => (
-      toIconStyle(resolve(state.color).icon)
+      StyleAdapterUtils.icon(resolve(state.color).icon)
     )),
   }
 }