Fix Skeleton theme

Author: evgenoid

package-lock.json

@@ -1,9 +1,8 @@
-import { generateColor } from '@marko19907/string-to-color';
 import getInitials from 'name-initials';
 import type { FC, LegacyRef } from 'react';
 import React, { forwardRef, useMemo } from 'react';
 
-import { twMerge } from '@/utils';
+import { generateColor, twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
 import type { AvatarTheme } from './AvatarTheme';

src/elements/Avatar/Avatar.tsx

@@ -10,29 +10,14 @@ export interface SkeletonTheme {
   };
 }
 
-const baseTheme: SkeletonTheme = {
-  base: 'rounded-md',
-  animated: '',
+export const skeletonTheme: SkeletonTheme = {
+  base: 'rounded-md light:bg-gray-200 dark:bg-gray-700',
+  animated:
+    'animate-[pulse_1.5s_ease-in-out_infinite] light:bg-gradient-to-r light:from-gray-200 light:via-gray-300 light:to-gray-200 dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]',
   variants: {
     text: 'h-4 w-full',
     rounded: 'rounded-full w-10 h-10',
     rectangle: 'h-24 w-full',
     square: 'w-24 h-24'
   }
 };
-
-export const skeletonTheme: SkeletonTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'light:bg-gray-200 dark:bg-gray-700'].join(' '),
-  animated:
-    'animate-[pulse_1.5s_ease-in-out_infinite] light:bg-gradient-to-r light:from-gray-200 light:via-gray-300 light:to-gray-200 dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]',
-  variants: baseTheme.variants
-};
-
-export const legacySkeletonTheme: SkeletonTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-[var(--skeleton-background)]'].join(' '),
-  animated:
-    'animate-[pulse_1.5s_ease-in-out_infinite] bg-[var(--skeleton-gradient)] bg-[length:200%_100%]',
-  variants: baseTheme.variants
-};

src/elements/Skeleton/SkeletonTheme.ts

@@ -1439,6 +1439,17 @@ export const themeV9: ReablocksTheme = {
         xl: 'h-6',
         xxl: 'h-8'
       }
+    },
+    skeleton: {
+      base: 'rounded-md light:bg-gray-200 dark:bg-gray-700',
+      animated:
+        'animate-[pulse_1.5s_ease-in-out_infinite] light:bg-gradient-to-r light:from-gray-200 light:via-gray-300 light:to-gray-200 dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]',
+      variants: {
+        text: 'h-4 w-full',
+        rounded: 'rounded-full w-10 h-10',
+        rectangle: 'h-24 w-full',
+        square: 'w-24 h-24'
+      }
     }
   }
 };