chore: add theming

Author: isekovanic

package/src/components/ChannelList/Skeleton.tsx

@@ -48,14 +48,8 @@ const SkeletonContent = () => {
 export const Skeleton = () => {
   const styles = useStyles();
 
-  const {
-    theme: {
-      channelListSkeleton: { container },
-    },
-  } = useTheme();
-
   return (
-    <View style={[styles.container, container]} testID='channel-preview-skeleton'>
+    <View style={styles.container} testID='channel-preview-skeleton'>
       <View style={styles.content}>
         <SkeletonAvatar />
         <SkeletonContent />
@@ -68,7 +62,7 @@ Skeleton.displayName = 'Skeleton{channelListSkeleton}';
 
 const useStyles = () => {
   const {
-    theme: { semantics },
+    theme: { channelListSkeleton, semantics },
   } = useTheme();
 
   return useMemo(() => {
@@ -78,48 +72,56 @@ const useStyles = () => {
         height: 48,
         overflow: 'hidden',
         width: 48,
+        ...channelListSkeleton.avatar,
       },
       badge: {
         borderRadius: primitives.radiusMax,
-        width: 48,
         height: 16,
         minWidth: 0,
         overflow: 'hidden',
+        width: 48,
+        ...channelListSkeleton.badge,
       },
       container: {
         borderBottomColor: semantics.borderCoreSubtle,
         borderBottomWidth: 1,
         flexDirection: 'row',
+        ...channelListSkeleton.container,
       },
       content: {
         alignItems: 'center',
         flexDirection: 'row',
         gap: primitives.spacingMd,
         padding: primitives.spacingMd,
         width: '100%',
+        ...channelListSkeleton.content,
       },
       headerRow: {
         alignItems: 'center',
         flexDirection: 'row',
         gap: primitives.spacingMd,
         width: '100%',
+        ...channelListSkeleton.headerRow,
       },
       subtitle: {
         borderRadius: primitives.radiusMax,
         height: primitives.spacingMd,
         overflow: 'hidden',
         width: '65%',
+        ...channelListSkeleton.subtitle,
       },
       textContainer: {
         flex: 1,
         gap: primitives.spacingXs,
+        ...channelListSkeleton.textContainer,
       },
       title: {
         borderRadius: primitives.radiusMax,
         flex: 1,
         height: 16,
         overflow: 'hidden',
+        ...channelListSkeleton.title,
       },
     });
-  }, [semantics.borderCoreSubtle]);
+  }, [channelListSkeleton, semantics.borderCoreSubtle]);
 };

package/src/components/ThreadList/ThreadListItemSkeleton.tsx

@@ -60,14 +60,8 @@ const SkeletonContent = () => {
 export const ThreadListItemSkeleton = () => {
   const styles = useStyles();
 
-  const {
-    theme: {
-      threadListSkeleton: { container },
-    },
-  } = useTheme();
-
   return (
-    <View style={[styles.container, container]} testID='channel-preview-skeleton'>
+    <View style={styles.container} testID='channel-preview-skeleton'>
       <View style={styles.content}>
         <SkeletonAvatar />
         <SkeletonContent />
@@ -81,7 +75,7 @@ ThreadListItemSkeleton.displayName = 'ThreadListItemSkeleton{threadListSkeleton}
 
 const useStyles = () => {
   const {
-    theme: { semantics },
+    theme: { semantics, threadListSkeleton },
   } = useTheme();
 
   return useMemo(() => {
@@ -91,61 +85,72 @@ const useStyles = () => {
         height: 48,
         overflow: 'hidden',
         width: 48,
+        ...threadListSkeleton.avatar,
       },
       body: {
         borderRadius: primitives.radiusMax,
         height: 20,
         overflow: 'hidden',
+        ...threadListSkeleton.body,
       },
       container: {
         borderBottomColor: semantics.borderCoreSubtle,
         borderBottomWidth: 1,
         flexDirection: 'row',
+        ...threadListSkeleton.container,
       },
       content: {
         alignItems: 'flex-start',
         flexDirection: 'row',
         gap: primitives.spacingSm,
         padding: primitives.spacingMd,
         width: '100%',
+        ...threadListSkeleton.content,
+      },
+      contentContainer: {
+        gap: primitives.spacingXs,
+        paddingVertical: primitives.spacingXxs,
+        ...threadListSkeleton.contentContainer,
       },
       footerIcon: {
         borderRadius: primitives.radiusMax,
         height: 24,
         overflow: 'hidden',
         width: 24,
+        ...threadListSkeleton.footerIcon,
       },
       footerPill: {
         borderRadius: primitives.radiusMax,
-        width: 64,
         height: 12,
         overflow: 'hidden',
+        width: 64,
+        ...threadListSkeleton.footerPill,
       },
       footerRow: {
         alignItems: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
+        ...threadListSkeleton.footerRow,
       },
       headerLabel: {
         borderRadius: primitives.radiusMax,
         height: 12,
         overflow: 'hidden',
         width: '40%',
+        ...threadListSkeleton.headerLabel,
       },
       textContainer: {
         flex: 1,
         gap: primitives.spacingXs,
-      },
-      contentContainer: {
-        paddingVertical: primitives.spacingXxs,
-        gap: primitives.spacingXs,
+        ...threadListSkeleton.textContainer,
       },
       timestamp: {
         borderRadius: primitives.radiusMax,
         height: 16,
         overflow: 'hidden',
         width: 48,
+        ...threadListSkeleton.timestamp,
       },
     });
-  }, [semantics.borderCoreSubtle]);
+  }, [semantics.borderCoreSubtle, threadListSkeleton]);
 };

package/src/contexts/themeContext/utils/theme.ts

@@ -183,11 +183,28 @@ export type Theme = {
   };
   channelListSkeleton: {
     animationTime: number;
+    avatar: ViewStyle;
+    badge: ViewStyle;
+    content: ViewStyle;
     container: ViewStyle;
+    headerRow: ViewStyle;
+    subtitle: ViewStyle;
+    textContainer: ViewStyle;
+    title: ViewStyle;
   };
   threadListSkeleton: {
     animationTime: number;
+    avatar: ViewStyle;
+    body: ViewStyle;
+    content: ViewStyle;
+    contentContainer: ViewStyle;
     container: ViewStyle;
+    footerIcon: ViewStyle;
+    footerPill: ViewStyle;
+    footerRow: ViewStyle;
+    headerLabel: ViewStyle;
+    textContainer: ViewStyle;
+    timestamp: ViewStyle;
   };
   colors: typeof Colors;
   channelPreview: {
@@ -1091,11 +1108,28 @@ export const defaultTheme: Theme = {
   },
   channelListSkeleton: {
     animationTime: 1500, // in milliseconds
+    avatar: {},
+    badge: {},
+    content: {},
     container: {},
+    headerRow: {},
+    subtitle: {},
+    textContainer: {},
+    title: {},
   },
   threadListSkeleton: {
     animationTime: 1500, // in milliseconds
+    avatar: {},
+    body: {},
+    content: {},
+    contentContainer: {},
     container: {},
+    footerIcon: {},
+    footerPill: {},
+    footerRow: {},
+    headerLabel: {},
+    textContainer: {},
+    timestamp: {},
   },
   channelPreview: {
     container: {},