@helpwave/hightide-native 0.0.7 → 0.1.0

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

@@ -0,0 +1,86 @@
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+import type { IconStyle } from '../../../icons'
+
+export type ListItemState = {
+  color?: ColorPairToken,
+}
+
+export type ListItemStyle = ViewStyle
+
+export type ListItemLeadingItemContainerStyle = ViewStyle
+
+export type ListItemContentStyle = ViewStyle
+
+export type ListItemTrailingItemContainerStyle = ViewStyle
+
+export type ListItemDescriptionStyle = TextStyle
+
+export type ListItemTitleStyle = TextStyle
+
+export type ListItemIconStyle = IconStyle
+
+export type ListItemDefaultThemeResolvers = {
+  container: StyleResolverFunction<ListItemState, ListItemStyle>,
+  leadingItemContainer: StyleResolverFunction<ListItemState, ListItemLeadingItemContainerStyle>,
+  content: StyleResolverFunction<ListItemState, ListItemContentStyle>,
+  trailingItemContainer: StyleResolverFunction<ListItemState, ListItemTrailingItemContainerStyle>,
+  descriptionText: StyleResolverFunction<ListItemState, ListItemDescriptionStyle>,
+  titleText: StyleResolverFunction<ListItemState, ListItemTitleStyle>,
+  icon: StyleResolverFunction<ListItemState, ListItemIconStyle>,
+}
+
+export type ListActionItemState = InteractionState & {
+  color?: ColorPairToken,
+}
+
+export type ListActionItemStyle = ViewStyle
+
+export type ListActionItemLeadingItemContainerStyle = ViewStyle
+
+export type ListActionItemContentStyle = ViewStyle
+
+export type ListActionItemTrailingItemContainerStyle = ViewStyle
+
+export type ListActionItemTitleStyle = TextStyle
+
+export type ListActionItemIconStyle = IconStyle
+
+export type ListActionItemThemeResolvers = {
+  container: StyleResolverFunction<ListActionItemState, ListActionItemStyle>,
+  leadingItemContainer: StyleResolverFunction<ListActionItemState, ListActionItemLeadingItemContainerStyle>,
+  content: StyleResolverFunction<ListActionItemState, ListActionItemContentStyle>,
+  trailingItemContainer: StyleResolverFunction<ListActionItemState, ListActionItemTrailingItemContainerStyle>,
+  titleText: StyleResolverFunction<ListActionItemState, ListActionItemTitleStyle>,
+  icon: StyleResolverFunction<ListActionItemState, ListActionItemIconStyle>,
+}
+
+export type ListNavigationItemState = ListActionItemState
+
+export type ListNavigationItemStyle = ListActionItemStyle
+
+export type ListNavigationItemLeadingItemContainerStyle = ListActionItemLeadingItemContainerStyle
+
+export type ListNavigationItemContentStyle = ListActionItemContentStyle
+
+export type ListNavigationItemTrailingItemContainerStyle = ListActionItemTrailingItemContainerStyle
+
+export type ListNavigationItemTitleStyle = ListActionItemTitleStyle
+
+export type ListNavigationItemIconStyle = ListActionItemIconStyle
+
+export type ListNavigationItemThemeResolvers = ListActionItemThemeResolvers
+
+export type ListItemThemeResolvers = {
+  default: ListItemDefaultThemeResolvers,
+  action: ListActionItemThemeResolvers,
+  navigation: ListNavigationItemThemeResolvers,
+}

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

@@ -3,16 +3,21 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { Color } from '../color'
 import type {
+  SelectEmptyTextStyle,
+  SelectHeaderStyle,
+  SelectMenuState,
   SelectMenuStyle,
   SelectOptionState,
   SelectOverlayStyle,
-  SelectSearchStyle,
   SelectState,
   SelectTriggerTextStyle
 } from './select'
-import type { StyleResolverFunction } from '../resolver'
+import type {
+  SimpleStyleResolver,
+  StyleResolverFunction
+} from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type MultiSelectState = SelectState & {
   hasSelections?: boolean,
@@ -28,20 +33,17 @@ export type MultiSelectOptionTextStyle = TextStyle
 
 export type MultiSelectCheckboxStyle = ViewStyle
 
-export type MultiSelectCheckboxIconStyle = {
-  color: Color,
-  visible: boolean,
-}
+export type MultiSelectCheckboxIconStyle = IconStyle
 
-export type MultiSelectTheme = {
+export type MultiSelectThemeResolvers = {
   trigger: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
   triggerText: StyleResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
-  overlay: StyleResolverFunction<MultiSelectState, SelectOverlayStyle>,
-  menu: StyleResolverFunction<MultiSelectState, SelectMenuStyle>,
-  search: StyleResolverFunction<MultiSelectState, SelectSearchStyle>,
-  searchPlaceholderColor: StyleResolverFunction<MultiSelectState, Color>,
+  overlay: SimpleStyleResolver<SelectOverlayStyle>,
+  menu: StyleResolverFunction<SelectMenuState, SelectMenuStyle>,
+  header: SimpleStyleResolver<SelectHeaderStyle>,
   option: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
   optionText: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
+  emptyText: SimpleStyleResolver<SelectEmptyTextStyle>,
   checkbox: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,
   checkboxIcon: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxIconStyle>,
 }

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

@@ -0,0 +1,28 @@
+import type { TextStyle, ViewStyle } from 'react-native'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+
+export type SearchBarState = InteractionState & {
+  color?: ColorPairToken,
+}
+
+export type SearchBarContainerStyle = ViewStyle
+
+export type SearchBarInputStyle = TextStyle
+
+export type SearchBarPlaceholderStyle = TextStyle
+
+export type SearchBarIconButtonStyle = ViewStyle
+
+export type SearchBarThemeResolvers = {
+  container: StyleResolverFunction<SearchBarState, SearchBarContainerStyle>,
+  input: StyleResolverFunction<SearchBarState, SearchBarInputStyle>,
+  placeholder: StyleResolverFunction<SearchBarState, SearchBarPlaceholderStyle>,
+  iconButton: StyleResolverFunction<SearchBarState, SearchBarIconButtonStyle>,
+  iconButtonColor: StyleResolverFunction<SearchBarState, ColorPairToken>,
+}

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

@@ -3,20 +3,23 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { Color } from '../color'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
 import type {
   InteractionState,
+  SimpleStyleResolver,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type SelectState = InteractionState & {
-  isInvalid?: boolean,
-  isReadOnly?: boolean,
+  color?: ColorPairToken,
   isOpen?: boolean,
   hasValue?: boolean,
 }
 
 export type SelectOptionState = InteractionState & {
+  color?: ColorPairToken,
   isSelected?: boolean,
   isHighlighted?: boolean,
 }
@@ -25,23 +28,32 @@ export type SelectTriggerStyle = ViewStyle
 
 export type SelectTriggerTextStyle = TextStyle
 
+export type SelectIconStyle = IconStyle
+
+export type SelectMenuState = {
+  hasSearch?: boolean,
+}
+
 export type SelectOverlayStyle = ViewStyle
 
 export type SelectMenuStyle = ViewStyle
 
-export type SelectSearchStyle = TextStyle
+export type SelectHeaderStyle = ViewStyle
 
 export type SelectOptionStyle = ViewStyle
 
 export type SelectOptionTextStyle = TextStyle
 
-export type SelectTheme = {
+export type SelectEmptyTextStyle = TextStyle
+
+export type SelectThemeResolvers = {
   trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
   triggerText: StyleResolverFunction<SelectState, SelectTriggerTextStyle>,
-  overlay: StyleResolverFunction<SelectState, SelectOverlayStyle>,
-  menu: StyleResolverFunction<SelectState, SelectMenuStyle>,
-  search: StyleResolverFunction<SelectState, SelectSearchStyle>,
-  searchPlaceholderColor: StyleResolverFunction<SelectState, Color>,
+  icon: StyleResolverFunction<SelectState, SelectIconStyle>,
+  overlay: SimpleStyleResolver<SelectOverlayStyle>,
+  menu: StyleResolverFunction<SelectMenuState, SelectMenuStyle>,
+  header: SimpleStyleResolver<SelectHeaderStyle>,
   option: StyleResolverFunction<SelectOptionState, SelectOptionStyle>,
   optionText: StyleResolverFunction<SelectOptionState, SelectOptionTextStyle>,
+  emptyText: SimpleStyleResolver<SelectEmptyTextStyle>,
 }

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

@@ -0,0 +1,22 @@
+import type { ViewStyle } from 'react-native'
+
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+
+export type SwitchState = InteractionState & {
+  isActive?: boolean,
+}
+
+export type SwitchContainerStyle = ViewStyle
+
+export type SwitchTrackStyle = ViewStyle
+
+export type SwitchThumbStyle = ViewStyle
+
+export type SwitchThemeResolvers = {
+  container: StyleResolverFunction<SwitchState, SwitchContainerStyle>,
+  track: StyleResolverFunction<SwitchState, SwitchTrackStyle>,
+  thumb: StyleResolverFunction<SwitchState, SwitchThumbStyle>,
+}

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

@@ -0,0 +1,31 @@
+import type { TextStyle, ViewStyle } from 'react-native'
+
+import type {
+  ColoringColorVariant,
+  ColoringStyle,
+  ComponentSize
+} from '@helpwave/hightide-design/semantic-token-resolvers'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+
+export type ThemedPressableState = InteractionState & {
+  size?: ComponentSize,
+  color?: ColorPairToken,
+  coloringStyle?: ColoringStyle,
+  coloringColorVariant?: ColoringColorVariant,
+  hasAdditionalHorizontalPadding?: boolean,
+}
+
+export type ThemedPressableStyle = ViewStyle
+
+export type ThemedPressableTextStyle = TextStyle
+
+export type ThemedPressableThemeResolvers = {
+  container: StyleResolverFunction<ThemedPressableState, ThemedPressableStyle>,
+  stateLayer: StyleResolverFunction<ThemedPressableState, ThemedPressableStyle>,
+  text: StyleResolverFunction<ThemedPressableState, ThemedPressableTextStyle>,
+}

package/src/theme/types/decoration.ts

@@ -1,11 +1 @@
-export type BorderRadius = number | 'full'
-
-export type HightideDecoration = {
-  borderRadius: {
-    xs: BorderRadius,
-    sm: BorderRadius,
-    md: BorderRadius,
-    lg: BorderRadius,
-    xl: BorderRadius,
-  } & Record<string, BorderRadius>,
-}
+export {}

package/src/theme/types/icongraphy.ts

@@ -0,0 +1,8 @@
+import type {
+  IconSize,
+  ThemeIcongraphyTokens
+} from '@helpwave/hightide-design/theme-tokens'
+
+export type HightideIcongraphy = ThemeIcongraphyTokens
+
+export type IconSizes = IconSize

package/src/theme/types/index.ts

@@ -1,7 +1,9 @@
 export * from './color'
 export * from './components'
 export * from './decoration'
+export * from './icongraphy'
 export * from './layout'
 export * from './resolver'
+export * from './semantics'
 export * from './theme'
 export * from './typography'

package/src/theme/types/layout.ts

@@ -1,58 +1,26 @@
-export type ElementSize = 'xs' | 'sm' | 'md' | 'lg'
+import type {
+  ElementLayoutTokens
+} from '@helpwave/hightide-design/semantic-token-resolvers'
+import type {
+  ThemeBorderWidthTokens,
+  ThemeElevationTokens,
+  ThemeShapeTokens,
+  ThemeSpacingTokens
+} from '@helpwave/hightide-design/theme-tokens'
 
-export type HightideLayout = {
-  shared: {
-    spacingBase: number,
-    drawerIndent: number,
-    scrollbarWidth: number,
-    scrollbarPadding: number,
-    coloringOutlineWidth: number,
-    breakpoints: {
-      tablet: number,
-      desktop: number,
-    },
-  },
-  element: Record<ElementSize, { height: number, borderRadius: number }>,
-  elementPadding: Record<ElementSize, { vertical: number, horizontal: number }>,
-  button: Record<ElementSize, {
-    paddingY: number,
-    paddingX: number,
-    paddingYOutline: number,
-    paddingXOutline: number,
-    gap: number,
-    minWidth: number,
-    borderRadius: number,
-  }>,
-  iconButton: Record<ElementSize, {
-    paddingYOutline: number,
-    paddingXOutline: number,
-    borderRadius: number,
-  }>,
-  icon: Record<ElementSize, { size: number, strokeWidth: number }>,
-  input: Record<'md', {
-    height: number,
-    paddingX: number,
-    paddingY: number,
-    borderRadius: number,
-  }>,
-  chip: Record<ElementSize, {
-    minHeight: number,
-    paddingVertical: number,
-    paddingHorizontal: number,
-    gap: number,
-    borderRadius: number,
-    fontSize: number,
-  }>,
-  avatar: Record<ElementSize, {
-    size: number,
-    padding: number,
-    fontSize: number,
-    statusDotSize: number,
-    statusDotBorderWidth: number,
-  }>,
-  avatarGroup: {
-    overlap: number,
-    maxShown: number,
-    gap: number,
-  },
-}
+export type HightideSpacing = ThemeSpacingTokens
+
+export type HightideElements = ElementLayoutTokens
+
+export type HightideBorderRadius = ThemeShapeTokens['borderRadius']
+
+export type HightideBorder = ThemeBorderWidthTokens
+
+export type HightideShadowToken = ThemeElevationTokens[keyof ThemeElevationTokens]
+
+export type HightideShadow = {
+  raised: HightideShadowToken,
+  container: HightideShadowToken,
+  popover: HightideShadowToken,
+  dialog: HightideShadowToken,
+}

package/src/theme/types/resolver.ts

@@ -1,12 +1,45 @@
+import type { ThemeTokens } from '@helpwave/hightide-design/theme-tokens'
+import type { SemanticTokenResolvers } from '@helpwave/hightide-design/semantic-token-resolvers'
+import type {
+  ComponentTokenResolvers,
+  PressableState,
+  PressableStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+
 export type InteractionState = {
   isDisabled?: boolean,
   isHovered?: boolean,
   isFocused?: boolean,
+  isFocusVisible?: boolean,
   isPressed?: boolean,
-  isReadOnly?: boolean,
+  isReadonly?: boolean,
   isInvalid?: boolean,
 }
 
+export const toPressableInteractionState = (
+  state: InteractionState = {}
+): PressableState => {
+  const active = new Set<PressableStateValue>()
+
+  if (state.isDisabled) {
+    active.add('disabled')
+  }
+  if (state.isFocused) {
+    active.add('focused')
+  }
+  if (state.isFocusVisible) {
+    active.add('focusVisible')
+  }
+  if (state.isHovered) {
+    active.add('hovered')
+  }
+  if (state.isPressed) {
+    active.add('pressed')
+  }
+
+  return active
+}
+
 export type StyleOverwrite<TState, TStyle> =
   TStyle | ((prev: TStyle, state: TState) => TStyle)
 
@@ -15,6 +48,14 @@ export type StyleResolverFunction<TState, TStyle> = (
   overwrite?: StyleOverwrite<TState, TStyle>,
 ) => TStyle
 
+export type SimpleStyleResolver<TStyle> = StyleResolverFunction<Record<string, never>, TStyle>
+
+export type ComponentThemeResolver<TTheme> = (params: {
+  themeTokens: ThemeTokens,
+  semanticTokens: SemanticTokenResolvers,
+  componentTokens: ComponentTokenResolvers,
+}) => TTheme
+
 export const createStyleResolver = <TState, TStyle>(
   resolve: (props: TState) => TStyle
 ): StyleResolverFunction<TState, TStyle> => {
@@ -33,6 +74,12 @@ export const createStyleResolver = <TState, TStyle>(
   }
 }
 
+export const createSimpleStyleResolver = <TStyle>(
+  resolve: () => TStyle
+): SimpleStyleResolver<TStyle> => {
+  return createStyleResolver<Record<string, never>, TStyle>(resolve)
+}
+
 export const createValueResolver = <TState, TValue>(
   resolve: (props: TState) => TValue
 ): StyleResolverFunction<TState, TValue> => {
@@ -50,3 +97,9 @@ export const createValueResolver = <TState, TValue>(
     return overwrite
   }
 }
+
+export const createSimpleValueResolver = <TValue>(
+  resolve: () => TValue
+): SimpleStyleResolver<TValue> => {
+  return createValueResolver<Record<string, never>, TValue>(resolve)
+}

package/src/theme/types/semantics.ts

@@ -0,0 +1,72 @@
+import type { ColorToken, HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import type {
+  Appearance,
+  ColoringColorTokens,
+  ColoringColorVariant,
+  ColoringStyle,
+  ColoringToken,
+  ContainerLayoutToken,
+  ControlElementLayoutToken,
+  InputColoringTokens,
+  InsideControlElementLayoutToken,
+  PressableColoringTokens,
+  ButtonVariant
+} from '@helpwave/hightide-design/semantic-token-resolvers'
+import type { InputState } from '@helpwave/hightide-design/component-token-resolvers'
+import type { PressableState } from '@helpwave/hightide-design/component-token-resolvers'
+import type {
+  ColorPairToken,
+  ThemeLayoutSize,
+  ThemeTypographySize,
+  TintStrength
+} from '@helpwave/hightide-design/theme-tokens'
+
+export type BoundSemanticResolver<TParameter, TResult> = (parameter: TParameter) => TResult
+
+export type HightideThemeSemantics = {
+  coloringColorVariant: BoundSemanticResolver<{
+    colorPair: ColorPairToken,
+    variant: ColoringColorVariant,
+  }, ColoringColorTokens>,
+  coloringStyle: BoundSemanticResolver<{
+    coloring: ColoringColorTokens,
+    style: ColoringStyle,
+  }, ColoringToken>,
+  pressableColoring: BoundSemanticResolver<{
+    coloring: ColoringToken,
+    variant: ButtonVariant,
+    state: PressableState,
+  }, PressableColoringTokens>,
+  pressableStateLayerTint: BoundSemanticResolver<{
+    states: PressableState,
+    color: ColorToken,
+  }, ColorToken>,
+  inputColoring: BoundSemanticResolver<{
+    state: InputState,
+    color?: ColorPairToken,
+  }, InputColoringTokens>,
+  controlLayout: BoundSemanticResolver<{
+    size: ThemeLayoutSize,
+  }, ControlElementLayoutToken>,
+  touchTargetSize: BoundSemanticResolver<object, number>,
+  containerLayout: BoundSemanticResolver<{
+    size: ThemeLayoutSize,
+  }, ContainerLayoutToken>,
+  insideControlLayout: BoundSemanticResolver<{
+    size: ThemeTypographySize,
+  }, InsideControlElementLayoutToken>,
+  tintedSurface: BoundSemanticResolver<{
+    tintColor: HexColorToken,
+    tintStrength?: TintStrength,
+  }, HexColorToken>,
+  withAppearance: BoundSemanticResolver<{
+    color: HexColorToken,
+    appearance: Appearance,
+  }, HexColorToken>,
+  asFaded: BoundSemanticResolver<{
+    color: HexColorToken,
+  }, HexColorToken>,
+  asDescription: BoundSemanticResolver<{
+    color: HexColorToken,
+  }, HexColorToken>,
+}

package/src/theme/types/theme.ts

@@ -1,26 +1,39 @@
-import type {
-  HightideColors,
-  HightideSemanticColors
-} from './color'
+import type { ThemeColorTokens } from '@helpwave/hightide-design/theme-tokens'
+
 import type { HightideComponentThemes } from './components/hightide'
-import type { HightideDecoration } from './decoration'
-import type { HightideLayout } from './layout'
+import type { HightideIcongraphy } from './icongraphy'
+import type {
+  HightideBorder,
+  HightideBorderRadius,
+  HightideElements,
+  HightideShadow,
+  HightideSpacing
+} from './layout'
+import type { HightideThemeSemantics } from './semantics'
 import type { HightideTypography } from './typography'
 
 export type Theme = {
   colors: Record<string, unknown>,
-  semantic: Record<string, unknown>,
+  semantics: Record<string, unknown>,
   components: Record<string, unknown>,
   typography: Record<string, unknown>,
-  layout: Record<string, unknown>,
-  decoration: Record<string, unknown>,
+  icongraphy: Record<string, unknown>,
+  spacing: Record<string, unknown>,
+  elements: Record<string, unknown>,
+  borderRadius: Record<string, unknown>,
+  border: Record<string, unknown>,
+  shadow: Record<string, unknown>,
 }
 
 export type HightideTheme = Theme & {
-  colors: HightideColors & Theme['colors'],
-  semantic: HightideSemanticColors & Theme['semantic'],
+  colors: ThemeColorTokens & Theme['colors'],
+  semantics: HightideThemeSemantics & Theme['semantics'],
   components: HightideComponentThemes & Theme['components'],
   typography: HightideTypography & Theme['typography'],
-  layout: HightideLayout & Theme['layout'],
-  decoration: HightideDecoration & Theme['decoration'],
+  icongraphy: HightideIcongraphy & Theme['icongraphy'],
+  spacing: HightideSpacing & Theme['spacing'],
+  elements: HightideElements & Theme['elements'],
+  borderRadius: HightideBorderRadius & Theme['borderRadius'],
+  border: HightideBorder & Theme['border'],
+  shadow: HightideShadow & Theme['shadow'],
 }

package/src/theme/types/typography.ts

@@ -1,18 +1,17 @@
-export type TextStyle = {
-  fontSize: number,
-  lineHeight: number,
-  fontWeight: string,
-  fontFamily?: string,
-}
+import type {
+  ThemeTypographyTokens,
+  ThemeTypographySize,
+  TypographyStyleToken
+} from '@helpwave/hightide-design/theme-tokens'
 
-export type HightideTypography = {
-  fontWeights: Record<string, string>,
-  scales: {
-    headline: { large: TextStyle, medium: TextStyle, small: TextStyle },
-    title: { large: TextStyle, medium: TextStyle, small: TextStyle },
-    body: { large: TextStyle, medium: TextStyle },
-    label: { large: TextStyle, medium: TextStyle },
-    caption: { large: TextStyle, medium: TextStyle, small: TextStyle },
-    button: { large: TextStyle, medium: TextStyle, small: TextStyle },
-  },
-}
+export type TextStyle = TypographyStyleToken
+
+export type HightideTypography = ThemeTypographyTokens
+
+export type HightideFontFamilies = ThemeTypographyTokens['fontFamilies']
+
+export type HightideFontWeights = ThemeTypographyTokens['fontWeights']
+
+export type TypographySizes = ThemeTypographySize
+
+export type { TypographyStyleToken }