@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

package/lib/css/atomic/{_stacks-typography.less → typography.less}

@@ -26,21 +26,21 @@ p {
 //  $   TEXT SIZES
 //  ----------------------------------------------------------------------------
 //  Declare font sizes
-.fs-display4 { font-size: @fs-display4 !important; }
-.fs-display3 { font-size: @fs-display3 !important; }
-.fs-display2 { font-size: @fs-display2 !important; }
-.fs-display1 { font-size: @fs-display1 !important; }
-.fs-headline2 { font-size: @fs-headline2 !important; }
-.fs-headline1 { font-size: @fs-headline1 !important; }
-.fs-title { font-size: @fs-title !important; }
-.fs-subheading { font-size: @fs-subheading !important; }
-.fs-body3 { font-size: @fs-body3 !important; }
-.fs-body2 { font-size: @fs-body2 !important; }
-.fs-body1 { font-size: @fs-body1 !important; }
+.fs-display4 { font-size: var(--fs-display4) !important; }
+.fs-display3 { font-size: var(--fs-display3) !important; }
+.fs-display2 { font-size: var(--fs-display2) !important; }
+.fs-display1 { font-size: var(--fs-display1) !important; }
+.fs-headline2 { font-size: var(--fs-headline2) !important; }
+.fs-headline1 { font-size: var(--fs-headline1) !important; }
+.fs-title { font-size: var(--fs-title) !important; }
+.fs-subheading { font-size: var(--fs-subheading) !important; }
+.fs-body3 { font-size: var(--fs-body3) !important; }
+.fs-body2 { font-size: var(--fs-body2) !important; }
+.fs-body1 { font-size: var(--fs-body1) !important; }
 
 .fs-caption,
-.fs-category { font-size: @fs-caption !important; }
-.fs-fine { font-size: @fs-fine !important; }
+.fs-category { font-size: var(--fs-caption) !important; }
+.fs-fine { font-size: var(--fs-fine) !important; }
 
 #stacks-internals #screen-sm({
     .fs-display4 { font-size: 3.8rem !important; }
@@ -62,7 +62,7 @@ p {
     // If a top border is desired
     &.has-border {
         width: 100%;
-        padding: @su4 0;
+        padding: var(--su4) 0;
         border-top: 1px solid var(--bc-medium);
     }
 }
@@ -77,12 +77,12 @@ p {
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
-.lh-xs { line-height: @lh-xs !important; }
-.lh-sm { line-height: @lh-sm !important; }
-.lh-md { line-height: @lh-md !important; }
-.lh-lg { line-height: @lh-lg !important; }
-.lh-xl { line-height: @lh-xl !important; }
-.lh-xxl { line-height: @lh-xxl !important; }
+.lh-xs { line-height: var(--lh-xs) !important; }
+.lh-sm { line-height: var(--lh-sm) !important; }
+.lh-md { line-height: var(--lh-md) !important; }
+.lh-lg { line-height: var(--lh-lg) !important; }
+.lh-xl { line-height: var(--lh-xl) !important; }
+.lh-xxl { line-height: var(--lh-xxl) !important; }
 .lh-unset { line-height: initial !important; }
 
 //  ============================================================================
@@ -160,20 +160,20 @@ p {
 
 .v-truncate-fade {
     overflow: hidden;
-    -webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 9em, transparent);
-    mask-image: linear-gradient(180deg, #000 @lh-md * 9em, transparent);
-    max-height: @lh-md * 12em;
+    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    max-height: calc(var(--lh-md) * 12em);
 
     &.v-truncate-fade__sm {
-        -webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 3em, transparent);
-        mask-image: linear-gradient(180deg, #000 @lh-md * 3em, transparent);
-        max-height: @lh-md * 6em;
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        max-height: calc(var(--lh-md) * 6em);
     }
 
     &.v-truncate-fade__lg {
-        -webkit-mask-image: linear-gradient(180deg, #000 @lh-md * 21em, transparent);
-        mask-image: linear-gradient(180deg, #000 @lh-md * 21em, transparent);
-        max-height: @lh-md * 24em;
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        max-height: calc(var(--lh-md) * 24em);
     }
 }
 

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

@@ -0,0 +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; });

package/lib/css/base/{_stacks-body.less → body.less}

@@ -18,11 +18,10 @@
 
 html,
 body {
-    #stacks-internals #load-config();
     color: var(--theme-body-font-color);
     font-family: var(--theme-body-font-family);
-    font-size: @fs-base;
-    line-height: @lh-base;
+    font-size: var(--fs-base);
+    line-height: var(--lh-base);
 }
 
 #stacks-internals #screen-sm({
@@ -33,10 +32,9 @@ body {
 }, @force-selector: true);
 
 body {
-    #stacks-internals #load-config();
     box-sizing: border-box;
     min-height: 100%;
-    background-color: @body-background;
+    background-color: var(--theme-background-color);
 
     *,
     *:before,

package/lib/css/base/{_stacks-configuration-static.less → configuration-static.less}

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

package/lib/css/base/{_stacks-internals.less → internals.less}

@@ -1,15 +1,5 @@
 /* stylelint-disable */
 #stacks-internals() {
-    // Load the configuration variables into the current scope. Example:
-    //
-    //     a {
-    //         #stacks-internals #load-config();
-    //         color: @link-color-regular;
-    //     }
-    #load-config() {
-        #stacks-config();
-    }
-
     #load-static-config() {
         #stacks-config-static();
     }

package/lib/css/base/{_stacks-reset.less → 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) {

package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less}

@@ -13,15 +13,15 @@
 
 .s-activity-indicator {
     display: inline-block;
-    min-width: @su12;
-    height: @su12;
-    padding-left: @su4;
-    padding-right: @su4;
+    min-width: var(--su-static12);
+    height: var(--su-static12);
+    padding-left: var(--su4);
+    padding-right: var(--su4);
     line-height: 1.1; // Custom line-height to satisfy 1x screens
     background-color: var(--theme-secondary-400);
-    box-shadow: 0 0 0 @su4 var(--focus-ring);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
     border-radius: 1000px;
-    font-size: @fs-fine;
+    font-size: var(--fs-fine);
     font-weight: 600;
     color: @white;
     text-transform: uppercase;
@@ -31,15 +31,15 @@
 
 .s-activity-indicator__success {
     background-color: var(--green-500);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
 }
 
 .s-activity-indicator__warning {
     background-color: var(--yellow-600);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
 }
 
 .s-activity-indicator__danger {
     background-color: var(--red-500);
-    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
 }

package/lib/css/components/{_stacks-avatars.less → avatars.less}

@@ -18,9 +18,9 @@
 .s-avatar {
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
-    width: @su16;
-    height: @su16;
-    border-radius: @br-sm;
+    width: var(--su-static16);
+    height: var(--su-static16);
+    border-radius: var(--br-sm);
     background-color: @white; // Force a white background color for when we have transparent avatars
     background-repeat: no-repeat;
     background-size: 100%;
@@ -57,15 +57,15 @@
     }
 
     .s-avatar--image {
-        width: @su16;
-        height: @su16;
-        border-radius: @br-sm;
+        width: var(--su-static16);
+        height: var(--su-static16);
+        border-radius: var(--br-sm);
         display: block;
     }
 
     &.s-avatar__24 {
-        width: @su24;
-        height: @su24;
+        width: var(--su-static24);
+        height: var(--su-static24);
 
         .s-avatar--letter {
             font-size: 16px; // Force the font size regardless of the parent
@@ -77,15 +77,15 @@
         }
 
         .s-avatar--image {
-            width: @su24;
-            height: @su24;
+            width: var(--su-static24);
+            height: var(--su-static24);
         }
     }
 
     &.s-avatar__32 {
-        width: @su32;
-        height: @su32;
-        border-radius: @br-md;
+        width: var(--su-static32);
+        height: var(--su-static32);
+        border-radius: var(--br-md);
 
         .s-avatar--letter {
             font-size: 22px; // Force the font size regardless of the parent
@@ -97,16 +97,16 @@
         }
 
         .s-avatar--image {
-            width: @su32;
-            height: @su32;
-            border-radius: @br-md;
+            width: var(--su-static32);
+            height: var(--su-static32);
+            border-radius: var(--br-md);
         }
     }
 
     &.s-avatar__48 {
-        width: @su48;
-        height: @su48;
-        border-radius: @br-md;
+        width: var(--su-static48);
+        height: var(--su-static48);
+        border-radius: var(--br-md);
 
         .s-avatar--letter {
             font-size: 34px; // Force the font size regardless of the parent
@@ -118,16 +118,16 @@
         }
 
         .s-avatar--image {
-            width: @su48;
-            height: @su48;
-            border-radius: @br-md;
+            width: var(--su-static48);
+            height: var(--su-static48);
+            border-radius: var(--br-md);
         }
     }
 
     &.s-avatar__64 {
-        width: @su64;
-        height: @su64;
-        border-radius: @br-lg;
+        width: var(--su-static64);
+        height: var(--su-static64);
+        border-radius: var(--br-lg);
 
         .s-avatar--letter {
             font-size: 44px; // Force the font size regardless of the parent
@@ -139,16 +139,16 @@
         }
 
         .s-avatar--image {
-            width: @su64;
-            height: @su64;
-            border-radius: @br-lg;
+            width: var(--su-static64);
+            height: var(--su-static64);
+            border-radius: var(--br-lg);
         }
     }
 
     &.s-avatar__96 {
-        width: @su96;
-        height: @su96;
-        border-radius: @br-lg + @br-sm;
+        width: var(--su-static96);
+        height: var(--su-static96);
+        border-radius: calc(var(--br-lg) + var(--br-sm));
 
         .s-avatar--letter {
             font-size: 66px; // Force the font size regardless of the parent
@@ -160,16 +160,16 @@
         }
 
         .s-avatar--image {
-            width: @su96;
-            height: @su96;
-            border-radius: @br-lg + @br-sm;
+            width: var(--su-static96);
+            height: var(--su-static96);
+            border-radius: calc(var(--br-lg) + var(--br-sm));
         }
     }
 
     &.s-avatar__128 {
-        width: @su128;
-        height: @su128;
-        border-radius: @br-lg + @br-lg;
+        width: var(--su-static128);
+        height: var(--su-static128);
+        border-radius: calc(var(--br-lg) + var(--br-lg));
 
         .s-avatar--letter {
             font-size: 88px; // Force the font size regardless of the parent
@@ -181,9 +181,9 @@
         }
 
         .s-avatar--image {
-            width: @su128;
-            height: @su128;
-            border-radius: @br-lg + @br-lg;
+            width: var(--su-static128);
+            height: var(--su-static128);
+            border-radius: calc(var(--br-lg) + var(--br-lg));
         }
     }
 }

package/lib/css/components/{_stacks-badges.less → badges.less}

@@ -31,11 +31,11 @@
     align-items: center;
     justify-content: center;
     min-width: 0;
-    padding: 0 @su6;
+    padding: 0 var(--su6);
     border-width: 1px;
     border-style: solid;
-    border-radius: @br-sm;
-    font-size: @fs-caption;
+    border-radius: var(--br-sm);
+    font-size: var(--fs-caption);
     font-weight: normal;
     line-height: 2;
     text-decoration: none;
@@ -55,8 +55,8 @@
 .s-badge--image {
     display: inline-flex;
     align-self: center;
-    margin-right: (@su2 / 2);
-    margin-left: -(@su4 + 1);
+    margin-right: var(--su1);
+    margin-left: calc((var(--su4) + var(--su1)) * -1);
 }
 
 //  $   BADGE SIZES
@@ -64,17 +64,17 @@
 .s-badge__sm {
     min-width: 18px;
     align-self: flex-start;
-    padding-right: @su4;
-    padding-left: @su4;
-    font-size: @fs-fine;
+    padding-right: var(--su4);
+    padding-left: var(--su4);
+    font-size: var(--fs-fine);
     line-height: 1.8;
 }
 
 .s-badge__xs {
     align-self: flex-start;
-    padding-right: @su2;
-    padding-left: @su2;
-    font-size: @fs-fine;
+    padding-right: var(--su2);
+    padding-left: var(--su2);
+    font-size: var(--fs-fine);
     line-height: 1.5;
 }
 

package/lib/css/components/{_stacks-banners.less → banners.less}

@@ -29,18 +29,18 @@
 //  ----------------------------------------------------------------------------
 .s-banner {
     position: fixed;
-    z-index: @zi-navigation-fixed - 1; // Tuck below topbar
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
     top: 0;
     right: 0;
     left: 0;
     width: 100%;
-    padding: @su12;
+    padding: var(--su12);
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
     border-radius: 0;
     box-shadow: none;
     color: var(--fc-medium);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
 
     // If you want to hide and reveal the banner
     &[aria-hidden="true"] {
@@ -59,7 +59,7 @@
 
     //  If you want to put the banner above the topbar
     &.is-pinned {
-        z-index: @zi-navigation-fixed + 1;
+        z-index: calc(var(--zi-navigation-fixed) + 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }
@@ -73,9 +73,8 @@
 
 //  --  When we want to keep hero content capped
 .s-banner--container {
-    #stacks-internals #load-config();
     position: relative;
     width: 100%;
-    max-width: @body-site-width;
+    max-width: calc(var(--s-step) * 10);
     margin: 0 auto;
 }

package/lib/css/components/{_stacks-blank-states.less → blank-states.less}

@@ -16,8 +16,8 @@
     margin-right: auto;
 
     p {
-        font-size: @fs-body1;
-        margin-bottom: @su12;
+        font-size: var(--fs-body1);
+        margin-bottom: var(--su12);
 
         strong {
             color: var(--fc-dark);