vanilla-framework 4.14.0 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -31,7 +31,7 @@
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
     "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
-    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
+    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
@@ -57,23 +57,24 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.7",
+    "@percy/cli": "1.29.0",
     "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.19",
-    "cypress": "13.10.0",
+    "cypress": "13.13.2",
     "jest": "29.7.0",
+    "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.38",
+    "postcss": "8.4.40",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.3.0",
-    "sass": "1.77.4",
-    "stylelint": "16.6.1",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "prettier": "3.3.3",
+    "sass": "1.77.8",
+    "stylelint": "16.8.1",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-prettier": "5.0.0",
+    "stylelint-prettier": "5.0.2",
     "svgo": "3.3.2",
-    "yaml": "2.4.3"
+    "yaml": "2.5.0"
   }
 }

package/scss/_base_forms.scss

@@ -163,11 +163,6 @@
     &::-webkit-search-results-decoration {
       display: none;
     }
-
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: searchfield-cancel-button; // stylelint-disable-line property-no-vendor-prefix
-      cursor: pointer;
-    }
   }
 
   input[list] {

package/scss/_base_icon-definitions.scss

@@ -17,10 +17,35 @@
   background-image: vf-icon-chevron-url($color);
 }
 
+// Default chevron is the same as down chevron - points down, as in its usage
+// in accordions/dropdowns
 @mixin vf-icon-chevron-themed {
   @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-chevron-up-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(180deg);
+}
+
+@mixin vf-icon-chevron-right-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(-90deg);
+}
+
+@mixin vf-icon-chevron-down-themed {
+  @include vf-icon-chevron-themed;
+}
+
+@mixin vf-icon-chevron-left-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(90deg);
+}
+
+@mixin vf-icon-chevron-muted {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--text-muted), $dark-value: vf-icon-chevron-url($colors--dark-theme--text-muted));
+}
+
 // anchor
 @function vf-icon-anchor-url($color) {
   @return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a2.5 2.5 0 01.75 4.885v1.068h2.27v1.5H8.75v5.022c2.438-.161 4.172-1.077 4.172-1.669h1.5C14.422 13.57 11.547 15 8 15c-3.547 0-6.422-1.43-6.422-3.194h1.5c0 .592 1.734 1.508 4.172 1.67V8.452H4.904v-1.5H7.25V5.886A2.501 2.501 0 018 1zm0 1.5a1 1 0 100 2 1 1 0 000-2z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -269,6 +294,10 @@
   @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--icon), $dark-value: vf-icon-search-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-search-muted {
+  @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--text-muted), $dark-value: vf-icon-search-url($colors--dark-theme--text-muted));
+}
+
 // success
 @function vf-icon-success-url($color: $color-positive, $color-symbol: $color-x-light) {
   @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");

package/scss/_base_placeholders.scss

@@ -43,7 +43,7 @@
   }
 
   %vf-card-padding {
-    overflow: auto;
+    overflow: auto; // prevent overflow of child margins
     padding: $spv--large;
   }
 
@@ -52,8 +52,6 @@
     @extend %vf-card-padding;
 
     margin-bottom: $spv--x-large;
-    overflow: auto; // prevent overflow of child margins
-    padding: $spv--large;
   }
 
   //accordion, table

package/scss/_layouts_application-panels.scss

@@ -1,14 +1,9 @@
 @mixin vf-l-application-panels {
   .p-panel {
-    background: $colors--light-theme--background-default;
-    color: $colors--light-theme--text-default;
+    background: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     max-width: 100%;
     min-height: 100%; // make sure it fills whole container even when has little content
-
-    &.is-dark {
-      background: $colors--dark-theme--background-default;
-      color: $colors--dark-theme--text-default;
-    }
   }
 
   .p-panel__header {
@@ -18,14 +13,10 @@
   }
 
   .p-panel__header.is-sticky {
-    background: $colors--light-theme--background-default;
+    background: $colors--theme--background-default;
     position: sticky;
     top: 0;
     z-index: 5;
-
-    .p-panel.is-dark & {
-      background: $colors--dark-theme--background-default;
-    }
   }
 
   .p-panel__content {

package/scss/_layouts_application.scss

@@ -229,7 +229,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-application .l-status {
-    border-top: 1px solid $colors--light-theme--border-low-contrast;
+    border-top: 1px solid $colors--theme--border-default;
     grid-area: status;
     z-index: 102;
   }
@@ -265,7 +265,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 
     @media (min-width: $application-layout--breakpoint-side-nav-collapsed) {
       &.is-pinned {
-        border-left: 1px solid $colors--light-theme--border-low-contrast;
+        border-left: 1px solid $colors--theme--border-default;
         box-shadow: none;
         grid-area: aside;
         justify-self: auto;

package/scss/_patterns_article-pagination.scss

@@ -3,7 +3,6 @@
 @mixin vf-p-article-pagination {
   %chevron-icon {
     @extend %icon;
-    @include vf-icon-chevron-themed;
 
     content: '';
     position: absolute;
@@ -73,9 +72,9 @@
 
     &::before {
       @extend %chevron-icon;
+      @include vf-icon-chevron-left-themed;
 
       left: $sp-small;
-      transform: rotate(90deg);
     }
   }
 
@@ -95,9 +94,9 @@
 
     &::after {
       @extend %chevron-icon;
+      @include vf-icon-chevron-right-themed;
 
       right: $sp-small;
-      transform: rotate(-90deg);
     }
   }
 }

package/scss/_patterns_buttons.scss

@@ -80,7 +80,7 @@
       $button-disabled-border-color: $colors--theme--button-positive-default,
       $button-text-color: $colors--theme--button-positive-text
     );
-    @include vf-focus($color-focus-positive);
+    @include vf-focus($colors--theme--positive-focus);
   }
 }
 

package/scss/_patterns_cta.scss

@@ -0,0 +1,20 @@
+/*
+  @classreference
+  cta-block:
+    CTA Block:
+      .p-cta-block:
+        Main element of the CTA block.
+*/
+
+@import 'settings';
+
+@mixin vf-p-cta-block {
+  .p-cta-block {
+    align-items: baseline;
+    border-top: 1px solid $colors--theme--border-low-contrast;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--small;
+  }
+}

package/scss/_patterns_grid.scss

@@ -39,7 +39,7 @@
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
   .grid-demo .col,
   .grid-demo [class*='#{$grid-column-prefix}'] {
-    background: transparentize($color-negative, 0.9);
+    background: $colors--theme--background-negative-default;
     margin-bottom: $spv--small;
   }
 
@@ -167,11 +167,12 @@
 
   // variants
 
+  // deprecated, will be removed in v5
   .row.is-bordered {
     position: relative;
 
     &::before {
-      background: $color-mid-light;
+      background: $colors--theme--border-low-contrast;
       content: '';
       height: 1px;
       left: map-get($grid-margin-widths, small);
@@ -319,6 +320,77 @@
     }
   }
 
+  // 75/25 split on medium and large screens
+  .row--75-25 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-medium {
+    @extend %vf-row;
+
+    > .col {
+      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-large {
+    @extend %vf-row;
+
+    > .col {
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
   .row--25-25-50 {
     @extend %vf-row;
 

package/scss/_patterns_icons.scss

@@ -130,21 +130,23 @@
 
 @mixin vf-p-icon-chevron {
   .p-icon--chevron-up {
-    transform: rotate(180deg);
-  }
-  .p-icon--chevron-left {
-    transform: rotate(90deg);
+    @include vf-icon-chevron-up-themed;
   }
   .p-icon--chevron-right {
-    transform: rotate(-90deg);
+    @include vf-icon-chevron-right-themed;
+  }
+  .p-icon--chevron-down {
+    @include vf-icon-chevron-down-themed;
+  }
+  .p-icon--chevron-left {
+    @include vf-icon-chevron-left-themed;
   }
 
-  .p-icon--chevron-left,
+  .p-icon--chevron-up,
   .p-icon--chevron-right,
   .p-icon--chevron-down,
-  .p-icon--chevron-up {
+  .p-icon--chevron-left {
     @extend %icon;
-    @include vf-icon-chevron-themed;
   }
 }
 

package/scss/_patterns_image.scss

@@ -4,6 +4,8 @@
     Image container:
       .p-image-container:
         Main element of the image component.
+      "&.is-cover":
+        Cover variant, to be used to set the `.p-image-container__image` within to cover the container.
       "&.is-highlighted":
         Highlighted variant, to be used to highlight contents.
       .p-image-container--16-9:

package/scss/_patterns_logo-section.scss

@@ -4,17 +4,16 @@
     @extend %small-caps-text;
   }
 
-  $logo-section-item-size: 8rem; // height of the logos on large screens
-  $logo-section-item-size-medium: 6rem; // height of the logos on medium screens
+  $logo-section-item-size: 6.5rem; // height of the logos on large screens
   $logo-section-item-size-small: 4rem; // height of the logos on small screens
 
   $logo-section-offset: 1rem; // offset by which rows are pulled closer together
-  $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens
   $logo-section-offset-small: 0.5rem; // height of the logos on small screens
 
-  $logo-section-item-gap: 3rem;
-  $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap);
+  $logo-section-item-gap: 2rem;
 
+  // TODO: Remove .p-logo-section--dense since it's been deprecated in favor
+  // of just using .p-logo-section instead
   .p-logo-section,
   .p-logo-section--dense {
     .p-logo-section__item {
@@ -25,11 +24,6 @@
       margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
 
       @media (min-width: $breakpoint-small) {
-        margin-bottom: calc(-1 * $logo-section-offset-medium);
-        margin-top: calc(-1 * $logo-section-offset-medium);
-      }
-
-      @media (min-width: $breakpoint-large) {
         margin-bottom: calc(-1 * $logo-section-offset);
         margin-top: calc(-1 * $logo-section-offset);
       }
@@ -42,10 +36,6 @@
       width: auto;
 
       @media (min-width: $breakpoint-small) {
-        height: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         height: $logo-section-item-size;
       }
     }
@@ -58,36 +48,12 @@
       padding-top: $logo-section-offset-small;
 
       @media (min-width: $breakpoint-small) {
-        padding-bottom: $logo-section-offset-medium;
-        padding-top: $logo-section-offset-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         padding-bottom: $logo-section-offset;
         padding-top: $logo-section-offset;
       }
     }
   }
 
-  .p-logo-section--dense {
-    .p-logo-section__item {
-      display: inline-block;
-      margin: 0;
-      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
-      margin-right: $logo-section-item-gap-dense;
-      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
-    }
-
-    .p-logo-section__logo {
-      height: $logo-section-item-size-small;
-    }
-
-    .p-logo-section__items {
-      padding-bottom: $logo-section-offset-small;
-      padding-top: $logo-section-offset-small;
-    }
-  }
-
   // fallback for old logo sections that may have logos not properly aligned by design team
   .p-logo-section.has-misaligned-images,
   .p-logo-section--dense.has-misaligned-images {
@@ -98,10 +64,6 @@
       width: $logo-section-item-size-small;
 
       @media (min-width: $breakpoint-small) {
-        width: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         width: $logo-section-item-size;
       }
     }

package/scss/_patterns_navigation-reduced.scss

@@ -1,5 +1,9 @@
 @mixin vf-p-navigation-reduced {
   .p-navigation--reduced {
+    // height of reduced navigation calculated from line height and padding
+    $reduced-nav-height: calc(map-get($line-heights, x-small) + 2 * $spv--small);
+
+    background-color: $colors--theme--background-alt;
     position: relative;
     z-index: 99; // display above sticky top navigation, but below modals/overlays
 
@@ -7,24 +11,38 @@
 
     // orange logo tag is hidden in reduced navigation
     .p-navigation__tagged-logo {
-      .p-navigation__link {
-        padding-left: 0;
-      }
-
       .p-navigation__logo-tag {
         display: none;
       }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        // on large screens align the logo with the grid start
+        .p-navigation__link {
+          padding-left: 0;
+        }
+      }
     }
 
     // reduced nav logo text uses default font size (on small screens)
     .p-navigation__logo-title {
+      color: $colors--theme--text-muted;
       font-size: #{map-get($font-sizes, default)}rem;
+      font-weight: $font-weight-regular-text;
+    }
+
+    // reduced padding on small screens
+    .p-navigation__link {
+      padding-bottom: $spv--medium;
+      padding-top: $spv--medium;
+    }
+
+    // links in the banner (Menu toggle, search toggle) use muted text colour
+    .p-navigation__banner .p-navigation__link {
+      color: $colors--theme--text-muted;
     }
 
     // REDUCED SIZE OF NAVIGATION ON LARGE SCREENS
     @media (min-width: $breakpoint-navigation-threshold) {
-      background-color: $colors--theme--background-alt;
-
       // adjust font size for reduced nav on large screens
       .p-navigation__link,
       .p-navigation__logo-title {
@@ -40,18 +58,39 @@
 
       .p-navigation__item--dropdown-toggle .p-navigation__link {
         &::after {
+          @include vf-icon-chevron-muted;
           top: $spv--small;
         }
       }
 
       .p-navigation__item--dropdown-toggle.is-active {
         background-color: $colors--theme--background-default;
+
+        .p-navigation__link {
+          color: $colors--theme--text-default;
+        }
+
+        .p-navigation__link::after {
+          @include vf-icon-chevron-themed;
+        }
+      }
+
+      .p-navigation__link--search-toggle {
+        &::after {
+          @include vf-icon-search-muted;
+        }
       }
     }
 
     // SEARCH IN REDUCED NAVIGATION
 
     .p-navigation__link--search-toggle {
+      // use muted icon to align with text colour
+      &::after {
+        @include vf-icon-search-muted;
+        top: calc($spv--medium + map-get($nudges, x-small));
+      }
+
       // search label is always hidden in reduced navigation
       .p-navigation__search-label {
         display: none;
@@ -64,21 +103,18 @@
       }
     }
 
-    // hide secondary navigation banner when search is open on mobile
-    &.has-search-open + .has-search-open .p-navigation__banner {
-      display: none;
-    }
     @media (min-width: $breakpoint-navigation-threshold) {
-      &.has-search-open + .has-search-open .p-navigation__banner {
-        display: flex; // reset to value as defined in _patterns_navigation.scss
-      }
-
       &.has-search-open {
         // make sure reduced navigation items remain visible when search is open
         // both classes needed for specificity
         .p-navigation__nav .p-navigation__items {
           display: inline-flex;
         }
+
+        // position the search under the reduced navigation
+        .p-navigation__search {
+          top: $reduced-nav-height;
+        }
       }
     }
   }

package/scss/_patterns_navigation.scss

@@ -1,15 +1,14 @@
 @import 'settings';
 
 $lightness-threshold: 70;
-$navigation-logo-tag-width: 1.313rem; // 21px when 1rem is 16px
-$navigation-logo-tag-height: 2rem;
-$navigation-logo-tag-height-desktop: 2.3rem;
-$navigation-logo-banner-height: 3rem; // legacy logo height (small and medium screens)
-$navigation-logo-banner-height-desktop: 3.5rem; // legacy logo height (on large screens)
+$navigation-logo-tag-width: 1.375rem; // 22px when 1rem is 16px
+$navigation-logo-tag-height: 2.375rem; // 38px when 1rem is 16px
+$navigation-logo-banner-height: 3.5rem; // legacy logo height (on large screens)
 $navigation-logo-size: 1rem;
-$navigation-logo-padding: calc(1.5rem + 0.19rem); // ~27px to align better with logos as originally designed in SVG
+$navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
-$spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
+$spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
+$navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large); // navigation bar height based on line height and paddings
 
 @mixin vf-p-navigation {
   // placeholders
@@ -143,6 +142,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation--sliding,
   .p-navigation--reduced {
     background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -155,6 +155,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // p-search-box overrides
     .p-search-box {
+      background-color: $colors--theme--background-default;
       flex: 1 0 auto;
       margin-left: map-get($grid-margin-widths, small);
       margin-right: map-get($grid-margin-widths, small);
@@ -303,7 +304,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__link--menu-toggle {
       // reset padding for navigation links in the navigation banner
       @extend %navigation-link-responsive-padding-horizontal;
-      @extend %navigation-link-responsive-padding-vertical;
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
 
       // remove navigation separator for navigation links in the navigation banner
       &::before {
@@ -324,10 +326,6 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     height: $navigation-logo-banner-height;
     margin: 0 $sph--large 0 0;
 
-    @media (min-width: $breakpoint-navigation-threshold) {
-      height: $navigation-logo-banner-height-desktop;
-    }
-
     .p-navigation__item {
       @include vf-focus;
 
@@ -344,24 +342,20 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__logo-tag {
+      align-items: flex-end;
       background-color: $color-ubuntu;
+      display: flex;
       height: $navigation-logo-tag-height;
+      justify-content: center;
       left: 0;
+      padding-bottom: $spv-navigation-logo-bottom-position;
       position: absolute;
       top: 0;
       width: $navigation-logo-tag-width;
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        height: $navigation-logo-tag-height-desktop;
-      }
     }
 
     .p-navigation__logo-icon {
-      bottom: $spv-navigation-logo-bottom-position;
       height: $navigation-logo-size;
-      left: 50%;
-      position: absolute;
-      transform: translate(-50%, 0);
       width: $navigation-logo-size;
     }
 
@@ -415,6 +409,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       display: flex;
       flex-wrap: wrap;
       margin-top: 0; // prevents bottom border of nav from moving 1px
+      position: static;
     }
   }
 
@@ -576,12 +571,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       position: absolute;
       right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--medium + map-get($nudges, x-small));
+      top: calc($spv--large + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        top: calc($spv--large + map-get($nudges, x-small));
-      }
     }
   }
 
@@ -626,6 +617,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
+      position: relative;
       z-index: 60;
     }
 
@@ -636,7 +628,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show expanded search box
     .p-navigation__search {
+      background-color: $colors--theme--background-default;
       display: flex;
+      position: absolute;
+      width: 100%;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        background-color: transparent;
+      }
     }
 
     // fade in search overlay
@@ -730,6 +729,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     &.is-active {
+      background: $colors--theme--background-active;
+
       &::after {
         transform: rotate(0deg);
 
@@ -748,9 +749,56 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       // increase padding to accommodate chevron icon
       padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
     }
+  }
 
-    &:first-child .p-navigation__link::before {
-      content: none;
+  .p-navigation--reduced .p-navigation__dropdown.is-full-width,
+  .p-navigation--sliding .p-navigation__dropdown.is-full-width {
+    .p-navigation__dropdown-content--full-width {
+      @extend %vf-has-box-shadow;
+      @include vf-transition(transform, snap);
+      background-color: $colors--theme--background-default;
+      border-top: 1px solid $colors--theme--border-default;
+      display: none; // hide on small screens
+    }
+
+    // on desktop display full width meganav dropdowns
+    @media (min-width: $breakpoint-navigation-threshold) {
+      background-color: $color-transparent;
+      box-shadow: none;
+      left: 0;
+      overflow: hidden;
+      position: absolute;
+      right: 0;
+
+      // hide mobile sliding menu on full width view
+      .p-navigation__dropdown-content--sliding {
+        display: none;
+      }
+
+      .p-navigation__dropdown-content--full-width {
+        display: block;
+        transform: translateY(0);
+      }
+    }
+
+    // collapsed dropdowns are animated off-screen
+    &.is-collapsed .p-navigation__dropdown-content--full-width {
+      transform: translateY(-101%);
+    }
+
+    // rows think they are nested (because they are inside of navigation row)
+    // we need to reset them back to original state
+    .row,
+    [class*='row--'] {
+      @extend %fixed-width-container--common-properties;
+    }
+  }
+
+  .p-navigation__dropdown-container {
+    display: none;
+
+    .p-navigation__item--dropdown-toggle.is-active & {
+      display: block;
     }
   }
 
@@ -789,6 +837,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   .p-navigation--sliding.has-menu-open,
   .p-navigation--reduced.has-menu-open {
+    box-shadow: $colors--theme--background-overlay 0px 0px 0px 100vh;
     height: 100vh;
     overflow-y: hidden;
     position: fixed;
@@ -797,7 +846,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     @media (min-width: $breakpoint-navigation-threshold) {
       height: auto;
       overflow-y: visible;
-      position: static;
+      position: relative;
       width: auto;
     }
 
@@ -811,7 +860,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
     .p-navigation__nav {
       display: block;
-      height: 100vh;
+      height: calc(100vh - $navigation-height);
       overflow-x: hidden;
 
       .p-navigation__items {
@@ -838,12 +887,17 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation--sliding .p-navigation__dropdown,
   .p-navigation--reduced .p-navigation__dropdown {
     display: block;
-    height: 100vh;
+    height: calc(100vh - $navigation-height);
     left: 100vw;
     position: absolute;
     top: 0;
     transition: transform $sliding-nav-animation-settings;
 
+    // set background of child elements to properly cover parent dropdown levels when scrolling
+    & > * {
+      background: $colors--theme--background-default;
+    }
+
     @media (min-width: $breakpoint-navigation-threshold) {
       display: none;
       height: auto;
@@ -852,8 +906,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       top: unset;
     }
 
+    // overlay to create fade out effect on parent level
     &::before {
-      box-shadow: -100vw 15px 0 15px black;
+      box-shadow: -100vw 0 0 0 $colors--light-theme--background-overlay;
       content: '';
       height: 100%;
       opacity: 0;
@@ -866,10 +921,14 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
     }
 
+    &[aria-hidden='true'] {
+      overflow: hidden; // prevent scrolling when dropdown is off screen
+    }
+
     &[aria-hidden='false'],
     &:not([aria-hidden]) {
       &::before {
-        @include vf-themed-property(opacity, 0.33, 0.75);
+        opacity: 1;
       }
 
       display: block;
@@ -925,6 +984,30 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   .p-navigation--sliding,
   .p-navigation--reduced {
+    // FIXME
+    // We want to add some additional spacing on the bottom of the sliding dropdowns
+    // so that the last item is not directly at the bottom of the screen when scrolling,
+    // but because of the way it's currently implemented, the only way to achieve this
+    // is to add padding to the last item in the dropdown.
+    // This is a temporary solution until we can find a better way to implement this, but
+    // it may require bigger restructuring of the sliding navigation.
+
+    // top (1st) level navigation dropdown
+    .p-navigation__nav .p-navigation__items,
+    // 2nd level navigation dropdown (that has separate mobile and desktop versions)
+    .p-navigation__dropdown-content--sliding,
+    // further nested levels
+    // (because of some weird style combination we have to select last child instead of adding padding on dropdown container itself)
+    .p-navigation__dropdown > :last-child {
+      // should be enough to make some space at the bottom
+      // and workaround the issues of 100vh not taking address toolbar into account
+      padding-bottom: 3rem;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        padding-bottom: 0;
+      }
+    }
+
     // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
     .p-navigation__item--dropdown-toggle {
       position: initial;

package/scss/_settings_colors.scss

@@ -39,9 +39,9 @@ $color-link-visited-dark: #a679d2 !default;
 $color-focus-dark: #9cf !default;
 
 // Focus modifications to meet AA 3:1 contrast ratio against
-// button background for positive/negative buttons
+// button background for positive buttons
 $color-focus-positive: #003008 !default;
-$color-focus-negative: #3b0006 !default;
+$color-focus-positive-dark: #9cf !default;
 
 // Button background color changes
 $input-background-opacity-amount: 0.04;
@@ -93,6 +93,7 @@ $states: (
 // --link-default    - default link color
 // --link-visited    - visited link color
 // --focus           - focus highlight/outline color
+// --positive-focus  - focus highlight/outline color for positive buttons
 //
 // Background colors:
 // --background           - default background color
@@ -114,6 +115,7 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 $colors--light-theme--link-default: $color-link !default;
 $colors--light-theme--link-visited: $color-link-visited !default;
 $colors--light-theme--focus: $color-focus !default;
+$colors--light-theme--positive-focus: $color-focus-positive !default;
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
@@ -174,6 +176,7 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-dark !default;
 $colors--dark-theme--focus: $color-focus-dark !default;
+$colors--dark-theme--positive-focus: $color-focus-positive-dark !default;
 
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #202020 !default;
@@ -241,6 +244,7 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
 $colors--theme--link-default: var(--vf-color-link-default);
 $colors--theme--link-visited: var(--vf-color-link-visited);
 $colors--theme--focus: var(--vf-color-focus);
+$colors--theme--positive-focus: var(--vf-color-positive-focus);
 
 $colors--theme--background-default: var(--vf-color-background-default);
 $colors--theme--background-alt: var(--vf-color-background-alt);
@@ -296,6 +300,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--light-theme--link-default};
   --vf-color-link-visited: #{$colors--light-theme--link-visited};
   --vf-color-focus: #{$colors--light-theme--focus};
+  --vf-color-positive-focus: #{$colors--light-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--light-theme--background-default};
   --vf-color-background-alt: #{$colors--light-theme--background-alt};
@@ -351,6 +356,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--dark-theme--link-default};
   --vf-color-link-visited: #{$colors--dark-theme--link-visited};
   --vf-color-focus: #{$colors--dark-theme--focus};
+  --vf-color-positive-focus: #{$colors--dark-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--dark-theme--background-default};
   --vf-color-background-alt: #{$colors--dark-theme--background-alt};

package/scss/_vanilla.scss

@@ -11,6 +11,7 @@
 @import 'patterns_chip';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
+@import 'patterns_cta';
 @import 'patterns_divider';
 @import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
@@ -104,6 +105,7 @@
   @include vf-p-chip;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
+  @include vf-p-cta-block;
   @include vf-p-divider;
   @include vf-p-equal-height-row;
   @include vf-p-form-help-text;