@stackoverflow/stacks 2.7.5 → 2.8.1

package/README.md

@@ -22,7 +22,7 @@ Stacks documentation can be found at https://stackoverflow.design/
 
 - [Using Stacks](#using-stacks)
 - [Migrating from v1 to v2](#migrating-from-v1-to-v2)
-- [Building Stacks](#building-stacks)
+- [Local Development](#local-development)
 - [Format Stacks](#format-stacks)
 - [Linting Stacks](#linting-stacks)
 - [Testing Stacks](#testing-stacks)
@@ -38,8 +38,13 @@ Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/
 
 To migrate from Stacks v1 to v2, see our [migration guide](/MIGRATION_GUIDE.md).
 
-## Building Stacks
-To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/develop/building).
+## Local Development
+
+To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally:
+```sh
+npm start
+```
+This command will pull up the local dev server at http://localhost:8000. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).
 
 Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
 

package/dist/css/stacks.css

@@ -2947,7 +2947,6 @@ body.theme-system .theme-dark__forced .s-menu {
   position: fixed;
   transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms;
   visibility: hidden;
-  will-change: visibility, z-index, opacity;
   z-index: var(--zi-hide);
 }
 @media (prefers-color-scheme: dark) {
@@ -3025,7 +3024,6 @@ body.theme-highcontrast.theme-dark .s-modal {
   transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
   transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
   visibility: hidden;
-  will-change: visibility, z-index, opacity, transform;
   z-index: var(--zi-hide);
 }
 .s-modal .s-modal--dialog::-webkit-scrollbar {
@@ -5185,6 +5183,61 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
 .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
   padding: 0;
 }
+.s-skeleton {
+  --_sk-bg-1: var(--black-400);
+  --_sk-bg-2: var(--black-350);
+  --_sk-bg-3: var(--black-300);
+  --_sk-o: 0.25;
+  margin-bottom: var(--su48);
+  opacity: var(--_sk-o);
+  width: 100%;
+}
+body.theme-highcontrast .s-skeleton {
+  --_sk-o: 0.4;
+}
+@keyframes flow {
+  0% {
+    background-position: 400% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.s-skeleton.s-skeleton__ai {
+  --_sk-bg-1: #ac76f0;
+  --_sk-bg-2: #297fff;
+  --_sk-bg-3: #6abcf8;
+}
+.s-skeleton,
+.s-skeleton:after,
+.s-skeleton:before {
+  background-image: linear-gradient(to right, var(--_sk-bg-1) 8%, var(--_sk-bg-2) 16%, var(--_sk-bg-3) 25%, var(--_sk-bg-1) 42%, var(--_sk-bg-2) 58%, var(--_sk-bg-3) 75%, var(--_sk-bg-1) 83%);
+  background-size: 400% 100%;
+  border-radius: var(--br-lg);
+  display: block;
+  height: var(--su16);
+  position: relative;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .s-skeleton,
+  .s-skeleton:after,
+  .s-skeleton:before {
+    animation: flow 8s linear infinite;
+  }
+}
+.s-skeleton:after,
+.s-skeleton:before {
+  content: '';
+  position: relative;
+}
+.s-skeleton:after {
+  top: calc(var(--su4));
+  width: calc(2/3 * 100%);
+}
+.s-skeleton:before {
+  top: calc(var(--su32) + var(--su8));
+  width: calc(1/3 * 100%);
+}
 .s-spinner {
   --_sp-baw: calc(var(--su-static1) * 3);
   --_sp-size: var(--su-static24);