@helpwave/hightide-native 0.3.2 → 0.5.0

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

@@ -1,22 +1,24 @@
+import type {
+  ColorValue } from 'react-native'
 import {
   View,
   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
 
 export type ThemedIconProps = Omit<ViewProps, 'children'> & {
   icon: IconComponent,
   size?: IconSize | number,
-  color?: string,
+  color?: ColorValue,
   strokeWidth?: number,
   appearance?: ThemedIconAppearance,
 }
@@ -31,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'
     ? {
@@ -40,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,15 +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,
-  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,
@@ -16,14 +19,16 @@ export type ContentThemeRootProviderProps = PropsWithChildren & ContentThemeCont
 export const ContentThemeRootProvider = ({
   children,
   foreground,
+  background,
   textStyle,
   iconStyle,
 }: ContentThemeRootProviderProps) => {
   const value = useMemo((): ContentThemeContextValue => ({
     foreground,
+    background,
     textStyle,
     iconStyle,
-  }), [foreground, textStyle, iconStyle])
+  }), [foreground, background, textStyle, iconStyle])
 
   return (
     <ContentThemeContext.Provider value={value}>
@@ -32,51 +37,77 @@ export const ContentThemeRootProvider = ({
   )
 }
 
-type ForegroundOverride =
+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?: ForegroundOverride,
+  foreground?: ColorOverride,
+  background?: ColorOverride,
   textStyle?: TextStyleOverride,
   iconStyle?: IconStyleOverride,
+  isKeepingTextColor?: boolean,
+  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: backgroundOverride,
   textStyle: textStyleOverride,
   iconStyle: iconStyleOverride,
+  isKeepingIconColor = false,
+  isKeepingTextColor = false,
 }: ContentThemeOverrideProviderProps) => {
   const parent = useContentTheme()
 
   const value = useMemo((): ContentThemeContextValue => {
-    const foreground = typeof foregroundOverride === 'function'
-      ? foregroundOverride(parent.foreground)
-      : foregroundOverride ?? parent.foreground
+    const newForeground = resolveColorOverride(foregroundOverride, parent.foreground)
+    const newBackground = resolveColorOverride(backgroundOverride, parent.background)
 
-    const textStyle = typeof textStyleOverride === 'function'
-      ? textStyleOverride(parent.textStyle, foreground)
+    let textStyle = typeof textStyleOverride === 'function'
+      ? textStyleOverride(parent.textStyle, parent.foreground)
       : textStyleOverride ?? parent.textStyle
 
-    const iconStyle = typeof iconStyleOverride === 'function'
-      ? iconStyleOverride(parent.iconStyle, foreground)
+    if (!isKeepingTextColor && newForeground !== undefined) {
+      textStyle = { ...textStyle, color: newForeground }
+    }
+
+    let iconStyle = typeof iconStyleOverride === 'function'
+      ? iconStyleOverride(parent.iconStyle, parent.foreground)
       : iconStyleOverride ?? parent.iconStyle
 
+    if (!isKeepingIconColor && newForeground !== undefined) {
+      iconStyle = { ...iconStyle, color: newForeground }
+    }
+
     return {
-      foreground,
+      foreground: newForeground ?? parent.foreground,
+      background: newBackground ?? parent.background,
       textStyle,
       iconStyle,
     }
-  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride])
+  }, [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/icons/types.ts

@@ -1,8 +1,9 @@
 import type { ComponentType } from 'react'
+import type { ColorValue } from 'react-native'
 
 export type IconStyle = {
   size?: number,
-  color?: string,
+  color?: ColorValue,
   strokeWidth?: number,
 }
 

package/src/theme/adapters/style-adapter-utils.ts

@@ -1,6 +1,8 @@
-import type {
-  TextStyle,
-  ViewStyle
+import {
+  StyleSheet,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle
 } from 'react-native'
 
 import type {
@@ -24,6 +26,36 @@ import {
 import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
 import type { IconStyle } from '../../icons'
 
+function getStyleProperty<
+  T extends ViewStyle,
+  K extends keyof T
+>(
+  style: StyleProp<T>,
+  property: K
+): T[K] {
+  if (style == null) {
+    return undefined as T[K]
+  }
+
+  if (Array.isArray(style)) {
+    for (let i = style.length - 1; i >= 0; i--) {
+      const value = getStyleProperty(
+        style[i] as StyleProp<T>,
+        property
+      )
+
+      if (value !== undefined) {
+        return value
+      }
+    }
+
+    return undefined as T[K]
+  }
+
+  const flattened = StyleSheet.flatten(style) as T
+  return flattened[property]
+}
+
 type OptionalViewStyle<K extends keyof ViewStyle> = {
   [P in K]?: ViewStyle[P]
 }
@@ -144,7 +176,6 @@ const alignContentStyleAdapter = (
 const borderRadiusStyleAdapter = (
   borderRadius?: BorderRadiusToken
 ): OptionalViewStyle<
-  | 'borderRadius'
   | 'borderTopLeftRadius'
   | 'borderTopRightRadius'
   | 'borderBottomLeftRadius'
@@ -156,16 +187,14 @@ const borderRadiusStyleAdapter = (
 
   if (borderRadius.type === 'all') {
     return {
-      borderRadius: borderRadius.value,
-      borderTopLeftRadius: undefined,
-      borderTopRightRadius: undefined,
-      borderBottomLeftRadius: undefined,
-      borderBottomRightRadius: undefined,
+      borderTopLeftRadius:  borderRadius.value,
+      borderTopRightRadius:  borderRadius.value,
+      borderBottomLeftRadius:  borderRadius.value,
+      borderBottomRightRadius:  borderRadius.value,
     }
   }
 
   return {
-    borderRadius: undefined,
     borderTopLeftRadius: borderRadius.topLeft,
     borderTopRightRadius: borderRadius.topRight,
     borderBottomLeftRadius: borderRadius.bottomLeft,
@@ -428,6 +457,7 @@ export const StyleAdapterUtils = {
   container: containerStyleAdapter,
   text: textStyleAdapter,
   icon: iconStyleAdapter,
+  stylePropResolver: getStyleProperty
 }
 
 export type StyleAdapters = typeof StyleAdapterUtils

package/src/theme/resolvers/chat/conversation-row.ts

@@ -67,20 +67,14 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
       const resolvePressable = (pressableState: PressableState) => componentTokens.pressable({
         themeTokens,
         semanticResolvers: semanticTokens,
-        overrides: {
-          size: pressableOverrides.overrides?.size,
-          color: pressableOverrides.overrides?.color,
-          coloringStyle: pressableOverrides.overrides?.coloringStyle,
-          coloringColorVariant: pressableOverrides.overrides?.coloringColorVariant,
-          hasAdditionalHorizontalPadding: pressableOverrides.overrides?.hasAdditionalHorizontalPadding,
-        },
+        overrides: pressableOverrides.overrides ?? {},
         state: toPressableInteractionState(pressableState),
       })
 
       return {
         container: createStyleResolver((pressableState: PressableState): PressableContainerStyle => ({
           ...StyleAdapterUtils.container(resolvePressable(pressableState).container),
-          ...StyleAdapterUtils.container(pressableOverrides.container  = {}),
+          ...StyleAdapterUtils.container(pressableOverrides.container ?? {}),
         })),
         stateLayer: createStyleResolver((pressableState: PressableState): PressableStateLayerStyle => ({
           ...StyleAdapterUtils.container(resolvePressable(pressableState).stateLayer),
@@ -89,15 +83,15 @@ export const toChatConversationRowThemeResolvers: ComponentThemeResolver<ChatCon
           right: 0,
           bottom: 0,
           left: 0,
-          ...StyleAdapterUtils.container(pressableOverrides.stateLayer  = {}),
+          ...StyleAdapterUtils.container(pressableOverrides.stateLayer ?? {}),
         })),
         text: createStyleResolver((pressableState: PressableState): PressableTextStyle => ({
           ...StyleAdapterUtils.text(resolvePressable(pressableState).text),
-          ...StyleAdapterUtils.text(pressableOverrides.text  = {}),
+          ...StyleAdapterUtils.text(pressableOverrides.text ?? {}),
         })),
         icon: createValueResolver((pressableState: PressableState): PressableIconStyle => ({
           ...StyleAdapterUtils.icon(resolvePressable(pressableState).icon),
-          ...StyleAdapterUtils.icon(pressableOverrides.icon  = {}),
+          ...StyleAdapterUtils.icon(pressableOverrides.icon ?? {}),
         })),
       }
     }),

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/resolver.ts

@@ -41,7 +41,7 @@ export const toPressableInteractionState = (
 }
 
 export type StyleOverwrite<TState, TStyle> =
-  TStyle | ((prev: TStyle, state: TState) => TStyle)
+  TStyle | ((state: TState, prev: TStyle) => TStyle)
 
 export type StyleResolverFunction<TState, TStyle> = (
   props: TState,
@@ -67,7 +67,7 @@ export const createStyleResolver = <TState, TStyle>(
     }
 
     if (typeof overwrite === 'function') {
-      return (overwrite as (prev: TStyle, state: TState) => TStyle)(base, props)
+      return (overwrite as (state: TState, prev: TStyle) => TStyle)(props, base)
     }
 
     return [base, overwrite] as TStyle
@@ -91,7 +91,7 @@ export const createValueResolver = <TState, TValue>(
     }
 
     if (typeof overwrite === 'function') {
-      return (overwrite as (prev: TValue, state: TState) => TValue)(base, props)
+      return (overwrite as (state: TState, prev: TValue) => TValue)(props, base)
     }
 
     return overwrite

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'