@helpwave/hightide-native 0.1.0 → 0.2.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "src"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.1.0",
+    "@helpwave/hightide-design": "0.2.0",
     "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -205,6 +205,9 @@ export const ChatAttachmentMessageBubble = ({
         textStyle={(_, pressableState) => (
           contentResolvers.text(pressableState)
         )}
+        iconStyle={(_, pressableState) => (
+          contentResolvers.icon(pressableState)
+        )}
       >
         <View style={resolvedFileIconContainerStyle}>
           {icon ?? (

package/src/components/chat/ChatQuickReplyChip.tsx

@@ -13,6 +13,7 @@ import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ChatQuickReplyChipState,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableTextStyle
 } from '../../theme/types/components/chat'
@@ -20,13 +21,14 @@ import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChatQuickReplyChipProps = Omit<
   ThemedPressableProps,
-  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle'
+  'children' | 'containerStyle' | 'textStyle' | 'stateLayerStyle' | 'iconStyle'
 > & {
   isActive?: boolean,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   containerStyle?: StyleOverwrite<PressableState, PressableContainerStyle>,
   textStyle?: StyleOverwrite<PressableState, PressableTextStyle>,
+  iconStyle?: StyleOverwrite<PressableState, PressableIconStyle>,
 }
 
 export const ChatQuickReplyChip = ({
@@ -36,6 +38,7 @@ export const ChatQuickReplyChip = ({
   style,
   containerStyle,
   textStyle,
+  iconStyle,
   ...props
 }: ChatQuickReplyChipProps) => {
   const { theme } = useTheme()
@@ -59,6 +62,9 @@ export const ChatQuickReplyChip = ({
       textStyle={(_, pressableState) => (
         pressableResolvers.text(pressableState, textStyle)
       )}
+      iconStyle={(_, pressableState) => (
+        pressableResolvers.icon(pressableState, iconStyle)
+      )}
     >
       {typeof children === 'string' || typeof children === 'number' ? (
         <ThemedText>{children}</ThemedText>

package/src/components/list/ListActionItem.tsx

@@ -12,23 +12,35 @@ import {
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
+  ListActionItemDescriptionStyle,
   ListActionItemState,
   ListActionItemStyle,
   ListActionItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
-  label: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   trailing?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListActionItemState, ListActionItemStyle>,
-  labelStyle?: StyleOverwrite<ListActionItemState, ListActionItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListActionItemState, ListActionItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListActionItemState, ListActionItemDescriptionStyle>,
 }
 
 type PressableInteraction = {
@@ -39,17 +51,29 @@ type PressableInteraction = {
 }
 
 export const ListActionItem = ({
-  label,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
   leading,
   trailing,
   color,
   disabled,
   style,
   itemStyle,
-  labelStyle,
+  titleStyle,
+  subtitleStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }: ListActionItemProps) => {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
 
   const resolveState = (interaction: PressableInteraction): ListActionItemState => ({
     color,
@@ -64,6 +88,8 @@ export const ListActionItem = ({
     <Pressable
       {...props}
       disabled={disabled}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return [theme.components.listItem.action.container(state, itemStyle), style]
@@ -74,22 +100,45 @@ export const ListActionItem = ({
         const resolvedLeadingItemContainerStyle = theme.components.listItem.action.leadingItemContainer(state)
         const resolvedContentStyle = theme.components.listItem.action.content(state)
         const resolvedTrailingItemContainerStyle = theme.components.listItem.action.trailingItemContainer(state)
-        const resolvedLabelStyle = theme.components.listItem.action.titleText(state, labelStyle)
+        const resolvedTitleStyle = theme.components.listItem.action.titleText(state, titleStyle)
+        const resolvedSubtitleStyle = theme.components.listItem.action.descriptionText(state, subtitleStyle)
+        const resolvedIconStyle = theme.components.listItem.action.icon(state)
 
         return (
           <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
             {leading != null && (
-              <View style={resolvedLeadingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedLeadingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {leading}
-              </View>
+              </ListItemAccessory>
             )}
             <View style={resolvedContentStyle}>
-              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
+              <ListItemTextContent
+                title={title}
+                subtitle={subtitle}
+                content={content}
+                contentOrder={contentOrder}
+                titleStyle={resolvedTitleStyle}
+                subtitleStyle={resolvedSubtitleStyle}
+              />
             </View>
             {trailing != null && (
-              <View style={resolvedTrailingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedTrailingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {trailing}
-              </View>
+              </ListItemAccessory>
             )}
           </Fragment>
         )

package/src/components/list/ListItem.tsx

@@ -12,7 +12,6 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
-import { ThemedText } from '../visualization-and-display/ThemedText'
 import type {
   ListItemDescriptionStyle,
   ListItemState,
@@ -20,29 +19,38 @@ import type {
   ListItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListItemProps = Omit<ViewProps, 'style'> & {
-  label: string,
-  value: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   trailing?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListItemState, ListItemStyle>,
-  labelStyle?: StyleOverwrite<ListItemState, ListItemDescriptionStyle>,
-  valueStyle?: StyleOverwrite<ListItemState, ListItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListItemState, ListItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListItemState, ListItemDescriptionStyle>,
 }
 
 export const ListItem = ({
-  label,
-  value,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'subtitleFirst',
   leading,
   trailing,
   color,
   style,
   itemStyle,
-  labelStyle,
-  valueStyle,
+  titleStyle,
+  subtitleStyle,
   ...props
 }: ListItemProps) => {
   const { theme } = useTheme()
@@ -66,30 +74,48 @@ export const ListItem = ({
     () => theme.components.listItem.default.trailingItemContainer(state),
     [theme, state]
   )
-  const resolvedLabelStyle = useMemo(
-    () => theme.components.listItem.default.descriptionText(state, labelStyle),
-    [theme, state, labelStyle]
+  const resolvedTitleStyle = useMemo(
+    () => theme.components.listItem.default.titleText(state, titleStyle),
+    [theme, state, titleStyle]
+  )
+  const resolvedSubtitleStyle = useMemo(
+    () => theme.components.listItem.default.descriptionText(state, subtitleStyle),
+    [theme, state, subtitleStyle]
   )
-  const resolvedValueStyle = useMemo(
-    () => theme.components.listItem.default.titleText(state, valueStyle),
-    [theme, state, valueStyle]
+  const resolvedIconStyle = useMemo(
+    () => theme.components.listItem.default.icon(state),
+    [theme, state]
   )
 
   return (
     <View {...props} style={[resolvedItemStyle, style]}>
       {leading != null && (
-        <View style={resolvedLeadingItemContainerStyle}>
+        <ListItemAccessory
+          style={resolvedLeadingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
           {leading}
-        </View>
+        </ListItemAccessory>
       )}
       <View style={resolvedContentStyle}>
-        <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
-        <ThemedText style={resolvedValueStyle}>{value}</ThemedText>
+        <ListItemTextContent
+          title={title}
+          subtitle={subtitle}
+          content={content}
+          contentOrder={contentOrder}
+          titleStyle={resolvedTitleStyle}
+          subtitleStyle={resolvedSubtitleStyle}
+        />
       </View>
       {trailing != null && (
-        <View style={resolvedTrailingItemContainerStyle}>
+        <ListItemAccessory
+          style={resolvedTrailingItemContainerStyle}
+          foreground={color?.onColor}
+          iconStyle={resolvedIconStyle}
+        >
           {trailing}
-        </View>
+        </ListItemAccessory>
       )}
     </View>
   )

package/src/components/list/ListItemAccessory.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import type { IconStyle } from '../../icons'
+
+export type ListItemAccessoryProps = {
+  children: ReactNode,
+  style?: StyleProp<ViewStyle>,
+  foreground?: HexColorToken,
+  iconStyle: IconStyle,
+}
+
+export const ListItemAccessory = ({
+  children,
+  style,
+  foreground,
+  iconStyle,
+}: ListItemAccessoryProps) => (
+  <View style={style}>
+    <ContentThemeOverrideProvider
+      foreground={foreground}
+      iconStyle={iconStyle}
+    >
+      {children}
+    </ContentThemeOverrideProvider>
+  </View>
+)

package/src/components/list/ListItemTextContent.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import { Fragment } from 'react'
+import type { StyleProp, TextStyle } from 'react-native'
+
+import { ThemedText } from '../visualization-and-display/ThemedText'
+
+export type ListItemContentOrder = 'titleFirst' | 'subtitleFirst'
+
+export type ListItemTextContentProps = {
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
+}
+
+export const ListItemTextContent = ({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  titleStyle,
+  subtitleStyle,
+}: ListItemTextContentProps & {
+  titleStyle?: StyleProp<TextStyle>,
+  subtitleStyle?: StyleProp<TextStyle>,
+}) => {
+  if (content != null) {
+    return <>{content}</>
+  }
+
+  const titleNode = title != null
+    ? <ThemedText style={titleStyle}>{title}</ThemedText>
+    : null
+  const subtitleNode = subtitle != null
+    ? <ThemedText style={subtitleStyle}>{subtitle}</ThemedText>
+    : null
+
+  if (contentOrder === 'subtitleFirst') {
+    return (
+      <Fragment>
+        {subtitleNode}
+        {titleNode}
+      </Fragment>
+    )
+  }
+
+  return (
+    <Fragment>
+      {titleNode}
+      {subtitleNode}
+    </Fragment>
+  )
+}

package/src/components/list/ListNavigationItem.tsx

@@ -14,22 +14,34 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
-import { ThemedText } from '../visualization-and-display/ThemedText'
+import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ListNavigationItemDescriptionStyle,
   ListNavigationItemState,
   ListNavigationItemStyle,
   ListNavigationItemTitleStyle
 } from '../../theme/types/components/listItem'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+import { ListItemAccessory } from './ListItemAccessory'
+import {
+  ListItemTextContent,
+  type ListItemContentOrder
+} from './ListItemTextContent'
 
 export type ListNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
-  label: string,
+  title?: string,
+  subtitle?: string,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
   leading?: ReactNode,
   color?: ColorPairToken,
   style?: StyleProp<ViewStyle>,
   itemStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemStyle>,
-  labelStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemTitleStyle>,
+  titleStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemTitleStyle>,
+  subtitleStyle?: StyleOverwrite<ListNavigationItemState, ListNavigationItemDescriptionStyle>,
 }
 
 type PressableInteraction = {
@@ -40,16 +52,28 @@ type PressableInteraction = {
 }
 
 export const ListNavigationItem = ({
-  label,
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
   leading,
   color,
   disabled,
   style,
   itemStyle,
-  labelStyle,
+  titleStyle,
+  subtitleStyle,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
   ...props
 }: ListNavigationItemProps) => {
   const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
 
   const resolveState = (interaction: PressableInteraction): ListNavigationItemState => ({
     color,
@@ -64,6 +88,8 @@ export const ListNavigationItem = ({
     <Pressable
       {...props}
       disabled={disabled}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
       style={(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         return [theme.components.listItem.navigation.container(state, itemStyle), style]
@@ -74,26 +100,44 @@ export const ListNavigationItem = ({
         const resolvedLeadingItemContainerStyle = theme.components.listItem.navigation.leadingItemContainer(state)
         const resolvedContentStyle = theme.components.listItem.navigation.content(state)
         const resolvedTrailingItemContainerStyle = theme.components.listItem.navigation.trailingItemContainer(state)
-        const resolvedLabelStyle = theme.components.listItem.navigation.titleText(state, labelStyle)
-        const resolvedIcon = theme.components.listItem.navigation.icon(state)
+        const resolvedTitleStyle = theme.components.listItem.navigation.titleText(state, titleStyle)
+        const resolvedSubtitleStyle = theme.components.listItem.navigation.descriptionText(state, subtitleStyle)
+        const resolvedIconStyle = theme.components.listItem.navigation.icon(state)
 
         return (
           <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
             {leading != null && (
-              <View style={resolvedLeadingItemContainerStyle}>
+              <ListItemAccessory
+                style={resolvedLeadingItemContainerStyle}
+                foreground={color?.onColor}
+                iconStyle={resolvedIconStyle}
+              >
                 {leading}
-              </View>
+              </ListItemAccessory>
             )}
             <View style={resolvedContentStyle}>
-              <ThemedText style={resolvedLabelStyle}>{label}</ThemedText>
-            </View>
-            <View style={resolvedTrailingItemContainerStyle}>
-              <ThemedIcon
-                icon={HightideIconRegistry.ChevronRight}
-                size={resolvedIcon.size}
-                color={resolvedIcon.color}
+              <ListItemTextContent
+                title={title}
+                subtitle={subtitle}
+                content={content}
+                contentOrder={contentOrder}
+                titleStyle={resolvedTitleStyle}
+                subtitleStyle={resolvedSubtitleStyle}
               />
             </View>
+            <ListItemAccessory
+              style={resolvedTrailingItemContainerStyle}
+              foreground={color?.onColor}
+              iconStyle={resolvedIconStyle}
+            >
+              <ThemedIcon icon={HightideIconRegistry.ChevronRight} />
+            </ListItemAccessory>
           </Fragment>
         )
       }}

package/src/components/list/index.ts

@@ -1,3 +1,5 @@
 export * from './ListActionItem'
 export * from './ListItem'
+export * from './ListItemAccessory'
+export * from './ListItemTextContent'
 export * from './ListNavigationItem'

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

@@ -10,7 +10,7 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { ComponentSize, ButtonVariant } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+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'
@@ -20,7 +20,6 @@ import type {
   ButtonTextStyle
 } from '../../theme/types/components/button'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { Color } from '../../theme/types/color'
 import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
 import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
 import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
@@ -122,26 +121,18 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
               pointerEvents="none"
               style={theme.components.button.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedText.color as Color}
+            <ContentThemeOverrideProvider
               textStyle={resolvedText}
+              iconStyle={resolvedIcon}
             >
               {leadingIcon !== undefined && (
-                <ThemedIcon
-                  icon={leadingIcon}
-                  size={resolvedIcon.size}
-                  strokeWidth={resolvedIcon.strokeWidth}
-                />
+                <ThemedIcon icon={leadingIcon} />
               )}
               <ThemedText>{children}</ThemedText>
               {trailingIcon !== undefined && (
-                <ThemedIcon
-                  icon={trailingIcon}
-                  size={resolvedIcon.size}
-                  strokeWidth={resolvedIcon.strokeWidth}
-                />
+                <ThemedIcon icon={trailingIcon} />
               )}
-            </ContentThemeProvider>
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}

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

@@ -12,7 +12,7 @@ import type {
   IconButtonVariant
 } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
@@ -105,7 +105,6 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedIcon = theme.components.iconButton.icon(state)
-        const resolvedText = theme.components.iconButton.text(state)
 
         return (
           <Fragment>
@@ -119,12 +118,11 @@ export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconB
               pointerEvents="none"
               style={theme.components.iconButton.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedIcon.color ?? theme.colors.primary.color}
-              textStyle={resolvedText}
+            <ContentThemeOverrideProvider
+              iconStyle={resolvedIcon}
             >
-              <ThemedIcon icon={IconComponent} size={resolvedIcon.size} strokeWidth={resolvedIcon.strokeWidth}/>
-            </ContentThemeProvider>
+              <ThemedIcon icon={IconComponent} />
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}

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

@@ -224,19 +224,17 @@ export const MultiSelect = ({
 
                   return (
                     <ListActionItem
-                      label={item.label ?? item.id}
+                      title={item.label ?? item.id}
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => multiSelect.toggleSelection(item.id)}
                       leading={(
                         <View style={multiSelectTheme.checkbox(optionState)}>
-                          {checkboxIcon.visible && (
-                            <ThemedIcon
-                              icon={HightideIconRegistry.Check}
-                              size="sm"
-                              color={checkboxIcon.color}
-                            />
-                          )}
+                          <ThemedIcon
+                            icon={HightideIconRegistry.Check}
+                            size="sm"
+                            color={checkboxIcon.color}
+                          />
                         </View>
                       )}
                     />

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

@@ -212,7 +212,7 @@ export const Select = ({
 
                   return (
                     <ListActionItem
-                      label={item.label ?? item.id}
+                      title={item.label ?? item.id}
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => select.selectValue(item.id)}

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

@@ -12,10 +12,11 @@ import type {
 } from '@helpwave/hightide-design/semantic-token-resolvers'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useDebugContext } from '../../global-contexts/debug'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ThemedPressableIconStyle,
   ThemedPressableState,
   ThemedPressableStyle,
   ThemedPressableTextStyle
@@ -40,6 +41,7 @@ export type ThemedPressableProps = PressableProps & {
   hasAdditionalHorizontalPadding?: boolean,
   containerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
   stateLayerStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableStyle>,
+  iconStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableIconStyle>,
   textStyle?: StyleOverwrite<ThemedPressableState, ThemedPressableTextStyle>,
 }
 
@@ -61,6 +63,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
   style,
   containerStyle,
   stateLayerStyle,
+  iconStyle,
   textStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
@@ -106,6 +109,7 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
       {(pressableState) => {
         const state = resolveState(pressableState as PressableInteraction)
         const resolvedText = theme.components.themedPressable.text(state, textStyle)
+        const resolvedIcon = theme.components.themedPressable.icon(state, iconStyle)
         const resolvedChildren = typeof children === 'function'
           ? children(pressableState)
           : children
@@ -122,12 +126,13 @@ export const ThemedPressable = forwardRef<React.ComponentRef<typeof Pressable>,
               pointerEvents="none"
               style={theme.components.themedPressable.stateLayer(state, stateLayerStyle)}
             />
-            <ContentThemeProvider
-              foregroundColor={resolvedText.color ?? theme.colors.surface.onColor}
+            <ContentThemeOverrideProvider
+              foreground={resolvedText.color}
               textStyle={resolvedText}
+              iconStyle={resolvedIcon}
             >
               {resolvedChildren}
-            </ContentThemeProvider>
+            </ContentThemeOverrideProvider>
           </Fragment>
         )
       }}

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

@@ -12,15 +12,15 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ChipIconStyle,
   ChipState,
   ChipStyle,
   ChipTextStyle
 } from '../../theme/types/components/chip'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { Color } from '../../theme/types/color'
 import { ThemedText } from './ThemedText'
 
 export type ChipSize = ComponentSize
@@ -39,6 +39,7 @@ export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   chipStyle?: StyleOverwrite<ChipState, ChipStyle>,
+  iconStyle?: StyleOverwrite<ChipState, ChipIconStyle>,
   textStyle?: StyleOverwrite<ChipState, ChipTextStyle>,
 }
 
@@ -49,6 +50,7 @@ export const Chip = ({
   size = 'md',
   style,
   chipStyle,
+  iconStyle,
   textStyle,
   ...props
 }: ChipProps) => {
@@ -64,6 +66,10 @@ export const Chip = ({
     () => theme.components.chip.chip(state, chipStyle),
     [theme, state, chipStyle]
   )
+  const resolvedIconStyle = useMemo(
+    () => theme.components.chip.icon(state, iconStyle),
+    [theme, state, iconStyle]
+  )
   const resolvedTextStyle = useMemo(
     () => theme.components.chip.text(state, textStyle),
     [theme, state, textStyle]
@@ -74,14 +80,15 @@ export const Chip = ({
       {...props}
       style={[resolvedChipStyle, style]}
     >
-      <ContentThemeProvider
-        foregroundColor={resolvedTextStyle.color as Color}
+      <ContentThemeOverrideProvider
+        foreground={resolvedTextStyle.color}
         textStyle={resolvedTextStyle}
+        iconStyle={resolvedIconStyle}
       >
         {typeof children === 'string' || typeof children === 'number'
           ? <ThemedText>{children}</ThemedText>
           : children}
-      </ContentThemeProvider>
+      </ContentThemeOverrideProvider>
     </View>
   )
 }

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

@@ -23,7 +23,7 @@ export type ThemedIconProps = Omit<ViewProps, 'children'> & {
 
 export const ThemedIcon = ({
   icon: Glyph,
-  size = 'md',
+  size,
   color,
   strokeWidth,
   appearance = 'normal',
@@ -31,15 +31,19 @@ export const ThemedIcon = ({
   ...props
 }: ThemedIconProps) => {
   const { theme } = useTheme()
-  const { foregroundColor } = useContentTheme()
-  const iconToken = typeof size === 'number'
+  const { foreground, iconStyle } = useContentTheme()
+  const resolvedSize = size ?? iconStyle.size ?? 'md'
+  const iconToken = typeof resolvedSize === 'number'
     ? {
-      size,
-      strokeWidth: strokeWidth ?? theme.components.icon.md.strokeWidth,
+      size: resolvedSize,
+      strokeWidth: strokeWidth ?? iconStyle.strokeWidth ?? theme.components.icon.md.strokeWidth,
     }
-    : theme.components.icon[size]
+    : theme.components.icon[resolvedSize]
 
-  const baseColor = (color ?? foregroundColor) as HexColorToken
+  // TODO fix this by using a hex color parser
+  const baseColor = (color
+    ?? iconStyle.color
+    ?? foreground) as HexColorToken
   const resolvedColor = appearance === 'normal'
     ? baseColor
     : theme.semantics.withAppearance({ color: baseColor, appearance })
@@ -64,7 +68,7 @@ export const ThemedIcon = ({
     >
       <Glyph
         size={iconToken.size}
-        strokeWidth={strokeWidth ?? iconToken.strokeWidth}
+        strokeWidth={strokeWidth ?? iconStyle.strokeWidth ?? iconToken.strokeWidth}
         color={resolvedColor}
       />
     </View>

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

@@ -23,9 +23,13 @@ export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTe
   ...props
 }, ref) {
   const { theme } = useTheme()
-  const { foregroundColor, textStyle } = useContentTheme()
+  const { foreground, textStyle } = useContentTheme()
+  // TODO use a hex color parser
+  const foregroundColor = (typeof textStyle.color === 'string'
+    ? textStyle.color
+    : foreground) as HexColorToken
   const color = appearance === 'description'
-    ? theme.semantics.asDescription({ color: foregroundColor as HexColorToken })
+    ? theme.semantics.asDescription({ color: foregroundColor })
     : foregroundColor
 
   return (

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

@@ -4,9 +4,12 @@ import {
 } from 'react'
 import type { ColorValue, TextStyle } from 'react-native'
 
+import type { IconStyle } from '../../icons'
+
 export type ContentThemeContextValue = {
-  foregroundColor: ColorValue,
+  foreground: ColorValue,
   textStyle: TextStyle,
+  iconStyle: IconStyle,
 }
 
 export const ContentThemeContext = createContext<ContentThemeContextValue | null>(null)
@@ -15,7 +18,7 @@ export const useContentTheme = (): ContentThemeContextValue => {
   const context = useContext(ContentThemeContext)
   if (!context) {
     throw new Error(
-      'useContentTheme must be used within ContentThemeProvider. Try adding a ContentThemeProvider around your app.'
+      'useContentTheme must be used within ContentThemeRootProvider. Try adding a ContentThemeRootProvider around your app.'
     )
   }
   return context

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

@@ -2,27 +2,81 @@ import {
   useMemo,
   type PropsWithChildren
 } from 'react'
-import type { TextStyle, ColorValue } from 'react-native'
+import type { ColorValue, TextStyle } from 'react-native'
 
+import type { IconStyle } from '../../icons'
 import {
   ContentThemeContext,
+  useContentTheme,
   type ContentThemeContextValue
 } from './ContentThemeContext'
 
-export type ContentThemeProviderProps = PropsWithChildren & {
-  foregroundColor: ColorValue,
-  textStyle: TextStyle,
-}
+export type ContentThemeRootProviderProps = PropsWithChildren & ContentThemeContextValue
 
-export const ContentThemeProvider = ({
+export const ContentThemeRootProvider = ({
   children,
-  foregroundColor,
+  foreground,
   textStyle,
-}: ContentThemeProviderProps) => {
+  iconStyle,
+}: ContentThemeRootProviderProps) => {
   const value = useMemo((): ContentThemeContextValue => ({
-    foregroundColor,
+    foreground,
     textStyle,
-  }), [foregroundColor, textStyle])
+    iconStyle,
+  }), [foreground, textStyle, iconStyle])
+
+  return (
+    <ContentThemeContext.Provider value={value}>
+      {children}
+    </ContentThemeContext.Provider>
+  )
+}
+
+type ForegroundOverride =
+  | ColorValue
+  | ((prev: ColorValue) => ColorValue)
+
+type TextStyleOverride =
+  | TextStyle
+  | ((prev: TextStyle, foreground: ColorValue) => TextStyle)
+
+type IconStyleOverride =
+  | IconStyle
+  | ((prev: IconStyle, foreground: ColorValue) => IconStyle)
+
+export type ContentThemeOverrideProviderProps = PropsWithChildren & {
+  foreground?: ForegroundOverride,
+  textStyle?: TextStyleOverride,
+  iconStyle?: IconStyleOverride,
+}
+
+export const ContentThemeOverrideProvider = ({
+  children,
+  foreground: foregroundOverride,
+  textStyle: textStyleOverride,
+  iconStyle: iconStyleOverride,
+}: ContentThemeOverrideProviderProps) => {
+  const parent = useContentTheme()
+
+  const value = useMemo((): ContentThemeContextValue => {
+    const foreground = typeof foregroundOverride === 'function'
+      ? foregroundOverride(parent.foreground)
+      : foregroundOverride ?? parent.foreground
+
+    const textStyle = typeof textStyleOverride === 'function'
+      ? textStyleOverride(parent.textStyle, foreground)
+      : textStyleOverride ?? parent.textStyle
+
+    const iconStyle = typeof iconStyleOverride === 'function'
+      ? iconStyleOverride(parent.iconStyle, foreground)
+      : iconStyleOverride ?? parent.iconStyle
+
+    return {
+      foreground,
+      textStyle,
+      iconStyle,
+    }
+  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride])
 
   return (
     <ContentThemeContext.Provider value={value}>

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -21,7 +21,7 @@ import {
 import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
 import type { ThemeMode } from '../../theme/themes/hightideThemes'
 import type { HightideTheme } from '../../theme/types/theme'
-import { ContentThemeProvider } from '../content-theme'
+import { ContentThemeRootProvider } from '../content-theme'
 
 export type ThemeProviderProps<T> = PropsWithChildren & {
   theme?: ThemeMode | null,
@@ -93,12 +93,17 @@ export const ThemeProvider = ({
 
   return (
     <ThemeContext.Provider value={contextValue}>
-      <ContentThemeProvider
-        foregroundColor={contextValue.theme.colors.surface.onColor}
+      <ContentThemeRootProvider
+        foreground={contextValue.theme.colors.surface.onColor}
         textStyle={contextValue.theme.typography.body.md}
+        iconStyle={{
+          size: contextValue.theme.icongraphy.sizes.md,
+          strokeWidth: contextValue.theme.icongraphy.strokeWidth,
+          color: contextValue.theme.colors.surface.onColor,
+        }}
       >
         {children}
-      </ContentThemeProvider>
+      </ContentThemeRootProvider>
     </ThemeContext.Provider>
   )
 }

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

@@ -25,6 +25,7 @@ import type {
   ChatMessageBubbleMetaDataStatusContainerStyle,
   ChatMessageBubbleMetaDataTextStyle,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableStateLayerStyle,
   PressableTextStyle
@@ -127,6 +128,9 @@ export const toChatAttachmentMessageBubbleThemeResolvers: ComponentThemeResolver
           ...toTextStyle(resolvePressable(pressableState).text),
           ...toOptionalTextStyle(contentContainer.text),
         })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => (
+          toIconStyle(resolvePressable(pressableState).icon)
+        )),
       }
     }),
     fileIconContainer: createStyleResolver((

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

@@ -1,14 +1,17 @@
 import type {
   ContainerTokens,
+  IconTokens,
   TextStyleTokens
 } 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 {
   ChatQuickReplyChipState,
   ChatQuickReplyChipThemeResolvers,
   PressableContainerStyle,
+  PressableIconStyle,
   PressableState,
   PressableStateLayerStyle,
   PressableTextStyle
@@ -28,6 +31,10 @@ const toOptionalTextStyle = (tokens?: TextStyleTokens): PressableTextStyle => (
   tokens === undefined ? {} : toTextStyle(tokens)
 )
 
+const toOptionalIconStyle = (tokens?: IconTokens): PressableIconStyle => (
+  tokens === undefined ? {} : toIconStyle(tokens)
+)
+
 export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuickReplyChipThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -74,6 +81,10 @@ export const toChatQuickReplyChipThemeResolvers: ComponentThemeResolver<ChatQuic
           ...toTextStyle(resolvePressable(pressableState).text),
           ...toOptionalTextStyle(tokens.text),
         })),
+        icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
+          ...toIconStyle(resolvePressable(pressableState).icon),
+          ...toOptionalIconStyle(tokens.icon),
+        })),
       }
     }),
   }

package/src/theme/resolvers/chip.ts

@@ -1,6 +1,8 @@
 import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
 import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  ChipIconStyle,
   ChipState,
   ChipStyle,
   ChipTextStyle,
@@ -8,6 +10,7 @@ import type {
 } from '../types/components/chip'
 import {
   createStyleResolver,
+  createValueResolver,
   type ComponentThemeResolver
 } from '../types/resolver'
 
@@ -30,6 +33,9 @@ export const toChipThemeResolvers: ComponentThemeResolver<ChipThemeResolvers> =
     chip: createStyleResolver((state: ChipState): ChipStyle => (
       toContainerStyle(resolve(state).container)
     )),
+    icon: createValueResolver((state: ChipState): ChipIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
     text: createStyleResolver((state: ChipState): ChipTextStyle => (
       toTextStyle(resolve(state).text)
     )),

package/src/theme/resolvers/iconButton.ts

@@ -1,11 +1,9 @@
 import { toContainerStyle } from '../adapters/container-adapter'
 import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   IconButtonIconStyle,
   IconButtonState,
   IconButtonStyle,
-  IconButtonTextStyle,
   IconButtonThemeResolvers
 } from '../types/components/iconButton'
 import {
@@ -49,8 +47,5 @@ export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeR
     icon: createValueResolver((state: IconButtonState): IconButtonIconStyle => (
       toIconStyle(resolve(state).icon)
     )),
-    text: createStyleResolver((state: IconButtonState): IconButtonTextStyle => (
-      toTextStyle(resolve(state).text)
-    )),
   }
 }

package/src/theme/resolvers/listItem.ts

@@ -3,6 +3,7 @@ import { toIconStyle } from '../adapters/icon-style-adapter'
 import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   ListActionItemContentStyle,
+  ListActionItemDescriptionStyle,
   ListActionItemIconStyle,
   ListActionItemLeadingItemContainerStyle,
   ListActionItemState,
@@ -98,6 +99,9 @@ const toListActionItemThemeResolvers: ComponentThemeResolver<ListActionItemTheme
     titleText: createStyleResolver((state: ListActionItemState): ListActionItemTitleStyle => (
       toTextStyle(resolve(state).titleText)
     )),
+    descriptionText: createStyleResolver((state: ListActionItemState): ListActionItemDescriptionStyle => (
+      toTextStyle(resolve(state).descriptionText)
+    )),
     icon: createValueResolver((state: ListActionItemState): ListActionItemIconStyle => (
       toIconStyle(resolve(state).icon)
     )),

package/src/theme/resolvers/themedPressable.ts

@@ -1,6 +1,8 @@
 import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
 import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  ThemedPressableIconStyle,
   ThemedPressableState,
   ThemedPressableStyle,
   ThemedPressableTextStyle,
@@ -8,6 +10,7 @@ import type {
 } from '../types/components/themedPressable'
 import {
   createStyleResolver,
+  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
@@ -47,6 +50,9 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
         left: 0,
       }
     }),
+    icon: createValueResolver((state: ThemedPressableState): ThemedPressableIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
     text: createStyleResolver((state: ThemedPressableState): ThemedPressableTextStyle => (
       toTextStyle(resolve(state).text)
     )),

package/src/theme/types/components/chat.ts

@@ -61,6 +61,7 @@ export type ChatAttachmentMessageBubbleState = {
 export type PressableContainerStyle = ViewStyle
 export type PressableStateLayerStyle = ViewStyle
 export type PressableTextStyle = TextStyle
+export type PressableIconStyle = IconStyle
 
 export type PressableState = ThemedPressableState
 
@@ -158,6 +159,10 @@ export type ChatAttachmentMessageBubbleThemeResolvers = {
         PressableState,
         PressableTextStyle
       >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
     }
   >,
   fileIconContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileIconContainerStyle>,
@@ -195,6 +200,10 @@ export type ChatQuickReplyChipThemeResolvers = {
         PressableState,
         PressableTextStyle
       >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
     }
   >,
 }

package/src/theme/types/components/chip.ts

@@ -7,6 +7,7 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
 import type { StyleResolverFunction } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type ChipState = {
   size?: ComponentSize,
@@ -18,7 +19,10 @@ export type ChipStyle = ViewStyle
 
 export type ChipTextStyle = TextStyle
 
+export type ChipIconStyle = IconStyle
+
 export type ChipThemeResolvers = {
   chip: StyleResolverFunction<ChipState, ChipStyle>,
+  icon: StyleResolverFunction<ChipState, ChipIconStyle>,
   text: StyleResolverFunction<ChipState, ChipTextStyle>,
 }

package/src/theme/types/components/iconButton.ts

@@ -1,7 +1,4 @@
-import type {
-  TextStyle,
-  ViewStyle
-} from 'react-native'
+import type { ViewStyle } from 'react-native'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type {
@@ -25,11 +22,8 @@ export type IconButtonStyle = ViewStyle
 
 export type IconButtonIconStyle = IconStyle
 
-export type IconButtonTextStyle = TextStyle
-
 export type IconButtonThemeResolvers = {
   container: StyleResolverFunction<IconButtonState, IconButtonStyle>,
   stateLayer: StyleResolverFunction<IconButtonState, IconButtonStyle>,
   icon: StyleResolverFunction<IconButtonState, IconButtonIconStyle>,
-  text: StyleResolverFunction<IconButtonState, IconButtonTextStyle>,
 }

package/src/theme/types/components/listItem.ts

@@ -52,6 +52,8 @@ export type ListActionItemTrailingItemContainerStyle = ViewStyle
 
 export type ListActionItemTitleStyle = TextStyle
 
+export type ListActionItemDescriptionStyle = TextStyle
+
 export type ListActionItemIconStyle = IconStyle
 
 export type ListActionItemThemeResolvers = {
@@ -60,6 +62,7 @@ export type ListActionItemThemeResolvers = {
   content: StyleResolverFunction<ListActionItemState, ListActionItemContentStyle>,
   trailingItemContainer: StyleResolverFunction<ListActionItemState, ListActionItemTrailingItemContainerStyle>,
   titleText: StyleResolverFunction<ListActionItemState, ListActionItemTitleStyle>,
+  descriptionText: StyleResolverFunction<ListActionItemState, ListActionItemDescriptionStyle>,
   icon: StyleResolverFunction<ListActionItemState, ListActionItemIconStyle>,
 }
 
@@ -75,6 +78,8 @@ export type ListNavigationItemTrailingItemContainerStyle = ListActionItemTrailin
 
 export type ListNavigationItemTitleStyle = ListActionItemTitleStyle
 
+export type ListNavigationItemDescriptionStyle = ListActionItemDescriptionStyle
+
 export type ListNavigationItemIconStyle = ListActionItemIconStyle
 
 export type ListNavigationItemThemeResolvers = ListActionItemThemeResolvers

package/src/theme/types/components/themedPressable.ts

@@ -11,6 +11,7 @@ import type {
   InteractionState,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type ThemedPressableState = InteractionState & {
   size?: ComponentSize,
@@ -24,8 +25,11 @@ export type ThemedPressableStyle = ViewStyle
 
 export type ThemedPressableTextStyle = TextStyle
 
+export type ThemedPressableIconStyle = IconStyle
+
 export type ThemedPressableThemeResolvers = {
   container: StyleResolverFunction<ThemedPressableState, ThemedPressableStyle>,
   stateLayer: StyleResolverFunction<ThemedPressableState, ThemedPressableStyle>,
+  icon: StyleResolverFunction<ThemedPressableState, ThemedPressableIconStyle>,
   text: StyleResolverFunction<ThemedPressableState, ThemedPressableTextStyle>,
 }