vanilla-framework 4.5.1 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.5.1",
+  "version": "4.7.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,24 +57,23 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.27.2",
-    "@testing-library/cypress": "9.0.0",
-    "autoprefixer": "10.4.16",
-    "cypress": "13.6.0",
+    "@percy/cli": "1.27.7",
+    "@testing-library/cypress": "10.0.1",
+    "autoprefixer": "10.4.17",
+    "cypress": "13.6.4",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.31",
-    "postcss-cli": "10.1.0",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "2.8.8",
-    "sass": "1.68.0",
-    "stylelint": "15.10.3",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
+    "prettier": "3.2.4",
+    "sass": "1.70.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
     "svgo": "2.8.0",
-    "yaml": "2.3.2"
+    "yaml": "2.3.4"
   }
 }

package/scss/_base_forms.scss

@@ -200,7 +200,7 @@
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-position: right $sph--small center;
+    background-position: right calc(map-get($grid-margin-widths, default) / 2) center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;

package/scss/_base_typography-definitions.scss

@@ -5,41 +5,55 @@
     }
   }
 
-  //@section Heading styling in placeholders
-  %vf-heading-2 {
-    @extend %vf-is-accent;
-
-    font-size: #{map-get($font-sizes, h2-mobile)}rem;
+  %vf-heading--common {
     font-style: normal;
-    font-weight: 180;
-    line-height: map-get($line-heights, h2-mobile);
-    margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, h2-mobile);
     margin-top: 0;
     max-width: $text-max-width;
-    padding-top: map-get($nudges, h2-mobile);
+  }
+
+  //@section Heading styling in placeholders
+  %vf-heading-1 {
+    @extend %vf-heading--common;
+    @extend %vf-is-accent;
+
+    font-size: #{map-get($font-sizes, h1-mobile)}rem;
+    font-weight: $font-weight-bold;
+    line-height: map-get($line-heights, h1-mobile);
+    margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
+    padding-top: map-get($nudges, h1-mobile);
 
     @media (min-width: $breakpoint-heading-threshold) {
-      font-size: #{map-get($font-sizes, h2)}rem;
-      line-height: map-get($line-heights, h2);
-      margin-bottom: map-get($sp-after, h2) - map-get($nudges, h2);
-      padding-top: map-get($nudges, h2);
+      font-size: #{map-get($font-sizes, h1)}rem;
+      line-height: map-get($line-heights, h1);
+      margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1);
+      padding-top: map-get($nudges, h1);
     }
 
     &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--h2;
+      @extend %u-no-margin--bottom--h1;
+    }
+
+    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
+      // move it up under the heading above by the amount of bottom margin + top padding
+      margin-top: calc(-1 * map-get($sp-after, h1-mobile));
+
+      @media (min-width: $breakpoint-heading-threshold) {
+        margin-top: calc(-1 * map-get($sp-after, h1));
+      }
     }
   }
 
-  %vf-heading-1 {
-    @extend %vf-heading-2;
-    font-weight: 550;
+  %vf-heading-2 {
+    @extend %vf-heading--common;
+    @extend %vf-heading-1;
+    font-weight: 180; // custom font weight adjusted for h2
   }
 
   %vf-heading-display {
-    @extend %vf-heading-2;
+    @extend %vf-heading--common;
 
     font-size: #{map-get($font-sizes, display-mobile)}rem;
-    font-weight: 100;
+    font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, display-mobile);
     margin-bottom: map-get($sp-after, display-mobile) - map-get($nudges, display-mobile);
     padding-top: map-get($nudges, display-mobile);
@@ -53,15 +67,13 @@
   }
 
   %vf-heading-3 {
+    @extend %vf-heading--common;
     @extend %vf-is-accent;
 
     font-size: #{map-get($font-sizes, h3-mobile)}rem;
-    font-style: normal;
-    font-weight: 550;
+    font-weight: $font-weight-bold;
     line-height: map-get($line-heights, h3-mobile);
     margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
-    margin-top: 0;
-    max-width: $text-max-width;
     padding-top: map-get($nudges, h3-mobile);
 
     @media (min-width: $breakpoint-heading-threshold) {
@@ -74,73 +86,54 @@
     &.u-no-margin--bottom {
       @extend %u-no-margin--bottom--h3;
     }
-  }
 
-  %vf-heading-4 {
-    @extend %vf-is-accent;
+    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
+      // move it up under the heading above by the amount of bottom margin + top padding
+      margin-top: calc(-1 * map-get($sp-after, h3-mobile));
 
-    font-size: #{map-get($font-sizes, h4-mobile)}rem;
-    font-style: normal;
-    font-weight: 275;
-    line-height: map-get($line-heights, h4-mobile);
-    margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
-    margin-top: 0;
-    max-width: $text-max-width;
-    padding-top: map-get($nudges, h4-mobile);
-
-    @media (min-width: $breakpoint-heading-threshold) {
-      font-size: #{map-get($font-sizes, h4)}rem;
-      line-height: map-get($line-heights, h4);
-      margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4);
-      padding-top: map-get($nudges, h4);
-    }
-
-    @if ($increase-font-size-on-larger-screens) {
-      @media (min-width: $breakpoint-x-large) {
-        margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4-large);
-        padding-top: map-get($nudges, h4-large);
+      @media (min-width: $breakpoint-heading-threshold) {
+        margin-top: calc(-1 * map-get($sp-after, h3));
       }
     }
+  }
 
-    &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--h4;
-    }
+  %vf-heading-4 {
+    @extend %vf-heading--common;
+    @extend %vf-heading-3;
+    font-weight: 275; // custom font weight adjusted for h4
   }
 
   %vf-heading-5 {
+    @extend %vf-heading--common;
+
     font-size: 1rem;
-    font-style: normal;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, default-text);
     margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
-    margin-top: 0;
-    max-width: $text-max-width;
     padding-top: map-get($nudges, p);
 
     &.u-no-margin--bottom {
       @extend %u-no-margin--bottom--default-text;
     }
+
+    &:not(.u-no-margin):not(.u-no-margin--bottom) + & {
+      // move it up under the heading above by the amoung of bottom margin + top padding
+      margin-top: calc(-1 * map-get($sp-after, p));
+    }
   }
 
   %vf-heading-6 {
-    font-size: 1rem;
+    @extend %vf-heading--common;
+    @extend %vf-heading-5;
+
     font-style: italic;
     font-weight: $font-weight-regular-text;
-    line-height: map-get($line-heights, default-text);
-    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
-    margin-top: 0;
-    max-width: $text-max-width;
-    padding-top: map-get($nudges, h6);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
         padding-top: map-get($nudges, h6-large);
       }
     }
-
-    &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--default-text;
-    }
   }
 
   %common-default-text-properties {

package/scss/_base_typography-heading-mixins.scss

@@ -1,3 +1,5 @@
+// DEPRECATED: This file is deprecated and will be removed in a future version of Vanilla
+
 // For compatibility with other sites which rely on these mixins
 @mixin vf-heading-1 {
   @extend %vf-heading-1;

package/scss/_patterns_form-tick-elements.scss

@@ -16,7 +16,9 @@
 
     &::before,
     &::after {
-      $properties: #{background-color, border-color};
+      $properties:
+        #{background-color,
+        border-color};
       @include vf-transition($properties);
 
       position: absolute;

package/scss/_patterns_grid.scss

@@ -197,6 +197,7 @@
   $col-50: calc($grid-columns / 2);
   $col-75: calc(($grid-columns / 4) * 3);
 
+  // 50/50 split on medium and large screens
   .row--50-50 {
     @extend %vf-row;
 
@@ -213,6 +214,7 @@
     }
   }
 
+  // 25/75 split on medium and large screens
   .row--25-75 {
     @extend %vf-row;
 
@@ -220,7 +222,18 @@
       @include vf-grid-column($grid-columns-small);
 
       @media (min-width: $threshold-4-6-col) {
-        @include vf-grid-column($grid-columns-medium);
+        &:nth-of-type(1) {
+          @include vf-grid-column(2);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(4);
+        }
+
+        // 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) {
@@ -241,9 +254,22 @@
     }
   }
 
-  .row--25-75.is-split-on-medium {
+  // 50/50 split just on medium screens
+  .row--50-50-on-medium {
+    @extend %vf-row;
+
     > .col {
-      @media (min-width: $threshold-4-6-col) {
+      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
+        @include vf-grid-column($col-50-medium);
+      }
+    }
+  }
+
+  .row--25-75-on-medium {
+    @extend %vf-row;
+
+    > .col {
+      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
         &:nth-of-type(1) {
           @include vf-grid-column(2);
         }
@@ -252,13 +278,29 @@
           @include vf-grid-column(4);
         }
 
-        // if there is only one column we offset it to the right
+        // if there is only one column, use the whole width
         &:only-of-type {
-          @include vf-grid-column(4);
-          grid-column-start: calc(3);
+          @include vf-grid-column(6);
         }
       }
+    }
+  }
+
+  // 50/50 split just on large screens
+  .row--50-50-on-large {
+    @extend %vf-row;
+
+    > .col {
+      @media (min-width: $threshold-6-12-col) {
+        @include vf-grid-column($col-50);
+      }
+    }
+  }
+
+  .row--25-75-on-large {
+    @extend %vf-row;
 
+    > .col {
       @media (min-width: $threshold-6-12-col) {
         &:nth-of-type(1) {
           @include vf-grid-column($col-25);

package/scss/_patterns_navigation.scss

@@ -7,6 +7,7 @@ $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-size: 1rem;
+$navigation-logo-padding: calc(1.5rem + 0.19rem); // ~27px 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
 
@@ -31,7 +32,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
   }
 
@@ -44,7 +45,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-right: $sph--large;
+      padding-right: map-get($grid-margin-widths, default);
     }
   }
 
@@ -54,7 +55,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   %navigation-link {
-    $properties: #{background-color, color, opacity};
+    $properties:
+      #{background-color,
+      color,
+      opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %vf-navigation-separator;
@@ -71,7 +75,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     line-height: map-get($line-heights, default-text);
     margin: 0;
     overflow: hidden;
-    padding-left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large}); // allow navigation align with tag logo text on small screens
+    padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
     position: relative;
     text-align: left;
     text-overflow: ellipsis;
@@ -79,11 +83,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+      padding-left: calc(map-get($grid-margin-widths, default) + $navigation-logo-padding);
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
 
     &:visited,
@@ -185,6 +189,52 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
   }
 
+  .p-navigation__row--25-75 {
+    // ideally we'd like to extend row only on large screens,
+    // but that's not possible to use @extend inside media query
+    @extend %vf-row;
+
+    // when mobile navigation is displayed, remove default row padding
+    @media (width < $breakpoint-navigation-threshold) {
+      padding: 0;
+    }
+
+    // when large screen navigation is displayed, use 25/75 grid split
+    @media (min-width: $breakpoint-navigation-threshold) {
+      // remove padding from logo banner (the grid has its own padding)
+      .p-navigation__banner {
+        padding-left: 0;
+      }
+
+      // shift navigation items by the size of grid margin to align with grid
+      .p-navigation__items:first-child {
+        margin-left: calc(-1 * map-get($grid-margin-widths, default));
+      }
+
+      // on medium screen sizes (6 columns) use 2/4 column split
+      @media (min-width: $threshold-4-6-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 2;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 4;
+        }
+      }
+
+      // on large screen sizes (12 columns) use 3/9 column split
+      @media (min-width: $threshold-6-12-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 3;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 9;
+        }
+      }
+    }
+  }
+
   .p-navigation__item,
   .p-navigation__item--dropdown-toggle {
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -282,7 +332,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__link {
       @extend %navigation-link;
 
-      padding-left: $sph--x-large;
+      // within logo we don't need a regular item padding
+      @extend %vf-reset-horizontal-padding;
+      padding-left: $navigation-logo-padding;
 
       &:hover {
         background-color: transparent !important;
@@ -430,8 +482,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     display: block;
     height: 100%; // keep the height of the navigation when 'Search' label is hidden
+
     padding-left: 0; // on small screens label is hidden, so we remove left padding as well
-    padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+    padding-right: calc(map-get($grid-margin-widths, default) + map-get($icon-sizes, default));
     position: relative;
 
     // hide "search" label on small screens (only show the icon)
@@ -441,7 +494,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show both label and icon on large screens
     @media (min-width: $breakpoint-large) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
 
       .p-navigation__search-label {
         display: initial;
@@ -457,7 +510,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       height: $spv--large;
       pointer-events: none;
       position: absolute;
-      right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+      right: calc(map-get($grid-margin-widths, default) / 2);
       text-indent: calc(100% + 10rem);
       top: calc($spv--medium + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
@@ -597,7 +650,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        right: calc(map-get($grid-margin-widths, default) / 2); // position by the center of grid margin
         top: calc($spv--large + map-get($nudges, x-small));
         transform: rotate(0deg);
       }
@@ -619,8 +672,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__link {
-      // add padding to accommodate icon
-      padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+      // increase padding to accommodate chevron icon
+      padding-right: map-get($grid-margin-widths, default) + map-get($icon-sizes, default);
     }
 
     &:first-child .p-navigation__link::before {

package/scss/_patterns_strip.scss

@@ -116,9 +116,19 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to top right, #fff 0%, #fff 49%, transparent 50%, transparent 100%), linear-gradient(to top right, #fff 0%, #fff 100%),
       linear-gradient(111deg, $color-suru-start 10%, $color-suru-middle 37%, $color-suru-end 100%);
 
-    background-position: 0% 0%, top right, right 0 bottom 4rem, right bottom, 0% 0%;
+    background-position:
+      0% 0%,
+      top right,
+      right 0 bottom 4rem,
+      right bottom,
+      0% 0%;
     background-repeat: no-repeat;
-    background-size: 100% calc(100% - 4rem), 50% 100%, 100% 4rem, 100% 4rem, auto;
+    background-size:
+      100% calc(100% - 4rem),
+      50% 100%,
+      100% 4rem,
+      100% 4rem,
+      auto;
     color: $color-x-light;
     margin-bottom: -4rem;
     overflow: hidden;
@@ -136,16 +146,36 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
     &.is-deep {
       $padding: 3rem;
 
-      background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-      background-size: 100% calc(100% - $padding), 100% 100%, 100% $padding, 100% $padding, auto;
+      background-position:
+        0% 0%,
+        top right,
+        right 0 bottom $padding,
+        right bottom,
+        0% 0%;
+      background-size:
+        100% calc(100% - $padding),
+        100% 100%,
+        100% $padding,
+        100% $padding,
+        auto;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
       @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
-        background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-        background-size: 100% calc(100% - $padding), 50% 100%, 100% $padding, 100% $padding, auto;
+        background-position:
+          0% 0%,
+          top right,
+          right 0 bottom $padding,
+          right bottom,
+          0% 0%;
+        background-size:
+          100% calc(100% - $padding),
+          50% 100%,
+          100% $padding,
+          100% $padding,
+          auto;
         margin-bottom: -$padding;
         padding-bottom: ($padding * 3) !important;
       }
@@ -167,9 +197,17 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to bottom right, transparent 0%, transparent 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%),
       linear-gradient(90deg, $color-suru-start 4%, $color-suru-middle 50%, $color-suru-end 88%);
 
-    background-position: top right, top right, top left, top left;
+    background-position:
+      top right,
+      top right,
+      top left,
+      top left;
     background-repeat: no-repeat;
-    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
+    background-size:
+      39.4% 6rem,
+      54% 4rem,
+      63% 4rem,
+      62.6% 4rem;
     padding-bottom: 4rem;
     padding-top: 6rem;
 

package/scss/_settings_placeholders.scss

@@ -6,5 +6,8 @@ $input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $color-mid-light !default;
-$box-shadow: 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
+$box-shadow:
+  0 1px 1px 0 transparentize($color-x-dark, 0.85),
+  0 2px 2px -1px transparentize($color-x-dark, 0.85),
+  0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;