@stackoverflow/stacks 3.0.0-beta.17 → 3.0.0-beta.19

package/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;
@@ -155,21 +175,6 @@
     user-select: none !important;
 }
 
-//  ============================================================================
-//  $  USER DRAG
-//  ----------------------------------------------------------------------------
-.ud-auto {
-    -webkit-user-drag: auto !important;
-    -moz-user-drag: auto !important;
-    -ms-user-drag: auto !important;
-}
-
-.ud-none {
-    -webkit-user-drag: none !important;
-    -moz-user-drag: none !important;
-    -ms-user-drag: none !important;
-}
-
 //  ============================================================================
 //  $  VISIBILITY
 //  ----------------------------------------------------------------------------

package/lib/base/configuration-static.less

@@ -13,14 +13,14 @@
 //      legal options are `meyer` for the Eric Meyer reset, and `none` if no CSS reset should be compiled in.
 //
 //
-// #stacks-config-static { @breakpoints: 1264px, 980px, 640px; }
+// #stacks-config-static { @breakpoints: 92.25rem, 71.875rem, 48.75rem; }
 //
 //      @breakpoints is a list of values "optional_selector1, large_breakpoint1, medium_breakpoint1, small_breakpoint1, optional_selector2, ..."
 //
 //      Example:
 //
 //          @breakpoints:
-//              1264px, 980px, 640px,
+//              92.25rem, 71.875rem, 48.75rem,
 //              'html.smaller_breakpoints', 1164px, 880px, 540px,
 //              'html.even_smaller_breakpoints', 200px, 100px, 50px;
 //
@@ -37,7 +37,7 @@
 //              ...
 //          </html>
 //
-//      With the example @breakpoints setting from above, this <div> will be hidden below 1264px even though the smaller_breakpoints class
+//      With the example @breakpoints setting from above, this <div> will be hidden below 92.25rem even though the smaller_breakpoints class
 //      is on the root element, because the selector-free breakpoint group still applies.
 //
 //      Any selector, if given, MUST select the root (html) element.

package/lib/components/button-group/button-group.less

@@ -69,6 +69,7 @@
             flex-direction: column;
         }
 
+        font-weight: 400;
         white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
 

package/lib/components/code-block/code-block.fixtures.ts

@@ -55,9 +55,9 @@ const cssFixture = `
 
 const htmlFixture = `
 <form class="d-flex gy4 fd-column">
-    <label class="flex--item s-label" for="question-title">Question title</label>
+    <label class="s-label" for="question-title">Question title</label>
     <div class="d-flex ps-relative">
-        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+        <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
     </div>
 </form>
 `;

package/lib/exports/color-sets.less

@@ -65,8 +65,8 @@
     250: hsv(218, 4%, 82%);
     300: hsv(229, 7%, 61%);
     350: hsv(214, 8%, 36%);
-    400: hsv(204, 6%, 35%);
-    500: hsv(223, 9%, 30%);
+    400: hsv(204, 6%, 33.5%);
+    500: hsv(223, 9%, 29.5%);
     600: hsv(345, 13%, 13%);
     default: hsv(0, 0%, 0%);
 }

package/lib/exports/constants-helpers.less

@@ -55,9 +55,9 @@ body {
 //  ============================================================================
 //  $   RESPONSIVE BREAKPOINTS
 //  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
+@breakpoint-lg: 92.25rem; // 1476px
+@breakpoint-md: 71.875rem; // 1150px
+@breakpoint-sm: 48.75rem; // 780px
 
 //  ============================================================================
 //  $   SCROLLBAR STYLING

package/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";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.17",
+    "version": "3.0.0-beta.19",
     "files": [
         "dist",
         "lib",

package/lib/components/skeleton/skeleton.less

@@ -1,73 +0,0 @@
-.s-skeleton {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    // TODO verify colors with design
-    --_sk-bg-1: var(--black-400);
-    --_sk-bg-2: var(--black-350);
-    --_sk-bg-3: var(--black-300);
-    --_sk-o: 0.25;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_sk-o: 0.4;
-    });
-
-    @keyframes flow {
-        0% {
-            background-position: 400% 50%;
-        }
-        100% {
-            background-position: 0% 50%;
-        }
-    }
-
-    // VARIANTS
-    &&__ai {
-        --_sk-bg-1: #ac76f0;
-        --_sk-bg-2: #297fff;
-        --_sk-bg-3: #6abcf8;
-    }
-
-    &,
-    &:after,
-    &:before {
-        @media (prefers-reduced-motion: no-preference) {
-            animation: flow 8s linear infinite;
-        }
-
-        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-md);
-        display: block;
-        height: var(--su16);
-        position: relative;
-    }
-
-    &:after,
-    &:before {
-        content: '';
-        position: relative;
-    }
-
-    &:after {
-        top: calc(var(--su4));
-        width: calc(2/3 * 100%);
-    }
-
-    &:before {
-        top: calc(var(--su32) + var(--su8));
-        width: calc(1/3 * 100%);
-    }
-
-    margin-bottom: var(--su48);
-    opacity: var(--_sk-o);
-    width: 100%;
-}