vanilla-framework 3.14.0 → 4.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "3.14.0",
+  "version": "4.0.0-alpha.1",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

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_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);
     }
   }
 
@@ -334,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;
         }
       }
@@ -409,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;
       }
     }
   }
@@ -439,7 +399,6 @@ $list-status-icon-height: $default-icon-size;
       }
 
       .p-stepped-list__title {
-        display: flex;
         grid-column-end: span 6;
         margin-left: 0;
       }

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/_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.
@@ -86,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,