feat(skeleton): add fluent styles

Signed-off-by: Dimitar Kalaydzhiev <dkalaydz@progress.com>

packages/fluent/scss/index.scss

@@ -33,7 +33,7 @@
 @use "color-preview";
 // @use "loader";
 // @use "loading";
-// @use "skeleton";
+@use "skeleton";
 @use "tooltip";
 
 
@@ -195,7 +195,7 @@
     @include color-preview.styles();
     // @include loader.styles();
     // @include loading.styles();
-    // @include skeleton.styles();
+    @include skeleton.styles();
     @include tooltip.styles();
 
 

packages/fluent/scss/skeleton/_layout.scss

@@ -0,0 +1,76 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-skeleton--layout() {
+
+    .k-skeleton {
+        display: block;
+    }
+
+    // Text
+    .k-skeleton-text {
+        border-radius: var( --kendo-skeleton-text-border-radius, #{$kendo-skeleton-text-border-radius} );
+        transform: var( --kendo-skeleton-text-transform, #{$kendo-skeleton-text-transform} );
+
+        &:empty::before {
+            content: "\200b";
+        }
+    }
+
+    // Shapes
+    .k-skeleton-rect {
+        border-radius: var( --kendo-skeleton-rect-border-radius, #{$kendo-skeleton-rect-border-radius} );
+    }
+
+    .k-skeleton-circle {
+        border-radius: var( --kendo-skeleton-circle-border-radius, #{$kendo-skeleton-circle-border-radius} );
+    }
+
+    // Wave animation
+    @keyframes k-skeleton-wave {
+        0% {
+            transform: translateX(-100%);
+        }
+        60% {
+            transform: translateX(100%);
+        }
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    .k-skeleton-wave .k-skeleton,
+    .k-skeleton-wave .k-skeleton {
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateX(-100%);
+            animation: k-skeleton-wave 1.6s linear .5s infinite;
+        }
+    }
+
+    // Pulse
+    @keyframes k-skeleton-pulse {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: .4;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .k-skeleton-pulse  .k-skeleton,
+    .k-skeleton-pulse .k-skeleton {
+        animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
+    }
+
+}

packages/fluent/scss/skeleton/_theme.scss

@@ -0,0 +1,22 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-skeleton--theme() {
+
+    .k-skeleton {
+        @include fill(
+            $bg: var( --kendo-skeleton-item-bg, #{$kendo-skeleton-item-bg} )
+        );
+    }
+
+    // Wave animation
+    .k-skeleton-wave  .k-skeleton::after,
+    .k-skeleton-wave .k-skeleton::after {
+        background-image: linear-gradient(
+            to right,
+            transparent,
+            var( --kendo-skeleton-wave-bg, #{$kendo-skeleton-wave-bg} ),
+            transparent
+        );
+    }
+}

packages/fluent/scss/skeleton/_variables.scss

@@ -0,0 +1,22 @@
+@use "../core/color-system" as *;
+
+/// Text transform scale of the skeleton.
+/// @group skeleton
+$kendo-skeleton-text-transform: scale( 1, .6 ) !default;
+/// Border radius of the skeleton text.
+/// @group skeleton
+$kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Border radius of the rectangle skeleton.
+/// @group skeleton
+$kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Border radius of the circle skeleton.
+/// @group skeleton
+$kendo-skeleton-circle-border-radius: 9999px !default;
+
+/// Background color of the skeleton item.
+/// @group skeleton
+$kendo-skeleton-item-bg: get-theme-color-var( neutral-50 ) !default;
+/// Background color of the skeleton wave animation.
+/// @group skeleton
+$kendo-skeleton-wave-bg: get-theme-color-var( neutral-20 ) !default;

packages/fluent/scss/skeleton/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "skeleton",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "skeleton" ) {
+        @include kendo-skeleton--layout();
+        @include kendo-skeleton--theme();
+    }
+}