@helpwave/hightide-native 0.0.8 → 0.1.1

package/src/theme/themes/createHightideTheme.ts

@@ -1,59 +1,222 @@
-import type {
-  ColorPaletteToken,
-  HightideThemeTokens
-} from '@helpwave/hightide-design/types'
+import { componentTokenResolvers } from '@helpwave/hightide-design/component-token-resolvers'
+import {
+  hightideSemanticTokenResolvers,
+  resolveContainerLayout,
+  resolveControlLayout,
+  resolveInsideControlLayout,
+  type ElementLayoutTokens
+} from '@helpwave/hightide-design/semantic-token-resolvers'
+import type { ThemeLayoutSize, ThemeTokens, ThemeTypographySize } from '@helpwave/hightide-design/theme-tokens'
 
-import { createAvatarThemeFromDesign } from '../resolvers/avatar'
-import { createButtonThemeFromDesign } from '../resolvers/button'
-import { createChatThemeFromDesign } from '../resolvers/chat'
-import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
-import { createChipThemeFromDesign } from '../resolvers/chip'
-import { createSwitchThemeFromDesign } from '../resolvers/switch'
-import { createIconButtonThemeFromDesign } from '../resolvers/iconButton'
-import { createInputThemeFromDesign } from '../resolvers/input'
-import { createMenuThemeFromDesign } from '../resolvers/menu'
-import { createMultiSelectThemeFromDesign } from '../resolvers/multiSelect'
-import { createSelectThemeFromDesign } from '../resolvers/select'
-import type {
-  Color,
-  ColorPalette,
-  HightideColors
-} from '../types/color'
+import {
+  toAvatarGroupThemeResolvers,
+  toAvatarThemeResolvers,
+  toAvatarWithStatusThemeResolvers
+} from '../resolvers/avatar'
+import { toButtonThemeResolvers } from '../resolvers/button'
+import { toCardThemeResolvers } from '../resolvers/card'
+import { toChatThemeResolvers } from '../resolvers/chat/chat-theme'
+import { toCheckboxThemeResolvers } from '../resolvers/checkbox'
+import { toChipThemeResolvers } from '../resolvers/chip'
+import { toDividerThemeResolvers } from '../resolvers/divider'
+import { toIconThemeResolvers } from '../resolvers/icon'
+import { toIconButtonThemeResolvers } from '../resolvers/iconButton'
+import { toInputThemeResolvers } from '../resolvers/input'
+import { toSearchBarThemeResolvers } from '../resolvers/searchBar'
+import {
+  toListItemThemeResolvers
+} from '../resolvers/listItem'
+import { toMultiSelectThemeResolvers } from '../resolvers/multiSelect'
+import { toSelectThemeResolvers } from '../resolvers/select'
+import { toSwitchThemeResolvers } from '../resolvers/switch'
+import { toThemedPressableThemeResolvers } from '../resolvers/themedPressable'
+import type { HightideThemeSemantics } from '../types/semantics'
 import type { HightideTheme } from '../types/theme'
 
-const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette => {
-  if (token.type === 'singleValue') {
-    return token.value
-  }
-  return token.value
-}
+const layoutSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly ThemeLayoutSize[]
+const typographySizes = ['sm', 'md', 'lg'] as const satisfies readonly ThemeTypographySize[]
 
-const unwrapColors = (colors: HightideThemeTokens['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>
-}
+const resolveElementLayouts = (themeTokens: ThemeTokens): ElementLayoutTokens => ({
+  control: Object.fromEntries(
+    layoutSizes.map((size) => [
+      size,
+      resolveControlLayout({ themeTokens, size }),
+    ])
+  ) as ElementLayoutTokens['control'],
+  container: Object.fromEntries(
+    layoutSizes.map((size) => [
+      size,
+      resolveContainerLayout({ themeTokens, size }),
+    ])
+  ) as ElementLayoutTokens['container'],
+  insideControl: Object.fromEntries(
+    typographySizes.map((size) => [
+      size,
+      resolveInsideControlLayout({ themeTokens, size }),
+    ])
+  ) as ElementLayoutTokens['insideControl'],
+})
+
+const bindSemantics = (themeTokens: ThemeTokens): HightideThemeSemantics => ({
+  coloringColorVariant: (parameter) => hightideSemanticTokenResolvers.coloringColorVariant({
+    themeTokens,
+    ...parameter,
+  }),
+  coloringStyle: (parameter) => hightideSemanticTokenResolvers.coloringStyle({
+    themeTokens,
+    ...parameter,
+  }),
+  pressableColoring: (parameter) => hightideSemanticTokenResolvers.pressableColoring({
+    themeTokens,
+    ...parameter,
+  }),
+  pressableStateLayerTint: (parameter) => hightideSemanticTokenResolvers.pressableStateLayerTint({
+    themeTokens,
+    ...parameter,
+  }),
+  inputColoring: (parameter) => hightideSemanticTokenResolvers.inputColoring({
+    themeTokens,
+    ...parameter,
+  }),
+  controlLayout: (parameter) => hightideSemanticTokenResolvers.controlLayout({
+    themeTokens,
+    ...parameter,
+  }),
+  touchTargetSize: (parameter) => hightideSemanticTokenResolvers.touchTargetSize({
+    themeTokens,
+    ...parameter,
+  }),
+  containerLayout: (parameter) => hightideSemanticTokenResolvers.containerLayout({
+    themeTokens,
+    ...parameter,
+  }),
+  insideControlLayout: (parameter) => hightideSemanticTokenResolvers.insideControlLayout({
+    themeTokens,
+    ...parameter,
+  }),
+  tintedSurface: (parameter) => hightideSemanticTokenResolvers.tintedSurface({
+    themeTokens,
+    ...parameter,
+  }),
+  withAppearance: (parameter) => hightideSemanticTokenResolvers.withAppearance({
+    themeTokens,
+    ...parameter,
+  }),
+  asFaded: (parameter) => hightideSemanticTokenResolvers.asFaded({
+    themeTokens,
+    ...parameter,
+  }),
+  asDescription: (parameter) => hightideSemanticTokenResolvers.asDescription({
+    themeTokens,
+    ...parameter,
+  }),
+})
 
-export const createHightideTheme = (tokens: HightideThemeTokens): HightideTheme => ({
-  colors: unwrapColors(tokens.colors),
-  semantic: tokens.semanticColors,
-  typography: tokens.typography,
-  layout: tokens.layout,
-  decoration: tokens.decorcation,
+export const createHightideTheme = (themeTokens: ThemeTokens): HightideTheme => ({
+  colors: themeTokens.color,
+  semantics: bindSemantics(themeTokens),
+  typography: themeTokens.typography,
+  icongraphy: themeTokens.icongraphy,
+  spacing: themeTokens.spacing,
+  elements: resolveElementLayouts(themeTokens),
+  borderRadius: themeTokens.shape.borderRadius,
+  border: themeTokens.borderWidth,
+  shadow: {
+    raised: themeTokens.elevation.level1,
+    container: themeTokens.elevation.level2,
+    popover: themeTokens.elevation.level3,
+    dialog: themeTokens.elevation.level4,
+  },
   components: {
-    coloring: tokens.coloring,
-    button: createButtonThemeFromDesign(tokens),
-    iconButton: createIconButtonThemeFromDesign(tokens),
-    chip: createChipThemeFromDesign(tokens),
-    checkbox: createCheckboxThemeFromDesign(tokens),
-    switch: createSwitchThemeFromDesign(tokens),
-    input: createInputThemeFromDesign(tokens),
-    select: createSelectThemeFromDesign(tokens),
-    multiSelect: createMultiSelectThemeFromDesign(tokens),
-    chat: createChatThemeFromDesign(tokens),
-    menu: createMenuThemeFromDesign(tokens),
-    avatar: createAvatarThemeFromDesign(tokens),
+    button: toButtonThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    iconButton: toIconButtonThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    themedPressable: toThemedPressableThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    chip: toChipThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    checkbox: toCheckboxThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    switch: toSwitchThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    input: toInputThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    searchBar: toSearchBarThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    select: toSelectThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    multiSelect: toMultiSelectThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    chat: toChatThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    card: toCardThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    divider: toDividerThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    listItem: toListItemThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    avatar: toAvatarThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    avatarWithStatus: toAvatarWithStatusThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    avatarGroup: toAvatarGroupThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
+    icon: toIconThemeResolvers({
+      themeTokens,
+      semanticTokens: hightideSemanticTokenResolvers,
+      componentTokens: componentTokenResolvers,
+    }),
   },
 })

package/src/theme/themes/hightideThemes.ts

@@ -1,14 +1,18 @@
-import { ThemeTokens as designThemes } from '@helpwave/hightide-design/tokens'
+import { hightideDesignSystem } from '@helpwave/hightide-design/design-system'
 import { createHightideTheme } from './createHightideTheme'
 
-export const lightTheme = createHightideTheme(designThemes.light)
-export const darkTheme = createHightideTheme(designThemes.dark)
+export const hightideLightTheme = createHightideTheme(
+  hightideDesignSystem.tokenThemes.light
+)
+export const hightideDarkTheme = createHightideTheme(
+  hightideDesignSystem.tokenThemes.dark
+)
 
 export const themes = {
-  light: lightTheme,
-  dark: darkTheme,
+  light: hightideLightTheme,
+  dark: hightideDarkTheme,
 } as const
 
 export type HightideThemeModes = 'dark' | 'light'
 
-export type ThemeMode = string | HightideThemeModes
+export type ThemeMode = string | HightideThemeModes

package/src/theme/types/color.ts

@@ -1,60 +1,3 @@
-export type Color = `#${string}`
+import type { ColorToken } from '@helpwave/hightide-design/primitive-tokens'
 
-export type ColorPalette = Record<number, Color>
-
-export type HightideColors = {
-  white: Color,
-  black: Color,
-  gray: ColorPalette,
-  green: ColorPalette,
-  orange: ColorPalette,
-  purple: ColorPalette,
-  blue: ColorPalette,
-  red: ColorPalette,
-}
-
-export type HightideSemanticColors = {
-  background: Color,
-  onBackground: Color,
-  warning: Color,
-  onWarning: Color,
-  warningHover: Color,
-  positive: Color,
-  onPositive: Color,
-  positiveHover: Color,
-  negative: Color,
-  onNegative: Color,
-  negativeHover: Color,
-  disabled: Color,
-  onDisabled: Color,
-  surface: Color,
-  onSurface: Color,
-  surfaceHover: Color,
-  surfaceVariant: Color,
-  onSurfaceVariant: Color,
-  surfaceWarning: Color,
-  onSurfaceWarning: Color,
-  textPrimary: Color,
-  textSecondary: Color,
-  textTertiary: Color,
-  placeholder: Color,
-  description: Color,
-  label: Color,
-  primary: Color,
-  onPrimary: Color,
-  primaryHover: Color,
-  secondary: Color,
-  onSecondary: Color,
-  secondaryHover: Color,
-  neutral: Color,
-  onNeutral: Color,
-  neutralHover: Color,
-  neutralText: Color,
-  neutralTextHover: Color,
-  neutralOutline: Color,
-  neutralOutlineHover: Color,
-  neutralTonalText: Color,
-  neutralTonalBackground: Color,
-  faded: Color,
-  highlight: Color,
-}
+export type Color = ColorToken

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

@@ -4,29 +4,35 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ElementSize } from '@helpwave/hightide-design/types'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import {
+  avatarStatuses,
+  type AvatarSize,
+  type AvatarStatus
+} from '@helpwave/hightide-design/component-token-resolvers'
 
 import type { StyleResolverFunction } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
-export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'
+export type { AvatarSize, AvatarStatus }
+export { avatarStatuses }
 
 export type AvatarState = {
-  size?: ElementSize,
+  size?: AvatarSize | number,
   isGrouped?: boolean,
   groupIndex?: number,
+  color?: ColorPairToken,
 }
 
 export type AvatarWithStatusState = {
-  size?: ElementSize,
+  size?: AvatarSize | number,
+  color?: ColorPairToken,
   status?: AvatarStatus,
 }
 
-export type AvatarWithLabelState = {
-  size?: ElementSize,
-}
-
 export type AvatarGroupState = {
-  size?: ElementSize,
+  size?: AvatarSize | number,
+  color?: ColorPairToken,
   count?: number,
 }
 
@@ -36,42 +42,37 @@ export type AvatarImageStyle = ImageStyle
 
 export type AvatarTextStyle = TextStyle
 
-export type AvatarIconStyle = {
-  size: number,
-  strokeWidth: number,
-  color: string,
-}
+export type AvatarIconStyle = IconStyle
 
 export type AvatarStatusDotStyle = ViewStyle
 
-export type AvatarWithStatusContainerStyle = ViewStyle
-
-export type AvatarWithLabelContainerStyle = ViewStyle
-
-export type AvatarWithLabelTextStyle = TextStyle
-
 export type AvatarGroupContainerStyle = ViewStyle
 
 export type AvatarGroupStackStyle = ViewStyle
 
-export type AvatarGroupMoreStyle = TextStyle
+export type AvatarGroupTextStyle = TextStyle
 
-export type AvatarTheme = {
-  avatar: StyleResolverFunction<AvatarState, AvatarStyle>,
+export type AvatarThemeResolvers = {
+  container: StyleResolverFunction<AvatarState, AvatarStyle>,
   image: StyleResolverFunction<AvatarState, AvatarImageStyle>,
   text: StyleResolverFunction<AvatarState, AvatarTextStyle>,
   icon: StyleResolverFunction<AvatarState, AvatarIconStyle>,
-  withStatus: {
-    container: StyleResolverFunction<AvatarWithStatusState, AvatarWithStatusContainerStyle>,
-    statusDot: StyleResolverFunction<AvatarWithStatusState, AvatarStatusDotStyle>,
-  },
-  withLabel: {
-    container: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelContainerStyle>,
-    text: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelTextStyle>,
-  },
-  group: {
-    container: StyleResolverFunction<AvatarGroupState, AvatarGroupContainerStyle>,
-    stack: StyleResolverFunction<AvatarGroupState, AvatarGroupStackStyle>,
-    more: StyleResolverFunction<AvatarGroupState, AvatarGroupMoreStyle>,
-  },
+}
+
+export type AvatarWithStatusThemeResolvers = {
+  avatar: StyleResolverFunction<
+    AvatarWithStatusState,
+    AvatarThemeResolvers
+  >,
+  statusDot: StyleResolverFunction<AvatarWithStatusState, AvatarStatusDotStyle>,
+}
+
+export type AvatarGroupThemeResolvers = {
+  avatar: StyleResolverFunction<
+    AvatarGroupState,
+    AvatarThemeResolvers
+  >,
+  container: StyleResolverFunction<AvatarGroupState, AvatarGroupContainerStyle>,
+  avatarStack: StyleResolverFunction<AvatarGroupState, AvatarGroupStackStyle>,
+  text: StyleResolverFunction<AvatarGroupState, AvatarGroupTextStyle>,
 }

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

@@ -1,30 +1,29 @@
-import type {
-  TextStyle,
-  ViewStyle
-} from 'react-native'
+import type { ViewStyle, TextStyle } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/utils'
-import type {
-  ButtonColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+import type { ComponentSize, ButtonVariant } from '@helpwave/hightide-design/semantic-token-resolvers'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import type {
   InteractionState,
   StyleResolverFunction
 } from '../resolver'
+import type { IconStyle } from '../../../icons'
 
 export type ButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
+  size?: ComponentSize,
+  color?: ColorPairToken,
+  variant?: ButtonVariant,
 }
 
 export type ButtonStyle = ViewStyle
 
 export type ButtonTextStyle = TextStyle
 
-export type ButtonTheme = {
-  button: StyleResolverFunction<ButtonState, ButtonStyle>,
+export type ButtonIconStyle = IconStyle
+
+export type ButtonThemeResolvers = {
+  container: StyleResolverFunction<ButtonState, ButtonStyle>,
+  stateLayer: StyleResolverFunction<ButtonState, ButtonStyle>,
+  icon: StyleResolverFunction<ButtonState, ButtonIconStyle>,
   text: StyleResolverFunction<ButtonState, ButtonTextStyle>,
 }

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

@@ -0,0 +1,9 @@
+import type { ViewStyle } from 'react-native'
+
+import type { SimpleStyleResolver } from '../resolver'
+
+export type CardStyle = ViewStyle
+
+export type CardThemeResolvers = {
+  container: SimpleStyleResolver<CardStyle>,
+}