vanilla-framework 3.0.0-beta.1 → 3.0.0-beta.2

package/package.json

@@ -43,7 +43,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "files": [
     "_index.scss",
     "/scss",

package/scss/_base_button.scss

@@ -57,7 +57,7 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(#{map-get($nudges, nudge--small)} - 1px) $sph--small;
+      padding: calc(#{map-get($nudges, small)} - 1px) $sph--small;
     }
 
     &.is-small.is-dense {

package/scss/_base_details.scss

@@ -10,8 +10,8 @@
     @include vf-focus;
 
     margin-bottom: $spv-nudge; //push subsequent text onto baseline
-    max-width: $max-width--default;
-    padding-bottom: 2 * $sp-unit - map-get($nudges, nudge--p); // use padding instead of margin-bottom in order to make the focus state symmetric
+    max-width: $text-max-width;
+    padding-bottom: 2 * $sp-unit - map-get($nudges, p); // use padding instead of margin-bottom in order to make the focus state symmetric
   }
   // stylelint-enable selector-max-type
 }

package/scss/_base_forms.scss

@@ -85,8 +85,8 @@
     display: inline-block;
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
-    max-width: $max-width--default;
-    padding-top: map-get($nudges, nudge--p);
+    max-width: $text-max-width;
+    padding-top: map-get($nudges, p);
     width: fit-content;
 
     &.is-required::before {

package/scss/_base_placeholders.scss

@@ -150,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

@@ -40,8 +40,8 @@
     th {
       @extend %table-header-label;
 
-      padding-bottom: $spv--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 {

package/scss/_base_typography-definitions.scss

@@ -5,22 +5,22 @@
     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;
-    max-width: $max-width--default;
-    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);
       }
     }
 
@@ -34,16 +34,16 @@
     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;
-    max-width: $max-width--default;
-    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,16 +56,16 @@
     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;
-    max-width: $max-width--default;
-    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 {
@@ -78,22 +78,22 @@
     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;
-    max-width: $max-width--default;
-    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);
       }
     }
 
@@ -107,10 +107,10 @@
     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;
-    max-width: $max-width--default;
-    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;
@@ -122,14 +122,14 @@
     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;
-    max-width: $max-width--default;
-    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);
       }
     }
 
@@ -141,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};
@@ -167,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);
       }
     }
 
@@ -185,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);
       }
     }
 
@@ -226,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--x-large;
+    padding-top: map-get($nudges, h1-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h1) + $spv--x-large;
+      padding-top: map-get($nudges, h1) + $spv--x-large;
     }
   }
 
   %sp--ph2 {
-    padding-top: map-get($nudges, nudge--h2-mobile) + $spv--x-large;
+    padding-top: map-get($nudges, h2-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h2) + $spv--x-large;
+      padding-top: map-get($nudges, h2) + $spv--x-large;
     }
   }
 
   %sp--ph3 {
-    padding-top: map-get($nudges, nudge--h3-mobile) + $spv--x-large;
+    padding-top: map-get($nudges, h3-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h3) + $spv--x-large;
+      padding-top: map-get($nudges, h3) + $spv--x-large;
     }
   }
 
   %sp--ph4 {
-    padding-top: map-get($nudges, nudge--h4-mobile) + $spv--x-large;
+    padding-top: map-get($nudges, h4-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h4) + $spv--x-large;
+      padding-top: map-get($nudges, h4) + $spv--x-large;
     }
   }
 
   %sp--ph5 {
-    padding-top: map-get($nudges, nudge--p) + $spv--x-large;
+    padding-top: map-get($nudges, p) + $spv--x-large;
   }
 
   %sp--pmuted {
-    padding-top: map-get($nudges, nudge--small) + $spv--x-large;
+    padding-top: map-get($nudges, small) + $spv--x-large;
   }
 }

package/scss/_base_typography.scss

@@ -58,7 +58,7 @@
   p {
     @extend %paragraph;
 
-    max-width: $max-width--default;
+    max-width: $text-max-width;
   }
 
   .p-text--default {
@@ -70,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);
     }
   }
 

package/scss/_patterns_chip.scss

@@ -1,66 +1,48 @@
 @import 'settings';
 
 @mixin vf-p-chip {
-  $chip-line-height: 1rem;
-  $base-background-opacity-amount: 0.05;
-  $color-background-base: adjust-color($color-x-dark, $lightness: 100% * (1 - $base-background-opacity-amount));
-  $color-background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - ($base-background-opacity-amount + $hover-background-opacity-amount)));
-
-  .p-chip {
+  %vf-chip {
     @extend %small-text;
+    @include vf-animation(#{background-color, border-color}, snap, out);
+    @include vf-focus;
 
-    background-color: $color-background-base;
-    border-radius: $chip-line-height;
+    align-items: baseline;
+    border-radius: 1rem;
     display: inline-flex;
-    line-height: $chip-line-height;
-    margin: map-get($nudges, nudge--p) $sph--small 0 0;
+    margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding-bottom: 0.25rem;
-    padding-left: $sph--large;
-    padding-right: $sph--large;
-    padding-top: 0.25rem;
+    padding: calc(#{$spv--x-small} - 1px) $sph--small; // account for border thickness using calc
+    position: relative;
     user-select: none;
+    vertical-align: calc(1px - #{map-get($nudges, p)});
     white-space: nowrap;
 
-    &:hover {
-      background-color: $color-background-hover;
-    }
-
-    &.is-selected,
-    &:active {
-      background-color: $colors--light-theme--background-active;
-    }
-
     .p-chip__lead,
     .p-chip__value {
+      display: inline;
       margin-bottom: 0;
       overflow: hidden;
+      padding: 0;
       text-overflow: ellipsis;
+      vertical-align: baseline;
     }
 
     .p-chip__lead {
-      $space-between-lead-and-value: 0.25rem;
       @extend %muted-text;
       @extend %x-small-text;
 
-      line-height: $chip-line-height;
-      padding-right: $space-between-lead-and-value * 2;
-      padding-top: 0.1rem;
-      position: relative;
       text-transform: uppercase;
+    }
+
+    .p-chip__lead + .p-chip__value::before {
+      @extend %muted-text;
+      @extend %x-small-text;
 
-      &::after {
-        content: '\00a0:';
-        position: absolute;
-        right: $space-between-lead-and-value;
-      }
+      content: ': ';
     }
 
     .p-chip__value {
       @extend %small-text;
-
-      line-height: $chip-line-height;
-      padding-top: 0.05rem;
     }
 
     .p-chip__dismiss {
@@ -71,20 +53,84 @@
         $button-hover-border-color: transparent
       );
 
+      align-self: center;
       border: none;
-      display: block;
       flex: 0 0 auto;
-      left: $sp-unit * 0.5;
-      line-height: 1rem;
+      height: $default-icon-size;
+      line-height: $default-icon-size;
       margin-bottom: 0;
-      margin-right: -$sp-unit * 0.5;
+      margin-left: $sph--x-small;
+      margin-top: 0; // override top margin that button gets in some contexts (in paragraphs)
       padding: 0;
       position: relative;
-      top: 0.05rem;
+      width: $default-icon-size;
+    }
+
+    &.is-dense {
+      padding: 0 $sph--small;
+    }
 
-      [class*='p-icon'] {
-        vertical-align: calc(#{0.5 * $cap-height} - #{0.5 * $default-icon-size});
-      }
+    &.is-inline {
+      margin-bottom: 0;
+      margin-top: 0;
+      vertical-align: baseline;
     }
   }
+
+  @include vf-chip-default;
+  @include vf-chip-positive;
+  @include vf-chip-caution;
+  @include vf-chip-negative;
+  @include vf-chip-information;
+}
+
+@mixin vf-chip-default {
+  .p-chip {
+    @extend %vf-chip;
+    @include vf-chip-type(default);
+  }
+}
+
+@mixin vf-chip-positive {
+  .p-chip--positive {
+    @extend %vf-chip;
+    @include vf-chip-type(positive);
+  }
+}
+
+@mixin vf-chip-caution {
+  .p-chip--caution {
+    @extend %vf-chip;
+    @include vf-chip-type(caution);
+  }
+}
+
+@mixin vf-chip-negative {
+  .p-chip--negative {
+    @extend %vf-chip;
+    @include vf-chip-type(negative);
+  }
+}
+
+@mixin vf-chip-information {
+  .p-chip--information {
+    @extend %vf-chip;
+    @include vf-chip-type(information);
+  }
+}
+
+@mixin vf-chip-type($type: neutral) {
+  $color-background: null;
+  $color-border: null;
+
+  @if (map-has-key($colors-light-theme--tinted-backgrounds, $type)) {
+    $color-background: map-get($colors-light-theme--tinted-backgrounds, $type);
+    $color-border: map-get($colors-light-theme--tinted-borders, $type);
+  } @else {
+    $color-background: map-get($colors-light-theme--tinted-backgrounds, neutral);
+    $color-border: map-get($colors-light-theme--tinted-borders, neutral);
+  }
+
+  background-color: $color-background;
+  border: 1px solid $color-border;
 }

package/scss/_patterns_heading-icon.scss

@@ -22,12 +22,12 @@
     height: map-get($icon-sizes, heading-icon--small);
     margin-bottom: 0;
     margin-right: $sph--large;
-    margin-top: map-get($nudges, nudge--h3-mobile);
+    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, nudge--h3);
+      margin-top: map-get($nudges, h3);
       width: map-get($icon-sizes, heading-icon);
     }
   }

package/scss/_patterns_label.scss

@@ -9,7 +9,7 @@
     border-radius: $border-radius;
     display: inline-block;
     font-weight: $font-weight-bold;
-    padding: map-get($nudges, nudge--x-small) $sph--small;
+    padding: map-get($nudges, x-small) $sph--small;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;

package/scss/_patterns_matrix.scss

@@ -101,12 +101,12 @@
     width: $matrix-img-width;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-top: -#{map-get($nudges, nudge--h4)};
+      margin-top: -#{map-get($nudges, h4)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-top: -#{map-get($nudges, nudge--h4-large)};
+        margin-top: -#{map-get($nudges, h4-large)};
       }
     }
   }
@@ -126,12 +126,12 @@
     @extend %vf-heading-4;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, nudge--h4)};
+      margin-bottom: -#{map-get($nudges, h4)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, nudge--h4-large)};
+        margin-bottom: -#{map-get($nudges, h4-large)};
       }
     }
   }

package/scss/_patterns_navigation.scss

@@ -332,7 +332,7 @@ $lightness-threshold: 70;
         position: absolute;
         right: map-get($grid-margin-widths, small);
         text-indent: calc(100% + 10rem);
-        top: calc(#{$spv--large} + #{map-get($nudges, nudge--x-small)});
+        top: calc(#{$spv--large} + #{map-get($nudges, x-small)});
         width: map-get($icon-sizes, default);
 
         @media (min-width: $threshold-4-6-col) {
@@ -435,7 +435,7 @@ $lightness-threshold: 70;
       position: absolute;
       right: map-get($grid-margin-widths, small);
       text-indent: calc(100% + 10rem);
-      top: calc(#{$spv--large} + #{map-get($nudges, nudge--x-small)});
+      top: calc(#{$spv--large} + #{map-get($nudges, x-small)});
       width: map-get($icon-sizes, default);
 
       @media (min-width: $threshold-4-6-col) {

package/scss/_patterns_search-and-filter.scss

@@ -47,8 +47,8 @@
       }
 
       .p-chip {
-        margin-bottom: $sp-x-small;
-        margin-top: $sp-x-small;
+        margin-bottom: $spv--x-small;
+        margin-top: $spv--x-small;
       }
 
       .p-search-and-filter__selected-count {

package/scss/_patterns_switch.scss

@@ -3,11 +3,13 @@ $knob-size: $sp-unit * 3;
 
 @mixin vf-p-switch {
   .p-switch {
-    height: $knob-size;
+    display: flex;
+  }
+
+  .p-switch__input {
     margin: 0;
-    opacity: 0 !important; // override higher specificity of [type='checkbox'] selector
-    position: absolute !important; // override higher specificity of [type='checkbox'] selector
-    width: $knob-size * 2;
+    opacity: 0;
+    position: absolute;
 
     &:checked + .p-switch__slider::before {
       left: 50%;
@@ -31,9 +33,9 @@ $knob-size: $sp-unit * 3;
 
     background: linear-gradient(to right, $color-link 50%, $color-mid-light 50%);
     box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
-    display: block;
+    display: inline-block;
     height: $knob-size;
-    margin: $spv-nudge-compensation 0 0 0;
+    margin: 0;
     position: relative;
     width: $knob-size * 2;
 
@@ -49,11 +51,9 @@ $knob-size: $sp-unit * 3;
       position: absolute;
       width: $knob-size;
     }
+  }
 
-    // FIXME: we shouldn't be targeting span elements here
-    // stylelint-disable-next-line selector-max-type
-    & span {
-      @extend %vf-hide-text;
-    }
+  .p-switch__label {
+    margin-left: $sph--small;
   }
 }

package/scss/_patterns_table-mobile-card.scss

@@ -59,7 +59,7 @@
           &[aria-label]::before {
             content: attr(aria-label);
             display: block;
-            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, nudge--x-small) - $sp-unit;
+            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
             overflow: hidden;
             padding-left: 0;
             padding-right: 0;

package/scss/_settings_colors.scss

@@ -40,6 +40,7 @@ $color-focus-negative: #3b0006 !default;
 // Button background color changes
 $hover-background-opacity-amount: 0.05;
 $active-background-opacity-amount: 0.08;
+
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
 
@@ -92,6 +93,23 @@ $colors--light-theme--border-default: rgba($color-x-dark, 0.15) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
+//XXX: add dark theme versions of tinted background and border colours for use with dark theme chips, notificaitons, etc.
+$colors-light-theme--tinted-backgrounds: (
+  neutral: #f2f2f2,
+  positive: #e8fdec,
+  caution: #fef1dc,
+  negative: #fce8ea,
+  information: #e5f2ff,
+);
+
+$colors-light-theme--tinted-borders: (
+  neutral: $colors--light-theme--border-high-contrast,
+  positive: $color-positive,
+  caution: #ec6c04,
+  negative: $color-negative,
+  information: $color-information,
+);
+
 // Dark theme
 $colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;
 $colors--dark-theme--text-hover: hsl(0, 0%, 76%) !default; // minimum contrast on primary that satisfies contrast checker AA

package/scss/_settings_spacing.scss

@@ -8,27 +8,26 @@ $sp-unit-ratio: 0.5 !default;
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
 $font-sizes: (
-  x-small: pow($ms-ratio, -2),
-  small: pow($ms-ratio, -1),
-  root: 1,
-  h4-mobile: 1.22176,
-  h4: pow($ms-ratio, 2),
-  h3-mobile: pow($ms-ratio, 3),
-  h3: pow($ms-ratio, 4),
-  h2-mobile: 1.83274,
-  h2: pow($ms-ratio, 6),
-  h1-mobile: pow($ms-ratio, 6),
   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),
 );
 
 $line-heights: (
   h1: 7 * $sp-unit,
-  h2: 6 * $sp-unit,
-  h3: 5 * $sp-unit,
-  h4: 4 * $sp-unit,
   h1-mobile: 6 * $sp-unit,
+  h2: 6 * $sp-unit,
   h2-mobile: 5 * $sp-unit,
+  h3: 5 * $sp-unit,
   h3-mobile: 4 * $sp-unit,
+  h4: 4 * $sp-unit,
   h4-mobile: 3 * $sp-unit,
   default-text: 3 * $sp-unit,
   small: 2.5 * $sp-unit,
@@ -37,36 +36,36 @@ $line-heights: (
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
-  nudge--h1-large: 0.15rem,
-  nudge--h4-large: 0,
-  nudge--h1: 0.2rem,
-  nudge--h2: 0.2rem,
-  nudge--h3: 0.1rem,
-  nudge--h4: 0.05rem,
-  nudge--h6: 0.338rem,
-  nudge--h6-large: 0.345rem,
-  nudge--h1-mobile: 0.165rem,
-  nudge--h2-mobile: 0.1rem,
-  nudge--h3-mobile: 0.5rem,
-  nudge--h4-mobile: 0.3rem,
-  nudge--p: 0.4rem,
-  nudge--p-ubuntumono: 0.45rem,
-  nudge--small: 0.05rem,
-  nudge--x-small: 0.25rem,
+  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,
+  p: 0.4rem,
+  p-ubuntumono: 0.45rem,
+  small: 0.05rem,
+  x-small: 0.25rem,
 ) !default;
 
 // Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
 // It is applied only to padding-top.
 $browser-rounding-compensations: (
-  small: 0.0005rem,
-  small-largescreen: 0.0006rem,
-  p: 0.0005rem,
-  h6: 0,
-  h5: 0.001rem,
-  h4: 0.001rem,
-  h3: 0.001rem,
-  h2: 0.001rem,
   h1: 0.001rem,
+  h2: 0.001rem,
+  h3: 0.001rem,
+  h4: 0.001rem,
+  h5: 0.001rem,
+  h6: 0,
+  p: 0.0005rem,
+  small-largescreen: 0.0006rem,
+  small: 0.0005rem,
 ) !default;
 
 // Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
@@ -79,6 +78,7 @@ $spv--x-large: $sp-unit * 3 !default;
 $spv--strip-regular: $sp-unit * 8 !default;
 $spv--strip-deep: $sp-unit * 12 !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;
 $sph--large: $sp-unit * 2 !default;
 $sph--x-large: $sp-unit * 3 !default;
@@ -86,23 +86,23 @@ $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,
   p: $spv--x-large,
   p-dense: $spv--large,
-  h1-mobile: $spv--large,
-  h2-mobile: $spv--large,
-  h3-mobile: $spv--large,
-  h4-mobile: $spv--large,
+  default-text: $sp-unit,
   small: $spv--large,
   small--dense: $spv--large,
   x-small: $spv--large,
-  default-text: $sp-unit,
 ) !default;
 
 // commonly occuring calculations available as variables
-$spv-nudge: map-get($nudges, nudge--p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
+$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
 $input-vertical-padding: calc(#{$spv-nudge} - 1px);
@@ -115,7 +115,7 @@ $form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to
 $form-radio-inner-circle-diameter: 0.375rem;
 $form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);
 
-$max-width--default: 40em !default;
+$text-max-width: 40em !default;
 
 $icon-sizes: (
   accordion: $sp-unit * 1.5,

package/scss/_utilities_content-align.scss

@@ -60,10 +60,10 @@
   }
 
   .u-align-text--small-to-default {
-    padding-top: map-get($nudges, nudge--small) + $sp-unit;
+    padding-top: map-get($nudges, small) + $sp-unit;
   }
 
   .u-align-text--x-small-to-default {
-    padding-top: map-get($nudges, nudge--x-small) + $sp-unit;
+    padding-top: map-get($nudges, x-small) + $sp-unit;
   }
 }