@helpwave/hightide-native 0.1.1 → 0.3.0

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

@@ -12,15 +12,15 @@ import {
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
-import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
+import { ContentThemeOverrideProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
+  ChipIconStyle,
   ChipState,
   ChipStyle,
   ChipTextStyle
 } from '../../theme/types/components/chip'
 import type { StyleOverwrite } from '../../theme/types/resolver'
-import type { Color } from '../../theme/types/color'
 import { ThemedText } from './ThemedText'
 
 export type ChipSize = ComponentSize
@@ -39,6 +39,7 @@ export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
   chipStyle?: StyleOverwrite<ChipState, ChipStyle>,
+  iconStyle?: StyleOverwrite<ChipState, ChipIconStyle>,
   textStyle?: StyleOverwrite<ChipState, ChipTextStyle>,
 }
 
@@ -49,6 +50,7 @@ export const Chip = ({
   size = 'md',
   style,
   chipStyle,
+  iconStyle,
   textStyle,
   ...props
 }: ChipProps) => {
@@ -64,6 +66,10 @@ export const Chip = ({
     () => theme.components.chip.chip(state, chipStyle),
     [theme, state, chipStyle]
   )
+  const resolvedIconStyle = useMemo(
+    () => theme.components.chip.icon(state, iconStyle),
+    [theme, state, iconStyle]
+  )
   const resolvedTextStyle = useMemo(
     () => theme.components.chip.text(state, textStyle),
     [theme, state, textStyle]
@@ -74,14 +80,15 @@ export const Chip = ({
       {...props}
       style={[resolvedChipStyle, style]}
     >
-      <ContentThemeProvider
-        foregroundColor={resolvedTextStyle.color as Color}
+      <ContentThemeOverrideProvider
+        foreground={resolvedTextStyle.color}
         textStyle={resolvedTextStyle}
+        iconStyle={resolvedIconStyle}
       >
         {typeof children === 'string' || typeof children === 'number'
           ? <ThemedText>{children}</ThemedText>
           : children}
-      </ContentThemeProvider>
+      </ContentThemeOverrideProvider>
     </View>
   )
 }

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

@@ -23,7 +23,7 @@ export type ThemedIconProps = Omit<ViewProps, 'children'> & {
 
 export const ThemedIcon = ({
   icon: Glyph,
-  size = 'md',
+  size,
   color,
   strokeWidth,
   appearance = 'normal',
@@ -31,15 +31,19 @@ export const ThemedIcon = ({
   ...props
 }: ThemedIconProps) => {
   const { theme } = useTheme()
-  const { foregroundColor } = useContentTheme()
-  const iconToken = typeof size === 'number'
+  const { foreground, iconStyle } = useContentTheme()
+  const resolvedSize = size ?? iconStyle.size ?? 'md'
+  const iconToken = typeof resolvedSize === 'number'
     ? {
-      size,
-      strokeWidth: strokeWidth ?? theme.components.icon.md.strokeWidth,
+      size: resolvedSize,
+      strokeWidth: strokeWidth ?? iconStyle.strokeWidth ?? theme.components.icon.md.strokeWidth,
     }
-    : theme.components.icon[size]
+    : theme.components.icon[resolvedSize]
 
-  const baseColor = (color ?? foregroundColor) as HexColorToken
+  // TODO fix this by using a hex color parser
+  const baseColor = (color
+    ?? iconStyle.color
+    ?? foreground) as HexColorToken
   const resolvedColor = appearance === 'normal'
     ? baseColor
     : theme.semantics.withAppearance({ color: baseColor, appearance })
@@ -64,7 +68,7 @@ export const ThemedIcon = ({
     >
       <Glyph
         size={iconToken.size}
-        strokeWidth={strokeWidth ?? iconToken.strokeWidth}
+        strokeWidth={strokeWidth ?? iconStyle.strokeWidth ?? iconToken.strokeWidth}
         color={resolvedColor}
       />
     </View>

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

@@ -23,9 +23,13 @@ export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTe
   ...props
 }, ref) {
   const { theme } = useTheme()
-  const { foregroundColor, textStyle } = useContentTheme()
+  const { foreground, textStyle } = useContentTheme()
+  // TODO use a hex color parser
+  const foregroundColor = (typeof textStyle.color === 'string'
+    ? textStyle.color
+    : foreground) as HexColorToken
   const color = appearance === 'description'
-    ? theme.semantics.asDescription({ color: foregroundColor as HexColorToken })
+    ? theme.semantics.asDescription({ color: foregroundColor })
     : foregroundColor
 
   return (

package/src/global-contexts/HightideProvider.tsx

@@ -8,10 +8,6 @@ import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
 import { ArrayUtil } from '@helpwave/hightide-utils/utils'
 
 import { HightideContext } from './HightideContext'
-import {
-  DebugProvider,
-  type DebugProviderProps
-} from './debug'
 import {
   LocalizationProvider,
   type LocalizationProviderProps
@@ -31,7 +27,6 @@ export type HightideProviderProps = PropsWithChildren & {
   theme?: Omit<ThemeProviderProps<HightideTheme>, 'children'>,
   locale?: Omit<LocalizationProviderProps, 'children'>,
   translation?: Omit<TranslationProviderProps, 'children' | 'locale'>,
-  debug?: Omit<DebugProviderProps, 'children'>,
 }
 
 const HightideContextBridge = ({ children }: PropsWithChildren) => {
@@ -55,7 +50,6 @@ export const HightideProvider = ({
   theme,
   locale,
   translation,
-  debug,
 }: HightideProviderProps) => {
   const resolvedTranslations = useMemo(() => [
     ...ArrayUtil.resolveSingleOrArray(translation?.translation ?? []),
@@ -63,16 +57,14 @@ export const HightideProvider = ({
   ], [translation?.translation])
 
   return (
-    <DebugProvider {...debug}>
-      <LocalizationProvider {...locale}>
-        <TranslationProvider {...translation} translation={resolvedTranslations}>
-          <ThemeProvider {...theme}>
-            <HightideContextBridge>
-              {children}
-            </HightideContextBridge>
-          </ThemeProvider>
-        </TranslationProvider>
-      </LocalizationProvider>
-    </DebugProvider>
+    <LocalizationProvider {...locale}>
+      <TranslationProvider {...translation} translation={resolvedTranslations}>
+        <ThemeProvider {...theme}>
+          <HightideContextBridge>
+            {children}
+          </HightideContextBridge>
+        </ThemeProvider>
+      </TranslationProvider>
+    </LocalizationProvider>
   )
 }

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

@@ -4,9 +4,12 @@ import {
 } from 'react'
 import type { ColorValue, TextStyle } from 'react-native'
 
+import type { IconStyle } from '../../icons'
+
 export type ContentThemeContextValue = {
-  foregroundColor: ColorValue,
+  foreground: ColorValue,
   textStyle: TextStyle,
+  iconStyle: IconStyle,
 }
 
 export const ContentThemeContext = createContext<ContentThemeContextValue | null>(null)
@@ -15,7 +18,7 @@ export const useContentTheme = (): ContentThemeContextValue => {
   const context = useContext(ContentThemeContext)
   if (!context) {
     throw new Error(
-      'useContentTheme must be used within ContentThemeProvider. Try adding a ContentThemeProvider around your app.'
+      'useContentTheme must be used within ContentThemeRootProvider. Try adding a ContentThemeRootProvider around your app.'
     )
   }
   return context

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

@@ -2,27 +2,81 @@ import {
   useMemo,
   type PropsWithChildren
 } from 'react'
-import type { TextStyle, ColorValue } from 'react-native'
+import type { ColorValue, TextStyle } from 'react-native'
 
+import type { IconStyle } from '../../icons'
 import {
   ContentThemeContext,
+  useContentTheme,
   type ContentThemeContextValue
 } from './ContentThemeContext'
 
-export type ContentThemeProviderProps = PropsWithChildren & {
-  foregroundColor: ColorValue,
-  textStyle: TextStyle,
-}
+export type ContentThemeRootProviderProps = PropsWithChildren & ContentThemeContextValue
 
-export const ContentThemeProvider = ({
+export const ContentThemeRootProvider = ({
   children,
-  foregroundColor,
+  foreground,
   textStyle,
-}: ContentThemeProviderProps) => {
+  iconStyle,
+}: ContentThemeRootProviderProps) => {
   const value = useMemo((): ContentThemeContextValue => ({
-    foregroundColor,
+    foreground,
     textStyle,
-  }), [foregroundColor, textStyle])
+    iconStyle,
+  }), [foreground, textStyle, iconStyle])
+
+  return (
+    <ContentThemeContext.Provider value={value}>
+      {children}
+    </ContentThemeContext.Provider>
+  )
+}
+
+type ForegroundOverride =
+  | ColorValue
+  | ((prev: ColorValue) => ColorValue)
+
+type TextStyleOverride =
+  | TextStyle
+  | ((prev: TextStyle, foreground: ColorValue) => TextStyle)
+
+type IconStyleOverride =
+  | IconStyle
+  | ((prev: IconStyle, foreground: ColorValue) => IconStyle)
+
+export type ContentThemeOverrideProviderProps = PropsWithChildren & {
+  foreground?: ForegroundOverride,
+  textStyle?: TextStyleOverride,
+  iconStyle?: IconStyleOverride,
+}
+
+export const ContentThemeOverrideProvider = ({
+  children,
+  foreground: foregroundOverride,
+  textStyle: textStyleOverride,
+  iconStyle: iconStyleOverride,
+}: ContentThemeOverrideProviderProps) => {
+  const parent = useContentTheme()
+
+  const value = useMemo((): ContentThemeContextValue => {
+    const foreground = typeof foregroundOverride === 'function'
+      ? foregroundOverride(parent.foreground)
+      : foregroundOverride ?? parent.foreground
+
+    const textStyle = typeof textStyleOverride === 'function'
+      ? textStyleOverride(parent.textStyle, foreground)
+      : textStyleOverride ?? parent.textStyle
+
+    const iconStyle = typeof iconStyleOverride === 'function'
+      ? iconStyleOverride(parent.iconStyle, foreground)
+      : iconStyleOverride ?? parent.iconStyle
+
+    return {
+      foreground,
+      textStyle,
+      iconStyle,
+    }
+  }, [parent, foregroundOverride, textStyleOverride, iconStyleOverride])
 
   return (
     <ContentThemeContext.Provider value={value}>

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

@@ -21,7 +21,7 @@ import {
 import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
 import type { ThemeMode } from '../../theme/themes/hightideThemes'
 import type { HightideTheme } from '../../theme/types/theme'
-import { ContentThemeProvider } from '../content-theme'
+import { ContentThemeRootProvider } from '../content-theme'
 
 export type ThemeProviderProps<T> = PropsWithChildren & {
   theme?: ThemeMode | null,
@@ -93,12 +93,17 @@ export const ThemeProvider = ({
 
   return (
     <ThemeContext.Provider value={contextValue}>
-      <ContentThemeProvider
-        foregroundColor={contextValue.theme.colors.surface.onColor}
+      <ContentThemeRootProvider
+        foreground={contextValue.theme.colors.surface.onColor}
         textStyle={contextValue.theme.typography.body.md}
+        iconStyle={{
+          size: contextValue.theme.icongraphy.sizes.md,
+          strokeWidth: contextValue.theme.icongraphy.strokeWidth,
+          color: contextValue.theme.colors.surface.onColor,
+        }}
       >
         {children}
-      </ContentThemeProvider>
+      </ContentThemeRootProvider>
     </ThemeContext.Provider>
   )
 }

package/src/theme/adapters/index.ts

@@ -1,4 +1 @@
-export * from './container-adapter'
-export * from './defined'
-export * from './icon-style-adapter'
-export * from './text-style-adapter'
+export * from './style-adapter-utils'