@stackoverflow/stacks 2.3.3 → 2.4.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/card/card.visual.test.ts

@@ -17,7 +17,7 @@ const baseChild = `
         This is a description of the card’s content.
     </p>
     <div class="d-flex gx4">
-        <button class="flex--item s-btn s-btn__primary s-btn__sm">
+        <button class="flex--item s-btn s-btn__filled s-btn__sm">
             Call to action
         </button>
         <button class="flex--item s-btn s-btn__sm">Cancel</button>

package/lib/components/modal/modal.test.ts

@@ -39,7 +39,7 @@ const createModal = ({
                 </p>
 
                 <div class="d-flex gx8 s-modal--footer">
-                    <button class="flex--item s-btn s-btn__primary" type="button">Save changes</button>
+                    <button class="flex--item s-btn s-btn__filled" type="button">Save changes</button>
                     <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
                 </div>
 

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/components/topbar/topbar.visual.test.ts

@@ -122,6 +122,7 @@ const topbarChildren = ({
     unsetItem?: boolean;
 }) => {
     return `
+        <a href="#content" class="s-topbar--skip-link">Skip to main content</a>
         <div class="s-topbar--container">
             ${hamburger ? (hamburger === "unselected" ? children.hamburger.unselected : children.hamburger.selected) : ""}
             ${children.logo}

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,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.3.3",
+    "version": "2.4.0",
     "files": [
         "dist",
         "lib"
@@ -54,8 +54,8 @@
         "@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.6.0",
+        "@typescript-eslint/parser": "^7.6.0",
         "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.1",
@@ -66,7 +66,7 @@
         "concurrently": "^8.2.2",
         "css-loader": "^6.10.0",
         "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",
@@ -87,8 +87,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.0",
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"