vanilla-framework 2.37.0 → 3.0.0-beta.2

package/scss/_base_placeholders.scss

@@ -35,18 +35,16 @@
 
   %vf-card-padding {
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 
   %vf-card {
     @extend %vf-bg--x-light;
     @extend %vf-card-padding;
 
-    margin-bottom: $spv-outer--scaleable;
-  }
-
-  %vf-card-inner {
-    @extend %vf-card-padding;
+    margin-bottom: $spv--x-large;
+    overflow: auto; // prevent overflow of child margins
+    padding: $spv--large;
   }
 
   //accordion, table
@@ -102,38 +100,37 @@
 
   // Spacing
   %section-padding--shallow {
-    padding-bottom: $spv-outer--shallow-scaleable * 0.5;
-    padding-top: $spv-outer--shallow-scaleable * 0.5;
+    padding-bottom: $spv--x-large * 0.5;
+    padding-top: $spv--x-large * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv-outer--shallow-scaleable;
-      padding-top: $spv-outer--shallow-scaleable;
+      padding-bottom: $spv--x-large;
+      padding-top: $spv--x-large;
     }
   }
 
   %section-padding--default {
-    padding-bottom: $spv-outer--regular-scaleable * 0.5;
-    padding-top: $spv-outer--regular-scaleable * 0.5;
+    padding-bottom: $spv--strip-regular * 0.5;
+    padding-top: $spv--strip-regular * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv-outer--regular-scaleable;
-      padding-top: $spv-outer--regular-scaleable;
+      padding-bottom: $spv--strip-regular;
+      padding-top: $spv--strip-regular;
     }
   }
 
   %section-padding--deep {
-    padding: $spv-outer--deep-scaleable * 0.5 0 $spv-outer--deep-scaleable * 0.5;
+    padding: $spv--strip-deep * 0.5 0 $spv--strip-deep * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding: $spv-outer--deep-scaleable 0;
+      padding: $spv--strip-deep 0;
     }
   }
 
   // Utilities
   %vf-hide-text {
     overflow: hidden;
-    // vw value necessary because text indent in % does not work with padding,
-    // and IE 11 does not support calc() on text-indent;
+    // vw value necessary because text indent in % does not work with padding;
     // 110vw ensures the text is off the screen, and in most cases will
     // still be smaller than 9999px, so should have better performance
     text-indent: 110vw;
@@ -153,55 +150,55 @@
   }
 
   %u-no-margin--bottom--h1 {
-    margin-bottom: -#{map-get($nudges, nudge--h1-mobile)} !important;
+    margin-bottom: -#{map-get($nudges, h1-mobile)} !important;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h1)} !important;
+      margin-bottom: -#{map-get($nudges, h1)} !important;
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, nudge--h1-large)} !important;
+        margin-bottom: -#{map-get($nudges, h1-large)} !important;
       }
     }
   }
 
   %u-no-margin--bottom--h2 {
-    margin-bottom: -#{map-get($nudges, nudge--h2-mobile)} !important;
+    margin-bottom: -#{map-get($nudges, h2-mobile)} !important;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h2)} !important;
+      margin-bottom: -#{map-get($nudges, h2)} !important;
     }
   }
 
   %u-no-margin--bottom--h3 {
-    margin-bottom: #{$sp-unit - map-get($nudges, nudge--h3-mobile)} !important;
+    margin-bottom: #{$sp-unit - map-get($nudges, h3-mobile)} !important;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h3)} !important;
+      margin-bottom: -#{map-get($nudges, h3)} !important;
     }
   }
 
   %u-no-margin--bottom--h4 {
-    margin-bottom: #{$sp-unit - map-get($nudges, nudge--h4-mobile)} !important;
+    margin-bottom: #{$sp-unit - map-get($nudges, h4-mobile)} !important;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h4)} !important;
+      margin-bottom: -#{map-get($nudges, h4)} !important;
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, nudge--h4-large)} !important;
+        margin-bottom: -#{map-get($nudges, h4-large)} !important;
       }
     }
   }
 
   %u-no-margin--bottom--default-text {
-    margin-bottom: #{$sp-unit - map-get($nudges, nudge--p)} !important;
+    margin-bottom: #{$sp-unit - map-get($nudges, p)} !important;
   }
 
   %u-no-margin--bottom--small {
-    margin-bottom: -#{map-get($nudges, nudge--small)} !important;
+    margin-bottom: -#{map-get($nudges, small)} !important;
   }
 
   %u-no-margin--bottom--hr {

package/scss/_base_tables.scss

@@ -8,7 +8,7 @@
     border-collapse: collapse;
     caption-side: bottom;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow-x: auto;
     width: 100%;
 
@@ -25,8 +25,8 @@
 
     font-weight: $font-weight-regular-text;
     overflow: hidden;
-    padding-left: $sph-inner--small;
-    padding-right: $sph-inner--small;
+    padding-left: $sph--small;
+    padding-right: $sph--small;
     text-align: left;
     text-overflow: ellipsis;
     vertical-align: top;
@@ -40,8 +40,8 @@
     th {
       @extend %table-header-label;
 
-      padding-bottom: $spv-inner--large - map-get($nudges, nudge--x-small);
-      padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
+      padding-bottom: $spv--large - map-get($nudges, x-small);
+      padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
     }
 
     tr {
@@ -65,8 +65,8 @@
   }
 
   caption {
-    padding-bottom: $spv-inner--small;
-    padding-top: $spv-inner--small;
+    padding-bottom: $spv--small;
+    padding-top: $spv--small;
   }
   // stylelint-enable selector-max-type
 

package/scss/_base_typography-definitions.scss

@@ -1,29 +1,26 @@
-@import 'base_typography-max-widths';
-
 @mixin vf-b-typography-definitions {
   //@section Heading styling in placeholders
   %vf-heading-1 {
-    @include heading-max-width--short;
-
     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, nudge--h1-mobile);
+    margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, h1-mobile);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--h1-mobile) + map-get($browser-rounding-compensations, h1);
+    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, nudge--h1);
-      padding-top: map-get($nudges, nudge--h1) + map-get($browser-rounding-compensations, 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, nudge--h1-large);
-        padding-top: map-get($nudges, nudge--h1-large) + map-get($browser-rounding-compensations, h1);
+        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);
       }
     }
 
@@ -33,21 +30,20 @@
   }
 
   %vf-heading-2 {
-    @include heading-max-width--short;
-
     font-size: #{map-get($font-sizes, h2-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, h2-mobile);
-    margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, nudge--h2-mobile);
+    margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, h2-mobile);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--h2-mobile) + map-get($browser-rounding-compensations, h2);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, h2-mobile) + map-get($browser-rounding-compensations, h2);
 
     @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, nudge--h2);
-      padding-top: map-get($nudges, nudge--h2) + map-get($browser-rounding-compensations, h2);
+      margin-bottom: map-get($sp-after, h2) - map-get($nudges, h2);
+      padding-top: map-get($nudges, h2) + map-get($browser-rounding-compensations, h2);
     }
 
     &.u-no-margin--bottom {
@@ -56,21 +52,20 @@
   }
 
   %vf-heading-3 {
-    @include heading-max-width--long;
-
     font-size: #{map-get($font-sizes, h3-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, h3-mobile);
-    margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, nudge--h3-mobile);
+    margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, h3-mobile);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--h3-mobile);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, h3-mobile);
 
     @media (min-width: $breakpoint-heading-threshold) {
       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, nudge--h3);
-      padding-top: map-get($nudges, nudge--h3) + map-get($browser-rounding-compensations, h3);
+      margin-bottom: map-get($sp-after, h3) - map-get($nudges, h3);
+      padding-top: map-get($nudges, h3) + map-get($browser-rounding-compensations, h3);
     }
 
     &.u-no-margin--bottom {
@@ -79,27 +74,26 @@
   }
 
   %vf-heading-4 {
-    @include heading-max-width--long;
-
     font-size: #{map-get($font-sizes, h4-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, h4-mobile);
-    margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, nudge--h4-mobile);
+    margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--h4-mobile) + map-get($browser-rounding-compensations, h4);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, h4-mobile) + map-get($browser-rounding-compensations, h4);
 
     @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, nudge--h4);
-      padding-top: map-get($nudges, nudge--h4) + map-get($browser-rounding-compensations, h4);
+      margin-bottom: map-get($sp-after, h4) - map-get($nudges, h4);
+      padding-top: map-get($nudges, h4) + map-get($browser-rounding-compensations, h4);
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: map-get($sp-after, h4) - map-get($nudges, nudge--h4-large);
-        padding-top: map-get($nudges, nudge--h4-large) + map-get($browser-rounding-compensations, h4);
+        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);
       }
     }
 
@@ -109,15 +103,14 @@
   }
 
   %vf-heading-5 {
-    @include p-max-width;
-
     font-size: 1rem;
     font-style: normal;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
+    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, h5);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, h5);
 
     &.u-no-margin--bottom {
       @extend %u-no-margin--bottom--default-text;
@@ -125,19 +118,18 @@
   }
 
   %vf-heading-6 {
-    @include p-max-width;
-
     font-size: 1rem;
     font-style: italic;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
+    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--h6) + map-get($browser-rounding-compensations, h6);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, h6) + map-get($browser-rounding-compensations, h6);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        padding-top: map-get($nudges, nudge--h6-large) + map-get($browser-rounding-compensations, h6);
+        padding-top: map-get($nudges, h6-large) + map-get($browser-rounding-compensations, h6);
       }
     }
 
@@ -149,19 +141,19 @@
   %common-default-text-properties {
     line-height: map-get($line-heights, default-text);
     margin-top: 0;
-    padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, p);
+    padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
   }
 
   %default-text {
     @extend %common-default-text-properties;
 
-    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, nudge--p);
+    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
   }
 
   %paragraph {
     @extend %common-default-text-properties;
 
-    margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
+    margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
 
     &:not([class*='p-heading--']):not([class*='p-muted-heading']) + & {
       margin-top: -#{$sp-unit};
@@ -175,12 +167,12 @@
   %small-text {
     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, nudge--small);
-    padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small);
+    margin-bottom: map-get($sp-after, small) - map-get($nudges, small);
+    padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        padding-top: map-get($nudges, nudge--small) + map-get($browser-rounding-compensations, small-largescreen);
+        padding-top: map-get($nudges, small) + map-get($browser-rounding-compensations, small-largescreen);
       }
     }
 
@@ -193,12 +185,12 @@
     font-size: #{map-get($font-sizes, x-small)}rem;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, x-small);
-    margin-bottom: map-get($sp-after, x-small) - map-get($nudges, nudge--x-small);
-    padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, 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);
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small-largescreen);
+        padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small-largescreen);
       }
     }
 
@@ -234,42 +226,42 @@
   // Placeholder naming: $sp + -- + {preceding element} + {following element}, e.g. for p + h1: $sp--ph1
 
   %sp--ph1 {
-    padding-top: map-get($nudges, nudge--h1-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, h1-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h1) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, h1) + $spv--x-large;
     }
   }
 
   %sp--ph2 {
-    padding-top: map-get($nudges, nudge--h2-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, h2-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h2) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, h2) + $spv--x-large;
     }
   }
 
   %sp--ph3 {
-    padding-top: map-get($nudges, nudge--h3-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, h3-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h3) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, h3) + $spv--x-large;
     }
   }
 
   %sp--ph4 {
-    padding-top: map-get($nudges, nudge--h4-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, h4-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h4) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, h4) + $spv--x-large;
     }
   }
 
   %sp--ph5 {
-    padding-top: map-get($nudges, nudge--p) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, p) + $spv--x-large;
   }
 
   %sp--pmuted {
-    padding-top: map-get($nudges, nudge--small) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, small) + $spv--x-large;
   }
 }

package/scss/_base_typography.scss

@@ -1,16 +1,11 @@
 @import 'settings';
 @import 'base_fontfaces';
-@import 'base_typography-max-widths';
 @import 'base_typography-heading-mixins';
 
 // Typographic element styles
 @mixin vf-b-typography {
   @include vf-b-typography-fontfaces;
 
-  @include deprecate('3.0.0', 'The unused `vf-b-typography-max-widths` mixin will be removed') {
-    @include vf-b-typography-max-widths;
-  }
-
   // stylelint-disable selector-max-type -- base styles can use type selectors
   html {
     color: $color-dark;
@@ -62,7 +57,8 @@
 
   p {
     @extend %paragraph;
-    @include p-max-width;
+
+    max-width: $text-max-width;
   }
 
   .p-text--default {
@@ -74,7 +70,7 @@
     @extend %small-text;
 
     &.dense {
-      margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, nudge--small);
+      margin-bottom: map-get($sp-after, small--dense) + map-get($line-heights, default-text) - map-get($line-heights, small) - map-get($nudges, small);
     }
   }
 
@@ -92,35 +88,29 @@
   //@section Adjusted spacing for headings (or a p) following a paragraph
   p:not([class*='p-heading--']):not([class*='p-muted-heading']) {
     & + h1,
-    & + .p-heading--1,
-    & + .p-heading--one {
+    & + .p-heading--1 {
       @extend %sp--ph1;
     }
 
     & + h2,
-    & + .p-heading--2,
-    & + .p-heading--two {
+    & + .p-heading--2 {
       @extend %sp--ph2;
     }
 
     & + h3,
-    & + .p-heading--3,
-    & + .p-heading--three {
+    & + .p-heading--3 {
       @extend %sp--ph3;
     }
 
     & + h4,
-    & + .p-heading--4,
-    & + .p-heading--four {
+    & + .p-heading--4 {
       @extend %sp--ph4;
     }
 
     & + h5,
     & + .p-heading--5,
-    & + .p-heading--five,
     & + h6,
-    & + .p-heading--6,
-    & + .p-heading--six {
+    & + .p-heading--6 {
       @extend %sp--ph5;
     }
 

package/scss/_global_functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Functions used across multiple patterns or utils
 
 /// Replace `$search` with `$replace` in `$string`
@@ -38,16 +40,6 @@
   }
 }
 
-@mixin vf-external-link-color($color-link: $color-link, $color-icon: currentColor) {
-  .p-link--external {
-    color: $color-link;
-
-    &::after {
-      background-color: $color-icon;
-    }
-  }
-}
-
 // Returns the font color to be presented on the passed background-color
 // variable.
 @function vf-determine-text-color($background-color) {
@@ -101,7 +93,7 @@
     }
   } @else if $exponent < 0 {
     @for $i from 1 through -$exponent {
-      $value: $value / $number;
+      $value: math.div($value, $number);
     }
   }
 

package/scss/_layouts_application-panels.scss

@@ -62,7 +62,7 @@
 
   .p-panel__controls {
     margin-left: auto;
-    padding-top: $spv-inner--large;
+    padding-top: $spv--large;
   }
 
   .p-panel__toggle {

package/scss/_layouts_application.scss

@@ -3,7 +3,7 @@
 // default max width of the pinned aside panel in the application layout
 $application-layout--aside-panel-max-width: 50vw !default;
 // screen width breakpoint (min-width) at which side navigation is in collapsed mode
-$application-layout--breakpoint-side-nav-collapsed: $breakpoint-medium !default;
+$application-layout--breakpoint-side-nav-collapsed: $breakpoint-small !default;
 // screen width breakpoint (min-width) at which side navigation is in expanded mode
 $application-layout--breakpoint-side-nav-expanded: $breakpoint-large !default;
 // width of the collapsed side navigation