feat(skeleton-loader): new module

dist/legacy-tokens/ds4-light.css

@@ -134,4 +134,39 @@
         var(--color-ai-solid-green-subtle) 0%,
         var(--color-ai-solid-blue-subtle) 154.5%
     );
+    --color-loading-fill: #f2f2f2;
+    --color-loading-shimmer: linear-gradient(
+        270deg,
+        var(--color-loading-fill) 0%,
+        var(--color-loading-fill) 34%,
+        #f8f8f8 50%,
+        var(--color-loading-fill) 66%,
+        var(--color-loading-fill) 100%
+    );
+    --color-loading-fill-elevated: var(--color-loading-fill);
+    --color-loading-shimmer-elevated: var(--color-loading-shimmer);
+    --color-loading-ai-gradient-purple-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-red-subtle) 0%,
+        var(--color-ai-solid-red-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-red-subtle) 66%,
+        var(--color-ai-solid-red-subtle) 100%
+    );
+    --color-loading-ai-gradient-blue-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-blue-subtle) 0%,
+        var(--color-ai-solid-blue-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-blue-subtle) 66%,
+        var(--color-ai-solid-blue-subtle) 100%
+    );
+    --color-loading-ai-gradient-green-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-green-subtle) 0%,
+        var(--color-ai-solid-green-subtle) 34%,
+        var(--color-ai-solid-blue-subtle) 50%,
+        var(--color-ai-solid-green-subtle) 66%,
+        var(--color-ai-solid-green-subtle) 100%
+    );
 }

dist/mixins/skeleton-mixins.less

@@ -0,0 +1,15 @@
+:root {
+    --skeleton-border-radius: 0;
+    --skeleton-height: 48px;
+    --skeleton-width: 100%;
+    --skeleton-background: var(--color-loading-fill);
+}
+
+.skeleton-base(@border-radius: var(--skeleton-border-radius), @height: var(--skeleton-height), @width: var(--skeleton-width) ) {
+    background: var(--skeleton-background);
+    border-radius: @border-radius;
+    cursor: progress;
+    height: @height;
+    min-height: 12px;
+    width: @width;
+}

dist/skeleton/skeleton.css

@@ -0,0 +1,196 @@
+:root {
+  --skeleton-border-radius: 0;
+  --skeleton-height: 48px;
+  --skeleton-width: 100%;
+  --skeleton-background: var(--color-loading-fill);
+}
+.skeleton {
+  container-name: skeleton-container;
+  container-type: inline-size;
+}
+.skeleton__avatar {
+  background: var(--skeleton-background);
+  border-radius: 50%;
+  cursor: progress;
+  height: var(--skeleton-height);
+  min-height: 12px;
+  width: var(--skeleton-height);
+}
+.skeleton__button {
+  background: var(--skeleton-background);
+  border-radius: 20px;
+  cursor: progress;
+  height: 40px;
+  min-height: 12px;
+  width: var(--skeleton-width);
+}
+.skeleton__button--small {
+  background: var(--skeleton-background);
+  border-radius: 16px;
+  cursor: progress;
+  height: 32px;
+  min-height: 12px;
+  width: var(--skeleton-width);
+}
+.skeleton__button--large {
+  background: var(--skeleton-background);
+  border-radius: 24px;
+  cursor: progress;
+  height: 48px;
+  min-height: 12px;
+  width: var(--skeleton-width);
+}
+.skeleton__text {
+  background: var(--skeleton-background);
+  border-radius: 3px;
+  cursor: progress;
+  height: 16px;
+  min-height: 12px;
+  width: calc(100% - var(--spacing-300));
+}
+.skeleton__text::after {
+  height: 16px;
+  margin-top: calc(16px + var(--spacing-100));
+}
+.skeleton__text--large {
+  background: var(--skeleton-background);
+  border-radius: 3px;
+  cursor: progress;
+  height: 24px;
+  min-height: 12px;
+  width: calc(100% - var(--spacing-300));
+}
+.skeleton__text--large::after {
+  height: 24px;
+  margin-top: calc(24px + var(--spacing-100));
+}
+.skeleton__text--multiline {
+  margin-bottom: var(--spacing-300);
+  position: relative;
+  width: calc(100% - var(--spacing-300));
+}
+.skeleton__text--multiline::after {
+  background: inherit;
+  content: "";
+  position: absolute;
+  width: calc(100% - var(--spacing-700));
+}
+.skeleton__text--large.skeleton__text--multiline {
+  margin-bottom: var(--spacing-400);
+}
+.skeleton__textbox {
+  background: var(--skeleton-background);
+  border-radius: 8px;
+  cursor: progress;
+  height: 48px;
+  min-height: 12px;
+  width: var(--skeleton-width);
+}
+.skeleton__image {
+  background: var(--skeleton-background);
+  border-radius: 8px;
+  cursor: progress;
+  height: 100%;
+  min-height: 12px;
+  width: var(--skeleton-width);
+  max-width: initial;
+}
+.skeleton__image::after {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+span.skeleton__avatar,
+span.skeleton__button,
+span.skeleton__text,
+span.skeleton__image,
+span.skeleton__textbox {
+  display: inline-block;
+}
+span.skeleton__avatar + span,
+span.skeleton__button + span,
+span.skeleton__text + span,
+span.skeleton__image + span,
+span.skeleton__textbox + span {
+  -webkit-margin-start: var(--spacing-100);
+          margin-inline-start: var(--spacing-100);
+}
+div.skeleton__avatar,
+div.skeleton__button,
+div.skeleton__text,
+div.skeleton__image,
+div.skeleton__textbox {
+  -webkit-margin-before: var(--spacing-150);
+          margin-block-start: var(--spacing-150);
+}
+.skeleton--elevated {
+  --skeleton-background: var(--color-loading-fill-elevated);
+}
+@media screen and (max-width: 512px) {
+  .skeleton {
+    --skeleton-background: var(--color-loading-shimmer);
+  }
+  .skeleton--elevated {
+    --skeleton-background: var(--color-loading-shimmer-elevated);
+  }
+}
+.skeleton--purple {
+  --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
+}
+.skeleton--green {
+  --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
+}
+.skeleton--blue {
+  --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes loading-frames {
+    0% {
+      background-position: 0% 0%;
+    }
+    50% {
+      background-position: 45% 0%;
+    }
+    100% {
+      background-position: 90% 0%;
+    }
+  }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .skeleton__avatar,
+  .skeleton__button,
+  .skeleton__text,
+  .skeleton__image,
+  .skeleton__textbox {
+    /*  setting animation-iteration-count to 6 (5000/833ms)    */
+    /*  so it does not exceed 5s per WCAG 2.2.2    */
+    animation: fade-in 500ms forwards, loading-frames 833ms 667ms linear 6;
+    animation-fill-mode: both;
+    background-size: 200%;
+  }
+}
+@container skeleton-container (width > 79px) {
+  .skeleton__image {
+    border-radius: 16px;
+  }
+}
+[dir="rtl"] .skeleton__avatar,
+[dir="rtl"] .skeleton__button,
+[dir="rtl"] .skeleton__text,
+[dir="rtl"] .skeleton__image,
+[dir="rtl"] .skeleton__textbox {
+  animation-direction: normal, reverse;
+}
+[dir="rtl"] .skeleton__text--multiline::after {
+  left: var(--spacing-700);
+}

dist/tokens/evo-core.css

@@ -121,5 +121,6 @@
     --spacing-400: 32px;
     --spacing-450: 36px;
     --spacing-600: 48px;
+    --spacing-700: 56px;
     --spacing-800: 64px;
 }

dist/tokens/evo-dark.css

@@ -136,5 +136,47 @@
             var(--color-ai-solid-green-subtle) 0%,
             var(--color-ai-solid-blue-subtle) 154.5%
         );
+        --color-loading-fill: #1b1b1b;
+        --color-loading-shimmer: linear-gradient(
+            270deg,
+            var(--color-loading-fill) 0%,
+            var(--color-loading-fill) 34%,
+            #0e0e0e 50%,
+            var(--color-loading-fill) 66%,
+            var(--color-loading-fill) 100%
+        );
+        --color-loading-fill-elevated: #222;
+        --color-loading-shimmer-elevated: linear-gradient(
+            270deg,
+            var(--color-loading-fill-elevated) 0%,
+            var(--color-loading-fill-elevated) 34%,
+            #1c1c1c 50%,
+            var(--color-loading-fill-elevated) 66%,
+            var(--color-loading-fill-elevated) 100%
+        );
+        --color-loading-ai-gradient-purple-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-red-subtle-dark) 0%,
+            var(--color-ai-solid-red-subtle-dark) 34%,
+            var(--color-ai-solid-purple-subtle-dark) 50%,
+            var(--color-ai-solid-red-subtle-dark) 66%,
+            var(--color-ai-solid-red-subtle-dark) 100%
+        );
+        --color-loading-ai-gradient-blue-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-blue-subtle-dark) 0%,
+            var(--color-ai-solid-blue-subtle-dark) 34%,
+            var(--color-ai-solid-purple-subtle-dark) 50%,
+            var(--color-ai-solid-blue-subtle-dark) 66%,
+            var(--color-ai-solid-blue-subtle-dark) 100%
+        );
+        --color-loading-ai-gradient-green-subtle: linear-gradient(
+            270deg,
+            var(--color-ai-solid-green-subtle-dark) 0%,
+            var(--color-ai-solid-green-subtle-dark) 34%,
+            var(--color-ai-solid-blue-subtle-dark) 50%,
+            var(--color-ai-solid-green-subtle-dark) 66%,
+            var(--color-ai-solid-green-subtle-dark) 100%
+        );
     }
 }

dist/tokens/evo-light.css

@@ -134,4 +134,39 @@
         var(--color-ai-solid-green-subtle) 0%,
         var(--color-ai-solid-blue-subtle) 154.5%
     );
+    --color-loading-fill: #f2f2f2;
+    --color-loading-shimmer: linear-gradient(
+        270deg,
+        var(--color-loading-fill) 0%,
+        var(--color-loading-fill) 34%,
+        #f8f8f8 50%,
+        var(--color-loading-fill) 66%,
+        var(--color-loading-fill) 100%
+    );
+    --color-loading-fill-elevated: var(--color-loading-fill);
+    --color-loading-shimmer-elevated: var(--color-loading-shimmer);
+    --color-loading-ai-gradient-purple-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-red-subtle) 0%,
+        var(--color-ai-solid-red-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-red-subtle) 66%,
+        var(--color-ai-solid-red-subtle) 100%
+    );
+    --color-loading-ai-gradient-blue-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-blue-subtle) 0%,
+        var(--color-ai-solid-blue-subtle) 34%,
+        var(--color-ai-solid-purple-subtle) 50%,
+        var(--color-ai-solid-blue-subtle) 66%,
+        var(--color-ai-solid-blue-subtle) 100%
+    );
+    --color-loading-ai-gradient-green-subtle: linear-gradient(
+        270deg,
+        var(--color-ai-solid-green-subtle) 0%,
+        var(--color-ai-solid-green-subtle) 34%,
+        var(--color-ai-solid-blue-subtle) 50%,
+        var(--color-ai-solid-green-subtle) 66%,
+        var(--color-ai-solid-green-subtle) 100%
+    );
 }

dist/variables/variables.less

@@ -57,6 +57,7 @@
 @spacing-400: @spacing-100 * 4;
 @spacing-450: @spacing-100 * 4.5;
 @spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
 @spacing-800: @spacing-100 * 8;
 
 @font-size-giant-3: @font-size-46;

docs/_data/modules.yaml

@@ -50,6 +50,7 @@ list:
   - segmented-buttons
   - select
   - signal
+  - skeleton
   - snackbar-dialog
   - split-button
   - star-rating