@helpwave/hightide-native 0.0.2 → 0.0.6

package/src/theme/types/layout.ts

@@ -0,0 +1,46 @@
+export type ElementSize = 'xs' | 'sm' | 'md' | 'lg'
+
+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,
+  }>,
+}

package/src/theme/types/theme.ts

@@ -1,13 +1,17 @@
 import type {
-  ColoringTokensDefinitions,
-  DesignColorPalettes,
-  SemanticColors
-} from '@helpwave/hightide-design'
-import type { ComponentThemes } from './components'
+  HightideColors,
+  HightideSemanticColors
+} from './color'
+import type { HightideComponentThemes } from './components/hightide'
+import type { HightideDecoration } from './decoration'
+import type { HightideLayout } from './layout'
+import type { HightideTypography } from './typography'
 
-export type DesignTheme = {
-  palettes: DesignColorPalettes,
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
-  components: ComponentThemes,
+export type Theme = {
+  colors: Record<string, unknown> & HightideColors,
+  semantic: Record<string, unknown> & HightideSemanticColors,
+  components: Record<string, unknown>  & HightideComponentThemes,
+  typography: Record<string, unknown> & HightideTypography,
+  layout: Record<string, unknown> & HightideLayout,
+  decoration: Record<string, unknown> & HightideDecoration,
 }

package/src/theme/types/typography.ts

@@ -0,0 +1,18 @@
+export type TextStyle = {
+  fontSize: number,
+  lineHeight: number,
+  fontWeight: string,
+  fontFamily?: string,
+}
+
+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 },
+  },
+}

package/src/icons/Icon.tsx

@@ -1,35 +0,0 @@
-import { getIconSizePx, getIconStrokeWidth, type ElementSize } from '@helpwave/hightide-design'
-import type { LucideIcon } from 'lucide-react-native'
-
-export type IconProps = {
-  icon: LucideIcon,
-  size?: ElementSize,
-  color?: string,
-}
-
-export const Icon = ({
-  icon: IconComponent,
-  size = 'md',
-  color,
-}: IconProps) => {
-  return (
-    <IconComponent
-      size={getIconSizePx(size)}
-      strokeWidth={getIconStrokeWidth(size)}
-      color={color}
-    />
-  )
-}
-
-export const resolveIconProps = (
-  size: ElementSize = 'md',
-  color?: string
-): {
-  size: number,
-  strokeWidth: number,
-  color?: string,
-} => ({
-  size: getIconSizePx(size),
-  strokeWidth: getIconStrokeWidth(size),
-  color,
-})

package/src/icons/index.ts

@@ -1 +0,0 @@
-export * from './Icon'

package/src/theme/types/button.ts

@@ -1,18 +0,0 @@
-import type { ButtonColoringStyle, ColoringType, ElementSize } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
-
-export type ButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-}
-
-export type ButtonStyle = StyleProp<ViewStyle>
-
-export type ButtonTextStyle = StyleProp<TextStyle>
-
-export type ButtonTheme = {
-  button: StyleResolverFunction<ButtonState, ButtonStyle>,
-  text: StyleResolverFunction<ButtonState, ButtonTextStyle>,
-}

package/src/theme/types/chat.ts

@@ -1,141 +0,0 @@
-import type { ColorValue, ColoringType } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
-
-export type ChatMessageDirection = 'incoming' | 'outgoing'
-
-export type ChatConversationRowState = InteractionState & {
-  isUnread?: boolean,
-  isSelected?: boolean,
-}
-
-export type ChatConversationRowStyle = StyleProp<ViewStyle>
-export type ChatConversationRowTitleStyle = StyleProp<TextStyle>
-export type ChatConversationRowTimestampStyle = StyleProp<TextStyle>
-export type ChatConversationRowPreviewStyle = StyleProp<TextStyle>
-export type ChatConversationRowUnreadBadgeStyle = StyleProp<ViewStyle>
-export type ChatConversationRowUnreadBadgeTextStyle = StyleProp<TextStyle>
-export type ChatConversationListStyle = StyleProp<ViewStyle>
-export type ChatConversationListHeaderStyle = StyleProp<ViewStyle>
-export type ChatConversationListFooterStyle = StyleProp<ViewStyle>
-export type ChatThreadHeaderStyle = StyleProp<ViewStyle>
-export type ChatThreadHeaderTitleStyle = StyleProp<TextStyle>
-export type ChatThreadHeaderSubtitleStyle = StyleProp<TextStyle>
-export type ChatMessageListStyle = StyleProp<ViewStyle>
-
-export type ChatMessageBubbleState = {
-  direction: ChatMessageDirection,
-}
-
-export type ChatMessageBubbleContainerStyle = StyleProp<ViewStyle>
-export type ChatMessageBubbleStyle = StyleProp<ViewStyle>
-export type ChatMessageBubbleContentStyle = StyleProp<TextStyle>
-export type ChatMessageBubbleTimestampStyle = StyleProp<TextStyle>
-export type ChatMessageBubbleReceiptStyle = StyleProp<ViewStyle>
-export type ChatMessageBubbleReceiptTextStyle = StyleProp<TextStyle>
-
-export type ChatMessageBubbleReceiptIconStyle = {
-  color: ColorValue,
-}
-
-export type ChatMessageCardState = {
-  direction: ChatMessageDirection,
-  color?: ColoringType,
-}
-
-export type ChatMessageCardStyle = StyleProp<ViewStyle>
-export type ChatMessageCardHeaderStyle = StyleProp<ViewStyle>
-export type ChatMessageCardIconStyle = StyleProp<ViewStyle>
-
-export type ChatMessageCardIconColor = {
-  color: ColorValue,
-}
-
-export type ChatMessageCardTitleStyle = StyleProp<TextStyle>
-export type ChatMessageCardSubtitleStyle = StyleProp<TextStyle>
-export type ChatMessageCardBodyStyle = StyleProp<ViewStyle>
-export type ChatMessageCardActionsStyle = StyleProp<ViewStyle>
-
-export type ChatAttachmentCardState = {
-  direction: ChatMessageDirection,
-}
-
-export type ChatAttachmentCardStyle = StyleProp<ViewStyle>
-export type ChatAttachmentCardIconStyle = StyleProp<ViewStyle>
-
-export type ChatAttachmentCardIconColor = {
-  color: ColorValue,
-}
-
-export type ChatAttachmentCardNameStyle = StyleProp<TextStyle>
-export type ChatAttachmentCardMetadataStyle = StyleProp<TextStyle>
-
-export type ChatSystemLineState = {
-  color?: ColoringType,
-}
-
-export type ChatSystemLineStyle = StyleProp<ViewStyle>
-export type ChatSystemLineTextStyle = StyleProp<TextStyle>
-
-export type ChatSystemLineIconStyle = {
-  color: ColorValue,
-}
-
-export type ChatDateDividerStyle = StyleProp<ViewStyle>
-export type ChatDateDividerTextStyle = StyleProp<TextStyle>
-
-export type ChatQuickReplyChipState = InteractionState & {
-  isActive?: boolean,
-}
-
-export type ChatQuickReplyChipStyle = StyleProp<ViewStyle>
-export type ChatQuickReplyChipTextStyle = StyleProp<TextStyle>
-export type ChatMessageComposerStyle = StyleProp<ViewStyle>
-export type ChatMessageComposerInputStyle = StyleProp<TextStyle>
-
-export type ChatTheme = {
-  conversationRow: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
-  conversationRowTitle: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTitleStyle>,
-  conversationRowTimestamp: StyleResolverFunction<ChatConversationRowState, ChatConversationRowTimestampStyle>,
-  conversationRowPreview: StyleResolverFunction<ChatConversationRowState, ChatConversationRowPreviewStyle>,
-  conversationRowUnreadBadge: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeStyle>,
-  conversationRowUnreadBadgeText: StyleResolverFunction<Record<string, never>, ChatConversationRowUnreadBadgeTextStyle>,
-  conversationRowSentIndicator: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
-  conversationList: StyleResolverFunction<Record<string, never>, ChatConversationListStyle>,
-  conversationListHeader: StyleResolverFunction<Record<string, never>, ChatConversationListHeaderStyle>,
-  conversationListFooter: StyleResolverFunction<Record<string, never>, ChatConversationListFooterStyle>,
-  threadHeader: StyleResolverFunction<Record<string, never>, ChatThreadHeaderStyle>,
-  threadHeaderTitle: StyleResolverFunction<Record<string, never>, ChatThreadHeaderTitleStyle>,
-  threadHeaderSubtitle: StyleResolverFunction<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
-  messageList: StyleResolverFunction<Record<string, never>, ChatMessageListStyle>,
-  messageBubbleContainer: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
-  messageBubble: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleStyle>,
-  messageBubbleContent: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContentStyle>,
-  messageBubbleTimestamp: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleTimestampStyle>,
-  messageBubbleReceipt: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptStyle>,
-  messageBubbleReceiptText: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptTextStyle>,
-  messageBubbleReceiptIcon: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
-  messageCard: StyleResolverFunction<ChatMessageCardState, ChatMessageCardStyle>,
-  messageCardHeader: StyleResolverFunction<Record<string, never>, ChatMessageCardHeaderStyle>,
-  messageCardIcon: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconStyle>,
-  messageCardIconColor: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconColor>,
-  messageCardTitle: StyleResolverFunction<ChatMessageCardState, ChatMessageCardTitleStyle>,
-  messageCardSubtitle: StyleResolverFunction<Record<string, never>, ChatMessageCardSubtitleStyle>,
-  messageCardBody: StyleResolverFunction<Record<string, never>, ChatMessageCardBodyStyle>,
-  messageCardActions: StyleResolverFunction<Record<string, never>, ChatMessageCardActionsStyle>,
-  attachmentCard: StyleResolverFunction<ChatAttachmentCardState, ChatAttachmentCardStyle>,
-  attachmentCardIcon: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconStyle>,
-  attachmentCardIconColor: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconColor>,
-  attachmentCardName: StyleResolverFunction<Record<string, never>, ChatAttachmentCardNameStyle>,
-  attachmentCardMetadata: StyleResolverFunction<Record<string, never>, ChatAttachmentCardMetadataStyle>,
-  systemLine: StyleResolverFunction<ChatSystemLineState, ChatSystemLineStyle>,
-  systemLineText: StyleResolverFunction<ChatSystemLineState, ChatSystemLineTextStyle>,
-  systemLineIcon: StyleResolverFunction<ChatSystemLineState, ChatSystemLineIconStyle>,
-  dateDivider: StyleResolverFunction<Record<string, never>, ChatDateDividerStyle>,
-  dateDividerText: StyleResolverFunction<Record<string, never>, ChatDateDividerTextStyle>,
-  quickReplyChip: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
-  quickReplyChipText: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
-  messageComposer: StyleResolverFunction<Record<string, never>, ChatMessageComposerStyle>,
-  messageComposerInput: StyleResolverFunction<Record<string, never>, ChatMessageComposerInputStyle>,
-  messageComposerPlaceholderColor: StyleResolverFunction<Record<string, never>, ColorValue>,
-}

package/src/theme/types/chip.ts

@@ -1,18 +0,0 @@
-import type { ChipColoringStyle, ColoringType, ElementSize } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
-
-export type ChipState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ChipColoringStyle,
-}
-
-export type ChipStyle = StyleProp<ViewStyle>
-
-export type ChipTextStyle = StyleProp<TextStyle>
-
-export type ChipTheme = {
-  chip: StyleResolverFunction<ChipState, ChipStyle>,
-  text: StyleResolverFunction<ChipState, ChipTextStyle>,
-}

package/src/theme/types/iconButton.ts

@@ -1,20 +0,0 @@
-import type { ButtonColoringStyle, ColorValue, ColoringType, ElementSize } from '@helpwave/hightide-design'
-import type { StyleProp, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
-
-export type IconButtonState = InteractionState & {
-  size?: ElementSize,
-  color?: ColoringType,
-  coloringStyle?: ButtonColoringStyle,
-}
-
-export type IconButtonStyle = StyleProp<ViewStyle>
-
-export type IconButtonIconStyle = {
-  color: ColorValue,
-}
-
-export type IconButtonTheme = {
-  button: StyleResolverFunction<IconButtonState, IconButtonStyle>,
-  icon: StyleResolverFunction<IconButtonState, IconButtonIconStyle>,
-}

package/src/theme/types/input.ts

@@ -1,15 +0,0 @@
-import type { ColorValue } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
-
-export type InputState = InteractionState & {
-  isInvalid?: boolean,
-  isReadOnly?: boolean,
-}
-
-export type InputStyle = StyleProp<TextStyle>
-
-export type InputTheme = {
-  input: StyleResolverFunction<InputState, InputStyle>,
-  placeholderColor: StyleResolverFunction<InputState, ColorValue>,
-}