@stackoverflow/stacks 1.0.0-beta.0 → 1.1.0

package/lib/css/atomic/width-height.less

@@ -1,194 +1,194 @@
-//
-//  STACK OVERFLOW
-//  WIDTH & HEIGHT
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  • WIDTH
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-WIDTH
-//  • MIN-WIDTH
-//  • HEIGHT
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-HEIGHT
-//  • MIN-HEIGHT
-//
-//  ============================================================================
-//  $  WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.w0 { width: 0 !important; }
-.w10 { width: 10% !important; }
-.w20 { width: 20% !important; }
-#stacks-internals #responsify('.w25', { width: 25% !important; });
-.w30 { width: 30% !important; }
-#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
-.w40 { width: 40% !important; }
-#stacks-internals #responsify('.w50', { width: 50% !important; });
-.w60 { width: 60% !important; }
-#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
-.w70 { width: 70% !important; }
-#stacks-internals #responsify('.w75', { width: 75% !important; });
-.w80 { width: 80% !important; }
-.w90 { width: 90% !important; }
-#stacks-internals #responsify('.w100', { width: 100% !important; });
-#stacks-internals #responsify('.w-auto', { width: auto !important; });
-#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
-
-//  $$  STATIC
-.ws0,
-.w0 { width: 0 !important; }
-.ws1 { width: var(--s-step) !important; }
-.ws2 { width: calc(var(--s-step) * 2) !important; }
-.ws3 { width: calc(var(--s-step) * 3) !important; }
-.ws4 { width: calc(var(--s-step) * 4) !important; }
-.ws5 { width: calc(var(--s-step) * 5) !important; }
-.ws6 { width: calc(var(--s-step) * 6) !important; }
-.ws7 { width: calc(var(--s-step) * 7) !important; }
-.ws8 { width: calc(var(--s-step) * 8) !important; }
-.ws9 { width: calc(var(--s-step) * 9) !important; }
-.ws10 { width: calc(var(--s-step) * 10) !important; }
-.ws11 { width: calc(var(--s-step) * 11) !important; }
-.ws12 { width: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.w2 { width: var(--su-static2) !important; }
-.w4 { width: var(--su-static4) !important; }
-.w6 { width: var(--su-static6) !important; }
-.w8 { width: var(--su-static8) !important; }
-.w12 { width: var(--su-static12) !important; }
-.w16 { width: var(--su-static16) !important; }
-.w24 { width: var(--su-static24) !important; }
-.w32 { width: var(--su-static32) !important; }
-.w48 { width: var(--su-static48) !important; }
-.w64 { width: var(--su-static64) !important; }
-.w96 { width: var(--su-static96) !important; }
-.w128 { width: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-WIDTH
-//  ----------------------------------------------------------------------------
-.wmx0 { max-width: 0 !important; }
-.wmx1 { max-width: var(--s-step) !important; }
-.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
-.wmx25 { max-width: 25% !important; }
-.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
-.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
-.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
-.wmx50 { max-width: 50% !important; }
-.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
-.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
-.wmx75 { max-width: 75% !important; }
-.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
-.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
-.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
-.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
-.wmx12 { max-width: var(--s-full) !important; }
-#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
-#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
-#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
-
-//  ============================================================================
-//  $  MIN-WIDTH
-//  ----------------------------------------------------------------------------
-.wmn0 { min-width: 0 !important; }
-.wmn1 { min-width: var(--s-step) !important; }
-.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
-.wmn25 { min-width: 25% !important; }
-.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
-.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
-.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
-.wmn50 { min-width: 50% !important; }
-.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
-.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
-.wmn75 { min-width: 75% !important; }
-.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
-.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
-.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
-.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
-.wmn12 { min-width: var(--s-full) !important; }
-#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
-#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
-
-//  ============================================================================
-//  $  HEIGHT
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.h0 { height: 0 !important; }
-#stacks-internals #responsify('.h100', { height: 100% !important; });
-#stacks-internals #responsify('.h-auto', { height: auto !important; });
-#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
-
-//  $$  STATIC
-.hs0,
-.h0 { height: 0 !important; }
-.hs1 { height: var(--s-step) !important; }
-.hs2 { height: calc(var(--s-step) * 2) !important; }
-.hs3 { height: calc(var(--s-step) * 3) !important; }
-.hs4 { height: calc(var(--s-step) * 4) !important; }
-.hs5 { height: calc(var(--s-step) * 5) !important; }
-.hs6 { height: calc(var(--s-step) * 6) !important; }
-.hs7 { height: calc(var(--s-step) * 7) !important; }
-.hs8 { height: calc(var(--s-step) * 8) !important; }
-.hs9 { height: calc(var(--s-step) * 9) !important; }
-.hs10 { height: calc(var(--s-step) * 10) !important; }
-.hs11 { height: calc(var(--s-step) * 11) !important; }
-.hs12 { height: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.h2 { height: var(--su-static2) !important; }
-.h4 { height: var(--su-static4) !important; }
-.h6 { height: var(--su-static6) !important; }
-.h8 { height: var(--su-static8) !important; }
-.h12 { height: var(--su-static12) !important; }
-.h16 { height: var(--su-static16) !important; }
-.h24 { height: var(--su-static24) !important; }
-.h32 { height: var(--su-static32) !important; }
-.h48 { height: var(--su-static48) !important; }
-.h64 { height: var(--su-static64) !important; }
-.h96 { height: var(--su-static96) !important; }
-.h128 { height: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmx0 { max-height: 0 !important; }
-.hmx1 { max-height: var(--s-step) !important; }
-.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
-.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
-.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
-.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
-.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
-.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
-.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
-.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
-.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
-.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
-.hmx12 { max-height: var(--s-full) !important; }
-#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
-#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
-#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
-
-//  ============================================================================
-//  $  MIN-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmn0 { min-height: 0 !important; }
-.hmn1 { min-height: var(--s-step) !important; }
-.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
-.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
-.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
-.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
-.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
-.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
-.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
-.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
-.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
-.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
-.hmn12 { min-height: var(--s-full) !important; }
-#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
-#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
-#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });
+//
+//  STACK OVERFLOW
+//  WIDTH & HEIGHT
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  • WIDTH
+//      • PERCENTAGE
+//      • STATIC
+//  • MAX-WIDTH
+//  • MIN-WIDTH
+//  • HEIGHT
+//      • PERCENTAGE
+//      • STATIC
+//  • MAX-HEIGHT
+//  • MIN-HEIGHT
+//
+//  ============================================================================
+//  $  WIDTH
+//  ----------------------------------------------------------------------------
+//  $$  PERCENTAGE AND VIEWPORT UNITS
+.w0 { width: 0 !important; }
+.w10 { width: 10% !important; }
+.w20 { width: 20% !important; }
+#stacks-internals #responsify('.w25', { width: 25% !important; });
+.w30 { width: 30% !important; }
+#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
+.w40 { width: 40% !important; }
+#stacks-internals #responsify('.w50', { width: 50% !important; });
+.w60 { width: 60% !important; }
+#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
+.w70 { width: 70% !important; }
+#stacks-internals #responsify('.w75', { width: 75% !important; });
+.w80 { width: 80% !important; }
+.w90 { width: 90% !important; }
+#stacks-internals #responsify('.w100', { width: 100% !important; });
+#stacks-internals #responsify('.w-auto', { width: auto !important; });
+#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
+
+//  $$  STATIC
+.ws0,
+.w0 { width: 0 !important; }
+.ws1 { width: var(--s-step) !important; }
+.ws2 { width: calc(var(--s-step) * 2) !important; }
+.ws3 { width: calc(var(--s-step) * 3) !important; }
+.ws4 { width: calc(var(--s-step) * 4) !important; }
+.ws5 { width: calc(var(--s-step) * 5) !important; }
+.ws6 { width: calc(var(--s-step) * 6) !important; }
+.ws7 { width: calc(var(--s-step) * 7) !important; }
+.ws8 { width: calc(var(--s-step) * 8) !important; }
+.ws9 { width: calc(var(--s-step) * 9) !important; }
+.ws10 { width: calc(var(--s-step) * 10) !important; }
+.ws11 { width: calc(var(--s-step) * 11) !important; }
+.ws12 { width: var(--s-full) !important; }
+
+//  $$  SPACING UNITS
+.w2 { width: var(--su-static2) !important; }
+.w4 { width: var(--su-static4) !important; }
+.w6 { width: var(--su-static6) !important; }
+.w8 { width: var(--su-static8) !important; }
+.w12 { width: var(--su-static12) !important; }
+.w16 { width: var(--su-static16) !important; }
+.w24 { width: var(--su-static24) !important; }
+.w32 { width: var(--su-static32) !important; }
+.w48 { width: var(--su-static48) !important; }
+.w64 { width: var(--su-static64) !important; }
+.w96 { width: var(--su-static96) !important; }
+.w128 { width: var(--su-static128) !important; }
+
+//  ============================================================================
+//  $  MAX-WIDTH
+//  ----------------------------------------------------------------------------
+.wmx0 { max-width: 0 !important; }
+.wmx1 { max-width: var(--s-step) !important; }
+.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
+.wmx25 { max-width: 25% !important; }
+.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
+.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
+.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
+.wmx50 { max-width: 50% !important; }
+.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
+.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
+.wmx75 { max-width: 75% !important; }
+.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
+.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
+.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
+.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
+.wmx12 { max-width: var(--s-full) !important; }
+#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
+#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
+#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
+
+//  ============================================================================
+//  $  MIN-WIDTH
+//  ----------------------------------------------------------------------------
+.wmn0 { min-width: 0 !important; }
+.wmn1 { min-width: var(--s-step) !important; }
+.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
+.wmn25 { min-width: 25% !important; }
+.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
+.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
+.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
+.wmn50 { min-width: 50% !important; }
+.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
+.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
+.wmn75 { min-width: 75% !important; }
+.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
+.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
+.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
+.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
+.wmn12 { min-width: var(--s-full) !important; }
+#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
+#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
+
+//  ============================================================================
+//  $  HEIGHT
+//  ----------------------------------------------------------------------------
+//  $$  PERCENTAGE AND VIEWPORT UNITS
+.h0 { height: 0 !important; }
+#stacks-internals #responsify('.h100', { height: 100% !important; });
+#stacks-internals #responsify('.h-auto', { height: auto !important; });
+#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
+
+//  $$  STATIC
+.hs0,
+.h0 { height: 0 !important; }
+.hs1 { height: var(--s-step) !important; }
+.hs2 { height: calc(var(--s-step) * 2) !important; }
+.hs3 { height: calc(var(--s-step) * 3) !important; }
+.hs4 { height: calc(var(--s-step) * 4) !important; }
+.hs5 { height: calc(var(--s-step) * 5) !important; }
+.hs6 { height: calc(var(--s-step) * 6) !important; }
+.hs7 { height: calc(var(--s-step) * 7) !important; }
+.hs8 { height: calc(var(--s-step) * 8) !important; }
+.hs9 { height: calc(var(--s-step) * 9) !important; }
+.hs10 { height: calc(var(--s-step) * 10) !important; }
+.hs11 { height: calc(var(--s-step) * 11) !important; }
+.hs12 { height: var(--s-full) !important; }
+
+//  $$  SPACING UNITS
+.h2 { height: var(--su-static2) !important; }
+.h4 { height: var(--su-static4) !important; }
+.h6 { height: var(--su-static6) !important; }
+.h8 { height: var(--su-static8) !important; }
+.h12 { height: var(--su-static12) !important; }
+.h16 { height: var(--su-static16) !important; }
+.h24 { height: var(--su-static24) !important; }
+.h32 { height: var(--su-static32) !important; }
+.h48 { height: var(--su-static48) !important; }
+.h64 { height: var(--su-static64) !important; }
+.h96 { height: var(--su-static96) !important; }
+.h128 { height: var(--su-static128) !important; }
+
+//  ============================================================================
+//  $  MAX-HEIGHT
+//  ----------------------------------------------------------------------------
+.hmx0 { max-height: 0 !important; }
+.hmx1 { max-height: var(--s-step) !important; }
+.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
+.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
+.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
+.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
+.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
+.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
+.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
+.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
+.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
+.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
+.hmx12 { max-height: var(--s-full) !important; }
+#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
+#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
+#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
+
+//  ============================================================================
+//  $  MIN-HEIGHT
+//  ----------------------------------------------------------------------------
+.hmn0 { min-height: 0 !important; }
+.hmn1 { min-height: var(--s-step) !important; }
+.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
+.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
+.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
+.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
+.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
+.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
+.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
+.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
+.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
+.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
+.hmn12 { min-height: var(--s-full) !important; }
+#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
+#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
+#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });

package/lib/css/base/body.less

@@ -1,44 +1,44 @@
-//
-//  STACK OVERFLOW
-//  BODY & HTML STYLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  TABLE OF CONTENTS
-//  • BODY / HTML
-//
-//  ============================================================================
-//  $   BODY / HTML
-//      Various properties we need to reset to make everything better.
-//  ----------------------------------------------------------------------------
-
-html,
-body {
-    color: var(--theme-body-font-color);
-    font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
-    line-height: var(--lh-base);
-}
-
-#stacks-internals #screen-sm({
-    &,
-    body {
-        font-size: 11px;
-    }
-}, @force-selector: true);
-
-body {
-    box-sizing: border-box;
-    min-height: 100%;
-    background-color: var(--theme-background-color);
-
-    *,
-    *:before,
-    *:after {
-        box-sizing: inherit;
-    }
-}
+//
+//  STACK OVERFLOW
+//  BODY & HTML STYLES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  This is where all the magic happens.
+//
+//  TABLE OF CONTENTS
+//  • BODY / HTML
+//
+//  ============================================================================
+//  $   BODY / HTML
+//      Various properties we need to reset to make everything better.
+//  ----------------------------------------------------------------------------
+
+html,
+body {
+    color: var(--theme-body-font-color);
+    font-family: var(--theme-body-font-family);
+    font-size: var(--fs-base);
+    line-height: var(--lh-base);
+}
+
+#stacks-internals #screen-sm({
+    &,
+    body {
+        font-size: 11px;
+    }
+}, @force-selector: true);
+
+body {
+    box-sizing: border-box;
+    min-height: 100%;
+    background-color: var(--theme-background-color);
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: inherit;
+    }
+}

package/lib/css/base/configuration-static.less

@@ -1,61 +1,61 @@
-// DEPRECATED - DO NOT USE
-//
-// Usage of these options is similar to what's described in configuration-dynamic.less, but the options
-// in this file also apply to the "static" part of Stacks. In particular this means that these options cannot
-// be different per-site in the Q&A project, because the static part is a shared CSS file across all Q&A sites.
-
-// OPTIONS
-// -------
-//
-// #stacks-config-static { @css-reset: normalize; }
-//
-//      `normalize` is the default, which will include normalize.css (the Nicolas Gallagher reset). Other
-//      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; }
-//
-//      @breakpoints is a list of values "optional_selector1, large_breakpoint1, medium_breakpoint1, small_breakpoint1, optional_selector2, ..."
-//
-//      Example:
-//
-//          @breakpoints:
-//              1264px, 980px, 640px,
-//              'html.smaller_breakpoints', 1164px, 880px, 540px,
-//              'html.even_smaller_breakpoints', 200px, 100px, 50px;
-//
-//      This will generate the responsive atomic classes for each group of breakpoints. If a breakpoint group is preceded by a string,
-//      that string will be prepended to the selector, so the breakpoints can be different based on a root element class. This also allows
-//      you to completely disable the responsive atomic class unless a modifier class is present somewhere, by not providing a
-//      breakpoint group that has no selector. Note that it doesn't make sense to have more than one group that leaves the selector off.
-//      Also note that if you have a group *with* a selector and a group *without* one, or selectors that aren't mutually exclusive otherwise,
-//      you may end up with undesireable effects. For example:
-//
-//          <html class="smaller_breakpoints"
-//              ...
-//              <div class="lg:d-none"></div>
-//              ...
-//          </html>
-//
-//      With the example @breakpoints setting from above, this <div> will be hidden below 1264px 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.
-//
-// Previously, the CSS reset option was a simple global variable. For backwards compatibility, we'll handle it correctly for a bit.
-@stacks-include-css-reset: this-is-deprecated;
-
-#stacks-config-static {
-
-    #handle-old-reset-option() when (@stacks-include-css-reset = this-is-deprecated) {
-        // the variable wasn't overridden -- good!
-        @css-reset: normalize; // other possible values are `meyer` and `none`
-    }
-    #handle-old-reset-option() when not (@stacks-include-css-reset = this-is-deprecated) {
-        // Somebody overwrote the variable, so this project is using the legacy option. Handle it.
-        @css-reset: @stacks-include-css-reset;
-    }
-    #handle-old-reset-option();
-
-    @breakpoints: @breakpoint-lg, @breakpoint-md, @breakpoint-sm;
-}
+// DEPRECATED - DO NOT USE
+//
+// Usage of these options is similar to what's described in configuration-dynamic.less, but the options
+// in this file also apply to the "static" part of Stacks. In particular this means that these options cannot
+// be different per-site in the Q&A project, because the static part is a shared CSS file across all Q&A sites.
+
+// OPTIONS
+// -------
+//
+// #stacks-config-static { @css-reset: normalize; }
+//
+//      `normalize` is the default, which will include normalize.css (the Nicolas Gallagher reset). Other
+//      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; }
+//
+//      @breakpoints is a list of values "optional_selector1, large_breakpoint1, medium_breakpoint1, small_breakpoint1, optional_selector2, ..."
+//
+//      Example:
+//
+//          @breakpoints:
+//              1264px, 980px, 640px,
+//              'html.smaller_breakpoints', 1164px, 880px, 540px,
+//              'html.even_smaller_breakpoints', 200px, 100px, 50px;
+//
+//      This will generate the responsive atomic classes for each group of breakpoints. If a breakpoint group is preceded by a string,
+//      that string will be prepended to the selector, so the breakpoints can be different based on a root element class. This also allows
+//      you to completely disable the responsive atomic class unless a modifier class is present somewhere, by not providing a
+//      breakpoint group that has no selector. Note that it doesn't make sense to have more than one group that leaves the selector off.
+//      Also note that if you have a group *with* a selector and a group *without* one, or selectors that aren't mutually exclusive otherwise,
+//      you may end up with undesireable effects. For example:
+//
+//          <html class="smaller_breakpoints"
+//              ...
+//              <div class="lg:d-none"></div>
+//              ...
+//          </html>
+//
+//      With the example @breakpoints setting from above, this <div> will be hidden below 1264px 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.
+//
+// Previously, the CSS reset option was a simple global variable. For backwards compatibility, we'll handle it correctly for a bit.
+@stacks-include-css-reset: this-is-deprecated;
+
+#stacks-config-static {
+
+    #handle-old-reset-option() when (@stacks-include-css-reset = this-is-deprecated) {
+        // the variable wasn't overridden -- good!
+        @css-reset: normalize; // other possible values are `meyer` and `none`
+    }
+    #handle-old-reset-option() when not (@stacks-include-css-reset = this-is-deprecated) {
+        // Somebody overwrote the variable, so this project is using the legacy option. Handle it.
+        @css-reset: @stacks-include-css-reset;
+    }
+    #handle-old-reset-option();
+
+    @breakpoints: @breakpoint-lg, @breakpoint-md, @breakpoint-sm;
+}

package/lib/css/base/icons.less

@@ -1,20 +1,20 @@
-//
-//  STACK OVERFLOW
-//  ICON STYLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-
-.svg-icon,
-.svg-spot {
-    vertical-align: bottom; // Make SVG play nicely while inline with text by default
-
-    &:not(.native) {
-        * {
-            // Targets all sub-elements so we can deliver SVG with full color if we'd like.
-            fill: currentColor;
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  ICON STYLES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+
+.svg-icon,
+.svg-spot {
+    vertical-align: bottom; // Make SVG play nicely while inline with text by default
+
+    &:not(.native) {
+        * {
+            // Targets all sub-elements so we can deliver SVG with full color if we'd like.
+            fill: currentColor;
+        }
+    }
+}