@helpwave/hightide-native 0.0.2 → 0.0.6

package/src/theme/resolvers/checkbox.ts

@@ -1,23 +1,27 @@
-import {
-  remToPx,
-  spacing,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type ElementSize,
-  type SemanticColors
-} from '@helpwave/hightide-design'
 import type { ViewStyle } from 'react-native'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '../types/color'
 import type {
   CheckboxSize,
   CheckboxState,
   CheckboxTheme
-} from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
+} from '../types/components/checkbox'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 const checkboxSizes: Record<CheckboxSize, number> = {
-  sm: remToPx('1.25rem'),
-  md: remToPx('1.5rem'),
-  lg: remToPx('2rem'),
+  sm: 20,
+  md: 24,
+  lg: 32,
 }
 
 const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
@@ -27,8 +31,8 @@ const checkboxIconSizes: Record<CheckboxSize, Exclude<ElementSize, 'xs'>> = {
 }
 
 export type CreateCheckboxThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createCheckboxTheme = ({
@@ -56,7 +60,7 @@ export const createCheckboxTheme = ({
       height: dimension,
       alignItems: 'center',
       justifyContent: 'center',
-      borderWidth: remToPx(spacing.coloringOutlineWidth),
+      borderWidth: componentLayouts.shared.coloringOutlineWidth,
       borderColor,
       borderRadius: state.isRounded ? dimension / 2 : 6,
       backgroundColor,
@@ -81,7 +85,7 @@ export const createCheckboxTheme = ({
 
 export const createCheckboxThemeFromDesign = (theme: DesignTokensTheme): CheckboxTheme => {
   return createCheckboxTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/resolvers/chip.ts

@@ -1,18 +1,26 @@
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
 import {
   componentLayouts,
-  toPx,
-  type ColoringTokensDefinitions,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { TextStyle, ViewStyle } from 'react-native'
-import type { ChipState, ChipTheme } from '../types'
-import { createStyleResolver } from '../types/resolver'
+  fontWeights
+} from '@helpwave/hightide-design/tokens'
+import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+
 import { resolveColoringStyles } from './coloring'
+import type { HightideSemanticColors } from '../types/color'
+import type {
+  ChipState,
+  ChipTheme
+} from '../types/components/chip'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import { createStyleResolver } from '../types/resolver'
 
 export type CreateChipThemeOptions = {
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
 }
 
 export const createChipTheme = ({
@@ -35,18 +43,18 @@ export const createChipTheme = ({
       backgroundColor: resolved.backgroundColor,
       borderColor: resolved.borderColor,
       borderWidth: resolved.borderWidth,
-      paddingVertical: toPx(layout.paddingVertical),
-      paddingHorizontal: toPx(layout.paddingHorizontal),
-      gap: toPx(layout.gap),
-      minHeight: toPx(layout.minHeight),
-      borderRadius: toPx(layout.borderRadius),
+      paddingVertical: layout.paddingVertical,
+      paddingHorizontal: layout.paddingHorizontal,
+      gap: layout.gap,
+      minHeight: layout.minHeight,
+      borderRadius: layout.borderRadius,
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
     const text: TextStyle = {
       color: resolved.color,
-      fontSize: toPx(layout.fontSize),
-      fontWeight: '600',
+      fontSize: layout.fontSize,
+      fontWeight: fontWeights.semibold,
     }
 
     return { chip, text }
@@ -60,7 +68,7 @@ export const createChipTheme = ({
 
 export const createChipThemeFromDesign = (theme: DesignTokensTheme): ChipTheme => {
   return createChipTheme({
-    semantic: theme.semantic,
-    coloring: theme.coloring,
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
   })
 }

package/src/theme/resolvers/coloring.ts

@@ -1,20 +1,24 @@
 import {
-  componentLayouts,
-  hexWithAlpha,
-  toPx,
-  type ButtonColoringStyle,
-  type ChipColoringStyle,
-  type ColorValue,
-  type ColoringToken,
-  type ColoringStyle,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { InteractionState } from '../types'
+  hexWithAlpha
+} from '@helpwave/hightide-design/helpers'
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ButtonColoringStyle,
+  ChipColoringStyle,
+  ColoringStyle
+} from '@helpwave/hightide-design/types'
+
+import type {
+  Color,
+  HightideSemanticColors
+} from '../types/color'
+import type { ColoringDefinition } from '../types/components/hightide'
+import type { InteractionState } from '../types/resolver'
 
 export type ResolvedColoringStyles = {
-  backgroundColor: ColorValue | 'transparent',
-  color: ColorValue,
-  borderColor?: ColorValue,
+  backgroundColor: Color | 'transparent',
+  color: Color,
+  borderColor?: Color,
   borderWidth: number,
 }
 
@@ -23,12 +27,12 @@ const usesHover = (state: InteractionState): boolean => {
 }
 
 export const resolveColoringStyles = (
-  tokens: ColoringToken,
+  tokens: ColoringDefinition,
   coloringStyle: ColoringStyle,
-  semantic: SemanticColors,
+  semantic: HightideSemanticColors,
   state: InteractionState = {}
 ): ResolvedColoringStyles => {
-  const outlineWidth = toPx(componentLayouts.shared.coloringOutlineWidth)
+  const outlineWidth = componentLayouts.shared.coloringOutlineWidth
   const hovered = usesHover(state)
 
   if (state.isDisabled) {

package/src/theme/resolvers/iconButton.ts

@@ -1,18 +1,26 @@
-import {
-  componentLayouts,
-  toPx,
-  type ColoringTokensDefinitions,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
 import type { ViewStyle } from 'react-native'
-import type { IconButtonState, IconButtonTheme } from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
-import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+
+import {
+  isOutlineColoringStyle,
+  resolveColoringStyles
+} from './coloring'
+import type { HightideSemanticColors } from '../types/color'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import type {
+  IconButtonState,
+  IconButtonTheme
+} from '../types/components/iconButton'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 export type CreateIconButtonThemeOptions = {
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
 }
 
 export const createIconButtonTheme = ({
@@ -26,8 +34,8 @@ 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)
@@ -40,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,
     }
 
@@ -58,7 +66,7 @@ export const createIconButtonTheme = ({
 
 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/input.ts

@@ -1,17 +1,24 @@
-import {
-  inputElementSizes,
-  remToPx,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
 import type { TextStyle } from 'react-native'
-import type { InputState, InputTheme } from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
+
+import { componentLayouts } from '@helpwave/hightide-design/tokens'
+import type {
+  ComponentColorTokens,
+  HightideDesignTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '../types/color'
+import type {
+  InputState,
+  InputTheme
+} from '../types/components/input'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 export type CreateInputThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createInputTheme = ({
@@ -19,14 +26,14 @@ export const createInputTheme = ({
   component,
 }: CreateInputThemeOptions): InputTheme => {
   const resolveInput = (state: InputState): TextStyle => {
-    const sizing = inputElementSizes.md
+    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,
@@ -44,7 +51,7 @@ export const createInputTheme = ({
 
 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

@@ -1,16 +1,24 @@
 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 '../types/color'
+import type {
+  MenuActionItemState,
+  MenuTheme
+} from '../types/components/menu'
 import {
-  remToPx,
-  type ComponentColors,
-  type DesignTheme as DesignTokensTheme,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { MenuActionItemState, MenuTheme } from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 export type CreateMenuThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createMenuTheme = ({
@@ -24,9 +32,9 @@ export const createMenuTheme = ({
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
       minHeight: 64,
-      gap: remToPx('0.75rem'),
-      paddingHorizontal: remToPx('1rem'),
-      paddingVertical: remToPx('0.5rem'),
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: component.divider,
       backgroundColor: pressed ? semantic.surfaceHover : ('transparent' as const),
@@ -36,14 +44,14 @@ export const createMenuTheme = ({
 
   const resolveItemContent = () => ({
     flex: 1,
-    gap: remToPx('0.25rem'),
+    gap: 4,
     justifyContent: 'center' as const,
   })
 
   const resolveActionLabel = (state: MenuActionItemState) => ({
     color: state.isDanger ? semantic.negative : semantic.onSurface,
-    fontSize: remToPx('0.9375rem'),
-    fontWeight: '500' as const,
+    fontSize: 15,
+    fontWeight: fontWeights.medium,
   })
 
   const resolveActionIcon = (state: MenuActionItemState) => ({
@@ -52,20 +60,20 @@ export const createMenuTheme = ({
 
   return {
     section: createStyleResolver(() => ({
-      marginBottom: remToPx('1.25rem'),
-      gap: remToPx('0.5rem'),
+      marginBottom: 20,
+      gap: 8,
     })),
     sectionTitle: createStyleResolver(() => ({
       color: semantic.description,
-      fontSize: remToPx('0.75rem'),
-      fontWeight: '700',
+      fontSize: 12,
+      fontWeight: fontWeights.bold,
       letterSpacing: 0.4,
       textTransform: 'uppercase',
-      paddingHorizontal: remToPx('0.25rem'),
+      paddingHorizontal: 4,
     })),
     card: createStyleResolver(() => ({
       backgroundColor: semantic.surface,
-      borderRadius: remToPx('0.75rem'),
+      borderRadius: 12,
       borderWidth: 1,
       borderColor: component.border,
       overflow: 'hidden',
@@ -74,21 +82,21 @@ export const createMenuTheme = ({
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
       minHeight: 64,
-      paddingHorizontal: remToPx('1rem'),
-      paddingVertical: remToPx('0.5rem'),
+      paddingHorizontal: 16,
+      paddingVertical: 8,
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: component.divider,
-      gap: remToPx('0.75rem'),
+      gap: 12,
     })),
     itemContent: createStyleResolver(resolveItemContent),
     itemLabel: createStyleResolver(() => ({
       color: semantic.description,
-      fontSize: remToPx('0.75rem'),
+      fontSize: 12,
     })),
     itemValue: createStyleResolver(() => ({
       color: semantic.onSurface,
-      fontSize: remToPx('0.9375rem'),
-      fontWeight: '500',
+      fontSize: 15,
+      fontWeight: fontWeights.medium,
     })),
     actionItem: createStyleResolver(resolveActionItem),
     actionItemContent: createStyleResolver(resolveItemContent),
@@ -106,7 +114,7 @@ export const createMenuTheme = ({
 
 export const createMenuThemeFromDesign = (theme: DesignTokensTheme): MenuTheme => {
   return createMenuTheme({
-    semantic: theme.semantic,
-    component: theme.component,
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
   })
 }

package/src/theme/resolvers/multiSelect.ts

@@ -1,19 +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 '../types/color'
 import type {
   MultiSelectOptionState,
   MultiSelectState,
   MultiSelectTheme
-} from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
+} from '../types/components/multiSelect'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 export type CreateMultiSelectThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createMultiSelectTheme = ({
@@ -23,9 +27,9 @@ export const createMultiSelectTheme = ({
   return {
     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,
@@ -69,7 +73,7 @@ export const createMultiSelectTheme = ({
     })),
     optionText: createStyleResolver((state: MultiSelectOptionState) => ({
       color: state.isSelected ? semantic.primary : component.menu.text,
-      fontWeight: state.isSelected ? '600' : '400',
+      fontWeight: state.isSelected ? fontWeights.semibold : fontWeights.base,
     })),
     checkbox: createStyleResolver((state: MultiSelectOptionState) => ({
       width: 18,
@@ -90,7 +94,7 @@ export const createMultiSelectTheme = ({
 
 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,19 +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 '../types/color'
 import type {
   SelectOptionState,
   SelectState,
   SelectTheme
-} from '../types'
-import { createStyleResolver, createValueResolver } from '../types/resolver'
+} from '../types/components/select'
+import {
+  createStyleResolver,
+  createValueResolver
+} from '../types/resolver'
 
 export type CreateSelectThemeOptions = {
-  semantic: SemanticColors,
-  component: ComponentColors,
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
 }
 
 export const createSelectTheme = ({
@@ -23,9 +27,9 @@ export const createSelectTheme = ({
   return {
     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,
@@ -65,14 +69,14 @@ export const createSelectTheme = ({
     })),
     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,22 +1,47 @@
-import type { DesignTheme as DesignTokensTheme } from '@helpwave/hightide-design'
-import {
-  createButtonThemeFromDesign,
-  createChatThemeFromDesign,
-  createCheckboxThemeFromDesign,
-  createChipThemeFromDesign,
-  createIconButtonThemeFromDesign,
-  createInputThemeFromDesign,
-  createMenuThemeFromDesign,
-  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 '../resolvers/button'
+import { createChatThemeFromDesign } from '../resolvers/chat'
+import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
+import { createChipThemeFromDesign } from '../resolvers/chip'
+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 type { Theme } from '../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),