vanilla-framework 3.12.1 → 3.14.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "vanilla-framework",
-  "version": "3.12.1",
+  "version": "3.14.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
   },
   "bugs": {
     "email": "webteam@canonical.com",
-    "url": "http://github.com/canonical/vanilla-framework/issues"
+    "url": "https://github.com/canonical/vanilla-framework/issues"
   },
   "description": "A simple, extendable CSS framework.",
   "homepage": "https://vanillaframework.io/",
@@ -54,29 +54,27 @@
     "!/scss/docs",
     "!/scss/standalone"
   ],
-  "dependencies": {
+  "devDependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
-    "autoprefixer": "10.4.13",
-    "postcss": "8.4.21",
-    "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.6",
-    "sass": "1.58.3",
-    "yaml": "1.10.2"
-  },
-  "devDependencies": {
     "@percy/script": "1.1.0",
     "@testing-library/cypress": "9.0.0",
+    "autoprefixer": "10.4.13",
     "cypress": "12.7.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
+    "postcss": "8.4.21",
+    "postcss-cli": "9.1.0",
+    "postcss-scss": "4.0.6",
     "prettier": "2.8.4",
+    "sass": "1.58.3",
     "stylelint": "14.16.1",
     "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"
+    "svgo": "2.8.0",
+    "yaml": "2.2.2"
   }
 }

package/scss/_base_hr.scss

@@ -1,5 +1,27 @@
 @import 'settings';
 
+%fixed-width-hr {
+  @mixin adjusted-width($size) {
+    $gutters-sizes: 2 * map-get($grid-margin-widths, $size);
+
+    max-width: calc($grid-max-width - $gutters-sizes);
+    width: calc(100% - $gutters-sizes);
+  }
+
+  margin-left: auto;
+  margin-right: auto;
+  @include adjusted-width(small);
+
+  @media (min-width: $threshold-4-6-col) {
+    @include adjusted-width(default);
+  }
+
+  .row &,
+  .u-fixed-width & {
+    width: 100%;
+  }
+}
+
 // Horizontal rule
 @mixin vf-b-hr {
   // stylelint-disable selector-max-type -- base styles can use type selectors
@@ -18,25 +40,7 @@
     }
 
     &.is-fixed-width {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
-      width: calc(100% - 2 * map-get($grid-margin-widths, small));
-
-      @media (min-width: $threshold-4-6-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      @media (min-width: $threshold-6-12-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      .row &,
-      .u-fixed-width & {
-        width: 100%;
-      }
+      @extend %fixed-width-hr;
     }
   }
 

package/scss/_base_icon-definitions.scss

@@ -485,3 +485,15 @@
 @mixin vf-icon-desktop($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
 }
+
+@mixin vf-icon-play($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='play'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Triangle (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M11.3844 7.98987L5.50005 3.87809L5.50005 12.1161L11.3844 7.98987ZM12.538 9.01296C13.2485 8.51475 13.2476 7.46192 12.5363 6.96488L5.96604 2.37377C5.13747 1.7948 4.00005 2.3876 4.00005 3.3984L4.00005 12.5968C4.00005 13.6085 5.13935 14.2011 5.96773 13.6202L12.538 9.01296Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-pause($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='pause'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M5.5 3.02393H4V12.9917H5.5V3.02393ZM11.5 3.02393H10V12.9917H11.5V3.02393Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@mixin vf-icon-stop($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='stop'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Rectangle 13 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12 3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V12C3.5 12.2761 3.72386 12.5 4 12.5H12C12.2761 12.5 12.5 12.2761 12.5 12V4C12.5 3.72386 12.2761 3.5 12 3.5ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}

package/scss/_base_media.scss

@@ -5,7 +5,6 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   img {
     border: 0;
-    border-radius: $border-radius;
     height: auto;
     max-width: 100%;
   }

package/scss/_base_placeholders.scss

@@ -100,13 +100,8 @@
 
   // Spacing
   %section-padding--shallow {
-    padding-bottom: $spv--x-large * 0.5;
-    padding-top: $spv--x-large * 0.5;
-
-    @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv--x-large;
-      padding-top: $spv--x-large;
-    }
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--x-large;
   }
 
   %section-padding--default {

package/scss/_patterns_grid.scss

@@ -37,6 +37,7 @@
 @mixin vf-p-grid {
   // FIXME: this should be removed from framework SCSS
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
+  .grid-demo .col,
   .grid-demo [class*='#{$grid-column-prefix}'] {
     background: transparentize($color-negative, 0.9);
     margin-bottom: $spv--small;
@@ -188,4 +189,100 @@
       }
     }
   }
+
+  // Common grid patterns
+  $col-50-medium: calc($grid-columns-medium / 2);
+
+  $col-25: calc($grid-columns / 4);
+  $col-50: calc($grid-columns / 2);
+  $col-75: calc(($grid-columns / 4) * 3);
+
+  .row--50-50 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        @include vf-grid-column($col-50);
+      }
+    }
+  }
+
+  .row--25-75 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($grid-columns-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-column($col-75);
+        }
+      }
+    }
+  }
+
+  .row--25-25-50 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(-n + 2) {
+          @include vf-grid-column($col-50-medium);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-column($grid-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1),
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-column($col-50);
+        }
+      }
+    }
+  }
+
+  .row--25-25-25-25 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        @include vf-grid-column($col-25);
+      }
+    }
+  }
 }

package/scss/_patterns_icons.scss

@@ -1550,3 +1550,39 @@
     }
   }
 }
+
+@mixin vf-p-icon-play {
+  .p-icon--play {
+    @extend %icon;
+    @include vf-icon-play($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-play($color-mid-x-light);
+    }
+  }
+}
+
+@mixin vf-p-icon-pause {
+  .p-icon--pause {
+    @extend %icon;
+    @include vf-icon-pause($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-pause($color-mid-x-light);
+    }
+  }
+}
+
+@mixin vf-p-icon-stop {
+  .p-icon--stop {
+    @extend %icon;
+    @include vf-icon-stop($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-stop($color-mid-x-light);
+    }
+  }
+}

package/scss/_patterns_lists.scss

@@ -1,6 +1,5 @@
 @import 'settings';
-$list-status-icon-height: 0.875rem; // 14px value from svg as rem so it can be used in calculations
-$list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that positions the icon correctly
+$list-status-icon-height: $default-icon-size;
 
 @mixin vf-p-list-placeholders {
   %numbered-step-container {
@@ -69,18 +68,62 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     content: '';
     display: inline-block;
     height: $sph--large;
-    margin-right: $sph--large;
-    position: relative;
-    top: $sph--x-small;
-    width: $sph--large;
+    top: $spv--small;
+  }
+
+  %vf-list-item-ordered {
+    &::marker {
+      content: none;
+      display: none;
+    }
+
+    &::before {
+      color: $color-dark;
+      content: counters(list-item, '.') '. ';
+      display: inline-block;
+      text-align: right;
+    }
+  }
+
+  %vf-list-item-bullet {
+    &::before {
+      color: $color-dark;
+      content: '•';
+      display: inline-block;
+      text-align: right;
+    }
+  }
+}
+
+@mixin vf-list-item-has-prefix {
+  padding-left: $sp-x-large;
+  position: relative;
+
+  > .p-list--divided,
+  > .p-list {
+    margin-left: 0;
+  }
+
+  &::before {
+    left: 0;
+    position: absolute;
+    width: $sp-medium;
   }
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0rem $color-mid-x-light;
+  box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
   margin: 0;
   padding-bottom: $sph--large;
   padding-top: $sph--small;
+
+  &:first-child {
+    box-shadow: none;
+  }
+
+  .p-list--divided > .p-list__item:first-child {
+    box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+  }
 }
 
 // Mixin for inline list items
@@ -95,14 +138,6 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
-@function svg-tick($color) {
-  @if type-of($color) != 'color' {
-    @warn '#{$color} is not a color.';
-    @return false;
-  }
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle fill='" + vf-url-friendly-color($color) + "' cx='7' cy='7' r='7'/%3E%3Cpath fill='%23fff' d='M6.1 10.813L2.41 8.105l1.184-1.613L5.9 8.187l4.393-4.394 1.414 1.414z' /%3E%3C/svg%3E");
-}
-
 // List styling using list class
 @mixin vf-p-list {
   .p-list {
@@ -115,22 +150,6 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
-%vf-list-item-ordered {
-  &::marker {
-    content: none;
-    display: none;
-  }
-
-  &::before {
-    color: $color-dark;
-    content: counters(list-item, '.') '. ';
-    display: inline-block;
-    margin-right: $sph--large;
-    text-align: right;
-    width: $sph--large;
-  }
-}
-
 // A list with separators between items
 @mixin vf-p-list-divided {
   .p-list--divided {
@@ -139,6 +158,11 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     .p-list__item {
       @extend %vf-list-item;
       @include vf-list-item-divided;
+
+      &.is-ticked::before,
+      &.is-crossed::before {
+        top: $spv--medium;
+      }
     }
 
     &.is-split .p-list__item:last-of-type {
@@ -159,8 +183,10 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   // stylelint-disable selector-max-type -- we want to target ordered lists
   ol.p-list--divided {
     list-style: none;
+
     .p-list__item {
       @extend %vf-list-item-ordered;
+      @include vf-list-item-has-prefix;
     }
   }
   // stylelint-enable selector-max-type -- we want to target ordered lists
@@ -168,37 +194,31 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
 // Displays item with a state icon
 @mixin vf-p-list-item-state {
-  .is-ticked {
+  .p-list__item.is-ticked {
+    @include vf-list-item-has-prefix;
+
     &::before {
       @extend %vf-list-item-state-base;
       @include vf-icon-success;
     }
   }
 
-  .is-crossed {
+  .p-list__item.is-crossed {
+    @include vf-list-item-has-prefix;
+
     &::before {
       @extend %vf-list-item-state-base;
       @include vf-icon-error;
     }
   }
-}
 
-%vf-list-item-bullet {
-  &::before {
-    color: $color-dark;
-    content: '•';
-    display: inline-block;
-    margin-right: $sph--large;
-    text-align: right;
-    width: $sph--large;
+  // Displays item with a bullet
+  .p-list__item.has-bullet {
+    @extend %vf-list-item-bullet;
+    @include vf-list-item-has-prefix;
   }
 }
 
-// Displays item with a bullet
-.has-bullet {
-  @extend %vf-list-item-bullet;
-}
-
 // Displays a list inline with spacing
 @mixin vf-p-inline-list {
   .p-inline-list {

package/scss/_patterns_navigation.scss

@@ -57,6 +57,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     $properties: #{background-color, color, opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
+    @extend %vf-navigation-separator;
     @include vf-transition($properties, snap);
     @include vf-focus;
 
@@ -70,23 +71,19 @@ $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
     position: relative;
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
 
-    &::before {
-      content: '';
-      height: 1px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
+    @media (min-width: $threshold-4-6-col) {
+      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+    }
 
-      @media (min-width: $breakpoint-navigation-threshold) {
-        content: none;
-      }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      padding-left: $sph--large;
     }
 
     &:visited,
@@ -101,6 +98,25 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     padding-right: 0;
   }
 
+  %vf-navigation-separator {
+    &::before {
+      content: '';
+      height: 1px;
+      left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large});
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      @media (min-width: $threshold-4-6-col) {
+        left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        content: none;
+      }
+    }
+  }
+
   .p-navigation {
     display: flex;
     flex-direction: column;
@@ -190,6 +206,17 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     justify-content: space-between;
     padding-right: 0;
 
+    .p-navigation__link {
+      // reset padding for navigation links in the navigation banner
+      @extend %navigation-link-responsive-padding-horizontal;
+      @extend %navigation-link-responsive-padding-vertical;
+
+      // remove navigation separator for navigation links in the navigation banner
+      &::before {
+        content: none;
+      }
+    }
+
     @media (min-width: $threshold-4-6-col) {
       padding-left: map-get($grid-margin-widths, default);
       padding-right: 0;
@@ -270,10 +297,18 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   // navigation items
   .p-navigation__items {
+    @extend %vf-navigation-separator;
+
     display: none; // hidden by default on mobile (expands is a dropdown)
     list-style: none;
     margin: -1px 0 0 0;
     padding: 0;
+    position: relative;
+
+    // remove navigation separator for the first navigation items list
+    &:first-child::before {
+      content: none;
+    }
 
     @media (min-width: $breakpoint-navigation-threshold) {
       display: flex;
@@ -301,6 +336,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     flex-wrap: wrap;
     margin-top: 0; // prevents bottom border of nav from moving 1px
 
+    // remove separtion for navigation items in the navigation banner
+    &::before {
+      content: none;
+    }
+
     @media (min-width: $breakpoint-navigation-threshold) {
       display: none;
     }
@@ -544,6 +584,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       right: map-get($grid-margin-widths, small);
       text-indent: calc(100% + 10rem);
       top: calc($spv--large + map-get($nudges, x-small));
+      transform: rotate(-90deg);
       width: map-get($icon-sizes, default);
 
       @media (min-width: $threshold-4-6-col) {
@@ -552,12 +593,17 @@ $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
+        transform: rotate(0deg);
       }
     }
 
     &.is-active {
       &::after {
-        transform: rotate(180deg);
+        transform: rotate(0deg);
+
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: rotate(180deg);
+        }
       }
 
       .p-navigation__dropdown,
@@ -570,18 +616,29 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       // add padding to accommodate icon
       padding-right: 2 * $sph--small + map-get($icon-sizes, default);
     }
+
+    &:first-child .p-navigation__link::before {
+      content: none;
+    }
   }
 
   .p-navigation__dropdown-item {
     @extend %navigation-link-responsive-padding-horizontal;
+    @extend %navigation-link-responsive-padding-vertical;
+    @extend %vf-navigation-separator;
 
     display: block;
-    padding-bottom: $spv--small;
-    padding-top: $spv--small;
+    padding-left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large}); // make dropdown items align with the tag logo text
+    position: relative;
     white-space: nowrap;
 
+    @media (min-width: $threshold-4-6-col) {
+      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+    }
+
     @media (min-width: $breakpoint-navigation-threshold) {
       padding-bottom: $spv--medium;
+      padding-left: $sph--large;
       padding-top: $spv--medium;
     }
 
@@ -685,7 +742,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  .p-navigation__nav .p-navigation__link::before {
+  // add color to separator line for navigation items, navigation links and dropdown items
+  .p-navigation__nav .p-navigation__link::before,
+  .p-navigation__nav .p-navigation__items::before,
+  .p-navigation__nav .p-navigation__items .p-navigation__dropdown-item::before {
     background: $color-navigation-separator;
   }
 

package/scss/_patterns_rule.scss

@@ -0,0 +1,12 @@
+@import 'settings';
+
+@mixin vf-p-rule {
+  .p-rule,
+  .p-rule--highlight {
+    @extend %u-no-margin--bottom--hr;
+  }
+
+  .p-rule--highlight {
+    @include vf-highlight-bar($color-dark);
+  }
+}

package/scss/_patterns_section.scss

@@ -0,0 +1,15 @@
+@mixin vf-p-section {
+  .p-section {
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-regular * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-regular;
+    }
+  }
+
+  .p-block {
+    // same as %section-padding--shallow
+    padding-bottom: $spv--x-large;
+  }
+}

package/scss/_settings_spacing.scss

@@ -75,8 +75,9 @@ $spv--small: $sp-unit !default;
 $spv--medium: $sp-unit * 1.5 !default;
 $spv--large: $sp-unit * 2;
 $spv--x-large: $sp-unit * 3 !default;
+$spv--strip-shallow: $sp-unit * 3 !default;
 $spv--strip-regular: $sp-unit * 8 !default;
-$spv--strip-deep: $sp-unit * 12 !default;
+$spv--strip-deep: $sp-unit * 16 !default;
 
 $sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
 $sph--small: $sp-unit !default;

package/scss/_vanilla.scss

@@ -34,8 +34,10 @@
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
+@import 'patterns_rule';
 @import 'patterns_search-and-filter';
 @import 'patterns_search-box';
+@import 'patterns_section';
 @import 'patterns_separator';
 @import 'patterns_side-navigation';
 @import 'patterns_side-navigation-expandable';
@@ -92,6 +94,7 @@
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
+  @include vf-p-section;
   @include vf-p-badge;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
@@ -119,6 +122,7 @@
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pull-quotes;
+  @include vf-p-rule;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
   @include vf-p-segmented-control;