fix: customizable css vars

Embrace the usage of css vars to customize skeleton styles.

Author: aboodz

src/Skeleton.tsx

@@ -21,11 +21,11 @@ function styleOptionsToCssProperties({
     duration,
     enableAnimation = true,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties {
-    const style: CSSProperties = {}
+    const style: CSSProperties & Record<`--${string}`, string> = {}
 
-    if (direction === 'rtl') style.animationDirection = 'reverse'
+    if (direction === 'rtl') style['--animation-direction'] = 'reverse'
 
-    if (typeof duration === 'number') style.animationDuration = `${duration}s`
+    if (typeof duration === 'number') style['--animation-duration'] = `${duration}s`
 
     if (typeof width === 'string' || typeof width === 'number') style.width = width
     if (typeof height === 'string' || typeof height === 'number') style.height = height
@@ -42,13 +42,8 @@ function styleOptionsToCssProperties({
     }
 
     if (typeof baseColor !== 'undefined' || typeof highlightColor !== 'undefined') {
-        style.backgroundColor = baseColor ?? defaultBaseColor
-        style.backgroundImage = `linear-gradient(
-            90deg,
-            ${baseColor ?? defaultBaseColor},
-            ${highlightColor ?? defaultHighlightColor},
-            ${baseColor ?? defaultBaseColor}
-        )`
+        style['--base-color'] = baseColor ?? defaultBaseColor;
+        style['--highlight-color'] = highlightColor ?? defaultHighlightColor;
     }
 
     if (!enableAnimation) style.backgroundImage = 'none'

src/skeleton.css

@@ -8,6 +8,8 @@
     /* If either color is changed, Skeleton.tsx must be updated as well */
     --base-color: #ebebeb;
     --highlight-color: #f5f5f5;
+    --animation-duration: 1.5s;
+    --animation-direction: normal;
 
     background-color: var(--base-color);
 
@@ -37,7 +39,8 @@
     transform: translateX(-100%);
 
     animation-name: react-loading-skeleton;
-    animation-duration: 1.5s;
+    animation-direction: var(--animation-direction);
+    animation-duration: var(--animation-duration);
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }