Merge branch 'develop' into code-copy-btn

docs/product/base/grid.html

@@ -5,11 +5,6 @@
 ---
 <section class="stacks-section">
     {% header "h2", "Overview" %}
-    {% tip, "warning", "mb24" %}
-        <p>Looking for our old flex grid? <a href="{{ "/product/base/flex" | url }}">Flex layouts</a> have been moved and renamed now that CSS grid is here. Our <code class="stacks-code">.grid</code>, and <code class="stacks-code">.grid--cell</code> classes have been removed in favor of <code class="stacks-code">.d-flex</code> and <code class="stacks-code">.flex--item</code>.</p>
-        <p class="mb0">If you need to continue using the old <code class="stacks-code">.grid</code>, and <code class="stacks-code">.grid--cell</code> classes, Stacks provides a <a href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks-flexgrid-shim.min.css">shim</a> for backwards compatability.</p>
-    {% endtip %}
-
     <p class="stacks-copy">CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike <a href="{{ "/product/base/flex" | url }}">flex layouts</a> which can only do one at a time. Applying <code class="stacks-code">.d-grid</code> to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual <code class="stacks-code">.grid--item</code> will change that cell’s behavior.</p>
 
     {% header "h3", "Examples" %}

docs/product/guidelines/releasing.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Releasing Stacks
-description: The following is a guide to releasing a new version of Stacks and making it available in production on Core and Careers.
+description: The following is a guide to releasing a new version of Stacks and making it available in production on Stack Overflow and Careers.
 ---
 
 <section class="stacks-section">
@@ -19,7 +19,7 @@
 
 <section class="stacks-section">
     {% header "h2", "Ship the new version to Stack Overflow" %}
-    <p class="stacks-copy">In order for the new version of Stacks to be usable on Core and Careers, you’ll need to ship to both.</p>
-
-    <p class="stacks-copy">Within Core and Careers, run the <code class="stacks-code">update-stacks.bat</code> script within <code class="stacks-code">Tools/</code>. This will copy the files from the latest version of the Stacks repo. You’ll need to do this for both Core and Careers. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the &ldquo;new pull request&rdquo; page.</p>
+    <p class="stacks-copy">In order for the new version of Stacks to be usable on Stack Overflow and Careers, you’ll need to ship to both.</p>
+    <p class="stacks-copy">Stack Overflow’s dependencies are now managed via NPM, so updating Stacks there is as simple as bumping the version number in <code class="stacks-code">package.json</code></p>
+    <p class="stacks-copy">Within the Careers repo, run the <code class="stacks-code">update-stacks.bat</code> script within the <code class="stacks-code">Tools</code> directory. This will copy the files from the latest version of the Stacks repo. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the &ldquo;new pull request&rdquo; page.</p>
 </section>

lib/css/atomic/_stacks-width-height.less → lib/css/atomic/width-height.less

@@ -42,18 +42,18 @@
 //  $$  STATIC
 .ws0,
 .w0 { width: 0 !important; }
-.ws1 { width: @s-step !important; }
-.ws2 { width: @s-step * 2 !important; }
-.ws3 { width: @s-step * 3 !important; }
-.ws4 { width: @s-step * 4 !important; }
-.ws5 { width: @s-step * 5 !important; }
-.ws6 { width: @s-step * 6 !important; }
-.ws7 { width: @s-step * 7 !important; }
-.ws8 { width: @s-step * 8 !important; }
-.ws9 { width: @s-step * 9 !important; }
-.ws10 { width: @s-step * 10 !important; }
-.ws11 { width: @s-step * 11 !important; }
-.ws12 { width: @s-full !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; }
@@ -73,21 +73,21 @@
 //  $  MAX-WIDTH
 //  ----------------------------------------------------------------------------
 .wmx0 { max-width: 0 !important; }
-.wmx1 { max-width: @s-step !important; }
-.wmx2 { max-width: @s-step * 2 !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: @s-step * 3 !important; }
-.wmx4 { max-width: @s-step * 4 !important; }
-.wmx5 { max-width: @s-step * 5 !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: @s-step * 6 !important; }
-.wmx7 { max-width: @s-step * 7 !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: @s-step * 8 !important; }
-.wmx9 { max-width: @s-step * 9 !important; }
-.wmx10 { max-width: @s-step * 10 !important; }
-.wmx11 { max-width: @s-step * 11 !important; }
-.wmx12 { max-width: @s-full !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; });
@@ -96,21 +96,21 @@
 //  $  MIN-WIDTH
 //  ----------------------------------------------------------------------------
 .wmn0 { min-width: 0 !important; }
-.wmn1 { min-width: @s-step !important; }
-.wmn2 { min-width: @s-step * 2 !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: @s-step * 3 !important; }
-.wmn4 { min-width: @s-step * 4 !important; }
-.wmn5 { min-width: @s-step * 5 !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: @s-step * 6 !important; }
-.wmn7 { min-width: @s-step * 7 !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: @s-step * 8 !important; }
-.wmn9 { min-width: @s-step * 9 !important; }
-.wmn10 { min-width: @s-step * 10 !important; }
-.wmn11 { min-width: @s-step * 11 !important; }
-.wmn12 { min-width: @s-full !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; });
 
@@ -126,18 +126,18 @@
 //  $$  STATIC
 .hs0,
 .h0 { height: 0 !important; }
-.hs1 { height: @s-step !important; }
-.hs2 { height: @s-step * 2 !important; }
-.hs3 { height: @s-step * 3 !important; }
-.hs4 { height: @s-step * 4 !important; }
-.hs5 { height: @s-step * 5 !important; }
-.hs6 { height: @s-step * 6 !important; }
-.hs7 { height: @s-step * 7 !important; }
-.hs8 { height: @s-step * 8 !important; }
-.hs9 { height: @s-step * 9 !important; }
-.hs10 { height: @s-step * 10 !important; }
-.hs11 { height: @s-step * 11 !important; }
-.hs12 { height: @s-full !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; }
@@ -157,18 +157,18 @@
 //  $  MAX-HEIGHT
 //  ----------------------------------------------------------------------------
 .hmx0 { max-height: 0 !important; }
-.hmx1 { max-height: @s-step !important; }
-.hmx2 { max-height: @s-step * 2 !important; }
-.hmx3 { max-height: @s-step * 3 !important; }
-.hmx4 { max-height: @s-step * 4 !important; }
-.hmx5 { max-height: @s-step * 5 !important; }
-.hmx6 { max-height: @s-step * 6 !important; }
-.hmx7 { max-height: @s-step * 7 !important; }
-.hmx8 { max-height: @s-step * 8 !important; }
-.hmx9 { max-height: @s-step * 9 !important; }
-.hmx10 { max-height: @s-step * 10 !important; }
-.hmx11 { max-height: @s-step * 11 !important; }
-.hmx12 { max-height: @s-full !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; });
@@ -177,18 +177,18 @@
 //  $  MIN-HEIGHT
 //  ----------------------------------------------------------------------------
 .hmn0 { min-height: 0 !important; }
-.hmn1 { min-height: @s-step !important; }
-.hmn2 { min-height: @s-step * 2 !important; }
-.hmn3 { min-height: @s-step * 3 !important; }
-.hmn4 { min-height: @s-step * 4 !important; }
-.hmn5 { min-height: @s-step * 5 !important; }
-.hmn6 { min-height: @s-step * 6 !important; }
-.hmn7 { min-height: @s-step * 7 !important; }
-.hmn8 { min-height: @s-step * 8 !important; }
-.hmn9 { min-height: @s-step * 9 !important; }
-.hmn10 { min-height: @s-step * 10 !important; }
-.hmn11 { min-height: @s-step * 11 !important; }
-.hmn12 { min-height: @s-full !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; });

lib/css/base/_stacks-configuration-static.less → lib/css/base/configuration-static.less

@@ -1,4 +1,4 @@
-// Usage of these options is similar to what's described in _stacks-configuration-dynamic.less, but the options
+// 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.
 

lib/css/base/_stacks-reset.less → lib/css/base/reset.less

@@ -2,10 +2,10 @@
 
 #stacks-internals() {
     #include-css-reset(meyer) {
-        @import "_stacks-reset-meyer.less";
+        @import "reset-meyer.less";
     }
     #include-css-reset(normalize) {
-        @import "_stacks-reset-normalize.less";
+        @import "reset-normalize.less";
     }
     /* stylelint-disable block-no-empty */
     #include-css-reset(none) {

lib/css/components/_stacks-banners.less → lib/css/components/banners.less

@@ -75,6 +75,6 @@
 .s-banner--container {
     position: relative;
     width: 100%;
-    max-width: @s-step * 10;
+    max-width: calc(var(--s-step) * 10);
     margin: 0 auto;
 }

lib/css/components/_stacks-buttons.less → lib/css/components/buttons.less

@@ -642,7 +642,7 @@
                 border-left-color: currentColor;
                 border-radius: var(--br-circle);
                 animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-                // see _stacks-spinner.less for an explanation of the following two
+                // see spinner.less for an explanation of the following two
                 filter: invert(0); // (*)
                 transform-origin: 50% 50% 1px; // (*)
             }

lib/css/components/_stacks-modals.less → lib/css/components/modals.less

@@ -128,6 +128,6 @@
 //  $   SIZES
 //  ----------------------------------------------------------------------------
 .s-modal__full {
-    max-width: calc(~"100% - @{su48}");
-    max-height: calc(~"100% - @{su48}");
+    max-width: calc(100% - var(--su48));
+    max-height: calc(100% - var(--su48));
 }

lib/css/components/_stacks-topbar.less → lib/css/components/topbar.less

@@ -45,7 +45,7 @@
 
     // Wraps the content so the topbar stretches 100% w/ content at some value below that
     .s-topbar--container {
-        width: @s-full; // wmx12; Consumers should use atomic classes to override this
+        width: var(--s-full); // wmx12; Consumers should use atomic classes to override this
         max-width: 100%;
         height: 100%;
         display: flex;

lib/css/components/_stacks-widget-dynamic.less → lib/css/components/widget-dynamic.less

@@ -9,7 +9,7 @@
 //  This file only sets the colors for the "current color" highlight when the
 //  widget is used for navigation. This is the only part of the widget that is
 //  dynamically configurable; the rest can be served in the static part of Stacks
-//  and is in _stacks-widget-static.less.
+//  and is in widget-static.less.
 
 .s-sidebarwidget--item {
     &,

lib/css/components/_stacks-widget-static.less → lib/css/components/widget-static.less

@@ -9,7 +9,7 @@
 //  This file contains almost all the CSS for the sidebar widget. The only exception
 //  is the "current color" highlight when the widget is used for navigation. That
 //  part is configurable and is in the dynamic part of Stacks as
-//  _stacks-widget-dynamic.less.
+//  widget-dynamic.less.
 
 // TODO: Figure out a way to use spacing unit CSS variables here
 @s-sidebarwidget-content-padding: @su16 - 1px; // subtract 1px for border
@@ -194,7 +194,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
                 margin-left: -@s-sidebarwidget-content-padding - 1; // the orange selection indicator overlaps with the widget border
                 border-left-width: 3px;
                 border-left-style: solid;
-                // border-left-color is set in _stacks-widget-dynamic.less
+                // border-left-color is set in widget-dynamic.less
             }
 
             a,
@@ -220,7 +220,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
 
         &[aria-current="true"],
         &[aria-current="page"] {
-            // this is given a bullet-arrow in the primary color in _stacks-widget-dynamic.less
+            // this is given a bullet-arrow in the primary color in widget-dynamic.less
             color: var(--black);
             font-weight: bold;
 

lib/css/exports/_stacks-constants-colors.less → lib/css/exports/constants-colors.less

@@ -1,4 +1,4 @@
-@import (reference) "./_stacks-mixins.less";
+@import (reference) "./mixins.less";
 
 //
 //  STACK OVERFLOW

lib/css/exports/_stacks-constants-helpers.less → lib/css/exports/constants-helpers.less

@@ -49,6 +49,10 @@ body {
 
     --default-transition-duration:       0.1s;
     --transition-time:                   var(--default-transition-duration);
+
+    // Sizing
+    --s-full: 97.2307692rem; // Based on a pixel size of 1264px;
+    --s-step: calc(var(--s-full) / 12);
 }
 
 //  ============================================================================
@@ -76,13 +80,6 @@ body {
 @su96:                  96px;
 @su128:                 128px;
 
-
-//  ============================================================================
-//  $  SIZING UNITS (su-)
-//  ----------------------------------------------------------------------------
-@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
-@s-step: (@s-full / 12);
-
 //  ============================================================================
 //  $   SCROLLBAR STYLING
 //  ----------------------------------------------------------------------------

lib/css/exports/_stacks-exports.less → lib/css/exports/exports.less

@@ -9,7 +9,7 @@
 //  Wherein we establish a bunch of values to make our lives a lot easier.
 //
 //  ============================================================================
-@import "_stacks-constants-type.less";            // Type styles, sizes, and line-heights
-@import "_stacks-constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
-@import "_stacks-constants-colors.less";          // Colors
-@import "_stacks-mixins.less";
+@import "constants-type.less";            // Type styles, sizes, and line-heights
+@import "constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
+@import "constants-colors.less";          // Colors
+@import "mixins.less";

lib/css/stacks-dynamic.less

@@ -15,21 +15,21 @@
 //      via variables.
 //  ----------------------------------------------------------------------------
 //  --  SET BASIC STYLES FOR BODY
-@import "base/_stacks-body.less";
+@import "base/body.less";
 
 //  --  COMPONENTS
-@import "components/_stacks-banners.less";
-@import "components/_stacks-buttons.less";
-@import "components/_stacks-links.less";
-@import "components/_stacks-link-previews.less";
-@import "components/_stacks-notices.less";
-@import "components/_stacks-tags.less";
-@import "components/_stacks-pagination.less";
-@import "components/_stacks-widget-dynamic.less";
+@import "components/banners.less";
+@import "components/buttons.less";
+@import "components/links.less";
+@import "components/link-previews.less";
+@import "components/notices.less";
+@import "components/tags.less";
+@import "components/pagination.less";
+@import "components/widget-dynamic.less";
 
 //  --  LESS CONSTANTS AND MIXINS
-@import "exports/_stacks-exports.less";
+@import "exports/exports.less";
 
 //  --  CONFIG
-@import "base/_stacks-configuration-static.less";
-@import "base/_stacks-internals.less";
+@import "base/configuration-static.less";
+@import "base/internals.less";