vanilla-framework 3.0.0-alpha.1 → 3.0.0-rc.1

package/scss/_patterns_matrix.scss

@@ -25,24 +25,22 @@
       border-top: none;
     }
 
-    @media (min-width: $breakpoint-small) {
+    @media (min-width: $threshold-4-6-col) {
       display: flex;
       flex-wrap: wrap;
       width: 33.333%;
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+      flex-direction: column;
+
       &:nth-child(2),
       &:nth-child(3) {
         border-top: none;
       }
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
-      flex-direction: column;
-    }
-
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-right: 1px solid $color-mid-light;
       padding-left: $spv--large;
       padding-right: $spv--large;
@@ -67,7 +65,7 @@
       }
     }
 
-    @media (min-width: $breakpoint-large) {
+    @media (min-width: $threshold-6-12-col) {
       // 3 items per row
       border-right: 1px solid $color-mid-light;
       width: 33.333%;
@@ -103,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)};
       }
     }
   }
@@ -128,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)};
       }
     }
   }
@@ -141,7 +139,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold) {
+    @media (max-width: $breakpoint-heading-threshold - 1) {
       margin-top: -#{$sp-unit};
     }
 

package/scss/_patterns_modal.scss

@@ -35,7 +35,7 @@
     right: $sph--x-large;
     width: auto;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       bottom: initial;
       left: initial;
       position: relative;

package/scss/_patterns_navigation.scss

@@ -14,7 +14,7 @@ $lightness-threshold: 70;
     padding-left: map-get($grid-margin-widths, small);
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: map-get($grid-margin-widths, medium);
+      padding-left: map-get($grid-margin-widths, default);
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -27,7 +27,7 @@ $lightness-threshold: 70;
     padding-right: map-get($grid-margin-widths, small);
 
     @media (min-width: $threshold-4-6-col) {
-      padding-right: map-get($grid-margin-widths, medium);
+      padding-right: map-get($grid-margin-widths, default);
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -102,8 +102,8 @@ $lightness-threshold: 70;
       order: -1;
 
       @media (min-width: $threshold-4-6-col) {
-        margin-left: map-get($grid-margin-widths, medium);
-        margin-right: map-get($grid-margin-widths, medium);
+        margin-left: map-get($grid-margin-widths, default);
+        margin-right: map-get($grid-margin-widths, default);
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
@@ -207,7 +207,7 @@ $lightness-threshold: 70;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
-      margin-right: map-get($grid-margin-widths, large);
+      margin-right: map-get($grid-margin-widths, default);
       width: 100%;
     }
   }
@@ -332,11 +332,11 @@ $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) {
-          right: map-get($grid-margin-widths, medium);
+          right: map-get($grid-margin-widths, default);
         }
 
         @media (min-width: $breakpoint-navigation-threshold) {
@@ -435,11 +435,11 @@ $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) {
-        right: map-get($grid-margin-widths, medium);
+        right: map-get($grid-margin-widths, default);
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {

package/scss/_patterns_pull-quotes.scss

@@ -108,7 +108,7 @@
   .p-pull-quote--large {
     .p-pull-quote__quote {
       &:first-of-type::before {
-        @media (max-width: $breakpoint-heading-threshold) {
+        @media (max-width: $breakpoint-heading-threshold - 1) {
           top: 0.75rem;
         }
       }

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 {
@@ -153,12 +153,14 @@
       border: 0;
     }
 
+    // hide chips lead when there are in panel
+    // FIXME: this should be handled in HTML/React, not CSS
     .p-chip {
-      @include vf-focus;
-
-      cursor: pointer;
+      .p-chip__lead {
+        display: none;
+      }
 
-      &__lead {
+      .p-chip__lead + .p-chip__value::before {
         display: none;
       }
     }

package/scss/_patterns_search-box.scss

@@ -6,7 +6,6 @@
     height: calc(#{2 * $spv-nudge + map-get($line-heights, default-text)} - #{2 * $bar-thickness}); // side padding + icon width - focus outline width * 2
     margin: $bar-thickness 0;
     position: relative;
-    width: auto;
 
     &:hover {
       background: inherit;

package/scss/_patterns_side-navigation.scss

@@ -90,9 +90,6 @@
   .p-side-navigation__toggle--in-drawer {
     @extend %vf-button-base;
 
-    // override base button styles that extend button to full width on mobile
-    width: auto;
-
     &::before {
       @extend %icon;
 
@@ -116,7 +113,7 @@
     }
   }
 
-  @media (min-width: $breakpoint-large) {
+  @media (min-width: $threshold-6-12-col) {
     // make whole navigation sticky on large screens
     .p-side-navigation.is-sticky,
     [class*='p-side-navigation--'].is-sticky {
@@ -360,11 +357,11 @@
   #{$prop}: $multiplier * map-get($grid-margin-widths, small) + $offset;
 
   @media (min-width: $threshold-4-6-col) {
-    #{$prop}: $multiplier * map-get($grid-margin-widths, medium) + $offset;
+    #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
   }
 
   @media (min-width: $threshold-6-12-col) {
-    #{$prop}: $multiplier * map-get($grid-margin-widths, large) + $offset;
+    #{$prop}: $multiplier * map-get($grid-margin-widths, default) + $offset;
   }
 }
 

package/scss/_patterns_strip.scss

@@ -134,7 +134,7 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
         background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;

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

@@ -20,10 +20,6 @@
         flow: row;
         wrap: wrap;
       }
-
-      + tr {
-        margin: 0;
-      }
     }
 
     th,

package/scss/_patterns_table-mobile-card.scss

@@ -10,7 +10,7 @@
       text-align: left;
     }
 
-    @media (max-width: $breakpoint-medium) {
+    @media (max-width: $threshold-6-12-col - 1) {
       @supports (display: grid) {
         thead {
           display: none;
@@ -56,10 +56,10 @@
             overflow: visible;
           }
 
-          &[aria-label]::before {
-            content: attr(aria-label);
+          &[data-heading]::before {
+            content: attr(data-heading);
             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;
@@ -82,12 +82,5 @@
 
       // stylelint-enable selector-max-type
     }
-
-    @media (max-width: $breakpoint-small) {
-      // stylelint-disable-next-line selector-max-type
-      tr {
-        width: 100%;
-      }
-    }
   }
 }

package/scss/_patterns_table-of-contents.scss

@@ -6,7 +6,7 @@
     font-size: 0.875rem;
     padding: 0 $sp-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-left: 1px solid $color-mid-light;
       border-top: 0;
       padding: 0 $sp-medium;

package/scss/_settings_breakpoints.scss

@@ -1,8 +1,7 @@
 // Global breakpoints
 $breakpoint-x-small: 460px !default;
 $breakpoint-small: 620px !default;
-$breakpoint-medium: 772px !default;
 $breakpoint-large: 1036px !default;
-$breakpoint-navigation-threshold: $breakpoint-medium !default;
-$breakpoint-heading-threshold: $breakpoint-medium !default;
+$breakpoint-navigation-threshold: $breakpoint-small !default;
+$breakpoint-heading-threshold: $breakpoint-large !default;
 $breakpoint-x-large: 1681px !default; // exclude most laptops

package/scss/_settings_colors.scss

@@ -39,7 +39,8 @@ $color-focus-negative: #3b0006 !default;
 
 // Button background color changes
 $hover-background-opacity-amount: 0.05;
-$active-background-opacity-amount: 0.08;
+$active-background-opacity-amount: 0.1;
+
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
 
@@ -92,6 +93,42 @@ $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;
 
+$colors-light-theme--tinted-backgrounds: (
+  neutral: (
+    default: #f2f2f2,
+    hover: adjust-color(#f2f2f2, $lightness: -100% * $hover-background-opacity-amount, $saturation: -100% * 2 * $hover-background-opacity-amount),
+    active: adjust-color(#f2f2f2, $lightness: -100% * $active-background-opacity-amount, $saturation: -100% * 2 * $active-background-opacity-amount),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 10%),
+    hover: hsl(129deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 39% / 10%),
+    hover: hsl(27deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(354deg 100% 39% / 10%),
+    hover: hsl(354deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(354deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 39% / 10%),
+    hover: hsl(210deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+);
+
+$colors-light-theme--tinted-borders: (
+  neutral: $colors--light-theme--border-high-contrast,
+  positive: $color-positive,
+  caution: hsl(27deg 100% 39%),
+  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
@@ -105,9 +142,45 @@ $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
 $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
-$colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
+$colors--dark-theme--border-high-contrast: hsl(0deg 0% 60%) !default;
 $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
+$colors-dark-theme--tinted-backgrounds: (
+  neutral: (
+    default: rgba(255, 255, 255, 0.15),
+    hover: rgba(255, 255, 255, 0.2),
+    active: rgba(255, 255, 255, 0.25),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 20%),
+    hover: hsl(129deg 100% 39% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 50% / 20%),
+    hover: hsl(27deg 100% 60% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(353deg 100% 70% / 20%),
+    hover: hsl(353deg 100% 70% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(353deg 100% 70% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 50% / 20%),
+    hover: hsl(210deg 100% 50% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+);
+
+$colors-dark-theme--tinted-borders: (
+  neutral: hsl(0deg 0% 65%),
+  positive: hsl(129deg 60% 65%),
+  caution: hsl(27deg 80% 65%),
+  negative: hsl(353deg 80% 70%),
+  information: hsl(210deg 80% 65%),
+);
+
 // Branding colors
 $color-brand: #333 !default;
 $color-brand-dark: $color-brand !default;

package/scss/_settings_grid.scss

@@ -16,14 +16,12 @@ $grid-large-col-prefix: #{$grid-column-prefix} !default;
 
 $grid-gutter-widths: (
   small: $sp-unit * 3,
-  medium: $sp-unit * 4,
-  large: $sp-unit * 4,
+  default: $sp-unit * 4,
 ) !default;
 
 $grid-margin-widths: (
   small: $sp-unit * 2,
-  medium: $sp-unit * 3,
-  large: $sp-unit * 3,
+  default: $sp-unit * 3,
 ) !default;
 
 // Grid breakout template

package/scss/_settings_spacing.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Typographic scale settings
 $ms-ratio: math.div(16, 14) !default;
 $sp-unit-ratio: 0.5 !default;
@@ -6,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,
@@ -35,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.
@@ -77,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;
@@ -84,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);
@@ -113,10 +115,10 @@ $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,
+  small: $sp-unit * 1.5,
   default: $sp-unit * 2,
   heading-icon--x-small: $sp-unit * 3,
   heading-icon--small: $sp-unit * 4,

package/scss/_settings_themes.scss

@@ -7,3 +7,4 @@ $theme-default-p-divider: 'light' !default;
 $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;
 $theme-default-p-button: 'light' !default;
+$theme-default-p-chip: 'light' !default;

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;
   }
 }

package/scss/_utilities_equal-height.scss

@@ -4,7 +4,7 @@
 @mixin vf-u-equal-height {
   // Default equal-height pattern styles
   .u-equal-height {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       display: flex;
 
       &.row {