@stackoverflow/stacks 3.0.0-beta.22 → 3.0.0-beta.24

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,10 +13,7 @@ p {
     margin-top: 0;
 }
 
-//  ============================================================================
-//  $   TEXT SIZES
-//  ----------------------------------------------------------------------------
-//  Declare font sizes
+// TEXT SIZES
 .fs-display4 {
     font-size: var(--fs-display4) !important;
     line-height: 1.18;
@@ -92,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; }
@@ -103,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; }
@@ -204,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; }
@@ -212,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;
 }
@@ -237,7 +165,7 @@ p {
     overflow-wrap: unset !important;
 }
 
-//  --  Hyphenation
+// Hyphenation
 .hyphens-none { hyphens: none !important; }
 .hyphens-auto {
     -ms-hyphens: auto !important;
@@ -246,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 */
@@ -257,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/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/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;
 }
 
 /**

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

@@ -1,8 +1,8 @@
 .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));
+    --_ai-min-size: var(--su16);
+    --_ai-p: 0 var(--su3);
 
     // VARIANTS
     &&__danger {
@@ -19,7 +19,7 @@
     }
 
     &&__sm {
-        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-min-size: calc(var(--su8) + var(--su2));
         --_ai-p: 0;
     }
 

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);
     }
 }

package/lib/components/avatar/avatar.less

@@ -1,7 +1,7 @@
 .s-avatar {
-    --_av-size: var(--su-static16);
+    --_av-size: var(--su16);
     --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-fs-letter: calc(var(--su12) - var(--su1));
     --_av-scale-badge: 1;
 
     // CONTEXTUAL STYLES
@@ -11,7 +11,7 @@
         }
 
         background-color: var(--black);
-        box-shadow: 0 0 0 var(--su-static1) var(--black);
+        box-shadow: 0 0 0 var(--su1) var(--black);
         color: var(--white);
     });
 
@@ -23,37 +23,37 @@
     }
 
     &&__24 {
-        --_av-size: var(--su-static24);
-        --_av-fs-letter: var(--su-static16);
+        --_av-size: var(--su24);
+        --_av-fs-letter: var(--su16);
         --_av-scale-badge: 1.1;
     }
 
     &&__32 {
-        --_av-size: var(--su-static32);
-        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-size: var(--su32);
+        --_av-fs-letter: calc(var(--su24) - var(--su2));
         --_av-scale-badge: 1.3;
     }
 
     &&__48 {
-        --_av-size: var(--su-static48);
-        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-size: var(--su48);
+        --_av-fs-letter: calc(var(--su32) + var(--su2));
         --_av-scale-badge: 1.6;
     }
 
     &&__64 {
-        --_av-size: var(--su-static64);
-        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-size: var(--su64);
+        --_av-fs-letter: calc(var(--su48) - var(--su4));
         --_av-scale-badge: 2.4;
     }
 
     &&__96 {
-        --_av-size: var(--su-static96);
-        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+        --_av-size: var(--su96);
+        --_av-fs-letter: calc(var(--su64) + var(--su2));
     }
 
     &&__128 {
-        --_av-size: var(--su-static128);
-        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+        --_av-size: var(--su128);
+        --_av-fs-letter: calc(var(--su96) - var(--su8));
     }
 
     // CHILD ELEMENTS
@@ -87,7 +87,7 @@
     }
 
     & &--indicator {
-        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        box-shadow: 0 0 0 var(--su2) var(--white);
         bottom: 100%;
         left: 100%;
         position: absolute;
@@ -102,5 +102,6 @@
     background-size: 100%;
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
+    text-decoration: none;
     vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 }

package/lib/components/badge/badge.less

@@ -17,7 +17,7 @@
 
     // SIZES
     &&__sm {
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+        --_ba-wmn: calc(var(--su16) + var(--su2));
         --_ba-as: flex-start;
         --_ba-fs: var(--fs-fine); //12px
         --_ba-px: var(--su4);
@@ -133,9 +133,19 @@
         --_ba-sq-bg: var(--purple-200);
         --_ba-bc: var(--purple-400);
         --_ba-gap: var(--su2); // 2px gap between icon and text
-        --_ba-before-h: calc(var(--su12) + var(--su2)); // 14px
-        --_ba-before-w: calc(var(--su12) + var(--su2)); // 14px
-        --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='14' height='14' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5m1 10.06H7V10.6h2zM8.14 4c1.78 0 2.77.96 2.77 2.5 0 1.79-2.1 2.2-2.1 3.25h-1.6c0-2 2-2.08 2-3.26 0-.54-.27-.96-1.02-.96-.7 0-1.03.46-1.1 1.23H5.4A2.75 2.75 0 0 1 8.13 4' fill='%23fff'/%3E%3C/svg%3E");
+        --_ba-before-h: calc(var(--su12) + var(--su4)); // 16px
+        --_ba-before-w: calc(var(--su12) + var(--su4)); // 16px
+        --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 7h7.28l-5.89 4.29.68 2.08-2.07-1.5-.04-.12-.33-1.04.88-.64 2.16-1.56h-3.76l-.34-1.04L10 4.94l-.82 2.53-.34 1.04H5.08l2.16 1.56.88.64-.33 1.04-.83 2.54 2.16-1.57.87-.64 5.12 3.72.78 2.41L10 13.93l-5.9 4.28 2.26-6.92L.46 7h7.29L10 .08z' /%3E%3C/svg%3E");
+
+        &.s-badge__sm {
+            --_ba-before-h: calc(var(--su12) + var(--su2)); // 14px
+            --_ba-before-w: calc(var(--su12) + var(--su2)); // 14px
+        }
+
+        &.s-badge__lg {
+            --_ba-before-h: calc(var(--su12) + var(--su6)); // 18px
+            --_ba-before-w: calc(var(--su12) + var(--su6)); // 18px
+        }
 
         &:before {
             height: var(--_ba-before-h);

package/lib/components/banner/banner.less

@@ -3,7 +3,7 @@
 // This would reduce the amount of CSS we ship to the client and simplify our codebase
 .s-banner {
     --_no-ty-offset: 0;
-    --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    --_no-ty: var(--theme-topbar-height, calc(var(--su48) + var(--su8)));
     .construct-notice-component(s-banner);
     
     &--icon {