@webority-technologies/mobile 0.0.6 → 0.0.8

package/lib/module/components/Dialog/Dialog.js

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Modal } from "../Modal/Modal.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,11 +17,17 @@ const Dialog = props => {
     actions,
     dismissOnAction = true,
     accessibilityLabel,
+    contentStyle,
+    containerStyle,
     testID
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const variantTint = useMemo(() => tintForVariant(theme, variant), [theme, variant]);
+  const dialogTokens = theme.components.dialog;
+  const iconWrapperSize = dialogTokens?.iconWrapperSize ?? 48;
+  const iconWrapperBorderRadius = dialogTokens?.iconWrapperBorderRadius ?? 24;
+  const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = useCallback(action => {
     if (action.loading) return;
     triggerHaptic('selection');
@@ -35,13 +41,17 @@ const Dialog = props => {
     onRequestClose: onClose,
     presentation: "centered",
     accessibilityLabel: accessibilityLabel ?? title,
+    contentStyle: contentStyle,
     testID: testID,
     children: /*#__PURE__*/_jsxs(View, {
       accessibilityRole: 'alertdialog',
       accessibilityLabel: accessibilityLabel ?? title,
-      style: styles.container,
+      style: [styles.container, containerStyle],
       children: [icon ? /*#__PURE__*/_jsx(View, {
         style: [styles.iconWrapper, {
+          width: iconWrapperSize,
+          height: iconWrapperSize,
+          borderRadius: iconWrapperBorderRadius,
           backgroundColor: variantTint.muted,
           marginBottom: theme.spacing.md
         }],
@@ -50,7 +60,7 @@ const Dialog = props => {
         style: [styles.title, {
           color: theme.colors.text.primary,
           fontSize: theme.typography.fontSize.xl,
-          fontWeight: theme.typography.fontWeight.semibold,
+          ...fontFor(theme, 'semibold'),
           marginBottom: message ? theme.spacing.sm : theme.spacing.md
         }],
         accessibilityRole: "header",
@@ -86,6 +96,7 @@ const Dialog = props => {
             style: ({
               pressed
             }) => [styles.actionButton, {
+              minHeight: actionButtonMinHeight,
               backgroundColor: buttonStyle.backgroundColor,
               borderColor: buttonStyle.borderColor,
               borderWidth: buttonStyle.borderWidth,
@@ -102,7 +113,7 @@ const Dialog = props => {
               style: {
                 color: buttonStyle.textColor,
                 fontSize: theme.typography.fontSize.base,
-                fontWeight: theme.typography.fontWeight.semibold,
+                ...fontFor(theme, 'semibold'),
                 textAlign: 'center'
               },
               numberOfLines: 1,
@@ -180,9 +191,6 @@ const buildStyles = _theme => StyleSheet.create({
     alignItems: 'stretch'
   },
   iconWrapper: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'center'
@@ -201,8 +209,7 @@ const buildStyles = _theme => StyleSheet.create({
   actionButton: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 44
+    justifyContent: 'center'
   }
 });
 export { Dialog };

package/lib/module/components/EmptyState/EmptyState.js

@@ -2,36 +2,42 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeFor = (theme, size) => {
-  switch (size) {
-    case 'sm':
-      return {
-        iconSize: 48,
-        titleSize: theme.typography.fontSize.lg,
-        descriptionSize: theme.typography.fontSize.sm,
-        paddingVertical: theme.spacing.lg
-      };
-    case 'lg':
-      return {
-        iconSize: 80,
-        titleSize: theme.typography.fontSize['2xl'],
-        descriptionSize: theme.typography.fontSize.base,
-        paddingVertical: theme.spacing['2xl']
-      };
-    case 'md':
-    default:
-      return {
-        iconSize: 64,
-        titleSize: theme.typography.fontSize.xl,
-        descriptionSize: theme.typography.fontSize.base,
-        paddingVertical: theme.spacing.xl
-      };
+const SIZE_FALLBACK = {
+  sm: {
+    iconSize: 48,
+    titleFontSize: 'lg',
+    descriptionFontSize: 'sm',
+    paddingVertical: 'lg'
+  },
+  md: {
+    iconSize: 64,
+    titleFontSize: 'xl',
+    descriptionFontSize: 'base',
+    paddingVertical: 'xl'
+  },
+  lg: {
+    iconSize: 80,
+    titleFontSize: '2xl',
+    descriptionFontSize: 'base',
+    paddingVertical: '2xl'
   }
 };
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.emptyState?.[size] ?? {})
+  };
+  return {
+    iconSize: tokens.iconSize,
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    descriptionSize: theme.typography.fontSize[tokens.descriptionFontSize],
+    paddingVertical: theme.spacing[tokens.paddingVertical]
+  };
+};
 const ActionButton = ({
   action,
   variant
@@ -110,7 +116,7 @@ const EmptyState = /*#__PURE__*/forwardRef((props, ref) => {
     }) : null, /*#__PURE__*/_jsx(Text, {
       style: [styles.title, {
         fontSize: sz.titleSize,
-        fontWeight: theme.typography.fontWeight.semibold
+        ...fontFor(theme, 'semibold')
       }],
       children: title
     }), description ? /*#__PURE__*/_jsx(Text, {
@@ -183,7 +189,7 @@ const buildActionStyles = theme => StyleSheet.create({
   },
   buttonText: {
     fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.semibold
+    ...fontFor(theme, 'semibold')
   },
   buttonTextPrimary: {
     color: theme.colors.text.inverse

package/lib/module/components/FormField/FormField.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -92,15 +92,15 @@ const buildStyles = theme => StyleSheet.create({
   },
   label: {
     fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.medium,
+    ...fontFor(theme, 'medium'),
     color: theme.colors.text.secondary
   },
   labelInline: {
-    width: '35%'
+    width: theme.components.formField?.inlineLabelWidth ?? '35%'
   },
   requiredMark: {
     color: theme.colors.error,
-    fontWeight: theme.typography.fontWeight.medium
+    ...fontFor(theme, 'medium')
   },
   inputStacked: {
     width: '100%'

package/lib/module/components/Input/Input.js

@@ -5,7 +5,7 @@ import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from '
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - react-native-vector-icons ships no bundled types in this version
 import Feather from 'react-native-vector-icons/Feather';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -55,6 +55,8 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     variant = 'outlined',
     required = false,
     maxLength,
+    format,
+    parse,
     style,
     inputStyle,
     labelStyle,
@@ -67,7 +69,10 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.input?.[size] ?? {})
+  };
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const hasValue = typeof value === 'string' && value.length > 0;
@@ -217,7 +222,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.staticLabel, {
         color: hasError ? theme.colors.error : isFocused ? theme.colors.border.focus : theme.colors.text.secondary,
         fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.medium,
+        ...fontFor(theme, 'medium'),
         marginBottom: theme.spacing.xxs
       }, labelStyle],
       children: [label, required ? /*#__PURE__*/_jsx(Text, {
@@ -251,7 +256,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
           left: leftPad,
           color: labelColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...fontFor(theme, 'medium'),
           backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
           paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
           transform: [{
@@ -277,8 +282,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
         }, inputStyle],
         placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
         placeholderTextColor: placeholderTextColor,
-        value: value,
-        onChangeText: onChangeText,
+        value: format && value != null ? format(value) : value,
+        onChangeText: text => {
+          if (!onChangeText) return;
+          onChangeText(parse ? parse(text) : text);
+        },
         onFocus: handleFocus,
         onBlur: handleBlur,
         editable: isEditable,

package/lib/module/components/ListItem/ListItem.js

@@ -2,38 +2,44 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Swipeable } from "../Swipeable/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeFor = (theme, size) => {
-  switch (size) {
-    case 'sm':
-      return {
-        paddingVertical: theme.spacing.sm,
-        titleSize: theme.typography.fontSize.sm,
-        subtitleSize: theme.typography.fontSize.xs,
-        minHeight: 44
-      };
-    case 'lg':
-      return {
-        paddingVertical: theme.spacing.lg,
-        titleSize: theme.typography.fontSize.lg,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 72
-      };
-    case 'md':
-    default:
-      return {
-        paddingVertical: theme.spacing.md,
-        titleSize: theme.typography.fontSize.base,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 56
-      };
+const SIZE_FALLBACK = {
+  sm: {
+    paddingVertical: 'sm',
+    titleFontSize: 'sm',
+    subtitleFontSize: 'xs',
+    minHeight: 44
+  },
+  md: {
+    paddingVertical: 'md',
+    titleFontSize: 'base',
+    subtitleFontSize: 'sm',
+    minHeight: 56
+  },
+  lg: {
+    paddingVertical: 'lg',
+    titleFontSize: 'lg',
+    subtitleFontSize: 'sm',
+    minHeight: 72
   }
 };
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.listItem?.[size] ?? {})
+  };
+  return {
+    paddingVertical: theme.spacing[tokens.paddingVertical],
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    subtitleSize: theme.typography.fontSize[tokens.subtitleFontSize],
+    minHeight: tokens.minHeight
+  };
+};
 const Chevron = ({
   color
 }) => /*#__PURE__*/_jsx(Text, {
@@ -101,7 +107,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
           fontSize: sz.titleSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...fontFor(theme, 'medium'),
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
@@ -232,11 +238,11 @@ const buildStyles = theme => StyleSheet.create({
   },
   subtitle: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   },
   description: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   }
 });
 export { ListItem };

package/lib/module/components/OTPInput/OTPInput.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -52,7 +52,10 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.otpInput?.[size] ?? {})
+  };
   const inputsRef = useRef([]);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const previousErrorRef = useRef(null);
@@ -297,7 +300,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                 style: [styles.input, {
                   fontSize: sizeStyles.fontSize,
                   color: theme.colors.text.primary,
-                  fontWeight: theme.typography.fontWeight.semibold
+                  ...fontFor(theme, 'semibold')
                 }, textStyle]
               }), secure && isFilled ? /*#__PURE__*/_jsx(View, {
                 pointerEvents: "none",
@@ -306,7 +309,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                   style: [{
                     fontSize: sizeStyles.fontSize,
                     color: theme.colors.text.primary,
-                    fontWeight: theme.typography.fontWeight.semibold
+                    ...fontFor(theme, 'semibold')
                   }, textStyle],
                   children: display
                 })

package/lib/module/components/Radio/Radio.js

@@ -56,10 +56,11 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
   const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
   const fillColor = toneColor(theme, tone);
-  const {
-    outer,
-    inner
-  } = sizeMap[size];
+  const sizeOverrides = theme.components.radio?.[size];
+  const outer = sizeOverrides?.outer ?? sizeMap[size].outer;
+  const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
+  const radioBorderWidth = theme.components.radio?.borderWidth ?? 1.5;
+  const radioLabelGap = theme.components.radio?.labelGap ?? 10;
   const progress = useRef(new Animated.Value(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
@@ -108,6 +109,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.outer, {
         width: outer,
         height: outer,
+        borderWidth: radioBorderWidth,
         borderRadius: outer / 2,
         borderColor
       }, circleStyle],
@@ -125,6 +127,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       })
     }), label ? /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
+        marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -140,13 +143,11 @@ const buildStyles = _theme => StyleSheet.create({
     alignItems: 'center'
   },
   outer: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
   inner: {},
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/module/components/SearchBar/SearchBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { AppIcon } from "../AppIcon/index.js";
@@ -53,7 +53,11 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const [isFocused, setIsFocused] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
@@ -122,7 +126,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   // Container shrinks left to make room for cancel button on right.
   const cancelTranslateX = cancelAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [CANCEL_WIDTH, 0]
+    outputRange: [cancelWidth, 0]
   });
   const cancelOpacity = cancelAnim;
   return /*#__PURE__*/_jsxs(View, {
@@ -139,7 +143,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
         opacity: disabled ? 0.55 : 1,
         marginRight: cancelAnim.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, CANCEL_WIDTH + theme.spacing.sm]
+          outputRange: [0, cancelWidth + theme.spacing.sm]
         })
       }],
       accessibilityRole: "search",
@@ -194,7 +198,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     }), showCancel ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
-        width: CANCEL_WIDTH,
+        width: cancelWidth,
         transform: [{
           translateX: cancelTranslateX
         }],
@@ -210,7 +214,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
           style: [styles.cancelText, {
             color: theme.colors.primary,
             fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.medium
+            ...fontFor(theme, 'medium')
           }],
           numberOfLines: 1,
           children: cancelLabel

package/lib/module/components/Skeleton/Skeleton.js

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { Responsive } from "../../utils/index.js";
+import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPEED_DURATION = {
   slow: 1800,
@@ -28,23 +29,30 @@ const resolveWidth = width => {
 const Skeleton = ({
   width = '100%',
   height = 16,
-  radius = 'sm',
-  variant = 'shimmer',
-  speed = 'normal',
+  radius,
+  variant,
+  speed,
+  colors,
   style,
   testID
 }) => {
   const theme = useTheme();
+  const defaults = useSkeletonDefaults();
+  const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
+  const resolvedSpeed = speed ?? defaults.speed ?? 'normal';
+  const resolvedRadiusToken = radius ?? defaults.radius ?? 'sm';
+  const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
+  const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const borderRadius = resolveRadius(theme, radius);
+  const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = Responsive.size(height);
   const progress = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   useEffect(() => {
     progress.setValue(0);
-    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
-    const animation = variant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
+    const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
+    const animation = resolvedVariant === 'pulse' ? Animated.loop(Animated.sequence([Animated.timing(progress, {
       toValue: 1,
       duration: duration / 2,
       easing: Easing.inOut(Easing.ease),
@@ -64,17 +72,17 @@ const Skeleton = ({
     return () => {
       animation.stop();
     };
-  }, [progress, speed, variant]);
+  }, [progress, resolvedSpeed, resolvedVariant]);
   const handleLayout = event => {
     const next = event.nativeEvent.layout.width;
     if (next !== containerWidth) setContainerWidth(next);
   };
   const overlay = useMemo(() => {
-    if (variant === 'pulse') {
+    if (resolvedVariant === 'pulse') {
       return /*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "none",
         style: [StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.skeleton.highlight,
+          backgroundColor: highlightColor,
           opacity: progress.interpolate({
             inputRange: [0, 1],
             outputRange: [0, 0.6]
@@ -92,13 +100,13 @@ const Skeleton = ({
       pointerEvents: "none",
       style: [styles.shimmer, {
         width: highlightWidth,
-        backgroundColor: theme.colors.skeleton.highlight,
+        backgroundColor: highlightColor,
         transform: [{
           translateX
         }]
       }]
     });
-  }, [containerWidth, progress, styles.shimmer, theme.colors.skeleton.highlight, variant]);
+  }, [containerWidth, progress, styles.shimmer, highlightColor, resolvedVariant]);
   return /*#__PURE__*/_jsx(View, {
     onLayout: handleLayout,
     accessible: true,
@@ -110,7 +118,7 @@ const Skeleton = ({
       width: resolvedWidth,
       height: resolvedHeight,
       borderRadius,
-      backgroundColor: theme.colors.skeleton.background
+      backgroundColor
     }, style],
     children: overlay
   });