@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/atomic/typography.less

@@ -1,17 +1,8 @@
-//
-//  STACK OVERFLOW
-//  TYPOGRAPHY
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • ATOMIC CLASSES
-//
-//  ============================================================================
-//  $   TYPE RESETS
-//  ----------------------------------------------------------------------------
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../base/configuration-static.less";
+@import (reference) "../base/internal.less";
+
+// TYPE RESETS
 h1,
 h2,
 h3,
@@ -22,23 +13,59 @@ p {
     margin-top: 0;
 }
 
-//  ============================================================================
-//  $   TEXT SIZES
-//  ----------------------------------------------------------------------------
-//  Declare font sizes
-.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 { font-size: var(--fs-caption) !important; }
-.fs-fine { font-size: var(--fs-fine) !important; }
+// TEXT SIZES
+.fs-display4 {
+    font-size: var(--fs-display4) !important;
+    line-height: 1.18;
+}
+.fs-display3 {
+    font-size: var(--fs-display3) !important;
+    line-height: 1.20;
+}
+.fs-display2 {
+    font-size: var(--fs-display2) !important;
+    line-height: 1.28;
+}
+.fs-display1 {
+    font-size: var(--fs-display1) !important;
+    line-height: 1.34;
+}
+.fs-headline2 {
+    font-size: var(--fs-headline2) !important;
+    line-height: 1.40;
+}
+.fs-headline1 {
+    font-size: var(--fs-headline1) !important;
+    line-height: 1.40;
+}
+.fs-title {
+    font-size: var(--fs-title) !important;
+    line-height: 1.40;
+}
+.fs-subheading {
+    font-size: var(--fs-subheading) !important;
+    line-height: 1.40;
+}
+.fs-body3 {
+    font-size: var(--fs-body3) !important;
+    line-height: 1.40;
+}
+.fs-body2 {
+    font-size: var(--fs-body2) !important;
+    line-height: 1.40;
+}
+.fs-body1 {
+    font-size: var(--fs-body1) !important;
+    line-height: 1.40;
+}
+.fs-caption {
+    font-size: var(--fs-caption) !important;
+    line-height: 1.40;
+}
+.fs-fine {
+    font-size: var(--fs-fine) !important;
+    line-height: 1.36;
+}
 
 #stacks-internals #screen-sm({
     .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
@@ -53,9 +80,7 @@ p {
     .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
 }, @force-selector: true);
 
-//  ============================================================================
-//  $   LINE HEIGHTS
-//  ----------------------------------------------------------------------------
+// LINE HEIGHTS
 .lh-xs { line-height: var(--lh-xs) !important; }
 .lh-sm { line-height: var(--lh-sm) !important; }
 .lh-md { line-height: var(--lh-md) !important; }
@@ -64,100 +89,42 @@ p {
 .lh-xxl { line-height: var(--lh-xxl) !important; }
 .lh-unset { line-height: initial !important; }
 
-//  ============================================================================
-//  $$  TEXT STYLES & UTILITIES
-//  ----------------------------------------------------------------------------
-//  --  Font Family
+// TEXT STYLES & UTILITIES
+// Font Family
 .ff-sans { font-family: var(--ff-sans) !important; }
 .ff-serif { font-family: var(--ff-serif) !important; }
 .ff-mono { font-family: var(--ff-mono) !important; }
 .ff-inherit { font-family: inherit !important; }
 
-//  --  Font Weight
+// Font Weight
 .fw-normal { font-weight: 400 !important; }
 .fw-medium { font-weight: 500 !important; }
 .fw-bold { font-weight: 600 !important; }
 
-//  --  Font Styles
+// Font Styles
 .fs-normal { font-style: normal !important; }
 .fs-italic { font-style: italic !important; }
 .fs-unset { font-style: unset !important; }
 
-//  --  Text Align
+// Text Align
 #stacks-internals #responsify('.ta-left', { text-align: left !important; });
 #stacks-internals #responsify('.ta-center', { text-align: center !important; });
 #stacks-internals #responsify('.ta-right', { text-align: right !important; });
 .ta-justify { text-align: justify !important; }
 .ta-unset { text-align: unset !important; }
 
-//  --  Text Decoration
+// Text Decoration
 .td-none { text-decoration: none !important; }
 .td-underline { text-decoration: underline !important; }
 
-//  --  Text Transform
+// Text Transform
 .tt-capitalize { text-transform: capitalize !important; }
 .tt-lowercase { text-transform: lowercase !important; }
 .tt-uppercase { text-transform: uppercase !important; }
 .tt-none { text-transform: none !important; }
 .tt-unset { text-transform: unset !important; }
 
-//  --  Text Truncate
-.truncate {
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis !important;
-    white-space: nowrap;
-}
-
-.v-truncate1 {
-    .truncation(1);
-}
-
-.v-truncate2 {
-    .truncation(2);
-}
-
-.v-truncate3 {
-    .truncation(3);
-}
-
-.v-truncate4 {
-    .truncation(4);
-}
-
-.v-truncate5 {
-    .truncation(5);
-}
-
-.truncation(@count) {
-    // Despite these all being webkit-specific properties, this works across
-    // Safari, Chrome, Edge, and Firefox.
-    display: -webkit-box;
-    -webkit-line-clamp: @count;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.v-truncate-fade {
-    overflow: hidden;
-    -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 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 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);
-    }
-}
-
-//  --  Whitespace
+// Whitespace
 .ws-normal { white-space: normal !important; }
 .ws-nowrap { white-space: nowrap !important; }
 .ws-pre { white-space: pre !important; }
@@ -165,7 +132,7 @@ p {
 .ws-pre-line { white-space: pre-line !important; }
 .ws-unset { white-space: unset !important; }
 
-//  --  Word Break
+// Word Break
 .wb-normal { word-break: normal !important; }
 .wb-break-all { word-break: break-all !important; }
 .wb-keep-all { word-break: keep-all !important; }
@@ -173,7 +140,7 @@ p {
 .wb-initial { word-break: initial !important; }
 .wb-unset { word-break: unset !important; }
 
-//  --  Overflow Wrap
+// Overflow Wrap
 .ow-normal {
     overflow-wrap: normal !important;
 }
@@ -198,7 +165,7 @@ p {
     overflow-wrap: unset !important;
 }
 
-//  --  Hyphenation
+// Hyphenation
 .hyphens-none { hyphens: none !important; }
 .hyphens-auto {
     -ms-hyphens: auto !important;
@@ -207,7 +174,7 @@ p {
 }
 .hyphens-unset { hyphens: unset !important; }
 
-//  --  Break word
+// Break word
 .break-word {
     // DEPRECATED: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
     /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
@@ -218,36 +185,3 @@ p {
     -ms-hyphens: auto !important;
     hyphens: auto !important;
 }
-
-//  ============================================================================
-//  $   LISTS
-//  ----------------------------------------------------------------------------
-ul,
-ol {
-    padding: 0;
-    margin-left: 2.8em;
-
-    ul,
-    ol {
-        margin-bottom: 0;
-    }
-}
-
-ul { list-style-type: disc; }
-ol { list-style-type: decimal; }
-
-.list-reset {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-//  --  List Style Types
-.list-ls-none { list-style: none !important; }
-.list-ls-disc { list-style-type: disc !important; }
-.list-ls-decimal { list-style-type: decimal !important; }
-.list-ls-unset { list-style-type: unset !important; }
-
-//  --  List Position
-.list-inside { list-style-position: inside !important; }
-.list-outside { list-style-position: outside !important; }

package/lib/atomic/vertical-alignment.less

@@ -0,0 +1,9 @@
+.va-baseline { vertical-align: baseline !important; }
+.va-bottom { vertical-align: bottom !important; }
+.va-middle { vertical-align: middle !important; }
+.va-sub { vertical-align: sub !important; }
+.va-super { vertical-align: super !important; }
+.va-text-bottom { vertical-align: text-bottom !important; }
+.va-text-top { vertical-align: text-top !important; }
+.va-top { vertical-align: top !important; }
+.va-unset { vertical-align: unset !important; }

package/lib/atomic/visibility.less

@@ -0,0 +1,18 @@
+
+.v-visible { visibility: visible !important; }
+.v-hidden { visibility: hidden !important; }
+.v-visible-sr {
+    // Borrowed from Wordpress
+    // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
+    border: 0;
+    /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
+    clip: rect(var(--su1), var(--su1), var(--su1), var(--su1));
+    clip-path: inset(50%);
+    height: var(--su1);
+    margin: var(--sun1);
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width:  var(--su1);
+    overflow-wrap: normal;
+}

package/lib/atomic/width.less

@@ -0,0 +1,27 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `width` properties
+.generate-sizing('.w', width, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.ws', width); // Static sizing units
+.generate-sizing('.w', width, 10 20 30 40 60 70 80 90, 'percent');
+.generate-sizing('.w', width, 25 50 75 100, 'percent', true); // responsive
+#stacks-internals #responsify('.w33', { width: calc(100% / 3) !important; });
+#stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; });
+#stacks-internals #responsify('.w-auto', { width: auto !important; });
+#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
+
+// `min-width` properties
+.generate-sizing('.wmn', min-width, 0, 'px');
+.generate-su-sizing('.wmn', min-width); // Static sizing units
+.generate-sizing('.wmn', min-width, 25 50 75, 'percent');
+#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
+#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
+#stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; });
+
+// `max-width` properties
+.generate-su-sizing('.wmx', max-width); // Static sizing units
+.generate-sizing('.wmx', max-width, 25 50 75, 'percent');
+#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; });

package/lib/atomic/z-index.less

@@ -0,0 +1,12 @@
+.z-hide { z-index: var(--zi-hide) !important; }
+.z-base { z-index: var(--zi-base) !important; }
+.z-active { z-index: var(--zi-active) !important; }
+.z-selected { z-index: var(--zi-selected) !important; }
+.z-dropdown { z-index: var(--zi-dropdown) !important; }
+.z-popover { z-index: var(--zi-popovers) !important; }
+.z-tooltip { z-index: var(--zi-tooltips) !important; }
+.z-banner { z-index: var(--zi-banners) !important; }
+.z-nav { z-index: var(--zi-navigation) !important; }
+.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
+.z-modal { z-index: var(--zi-modals) !important; }
+.z-modal-bg { z-index: var(--zi-modals-background) !important; }

package/lib/base/body.less

@@ -20,20 +20,18 @@ html,
 body {
     color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
     line-height: var(--lh-base);
 }
 
 body {
+    background-color: var(--theme-background-color, var(--white));
     box-sizing: border-box;
+    font-size: var(--fs-body1);
     min-height: 100%;
-    background-color: var(--theme-background-color, var(--white));
 
     *,
     *:before,
     *:after {
         box-sizing: inherit;
     }
-
-    // TODO SHINE set max width here
 }

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/base/internal.less

@@ -164,12 +164,10 @@
     //  ---------------------------------------------------------------------------
 
 
-    #build-classes(@class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
-    }
-    #build-classes(responsive, @class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
+    #build-classes(@class-prefix, @rules, @values, @responsive: false) {
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, @responsive, @values);
     }
+
     #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
         @val: extract(@values, @start-index);
         & when (isnumber(@val)) {

package/lib/base/reset-normalize.less

@@ -69,7 +69,7 @@ main { /* 1 */
  */
 
 figure {
-  margin: 1em calc(var(--su-static32) + var(--su-static8)); // 1em 40px
+  margin: 1em calc(var(--su32) + var(--su8)); // 1em 40px
 }
 
 /**
@@ -303,7 +303,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: var(--su-static1) dotted ButtonText;
+  outline: var(--su1) dotted ButtonText;
 }
 
 /**
@@ -375,7 +375,7 @@ textarea {
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
-  outline-offset: calc(var(--su-static2) * -1); // -2px - /* 2 */
+  outline-offset: var(--sun2);
 }
 
 /**

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,41 +1,25 @@
 .s-activity-indicator {
     --_ai-bg: var(--pink-400);
     --_ai-fc: var(--white);
-    --_ai-min-size: var(--su-static16);
-    --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
-
-    .highcontrast-mode({
-        --_ai-bg: var(--theme-secondary-500);
-    });
+    --_ai-min-size: var(--su16);
+    --_ai-p: 0 var(--su3);
 
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--red-500);
-        });
     }
 
     &&__success {
         --_ai-bg: var(--green-400);
 
-        .highcontrast-mode({
-            --_ai-bg: var(--green-500);
-        });
     }
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
-            --_ai-fc: var(--white);
-        });
     }
 
     &&__sm {
-        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-min-size: calc(var(--su8) + var(--su2));
         --_ai-p: 0;
     }
 
@@ -45,7 +29,7 @@
     min-height: var(--_ai-min-size);
     padding: var(--_ai-p);
 
-    border-radius: 1000px;
+    border-radius: var(--br-pill);
     display: inline-flex;
     font-size: var(--fs-fine);
     font-weight: 600;

package/lib/components/anchor/anchor.less

@@ -1,9 +1,14 @@
 .s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-    // --_an-a-fc-visited
-    // --_an-a-fc-hover-visited
+    --_an-a-fc: var(--theme-link-color, var(--black-600));
+    --_an-a-fc-hover: var(--theme-link-color-hover, var(--blue-400));
+    --_an-a-fc-visited: var(--theme-link-color-visited, var(--black-400));
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
 
     // MODIFIERS
     &&__underlined {
@@ -14,30 +19,15 @@
     }
 
     // VARIANTS
-    &&__danger,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        --_an-a-fc-hover-visited: var(--_an-a-fc-hover);
-    }
-
     &&__danger {
         --_an-a-fc: var(--red-400);
         --_an-a-fc-hover: var(--red-500);
         --_an-a-fc-visited: var(--red-600);
     }
 
-    &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
-        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
-        --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
-        --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
-    }
-
     &&__grayscale {
         --_an-a-fc: var(--black-500);
         --_an-a-fc-hover: var(--black-600);
-        --_an-a-fc-visited: var(--black-400);
     }
 
     &&__inherit {
@@ -55,31 +45,30 @@
 
     &&__muted {
         --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-500);
-        --_an-a-fc-visited: var(--black-600);
     }
 
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            &:active,
-            &:hover {
-                color: var(--_an-a-fc-hover);
-            }
+    p& > a[href],
+    p > a[href] {
+        text-decoration: underline;
+    }
 
-            color: var(--_an-a-fc, inherit);
+    a:not(.s-link),
+    .s-btn.s-btn__link {
+        &:active,
+        &:hover {
+            color: var(--_an-a-fc-hover);
+            text-decoration: underline;
         }
 
-        a:not(.s-link):visited {
-            &:hover {
-                color: var(--_an-a-fc-hover-visited, inherit);
-            }
+        color: var(--_an-a-fc, inherit);
+        text-decoration: none;
+    }
 
-            color: var(--_an-a-fc-visited, inherit);
+    a:not(.s-link):visited {
+        &:hover {
+            color: var(--_an-a-fc-hover, inherit);
         }
+
+        color: var(--_an-a-fc-visited, inherit);
     }
 }