@stackoverflow/stacks 1.4.0 → 1.4.2

package/lib/css/atomic/gap.less

@@ -1,15 +1,15 @@
-#stacks-internals #responsify('.g0', { --_gap-x: 0; --_gap-y: 0; });
-#stacks-internals #responsify('.g1', { --_gap-x: var(--su1); --_gap-y: var(--su1); });
-#stacks-internals #responsify('.g2', { --_gap-x: var(--su2); --_gap-y: var(--su2); });
-#stacks-internals #responsify('.g4', { --_gap-x: var(--su4); --_gap-y: var(--su4); });
-#stacks-internals #responsify('.g6', { --_gap-x: var(--su6); --_gap-y: var(--su6); });
-#stacks-internals #responsify('.g8', { --_gap-x: var(--su8); --_gap-y: var(--su8); });
-#stacks-internals #responsify('.g12', { --_gap-x: var(--su12); --_gap-y: var(--su12); });
-#stacks-internals #responsify('.g16', { --_gap-x: var(--su16); --_gap-y: var(--su16); });
-#stacks-internals #responsify('.g24', { --_gap-x: var(--su24); --_gap-y: var(--su24); });
-#stacks-internals #responsify('.g32', { --_gap-x: var(--su32); --_gap-y: var(--su32); });
-#stacks-internals #responsify('.g48', { --_gap-x: var(--su48); --_gap-y: var(--su48); });
-#stacks-internals #responsify('.g64', { --_gap-x: var(--su64); --_gap-y: var(--su64); });
+#stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; });
+#stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); });
+#stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); });
+#stacks-internals #responsify('.g4', { --_gap-y: var(--su4); --_gap-x: var(--su4); });
+#stacks-internals #responsify('.g6', { --_gap-y: var(--su6); --_gap-x: var(--su6); });
+#stacks-internals #responsify('.g8', { --_gap-y: var(--su8); --_gap-x: var(--su8); });
+#stacks-internals #responsify('.g12', { --_gap-y: var(--su12); --_gap-x: var(--su12); });
+#stacks-internals #responsify('.g16', { --_gap-y: var(--su16); --_gap-x: var(--su16); });
+#stacks-internals #responsify('.g24', { --_gap-y: var(--su24); --_gap-x: var(--su24); });
+#stacks-internals #responsify('.g32', { --_gap-y: var(--su32); --_gap-x: var(--su32); });
+#stacks-internals #responsify('.g48', { --_gap-y: var(--su48); --_gap-x: var(--su48); });
+#stacks-internals #responsify('.g64', { --_gap-y: var(--su64); --_gap-x: var(--su64); });
 
 #stacks-internals #responsify('.gx0', { --_gap-x: 0; });
 #stacks-internals #responsify('.gx1', { --_gap-x: var(--su1); });
@@ -40,5 +40,5 @@
 .gx0, .gx1, .gx2, .gx4, .gx6, .gx8, .gx12, .gx16, .gx24, .gx32, .gx48, .gx64,
 .gy0, .gy1, .gy2, .gy4, .gy6, .gy8, .gy12, .gy16, .gy24, .gy32, .gy48, .gy64,
 .g0, .g1, .g2, .g4, .g6, .g8, .g12, .g16, .g24, .g32, .g48, .g64 {
-  gap: var(--_gap-x, 0) var(--_gap-y, 0);
+  gap: var(--_gap-y, 0) var(--_gap-x, 0);
 }

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

@@ -26,6 +26,12 @@
         --_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
@@ -51,14 +57,11 @@
     }
 
     // CHILD ELEMENTS
-    &--image {
+    & &--image {
         background-color: var(--_cn-image-bg);
     }
 
     // INTERACTION
-    .is-selected {
-        --_cn-bg: var(--orange-200);
-    }
     &:hover {
         --_cn-bg: var(--_black-050);
     }

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

@@ -3,6 +3,7 @@
     --_ai-bg: var(--theme-secondary-400);
     --_ai-fc: @white;
 
+    // CONTEXTUAL STYLES
     .highcontrast-mode({ --_ai-fc: var(--white); });
 
     // VARIANTS

package/lib/css/components/avatars.less

@@ -5,6 +5,7 @@
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
 
+    // CONTEXTUAL STYLES
     .highcontrast-mode({
         background-color: var(--black);
         box-shadow: 0 0 0 1px var(--black);
@@ -15,7 +16,7 @@
         }
     });
 
-    // VARIANTS
+    // MODIFIERS
     // Sizes
     &&__32,
     &&__48 {

package/lib/css/components/badges.less

@@ -10,6 +10,7 @@
     --_ba-py: 0;
     --_ba-wmn: 0;
 
+    // CONTEXTUAL STYLES
     .highcontrast-mode({
         // Badge counts
         &__gold,
@@ -193,6 +194,7 @@
         }
     }
 
+    // CHILD ELEMENTS
     & &--image {
         display: inline-flex;
         align-self: center;
@@ -200,6 +202,7 @@
         margin-left: calc((var(--su4) + var(--su1)) * -1);
     }
 
+    // INTERACTION
     a&:hover {
         text-decoration: none;
     }

package/lib/css/components/cards.less

@@ -1,9 +1,12 @@
 .s-card {
     --_ca-bc: var(--bc-medium);
 
+    // CONTEXTUAL STYLES
     a& {
         text-decoration: none !important;
     }
+
+    // VARIANTS
     &&__muted {
         --_ca-bc: var(--bc-light);
 
@@ -18,7 +21,7 @@
         margin-bottom: 0;
     }
 
-    border: 1px solid var(--_ca-bc);
+    border: var(--su-static1) solid var(--_ca-bc);
 
     background-color: var(--white);
     border-radius: var(--br-sm);

package/lib/css/components/empty-states.less

@@ -1,9 +1,5 @@
 .s-empty-state {
-    color: var(--fc-light);
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-
+    // CHILD ELEMENTS
     p {
         font-size: var(--fs-body1);
         margin-bottom: var(--su12);
@@ -12,4 +8,9 @@
             color: var(--fc-dark);
         }
     }
+
+    color: var(--fc-light);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
 }

package/lib/css/components/labels.less

@@ -18,7 +18,7 @@
         cursor: not-allowed;
     }
 
-    // VARIANTS
+    // MODIFIERS
     // Sizes
     &&__sm {
         --_la-fs: var(--fs-caption);

package/lib/css/components/menu.less

@@ -3,11 +3,13 @@
     --_me-label-btc: var(--bc-light);
     --_me-label-cursor: pointer;
 
+    // CONTEXTUAL STYLES
     .dark-mode({
         --_me-divider-bg: var(--bc-lightest);
         --_me-label-btc: var(--bc-lightest);
     });
 
+    // CHILD ELEMENTS
     & &--divider {
         background-color: var(--_me-divider-bg);
         height: var(--su-static1);

package/lib/css/components/navigation.less

@@ -63,7 +63,6 @@
         });
 
         // STATES
-        // Selected
         &.is-selected {
             --_na-item-bg: var(--theme-primary-color);
             --_na-item-fc: var(--white);
@@ -92,7 +91,7 @@
             padding-right: 2em;
         }
 
-        // Interaction states
+        // INTERACTION
         &:hover,
         &:active {
             background-color: var(--_na-item-bg-hover);

package/lib/css/components/page-titles.less

@@ -1,15 +1,3 @@
-//
-//  STACK OVERFLOW
-//  PAGE TITLES
-//
-//  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-page-title {
     --_pt-ai: flex-end;
     --_pt-fd: row;
@@ -46,7 +34,7 @@
         font-weight: normal;
         line-height: var(--lh-sm);
         margin: 0;
-        margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overrode, but 🤷‍♂️
+        margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️
     }
     .s-breadcrumbs {
         margin-bottom: var(--_pt-breadcrums-mb);

package/lib/css/components/pagination.less

@@ -3,11 +3,11 @@
         --_pa-item-bg: transparent;
         --_pa-item-bc: var(--bc-medium);
         --_pa-item-fc: var(--fc-medium);
-        // hover
         --_pa-item-bg-hover: var(--black-100);
         --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
 
+        // CONTEXTUAL STYLES
         .highcontrast-mode({ text-decoration: none; });
 
         // MODIFIERS

package/lib/css/components/prose.less

@@ -1,15 +1,3 @@
-//
-//  STACK OVERFLOW
-//  PROSE
-//
-//  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-prose {
     --s-prose-line-height: 1.5;
     --s-prose-spacing: 1.1em;

package/lib/css/components/tags.less

@@ -23,6 +23,23 @@
         text-decoration: none;
     });
 
+    // STATES
+    &.is-selected {
+        &,
+        a&,
+        a&:active,
+        a&:hover,
+        a&:focus {
+            background-color: var(--_ta-bg-selected);
+            border-color: var(--_ta-bc-selected);
+            color: var(--_ta-fc-selected);
+
+            .highcontrast-mode({
+                border-color: currentColor;
+            });
+        }
+    }
+
     // MODIFIERS
     // Sizes
     &&__xs {
@@ -47,7 +64,10 @@
     }
 
     // VARIANTS
+    // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
+    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored,
+    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
         --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
         --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
@@ -71,6 +91,7 @@
         }
         position: relative;
     }
+    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored {
         --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
     }
@@ -110,6 +131,7 @@
         --_ta-bg-selected: var(--black-200);
         --_ta-fc-selected: var(--black-900);
     }
+    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
         --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
     }
@@ -152,7 +174,6 @@
         max-width: calc(var(--su-static16) + var(--su-static2));
     }
 
-
     // INTERACTION
     a&:not(.is-selected) {
         &:hover,
@@ -167,22 +188,6 @@
             });
         }
     }
-    // Selected
-    &.is-selected {
-        &,
-        a&,
-        a&:active,
-        a&:hover,
-        a&:focus {
-            background-color: var(--_ta-bg-selected);
-            border-color: var(--_ta-bc-selected);
-            color: var(--_ta-fc-selected);
-
-            .highcontrast-mode({
-                border-color: currentColor;
-            });
-        }
-    }
 
     background-color: var(--_ta-bg);
     border: var(--su-static1) solid var(--_ta-bc);

package/lib/css/components/uploader.less

@@ -1,28 +1,20 @@
-//
-//  STACK OVERFLOW
-//  FILE UPLOAD -- 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/
-
 .s-uploader {
     --_up-bg: var(--black-025);
     --_up-bg-focus: var(--black-050);
     --_up-bg-bc: var(--black-150);
     --_up-focus-ring-color: var(--focus-ring);
-    // Static custom properties (not redefined but repeated enough to warrant a custom property)
     --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 
+    // CONTEXTUAL STYLES
     .highcontrast-mode({ --_up-bg-bc-hc: var(--black-400); });
 
-    // MODIFIERS
-    &.is-active {
-        --_up-bg: var(--black-050);
-        --_up-bg-bc: var(--black-200);
-    }
-    &.is-disabled {
-        opacity: var(--_o-disabled-static);
+    // STATES
+    &.has-error,
+    &.has-success,
+    &.has-warning {
+        .s-link {
+            color: var(--_up-link-fc);
+        }
     }
     &.has-error {
         --_up-bg: var(--red-050);
@@ -48,21 +40,28 @@
         --_up-focus-ring-color: var(--focus-ring-warning);
         --_up-link-fc: var(--yellow-900);
     }
-    &.has-error,
-    &.has-success,
-    &.has-warning {
-        .s-link {
-            color: var(--_up-link-fc);
-        }
+    &.is-active {
+        --_up-bg: var(--black-050);
+        --_up-bg-bc: var(--black-200);
+    }
+    &.is-disabled {
+        opacity: var(--_o-disabled-static);
     }
 
+
     //  CHILD ELEMENTS
-    // This is for safari shadow DOM
-    // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
-    input[type="file"]::file-selector-button {
-        cursor: pointer;
-    }
     & &--container {
+        &:before { // Add the dashed border as an SVG background mask
+            -webkit-mask-image: var(--_up-bg-b-image);
+            mask-image: var(--_up-bg-b-image);
+            background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
+            content: '';
+            border-radius: var(--br-lg);
+            display: block;
+            position: absolute;
+            inset: 0;
+        }
+
         align-items: center;
         background-color: var(--_up-bg);
         border-radius: var(--br-lg);
@@ -73,20 +72,13 @@
         padding: var(--su8) var(--su16);
         position: relative;
         text-align: center;
-
-        // Add the dashed border as an SVG background mask
-        &:before {
-            -webkit-mask-image: var(--_up-bg-b-image);
-            mask-image: var(--_up-bg-b-image);
-            background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
-            content: '';
-            border-radius: var(--br-lg);
-            display: block;
-            position: absolute;
-            inset: 0;
-        }
     }
     & &--input {
+        &:focus:focus-visible + .s-uploader--container {
+            background-color: var(--_up-bg-focus);
+            box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
+        }
+
         cursor: pointer;
         height: 100%;
         inset: 0;
@@ -94,26 +86,12 @@
         position: absolute;
         width: 100%;
         z-index: var(--zi-selected);
-
-        &:focus:focus-visible + .s-uploader--container {
-            background-color: var(--_up-bg-focus);
-            box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
-        }
     }
     & &--preview {
         max-width: 100%;
         pointer-events: none;
     }
     & &--preview-thumbnail {
-        background-color: var(--white);
-        border-radius: var(--br-sm);
-        box-shadow: var(--bs-md);
-        max-height: var(--su-static128);
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
         .highcontrast-mode({ border: 1px solid var(--black); });
 
         &:is(img) {
@@ -124,11 +102,17 @@
         &:not(img) {
             padding: var(--su16);
         }
+
+        background-color: var(--white);
+        border-radius: var(--br-sm);
+        box-shadow: var(--bs-md);
+        max-height: var(--su-static128);
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
     & &--previews {
-        max-width: 100%;
-        text-align: left;
-
         &.has-multiple {
             display: block;
             height: auto;
@@ -151,7 +135,6 @@
                     white-space: nowrap;
                 }
             }
-
             .s-uploader--preview-thumbnail {
                 color: transparent;
                 height: var(--su-static32);
@@ -168,6 +151,9 @@
                 }
             }
         }
+
+        max-width: 100%;
+        text-align: left;
     }
     & &--previews-heading {
         color: var(--black-900);
@@ -181,6 +167,11 @@
         top: var(--su8);
         z-index: var(--zi-active);
     }
+    // This is for safari shadow DOM
+    // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
+    input[type="file"]::file-selector-button {
+        cursor: pointer;
+    }
 
     position: relative;
 }

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.4.0",
+  "version": "1.4.2",
   "files": [
     "dist",
     "lib"
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
     "@highlightjs/cdn-assets": "^11.6.0",
-    "@stackoverflow/stacks-editor": "^0.8.1",
+    "@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",