@stackoverflow/stacks 0.71.0 → 0.74.0

package/lib/css/components/_stacks-user-cards.less

@@ -13,7 +13,8 @@
 .s-user-card {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-column-gap: @su8;
+    column-gap: @su8;
+    row-gap: @su4;
     align-items: center;
     line-height: 1;
     padding: @su8;
@@ -25,7 +26,7 @@
     //  $$  Highlighted
     //  ---------------------------------------------------------------------------
     &.s-user-card__highlighted {
-        background-color: var(--theme-secondary-025);
+        background-color: var(--theme-secondary-050);
         border-radius: @br-md;
 
         .s-user-card--type {
@@ -38,10 +39,6 @@
     &.s-user-card__full {
         align-items: start;
 
-        .s-user-card--info {
-            grid-gap: @su4;
-        }
-
         .s-user-card--link {
             font-size: @fs-body2;
         }
@@ -58,26 +55,12 @@
     &.s-user-card__small {
         display: flex;
         align-items: center;
-        grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
+        gap: @su4;
         padding: 0;
 
-        .s-user-card--time {
-            margin-right: @su6;
-            margin-bottom: 0;
-        }
-
-        .s-user-card--link {
-            margin-right: @su6;
-        }
-
-        .s-user-card--avatar {
-            margin-right: @su6;
-        }
-
         .s-user-card--info {
-            display: flex;
+            flex-direction: row;
             align-items: center;
-            grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
         }
     }
 
@@ -86,41 +69,35 @@
     &.s-user-card__minimal {
         display: flex;
         align-items: center;
-        grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
+        gap: @su4;
         padding: 0;
 
         .s-user-card--time {
-            margin-right: @su4;
-            margin-bottom: 0;
             white-space: nowrap;
         }
 
         .s-user-card--link {
-            margin-right: @su4;
             white-space: nowrap;
         }
 
-        .s-user-card--avatar {
-            margin-right: @su4;
-        }
-
         .s-user-card--rep {
-            padding: 0;
             color: var(--black-600);
         }
 
         .s-user-card--info {
-            display: flex;
+            flex-direction: row;
             align-items: center;
-            grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
         }
     }
 
     .s-user-card--type {
         grid-column: ~"1 / 3";
-        padding-top: @su4;
         font-size: @fs-caption;
         color: var(--theme-primary-400);
+
+        a {
+            color: inherit;
+        }
     }
 }
 
@@ -132,7 +109,6 @@
     grid-row: ~"1 / 2";
     color: var(--black-500);
     font-size: @fs-caption;
-    margin-bottom: @su4;
 }
 
 //  $   USER INFO CONTAINER
@@ -140,8 +116,9 @@
 //      vertical grid layout
 //  ---------------------------------------------------------------------------
 .s-user-card--info {
-    display: grid;
-    grid-gap: @su2;
+    display: flex;
+    flex-direction: column;
+    gap: @su4;
 }
 
 //  $   USER LINK
@@ -162,9 +139,9 @@
     .list-reset;
     display: flex;
     align-items: center;
+    gap: @su6;
 
     li {
-        margin-right: @su6;
         font-size: @fs-caption;
     }
 }
@@ -186,7 +163,6 @@
 //      Apply layout to a bunch of child tags
 //  ---------------------------------------------------------------------------
 .s-user-card--tags {
-    padding-top: (@su2 / 2); // Optically align these a bit, but we can't use margin because of `gs[x]` being applied
     min-width: 0; // Allow things to wrap
     align-items: center;
     flex-wrap: wrap;

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

@@ -1,3 +1,5 @@
+@import (reference) "./_stacks-mixins.less";
+
 //
 //  STACK OVERFLOW
 //  CONSTANTS -- COLORS
@@ -235,6 +237,40 @@
     // Button Outline
     --theme-button-outlined-border-color: var(--theme-secondary-300);
     --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
+
+    // Tags
+    --theme-tag-color: var(--theme-secondary-800);
+    --theme-tag-background-color: var(--theme-secondary-075);
+    --theme-tag-border-color: transparent;
+    --theme-tag-hover-color: var(--theme-secondary-900);
+    --theme-tag-hover-background-color: var(--theme-secondary-100);
+    --theme-tag-hover-border-color: transparent;
+
+    // Topbar
+    --theme-topbar-height: @su48;
+    --theme-topbar-background-color: var(--black-025);
+
+    // Topbar Search input
+    --theme-topbar-search-color: var(--black-700);
+    --theme-topbar-search-background: var(--white);
+    --theme-topbar-search-placeholder: var(--black-200);
+    --theme-topbar-search-border: var(--black-200);
+    --theme-topbar-search-border-focus: var(--blue-300);
+    --theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
+
+    // Topbar Search switcher
+    --theme-topbar-select-color: var(--black-700);
+    --theme-topbar-select-background: var(--black-075);
+
+    // Topbar items
+    --theme-topbar-item-color: var(--black-600);
+    --theme-topbar-item-color-hover: var(--black-800);
+    --theme-topbar-item-background-hover: var(--black-075);
+    --theme-topbar-item-color-current: var(--black);
+    --theme-topbar-item-border-current: var(--theme-primary-color);
+
+    // Topbar themed border accent
+    --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
 }
 
 //  --  Light mode
@@ -779,11 +815,11 @@
     --fc-light: var(--black-500);
 
     // Focus rings
-    --focus-ring: fade(@blue-600, 50%);
-    --focus-ring-success: fade(@green-600, 50%);
-    --focus-ring-warning: fade(@yellow-600, 50%);
-    --focus-ring-error: fade(@red-600, 50%);
-    --focus-ring-muted: fade(@black-800, 50%);
+    --focus-ring: fade(@blue-600, 90%);
+    --focus-ring-success: fade(@green-600, 90%);
+    --focus-ring-warning: fade(@yellow-600, 90%);
+    --focus-ring-error: fade(@red-600, 90%);
+    --focus-ring-muted: fade(@black-400, 95%);
 
     // Shadows
     --bs-sm: none;
@@ -845,10 +881,10 @@
     --orange-900: hsl(@orange-h, 100%, 91%);
 
     // Blue
-    --blue-050: hsl(@blue-h, 100%, 3%);
-    --blue-100: hsl(@blue-h, 100%, 6%);
-    --blue-200: hsl(@blue-h, 100%, 12%);
-    --blue-300: hsl(@blue-h, 100%, 18%);
+    --blue-050: hsl(@blue-h, 100%, 4%);
+    --blue-100: hsl(@blue-h, 100%, 11%);
+    --blue-200: hsl(@blue-h, 100%, 18%);
+    --blue-300: hsl(@blue-h, 100%, 25%);
     --blue-400: hsl(@blue-h, 100%, 75%);
     --blue-500: hsl(@blue-h, 100%, 80%);
     --blue-600: hsl(@blue-h, 100%, 85%);
@@ -929,11 +965,11 @@
     --bc-darker: var(--black-900);
 
     // Focus rings
-    --focus-ring: fade(@blue-600, 50%);
-    --focus-ring-success: fade(@green-600, 50%);
-    --focus-ring-warning: fade(@yellow-600, 50%);
-    --focus-ring-error: fade(@red-600, 50%);
-    --focus-ring-muted: fade(@black-800, 50%);
+    --focus-ring: fade(@blue-600, 90%);
+    --focus-ring-success: fade(@green-600, 90%);
+    --focus-ring-warning: fade(@yellow-600, 90%);
+    --focus-ring-error: fade(@red-600, 90%);
+    --focus-ring-muted: fade(@black-400, 95%);
 
     // Font colors
     --fc-dark: var(--black-900);

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

@@ -52,6 +52,7 @@
 //  ============================================================================
 //  $  SPACING UNITS (su-)
 //  ----------------------------------------------------------------------------
+@su1:                   1px;
 @su2:                   2px;
 @su4:                   4px;
 @su6:                   6px;
@@ -126,14 +127,12 @@
     // Hide focus styles if they're not needed, for example,
     // when an element receives focus via the mouse.
     &:focus:not(:focus-visible) {
-        color: inherit;
         outline: none;
         box-shadow: none;
     }
 
     // Show focus styles on keyboard focus.
     &:focus-visible {
-        color: inherit;
         outline: none;
         box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
     }

package/lib/css/exports/_stacks-mixins.less

@@ -60,6 +60,17 @@
     }
 }
 
+.highcontrast-dark-mode(@rules) {
+    body.theme-highcontrast.theme-system & {
+        @media (prefers-color-scheme: dark) {
+            @rules();
+        }
+    }
+    body.theme-highcontrast.theme-dark & {
+        @rules();
+    }
+}
+
 //  ===========================================================================
 //  --  APPEARANCE
 //      Use this to overwrite the default appearance properties

package/lib/css/stacks-dynamic.less

@@ -22,7 +22,6 @@
 @import "components/_stacks-buttons.less";
 @import "components/_stacks-links.less";
 @import "components/_stacks-link-previews.less";
-@import "components/_stacks-navigation.less";
 @import "components/_stacks-notices.less";
 @import "components/_stacks-tags.less";
 @import "components/_stacks-pagination.less";

package/lib/css/stacks-static.less

@@ -29,6 +29,7 @@
 @import "components/_stacks-inputs.less";
 @import "components/_stacks-menu.less";
 @import "components/_stacks-modals.less";
+@import "components/_stacks-navigation.less";
 @import "components/_stacks-page-titles.less";
 @import "components/_stacks-popovers.less";
 @import "components/_stacks-post-summary.less";
@@ -37,6 +38,7 @@
 @import "components/_stacks-spinner.less";
 @import "components/_stacks-tables.less";
 @import "components/_stacks-toggle-switches.less";
+@import "components/_stacks-topbar.less";
 @import "components/_stacks-uploader.less";
 @import "components/_stacks-user-cards.less";
 @import "components/_stacks-widget-static.less";

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "0.71.0",
+  "version": "0.74.0",
   "files": [
     "dist",
     "lib"
@@ -19,24 +19,24 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.9.2",
+    "@popperjs/core": "^2.11.2",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
-    "@highlightjs/cdn-assets": "^11.0.1",
+    "@highlightjs/cdn-assets": "^11.4.0",
     "@stackoverflow/stacks-editor": "^0.4.1",
-    "@stackoverflow/stacks-icons": "^2.22.0",
-    "backstopjs": "^5.3.0",
+    "@stackoverflow/stacks-icons": "^2.26.0",
+    "backstopjs": "^6.0.4",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^0.3.0",
     "eleventy-plugin-markdown-shortcode": "^1.1.0",
-    "eleventy-plugin-nesting-toc": "^1.2.0",
-    "grunt": "^1.3.0",
-    "grunt-cli": "^1.4.1",
+    "eleventy-plugin-nesting-toc": "^1.3.0",
+    "grunt": "^1.4.1",
+    "grunt-cli": "^1.4.3",
     "grunt-concurrent": "^3.0.0",
     "grunt-contrib-clean": "^2.0.0",
-    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-concat": "^2.0.0",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-cssmin": "^4.0.0",
     "grunt-contrib-less": "^3.0.0",
@@ -46,9 +46,12 @@
     "grunt-ts": "^6.0.0-beta.22",
     "jquery": "^3.6.0",
     "list.js": "^2.3.1",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "typescript": "^4.2.3"
+    "postcss-less": "^6.0.0",
+    "stylelint": "^14.3.0",
+    "stylelint-config-recommended-less": "^1.0.1",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-less": "^1.0.1",
+    "typescript": "^4.5.5"
   },
   "browserslist": [
     "last 2 versions",