@stackoverflow/stacks 2.3.3 → 2.5.0

package/lib/components/button/button.less

@@ -316,24 +316,6 @@
         });
     }
 
-    // DEPRECATED - THE PRIMARY BUTTON STYLE IS TO BE REMOVED WITH V1 COLORS
-    &&__primary {
-        --_bu-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
-        --_bu-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
-        --_bu-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
-        --_bu-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
-        --_bu-fc: var(--theme-button-primary-color, var(--white));
-        --_bu-fc-active: var(--theme-button-primary-hover-color, var(--white));
-        --_bu-fc-hover: var(--theme-button-primary-hover-color, var(--white));
-        --_bu-fc-selected: var(--theme-button-primary-selected-color, var(--white));
-        --_bu-number-fc: var(--theme-button-primary-number-color, var(--theme-secondary-600));
-        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
-
-        .highcontrast-mode({
-            --_bu-bc: transparent;
-        });
-    }
-
     // Social
     &&__facebook,
     &&__github {

package/lib/components/tag/tag.less

@@ -1,16 +1,12 @@
 .s-tag {
-    // Border color (bg color used as fallback
+    // Base
     --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
+    --_ta-bg: var(--theme-tag-background-color, var(--black-150));
+    --_ta-fc: var(--theme-tag-color, var(--black-500));
+    // Hover
     --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
-    --_ta-bc-selected: var(--theme-tag-selected-border-color, var(--_ta-bg-selected));
-    // Background color
-    --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
-    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
-    --_ta-bg-selected: var(--theme-tag-selected-background-color, var(--theme-secondary-300));
-    // Color
-    --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
-    --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
-    --_ta-fc-selected: var(--theme-tag-selected-color, var(--theme-secondary-600));
+    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
+    --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
     // Other
     --_ta-br: var(--br-sm);
     --_ta-fs: var(--fs-caption);
@@ -22,27 +18,11 @@
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        --_ta-bc: currentColor;
-        --_ta-bg-selected: var(--theme-secondary-400);
-
-        text-decoration: none;
-    });
-
-    // STATES
-    &.is-selected {
-        &,
-        a&,
-        a&:active,
-        a&:hover {
-            .highcontrast-mode({
-                --_ta-fc-selected: var(--white);
-            });
-
-            background-color: var(--_ta-bg-selected);
-            border-color: var(--_ta-bc-selected);
-            color: var(--_ta-fc-selected);
+        &:not(&__moderator):not(&__required) {
+            --_ta-bc: var(--theme-tag-border-color, var(--black-300));
+            --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
         }
-    }
+    });
 
     // MODIFIERS
     // Sizes
@@ -102,49 +82,21 @@
         --_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");
     }
 
-    // moderator overrides other muted and required, required overrides muted
+    // moderator overrides other required
     &&__moderator {
-        .highcontrast-mode({
-            --_ta-bg-selected: var(--orange-500);
-        });
-
         --_ta-bc: var(--orange-300);
         --_ta-bg: var(--orange-100);
-        --_ta-fc: var(--orange-600);
+        --_ta-fc: var(--orange-500);
         --_ta-bc-hover: var(--orange-300);
         --_ta-bg-hover: var(--orange-200);
         --_ta-fc-hover: var(--orange-600);
-        --_ta-bc-selected: var(--orange-400);
-        --_ta-bg-selected: var(--orange-300);
-        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
-    }
-
-    &&__muted:not(&__moderator):not(&__required) {
-        --_ta-bg: var(--black-150);
-        --_ta-fc: var(--black-400);
-        --_ta-bg-hover: var(--black-200);
-        --_ta-fc-hover: var(--black-500);
-        --_ta-bg-selected: var(--black-225);
-        --_ta-fc-selected: var(--black-600);
-
-        .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        // TODO *eventually* remove the custom theme overrides once we can reconcile Meta theming needs
-        // Border color
-        --_ta-bc: var(--theme-tag-required-border-color, var(--_ta-bg));
-        --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--_ta-bg-hover));
-        --_ta-bc-selected: var(--theme-tag-required-selected-border-color, var(--_ta-bg-selected));
-        // Background color
-        --_ta-bg: var(--theme-tag-required-background-color, var(--theme-secondary-500));
-        --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-secondary-400));
-        --_ta-bg-selected: var(--theme-tag-required-selected-background-color, var(--theme-secondary-600));
-        // Color
-        --_ta-fc: var(--theme-tag-required-color, var(--white));
-        --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--white));
-        --_ta-fc-selected: var(--theme-tag-required-selected-color, var(--white));
+        --_ta-bc: var(--black-400);
+        --_ta-bc-hover: var(--black-600);
     }
+
     &__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");
@@ -197,13 +149,9 @@
     }
 
     // INTERACTION
-    a&:not(.is-selected) {
+    a& {
         &:hover,
         &:active {
-            .highcontrast-mode({
-                border-color: currentColor;
-            });
-
             background-color: var(--_ta-bg-hover);
             border-color: var(--_ta-bc-hover);
             color: var(--_ta-fc-hover);

package/lib/components/topbar/topbar.less

@@ -1,4 +1,6 @@
 .s-topbar {
+    --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
+    --_tb-h: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
     // CHILD COMPONENT CUSTOM PROPERTIES
     // Item
     --_tb-item-bg: unset;
@@ -109,6 +111,21 @@
     }
 
     // CHILD ELEMENTS
+    &:has(> &--skip-link:focus) {
+        .s-topbar {
+            &--container {
+                height: var(--_tb-h);
+            }
+            &--skip-link {
+                border-bottom: var(--_tb-bt);
+            }
+        }
+
+        border-top: none;
+        display: block;
+        height: auto;
+    }
+
     & a&--logo {
         &:focus-visible {
             .focus-styles(true);
@@ -401,6 +418,20 @@
         padding: var(--_tb-searchbar-p);
     }
 
+    & &--skip-link {
+        &:not(:focus) {
+            &:extend(.v-visible-sr);
+        }
+
+        background-color: var(--theme-secondary-100);
+        border-bottom: var(--_tb-bt);
+        display: block;
+        outline: none;
+        padding: var(--su12);
+        text-align: center;
+    }
+
+
     .s-navigation {
         .s-navigation--item {
             &:not(.is-selected) {
@@ -427,13 +458,12 @@
         }
     }
 
-    // STATIC COMPONENT STYLES
     align-items: center;
     background-color: var(--theme-topbar-background-color, var(--white));
     border-bottom: var(--theme-topbar-bottom-border, var(--su-static1) solid var(--black-225));
-    border-top: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
+    border-top: var(--_tb-bt);
     display: flex;
-    height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    height: var(--_tb-h);
     min-width: auto;
     position: relative;
     width: 100%;

package/lib/exports/color-mixins.less

@@ -177,8 +177,6 @@
 // THEMING -- PUBLIC API
 /**
  * Creates theme h/s/l and r/g/b variables based on the given color for a specified theme.
- * Replaces .generate-calculated-themed-variables() (referenced in Core)
- * Maintains API parity with legacy .generate-calculated-themed-variables()
  *
  * Usage example:
  * .create-custom-theme-hsl-variables("#ff1100", secondary, dark);

package/lib/exports/exports.less

@@ -11,6 +11,5 @@
 //  ============================================================================
 @import "constants-type.less";            // Type styles, sizes, and line-heights
 @import "constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
-@import "v1/constants-colors.less";       // Colors v1 (deprecated)
 @import "color.less";                    // Colors v2
 @import "mixins.less";

package/lib/stacks-static.less

@@ -56,11 +56,6 @@
 // LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
-//  --  ATOMIC CLASSES (v1 colors)
-@import "atomic/v1/border.less"; // Deprecated
-@import "atomic/v1/color.less"; // Deprecated
-@import "atomic/v1/typography.less"; // Deprecated
-
 //  --  ATOMIC CLASSES
 @import "atomic/border.less";
 @import "atomic/color.less";

package/package.json

@@ -5,10 +5,11 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.3.3",
+    "version": "2.5.0",
     "files": [
         "dist",
-        "lib"
+        "lib",
+        "!lib/**/*.test.*"
     ],
     "main": "./dist/js/stacks.js",
     "types": "./dist/index.d.ts",
@@ -47,15 +48,15 @@
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.10.5",
+        "@stackoverflow/stacks-editor": "^0.10.6",
         "@stackoverflow/stacks-icons": "^6.0.2",
-        "@testing-library/dom": "^9.3.4",
+        "@testing-library/dom": "^10.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.6",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^7.4.0",
-        "@typescript-eslint/parser": "^7.4.0",
+        "@typescript-eslint/eslint-plugin": "^7.7.1",
+        "@typescript-eslint/parser": "^7.7.1",
         "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.1",
@@ -64,9 +65,9 @@
         "apca-check": "^0.1.0",
         "colorjs.io": "^0.5.0",
         "concurrently": "^8.2.2",
-        "css-loader": "^6.10.0",
+        "css-loader": "^7.1.1",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^6.1.0",
+        "cssnano": "^6.1.2",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
@@ -77,7 +78,7 @@
         "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.1.0",
-        "mini-css-extract-plugin": "^2.8.1",
+        "mini-css-extract-plugin": "^2.9.0",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
@@ -87,8 +88,8 @@
         "stylelint-config-standard": "^36.0.0",
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.4.3",
-        "vitest": "^1.4.0",
+        "typescript": "^5.4.5",
+        "vitest": "^1.5.2",
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"