@helpwave/hightide-native 0.0.2 → 0.0.5

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

package/src/theme/types/color.ts

@@ -0,0 +1,60 @@
+export type Color = `#${string}`
+
+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,
+}

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

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

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

@@ -0,0 +1,198 @@
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+
+import type { Color } from '@/src/theme/types/color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '@/src/theme/types/resolver'
+
+export type ChatMessageDirection = 'incoming' | 'outgoing'
+
+export type ChatConversationRowState = InteractionState & {
+  isUnread?: boolean,
+  isSelected?: boolean,
+}
+
+export type ChatConversationRowStyle = ViewStyle
+export type ChatConversationRowTitleStyle = TextStyle
+export type ChatConversationRowTimestampStyle = TextStyle
+export type ChatConversationRowPreviewStyle = TextStyle
+export type ChatConversationRowUnreadBadgeStyle = ViewStyle
+export type ChatConversationRowUnreadBadgeTextStyle = TextStyle
+
+export type ChatConversationListStyle = ViewStyle
+export type ChatConversationListHeaderStyle = ViewStyle
+export type ChatConversationListFooterStyle = ViewStyle
+
+export type ChatThreadHeaderStyle = ViewStyle
+export type ChatThreadHeaderTitleStyle = TextStyle
+export type ChatThreadHeaderSubtitleStyle = TextStyle
+
+export type ChatMessageListStyle = ViewStyle
+
+export type ChatMessageBubbleState = {
+  direction: ChatMessageDirection,
+}
+
+export type ChatMessageBubbleContainerStyle = ViewStyle
+export type ChatMessageBubbleStyle = ViewStyle
+export type ChatMessageBubbleContentStyle = TextStyle
+export type ChatMessageBubbleTimestampStyle = TextStyle
+export type ChatMessageBubbleReceiptStyle = ViewStyle
+export type ChatMessageBubbleReceiptTextStyle = TextStyle
+
+export type ChatMessageBubbleReceiptIconStyle = {
+  color: Color,
+}
+
+export type ChatMessageCardState = {
+  direction: ChatMessageDirection,
+  color?: ColoringType,
+}
+
+export type ChatMessageCardStyle = ViewStyle
+export type ChatMessageCardHeaderStyle = ViewStyle
+export type ChatMessageCardIconStyle = ViewStyle
+
+export type ChatMessageCardIconColor = {
+  color: Color,
+}
+
+export type ChatMessageCardTitleStyle = TextStyle
+export type ChatMessageCardSubtitleStyle = TextStyle
+export type ChatMessageCardBodyStyle = ViewStyle
+export type ChatMessageCardActionsStyle = ViewStyle
+
+export type ChatAttachmentCardState = {
+  direction: ChatMessageDirection,
+}
+
+export type ChatAttachmentCardStyle = ViewStyle
+export type ChatAttachmentCardIconStyle = ViewStyle
+
+export type ChatAttachmentCardIconColor = {
+  color: Color,
+}
+
+export type ChatAttachmentCardNameStyle = TextStyle
+export type ChatAttachmentCardMetadataStyle = TextStyle
+
+export type ChatSystemLineState = {
+  color?: ColoringType,
+}
+
+export type ChatSystemLineStyle = ViewStyle
+export type ChatSystemLineTextStyle = TextStyle
+
+export type ChatSystemLineIconStyle = {
+  color: Color,
+}
+
+export type ChatDateDividerStyle = ViewStyle
+export type ChatDateDividerTextStyle = TextStyle
+
+export type ChatQuickReplyChipState = InteractionState & {
+  isActive?: boolean,
+}
+
+export type ChatQuickReplyChipStyle = ViewStyle
+export type ChatQuickReplyChipTextStyle = TextStyle
+
+export type ChatMessageComposerStyle = ViewStyle
+export type ChatMessageComposerInputStyle = TextStyle
+
+export type ChatConversationRowTheme = {
+  container: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
+  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>, ChatMessageBubbleReceiptIconStyle>,
+}
+
+export type ChatConversationListTheme = {
+  container: StyleResolverFunction<Record<string, never>, ChatConversationListStyle>,
+  header: StyleResolverFunction<Record<string, never>, ChatConversationListHeaderStyle>,
+  footer: StyleResolverFunction<Record<string, never>, ChatConversationListFooterStyle>,
+}
+
+export type ChatThreadHeaderTheme = {
+  container: StyleResolverFunction<Record<string, never>, ChatThreadHeaderStyle>,
+  title: StyleResolverFunction<Record<string, never>, ChatThreadHeaderTitleStyle>,
+  subtitle: StyleResolverFunction<Record<string, never>, ChatThreadHeaderSubtitleStyle>,
+}
+
+export type ChatMessageListTheme = {
+  container: StyleResolverFunction<Record<string, never>, ChatMessageListStyle>,
+}
+
+export type ChatMessageBubbleTheme = {
+  container: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
+  bubble: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleStyle>,
+  content: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleContentStyle>,
+  timestamp: StyleResolverFunction<ChatMessageBubbleState, ChatMessageBubbleTimestampStyle>,
+  receipt: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptStyle>,
+  receiptText: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptTextStyle>,
+  receiptIcon: StyleResolverFunction<Record<string, never>, ChatMessageBubbleReceiptIconStyle>,
+}
+
+export type ChatMessageCardTheme = {
+  container: StyleResolverFunction<ChatMessageCardState, ChatMessageCardStyle>,
+  header: StyleResolverFunction<Record<string, never>, ChatMessageCardHeaderStyle>,
+  icon: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconStyle>,
+  iconColor: StyleResolverFunction<ChatMessageCardState, ChatMessageCardIconColor>,
+  title: StyleResolverFunction<ChatMessageCardState, ChatMessageCardTitleStyle>,
+  subtitle: StyleResolverFunction<Record<string, never>, ChatMessageCardSubtitleStyle>,
+  body: StyleResolverFunction<Record<string, never>, ChatMessageCardBodyStyle>,
+  actions: StyleResolverFunction<Record<string, never>, ChatMessageCardActionsStyle>,
+}
+
+export type ChatAttachmentCardTheme = {
+  container: StyleResolverFunction<ChatAttachmentCardState, ChatAttachmentCardStyle>,
+  icon: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconStyle>,
+  iconColor: StyleResolverFunction<Record<string, never>, ChatAttachmentCardIconColor>,
+  name: StyleResolverFunction<Record<string, never>, ChatAttachmentCardNameStyle>,
+  metadata: StyleResolverFunction<Record<string, never>, ChatAttachmentCardMetadataStyle>,
+}
+
+export type ChatSystemLineTheme = {
+  container: StyleResolverFunction<ChatSystemLineState, ChatSystemLineStyle>,
+  text: StyleResolverFunction<ChatSystemLineState, ChatSystemLineTextStyle>,
+  icon: StyleResolverFunction<ChatSystemLineState, ChatSystemLineIconStyle>,
+}
+
+export type ChatDateDividerTheme = {
+  container: StyleResolverFunction<Record<string, never>, ChatDateDividerStyle>,
+  text: StyleResolverFunction<Record<string, never>, ChatDateDividerTextStyle>,
+}
+
+export type ChatQuickReplyChipTheme = {
+  container: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipStyle>,
+  text: StyleResolverFunction<ChatQuickReplyChipState, ChatQuickReplyChipTextStyle>,
+}
+
+export type ChatMessageComposerTheme = {
+  container: StyleResolverFunction<Record<string, never>, ChatMessageComposerStyle>,
+  input: StyleResolverFunction<Record<string, never>, ChatMessageComposerInputStyle>,
+  placeholderColor: StyleResolverFunction<Record<string, never>, Color>,
+}
+
+export type ChatTheme = {
+  conversationRow: ChatConversationRowTheme,
+  conversationList: ChatConversationListTheme,
+  threadHeader: ChatThreadHeaderTheme,
+  messageList: ChatMessageListTheme,
+  messageBubble: ChatMessageBubbleTheme,
+  messageCard: ChatMessageCardTheme,
+  attachmentCard: ChatAttachmentCardTheme,
+  systemLine: ChatSystemLineTheme,
+  dateDivider: ChatDateDividerTheme,
+  quickReplyChip: ChatQuickReplyChipTheme,
+  messageComposer: ChatMessageComposerTheme,
+}

package/src/theme/types/{checkbox.ts → components/checkbox.ts}

@@ -1,6 +1,12 @@
-import type { ColorValue, ElementSize } from '@helpwave/hightide-design'
-import type { StyleProp, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
+import type { ViewStyle } from 'react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import type { Color } from '@/src/theme/types/color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '@/src/theme/types/resolver'
 
 export type CheckboxSize = 'sm' | 'md' | 'lg'
 
@@ -13,10 +19,10 @@ export type CheckboxState = InteractionState & {
   alwaysShowCheckIcon?: boolean,
 }
 
-export type CheckboxStyle = StyleProp<ViewStyle>
+export type CheckboxStyle = ViewStyle
 
 export type CheckboxIconStyle = {
-  color: ColorValue,
+  color: Color,
   size: Exclude<ElementSize, 'xs'>,
   visible: boolean,
 }

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

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

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

@@ -0,0 +1,42 @@
+import type { Color } from '@/src/theme/types/color'
+import type { ButtonTheme } from '@/src/theme/types/components/button'
+import type { ChatTheme } from '@/src/theme/types/components/chat'
+import type { CheckboxTheme } from '@/src/theme/types/components/checkbox'
+import type { ChipTheme } from '@/src/theme/types/components/chip'
+import type { IconButtonTheme } from '@/src/theme/types/components/iconButton'
+import type { InputTheme } from '@/src/theme/types/components/input'
+import type { MenuTheme } from '@/src/theme/types/components/menu'
+import type { MultiSelectTheme } from '@/src/theme/types/components/multiSelect'
+import type { SelectTheme } from '@/src/theme/types/components/select'
+
+export type ColoringDefinition = {
+  color: Color,
+  onColor: Color,
+  hover: Color,
+  text?: Color,
+  textHover?: Color,
+  outline?: Color,
+  outlineHover?: Color,
+  tonalText?: Color,
+  tonalBackground?: Color,
+}
+
+export type HightideComponentThemes = {
+  coloring: {
+    primary: ColoringDefinition,
+    secondary: ColoringDefinition,
+    positive: ColoringDefinition,
+    warning: ColoringDefinition,
+    negative: ColoringDefinition,
+    neutral: ColoringDefinition,
+  } & Record<string, ColoringDefinition>,
+  button: ButtonTheme,
+  iconButton: IconButtonTheme,
+  chip: ChipTheme,
+  checkbox: CheckboxTheme,
+  input: InputTheme,
+  select: SelectTheme,
+  multiSelect: MultiSelectTheme,
+  chat: ChatTheme,
+  menu: MenuTheme,
+}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import type { TextStyle } from 'react-native'
+
+import type { Color } from '@/src/theme/types/color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '@/src/theme/types/resolver'
+
+export type InputState = InteractionState & {
+  isInvalid?: boolean,
+  isReadOnly?: boolean,
+}
+
+export type InputStyle = TextStyle
+
+export type InputTheme = {
+  input: StyleResolverFunction<InputState, InputStyle>,
+  placeholderColor: StyleResolverFunction<InputState, Color>,
+}

package/src/theme/types/{menu.ts → components/menu.ts}

@@ -1,33 +1,40 @@
-import type { ColorValue } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
 
-export type MenuSectionStyle = StyleProp<ViewStyle>
+import type { Color } from '@/src/theme/types/color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '@/src/theme/types/resolver'
 
-export type MenuSectionTitleStyle = StyleProp<TextStyle>
+export type MenuSectionStyle = ViewStyle
 
-export type MenuCardStyle = StyleProp<ViewStyle>
+export type MenuSectionTitleStyle = TextStyle
 
-export type MenuItemStyle = StyleProp<ViewStyle>
+export type MenuCardStyle = ViewStyle
 
-export type MenuItemContentStyle = StyleProp<ViewStyle>
+export type MenuItemStyle = ViewStyle
 
-export type MenuItemLabelStyle = StyleProp<TextStyle>
+export type MenuItemContentStyle = ViewStyle
 
-export type MenuItemValueStyle = StyleProp<TextStyle>
+export type MenuItemLabelStyle = TextStyle
+
+export type MenuItemValueStyle = TextStyle
 
 export type MenuActionItemState = InteractionState & {
   isDanger?: boolean,
 }
 
-export type MenuActionItemStyle = StyleProp<ViewStyle>
+export type MenuActionItemStyle = ViewStyle
 
-export type MenuActionItemContentStyle = StyleProp<ViewStyle>
+export type MenuActionItemContentStyle = ViewStyle
 
-export type MenuActionItemLabelStyle = StyleProp<TextStyle>
+export type MenuActionItemLabelStyle = TextStyle
 
 export type MenuActionItemIconColor = {
-  color: ColorValue,
+  color: Color,
 }
 
 export type MenuTheme = {

package/src/theme/types/{multiSelect.ts → components/multiSelect.ts}

@@ -1,6 +1,9 @@
-import type { ColorValue } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { StyleResolverFunction } from './resolver'
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type { Color } from '@/src/theme/types/color'
 import type {
   SelectMenuStyle,
   SelectOptionState,
@@ -8,7 +11,8 @@ import type {
   SelectSearchStyle,
   SelectState,
   SelectTriggerTextStyle
-} from './select'
+} from '@/src/theme/types/components/select'
+import type { StyleResolverFunction } from '@/src/theme/types/resolver'
 
 export type MultiSelectState = SelectState & {
   hasSelections?: boolean,
@@ -16,16 +20,16 @@ export type MultiSelectState = SelectState & {
 
 export type MultiSelectOptionState = SelectOptionState
 
-export type MultiSelectTriggerStyle = StyleProp<ViewStyle>
+export type MultiSelectTriggerStyle = ViewStyle
 
-export type MultiSelectOptionStyle = StyleProp<ViewStyle>
+export type MultiSelectOptionStyle = ViewStyle
 
-export type MultiSelectOptionTextStyle = StyleProp<TextStyle>
+export type MultiSelectOptionTextStyle = TextStyle
 
-export type MultiSelectCheckboxStyle = StyleProp<ViewStyle>
+export type MultiSelectCheckboxStyle = ViewStyle
 
 export type MultiSelectCheckboxIconStyle = {
-  color: ColorValue,
+  color: Color,
   visible: boolean,
 }
 
@@ -35,7 +39,7 @@ export type MultiSelectTheme = {
   overlay: StyleResolverFunction<MultiSelectState, SelectOverlayStyle>,
   menu: StyleResolverFunction<MultiSelectState, SelectMenuStyle>,
   search: StyleResolverFunction<MultiSelectState, SelectSearchStyle>,
-  searchPlaceholderColor: StyleResolverFunction<MultiSelectState, ColorValue>,
+  searchPlaceholderColor: StyleResolverFunction<MultiSelectState, Color>,
   option: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
   optionText: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
   checkbox: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,

package/src/theme/types/{select.ts → components/select.ts}

@@ -1,6 +1,13 @@
-import type { ColorValue } from '@helpwave/hightide-design'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-import type { InteractionState, StyleResolverFunction } from './resolver'
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type { Color } from '@/src/theme/types/color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '@/src/theme/types/resolver'
 
 export type SelectState = InteractionState & {
   isInvalid?: boolean,
@@ -14,19 +21,19 @@ export type SelectOptionState = InteractionState & {
   isHighlighted?: boolean,
 }
 
-export type SelectTriggerStyle = StyleProp<ViewStyle>
+export type SelectTriggerStyle = ViewStyle
 
-export type SelectTriggerTextStyle = StyleProp<TextStyle>
+export type SelectTriggerTextStyle = TextStyle
 
-export type SelectOverlayStyle = StyleProp<ViewStyle>
+export type SelectOverlayStyle = ViewStyle
 
-export type SelectMenuStyle = StyleProp<ViewStyle>
+export type SelectMenuStyle = ViewStyle
 
-export type SelectSearchStyle = StyleProp<TextStyle>
+export type SelectSearchStyle = TextStyle
 
-export type SelectOptionStyle = StyleProp<ViewStyle>
+export type SelectOptionStyle = ViewStyle
 
-export type SelectOptionTextStyle = StyleProp<TextStyle>
+export type SelectOptionTextStyle = TextStyle
 
 export type SelectTheme = {
   trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
@@ -34,7 +41,7 @@ export type SelectTheme = {
   overlay: StyleResolverFunction<SelectState, SelectOverlayStyle>,
   menu: StyleResolverFunction<SelectState, SelectMenuStyle>,
   search: StyleResolverFunction<SelectState, SelectSearchStyle>,
-  searchPlaceholderColor: StyleResolverFunction<SelectState, ColorValue>,
+  searchPlaceholderColor: StyleResolverFunction<SelectState, Color>,
   option: StyleResolverFunction<SelectOptionState, SelectOptionStyle>,
   optionText: StyleResolverFunction<SelectOptionState, SelectOptionTextStyle>,
 }

package/src/theme/types/decoration.ts

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

package/src/theme/types/index.ts

@@ -1,12 +1,7 @@
-export * from './button'
-export * from './chat'
-export * from './checkbox'
-export * from './chip'
+export * from './color'
 export * from './components'
-export * from './iconButton'
-export * from './input'
-export * from './menu'
-export * from './multiSelect'
+export * from './decoration'
+export * from './layout'
 export * from './resolver'
-export * from './select'
 export * from './theme'
+export * from './typography'