@helpwave/hightide-native 0.2.0 → 0.3.1

package/src/theme/resolvers/themedPressable.ts

@@ -1,6 +1,3 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   ThemedPressableIconStyle,
   ThemedPressableState,
@@ -15,6 +12,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPressableThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -35,14 +34,14 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
 
   return {
     container: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => ({
-      ...toContainerStyle(resolve(state).container),
+      ...StyleAdapterUtils.container(resolve(state).container),
       alignSelf: 'flex-start',
     })),
     stateLayer: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => {
       const tokens = resolve(state)
 
       return {
-        ...toContainerStyle(tokens.stateLayer),
+        ...StyleAdapterUtils.container(tokens.stateLayer),
         position: 'absolute',
         top: 0,
         right: 0,
@@ -51,10 +50,10 @@ export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPress
       }
     }),
     icon: createValueResolver((state: ThemedPressableState): ThemedPressableIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ThemedPressableState): ThemedPressableTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.text(resolve(state).text)
     )),
   }
 }

package/src/theme/themes/createHightideTheme.ts

@@ -58,6 +58,7 @@ const resolveElementLayouts = (themeTokens: ThemeTokens): ElementLayoutTokens =>
 })
 
 const bindSemantics = (themeTokens: ThemeTokens): HightideThemeSemantics => ({
+  ...resolveElementLayouts(themeTokens),
   coloringColorVariant: (parameter) => hightideSemanticTokenResolvers.coloringColorVariant({
     themeTokens,
     ...parameter,
@@ -114,19 +115,27 @@ const bindSemantics = (themeTokens: ThemeTokens): HightideThemeSemantics => ({
 
 export const createHightideTheme = (themeTokens: ThemeTokens): HightideTheme => ({
   colors: themeTokens.color,
-  semantics: bindSemantics(themeTokens),
+  fontFamilies: themeTokens.fontFamilies,
+  fontWeights: themeTokens.fontWeights,
+  fontSizing: themeTokens.fontSizing,
   typography: themeTokens.typography,
   icongraphy: themeTokens.icongraphy,
+  size: themeTokens.size,
   spacing: themeTokens.spacing,
-  elements: resolveElementLayouts(themeTokens),
-  borderRadius: themeTokens.shape.borderRadius,
-  border: themeTokens.borderWidth,
+  padding: themeTokens.padding,
+  borderRadius: themeTokens.borderRadius,
+  borderWidth: themeTokens.borderWidth,
+  elevation: themeTokens.elevation,
   shadow: {
     raised: themeTokens.elevation.level1,
     container: themeTokens.elevation.level2,
     popover: themeTokens.elevation.level3,
     dialog: themeTokens.elevation.level4,
   },
+  motion: themeTokens.motion,
+  focusOutline: themeTokens.focusOutline,
+  config: themeTokens.config,
+  semantics: bindSemantics(themeTokens),
   components: {
     button: toButtonThemeResolvers({
       themeTokens,

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

@@ -24,12 +24,15 @@ export type ChatConversationRowState = InteractionState & {
   isSelected?: boolean,
 }
 
-export type ChatConversationRowStyle = ViewStyle
+export type ChatConversationRowContentContainerStyle = ViewStyle
+export type ChatConversationRowHeaderRowStyle = ViewStyle
+export type ChatConversationRowMessageRowStyle = ViewStyle
 export type ChatConversationRowTitleStyle = TextStyle
 export type ChatConversationRowTimestampStyle = TextStyle
 export type ChatConversationRowPreviewStyle = TextStyle
 export type ChatConversationRowUnreadBadgeStyle = ViewStyle
 export type ChatConversationRowUnreadBadgeTextStyle = TextStyle
+export type ChatConversationRowSentIndicatorStyle = IconStyle
 
 export type ChatConversationListStyle = ViewStyle
 export type ChatConversationListHeaderStyle = ViewStyle
@@ -92,13 +95,40 @@ export type ChatMessageComposerStyle = ViewStyle
 export type ChatMessageComposerInputStyle = ViewStyle & TextStyle
 
 export type ChatConversationRowThemeResolvers = {
-  container: StyleResolverFunction<ChatConversationRowState, ChatConversationRowStyle>,
+  pressable: StyleResolverFunction<
+    ChatConversationRowState,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
+    }
+  >,
+  contentContainer: StyleResolverFunction<ChatConversationRowState, ChatConversationRowContentContainerStyle>,
+  headerRow: StyleResolverFunction<ChatConversationRowState, ChatConversationRowHeaderRowStyle>,
+  messageRow: StyleResolverFunction<ChatConversationRowState, ChatConversationRowMessageRowStyle>,
   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>, ChatMessageBubbleMetaDataIconStyle>,
+  sentIndicator: StyleResolverFunction<Record<string, never>, ChatConversationRowSentIndicatorStyle>,
+  avatar: StyleResolverFunction<
+    AvatarState,
+    AvatarThemeResolvers
+  >,
 }
 
 export type ChatConversationListThemeResolvers = {
@@ -116,6 +146,27 @@ export type ChatThreadHeaderThemeResolvers = {
     AvatarState,
     AvatarThemeResolvers
   >,
+  pressable: StyleResolverFunction<
+    Record<string, never>,
+    {
+      container: StyleResolverFunction<
+        PressableState,
+        PressableContainerStyle
+      >,
+      stateLayer: StyleResolverFunction<
+        PressableState,
+        PressableStateLayerStyle
+      >,
+      text: StyleResolverFunction<
+        PressableState,
+        PressableTextStyle
+      >,
+      icon: StyleResolverFunction<
+        PressableState,
+        PressableIconStyle
+      >,
+    }
+  >,
 }
 
 export type ChatMessageListThemeResolvers = {

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

@@ -37,6 +37,7 @@ export type MultiSelectCheckboxIconStyle = IconStyle
 
 export type MultiSelectThemeResolvers = {
   trigger: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
+  stateLayer: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
   triggerText: StyleResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
   overlay: SimpleStyleResolver<SelectOverlayStyle>,
   menu: StyleResolverFunction<SelectMenuState, SelectMenuStyle>,

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

@@ -48,6 +48,7 @@ export type SelectEmptyTextStyle = TextStyle
 
 export type SelectThemeResolvers = {
   trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
+  stateLayer: StyleResolverFunction<SelectState, SelectTriggerStyle>,
   triggerText: StyleResolverFunction<SelectState, SelectTriggerTextStyle>,
   icon: StyleResolverFunction<SelectState, SelectIconStyle>,
   overlay: SimpleStyleResolver<SelectOverlayStyle>,

package/src/theme/types/layout.ts

@@ -1,20 +1,26 @@
 import type {
-  ElementLayoutTokens
-} from '@helpwave/hightide-design/semantic-token-resolvers'
-import type {
+  ThemeBorderRadiusTokens,
   ThemeBorderWidthTokens,
   ThemeElevationTokens,
-  ThemeShapeTokens,
+  ThemeMotionTokens,
+  ThemePaddingTokens,
+  ThemeSizeTokens,
   ThemeSpacingTokens
 } from '@helpwave/hightide-design/theme-tokens'
 
+export type HightideSize = ThemeSizeTokens
+
 export type HightideSpacing = ThemeSpacingTokens
 
-export type HightideElements = ElementLayoutTokens
+export type HightidePadding = ThemePaddingTokens
+
+export type HightideBorderRadius = ThemeBorderRadiusTokens
+
+export type HightideBorderWidth = ThemeBorderWidthTokens
 
-export type HightideBorderRadius = ThemeShapeTokens['borderRadius']
+export type HightideElevation = ThemeElevationTokens
 
-export type HightideBorder = ThemeBorderWidthTokens
+export type HightideMotion = ThemeMotionTokens
 
 export type HightideShadowToken = ThemeElevationTokens[keyof ThemeElevationTokens]
 

package/src/theme/types/semantics.ts

@@ -7,6 +7,7 @@ import type {
   ColoringToken,
   ContainerLayoutToken,
   ControlElementLayoutToken,
+  ElementLayoutTokens,
   InputColoringTokens,
   InsideControlElementLayoutToken,
   PressableColoringTokens,
@@ -69,4 +70,4 @@ export type HightideThemeSemantics = {
   asDescription: BoundSemanticResolver<{
     color: HexColorToken,
   }, HexColorToken>,
-}
+} & ElementLayoutTokens

package/src/theme/types/theme.ts

@@ -1,39 +1,67 @@
-import type { ThemeColorTokens } from '@helpwave/hightide-design/theme-tokens'
+import type {
+  OutlineToken,
+  ThemeColorTokens,
+  ThemeConfigTokens
+} from '@helpwave/hightide-design/theme-tokens'
 
 import type { HightideComponentThemes } from './components/hightide'
 import type { HightideIcongraphy } from './icongraphy'
 import type {
-  HightideBorder,
   HightideBorderRadius,
-  HightideElements,
+  HightideBorderWidth,
+  HightideElevation,
+  HightideMotion,
+  HightidePadding,
   HightideShadow,
+  HightideSize,
   HightideSpacing
 } from './layout'
 import type { HightideThemeSemantics } from './semantics'
-import type { HightideTypography } from './typography'
+import type {
+  HightideFontFamilies,
+  HightideFontSizing,
+  HightideFontWeights,
+  HightideTypography
+} from './typography'
 
 export type Theme = {
   colors: Record<string, unknown>,
-  semantics: Record<string, unknown>,
-  components: Record<string, unknown>,
+  fontFamilies: Record<string, unknown>,
+  fontWeights: Record<string, unknown>,
+  fontSizing: Record<string, unknown>,
   typography: Record<string, unknown>,
   icongraphy: Record<string, unknown>,
+  size: Record<string, unknown>,
   spacing: Record<string, unknown>,
-  elements: Record<string, unknown>,
+  padding: Record<string, unknown>,
   borderRadius: Record<string, unknown>,
-  border: Record<string, unknown>,
+  borderWidth: Record<string, unknown>,
+  elevation: Record<string, unknown>,
   shadow: Record<string, unknown>,
+  motion: Record<string, unknown>,
+  focusOutline: Record<string, unknown>,
+  config: Record<string, unknown>,
+  semantics: Record<string, unknown>,
+  components: Record<string, unknown>,
 }
 
 export type HightideTheme = Theme & {
   colors: ThemeColorTokens & Theme['colors'],
-  semantics: HightideThemeSemantics & Theme['semantics'],
-  components: HightideComponentThemes & Theme['components'],
+  fontFamilies: HightideFontFamilies & Theme['fontFamilies'],
+  fontWeights: HightideFontWeights & Theme['fontWeights'],
+  fontSizing: HightideFontSizing & Theme['fontSizing'],
   typography: HightideTypography & Theme['typography'],
   icongraphy: HightideIcongraphy & Theme['icongraphy'],
+  size: HightideSize & Theme['size'],
   spacing: HightideSpacing & Theme['spacing'],
-  elements: HightideElements & Theme['elements'],
+  padding: HightidePadding & Theme['padding'],
   borderRadius: HightideBorderRadius & Theme['borderRadius'],
-  border: HightideBorder & Theme['border'],
+  borderWidth: HightideBorderWidth & Theme['borderWidth'],
+  elevation: HightideElevation & Theme['elevation'],
   shadow: HightideShadow & Theme['shadow'],
+  motion: HightideMotion & Theme['motion'],
+  focusOutline: OutlineToken & Theme['focusOutline'],
+  config: ThemeConfigTokens & Theme['config'],
+  semantics: HightideThemeSemantics & Theme['semantics'],
+  components: HightideComponentThemes & Theme['components'],
 }

package/src/theme/types/typography.ts

@@ -1,16 +1,21 @@
 import type {
-  ThemeTypographyTokens,
+  ThemeFontFamilyTokens,
+  ThemeFontSizingTokens,
+  ThemeFontWeightTokens,
   ThemeTypographySize,
+  ThemeTypographyTokens,
   TypographyStyleToken
 } from '@helpwave/hightide-design/theme-tokens'
 
 export type TextStyle = TypographyStyleToken
 
-export type HightideTypography = ThemeTypographyTokens
+export type HightideFontFamilies = ThemeFontFamilyTokens
 
-export type HightideFontFamilies = ThemeTypographyTokens['fontFamilies']
+export type HightideFontWeights = ThemeFontWeightTokens
 
-export type HightideFontWeights = ThemeTypographyTokens['fontWeights']
+export type HightideFontSizing = ThemeFontSizingTokens
+
+export type HightideTypography = ThemeTypographyTokens
 
 export type TypographySizes = ThemeTypographySize
 

package/src/theme/adapters/container-adapter.ts

@@ -1,323 +0,0 @@
-import type { ViewStyle } from 'react-native'
-
-import type {
-  AlignSelfToken,
-  AxisAligmentToken,
-  BorderRadiusToken,
-  BorderToken,
-  ContainerTokens,
-  DirectionalToken,
-  LayoutDirectionToken,
-  MarginToken,
-  PaddingToken
-} from '@helpwave/hightide-design/component-token-resolvers'
-import {
-  defaultWritingMode,
-  resolveDirectionalTokens
-} from '@helpwave/hightide-design/component-token-resolvers'
-import type { ColorToken, HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
-import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
-import { HexColorUtils } from '@helpwave/hightide-design/utils'
-
-import { defined } from './defined'
-
-export const toShadowStyle = (shadow: ShadowToken): ViewStyle => defined({
-  boxShadow: [{
-    color: shadow.color,
-    offsetX: shadow.x,
-    offsetY: shadow.y,
-    blurRadius: shadow.blur,
-    spreadDistance: shadow.spread,
-  }],
-})
-
-const toFlexDirection = (
-  direction?: LayoutDirectionToken
-): ViewStyle['flexDirection'] => {
-  if (direction === undefined) {
-    return undefined
-  }
-
-  return direction === 'horizontal' ? 'row' : 'column'
-}
-
-const toJustifyContent = (
-  alignment?: AxisAligmentToken
-): ViewStyle['justifyContent'] => {
-  if (alignment === undefined) {
-    return undefined
-  }
-
-  if (alignment === 'start') {
-    return 'flex-start'
-  }
-
-  if (alignment === 'end') {
-    return 'flex-end'
-  }
-
-  return 'center'
-}
-
-const toAlignItems = (
-  alignment?: AxisAligmentToken
-): ViewStyle['alignItems'] => {
-  if (alignment === undefined) {
-    return undefined
-  }
-
-  if (alignment === 'start') {
-    return 'flex-start'
-  }
-
-  if (alignment === 'end') {
-    return 'flex-end'
-  }
-
-  return 'center'
-}
-
-const toAlignSelf = (
-  alignment?: AlignSelfToken
-): ViewStyle['alignSelf'] => {
-  if (alignment === undefined) {
-    return undefined
-  }
-
-  if (alignment === 'start') {
-    return 'flex-start'
-  }
-
-  if (alignment === 'end') {
-    return 'flex-end'
-  }
-
-  return alignment
-}
-
-const toAlignContent = (
-  alignment?: AlignSelfToken
-): ViewStyle['alignContent'] => {
-  if (alignment === undefined) {
-    return undefined
-  }
-
-  if (alignment === 'start') {
-    return 'flex-start'
-  }
-
-  if (alignment === 'end') {
-    return 'flex-end'
-  }
-
-  return alignment
-}
-
-const toBorderRadiusStyle = (
-  borderRadius?: BorderRadiusToken
-): ViewStyle => {
-  if (borderRadius === undefined) {
-    return {}
-  }
-
-  if (borderRadius.type === 'all') {
-    return defined({ borderRadius: borderRadius.value })
-  }
-
-  return defined({
-    borderTopLeftRadius: borderRadius.topLeft,
-    borderTopRightRadius: borderRadius.topRight,
-    borderBottomLeftRadius: borderRadius.bottomLeft,
-    borderBottomRightRadius: borderRadius.bottomRight,
-  })
-}
-
-const toDirectionalBorderWidths = (
-  width?: DirectionalToken<number>
-): ViewStyle => {
-  if (width === undefined) {
-    return {}
-  }
-
-  switch (width.type) {
-  case 'all':
-    return defined({
-      borderWidth: width.value,
-    })
-  case 'physicalAxis':
-    return defined({
-      borderTopWidth: width.vertical,
-      borderBottomWidth: width.vertical,
-      borderLeftWidth: width.horizontal,
-      borderRightWidth: width.horizontal,
-    })
-  case 'physicalSide':
-    return defined({
-      borderTopWidth: width.top,
-      borderRightWidth: width.right,
-      borderBottomWidth: width.bottom,
-      borderLeftWidth: width.left,
-    })
-  case 'logicalAxis':
-    return defined({
-      borderTopWidth: width.block,
-      borderBottomWidth: width.block,
-      borderStartWidth: width.inline,
-      borderEndWidth: width.inline,
-    })
-  case 'logicalSide':
-    return defined({
-      borderStartWidth: width.inlineStart,
-      borderEndWidth: width.inlineEnd,
-      borderTopWidth: width.blockStart,
-      borderBottomWidth: width.blockEnd,
-    })
-  }
-}
-
-const toDirectionalBorderColors = (
-  color?: NonNullable<BorderToken['color']>
-): ViewStyle => {
-  if (color === undefined) {
-    return {}
-  }
-
-  switch (color.type) {
-  case 'all':
-    return defined({
-      borderColor: color.value,
-    })
-  case 'physicalAxis':
-    return defined({
-      borderTopColor: color.vertical,
-      borderBottomColor: color.vertical,
-      borderLeftColor: color.horizontal,
-      borderRightColor: color.horizontal,
-    })
-  case 'physicalSide':
-    return defined({
-      borderTopColor: color.top,
-      borderRightColor: color.right,
-      borderBottomColor: color.bottom,
-      borderLeftColor: color.left,
-    })
-  case 'logicalAxis':
-    return defined({
-      borderTopColor: color.block,
-      borderBottomColor: color.block,
-      borderStartColor: color.inline,
-      borderEndColor: color.inline,
-    })
-  case 'logicalSide':
-    return defined({
-      borderStartColor: color.inlineStart,
-      borderEndColor: color.inlineEnd,
-      borderTopColor: color.blockStart,
-      borderBottomColor: color.blockEnd,
-    })
-  }
-}
-
-const toBorderStyle = (border?: BorderToken): ViewStyle => {
-  if (border === undefined) {
-    return {}
-  }
-
-  return defined({
-    ...toDirectionalBorderWidths(border.width),
-    ...toDirectionalBorderColors(border.color),
-    borderStyle: border.style,
-  })
-}
-
-const toPaddingStyle = (padding?: PaddingToken): ViewStyle => {
-  if (padding === undefined) {
-    return {}
-  }
-
-  const sides = resolveDirectionalTokens([padding], defaultWritingMode)
-
-  return defined({
-    paddingTop: sides.top,
-    paddingRight: sides.right,
-    paddingBottom: sides.bottom,
-    paddingLeft: sides.left,
-  })
-}
-
-const toMarginStyle = (margin?: MarginToken): ViewStyle => {
-  if (margin === undefined) {
-    return {}
-  }
-
-  const sides = resolveDirectionalTokens([margin], defaultWritingMode)
-
-  return defined({
-    marginTop: sides.top,
-    marginRight: sides.right,
-    marginBottom: sides.bottom,
-    marginLeft: sides.left,
-  })
-}
-
-export const toContainerStyle = (tokens: ContainerTokens): ViewStyle => defined({
-  display: 'flex',
-  overflow: tokens.overflow,
-  flexWrap: tokens.layout?.flexWrap,
-  flexDirection: toFlexDirection(tokens.layout?.direction),
-  justifyContent: toJustifyContent(tokens.layout?.mainAxisAlignment),
-  alignItems: toAlignItems(tokens.layout?.crossAxisAligment),
-  alignContent: toAlignContent(tokens.layout?.alignContent),
-  alignSelf: toAlignSelf(tokens.layout?.alignSelf),
-  backgroundColor: tokens.backgroundColor,
-  opacity: tokens.opacity,
-  ...toBorderStyle(tokens.border),
-  height: tokens.size?.height,
-  width: tokens.size?.width,
-  minHeight: tokens.size?.minHeight,
-  minWidth: tokens.size?.minWidth,
-  maxHeight: tokens.size?.maxHeight,
-  maxWidth: tokens.size?.maxWidth,
-  ...toBorderRadiusStyle(tokens.shape?.borderRadius),
-  ...toPaddingStyle(tokens.padding),
-  ...toMarginStyle(tokens.margin),
-  gap: tokens.layout?.gap,
-  outlineColor: tokens.outline?.color,
-  outlineOffset: tokens.outline?.offset,
-  outlineWidth: tokens.outline?.width,
-  outlineStyle: tokens.outline?.style,
-  ...(tokens.decoration?.shadow ? toShadowStyle(tokens.decoration.shadow) : {}),
-})
-
-const blendWithStateLayer = (
-  base: ColorToken | undefined,
-  tint: ColorToken
-): ColorToken | undefined => {
-  if (base === undefined || tint === 'transparent' || base === 'transparent') {
-    return base
-  }
-
-  return HexColorUtils.blend(base as HexColorToken, tint as HexColorToken)
-}
-
-export const toContainerStyleWithStateLayer = (
-  container: ContainerTokens,
-  stateLayer?: ContainerTokens
-): ViewStyle => {
-  const tint = stateLayer?.backgroundColor ?? 'transparent'
-  const borderColor = container.border?.color
-
-  return toContainerStyle({
-    ...container,
-    backgroundColor: blendWithStateLayer(container.backgroundColor, tint),
-    border: container.border === undefined ? undefined : {
-      ...container.border,
-      color: borderColor?.type === 'all'
-        ? {
-          type: 'all',
-          value: blendWithStateLayer(borderColor.value, tint) ?? borderColor.value,
-        }
-        : borderColor,
-    },
-  })
-}

package/src/theme/adapters/defined.ts

@@ -1,11 +0,0 @@
-export const defined = <T extends object>(style: T): T => {
-  const result = {} as T
-
-  for (const key of Object.keys(style) as (keyof T)[]) {
-    if (style[key] !== undefined) {
-      result[key] = style[key]
-    }
-  }
-
-  return result
-}

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

@@ -1,10 +0,0 @@
-import type { IconTokens } from '@helpwave/hightide-design/component-token-resolvers'
-
-import type { IconStyle } from '../../icons'
-import { defined } from './defined'
-
-export const toIconStyle = (tokens: IconTokens): IconStyle => defined({
-  color: tokens.color,
-  size: tokens.size,
-  strokeWidth: tokens.strokeWidth,
-})