@stackoverflow/stacks 1.2.0 → 1.3.0

package/lib/css/components/buttons.less

@@ -197,7 +197,11 @@
         border-color: var(--theme-button-filled-border-color);
         box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
 
-        .dark-mode({ box-shadow: none; });
+        .dark-mode({
+            &:not(:focus) {
+                box-shadow: none;
+            }
+        });
 
         &:hover,
         &:focus,
@@ -278,7 +282,11 @@
             border-color: transparent;
             box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-            .dark-mode({ box-shadow: none; });
+            .dark-mode({
+                &:not(:focus) {
+                    box-shadow: none;
+                }
+            });
 
             .highcontrast-mode({
                 background-color: var(--black-400);
@@ -380,7 +388,11 @@
             border-color: transparent;
             box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-            .dark-mode({ box-shadow: none; });
+            .dark-mode({
+                &:not(:focus) {
+                    box-shadow: none;
+                }
+            });
 
             .highcontrast-mode({
                 color: var(--white);
@@ -440,15 +452,19 @@
         box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
         .dark-mode({
-            box-shadow: none;
+            &:not(:focus) {
+                box-shadow: none;
+            }
 
             &:not(.is-selected) {
+                background-color: var(--theme-secondary-300);
                 color: var(--black);
             }
         });
         .highcontrast-mode({
             &:not(.is-selected) {
                 border-color: transparent;
+                background-color: var(--theme-secondary-400);
                 color: var(--white);
             }
         });
@@ -560,7 +576,7 @@
     .s-btn__unset:focus {
         padding: 0;
         border: none;
-        outline: none;
+        outline: initial;
         font: unset;
         border-radius: 0;
         color: unset;
@@ -575,7 +591,7 @@
         padding: 0;
         border: none;
         border-radius: 0;
-        outline: none;
+        outline: initial;
         font: inherit;
         background: none;
         box-shadow: none;
@@ -600,6 +616,14 @@
         }
     }
 
+    .s-btn__unset,
+    .s-btn__link {
+        &:focus,
+        &:focus-visible {
+            outline-style: auto;
+        }
+    }
+
     .s-btn__icon {
         //  -- BUTTONS WITH ICONS
         //  ------------------------------------------------------------------------

package/lib/css/components/inputs.less

@@ -377,10 +377,9 @@ fieldset {
         background-repeat: no-repeat;
         background-size: contain;
 
-        &:checked {
+        &:checked, &:indeterminate {
             border-color: var(--theme-secondary-400) !important;
             background-color: var(--theme-secondary-400);
-            background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
 
             .highcontrast-dark-mode({
                 border-color: var(--blue-700) !important;
@@ -392,6 +391,13 @@ fieldset {
             }
         }
 
+        &:checked {
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
+        }
+        &:indeterminate {
+            background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
+        }
+
         &:focus {
             border-color: var(--theme-secondary-300);
             box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -616,11 +622,7 @@ fieldset {
     }
 
     .s-input-icon {
-        color: var(--black-200);
-
-        .highcontrast-mode({
-            color: var(--black-400);
-        });
+        color: var(--black-400);
     }
 
     .s-label {
@@ -641,11 +643,7 @@ fieldset {
     &.s-input-icon__creditcard {
         right: auto;
         left: 0.7em;
-        color: var(--black-200);
-
-        .highcontrast-mode({
-            color: var(--black-400);
-        });
+        color: var(--black-400);
     }
 }
 

package/lib/css/components/post-summary.less

@@ -34,87 +34,6 @@
             width: 100%;
         }
     }
-
-    &.s-post-summary__legacy {
-        padding-left: 0; // Since stats have padding, we don't need it on the parent
-
-        #stacks-internals #screen-md({
-            padding-left: var(--su16);
-        });
-
-        .s-post-summary--stats {
-            width: auto;
-            flex-direction: row;
-            align-items: center;
-            gap: var(--su2);
-
-            .s-post-summary--stats-item {
-                min-width: var(--su64);
-                height: var(--su48);
-                flex-direction: column;
-                gap: 0;
-                font-size: var(--fs-caption);
-
-                &.s-post-summary--stats-item__emphasized {
-                    color: inherit;
-                }
-
-                &.has-accepted-answer .svg-icon {
-                    display: none;
-                }
-
-                .s-post-summary--stats-item-number {
-                    font-weight: normal;
-                    font-size: var(--fs-body3);
-                }
-
-                &.is-deleted,
-                &.is-published,
-                &.is-draft,
-                &.is-review,
-                &.is-closed,
-                &.is-archived,
-                &.is-pinned {
-                    display: none;
-                }
-            }
-
-            #stacks-internals #screen-md({
-                flex-direction: row;
-                align-items: center;
-                gap: var(--su8);
-
-                .s-post-summary--stats-item {
-                    min-width: auto;
-                    height: auto;
-                    flex-direction: row;
-                    gap: 3px; // HTML spacing
-
-                    .s-post-summary--stats-item-number {
-                        font-size: inherit;
-                    }
-
-                    &.s-post-summary--stats-item__emphasized {
-                        color: var(--fc-dark);
-                    }
-
-                    &.has-accepted-answer .svg-icon {
-                        display: block;
-                    }
-
-                    &.is-deleted,
-                    &.is-published,
-                    &.is-draft,
-                    &.is-review,
-                    &.is-closed,
-                    &.is-archived,
-                    &.is-pinned {
-                        display: block;
-                    }
-                }
-            });
-        }
-    }
 }
 
 //  [1] To override .s-btn class attributes
@@ -403,10 +322,9 @@
 
 .s-post-summary__ignored,
 .s-post-summary__deleted {
-    .s-post-summary--content > *:not(.s-post-summary--content-menu-button) {
+    .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta) {
         opacity: 0.6;
     }
-
     // TODO DEPRECATED remove `:not(.is-deleted)`
     .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
         opacity: 0.6;
@@ -430,7 +348,13 @@
         color: var(--black-500);
     }
 
-    .s-post-summary--meta {
+    .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
+        opacity: 0.6;
         filter: grayscale(100%);
     }
-}
+
+    .s-post-summary--meta-tags > a {
+        opacity: 0.6;
+        filter: grayscale(100%);
+    }
+}

package/lib/css/components/topbar.less

@@ -130,6 +130,9 @@
     }
 
     .s-navigation {
+        .s-navigation--item:focus-visible {
+            box-shadow: var(--theme-topbar-search-shadow-focus);
+        }
         .s-navigation--item:not(.is-selected) {
             color: var(--theme-topbar-item-color);
         }
@@ -153,7 +156,7 @@
     // Search input
     --theme-topbar-search-color: @black-700;
     --theme-topbar-search-background: @white;
-    --theme-topbar-search-placeholder: @black-200;
+    --theme-topbar-search-placeholder: @black-400;
     --theme-topbar-search-border: @black-200;
     --theme-topbar-search-border-focus: @blue-300;
     --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);

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

@@ -247,7 +247,7 @@
     // 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-placeholder: var(--black-400);
     --theme-topbar-search-border: var(--black-200);
     --theme-topbar-search-border-focus: var(--blue-300);
     --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -709,10 +709,10 @@
     --black-900: hsl(@black-h, @black-s, 0%);
 
     // Orange
-    --orange-050: hsl(@orange-h, 100%, 97.5%);
-    --orange-100: hsl(@orange-h, 100%, 94%);
-    --orange-200: hsl(@orange-h, 100%, 88%);
-    --orange-300: hsl(@orange-h, 100%, 82%);
+    --orange-050: hsl(@orange-h, 100%, 93%);
+    --orange-100: hsl(@orange-h, 100%, 90%);
+    --orange-200: hsl(@orange-h, 100%, 86%);
+    --orange-300: hsl(@orange-h, 100%, 81%);
     --orange-400: hsl(@orange-h, 100%, 34%);
     --orange-500: hsl(@orange-h, 100%, 29%);
     --orange-600: hsl(@orange-h, 100%, 24%);
@@ -721,10 +721,10 @@
     --orange-900: hsl(@orange-h, 100%, 8%);
 
     // Blue
-    --blue-050: hsl(@blue-h, 100%, 97.5%);
-    --blue-100: hsl(@blue-h, 100%, 95%);
-    --blue-200: hsl(@blue-h, 100%, 90%);
-    --blue-300: hsl(@blue-h, 100%, 85%);
+    --blue-050: hsl(@blue-h, 100%, 94%);
+    --blue-100: hsl(@blue-h, 100%, 92%);
+    --blue-200: hsl(@blue-h, 100%, 89%);
+    --blue-300: hsl(@blue-h, 100%, 86%);
     --blue-400: hsl(@blue-h, 100%, 25%);
     --blue-500: hsl(@blue-h, 100%, 20%);
     --blue-600: hsl(@blue-h, 100%, 15%);
@@ -733,10 +733,10 @@
     --blue-900: hsl(@blue-h, 100%, 5%);
 
     // Powder
-    --powder-050: hsl(@powder-h, 100%, 97.5%);
-    --powder-100: hsl(@powder-h, 85%, 96%);
-    --powder-200: hsl(@powder-h, 75%, 92%);
-    --powder-300: hsl(@powder-h, 70%, 88%);
+    --powder-050: hsl(@powder-h, 100%, 95%);
+    --powder-100: hsl(@powder-h, 85%, 93%);
+    --powder-200: hsl(@powder-h, 75%, 89%);
+    --powder-300: hsl(@powder-h, 70%, 86%);
     --powder-400: hsl(@powder-h, 55%, 28%);
     --powder-500: hsl(@powder-h, 60%, 24%);
     --powder-600: hsl(@powder-h, 70%, 20%);
@@ -745,11 +745,11 @@
     --powder-900: hsl(@powder-h, 75%, 8%);
 
     // Green
-    --green-025: hsl(@green-h, 100%, 97%);
-    --green-050: hsl(@green-h, 100%, 96%);
-    --green-100: hsl(@green-h, 100%, 94%);
-    --green-200: hsl(@green-h, 100%, 88%);
-    --green-300: hsl(@green-h, 100%, 82%);
+    --green-025: hsl(@green-h, 100%, 94%);
+    --green-050: hsl(@green-h, 100%, 91%);
+    --green-100: hsl(@green-h, 100%, 87%);
+    --green-200: hsl(@green-h, 100%, 83%);
+    --green-300: hsl(@green-h, 100%, 78%);
     --green-400: hsl(@green-h, 100%, 18%);
     --green-500: hsl(@green-h, 100%, 15%);
     --green-600: hsl(@green-h, 100%, 12%);
@@ -758,10 +758,10 @@
     --green-900: hsl(@green-h, 100%, 3%);
 
     // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 95%);
-    --yellow-100: hsl(@yellow-h, 100%, 92%);
-    --yellow-200: hsl(@yellow-h, 95%, 85%);
-    --yellow-300: hsl(@yellow-h, 95%, 78%);
+    --yellow-050: hsl(@yellow-h, 100%, 92%);
+    --yellow-100: hsl(@yellow-h, 100%, 88%);
+    --yellow-200: hsl(@yellow-h, 95%, 83%);
+    --yellow-300: hsl(@yellow-h, 95%, 75%);
     --yellow-400: hsl(@yellow-h, 100%, 28%);
     --yellow-500: hsl(@yellow-h, 100%, 26%);
     --yellow-600: hsl(@yellow-h, 100%, 23%);
@@ -770,10 +770,10 @@
     --yellow-900: hsl(@yellow-h, 100%, 7%);
 
     // Red
-    --red-050: hsl(@red-h, 100%, 97.5%);
-    --red-100: hsl(@red-h, 100%, 95%);
-    --red-200: hsl(@red-h, 100%, 90%);
-    --red-300: hsl(@red-h, 100%, 85%);
+    --red-050: hsl(@red-h, 100%, 94%);
+    --red-100: hsl(@red-h, 100%, 92%);
+    --red-200: hsl(@red-h, 100%, 89%);
+    --red-300: hsl(@red-h, 100%, 86%);
     --red-400: hsl(@red-h, 100%, 35%);
     --red-500: hsl(@red-h, 100%, 29%);
     --red-600: hsl(@red-h, 100%, 23%);
@@ -865,10 +865,10 @@
     --black-900: hsl(@black-h, @black-s, 100%);
 
     // Orange
-    --orange-050: hsl(@orange-h, 100%, 4%);
-    --orange-100: hsl(@orange-h, 100%, 8%);
-    --orange-200: hsl(@orange-h, 100%, 16%);
-    --orange-300: hsl(@orange-h, 100%, 24%);
+    --orange-050: hsl(@orange-h, 100%, 7%);
+    --orange-100: hsl(@orange-h, 100%, 9%);
+    --orange-200: hsl(@orange-h, 100%, 15%);
+    --orange-300: hsl(@orange-h, 100%, 22%);
     --orange-400: hsl(@orange-h, 100%, 64%);
     --orange-500: hsl(@orange-h, 100%, 71%);
     --orange-600: hsl(@orange-h, 100%, 77%);
@@ -877,10 +877,10 @@
     --orange-900: hsl(@orange-h, 100%, 91%);
 
     // Blue
-    --blue-050: hsl(@blue-h, 100%, 4%);
+    --blue-050: hsl(@blue-h, 100%, 7%);
     --blue-100: hsl(@blue-h, 100%, 11%);
-    --blue-200: hsl(@blue-h, 100%, 18%);
-    --blue-300: hsl(@blue-h, 100%, 25%);
+    --blue-200: hsl(@blue-h, 100%, 17%);
+    --blue-300: hsl(@blue-h, 100%, 24%);
     --blue-400: hsl(@blue-h, 100%, 75%);
     --blue-500: hsl(@blue-h, 100%, 80%);
     --blue-600: hsl(@blue-h, 100%, 85%);
@@ -889,10 +889,10 @@
     --blue-900: hsl(@blue-h, 100%, 95%);
 
     // Powder
-    --powder-050: hsl(@powder-h, 100%, 6%);
-    --powder-100: hsl(@powder-h, 90%, 8%);
+    --powder-050: hsl(@powder-h, 100%, 7%);
+    --powder-100: hsl(@powder-h, 95%, 10%);
     --powder-200: hsl(@powder-h, 80%, 14%);
-    --powder-300: hsl(@powder-h, 60%, 20%);
+    --powder-300: hsl(@powder-h, 76%, 19%);
     --powder-400: hsl(@powder-h, 55%, 72%);
     --powder-500: hsl(@powder-h, 60%, 76%);
     --powder-600: hsl(@powder-h, 70%, 80%);
@@ -901,11 +901,11 @@
     --powder-900: hsl(@powder-h, 75%, 92%);
 
     // Green
-    --green-025: hsl(@green-h, 100%, 3%);
-    --green-050: hsl(@green-h, 100%, 4%);
-    --green-100: hsl(@green-h, 100%, 6%);
-    --green-200: hsl(@green-h, 100%, 12%);
-    --green-300: hsl(@green-h, 100%, 18%);
+    --green-025: hsl(@green-h, 100%, 5%);
+    --green-050: hsl(@green-h, 100%, 6%);
+    --green-100: hsl(@green-h, 100%, 7%);
+    --green-200: hsl(@green-h, 100%, 11%);
+    --green-300: hsl(@green-h, 100%, 15%);
     --green-400: hsl(@green-h, 100%, 65%);
     --green-500: hsl(@green-h, 100%, 71%);
     --green-600: hsl(@green-h, 100%, 77%);
@@ -914,10 +914,10 @@
     --green-900: hsl(@green-h, 100%, 94%);
 
     // Yellow
-    --yellow-050: hsl(@yellow-h, 100%, 4%);
-    --yellow-100: hsl(@yellow-h, 100%, 8%);
-    --yellow-200: hsl(@yellow-h, 95%, 16%);
-    --yellow-300: hsl(@yellow-h, 95%, 24%);
+    --yellow-050: hsl(@yellow-h, 100%, 6%);
+    --yellow-100: hsl(@yellow-h, 100%, 9%);
+    --yellow-200: hsl(@yellow-h, 100%, 14%);
+    --yellow-300: hsl(@yellow-h, 100%, 20%);
     --yellow-400: hsl(@yellow-h, 100%, 55%);
     --yellow-500: hsl(@yellow-h, 100%, 63%);
     --yellow-600: hsl(@yellow-h, 100%, 71%);
@@ -926,10 +926,10 @@
     --yellow-900: hsl(@yellow-h, 100%, 95%);
 
     // Red
-    --red-050: hsl(@red-h, 100%, 4%);
-    --red-100: hsl(@red-h, 100%, 8%);
-    --red-200: hsl(@red-h, 100%, 16%);
-    --red-300: hsl(@red-h, 100%, 24%);
+    --red-050: hsl(@red-h, 100%, 9%);
+    --red-100: hsl(@red-h, 100%, 12%);
+    --red-200: hsl(@red-h, 100%, 17%);
+    --red-300: hsl(@red-h, 100%, 22%);
     --red-400: hsl(@red-h, 100%, 70%);
     --red-500: hsl(@red-h, 100%, 75%);
     --red-600: hsl(@red-h, 100%, 80%);

package/lib/ts/controllers/s-uploader.ts

@@ -12,8 +12,8 @@ export class UploaderController extends Stacks.StacksController {
     private previewsTarget!: HTMLElement;
     private uploaderTarget!: HTMLElement;
 
-    private boundDragEnter!: any;
-    private boundDragLeave!: any;
+    private boundDragEnter!: () => void;
+    private boundDragLeave!: () => void;
 
     private static readonly FILE_DISPLAY_LIMIT = 10;
     private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
@@ -50,7 +50,7 @@ export class UploaderController extends Stacks.StacksController {
                     const hasMultipleFiles = res.length > 1;
 
                     if (hasMultipleFiles) {
-                        let headingElement = document.createElement("div");
+                        const headingElement = document.createElement("div");
                         headingElement.classList.add("s-uploader--previews-heading");
                         headingElement.innerText = res.length < count ?
                             `Showing ${res.length} of ${count} files` : `${count} items`;
@@ -61,7 +61,9 @@ export class UploaderController extends Stacks.StacksController {
                     }
                     res.forEach((file) => this.addFilePreview(file));
                     this.handleUploaderActive(true);
-                });
+                })
+                // TODO consider rendering an error message
+                .catch(() => null);
     }
 
     /**
@@ -84,13 +86,25 @@ export class UploaderController extends Stacks.StacksController {
         const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
 
         if (shouldPreview) {
-            hideElements.map(el => el.classList.add("d-none"));
-            showElements.map(el => el.classList.remove("d-none"));
-            enableElements.map(el => el.removeAttribute("disabled"));
+            hideElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            enableElements.forEach(el => {
+                el.removeAttribute("disabled");
+            });
         } else {
-            hideElements.map(el => el.classList.remove("d-none"));
-            showElements.map(el => el.classList.add("d-none"));
-            enableElements.map(el => el.setAttribute("disabled", "true"))
+            hideElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            enableElements.forEach(el => {
+                el.setAttribute("disabled", "true");
+            });
             this.handleUploaderActive(false);
         }
     }
@@ -104,7 +118,7 @@ export class UploaderController extends Stacks.StacksController {
             return;
         }
 
-        let previewElement = document.createElement("div");
+        const previewElement = document.createElement("div");
         let thumbElement;
 
         if (file.type.match('image/*') && file.data) {
@@ -137,7 +151,7 @@ export class UploaderController extends Stacks.StacksController {
      * @returns an object containing a FilePreview object
      */
     private fileToDataURL(file: File): Promise<FilePreview> {
-        var reader = new FileReader();
+        const reader = new FileReader();
         const { name, size, type } = file;
 
         if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.2.0",
+  "version": "1.3.0",
   "files": [
     "dist",
     "lib"
@@ -35,35 +35,35 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
-    "@highlightjs/cdn-assets": "^11.5.1",
-    "@stackoverflow/stacks-editor": "^0.5.0",
-    "@stackoverflow/stacks-icons": "^2.27.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
+    "@highlightjs/cdn-assets": "^11.6.0",
+    "@stackoverflow/stacks-editor": "^0.6.1",
+    "@stackoverflow/stacks-icons": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "backstopjs": "^6.1.0",
-    "concurrently": "^7.2.1",
+    "concurrently": "^7.3.0",
     "css-loader": "^6.7.1",
-    "cssnano": "^5.1.11",
+    "cssnano": "^5.1.12",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.17.0",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
     "jquery": "^3.6.0",
     "less-loader": "^11.0.0",
     "list.js": "^2.3.1",
     "markdown-it": "^13.0.1",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.0.0",
-    "prettier": "^2.6.2",
+    "postcss-loader": "^7.0.1",
+    "prettier": "^2.7.1",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-standard": "^26.0.0",
     "terser-webpack-plugin": "^5.3.3",
-    "ts-loader": "^9.3.0",
-    "typescript": "^4.7.3",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"