vanilla-framework 3.13.0 → 4.0.0-alpha.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "vanilla-framework",
-  "version": "3.13.0",
+  "version": "4.0.0-alpha.1",
   "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_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/_base_tables.scss

@@ -41,7 +41,7 @@
       @extend %table-header-label;
 
       padding-bottom: $spv--large - map-get($nudges, x-small);
-      padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
+      padding-top: map-get($nudges, x-small) + $sp-unit;
     }
 
     tr {

package/scss/_base_typography-definitions.scss

@@ -1,49 +1,20 @@
 @mixin vf-b-typography-definitions {
   //@section Heading styling in placeholders
-  %vf-heading-1 {
-    font-size: #{map-get($font-sizes, h1-mobile)}rem;
-    font-style: normal;
-    font-weight: $font-weight-display-heading;
-    line-height: map-get($line-heights, h1-mobile);
-    margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
-    margin-top: 0;
-    max-width: $text-max-width;
-    padding-top: map-get($nudges, h1-mobile) + map-get($browser-rounding-compensations, h1);
-
-    @media (min-width: $breakpoint-heading-threshold) {
-      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) + map-get($browser-rounding-compensations, h1);
-    }
-
-    @if ($increase-font-size-on-larger-screens) {
-      @media (min-width: $breakpoint-x-large) {
-        margin-bottom: map-get($sp-after, h1) - map-get($nudges, h1-large);
-        padding-top: map-get($nudges, h1-large) + map-get($browser-rounding-compensations, h1);
-      }
-    }
-
-    &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--h1;
-    }
-  }
-
   %vf-heading-2 {
     font-size: #{map-get($font-sizes, h2-mobile)}rem;
     font-style: normal;
-    font-weight: $font-weight-display-heading;
+    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) + map-get($browser-rounding-compensations, h2);
+    padding-top: map-get($nudges, h2-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) + map-get($browser-rounding-compensations, h2);
+      padding-top: map-get($nudges, h2);
     }
 
     &.u-no-margin--bottom {
@@ -51,10 +22,15 @@
     }
   }
 
+  %vf-heading-1 {
+    @extend %vf-heading-2;
+    font-weight: 550;
+  }
+
   %vf-heading-3 {
     font-size: #{map-get($font-sizes, h3-mobile)}rem;
     font-style: normal;
-    font-weight: $font-weight-display-heading;
+    font-weight: 550;
     line-height: map-get($line-heights, h3-mobile);
     margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
     margin-top: 0;
@@ -65,7 +41,7 @@
       font-size: #{map-get($font-sizes, h3)}rem;
       line-height: map-get($line-heights, h3);
       margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
-      padding-top: map-get($nudges, h3) + map-get($browser-rounding-compensations, h3);
+      padding-top: map-get($nudges, h3);
     }
 
     &.u-no-margin--bottom {
@@ -76,24 +52,24 @@
   %vf-heading-4 {
     font-size: #{map-get($font-sizes, h4-mobile)}rem;
     font-style: normal;
-    font-weight: $font-weight-thin;
+    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) + map-get($browser-rounding-compensations, h4);
+    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) + map-get($browser-rounding-compensations, 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) + map-get($browser-rounding-compensations, h4);
+        padding-top: map-get($nudges, h4-large);
       }
     }
 
@@ -105,12 +81,12 @@
   %vf-heading-5 {
     font-size: 1rem;
     font-style: normal;
-    font-weight: $font-weight-bold;
+    font-weight: 500;
     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) + map-get($browser-rounding-compensations, h5);
+    padding-top: map-get($nudges, p);
 
     &.u-no-margin--bottom {
       @extend %u-no-margin--bottom--default-text;
@@ -125,11 +101,11 @@
     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) + map-get($browser-rounding-compensations, h6);
+    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) + map-get($browser-rounding-compensations, h6);
+        padding-top: map-get($nudges, h6-large);
       }
     }
 
@@ -141,7 +117,7 @@
   %common-default-text-properties {
     line-height: map-get($line-heights, default-text);
     margin-top: 0;
-    padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
+    padding-top: map-get($nudges, p);
   }
 
   %default-text {
@@ -170,11 +146,11 @@
     font-size: #{map-get($font-sizes, small)}rem;
     line-height: map-get($line-heights, small);
     margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
-    padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small);
+    padding-top: map-get($nudges, small);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small-largescreen);
+        padding-top: map-get($nudges, small);
       }
     }
 
@@ -188,11 +164,11 @@
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, x-small);
     margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small);
-    padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small);
+    padding-top: map-get($nudges, x-small);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small-largescreen);
+        padding-top: map-get($nudges, x-small);
       }
     }
 
@@ -220,7 +196,7 @@
     // but now it's implemented with default text size not requiring any compensations,
     // so we need to reset the padding-top to the default value
     &.u-align-text--x-small-to-default {
-      padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
+      padding-top: map-get($nudges, p);
     }
   }
 

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_heading-icon.scss

@@ -19,30 +19,18 @@
 
   .p-heading-icon__img {
     flex-shrink: 0;
-    height: map-get($icon-sizes, heading-icon--small);
+    height: map-get($icon-sizes, heading-icon);
     margin-bottom: 0;
     margin-right: $sph--large;
-    margin-top: map-get($nudges, h3-mobile);
-    width: map-get($icon-sizes, heading-icon--small);
-
-    @media (min-width: $breakpoint-heading-threshold) {
-      height: map-get($icon-sizes, heading-icon);
-      margin-top: map-get($nudges, h3);
-      width: map-get($icon-sizes, heading-icon);
-    }
+    margin-top: calc(map-get($nudges, h3) / 2); // just a quick fix, should be calculated based on line height and icon size
+    width: map-get($icon-sizes, heading-icon);
   }
 
   .p-heading-icon--small {
     .p-heading-icon__img {
-      height: map-get($icon-sizes, heading-icon--x-small);
-      margin-top: $sp-x-small;
-      width: map-get($icon-sizes, heading-icon--x-small);
-
-      @media (min-width: $breakpoint-heading-threshold) {
-        height: map-get($icon-sizes, heading-icon--small);
-        margin-top: 0;
-        width: map-get($icon-sizes, heading-icon--small);
-      }
+      height: map-get($icon-sizes, heading-icon--small);
+      margin-top: map-get($nudges, h3);
+      width: map-get($icon-sizes, heading-icon--small);
     }
   }
 }

package/scss/_patterns_lists.scss

@@ -1,5 +1,6 @@
 @import 'settings';
 $list-status-icon-height: $default-icon-size;
+$list-step-bullet-margin: $sph--x-large;
 
 @mixin vf-p-list-placeholders {
   %numbered-step-container {
@@ -13,21 +14,19 @@ $list-status-icon-height: $default-icon-size;
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
+    padding-left: calc(map-get($line-heights, default-text) + $list-step-bullet-margin);
+    position: relative;
 
     &::before {
-      align-self: start;
-      background-color: $color-x-light;
-      border: 1px solid $color-x-dark;
-      border-radius: 100%;
-      content: counter(li);
+      content: counter(li) '.';
       counter-increment: li;
-      direction: rtl;
       display: block;
-      font-size: map-get($base-font-sizes, base);
-      font-weight: $font-weight-regular-text;
+      height: map-get($line-heights, default-text);
       left: 0;
+      margin-right: $list-step-bullet-margin;
       position: absolute;
-      text-align: center;
+      text-align: right;
+      width: map-get($line-heights, default-text);
     }
   }
 
@@ -116,6 +115,14 @@ $list-status-icon-height: $default-icon-size;
   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
@@ -326,74 +333,35 @@ $list-status-icon-height: $default-icon-size;
 
   .p-stepped-list__title {
     @extend %numbered-step-title;
-
-    padding-left: $bullet-width-mobile + $sph--large;
-
-    @media (min-width: $breakpoint-heading-threshold) {
-      padding-left: $bullet-width + $sph--large;
-    }
-
-    &::before {
-      // Need to account for the 1px border:
-      line-height: calc($bullet-width-mobile - 2px);
-      margin-right: $sph--large;
-      width: $bullet-width-mobile;
-
-      @media (min-width: $breakpoint-heading-threshold) {
-        // Need to account for the 1px border:
-        line-height: calc($bullet-width - 2px);
-        width: $bullet-width;
-      }
-    }
-    .p-strip--dark &::before {
-      background-color: $color-x-dark;
-      border: 1px solid $color-x-light;
-    }
   }
 
   .p-stepped-list__title + .p-stepped-list__content {
-    margin-left: $bullet-width-mobile + $sph--large;
+    margin-left: $bullet-width-mobile + $list-step-bullet-margin;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-left: $bullet-width + $sph--large;
+      margin-left: $bullet-width + $list-step-bullet-margin;
     }
   }
 
-  @for $i from 6 through 1 {
+  @for $i from 4 through 1 {
     // Bullet sizes for each heading level
-    $bullet-width: map-get($line-heights, default-text);
-    $bullet-width-mobile: map-get($line-heights, default-text);
-    // h6 line height is the same as the bullet width so no need to apply any margin:
-    $bullet-margin: 0;
-    $bullet-margin-mobile: 0;
-
-    @if $i < 5 {
-      // To align the bullet with the title we need to use half
-      // the height difference between the bullet and the title and then add the
-      // nudge to position it with the lower case text.
-      $bullet-margin: calc((map-get($line-heights, h#{$i}) - $bullet-width) / 2) + map-get($nudges, h#{$i});
-      $bullet-margin-mobile: calc((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i});
-    }
+    $bullet-width: map-get($line-heights, h#{$i});
+    $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
 
     .p-heading--#{$i}.p-stepped-list__title,
     h#{$i}.p-stepped-list__title {
-      padding-left: $bullet-width-mobile + $sph--large;
+      padding-left: $bullet-width-mobile + $list-step-bullet-margin;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        padding-left: $bullet-width + $sph--large;
+        padding-left: $bullet-width + $list-step-bullet-margin;
       }
 
       &::before {
-        // Need to account for the 1px border:
-        line-height: calc($bullet-width-mobile - 2px);
-        margin-right: $sph--large;
-        margin-top: $bullet-margin-mobile;
+        height: $bullet-width-mobile;
         width: $bullet-width-mobile;
 
         @media (min-width: $breakpoint-heading-threshold) {
-          // Need to account for the 1px border:
-          line-height: calc($bullet-width - 2px);
-          margin-top: $bullet-margin;
+          height: $bullet-width;
           width: $bullet-width;
         }
       }
@@ -401,10 +369,10 @@ $list-status-icon-height: $default-icon-size;
 
     .p-heading--#{$i}.p-stepped-list__title + .p-stepped-list__content,
     h#{$i}.p-stepped-list__title + .p-stepped-list__content {
-      margin-left: $bullet-width-mobile + $sph--large;
+      margin-left: $bullet-width-mobile + $list-step-bullet-margin;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        margin-left: $bullet-width + $sph--large;
+        margin-left: $bullet-width + $list-step-bullet-margin;
       }
     }
   }
@@ -431,7 +399,6 @@ $list-status-icon-height: $default-icon-size;
       }
 
       .p-stepped-list__title {
-        display: flex;
         grid-column-end: span 6;
         margin-left: 0;
       }
@@ -468,6 +435,7 @@ $list-status-icon-height: $default-icon-size;
         columns: 2;
 
         .p-list__item {
+          display: inline-block;
           width: 100%;
         }
       }

package/scss/_patterns_logo-section.scss

@@ -95,10 +95,7 @@
   // The logo section pattern needs to align logos to the grid when they are an even number, and center them (while maintaining the same logo width) when the number of logos on a line is odd.
   // This means we can't use css grid for this, instead we need to replicate its behavior for even numbers of logos, and center the odd ones.
   .p-logo-section__title {
-    @extend %x-small-text;
-
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
+    @extend %small-caps-text;
   }
 
   $margin-small: map-get($grid-gutter-widths, small);

package/scss/_patterns_matrix.scss

@@ -95,18 +95,19 @@
     align-self: flex-start;
     flex-shrink: 0;
     height: auto;
-    margin-bottom: $spv--small;
     margin-right: $matrix-img-gutter;
     margin-top: 0;
     width: $matrix-img-width;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-top: -#{map-get($nudges, h4)};
+      // place image in the middle of the heading text
+      margin-top: calc(map-get($nudges, h4) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-top: -#{map-get($nudges, h4-large)};
+        // place image in the middle of the heading text
+        margin-top: calc(map-get($nudges, h4-large) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
       }
     }
   }

package/scss/_patterns_navigation.scss

@@ -269,9 +269,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__logo-title {
-      @extend %vf-heading-4;
-      font-size: #{map-get($font-sizes, h4)}rem;
-      line-height: map-get($line-heights, x-small);
+      // font sizing adjusted to match logo
+      font-size: 1.3rem;
+      font-weight: 300;
+      line-height: $navigation-logo-size;
     }
 
     .p-navigation__link {

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_grid.scss

@@ -2,7 +2,7 @@
 @import 'settings_breakpoints';
 
 // Global grid settings
-$grid-max-width: 72rem !default;
+$grid-max-width: 80rem !default;
 $grid-columns-small: 4 !default;
 $grid-columns-medium: 6 !default;
 $grid-columns: 12 !default;

package/scss/_settings_spacing.scss

@@ -8,27 +8,27 @@ $sp-unit-ratio: 0.5 !default;
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
 $font-sizes: (
-  h1: pow($ms-ratio, 8),
-  h1-mobile: pow($ms-ratio, 6),
-  h2: pow($ms-ratio, 6),
-  h2-mobile: 1.83274,
-  h3: pow($ms-ratio, 4),
-  h3-mobile: pow($ms-ratio, 3),
-  h4: pow($ms-ratio, 2),
-  h4-mobile: 1.22176,
-  small: pow($ms-ratio, -1),
-  x-small: pow($ms-ratio, -2),
+  h1: 2.5,
+  h1-mobile: 2,
+  h2: 2.5,
+  h2-mobile: 2,
+  h3: 1.5,
+  h3-mobile: 1.5,
+  h4: 1.5,
+  h4-mobile: 1.5,
+  small: 0.875,
+  x-small: 0.75,
 ) !default;
 
 $line-heights: (
-  h1: 7 * $sp-unit,
-  h1-mobile: 6 * $sp-unit,
+  h1: 6 * $sp-unit,
+  h1-mobile: 5 * $sp-unit,
   h2: 6 * $sp-unit,
   h2-mobile: 5 * $sp-unit,
-  h3: 5 * $sp-unit,
+  h3: 4 * $sp-unit,
   h3-mobile: 4 * $sp-unit,
   h4: 4 * $sp-unit,
-  h4-mobile: 3 * $sp-unit,
+  h4-mobile: 4 * $sp-unit,
   default-text: 3 * $sp-unit,
   small: 2.5 * $sp-unit,
   x-small: 2 * $sp-unit,
@@ -36,18 +36,19 @@ $line-heights: (
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
-  h1-large: 0.15rem,
-  h1-mobile: 0.165rem,
-  h1: 0.2rem,
-  h2: 0.2rem,
-  h2-mobile: 0.1rem,
-  h3: 0.1rem,
-  h3-mobile: 0.5rem,
-  h4-large: 0,
-  h4: 0.05rem,
-  h4-mobile: 0.3rem,
-  h6: 0.338rem,
-  h6-large: 0.345rem,
+  h1-large: 0.55rem,
+  h1-mobile: 0.55rem,
+  h1: 0.55rem,
+  h2: 0.55rem,
+  h2-mobile: 0.55rem,
+  h3: 0.45rem,
+  h3-mobile: 0.45rem,
+  h4-large: 0.45rem,
+  h4: 0.45rem,
+  h4-mobile: 0.45rem,
+  h5: 0.4rem,
+  h6: 0.4rem,
+  h6-large: 0.4rem,
   p: 0.4rem,
   p-ubuntumono: 0.45rem,
   small: 0.05rem,
@@ -56,16 +57,17 @@ $nudges: (
 
 // Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
 // It is applied only to padding-top.
+// DEPRECATED, will be removed in 4.0
 $browser-rounding-compensations: (
-  h1: 0.001rem,
-  h2: 0.001rem,
-  h3: 0.001rem,
-  h4: 0.001rem,
-  h5: 0.001rem,
+  h1: 0,
+  h2: 0,
+  h3: 0,
+  h4: 0,
+  h5: 0,
   h6: 0,
-  p: 0.0005rem,
-  small-largescreen: 0.0006rem,
-  small: 0.0005rem,
+  p: 0,
+  small-largescreen: 0,
+  small: 0,
 ) !default;
 
 // Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
@@ -75,8 +77,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;
@@ -85,14 +88,14 @@ $sph--x-large: $sp-unit * 3 !default;
 
 // Space after text elements
 $sp-after: (
-  h1: $spv--large,
-  h1-mobile: $spv--large,
-  h2: $spv--large,
-  h2-mobile: $spv--large,
-  h3: $spv--large,
-  h3-mobile: $spv--large,
-  h4: $spv--large,
-  h4-mobile: $spv--large,
+  h1: $spv--x-large,
+  h1-mobile: $spv--x-large,
+  h2: $spv--x-large,
+  h2-mobile: $spv--x-large,
+  h3: $spv--x-large,
+  h3-mobile: $spv--x-large,
+  h4: $spv--x-large,
+  h4-mobile: $spv--x-large,
   p: $spv--x-large,
   p-dense: $spv--large,
   default-text: $sp-unit,

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;