vanilla-framework 4.10.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,24 +55,24 @@
     "!/scss/standalone"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.6.0",
+    "@canonical/cookie-policy": "3.6.3",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.2",
+    "@percy/cli": "1.28.5",
     "@testing-library/cypress": "10.0.1",
     "autoprefixer": "10.4.19",
-    "cypress": "13.7.1",
+    "cypress": "13.8.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "postcss": "8.4.38",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
     "prettier": "3.2.5",
-    "sass": "1.72.0",
-    "stylelint": "16.3.1",
+    "sass": "1.77.0",
+    "stylelint": "16.5.0",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
     "svgo": "3.2.0",
-    "yaml": "2.4.1"
+    "yaml": "2.4.2"
   }
 }

package/scss/_base_forms.scss

@@ -101,6 +101,7 @@
   label {
     cursor: pointer;
     display: inline-block;
+    line-height: map-get($line-heights, default-text);
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $text-max-width;

package/scss/_patterns_equal-height-row.scss

@@ -1,108 +1,21 @@
 @import 'settings';
 
-// wrapper mixin that provides relevant class selectors for 1st, 2nd and 3rd dividers
-@mixin position-divider-by-order-in-grid($divider-order, $large-screen: false) {
-  // for large screens, dividers are positioned as pseudo elements at row level
-  @if $large-screen {
-    @if $divider-order == 1 {
-      &.has-1st-divider::before {
-        @content;
-      }
-    }
-
-    @if $divider-order == 2 {
-      &.has-2nd-divider::after {
-        @content;
-      }
-    }
-
-    @if $divider-order == 3 {
-      // when 3rd-divider is present and 1st-divider is not present
-      &.has-3rd-divider:not(.has-1st-divider)::before,
-      // when 3rd-divider is present and 2nd-divider is not present
-      &.has-3rd-divider:not(.has-2nd-divider)::after {
-        @content;
-      }
-
-      // when only 3rd-divider is present
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::before {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider)::after {
-        display: none;
-      }
-    }
-  } @else {
-    // for smaller screens, dividers are positioned as pseudo elements at column level
-    @if $divider-order == 1 {
-      &.has-1st-divider .p-equal-height-row__col::before {
-        @content;
-      }
-    }
-
-    @if $divider-order == 2 {
-      &.has-2nd-divider .p-equal-height-row__col::after {
-        @content;
-      }
-    }
-
-    @if $divider-order == 3 {
-      &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
-      &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::before {
-        @content;
-      }
-
-      &.has-3rd-divider:not(.has-1st-divider):not(.has-2nd-divider) .p-equal-height-row__col::after {
-        display: none;
-      }
-    }
-  }
-}
-
-@mixin divider-styles($large-screen: false) {
-  // For each row or column grid we only have access to two pseudo elements
-  // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
-  // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
-  @if $large-screen {
-    &.has-1st-divider::before,
-    &.has-2nd-divider::after,
-    &.has-3rd-divider:not(.has-1st-divider)::before,
-    &.has-3rd-divider:not(.has-2nd-divider)::after {
-      @content;
-    }
-  } @else {
-    // For smaller screens, the divider pseudo elements are inserted at the column level
-    &.has-1st-divider .p-equal-height-row__col::before,
-    &.has-2nd-divider .p-equal-height-row__col::after,
-    &.has-3rd-divider:not(.has-1st-divider) .p-equal-height-row__col::before,
-    &.has-3rd-divider:not(.has-2nd-divider) .p-equal-height-row__col::after {
-      @content;
-    }
-  }
-}
-
 @mixin vf-p-equal-height-row {
   .p-equal-height-row {
     @extend %vf-row;
-    padding-bottom: $spv--strip-regular * 0.5;
     position: relative;
 
     .p-equal-height-row__col {
       // smaller screens each column will have border top by default
-      border-top-color: $colors--theme--border-default;
+      border-top-color: $colors--theme--border-low-contrast;
       border-top-style: solid;
       border-top-width: 1px;
       display: grid;
       grid-column: span $grid-columns-small;
       grid-row: span 4;
       grid-template-rows: subgrid;
+      margin-bottom: $spv--small;
       margin-top: -1px;
-      padding-bottom: $spv--small;
       position: relative;
 
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
@@ -123,76 +36,56 @@
       @media screen and (width >= $breakpoint-large) {
         border: none;
         grid-column: span calc($grid-columns / 4);
-        padding-bottom: 0;
+        margin-bottom: 0;
       }
     }
 
-    // divider styles
-    @include divider-styles($large-screen: false) {
-      @extend %vf-pseudo-border;
-    }
+    // DIVIDERS
 
-    // remove row level dividers for smaller screen sizes
-    @include divider-styles($large-screen: true) {
+    // For each row or column grid we only have access to two pseudo elements
+    // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
+    // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
+    &.has-divider-1::before,
+    &.has-divider-2::after,
+    &.has-divider-3:not(.has-divider-1)::before,
+    &.has-divider-3:not(.has-divider-2)::after {
+      // row level dividers are not visible on smaller screen sizes
       @extend %vf-pseudo-border;
+      background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
       display: none;
     }
 
-    @include position-divider-by-order-in-grid(1) {
-      grid-row: 2;
-    }
-
-    @include position-divider-by-order-in-grid(2) {
-      grid-row: 3;
-    }
-
-    @include position-divider-by-order-in-grid(3) {
-      grid-row: 4;
-    }
-
-    @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-      // We don't need to insert divider below item-1 for medium screen size since item-1 gets positioned on the left
-      @include position-divider-by-order-in-grid(1) {
-        display: none;
-      }
-
-      @include position-divider-by-order-in-grid(2) {
-        grid-column: 4 / 7;
-        grid-row: 2;
-      }
-
-      @include position-divider-by-order-in-grid(3) {
-        grid-column: 4 / 7;
-        grid-row: 3;
-      }
-    }
-
     @media screen and (width >= $breakpoint-large) {
-      padding-bottom: $spv--strip-regular;
-
-      // remove column level dividers for large screen sizes
-      @include divider-styles($large-screen: false) {
-        display: none;
-      }
-
-      @include divider-styles($large-screen: true) {
+      &.has-divider-1::before,
+      &.has-divider-2::after,
+      &.has-divider-3:not(.has-divider-1)::before,
+      &.has-divider-3:not(.has-divider-2)::after {
         display: block;
         grid-column-end: span 12;
         grid-column-start: 1;
         margin: auto;
       }
 
-      @include position-divider-by-order-in-grid(1, $large-screen: true) {
+      &.has-divider-1::before {
         grid-row: 2;
       }
 
-      @include position-divider-by-order-in-grid(2, $large-screen: true) {
+      &.has-divider-2::after {
         grid-row: 3;
       }
 
-      @include position-divider-by-order-in-grid(3, $large-screen: true) {
+      // when 3rd-divider is present and 1st-divider is not present
+      &.has-divider-3:not(.has-divider-1)::before,
+      // when 3rd-divider is present and 2nd-divider is not present
+      &.has-divider-3:not(.has-divider-2)::after,
+      // when only 3rd-divider is present
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
         grid-row: 4;
       }
+
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
+        display: none;
+      }
     }
   }
 

package/scss/_patterns_lists.scss

@@ -121,7 +121,7 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+  box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   margin: 0;
   padding-bottom: $sph--large;
   padding-top: $sph--small;
@@ -131,7 +131,7 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   .p-list--divided > .p-list__item:first-child {
-    box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+    box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   }
 }
 
@@ -396,7 +396,7 @@ $list-step-bullet-margin: $sph--x-large;
         position: relative;
 
         &::after {
-          background-color: $colors--light-theme--border-low-contrast;
+          background-color: $colors--theme--border-low-contrast;
           content: '';
           height: 1px;
           left: 0;

package/scss/_patterns_navigation.scss

@@ -872,50 +872,54 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
   /* stylelint-enable max-nesting-depth */
 
-  .p-navigation--sliding .p-navigation__item--dropdown-close {
-    .p-navigation__link::after {
-      left: 1rem;
-      transform: rotate(90deg);
-    }
-    @media (min-width: $breakpoint-navigation-threshold) {
-      display: none;
-    }
-  }
+  .p-navigation--sliding {
+    // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
+    .p-navigation__item--dropdown-toggle {
+      position: initial;
 
-  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
-    position: initial;
+      &::after {
+        content: none;
+      }
 
-    &::after {
-      content: none;
-    }
+      .p-navigation__link::after {
+        @include vf-icon-chevron-themed;
 
-    .p-navigation__link::after {
-      @include vf-icon-chevron-themed;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        content: '';
+        display: block;
+        height: $spv--large;
+        pointer-events: none;
+        position: absolute;
+        right: map-get($grid-margin-widths, small);
+        text-indent: calc(100% + 10rem);
+        top: 1rem;
+        transform: rotate(-90deg);
+        width: map-get($icon-sizes, default);
 
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      content: '';
-      display: block;
-      height: $spv--large;
-      pointer-events: none;
-      position: absolute;
-      right: map-get($grid-margin-widths, small);
-      text-indent: calc(100% + 10rem);
-      top: 1rem;
-      transform: rotate(-90deg);
-      width: map-get($icon-sizes, default);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          right: 0.5rem;
+          top: 1.2rem;
+          transform: none;
+        }
+      }
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        right: 0.5rem;
-        top: 1.2rem;
-        transform: none;
+      &.is-active > .p-navigation__link::after {
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: rotate(180deg);
+        }
       }
     }
 
-    &.is-active > .p-navigation__link::after {
+    // Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above
+    .p-navigation__item--dropdown-close {
+      .p-navigation__link::after {
+        left: 1rem;
+        transform: rotate(90deg);
+      }
       @media (min-width: $breakpoint-navigation-threshold) {
-        transform: rotate(180deg);
+        display: none;
       }
     }
   }

package/scss/_patterns_pagination.scss

@@ -7,8 +7,8 @@
 
     &.is-active,
     &[aria-current='page'] {
-      background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
-      color: $colors--light-theme--text-default;
+      background-color: $colors--theme--background-active;
+      color: $colors--theme--text-default;
       text-decoration: none;
     }
   }

package/scss/_patterns_rule.scss

@@ -8,19 +8,11 @@
   }
 
   .p-rule--muted {
-    background-color: $colors--light-theme--border-low-contrast;
-
-    &.is-dark {
-      background-color: $colors--dark-theme--border-low-contrast;
-    }
+    background-color: $colors--theme--border-low-contrast;
   }
 
   .p-rule--highlight {
-    @include vf-highlight-bar($colors--light-theme--text-default);
-
-    &.is-dark {
-      @include vf-highlight-bar($colors--dark-theme--text-default);
-    }
+    @include vf-highlight-bar($colors--theme--text-default);
 
     &.is-accent {
       @include vf-highlight-bar($color-accent);

package/scss/_patterns_suru.scss

@@ -8,7 +8,7 @@
     :root,
     .is-light,
     .is-paper {
-      // new suru backgrounds don't have while (light) version,
+      // new suru backgrounds don't have white (light) version,
       // they need paper background
       --vf-suru-background: #{$color-paper};
       --vf-suru-25-75: url('#{$assets-path}505636a6-0000_suru-main-25x75-light.png');
@@ -17,6 +17,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}2adade55-suru-corner-fan--bottom-0000_light.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}8846d6a5-suru-pyramid-top-corner_0000_light.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}5d9f8cd3-suru-pyramid-top-right-corner_0000_light.jpg');
+      --vf-suru-divider: url('#{$assets-path}9e25feb2-suru-triangle-from-left-edge--_0000_light.jpg');
     }
 
     .is-dark {
@@ -27,6 +28,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}725af649-suru-corner-fan--bottom-0001_dark.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}86ed5771-suru-pyramid-top-corner_0001_dark.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}9f740811-suru-pyramid-top-right-corner_0001_dark.jpg');
+      --vf-suru-divider: url('#{$assets-path}9c0bee5c-suru-triangle-from-left-edge--_0001_dark.jpg');
     }
   }
 
@@ -85,7 +87,6 @@
     }
 
     // padding top based on p-section--hero
-    // bottom padding not needed (as it's covered by the suru background image)
     padding-top: $spv--large;
 
     // on large screens, same as %section-padding--shallow
@@ -108,7 +109,7 @@
       background-image: var(--vf-suru-fan-top-right);
       background-position: top right;
       background-repeat: no-repeat;
-      background-size: 512px 385.5px; // based on image dimensions (2048x1542) scaled down by 0.25
+      background-size: 32rem 24.09rem; // based on image dimensions (2048x1542) scaled down by 0.25, coverted to rem
     }
 
     .p-suru--fan-bottom {
@@ -121,7 +122,7 @@
       background-image: var(--vf-suru-pyramid-top-left);
       background-position: top left;
       background-repeat: no-repeat;
-      background-size: 354px 258.75px; // based on image dimensions (1380x1035) scaled down by 0.25
+      background-size: 22.125rem 16.1718rem; // based on image dimensions (1380x1035) scaled down by 0.25, converted to rem
     }
 
     .p-suru--pyramid-right {
@@ -129,4 +130,34 @@
       background-position: top right;
     }
   }
+
+  .p-suru--divider {
+    background-color: var(--vf-suru-background);
+    color: $colors--theme--text-default;
+    // same as %section-padding--deep
+    padding-bottom: calc($spv--strip-deep / 2);
+    position: relative;
+
+    // only apply suru background images on large screens
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: calc(2 * $spv--strip-deep);
+
+      &::after {
+        $suru-divider-height: 13.75rem; // 220px / 16px = 13.75rem
+
+        background-image: var(--vf-suru-divider);
+        background-position: bottom left;
+        background-repeat: no-repeat;
+        background-size: 80rem 14.8125rem; // based on image dimensions (2560x474) scaled down by 0.5, converted to rem
+
+        bottom: calc((2 * $spv--strip-deep - $suru-divider-height) / 2);
+        content: '';
+        display: block;
+
+        height: $suru-divider-height;
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
 }

package/scss/_settings_colors.scss

@@ -179,9 +179,9 @@ $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default,
 $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
-$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.3) !default;
+$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;
-$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.05) !default;
+$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
 $colors--dark-theme--icon: $colors--dark-theme--text-default !default;
 

package/scss/_settings_spacing.scss

@@ -52,10 +52,10 @@ $nudges: (
   h4-large: 0.45rem,
   h4: 0.45rem,
   h4-mobile: 0.45rem,
-  h5: 0.4rem,
-  h6: 0.4rem,
-  h6-large: 0.4rem,
-  p: 0.4rem,
+  h5: 0.375rem,
+  h6: 0.375em,
+  h6-large: 0.375rem,
+  p: 0.375rem,
   p-ubuntumono: 0.45rem,
   small: 0.05rem,
   x-small: 0.25rem,

package/scss/_utilities_layout.scss

@@ -3,13 +3,19 @@
     @extend %fixed-width-container;
   }
 
-  @if ($table-layout-fixed) {
-    .u-table-layout--auto {
+  // stylelint-disable selector-max-type -- table elements can use selector types
+  .u-table-layout--auto {
+    &,
+    table {
       table-layout: auto !important;
     }
-  } @else {
-    .u-table-layout--fixed {
+  }
+
+  .u-table-layout--fixed {
+    &,
+    table {
       table-layout: fixed !important;
     }
   }
+  // stylelint-enable selector-max-type
 }