skeleton shimmer mixin file, doc ex cleanup

playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,57 +1,23 @@
-// animation
-@keyframes wave {
-    0% {
-      background-position: -468px 0;
-    }
-    100% {
-      background-position: 468px 0;
-    }
-}
+@import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
+    display: "flex";
+    flex-direction: "column";
+    height: 100%;
     .color_default {
         background-color: $silver;
         // background-color: $green;
-        background-image: linear-gradient(
-            to left,
-            $silver 0%,
-            lighten($silver, 1%) 50%,
-            lighten($silver, 1%) 60%,
-            $silver 80%,
-            $silver 100%
-          );
-          background-size: 800px 104px;
-          background-repeat: no-repeat;
-          animation: wave 1.5s linear infinite;
+        @include skeleton-shimmer($silver)
     }
     .color_light {
         background-color: $white;
         // background-color: $orange;
-        background-image: linear-gradient(
-            to left,
-            $white 0%,
-            lighten($white, 1%) 50%,
-            lighten($white, 1%) 60%,
-            $white 80%,
-            $white 100%
-          );
-          background-size: 800px 104px;
-          background-repeat: no-repeat;
-          animation: wave 1.5s linear infinite;
+        @include skeleton-shimmer($white)
+
     }
     .dark {
         background-color: $border_dark;
-        background-image: linear-gradient(
-            to left,
-            $border_dark 0%,
-            lighten($border_dark, 10%) 50%,
-            lighten($border_dark, 10%) 60%,
-            $border_dark 80%,
-            $border_dark 100%
-          );
-          background-size: 800px 104px;
-          background-repeat: no-repeat;
-          animation: wave 1.5s linear infinite;
+        @include skeleton-shimmer($border_dark)
     }
     .gap_xxs {
         margin-top: 4px;

playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx

@@ -51,12 +51,11 @@ const SkeletonLoading = (props: SkeletonLoadingProps): React.ReactElement => {
         {...dataProps}
         className={skeletonContainerCss}
         id={id}
-        style={{ display: "flex", flexDirection: "column", height: "100%" }}
     >
       {className}
       {Array.from({ length: Number(stack) }).map((_, index) => (
         <div
-            className={classnames(innerSkeletonCss, index > 0 && gapClass)}
+            className={classnames(buildCss('pb_skeleton_loading'), innerSkeletonCss, index > 0 && gapClass)}
             key={index}
             style={innerSizeStyle}
         />

playbook/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss

@@ -0,0 +1,25 @@
+// Animation
+@keyframes wave {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+}
+
+// Shimmer animation and gradient mixin based on color
+@mixin skeleton-shimmer($color) {
+    background-color: $color;
+    background-image: linear-gradient(
+      to left,
+      $color 0%,
+      lighten($color, 10%) 50%,
+      lighten($color, 10%) 60%,
+      $color 80%,
+      $color 100%
+    );
+    // background-size: 800px 104px;
+    background-repeat: no-repeat;
+    animation: wave 1.5s linear infinite;
+}

playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -37,7 +37,7 @@ const SkeletonLoadingHeightWidth = (props) => (
           borderRadius="md"
           gap="xl"
           height="30%"
-          stack="3"
+          stack="2"
           width="70%"
           {...props}
       />

playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_square.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
+import { Caption, Card, SkeletonLoading } from "playbook-ui"
 
 
 const SkeletonLoadingSquare = (props) => (
   <div>
+    <Caption text="square from square prop" />
     <SkeletonLoading 
         square="150px" 
         {...props}
@@ -25,6 +26,12 @@ const SkeletonLoadingSquare = (props) => (
           {...props}
       />
     </Card>
+    <Caption text="square from height = width" />
+    <SkeletonLoading 
+        height="150px"
+        width="150px"
+        {...props}
+    />
   </div>
 )