@helpwave/hightide-native 0.1.1 → 0.3.0

package/src/theme/resolvers/switch.ts

@@ -2,7 +2,6 @@ import type {
   SwitchState as DesignSwitchState,
   SwitchStateValue
 } from '@helpwave/hightide-design/component-token-resolvers'
-import { toContainerStyle } from '../adapters/container-adapter'
 import type {
   SwitchContainerStyle,
   SwitchState,
@@ -15,6 +14,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 const toDesignSwitchState = (state: SwitchState = {}): DesignSwitchState => {
   const active = new Set<SwitchStateValue>()
 
@@ -59,13 +60,13 @@ export const toSwitchThemeResolvers: ComponentThemeResolver<SwitchThemeResolvers
 
   return {
     container: createStyleResolver((state: SwitchState): SwitchContainerStyle => (
-      toContainerStyle(resolve(state).container)
+      StyleAdapterUtils.container(resolve(state).container)
     )),
     track: createStyleResolver((state: SwitchState): SwitchTrackStyle => (
-      toContainerStyle(resolve(state).track)
+      StyleAdapterUtils.container(resolve(state).track)
     )),
     thumb: createStyleResolver((state: SwitchState): SwitchThumbStyle => (
-      toContainerStyle(resolve(state).thumb)
+      StyleAdapterUtils.container(resolve(state).thumb)
     )),
   }
 }

package/src/theme/resolvers/themedPressable.ts

@@ -1,6 +1,5 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  ThemedPressableIconStyle,
   ThemedPressableState,
   ThemedPressableStyle,
   ThemedPressableTextStyle,
@@ -8,10 +7,13 @@ import type {
 } from '../types/components/themedPressable'
 import {
   createStyleResolver,
+  createValueResolver,
   toPressableInteractionState,
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPressableThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -32,14 +34,14 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
 
   return {
     container: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => ({
-      ...toContainerStyle(resolve(state).container),
+      ...StyleAdapterUtils.container(resolve(state).container),
       alignSelf: 'flex-start',
     })),
     stateLayer: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => {
       const tokens = resolve(state)
 
       return {
-        ...toContainerStyle(tokens.stateLayer),
+        ...StyleAdapterUtils.container(tokens.stateLayer),
         position: 'absolute',
         top: 0,
         right: 0,
@@ -47,8 +49,11 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
         left: 0,
       }
     }),
+    icon: createValueResolver((state: ThemedPressableState): ThemedPressableIconStyle => (
+      StyleAdapterUtils.icon(resolve(state).icon)
+    )),
     text: createStyleResolver((state: ThemedPressableState): ThemedPressableTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.text(resolve(state).text)
     )),
   }
 }

package/src/theme/themes/createHightideTheme.ts

@@ -58,6 +58,7 @@ const resolveElementLayouts = (themeTokens: ThemeTokens): ElementLayoutTokens =>
 })
 
 const bindSemantics = (themeTokens: ThemeTokens): HightideThemeSemantics => ({
+  ...resolveElementLayouts(themeTokens),
   coloringColorVariant: (parameter) => hightideSemanticTokenResolvers.coloringColorVariant({
     themeTokens,
     ...parameter,
@@ -114,19 +115,27 @@ const bindSemantics = (themeTokens: ThemeTokens): HightideThemeSemantics => ({
 
 export const createHightideTheme = (themeTokens: ThemeTokens): HightideTheme => ({
   colors: themeTokens.color,
-  semantics: bindSemantics(themeTokens),
+  fontFamilies: themeTokens.fontFamilies,
+  fontWeights: themeTokens.fontWeights,
+  fontSizing: themeTokens.fontSizing,
   typography: themeTokens.typography,
   icongraphy: themeTokens.icongraphy,
+  size: themeTokens.size,
   spacing: themeTokens.spacing,
-  elements: resolveElementLayouts(themeTokens),
-  borderRadius: themeTokens.shape.borderRadius,
-  border: themeTokens.borderWidth,
+  padding: themeTokens.padding,
+  borderRadius: themeTokens.borderRadius,
+  borderWidth: themeTokens.borderWidth,
+  elevation: themeTokens.elevation,
   shadow: {
     raised: themeTokens.elevation.level1,
     container: themeTokens.elevation.level2,
     popover: themeTokens.elevation.level3,
     dialog: themeTokens.elevation.level4,
   },
+  motion: themeTokens.motion,
+  focusOutline: themeTokens.focusOutline,
+  config: themeTokens.config,
+  semantics: bindSemantics(themeTokens),
   components: {
     button: toButtonThemeResolvers({
       themeTokens,

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

@@ -24,12 +24,15 @@ export type ChatConversationRowState = InteractionState & {
   isSelected?: boolean,
 }
 
-export type ChatConversationRowStyle = ViewStyle
+export type ChatConversationRowContentContainerStyle = ViewStyle
+export type ChatConversationRowHeaderRowStyle = ViewStyle
+export type ChatConversationRowMessageRowStyle = ViewStyle
 export type ChatConversationRowTitleStyle = TextStyle
 export type ChatConversationRowTimestampStyle = TextStyle
 export type ChatConversationRowPreviewStyle = TextStyle
 export type ChatConversationRowUnreadBadgeStyle = ViewStyle
 export type ChatConversationRowUnreadBadgeTextStyle = TextStyle
+export type ChatConversationRowSentIndicatorStyle = IconStyle
 
 export type ChatConversationListStyle = ViewStyle
 export type ChatConversationListHeaderStyle = ViewStyle
@@ -61,6 +64,7 @@ export type ChatAttachmentMessageBubbleState = {
 export type PressableContainerStyle = ViewStyle
 export type PressableStateLayerStyle = ViewStyle
 export type PressableTextStyle = TextStyle
+export type PressableIconStyle = IconStyle
 
 export type PressableState = ThemedPressableState
 
@@ -91,13 +95,40 @@ export type ChatMessageComposerStyle = ViewStyle
 export type ChatMessageComposerInputStyle = ViewStyle & TextStyle
 
 export type ChatConversationRowThemeResolvers = {
-  container: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
+  pressable: StyleResolverFunction<
+    ChatConversationRowState,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
+    }
+  >,
+  contentContainer: StyleResolverFunction<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
+  headerRow: StyleResolverFunction<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
+  messageRow: StyleResolverFunction<ChatConversationRowState, ChatConversationRowMessageRowStyle>,
   title: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTitleStyle>,
   timestamp: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTimestampStyle>,
   preview: StyleResolverFunction<ChatConversationRowState, ChatConversationRowPreviewStyle>,
   unreadBadge: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeStyle>,
   unreadBadgeText: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeTextStyle>,
-  sentIndicator: StyleResolverFunction<Record<string, never>, ChatMessageBubbleMetaDataIconStyle>,
+  sentIndicator: StyleResolverFunction<Record<string, never>, ChatConversationRowSentIndicatorStyle>,
+  avatar: StyleResolverFunction<
+    AvatarState,
+    AvatarThemeResolvers
+  >,
 }
 
 export type ChatConversationListThemeResolvers = {
@@ -115,6 +146,27 @@ export type ChatThreadHeaderThemeResolvers = {
     AvatarState,
     AvatarThemeResolvers
   >,
+  pressable: StyleResolverFunction<
+    Record<string, never>,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
+    }
+  >,
 }
 
 export type ChatMessageListThemeResolvers = {
@@ -158,6 +210,10 @@ export type ChatAttachmentMessageBubbleThemeResolvers = {
         PressableState,
         PressableTextStyle
       >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
     }
   >,
   fileIconContainer: StyleResolverFunction<ChatAttachmentMessageBubbleState, ChatAttachmentMessageBubbleFileIconContainerStyle>,
@@ -195,6 +251,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/multiSelect.ts

@@ -37,6 +37,7 @@ export type MultiSelectCheckboxIconStyle = IconStyle
 
 export type MultiSelectThemeResolvers = {
   trigger: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
+  stateLayer: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
   triggerText: StyleResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
   overlay: SimpleStyleResolver<SelectOverlayStyle>,
   menu: StyleResolverFunction<SelectMenuState, SelectMenuStyle>,

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

@@ -48,6 +48,7 @@ export type SelectEmptyTextStyle = TextStyle
 
 export type SelectThemeResolvers = {
   trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
+  stateLayer: StyleResolverFunction<SelectState, SelectTriggerStyle>,
   triggerText: StyleResolverFunction<SelectState, SelectTriggerTextStyle>,
   icon: StyleResolverFunction<SelectState, SelectIconStyle>,
   overlay: SimpleStyleResolver<SelectOverlayStyle>,

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>,
 }

package/src/theme/types/layout.ts

@@ -1,20 +1,26 @@
 import type {
-  ElementLayoutTokens
-} from '@helpwave/hightide-design/semantic-token-resolvers'
-import type {
+  ThemeBorderRadiusTokens,
   ThemeBorderWidthTokens,
   ThemeElevationTokens,
-  ThemeShapeTokens,
+  ThemeMotionTokens,
+  ThemePaddingTokens,
+  ThemeSizeTokens,
   ThemeSpacingTokens
 } from '@helpwave/hightide-design/theme-tokens'
 
+export type HightideSize = ThemeSizeTokens
+
 export type HightideSpacing = ThemeSpacingTokens
 
-export type HightideElements = ElementLayoutTokens
+export type HightidePadding = ThemePaddingTokens
+
+export type HightideBorderRadius = ThemeBorderRadiusTokens
+
+export type HightideBorderWidth = ThemeBorderWidthTokens
 
-export type HightideBorderRadius = ThemeShapeTokens['borderRadius']
+export type HightideElevation = ThemeElevationTokens
 
-export type HightideBorder = ThemeBorderWidthTokens
+export type HightideMotion = ThemeMotionTokens
 
 export type HightideShadowToken = ThemeElevationTokens[keyof ThemeElevationTokens]
 

package/src/theme/types/semantics.ts

@@ -7,6 +7,7 @@ import type {
   ColoringToken,
   ContainerLayoutToken,
   ControlElementLayoutToken,
+  ElementLayoutTokens,
   InputColoringTokens,
   InsideControlElementLayoutToken,
   PressableColoringTokens,
@@ -69,4 +70,4 @@ export type HightideThemeSemantics = {
   asDescription: BoundSemanticResolver<{
     color: HexColorToken,
   }, HexColorToken>,
-}
+} & ElementLayoutTokens

package/src/theme/types/theme.ts

@@ -1,39 +1,67 @@
-import type { ThemeColorTokens } from '@helpwave/hightide-design/theme-tokens'
+import type {
+  OutlineToken,
+  ThemeColorTokens,
+  ThemeConfigTokens
+} from '@helpwave/hightide-design/theme-tokens'
 
 import type { HightideComponentThemes } from './components/hightide'
 import type { HightideIcongraphy } from './icongraphy'
 import type {
-  HightideBorder,
   HightideBorderRadius,
-  HightideElements,
+  HightideBorderWidth,
+  HightideElevation,
+  HightideMotion,
+  HightidePadding,
   HightideShadow,
+  HightideSize,
   HightideSpacing
 } from './layout'
 import type { HightideThemeSemantics } from './semantics'
-import type { HightideTypography } from './typography'
+import type {
+  HightideFontFamilies,
+  HightideFontSizing,
+  HightideFontWeights,
+  HightideTypography
+} from './typography'
 
 export type Theme = {
   colors: Record<string, unknown>,
-  semantics: Record<string, unknown>,
-  components: Record<string, unknown>,
+  fontFamilies: Record<string, unknown>,
+  fontWeights: Record<string, unknown>,
+  fontSizing: Record<string, unknown>,
   typography: Record<string, unknown>,
   icongraphy: Record<string, unknown>,
+  size: Record<string, unknown>,
   spacing: Record<string, unknown>,
-  elements: Record<string, unknown>,
+  padding: Record<string, unknown>,
   borderRadius: Record<string, unknown>,
-  border: Record<string, unknown>,
+  borderWidth: Record<string, unknown>,
+  elevation: Record<string, unknown>,
   shadow: Record<string, unknown>,
+  motion: Record<string, unknown>,
+  focusOutline: Record<string, unknown>,
+  config: Record<string, unknown>,
+  semantics: Record<string, unknown>,
+  components: Record<string, unknown>,
 }
 
 export type HightideTheme = Theme & {
   colors: ThemeColorTokens & Theme['colors'],
-  semantics: HightideThemeSemantics & Theme['semantics'],
-  components: HightideComponentThemes & Theme['components'],
+  fontFamilies: HightideFontFamilies & Theme['fontFamilies'],
+  fontWeights: HightideFontWeights & Theme['fontWeights'],
+  fontSizing: HightideFontSizing & Theme['fontSizing'],
   typography: HightideTypography & Theme['typography'],
   icongraphy: HightideIcongraphy & Theme['icongraphy'],
+  size: HightideSize & Theme['size'],
   spacing: HightideSpacing & Theme['spacing'],
-  elements: HightideElements & Theme['elements'],
+  padding: HightidePadding & Theme['padding'],
   borderRadius: HightideBorderRadius & Theme['borderRadius'],
-  border: HightideBorder & Theme['border'],
+  borderWidth: HightideBorderWidth & Theme['borderWidth'],
+  elevation: HightideElevation & Theme['elevation'],
   shadow: HightideShadow & Theme['shadow'],
+  motion: HightideMotion & Theme['motion'],
+  focusOutline: OutlineToken & Theme['focusOutline'],
+  config: ThemeConfigTokens & Theme['config'],
+  semantics: HightideThemeSemantics & Theme['semantics'],
+  components: HightideComponentThemes & Theme['components'],
 }

package/src/theme/types/typography.ts

@@ -1,16 +1,21 @@
 import type {
-  ThemeTypographyTokens,
+  ThemeFontFamilyTokens,
+  ThemeFontSizingTokens,
+  ThemeFontWeightTokens,
   ThemeTypographySize,
+  ThemeTypographyTokens,
   TypographyStyleToken
 } from '@helpwave/hightide-design/theme-tokens'
 
 export type TextStyle = TypographyStyleToken
 
-export type HightideTypography = ThemeTypographyTokens
+export type HightideFontFamilies = ThemeFontFamilyTokens
 
-export type HightideFontFamilies = ThemeTypographyTokens['fontFamilies']
+export type HightideFontWeights = ThemeFontWeightTokens
 
-export type HightideFontWeights = ThemeTypographyTokens['fontWeights']
+export type HightideFontSizing = ThemeFontSizingTokens
+
+export type HightideTypography = ThemeTypographyTokens
 
 export type TypographySizes = ThemeTypographySize