@stackoverflow/stacks 1.4.2 → 1.6.0

package/lib/css/components/topbar.less

@@ -1,14 +1,3 @@
-//
-//  STACK OVERFLOW
-//  TOPBAR
-//
-//  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/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .topbar-notice-styles(@border: transparent, @background: transparent, @color: inherit) {
     border-color: @border;
     background-color: @background;
@@ -252,6 +241,15 @@
 //  ===========================================================================
 //  $   CONTENT & CTAS
 //  ---------------------------------------------------------------------------
+.s-topbar--navigation {
+    display: flex;
+    height: 100%;
+
+    overflow-x: auto; // Allow this content to scroll if it gets too long
+    @scrollbar-styles(); // Style the scrollbars
+    margin-left: auto; // Push this section as far to the right as possible
+}
+
 .s-topbar .s-topbar--content {
     display: flex;
     height: 100%;
@@ -261,6 +259,7 @@
         display: inline-flex;
     }
 
+    // TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
     overflow-x: auto; // Allow this content to scroll if it gets too long
     @scrollbar-styles(); // Style the scrollbars
     margin-left: auto; // Push this section as far to the right as possible

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

@@ -1,173 +1,120 @@
-//
-//  STACK OVERFLOW
-//  USER CARDS
-//
-//  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/
-//
-//  ============================================================================
-//  $  BASE
-//  ----------------------------------------------------------------------------
-
 .s-user-card {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: var(--su8);
-    row-gap: var(--su4);
-    align-items: center;
-    line-height: 1;
-    padding: var(--su8);
-
-    //  ===========================================================================
-    //  $   STYLE VARIATIONS
-    //      Modify the presentation of the user card
-    //  ===========================================================================
-    //  $$  Highlighted
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__highlighted {
-        background-color: var(--theme-secondary-050);
-        border-radius: var(--br-md);
-
-        .s-user-card--time {
-            color: var(--black-600);
-        }
-
-        .s-user-card--type {
-            color: var(--black-700);
-        }
+    --_uc-ai: center;
+    --_uc-bg: unset;
+    --_uc-bar: unset;
+    --_uc-d: grid;
+    --_uc-fc: unset;
+    --_uc-g: var(--su4) var(--su8);
+    --_uc-p: var(--su8);
+    --_uc-info-ai: unset;
+    --_uc-info-fd: column;
+    --_uc-link-fs: var(--fs-caption);
+    --_uc-link-ws: unset;
+    --_uc-rep-fc: unset;
+    --_uc-time-fc: var(--black-500);
+    --_uc-time-ws: unset;
+    --_uc-type-fc: var(--theme-primary-400);
+
+    // MODIFIERS
+    &&__deleted {
+        --_uc-fc: var(--black-500);
+    }
+    &&__highlighted {
+        --_uc-bg: var(--theme-secondary-050);
+        --_uc-bar: var(--br-md);
+        --_uc-time-fc: var(--black-600);
+        --_uc-type-fc: var(--black-700);
     }
 
-    //  $$  Full meta data
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__full {
-        align-items: flex-start;
+    // VARIANTS
+    &&__minimal,
+    &&__small {
+        --_uc-d: flex;
+        --_uc-g: var(--su4);
+        --_uc-p: 0;
+        --_uc-info-ai: center;
+        --_uc-info-fd: row;
 
-        .s-user-card--link {
-            font-size: var(--fs-body2);
-        }
+    }
+    &&__full {
+        --_uc-ai: flex-start;
+        --_uc-link-fs: var(--fs-body2);
+    }
+    &&__minimal {
+        --_uc-link-ws: nowrap;
+        --_uc-rep-fc: var(--black-600);
+        --_uc-time-ws: nowrap;
     }
 
-    //  $$  Deleted
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__deleted {
+    // CHILD ELEMENTS
+    & &--location,
+    & &--role {
+        font-size: var(--fs-caption);
         color: var(--black-500);
     }
+    & &--awards {
+        li {
+            font-size: var(--fs-caption);
+        }
 
-    //  $$  Small size
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__small {
-        display: flex;
+        .list-reset;
         align-items: center;
-        gap: var(--su4);
-        padding: 0;
-
-        .s-user-card--info {
-            flex-direction: row;
-            align-items: center;
-        }
+        display: flex;
+        gap: var(--su6);
     }
+    & &--info {
+        align-items: var(--_uc-info-ai);
+        flex-direction: var(--_uc-info-fd);
 
-    //  $$  A minimal presentation
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__minimal {
         display: flex;
-        align-items: center;
         gap: var(--su4);
-        padding: 0;
-
-        .s-user-card--time {
-            white-space: nowrap;
-        }
-
-        .s-user-card--link {
-            white-space: nowrap;
-        }
+    }
+    & &--link {
+        font-size: var(--_uc-link-fs);
+        white-space: var(--_uc-link-ws);
 
-        .s-user-card--rep {
-            color: var(--black-600);
-        }
+        align-items: center;
+        flex-wrap: wrap;
+        min-width: 0; // Allow things to wrap
+        overflow-wrap: break-word;
+    }
+    & &--rep {
+        color: var(--_uc-rep-fc);
 
-        .s-user-card--info {
-            flex-direction: row;
-            align-items: center;
-        }
+        font-weight: 700;
     }
+    & &--tags {
+        align-items: center;
+        min-width: 0; // Allow things to wrap
+        flex-wrap: wrap;
+    }
+    & &--time {
+        color: var(--_uc-time-fc);
+        white-space: var(--_uc-time-ws);
 
-    .s-user-card--type {
-        grid-column: ~"1 / 3";
         font-size: var(--fs-caption);
-        color: var(--theme-primary-400);
-
+        grid-column: ~"1 / 3";
+        grid-row: ~"1 / 2";
+    }
+    & &--type {
         a {
             color: inherit;
         }
-    }
-}
 
-//  $   USER CARD TIME
-//      Optional element used for displaying time since an action happened
-//  ---------------------------------------------------------------------------
-.s-user-card--time {
-    grid-column: ~"1 / 3";
-    grid-row: ~"1 / 2";
-    color: var(--black-500);
-    font-size: var(--fs-caption);
-}
+        color: var(--_uc-type-fc);
 
-//  $   USER INFO CONTAINER
-//      An optional container for extra meta info that applies a
-//      vertical grid layout
-//  ---------------------------------------------------------------------------
-.s-user-card--info {
-    display: flex;
-    flex-direction: column;
-    gap: var(--su4);
-}
-
-//  $   USER LINK
-//      Styles the link to the user's profile appropriately
-//  ---------------------------------------------------------------------------
-.s-user-card--link {
-    min-width: 0; // Allow things to wrap
-    font-size: var(--fs-caption);
-    align-items: center;
-    flex-wrap: wrap;
-    overflow-wrap: break-word;
-}
-
-//  $   AWARDS CONTAINER
-//      A container for reputation and various awards
-//  ---------------------------------------------------------------------------
-.s-user-card--awards {
-    .list-reset;
-    display: flex;
-    align-items: center;
-    gap: var(--su6);
-
-    li {
         font-size: var(--fs-caption);
+        grid-column: ~"1 / 3";
     }
-}
-
-.s-user-card--rep {
-    font-weight: 700;
-}
 
-//  $   USER META DATA
-//      Add the proper styling to various user data
-//  ---------------------------------------------------------------------------
-.s-user-card--location,
-.s-user-card--role {
-    font-size: var(--fs-caption);
-    color: var(--black-500);
-}
+    align-items: var(--_uc-ai);
+    background-color: var(--_uc-bg);
+    border-radius: var(--_uc-bar);
+    color: var(--_uc-fc);
+    display: var(--_uc-d);
+    gap: var(--_uc-g);
 
-//  $   TAGS CONTAINER
-//      Apply layout to a bunch of child tags
-//  ---------------------------------------------------------------------------
-.s-user-card--tags {
-    min-width: 0; // Allow things to wrap
-    align-items: center;
-    flex-wrap: wrap;
+    grid-template-columns: auto 1fr;
+    line-height: 1;
+    padding: var(--_uc-p);
 }

package/lib/css/stacks-dynamic.less

@@ -24,7 +24,6 @@
 @import "components/notices.less";
 @import "components/tags.less";
 @import "components/pagination.less";
-@import "components/widget-dynamic.less";
 
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

package/lib/css/stacks-static.less

@@ -37,13 +37,13 @@
 @import "components/post-summary.less";
 @import "components/progress-bars.less";
 @import "components/prose.less";
+@import "components/sidebar-widgets.less";
 @import "components/spinner.less";
 @import "components/tables.less";
 @import "components/toggle-switches.less";
 @import "components/topbar.less";
 @import "components/uploader.less";
 @import "components/user-cards.less";
-@import "components/widget-static.less";
 
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.4.2",
+  "version": "1.6.0",
   "files": [
     "dist",
     "lib"
@@ -38,16 +38,16 @@
     "@highlightjs/cdn-assets": "^11.6.0",
     "@stackoverflow/stacks-editor": "^0.8.2",
     "@stackoverflow/stacks-icons": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "backstopjs": "^6.1.3",
-    "concurrently": "^7.4.0",
-    "css-loader": "^6.7.1",
-    "cssnano": "^5.1.13",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "backstopjs": "^6.1.4",
+    "concurrently": "^7.5.0",
+    "css-loader": "^6.7.2",
+    "cssnano": "^5.1.14",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.25.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
     "jquery": "^3.6.1",
@@ -58,14 +58,14 @@
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
-    "stylelint": "^14.13.0",
+    "stylelint": "^14.15.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
     "webpack-merge": "^5.8.0"
   },
   "browserslist": [

package/lib/css/components/_styles-template.less

@@ -1,78 +0,0 @@
-// This is an example of the expected structure for component-specific styles
-// In some cases, deviations from this structure are warranted if we need to maintain a legacy structure
-.s-component-name {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    // --_{component-abbreviation}-{property-shorthand}: {value};
-    --_cn-bg: var(--blue-500);
-    --_cn-h: var(--su-static16);
-    --_cn-fd: row-reverse;
-    // VARIANT CUSTOM PROPERTIES
-    // --_{component-abbreviation}-{property-shorthand}-{variant-name}: {value};
-    --_cn-fc-filled: var(--green-500);
-    // CHILD COMPONENT CUSTOM PROPERTIES
-    // --_{component-abreviation}-{child-component-name}-{property-shorthand}: {value};
-    --_cn-image-bg: var(--red-500);
-
-    // CONTEXTUAL STYLES
-    // These may include themes/modes, responsive styles, or modifications based on parent containers
-    .highcontrast-mode({
-        --_cn-bg: var(--black-400);
-
-        .s-avatar--letter {
-            --_cn-image-bg: var(--white);
-        }
-    });
-    .s-special-parent & {
-        --_cn-bg: transparent;
-    }
-
-    // STATES
-    // These are generally classes prefixed with `.is-` or `.has-`
-    &.is-selected {
-        --_cn-bg: var(--orange-200);
-    }
-
-    // MODIFIERS
-    // Modifiers are considered to be classes that can be combined with other modifiers outside of their respective groupings without collisions
-    // Sizes
-    &&__xs {
-        --_cn-h: var(--su-static2);
-    }
-    &&__sm {
-        --_cn-h: var(--su-static12);
-    }
-    // Orientation
-    &&__vertical {
-        --_cn-fd: column;
-    }
-
-    // VARIANTS
-    // Variants are expected to be used exclusive of one another. In other words, you should only use one variant class at a time
-    &&__info {
-        --_cn-bg: var(--yellow-100);
-
-        &.s-component-name__filled {
-            --_cn-bg-filled: var(--yellow-800);
-        }
-    }
-
-    // CHILD ELEMENTS
-    & &--image {
-        background-color: var(--_cn-image-bg);
-    }
-
-    // INTERACTION
-    &:hover {
-        --_cn-bg: var(--_black-050);
-    }
-
-    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    background-color: var(--_cn-bg-filled, var(--_cn-bg));
-    flex-direction: var(--_cn-fd);
-    height: var(--_cn-h);
-
-    // STATIC COMPONENT STYLES
-    display: flex;
-    position: relative;
-    vertical-align: bottom;
-}

package/lib/css/components/widget-dynamic.less

@@ -1,33 +0,0 @@
-//
-//  STACK OVERFLOW
-//  SIDEBAR WIDGET -- DYNAMIC PARTS
-//
-//  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/
-//
-//  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 widget-static.less.
-
-.s-sidebarwidget--item {
-    &,
-    & > :first-child {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            &:before {
-                border-left-color: var(--theme-primary-color);
-            }
-        }
-    }
-}
-
-.s-sidebarwidget--subnav {
-    li {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            #stacks-internals #bullet-arrow(var(--theme-primary-color));
-        }
-    }
-}