vanilla-framework 2.37.0 → 3.0.0-beta.2

package/scss/_patterns_notifications.scss

@@ -1,21 +1,21 @@
 @import 'settings';
 
 // space on the left of the icon + icon width + space on the right of the icon
-$notification-content-icon-space: 2 * $sph-inner + map-get($icon-sizes, default);
+$notification-content-icon-space: 2 * $sph--large + map-get($icon-sizes, default);
 
 // the icon is a background element, so it needs to be manually positioned to match the text next to it;
 // Step 1: push down by the same amount applied as padding top on text ($spv-nudge)
 // Step 2: to center the icon within the line-height of text, we subtract icon height from text line-height and multiply by .5; this is the amount we need to push the icon down by
 $borderless-notification-icon-vert-offset: $spv-nudge + 0.5 * (map-get($line-heights, default-text) - map-get($icon-sizes, default));
 // Step 3: Add the notification padding-top (if it exists); we have two cases, so at this point we create a second var that contains the first one + the notification padding-top
-$notification-icon-vert-offset: $spv-inner--small + $borderless-notification-icon-vert-offset;
+$notification-icon-vert-offset: $spv--small + $borderless-notification-icon-vert-offset;
 
 // normally, paragraphs use a large margin-bottom (currently 1.5rem) to ensure elements that follow are sufficiently spaced.
 // within the insulated context of a notification, less space is needed, as the notification itself has an ample margin on it.
 // We still need a little space so things like the border on the __meta do not crash into the preceding text element, so we use a reduced amount of margin
 // being text, it still needs to align to the baseline grid. So we need to subtract $spv-nudge (the amount applied to this text as padding-top) from the total amount of margin-bottom.
 // As a result, padding-top + margin-bottom == an exact multiple of the base spacing unit, $sp-unit (which is .5rem)
-$notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
+$notification-text-margin-bottom: $spv--large - $spv-nudge;
 
 // Notification style patterns
 @mixin vf-p-notification {
@@ -24,14 +24,14 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
     @extend %vf-is-bordered;
     @extend %vf-bg--x-light;
 
-    background-position: $sph-inner $notification-icon-vert-offset;
+    background-position: $sph--large $notification-icon-vert-offset;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     border-radius: 0 $border-radius $border-radius 0;
-    margin-bottom: $spv-outer--scaleable;
-    padding-bottom: calc(#{$spv-inner--small} - 1px);
+    margin-bottom: $spv--x-large;
+    padding-bottom: calc(#{$spv--small} - 1px);
     padding-left: $notification-content-icon-space;
-    padding-top: calc(#{$spv-inner--small} - 1px);
+    padding-top: calc(#{$spv--small} - 1px);
     position: relative;
 
     &::before {
@@ -43,7 +43,7 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
       background-position: 0 $borderless-notification-icon-vert-offset;
       border: none;
       margin-top: 0;
-      padding: 0 0 0 2 * $sph-inner;
+      padding: 0 0 0 2 * $sph--large;
 
       &::before {
         display: none;
@@ -75,7 +75,7 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
 
       margin-bottom: $notification-text-margin-bottom;
       max-width: unset;
-      padding-right: 2 * $sph-inner;
+      padding-right: 2 * $sph--large;
     }
 
     .p-notification__title {
@@ -102,8 +102,8 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
       background-size: unset;
       border: 0;
       position: absolute;
-      right: $sph-inner / 2;
-      top: $spv-outer--small;
+      right: $sph--large * 0.5;
+      top: $spv--small;
       width: $default-icon-size;
     }
 
@@ -113,9 +113,9 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
       align-items: flex-start;
       display: flex;
       justify-content: space-between;
-      margin-bottom: $spv-outer--small;
-      padding-right: $sph-inner;
-      padding-top: $spv-inner--small;
+      margin-bottom: $spv--small;
+      padding-right: $sph--large;
+      padding-top: $spv--small;
     }
 
     .p-notification__timestamp {
@@ -137,7 +137,7 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
     }
 
     .p-notification__action + .p-notification__action {
-      margin-left: $sph-outer;
+      margin-left: $sph--large;
     }
   }
 
@@ -146,7 +146,6 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
   @include vf-notifications-caution;
   @include vf-notifications-negative;
   @include vf-notifications-information;
-  @include vf-notifications-deprecated;
 }
 
 // Default notification styling
@@ -193,44 +192,3 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
     @include vf-icon-info($color-mid-dark);
   }
 }
-
-@mixin vf-notifications-deprecated {
-  @include deprecate('3.0.0', 'Use new notification structure instead') {
-    [class='p-notification'],
-    [class^='p-notification--'] {
-      position: relative;
-
-      .p-notification__response {
-        margin-bottom: $notification-text-margin-bottom;
-        padding-right: calc(#{$spv-inner--small} - 1px);
-        padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, p);
-      }
-
-      .p-notification__status {
-        @extend %bold;
-
-        display: block;
-      }
-
-      .p-notification__status::after,
-      .p-notification__action::before {
-        content: ' ';
-      }
-
-      .p-notification__response,
-      .p-notification--floating {
-        max-width: unset;
-      }
-
-      .p-icon--close {
-        background-color: transparent;
-        background-size: map-get($icon-sizes, default);
-        border: 0;
-        padding: $sp-unit;
-        position: absolute;
-        right: $sph-inner;
-        top: $notification-icon-vert-offset;
-      }
-    }
-  }
-}

package/scss/_patterns_pagination.scss

@@ -26,12 +26,12 @@
 
     & + & {
       &:not(:nth-child(2)):not(:nth-last-child(1)) {
-        margin-left: $sph-inner--small;
+        margin-left: $sph--small;
       }
 
       &:nth-child(2),
       &:nth-last-child(1) {
-        margin-left: $sph-outer;
+        margin-left: $sph--large;
       }
     }
 
@@ -52,15 +52,15 @@
   [class*='p-icon'] {
     .p-pagination__link--next &,
     .p-pagination__link--previous & {
-      margin-left: $sph-inner--small;
-      margin-right: $sph-inner--small;
+      margin-left: $sph--small;
+      margin-right: $sph--small;
 
       &:first-child {
-        margin-left: -#{$sph-inner--small};
+        margin-left: -$sph--small;
       }
 
       &:last-child {
-        margin-right: -#{$sph-inner--small};
+        margin-right: -#{$sph--small};
       }
     }
 

package/scss/_patterns_pull-quotes.scss

@@ -9,7 +9,7 @@
 
 @mixin vf-pull-quote {
   border: 0;
-  margin: $spv-outer--scaleable 0 $spv-outer--scaleable;
+  margin: $spv--x-large 0 $spv--x-large;
   overflow: visible;
   position: relative;
 
@@ -29,13 +29,13 @@
     .p-pull-quote__citation {
       @extend %vf-heading-6;
 
-      margin-top: $spv-inner--small;
+      margin-top: $spv--small;
     }
   }
 
   .p-pull-quote__image {
     height: $sp-x-large;
-    margin: $spv-inner--large 0 $spv-inner--small;
+    margin: $spv--large 0 $spv--small;
   }
 
   .p-pull-quote__quote {
@@ -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

@@ -14,7 +14,7 @@
   // this is the total width occupied by the search input clear button:
   // the buttons left and right padding, plus the width of the icon,
   // and finally the width of the focus outline defined above
-  $search-filter-actions-width: 2 * $sph-inner--small + map-get($icon-sizes, default) + $focus-outline-offset;
+  $search-filter-actions-width: 2 * $sph--small + map-get($icon-sizes, default) + $focus-outline-offset;
 
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
@@ -33,7 +33,7 @@
       height: auto;
       margin: 0;
       overflow: hidden;
-      padding-left: $sph-inner--small;
+      padding-left: $sph--small;
       padding-right: $search-filter-actions-width;
       position: relative;
 
@@ -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 {
@@ -76,7 +76,7 @@
       border-radius: $border-radius;
       box-shadow: $box-shadow;
       opacity: 1;
-      padding: $input-vertical-padding $sph-inner 0;
+      padding: $input-vertical-padding $sph--large 0;
       position: absolute;
       width: 100%;
       z-index: 9999;
@@ -127,7 +127,7 @@
       box-shadow: none;
       flex-grow: 1;
       margin-bottom: 0;
-      margin-left: -$sph-inner--small; // compensate for the left padding of the container
+      margin-left: -$sph--small; // compensate for the left padding of the container
       margin-right: -$search-filter-actions-width; // compensate for the space reserved for counter
       min-width: 6rem;
       position: relative;
@@ -138,7 +138,7 @@
     }
 
     .p-chip + .p-search-and-filter__box {
-      margin-left: $sph-inner--small;
+      margin-left: $sph--small;
     }
   }
 }
@@ -147,7 +147,7 @@
   .p-filter-panel-section {
     border-bottom: 1px solid $color-mid-x-light;
     margin: 0;
-    padding-bottom: $spv-inner--large;
+    padding-bottom: $spv--large;
 
     &:last-child {
       border: 0;

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;
@@ -20,8 +19,8 @@
       vertical-align: 0; // reset vertical-align, as icon is aligned to the parent container, not the baseline of the text.
 
       &:only-child {
-        margin-left: -#{$sph-inner--small};
-        margin-right: -#{$sph-inner--small};
+        margin-left: -$sph--small;
+        margin-right: -$sph--small;
       }
     }
   }

package/scss/_patterns_separator.scss

@@ -1,12 +1,12 @@
 @mixin vf-p-separator {
   .p-separator {
     // spacing based on %section-padding--default, but using margins on <hr>
-    margin-bottom: $spv-outer--regular-scaleable * 0.5;
-    margin-top: $spv-outer--regular-scaleable * 0.5;
+    margin-bottom: $spv--strip-regular * 0.5;
+    margin-top: $spv--strip-regular * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      margin-bottom: $spv-outer--regular-scaleable;
-      margin-top: $spv-outer--regular-scaleable;
+      margin-bottom: $spv--strip-regular;
+      margin-top: $spv--strip-regular;
     }
   }
 }

package/scss/_patterns_side-navigation.scss

@@ -77,10 +77,10 @@
   .p-side-navigation__drawer-header {
     border-bottom-style: solid;
     border-bottom-width: 1px;
-    margin-bottom: $spv-outer--small;
-    padding-bottom: calc(#{$spv-inner--small} - 1px); // compensate for border thickness
+    margin-bottom: $spv--small;
+    padding-bottom: calc(#{$spv--small} - 1px); // compensate for border thickness
     padding-left: 0.25rem; // nudge to visually align icon with text
-    padding-top: $spv-inner--small;
+    padding-top: $spv--small;
     position: sticky;
     top: 0;
     z-index: 1;
@@ -90,15 +90,12 @@
   .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;
 
       content: '';
-      margin-left: -#{$sph-inner--small};
-      margin-right: $sph-inner--small;
+      margin-left: -$sph--small;
+      margin-right: $sph--small;
     }
   }
 
@@ -116,7 +113,7 @@
     }
   }
 
-  @media (min-width: $breakpoint-medium) {
+  @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 {
@@ -163,7 +160,7 @@
     &::after {
       @include vf-side-navigation-spacing-left($prop: left);
 
-      bottom: -0.5 * $spv-outer--scaleable; // place border in the middle of the margin
+      bottom: -0.5 * $spv--x-large; // place border in the middle of the margin
     }
 
     .p-side-navigation--icons &::after {
@@ -187,9 +184,9 @@
     @include vf-side-navigation-spacing-left;
 
     display: flex;
-    padding-bottom: $spv-inner--x-small;
-    padding-right: $sph-inner;
-    padding-top: $spv-inner--x-small;
+    padding-bottom: $spv--x-small;
+    padding-right: $sph--large;
+    padding-top: $spv--x-small;
   }
 
   %side-navigation__link {
@@ -252,13 +249,13 @@
       @include vf-side-navigation-spacing-left($prop: left);
 
       position: absolute;
-      top: $spv-inner--small;
+      top: $spv--small;
     }
   }
 
   .p-side-navigation__status {
     margin-left: auto;
-    padding-left: $spv-inner--small;
+    padding-left: $spv--small;
   }
 
   // Styles for markup in raw HTML docs variant

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

@@ -9,7 +9,6 @@
     // stylelint-disable selector-max-type -- table elements can use selector types
     thead,
     tbody {
-      display: block; // for IE we need to force display block
       margin: 0;
     }
 
@@ -57,16 +56,4 @@
     }
     // stylelint-enable selector-max-type
   }
-
-  @include deprecate('3.0.0', 'Use the `.p-table--expanding` instead') {
-    .p-table-expanding {
-      // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-      @extend .p-table--expanding;
-
-      .p-table-expanding__panel {
-        // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-        @extend .p-table__expanding-panel;
-      }
-    }
-  }
 }

package/scss/_patterns_table-icons.scss

@@ -3,9 +3,9 @@
 @mixin vf-p-table-icons {
   .p-table__cell--icon-placeholder {
     $table-icon-size: map-get($icon-sizes, default);
-    $table-icon-margin: $sph-inner--small;
+    $table-icon-margin: $sph--small;
 
-    padding-left: $sph-inner--small + $table-icon-size + $table-icon-margin;
+    padding-left: $sph--small + $table-icon-size + $table-icon-margin;
 
     [class^='p-icon']:first-child {
       margin-left: -($table-icon-size + $table-icon-margin);

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;
@@ -31,8 +31,8 @@
           grid-gap: 0 map-get($grid-gutter-widths, small);
           grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
           grid-template-rows: auto;
-          margin-bottom: $spv-outer--scaleable;
-          padding: 0 $sph-inner;
+          margin-bottom: $spv--x-large;
+          padding: 0 $sph--large;
         }
 
         td,
@@ -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;
@@ -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/_patterns_tabs.scss

@@ -14,7 +14,7 @@
       @extend %vf-pseudo-border--bottom;
 
       display: flex;
-      margin: 0 auto $spv-outer--scaleable;
+      margin: 0 auto $spv--x-large;
       overflow-x: auto;
       padding: 0;
       position: relative;
@@ -47,7 +47,7 @@
       display: block;
       line-height: map-get($line-heights, default-text);
       margin-bottom: 0;
-      padding: $spv-inner--medium $sph-inner;
+      padding: $spv--medium $sph--large;
       position: relative;
 
       &::before {

package/scss/_patterns_tooltips.scss

@@ -41,7 +41,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
     display: none;
     left: -2 * $triangle-height;
     margin-bottom: 0;
-    padding: $spv-inner--small $sph-inner;
+    padding: $spv--small $sph--large;
     position: absolute;
     text-align: left;
     text-decoration: initial;
@@ -66,7 +66,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
       bottom: 100%;
       content: '';
       height: 0;
-      left: $sph-inner;
+      left: $sph--large;
       pointer-events: none;
       position: absolute;
       width: 0;
@@ -125,7 +125,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
       // tooltip
       &::before {
         left: initial;
-        right: $sph-inner;
+        right: $sph--large;
       }
 
       // hover overlay
@@ -157,7 +157,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
         }
 
         bottom: -2 * $triangle-height;
-        left: $sph-inner;
+        left: $sph--large;
       }
 
       // hover overlay
@@ -229,7 +229,7 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
 
         bottom: -2 * $triangle-height;
         left: initial;
-        right: $sph-inner;
+        right: $sph--large;
       }
 
       // hover overlay

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

@@ -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_grid.scss

@@ -7,7 +7,7 @@ $grid-columns-small: 4 !default;
 $grid-columns-medium: 6 !default;
 $grid-columns: 12 !default;
 $threshold-4-6-col: $breakpoint-small !default;
-$threshold-6-12-col: $breakpoint-medium !default;
+$threshold-6-12-col: $breakpoint-large !default;
 
 $grid-column-prefix: 'col-' !default;
 $grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;
@@ -26,9 +26,6 @@ $grid-margin-widths: (
   large: $sp-unit * 3,
 ) !default;
 
-@include deprecate('3.0.0', 'Use the `$grid-margin-widths` map instead') {
-  $grid-margin-width: $sph-outer--large !default;
-}
 // Grid breakout template
 $l-fluid-breakout-max-width: $grid-max-width !default;
 $l-fluid-breakout-aside-width: 14rem !default;