feat(background) - Add .bg-loading class and delete skeleton component

.changeset/ninety-dogs-pump.md

@@ -0,0 +1,10 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Add .bg-loading delete skeleton
+
+BREAKING CHANGES:
+
+Skeleton component deleted

MIGRATION_GUIDE.md

@@ -16,6 +16,10 @@
 - `.blr-sm` removed
 - `.blr-lg` removed
 
+#### Background
+- Add `.bg-loading`
+- Skeleton component deleted
+
 #### Colors
 - `gold`, `silver`, `bronze` colors removed
 

packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap

@@ -125,6 +125,28 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
     background-image: none !important;
 }
 
+.bg-loading {
+    animation: loadingBgAnimation 1.5s ease-out infinite;
+    animation-delay: 1ms;
+}
+
+@keyframes loadingBgAnimation {
+    0% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+
+    50% {
+        background-color: var(--black-100);
+        opacity: 0.7;
+    }
+
+    100% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+}
+
 .bg-confetti-animated {
     background-repeat: repeat-x;
     background-position: top -10px center;

packages/stacks-classic/lib/atomic/misc.less

@@ -67,6 +67,26 @@
 //  ----------------------------------------------------------------------------
 .bg-image-none { background-image: none !important; }
 
+.bg-loading {
+    animation: loadingBgAnimation 1.5s ease-out infinite;
+    animation-delay: 1ms;
+}
+
+@keyframes loadingBgAnimation {
+    0% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+    50% {
+        background-color: var(--black-100);
+        opacity: 0.7;
+    }
+    100% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+}
+
 .bg-confetti-animated {
     background-repeat: repeat-x;
     background-position: top -10px center;

packages/stacks-classic/lib/stacks-static.less

@@ -42,7 +42,6 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
-@import "components/skeleton/skeleton.less";
 @import "components/spinner/spinner.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";

packages/stacks-docs/_data/site-navigation.json

@@ -67,7 +67,8 @@
           "links": [
             {
               "title": "Backgrounds",
-              "url": "/product/base/backgrounds/"
+              "url": "/product/base/backgrounds/",
+              "new": true
             },
             {
               "title": "Borders",
@@ -335,10 +336,6 @@
               "title": "Sidebar widgets",
               "url": "/product/components/sidebar-widgets/"
             },
-            {
-              "title": "Skeleton",
-              "url": "/product/components/skeleton/"
-            },
             {
               "title": "Spinner",
               "url": "/product/components/spinner/"

packages/stacks-docs/product/base/backgrounds.html

@@ -152,6 +152,37 @@
 <section class="docs-section">
     {% header "h2", "Background utilities" %}
 
+    {% header "h3", "Loading" %}
+    <p class="docs-copy">The Loading utility applies a shimmering gradient animation to a container's background. Use this class to create flexible 'skeleton' placeholders that mimic the shape and layout of content while it loads.</p>
+    <div class="docs-preview">
+{% highlight html %}
+<div class="p16">
+    <div class="ws3 d-flex g16">
+        <div class="v-visible-sr">Loading…</div>
+        <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
+        <div class="d-flex fd-column g8 jc-space-between w100">
+            <div class="bg-loading bar-md h24"></div>
+            <div class="bg-loading bar-md h24"></div>
+            <div class="bg-loading bar-md h24 w70"></div>
+        </div>
+    </div>
+</div>
+{% endhighlight %}
+        <div class="docs-preview--example">
+            <div class="p16">
+                <div class="ws3 d-flex g16">
+                    <div class="v-visible-sr">Loading…</div>
+                    <div class="bg-loading s-avatar s-avatar__96 fl-shrink0"></div>
+                    <div class="d-flex fd-column g8 jc-space-between w100">
+                        <div class="bg-loading bar-md h24"></div>
+                        <div class="bg-loading bar-md h24"></div>
+                        <div class="bg-loading bar-md h24 w70"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     {% header "h3", "Confetti" %}
     <p class="docs-copy">Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects <code class="docs-code">prefers-reduced-motion</code> and displays the static version of the background when necessary. No JavaScript required.</p>
     <div class="docs-preview">