vanilla-framework 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -56,25 +56,25 @@
   ],
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
-    "@canonical/latest-news": "1.4.1",
-    "@percy/cli": "1.27.2",
-    "@testing-library/cypress": "9.0.0",
+    "@canonical/latest-news": "1.5.0",
+    "@percy/cli": "1.27.6",
+    "@testing-library/cypress": "10.0.1",
     "autoprefixer": "10.4.16",
-    "cypress": "12.17.4",
+    "cypress": "13.6.2",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "postcss-cli": "10.1.0",
     "postcss-scss": "4.0.9",
     "prettier": "2.8.8",
-    "sass": "1.68.0",
-    "stylelint": "15.10.3",
+    "sass": "1.69.6",
+    "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "svgo": "2.8.0",
-    "yaml": "2.3.2"
+    "yaml": "2.3.4"
   }
 }

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/_layouts_application-panels.scss

@@ -18,6 +18,7 @@
   }
 
   .p-panel__header.is-sticky {
+    background: $colors--light-theme--background-default;
     position: sticky;
     top: 0;
     z-index: 1;

package/scss/_patterns_grid.scss

@@ -144,9 +144,9 @@
 
   // column reordering
   $offsets: (
-    (small, 0, $threshold-4-6-col, $grid-columns-small - 1),
-    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium - 1),
-    (large, $threshold-6-12-col, false, $grid-columns - 1)
+    (small, 0, $threshold-4-6-col, $grid-columns-small),
+    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium),
+    (large, $threshold-6-12-col, false, $grid-columns)
   );
 
   @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
@@ -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

@@ -282,7 +282,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__link {
       @extend %navigation-link;
 
-      padding-left: $sph--x-large;
+      padding-left: calc($sph--x-large + 0.19rem); // additional padding added to align better with logos as originally designed in SVG
 
       &:hover {
         background-color: transparent !important;

package/scss/_patterns_search-box.scss

@@ -79,31 +79,33 @@
     .p-search-box__input {
       @include vf-search-box-dark-theme;
     }
-
-    .p-search-box.is-light {
-      .p-search-box__input {
-        @include vf-search-box-light-theme;
-      }
-    }
   } @else {
     .p-search-box {
       .p-search-box__input {
         @include vf-search-box-light-theme;
       }
     }
-
-    .p-search-box.is-dark {
-      .p-search-box__input {
-        @include vf-search-box-dark-theme;
-      }
-    }
   }
 
+  // beware that the order of the following classes is important
+  // as they are used to override the default theme
   .is-paper .p-search-box {
     .p-search-box__input {
       @include vf-search-box-paper-theme;
     }
   }
+
+  .p-search-box.is-light {
+    .p-search-box__input {
+      @include vf-search-box-light-theme;
+    }
+  }
+
+  .p-search-box.is-dark {
+    .p-search-box__input {
+      @include vf-search-box-dark-theme;
+    }
+  }
 }
 
 @mixin vf-search-box-theme(

package/scss/_patterns_side-navigation.scss

@@ -292,6 +292,7 @@
     &[aria-expanded='false'] {
       height: 0;
       opacity: 0;
+      overflow: hidden;
       transform: translate3d(0, -0.5rem, 0);
       visibility: hidden;
     }
@@ -544,6 +545,11 @@
       }
     }
   }
+
+  .is-paper .p-side-navigation__drawer,
+  .is-paper .p-side-navigation__drawer-header {
+    background: $color-paper;
+  }
 }
 
 // helper

package/scss/_patterns_suru.scss

@@ -5,15 +5,9 @@
     aspect-ratio: calc(2216 / 428); // aspect ratio calculated from image dimensions
     background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
     background-size: contain;
-    display: none; // only show suru on large screens
     margin: 0 auto;
     max-width: $grid-max-width;
 
-    // show suru only on large screens
-    @media (min-width: $breakpoint-large) {
-      display: block;
-    }
-
     &.is-dark {
       aspect-ratio: calc(2580 / 501); // aspect ratio calculated from image dimensions
       background-image: url('#{$assets-path}9469ef82-1_website_suru_DARK_25%20(1)122.jpg');