@helpwave/hightide-native 0.0.1 → 0.0.5

package/src/theme/resolvers/iconButton.ts

@@ -1,16 +1,26 @@
+import type { ViewStyle } from 'react-native'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+
+import {
+  isOutlineColoringStyle,
+  resolveColoringStyles
+} from '@/src/theme/resolvers/coloring'
+import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+import type {
+  IconButtonState,
+  IconButtonTheme
+} from '@/src/theme/types/components/iconButton'
 import {
-  componentLayouts,
-  toPx,
-  type ColoringTokensDefinitions,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { IconButtonState, IconButtonStyle, IconButtonTheme } from '../types'
-import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
 
 export type CreateIconButtonThemeOptions = {
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
 }
 
 export const createIconButtonTheme = ({
@@ -24,13 +34,13 @@ export const createIconButtonTheme = ({
     const tokens = coloring[color]
     const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
     const sizing = componentLayouts.element[size]
-    const outlineWidth = toPx(componentLayouts.shared.coloringOutlineWidth)
-    const dimension = toPx(sizing.height)
+    const outlineWidth = componentLayouts.shared.coloringOutlineWidth
+    const dimension = sizing.height
     const borderWidth = resolved.borderWidth > 0
       ? resolved.borderWidth
       : (isOutlineColoringStyle(coloringStyle) ? outlineWidth : 0)
 
-    const button: IconButtonStyle = {
+    const button: ViewStyle = {
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: resolved.backgroundColor,
@@ -38,7 +48,7 @@ export const createIconButtonTheme = ({
       borderWidth,
       width: dimension,
       height: dimension,
-      borderRadius: toPx(componentLayouts.button[size].borderRadius),
+      borderRadius: componentLayouts.button[size].borderRadius,
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
@@ -49,14 +59,14 @@ export const createIconButtonTheme = ({
   }
 
   return {
-    button: (state) => resolveState(state).button,
-    icon: (state) => resolveState(state).icon,
+    button: createStyleResolver((state) => resolveState(state).button),
+    icon: createValueResolver((state) => resolveState(state).icon),
   }
 }
 
 export const createIconButtonThemeFromDesign = (theme: DesignTokensTheme): IconButtonTheme => {
   return createIconButtonTheme({
-    semantic: theme.semantic,
-    coloring: theme.coloring,
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
   })
 }

package/src/theme/resolvers/index.ts

@@ -1,8 +1,10 @@
 export * from './button'
+export * from './chat'
 export * from './checkbox'
 export * from './chip'
 export * from './coloring'
 export * from './iconButton'
 export * from './input'
+export * from './menu'
 export * from './multiSelect'
 export * from './select'

package/src/theme/resolvers/input.ts

@@ -1,30 +1,39 @@
+import type { TextStyle } from 'react-native'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type {
+  InputState,
+  InputTheme
+} from '@/src/theme/types/components/input'
 import {
-  inputElementSizes,
-  remToPx,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { InputState, InputStyle, InputTheme } from '../types'
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
 
 export type CreateInputThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createInputTheme = ({
   semantic,
   component,
 }: CreateInputThemeOptions): InputTheme => {
-  const resolveInput = (state: InputState): InputStyle => {
-    const sizing = inputElementSizes.md
+  const resolveInput = (state: InputState): TextStyle => {
+    const sizing = componentLayouts.input.md
     const borderColor = state.isInvalid ? semantic.negative : component.border
 
     return {
-      minHeight: remToPx(sizing.height),
-      paddingHorizontal: remToPx(sizing.paddingX),
-      paddingVertical: remToPx(sizing.paddingY),
-      borderRadius: remToPx(sizing.borderRadius),
+      minHeight: sizing.height,
+      paddingHorizontal: sizing.paddingX,
+      paddingVertical: sizing.paddingY,
+      borderRadius: sizing.borderRadius,
       borderWidth: 1,
       borderColor,
       backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
@@ -35,14 +44,14 @@ export const createInputTheme = ({
   }
 
   return {
-    input: resolveInput,
-    placeholderColor: () => semantic.placeholder,
+    input: createStyleResolver(resolveInput),
+    placeholderColor: createValueResolver(() => semantic.placeholder),
   }
 }
 
 export const createInputThemeFromDesign = (theme: DesignTokensTheme): InputTheme => {
   return createInputTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/resolvers/menu.ts

@@ -0,0 +1,120 @@
+import { StyleSheet } from 'react-native'
+
+import { fontWeights } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type {
+  MenuActionItemState,
+  MenuTheme
+} from '@/src/theme/types/components/menu'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
+
+export type CreateMenuThemeOptions = {
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
+}
+
+export const createMenuTheme = ({
+  semantic,
+  component,
+}: CreateMenuThemeOptions): MenuTheme => {
+  const resolveActionItem = (state: MenuActionItemState) => {
+    const pressed = !!state.isPressed && !state.isDisabled
+
+    return {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      minHeight: 64,
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+      backgroundColor: pressed ? semantic.surfaceHover : ('transparent' as const),
+      opacity: state.isDisabled ? 0.6 : 1,
+    }
+  }
+
+  const resolveItemContent = () => ({
+    flex: 1,
+    gap: 4,
+    justifyContent: 'center' as const,
+  })
+
+  const resolveActionLabel = (state: MenuActionItemState) => ({
+    color: state.isDanger ? semantic.negative : semantic.onSurface,
+    fontSize: 15,
+    fontWeight: fontWeights.medium,
+  })
+
+  const resolveActionIcon = (state: MenuActionItemState) => ({
+    color: state.isDanger ? semantic.negative : semantic.primary,
+  })
+
+  return {
+    section: createStyleResolver(() => ({
+      marginBottom: 20,
+      gap: 8,
+    })),
+    sectionTitle: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: 12,
+      fontWeight: fontWeights.bold,
+      letterSpacing: 0.4,
+      textTransform: 'uppercase',
+      paddingHorizontal: 4,
+    })),
+    card: createStyleResolver(() => ({
+      backgroundColor: semantic.surface,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: component.border,
+      overflow: 'hidden',
+    })),
+    item: createStyleResolver(() => ({
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      minHeight: 64,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: component.divider,
+      gap: 12,
+    })),
+    itemContent: createStyleResolver(resolveItemContent),
+    itemLabel: createStyleResolver(() => ({
+      color: semantic.description,
+      fontSize: 12,
+    })),
+    itemValue: createStyleResolver(() => ({
+      color: semantic.onSurface,
+      fontSize: 15,
+      fontWeight: fontWeights.medium,
+    })),
+    actionItem: createStyleResolver(resolveActionItem),
+    actionItemContent: createStyleResolver(resolveItemContent),
+    actionItemLabel: createStyleResolver(resolveActionLabel),
+    actionItemIcon: createValueResolver(resolveActionIcon),
+    navigationItem: createStyleResolver(resolveActionItem),
+    navigationItemContent: createStyleResolver(resolveItemContent),
+    navigationItemLabel: createStyleResolver(resolveActionLabel),
+    navigationItemIcon: createValueResolver(resolveActionIcon),
+    navigationItemTrailing: createValueResolver(() => ({
+      color: semantic.description,
+    })),
+  }
+}
+
+export const createMenuThemeFromDesign = (theme: DesignTokensTheme): MenuTheme => {
+  return createMenuTheme({
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
+  })
+}

package/src/theme/resolvers/multiSelect.ts

@@ -1,18 +1,23 @@
-import {
-  remToPx,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
+import { fontWeights } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '@/src/theme/types/color'
 import type {
   MultiSelectOptionState,
   MultiSelectState,
   MultiSelectTheme
-} from '../types'
+} from '@/src/theme/types/components/multiSelect'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
 
 export type CreateMultiSelectThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createMultiSelectTheme = ({
@@ -20,44 +25,44 @@ export const createMultiSelectTheme = ({
   component,
 }: CreateMultiSelectThemeOptions): MultiSelectTheme => {
   return {
-    trigger: (state: MultiSelectState) => ({
+    trigger: createStyleResolver((state: MultiSelectState) => ({
       minHeight: 44,
-      paddingHorizontal: remToPx('0.75rem'),
-      paddingVertical: remToPx('0.5rem'),
-      borderRadius: remToPx('0.375rem'),
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: 6,
       borderWidth: 1,
       borderColor: state.isInvalid ? semantic.negative : component.border,
       backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
       justifyContent: 'center',
       gap: 8,
       opacity: state.isDisabled ? 0.6 : 1,
-    }),
-    triggerText: () => ({
+    })),
+    triggerText: createStyleResolver(() => ({
       color: semantic.placeholder,
-    }),
-    overlay: () => ({
+    })),
+    overlay: createStyleResolver(() => ({
       flex: 1,
       backgroundColor: '#00000059',
       justifyContent: 'center',
       padding: 24,
-    }),
-    menu: () => ({
+    })),
+    menu: createStyleResolver(() => ({
       maxHeight: 360,
       borderRadius: 12,
       backgroundColor: component.menu.background,
       borderWidth: 1,
       borderColor: component.menu.border,
       overflow: 'hidden',
-    }),
-    search: () => ({
+    })),
+    search: createStyleResolver(() => ({
       paddingHorizontal: 16,
       paddingVertical: 12,
       borderBottomWidth: 1,
       borderBottomColor: component.menu.border,
       color: component.menu.text,
-    }),
-    searchPlaceholderColor: () => semantic.placeholder,
-    option: (state: MultiSelectOptionState) => ({
+    })),
+    searchPlaceholderColor: createValueResolver(() => semantic.placeholder),
+    option: createStyleResolver((state: MultiSelectOptionState) => ({
       paddingHorizontal: 16,
       paddingVertical: 12,
       backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
@@ -65,12 +70,12 @@ export const createMultiSelectTheme = ({
       flexDirection: 'row',
       alignItems: 'center',
       gap: 10,
-    }),
-    optionText: (state: MultiSelectOptionState) => ({
+    })),
+    optionText: createStyleResolver((state: MultiSelectOptionState) => ({
       color: state.isSelected ? semantic.primary : component.menu.text,
-      fontWeight: state.isSelected ? '600' : '400',
-    }),
-    checkbox: (state: MultiSelectOptionState) => ({
+      fontWeight: state.isSelected ? fontWeights.semibold : fontWeights.base,
+    })),
+    checkbox: createStyleResolver((state: MultiSelectOptionState) => ({
       width: 18,
       height: 18,
       borderRadius: 4,
@@ -79,17 +84,17 @@ export const createMultiSelectTheme = ({
       backgroundColor: state.isSelected ? semantic.primary : 'transparent',
       alignItems: 'center',
       justifyContent: 'center',
-    }),
-    checkboxIcon: (state: MultiSelectOptionState) => ({
+    })),
+    checkboxIcon: createValueResolver((state: MultiSelectOptionState) => ({
       color: semantic.onPrimary,
       visible: !!state.isSelected,
-    }),
+    })),
   }
 }
 
 export const createMultiSelectThemeFromDesign = (theme: DesignTokensTheme): MultiSelectTheme => {
   return createMultiSelectTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/resolvers/select.ts

@@ -1,18 +1,23 @@
-import {
-  remToPx,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
+import { fontWeights } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '@/src/theme/types/color'
 import type {
   SelectOptionState,
   SelectState,
   SelectTheme
-} from '../types'
+} from '@/src/theme/types/components/select'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '@/src/theme/types/resolver'
 
 export type CreateSelectThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createSelectTheme = ({
@@ -20,58 +25,58 @@ export const createSelectTheme = ({
   component,
 }: CreateSelectThemeOptions): SelectTheme => {
   return {
-    trigger: (state: SelectState) => ({
+    trigger: createStyleResolver((state: SelectState) => ({
       minHeight: 44,
-      paddingHorizontal: remToPx('0.75rem'),
-      paddingVertical: remToPx('0.5rem'),
-      borderRadius: remToPx('0.375rem'),
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: 6,
       borderWidth: 1,
       borderColor: state.isInvalid ? semantic.negative : component.border,
       backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
       justifyContent: 'center',
       opacity: state.isDisabled ? 0.6 : 1,
-    }),
-    triggerText: (state: SelectState) => ({
+    })),
+    triggerText: createStyleResolver((state: SelectState) => ({
       color: state.hasValue ? component.input.text : semantic.placeholder,
-    }),
-    overlay: () => ({
+    })),
+    overlay: createStyleResolver(() => ({
       flex: 1,
       backgroundColor: '#00000059',
       justifyContent: 'center',
       padding: 24,
-    }),
-    menu: () => ({
+    })),
+    menu: createStyleResolver(() => ({
       maxHeight: 360,
       borderRadius: 12,
       backgroundColor: component.menu.background,
       borderWidth: 1,
       borderColor: component.menu.border,
       overflow: 'hidden',
-    }),
-    search: () => ({
+    })),
+    search: createStyleResolver(() => ({
       paddingHorizontal: 16,
       paddingVertical: 12,
       borderBottomWidth: 1,
       borderBottomColor: component.menu.border,
       color: component.menu.text,
-    }),
-    searchPlaceholderColor: () => semantic.placeholder,
-    option: (state: SelectOptionState) => ({
+    })),
+    searchPlaceholderColor: createValueResolver(() => semantic.placeholder),
+    option: createStyleResolver((state: SelectOptionState) => ({
       paddingHorizontal: 16,
       paddingVertical: 12,
       backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
       opacity: state.isDisabled ? 0.5 : 1,
-    }),
-    optionText: (state: SelectOptionState) => ({
+    })),
+    optionText: createStyleResolver((state: SelectOptionState) => ({
       color: state.isSelected ? semantic.primary : component.menu.text,
-      fontWeight: state.isSelected ? '600' : '400',
-    }),
+      fontWeight: state.isSelected ? fontWeights.semibold : fontWeights.base,
+    })),
   }
 }
 
 export const createSelectThemeFromDesign = (theme: DesignTokensTheme): SelectTheme => {
   return createSelectTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/themes/createTheme.ts

@@ -1,20 +1,47 @@
-import type { DesignTheme as DesignTokensTheme } from '@helpwave/hightide-design'
-import {
-  createButtonThemeFromDesign,
-  createCheckboxThemeFromDesign,
-  createChipThemeFromDesign,
-  createIconButtonThemeFromDesign,
-  createInputThemeFromDesign,
-  createMultiSelectThemeFromDesign,
-  createSelectThemeFromDesign
-} from '../resolvers'
-import type { DesignTheme } from '../types'
+import type {
+  ColorPaletteToken,
+  HightideDesignTokens
+} from '@helpwave/hightide-design/types'
 
-export const createDesignTheme = (tokens: DesignTokensTheme): DesignTheme => ({
-  palettes: tokens.palettes,
-  semantic: tokens.semantic,
-  coloring: tokens.coloring,
+import { createButtonThemeFromDesign } from '@/src/theme/resolvers/button'
+import { createChatThemeFromDesign } from '@/src/theme/resolvers/chat'
+import { createCheckboxThemeFromDesign } from '@/src/theme/resolvers/checkbox'
+import { createChipThemeFromDesign } from '@/src/theme/resolvers/chip'
+import { createIconButtonThemeFromDesign } from '@/src/theme/resolvers/iconButton'
+import { createInputThemeFromDesign } from '@/src/theme/resolvers/input'
+import { createMenuThemeFromDesign } from '@/src/theme/resolvers/menu'
+import { createMultiSelectThemeFromDesign } from '@/src/theme/resolvers/multiSelect'
+import { createSelectThemeFromDesign } from '@/src/theme/resolvers/select'
+import type {
+  Color,
+  ColorPalette,
+  HightideColors
+} from '@/src/theme/types/color'
+import type { Theme } from '@/src/theme/types/theme'
+
+const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette => {
+  if (token.type === 'singleValue') {
+    return token.value
+  }
+  return token.value
+}
+
+const unwrapColors = (colors: HightideDesignTokens['colors']): HightideColors & Record<string, Color | ColorPalette> => {
+  const result: Record<string, Color | ColorPalette> = {}
+  for (const [key, token] of Object.entries(colors)) {
+    result[key] = unwrapColorPaletteToken(token)
+  }
+  return result as HightideColors & Record<string, Color | ColorPalette>
+}
+
+export const createTheme = (tokens: HightideDesignTokens): Theme => ({
+  colors: unwrapColors(tokens.colors),
+  semantic: tokens.semanticColors,
+  typography: tokens.typography,
+  layout: tokens.layout,
+  decoration: tokens.decorcation,
   components: {
+    coloring: tokens.coloring,
     button: createButtonThemeFromDesign(tokens),
     iconButton: createIconButtonThemeFromDesign(tokens),
     chip: createChipThemeFromDesign(tokens),
@@ -22,5 +49,7 @@ export const createDesignTheme = (tokens: DesignTokensTheme): DesignTheme => ({
     input: createInputThemeFromDesign(tokens),
     select: createSelectThemeFromDesign(tokens),
     multiSelect: createMultiSelectThemeFromDesign(tokens),
+    chat: createChatThemeFromDesign(tokens),
+    menu: createMenuThemeFromDesign(tokens),
   },
 })

package/src/theme/themes/nativeThemes.ts

@@ -1,15 +1,16 @@
-import { themes as designThemes } from '@helpwave/hightide-design'
-import { createDesignTheme } from './createTheme'
+import { Themes as designThemes } from '@helpwave/hightide-design/tokens'
 
-export const lightTheme = createDesignTheme(designThemes.light)
+import { createTheme } from '@/src/theme/themes/createTheme'
 
-export const darkTheme = createDesignTheme(designThemes.dark)
+export const lightTheme = createTheme(designThemes.light)
+
+export const darkTheme = createTheme(designThemes.dark)
 
 export const themes = {
   light: lightTheme,
   dark: darkTheme,
 } as const
 
-export type ThemeMode = keyof typeof themes
+export type HightideThemeModes = 'dark' | 'light'
 
-export const getTheme = (mode: ThemeMode) => themes[mode]
+export type ThemeMode = string | HightideThemeModes