vanilla-framework 3.9.0 → 3.11.0

package/package.json

@@ -47,7 +47,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.9.0",
+  "version": "3.11.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -58,10 +58,10 @@
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
     "autoprefixer": "10.4.13",
-    "postcss": "8.4.19",
+    "postcss": "8.4.21",
     "postcss-cli": "9.1.0",
     "postcss-scss": "4.0.6",
-    "sass": "1.56.1",
+    "sass": "1.57.1",
     "yaml": "1.10.2"
   },
   "devDependencies": {
@@ -71,8 +71,8 @@
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.8.0",
-    "stylelint": "14.16.0",
+    "prettier": "2.8.2",
+    "stylelint": "14.16.1",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_base_fontfaces.scss

@@ -1,187 +1,80 @@
 @mixin vf-b-typography-fontfaces {
   @at-root {
     @if str-index($font-base-family, 'Ubuntu') {
-      @if $font-use-subset-latin {
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-display-heading;
-          src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-      } @else {
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-display-heading;
-          src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
-        }
+      // Default font-display option
+      @font-face {
+        font-family: 'Ubuntu variable';
+        font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+        font-style: normal;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}f3b9cc97-Ubuntu[wdth,wght]-latin.woff2') format('woff2-variations');
+      }
 
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
-        }
+      @font-face {
+        font-family: 'Ubuntu variable';
+        font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+        font-style: italic;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}c1b12cdf-Ubuntu-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
+      }
 
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
-        }
+      @font-face {
+        font-family: 'Ubuntu Mono variable';
+        font-style: normal;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}0bd4277a-UbuntuMono[wght]-latin.woff2') format('woff2-variations');
       }
 
       @if $font-allow-cyrillic-greek-latin {
         // cyrillic-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}7d55b1fc-Ubuntu[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
           unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
         }
 
         // cyrillic
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}086e42aa-Ubuntu[wdth,wght]-cyrillic.woff2') format('woff2-variations');
           unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
         }
 
         // greek-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}77e5f6a2-Ubuntu[wdth,wght]-greek-extended.woff2') format('woff2-variations');
           unicode-range: U+1F00-1FFF;
         }
 
         // greek
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}57fdffc1-Ubuntu[wdth,wght]-greek.woff2') format('woff2-variations');
           unicode-range: U+0370-03FF;
         }
 
         // latin-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}a312a7ed-Ubuntu[wdth,wght]-latin-extended.woff2') format('woff2-variations');
           unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
         }
-
-        // latin
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
-          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-        }
       }
     }
   }

package/scss/_base_icon-definitions.scss

@@ -481,3 +481,7 @@
 @mixin vf-icon-linux-prompt($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
 }
+
+@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");
+}

package/scss/_base_placeholders.scss

@@ -228,7 +228,7 @@
 
   %social-icon {
     @extend %vf-hide-text;
-    @include vf-icon-size(map-get($icon-sizes, heading-icon--small));
+    @include vf-icon-size(map-get($icon-sizes, heading-icon--x-small));
 
     background-repeat: no-repeat;
     display: inline-block;

package/scss/_layouts_application.scss

@@ -235,7 +235,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-aside {
-    @include vf-transition($property: #{transform, box-shadow}, $duration: snap);
+    @include vf-transition($property: #{transform, box-shadow, visibility}, $duration: snap);
 
     box-shadow: $panel-drop-shadow;
     grid-area: main;
@@ -260,6 +260,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
     &.is-collapsed {
       box-shadow: $panel-drop-shadow-transparent;
       transform: translateX(100%);
+      visibility: hidden;
     }
 
     @media (min-width: $application-layout--breakpoint-side-nav-collapsed) {

package/scss/_layouts_full-width.scss

@@ -0,0 +1,86 @@
+@mixin vf-l-full-width {
+  $l-full-screen-aside-width: 15rem;
+
+  // we switch to full screen layout (with side navigation fixed to left side)
+  // when screen is big enough to fit side nav on left, same size on right, and grid
+  // in the middle
+  // we have to calculate media query breakpoint in px instead of rem to make sure
+  // we take into account bigger font size on large screens
+  $breakpoint-full-screen-layout: calc(($grid-max-width + 2 * $l-full-screen-aside-width) * $font-size-ratio--largescreen);
+  // TODO: make sure it works with grid-max-width set to 100% as in
+  // like: https://github.com/canonical/jaas-dashboard/blob/b9ca3876d054c48dc2da74df0080cd14a0f15740/src/scss/index.scss#L28
+
+  @media (min-width: $breakpoint-large) {
+    .l-full-width__sidebar {
+      background: $color-light;
+
+      // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
+      $navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);
+
+      height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
+      min-height: calc(100vh - $navigation-top-height);
+      position: absolute;
+      width: $l-full-screen-aside-width;
+      z-index: 1;
+
+      &::after {
+        background: linear-gradient(90deg, transparent, rgba($color-x-dark, 0.05));
+        bottom: 0;
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 8px;
+      }
+
+      // side navigation component drawer needs background only when it's fixed on smaller screens
+      // keep it transparent when it's visible as part of full width layout
+      .p-side-navigation__drawer {
+        background: transparent;
+      }
+    }
+
+    .l-full-width {
+      display: grid;
+      grid-template-areas: 'start main end';
+      grid-template-columns: $l-full-screen-aside-width minmax(0, 1fr) min-content;
+      width: 100%;
+
+      // left side container
+      .l-start {
+        grid-area: start;
+      }
+
+      // main container
+      .l-main {
+        grid-area: main;
+
+        // grid should align to the left (no left margin)
+        // TODO: ideally this should be applied to %fixed-width-container
+        .row,
+        .u-fixed-width {
+          margin-left: 0;
+        }
+      }
+
+      // right side container
+      .l-end {
+        grid-area: end;
+      }
+    }
+  }
+
+  // full width layout
+  @media (min-width: $breakpoint-full-screen-layout) {
+    .l-full-width {
+      grid-template-columns: $l-full-screen-aside-width minmax(0, 1fr) $l-full-screen-aside-width;
+
+      .l-main {
+        .row,
+        .u-fixed-width {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

package/scss/_patterns_icons.scss

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

package/scss/_settings_font.scss

@@ -1,8 +1,7 @@
 // Global font settings
-$font-base-family: '"Ubuntu", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif' !default;
-$font-monospace: '"Ubuntu Mono", Consolas, Monaco, Courier, monospace' !default;
+$font-base-family: '"Ubuntu variable", "Ubuntu", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif' !default;
+$font-monospace: '"Ubuntu Mono variable", "Ubuntu Mono", Consolas, Monaco, Courier, monospace' !default;
 $font-heading-family: $font-base-family !default;
-$font-use-subset-latin: false !default;
 $font-display-option: fallback !default;
 $font-allow-cyrillic-greek-latin: false !default;
 $increase-font-size-on-larger-screens: true !default;
@@ -13,8 +12,8 @@ $base-font-sizes: (
   large: $font-size-largescreen,
 ) !default;
 $font-weight-display-heading: 100 !default;
-$font-weight-regular-text: 300 !default;
-$font-weight-bold: 400 !default;
+$font-weight-regular-text: 400 !default;
+$font-weight-bold: 550 !default;
 
 // Ubuntu Font metrics
 $baseline-position: 0.932em !default; // HHead Ascent from the font file's metrics. Viewable in Fontforge Font Information>OS/2

package/scss/_vanilla.scss

@@ -54,6 +54,7 @@
 
 // Layouts
 @import 'layouts_application';
+@import 'layouts_full-width';
 @import 'layouts_site';
 @import 'layouts_fluid-breakout';
 
@@ -137,6 +138,7 @@
 
   // Layouts
   @include vf-l-application;
+  @include vf-l-full-width;
   @include vf-l-site;
   @include vf-l-fluid-breakout;