@helpwave/hightide-native 0.4.0 → 0.5.0

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "src"
@@ -39,12 +39,16 @@
     "./types": {
       "types": "./src/types/index.ts",
       "default": "./src/types/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
     }
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-utils": "0.1.0",
-    "@helpwave/hightide-design": "0.4.0"
+    "@helpwave/hightide-design": "0.5.0",
+    "@helpwave/hightide-utils": "0.1.0"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/user-interaction/MultiSelect.tsx

@@ -67,6 +67,8 @@ export const MultiSelect = ({
     onEditComplete,
   })
 
+  const isSearchVisible = showSearch && options.length >= 6
+
   const selectedOptions = useMemo(() => {
     return options.filter((option) => multiSelect.isSelected(option.id))
   }, [multiSelect, options])
@@ -88,8 +90,8 @@ export const MultiSelect = ({
     [multiSelectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => multiSelectTheme.menu({ hasSearch: showSearch }),
-    [multiSelectTheme, showSearch]
+    () => multiSelectTheme.menu({ hasSearch: isSearchVisible }),
+    [multiSelectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => multiSelectTheme.header({}),
@@ -103,7 +105,7 @@ export const MultiSelect = ({
     () => options.filter((option) => multiSelect.visibleOptionIds.includes(option.id)),
     [options, multiSelect.visibleOptionIds]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && multiSelect.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -210,7 +212,7 @@ export const MultiSelect = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={multiSelect.searchQuery}
@@ -260,7 +262,8 @@ export const MultiSelect = ({
                         <View style={multiSelectTheme.checkbox(optionState)}>
                           <ThemedIcon
                             icon={HightideIconRegistry.Check}
-                            size="sm"
+                            size={checkboxIcon.size}
+                            strokeWidth={checkboxIcon.strokeWidth}
                             color={checkboxIcon.color}
                           />
                         </View>

package/src/components/user-interaction/Select.tsx

@@ -20,7 +20,6 @@ import {
   type UseSelectOption
 } from '../../hooks/useSelect'
 import type { SelectState } from '../../theme/types/components/select'
-import type { Color } from '../../theme/types/color'
 import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
@@ -69,6 +68,8 @@ export const Select = ({
     onEditComplete,
   })
 
+  const isSearchVisible = showSearch && options.length >= 6
+
   const selectedLabel = useMemo(() => {
     const selected = options.find((option) => option.id === select.value)
     return selected?.label ?? placeholder
@@ -95,8 +96,8 @@ export const Select = ({
     [selectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => selectTheme.menu({ hasSearch: showSearch }),
-    [selectTheme, showSearch]
+    () => selectTheme.menu({ hasSearch: isSearchVisible }),
+    [selectTheme, isSearchVisible]
   )
   const resolvedHeaderStyle = useMemo(
     () => selectTheme.header({}),
@@ -106,7 +107,7 @@ export const Select = ({
     () => selectTheme.emptyText({}),
     [selectTheme]
   )
-  const showEmptySearchResults = showSearch
+  const showEmptySearchResults = isSearchVisible
     && select.searchQuery.trim().length > 0
     && visibleOptions.length === 0
 
@@ -181,7 +182,7 @@ export const Select = ({
             style={resolvedMenuStyle}
             onPress={(event) => event.stopPropagation()}
           >
-            {showSearch && (
+            {isSearchVisible && (
               <View style={resolvedHeaderStyle}>
                 <SearchBar
                   value={select.searchQuery}
@@ -220,16 +221,14 @@ export const Select = ({
                       color={optionColor}
                       disabled={item.disabled}
                       onPress={() => select.selectValue(item.id)}
-                      trailing={isSelected
-                        ? (
-                          <ThemedIcon
-                            icon={HightideIconRegistry.Check}
-                            size={checkIcon.size}
-                            strokeWidth={checkIcon.strokeWidth}
-                            color={checkIcon.color as Color | undefined}
-                          />
-                        )
-                        : undefined}
+                      leading={(
+                        <ThemedIcon
+                          icon={HightideIconRegistry.Check}
+                          size={checkIcon.size}
+                          strokeWidth={checkIcon.strokeWidth}
+                          color={isSelected ? theme.colors.primary.color : 'transparent'}
+                        />
+                      )}
                     />
                   )
                 }}

package/src/components/visualization-and-display/ThemedIcon.tsx

@@ -5,13 +5,13 @@ import {
   type ViewProps
 } from 'react-native'
 
-import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
 import type { Appearance } from '@helpwave/hightide-design/semantic-token-resolvers'
 import type { IconSize } from '@helpwave/hightide-design/theme-tokens'
 
 import type { IconComponent } from '../../icons/types'
 import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { HexColorUtils } from '../../utils/hex'
 
 export type ThemedIconAppearance = Appearance
 
@@ -33,7 +33,7 @@ export const ThemedIcon = ({
   ...props
 }: ThemedIconProps) => {
   const { theme } = useTheme()
-  const { foreground, iconStyle } = useContentTheme()
+  const { foreground, background, iconStyle } = useContentTheme()
   const resolvedSize = size ?? iconStyle.size ?? 'md'
   const iconToken = typeof resolvedSize === 'number'
     ? {
@@ -42,13 +42,16 @@ export const ThemedIcon = ({
     }
     : theme.components.icon[resolvedSize]
 
-  // TODO fix this by using a hex color parser
-  const baseColor = (color
-    ?? iconStyle.color
-    ?? foreground) as HexColorToken
+  const baseColor = HexColorUtils.tryParseColorValue(color ?? iconStyle.color ?? foreground) ?? foreground
   const resolvedColor = appearance === 'normal'
     ? baseColor
-    : theme.semantics.withAppearance({ color: baseColor, appearance })
+    : theme.semantics.withAppearance({
+      colorPair: {
+        color: background,
+        onColor: baseColor,
+      },
+      appearance,
+    })
 
   return (
     <View

package/src/components/visualization-and-display/ThemedText.tsx

@@ -6,8 +6,6 @@ import {
   type TextProps
 } from 'react-native'
 
-import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
-
 import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 
@@ -23,20 +21,21 @@ export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTe
   ...props
 }, ref) {
   const { theme } = useTheme()
-  const { foreground, textStyle } = useContentTheme()
-  // TODO use a hex color parser
-  const foregroundColor = (typeof textStyle.color === 'string'
-    ? textStyle.color
-    : foreground) as HexColorToken
+  const { foreground, background, textStyle } = useContentTheme()
   const color = appearance === 'description'
-    ? theme.semantics.asDescription({ color: foregroundColor })
-    : foregroundColor
+    ? theme.semantics.asDescription({
+      colorPair: {
+        color: background,
+        onColor: foreground,
+      },
+    })
+    : undefined
 
   return (
     <RNText
       {...props}
       ref={ref}
-      style={[textStyle, { color }, style]}
+      style={[textStyle, color === undefined ? undefined : { color }, style]}
     />
   )
 })

package/src/global-contexts/content-theme/ContentThemeContext.ts

@@ -2,16 +2,18 @@ import {
   createContext,
   useContext
 } from 'react'
-import type { ColorValue, TextStyle } from 'react-native'
+import type { TextStyle } from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
 
 import type { IconStyle } from '../../icons'
 
-export type ContentThemeContextValue = {
-  foreground: ColorValue,
-  background: ColorValue,
-  textStyle: TextStyle,
-  iconStyle: IconStyle,
-}
+export type ContentThemeContextValue = Readonly<{
+  foreground: HexColorToken,
+  background: HexColorToken,
+  textStyle: Readonly<TextStyle>,
+  iconStyle: Readonly<IconStyle>,
+}>
 
 export const ContentThemeContext = createContext<ContentThemeContextValue | null>(null)
 

package/src/global-contexts/content-theme/ContentThemeProvider.tsx

@@ -4,7 +4,10 @@ import {
 } from 'react'
 import type { ColorValue, TextStyle } from 'react-native'
 
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+
 import type { IconStyle } from '../../icons'
+import { HexColorUtils } from '../../utils/hex'
 import {
   ContentThemeContext,
   useContentTheme,
@@ -36,15 +39,15 @@ export const ContentThemeRootProvider = ({
 
 type ColorOverride =
   | ColorValue
-  | ((prev: ColorValue) => ColorValue)
+  | ((prev: HexColorToken) => ColorValue)
 
 type TextStyleOverride =
   | TextStyle
-  | ((prev: TextStyle, foreground: ColorValue) => TextStyle)
+  | ((prev: TextStyle, foreground: HexColorToken) => TextStyle)
 
 type IconStyleOverride =
   | IconStyle
-  | ((prev: IconStyle, foreground: ColorValue) => IconStyle)
+  | ((prev: IconStyle, foreground: HexColorToken) => IconStyle)
 
 export type ContentThemeOverrideProviderProps = PropsWithChildren & {
   foreground?: ColorOverride,
@@ -55,10 +58,22 @@ export type ContentThemeOverrideProviderProps = PropsWithChildren & {
   isKeepingIconColor?: boolean,
 }
 
+const resolveColorOverride = (
+  override: ColorOverride | undefined,
+  previous: HexColorToken
+): HexColorToken | undefined => {
+  if (override === undefined) {
+    return undefined
+  }
+
+  const raw = typeof override === 'function' ? override(previous) : override
+  return HexColorUtils.tryParseColorValue(raw)
+}
+
 export const ContentThemeOverrideProvider = ({
   children,
   foreground: foregroundOverride,
-  background: backroundOverride,
+  background: backgroundOverride,
   textStyle: textStyleOverride,
   iconStyle: iconStyleOverride,
   isKeepingIconColor = false,
@@ -67,25 +82,24 @@ export const ContentThemeOverrideProvider = ({
   const parent = useContentTheme()
 
   const value = useMemo((): ContentThemeContextValue => {
-    const newForeground = typeof foregroundOverride === 'function'
-      ? foregroundOverride(parent.foreground)
-      : foregroundOverride
+    const newForeground = resolveColorOverride(foregroundOverride, parent.foreground)
+    const newBackground = resolveColorOverride(backgroundOverride, parent.background)
 
-    const newBackground = typeof backroundOverride === 'function'
-      ? backroundOverride(parent.background)
-      : backroundOverride
-
-    const textStyle = typeof textStyleOverride === 'function'
+    let textStyle = typeof textStyleOverride === 'function'
       ? textStyleOverride(parent.textStyle, parent.foreground)
       : textStyleOverride ?? parent.textStyle
 
-    if(!isKeepingTextColor && newForeground !== undefined) textStyle['color'] = newForeground
+    if (!isKeepingTextColor && newForeground !== undefined) {
+      textStyle = { ...textStyle, color: newForeground }
+    }
 
-    const iconStyle = typeof iconStyleOverride === 'function'
+    let iconStyle = typeof iconStyleOverride === 'function'
       ? iconStyleOverride(parent.iconStyle, parent.foreground)
       : iconStyleOverride ?? parent.iconStyle
 
-    if(!isKeepingIconColor && newForeground !== undefined) iconStyle['color'] = newForeground
+    if (!isKeepingIconColor && newForeground !== undefined) {
+      iconStyle = { ...iconStyle, color: newForeground }
+    }
 
     return {
       foreground: newForeground ?? parent.foreground,
@@ -93,7 +107,7 @@ export const ContentThemeOverrideProvider = ({
       textStyle,
       iconStyle,
     }
-  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride, backroundOverride, isKeepingTextColor, isKeepingIconColor])
+  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride, backgroundOverride, isKeepingTextColor, isKeepingIconColor])
 
   return (
     <ContentThemeContext.Provider value={value}>

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -95,6 +95,7 @@ export const ThemeProvider = ({
     <ThemeContext.Provider value={contextValue}>
       <ContentThemeRootProvider
         foreground={contextValue.theme.colors.surface.onColor}
+        background={contextValue.theme.colors.surface.color}
         textStyle={contextValue.theme.typography.body.md}
         iconStyle={{
           size: contextValue.theme.icongraphy.sizes.md,

package/src/theme/resolvers/input.ts

@@ -17,7 +17,7 @@ import {
 } from '../types/resolver'
 
 import { StyleAdapterUtils } from '../adapters'
-import { HexColorUtils } from '@helpwave/hightide-design/utils'
+import { HexColorUtils } from '../../utils/hex'
 
 const toDesignInputState = (state: InputState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()

package/src/theme/resolvers/searchBar.ts

@@ -18,7 +18,7 @@ import {
 } from '../types/resolver'
 
 import { StyleAdapterUtils } from '../adapters'
-import { HexColorUtils } from '@helpwave/hightide-design/utils'
+import { HexColorUtils } from '../../utils/hex'
 
 const toDesignSearchBarState = (state: SearchBarState = {}): DesignInputState => {
   const active = new Set<InputStateValue>()

package/src/theme/types/semantics.ts

@@ -61,13 +61,13 @@ export type HightideThemeSemantics = {
     tintStrength?: TintStrength,
   }, HexColorToken>,
   withAppearance: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
     appearance: Appearance,
   }, HexColorToken>,
   asFaded: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
   }, HexColorToken>,
   asDescription: BoundSemanticResolver<{
-    color: HexColorToken,
+    colorPair: ColorPairToken,
   }, HexColorToken>,
 } & ElementLayoutTokens

package/src/utils/hex.ts

@@ -0,0 +1,193 @@
+import { processColor, type ColorValue } from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import { HexColorUtils as DesignHexColorUtils } from '@helpwave/hightide-design/utils'
+
+const clampByte = (value: number): number => Math.round(Math.min(255, Math.max(0, value)))
+
+const channelHex = (value: number): string => clampByte(value).toString(16).padStart(2, '0')
+
+const toHex = (r: number, g: number, b: number, alpha: number = 1): HexColorToken => {
+  if (alpha >= 1) {
+    return `#${channelHex(r)}${channelHex(g)}${channelHex(b)}`
+  }
+
+  return `#${channelHex(r)}${channelHex(g)}${channelHex(b)}${channelHex(alpha * 255)}`
+}
+
+const argbNumberToHex = (argb: number): HexColorToken => {
+  const unsigned = argb >>> 0
+  const alpha = ((unsigned >>> 24) & 0xff) / 255
+  const r = (unsigned >>> 16) & 0xff
+  const g = (unsigned >>> 8) & 0xff
+  const b = unsigned & 0xff
+
+  return toHex(r, g, b, alpha)
+}
+
+const parseHexString = (value: string): HexColorToken | undefined => {
+  const normalized = value.startsWith('#') ? value.slice(1) : value
+  if (!/^[0-9a-fA-F]+$/.test(normalized)) {
+    return undefined
+  }
+
+  if (normalized.length === 3 || normalized.length === 4) {
+    const expanded = normalized.split('').map((char) => `${char}${char}`).join('')
+    return parseHexString(expanded)
+  }
+
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return undefined
+  }
+
+  const r = Number.parseInt(normalized.slice(0, 2), 16)
+  const g = Number.parseInt(normalized.slice(2, 4), 16)
+  const b = Number.parseInt(normalized.slice(4, 6), 16)
+  const alpha = normalized.length === 8
+    ? Number.parseInt(normalized.slice(6, 8), 16) / 255
+    : 1
+
+  return toHex(r, g, b, alpha)
+}
+
+const parseNumericChannel = (raw: string, percentScale: number): number => {
+  const trimmed = raw.trim()
+  if (trimmed.endsWith('%')) {
+    return (Number.parseFloat(trimmed.slice(0, -1)) / 100) * percentScale
+  }
+
+  return Number.parseFloat(trimmed)
+}
+
+const parseRgbString = (value: string): HexColorToken | undefined => {
+  const match = /^rgba?\(\s*([^\s,/]+)[\s,]+([^\s,/]+)[\s,]+([^\s,/]+)(?:\s*[,/]\s*([^\s,/]+))?\s*\)$/i.exec(value)
+  if (!match) {
+    return undefined
+  }
+
+  const r = parseNumericChannel(match[1], 255)
+  const g = parseNumericChannel(match[2], 255)
+  const b = parseNumericChannel(match[3], 255)
+  const alpha = match[4] === undefined ? 1 : parseNumericChannel(match[4], 1)
+
+  if ([r, g, b, alpha].some((channel) => Number.isNaN(channel))) {
+    return undefined
+  }
+
+  return toHex(r, g, b, alpha)
+}
+
+const hueToRgb = (p: number, q: number, t: number): number => {
+  let wrapped = t
+  if (wrapped < 0) {
+    wrapped += 1
+  }
+  if (wrapped > 1) {
+    wrapped -= 1
+  }
+  if (wrapped < 1 / 6) {
+    return p + (q - p) * 6 * wrapped
+  }
+  if (wrapped < 1 / 2) {
+    return q
+  }
+  if (wrapped < 2 / 3) {
+    return p + (q - p) * (2 / 3 - wrapped) * 6
+  }
+
+  return p
+}
+
+const hslToRgb = (hue: number, saturation: number, lightness: number): [number, number, number] => {
+  if (saturation === 0) {
+    const gray = lightness * 255
+    return [gray, gray, gray]
+  }
+
+  const q = lightness < 0.5
+    ? lightness * (1 + saturation)
+    : lightness + saturation - lightness * saturation
+  const p = 2 * lightness - q
+  const h = (((hue % 360) + 360) % 360) / 360
+
+  return [
+    hueToRgb(p, q, h + 1 / 3) * 255,
+    hueToRgb(p, q, h) * 255,
+    hueToRgb(p, q, h - 1 / 3) * 255,
+  ]
+}
+
+const parseHslString = (value: string): HexColorToken | undefined => {
+  const match = /^hsla?\(\s*([^\s,/]+)(?:deg)?[\s,]+([^\s,/]+)[\s,]+([^\s,/]+)(?:\s*[,/]\s*([^\s,/]+))?\s*\)$/i.exec(value)
+  if (!match) {
+    return undefined
+  }
+
+  const hue = Number.parseFloat(match[1])
+  const saturation = parseNumericChannel(match[2], 1)
+  const lightness = parseNumericChannel(match[3], 1)
+  const alpha = match[4] === undefined ? 1 : parseNumericChannel(match[4], 1)
+
+  if ([hue, saturation, lightness, alpha].some((channel) => Number.isNaN(channel))) {
+    return undefined
+  }
+
+  const [r, g, b] = hslToRgb(hue, saturation, lightness)
+  return toHex(r, g, b, alpha)
+}
+
+const parseColorLiteral = (color: ColorValue | number): HexColorToken | undefined => {
+  if (typeof color === 'number') {
+    return argbNumberToHex(color)
+  }
+
+  if (typeof color !== 'string') {
+    return undefined
+  }
+
+  const trimmed = color.trim()
+  if (trimmed.length === 0) {
+    return undefined
+  }
+
+  if (trimmed.toLowerCase() === 'transparent') {
+    return DesignHexColorUtils.resolveColorToken('transparent')
+  }
+
+  return parseHexString(trimmed)
+    ?? parseRgbString(trimmed)
+    ?? parseHslString(trimmed)
+}
+
+const tryParseColorValue = (color: ColorValue | number): HexColorToken | undefined => {
+  const fromLiteral = parseColorLiteral(color)
+  if (fromLiteral !== undefined) {
+    return fromLiteral
+  }
+
+  const processed = processColor(color)
+  if (typeof processed === 'number') {
+    return argbNumberToHex(processed)
+  }
+
+  if (typeof processed === 'string' && processed !== color) {
+    return parseColorLiteral(processed)
+  }
+
+  return undefined
+}
+
+const parseColorValue = (color: ColorValue | number): HexColorToken => {
+  const parsed = tryParseColorValue(color)
+  if (parsed === undefined) {
+    throw new Error(`Unable to parse ColorValue to hex: ${String(color)}`)
+  }
+
+  return parsed
+}
+
+export const HexColorUtils = {
+  ...DesignHexColorUtils,
+  tryParseColorValue,
+  parseColorValue,
+}

package/src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from './hex'
 export * from './hitBoxOverlay'
 export * from './minimumTouchTargetHitSlop'