vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_patterns_accordion.scss

@@ -5,7 +5,7 @@
 
   .p-accordion__list {
     list-style-type: none;
-    margin: 0 0 $spv-outer--scaleable 0;
+    margin: 0 0 $spv--x-large 0;
     padding: 0;
   }
 
@@ -15,35 +15,31 @@
     }
   }
 
-  .p-accordion__tab,
-  .p-accordion__tab--with-title {
+  .p-accordion__tab {
+    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
+    // and offset to align it with baseline of accordion tab text element
+    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
+
     @extend %single-border-text-vpadding--scaling;
     @include vf-focus;
 
-    background-color: inherit;
+    background: {
+      color: inherit;
+      position: top $icon-top-position left $sph--large;
+      repeat: no-repeat;
+    }
+
     border: 0;
     border-radius: 0;
+    font-size: inherit;
     justify-content: flex-start;
     margin-bottom: 0;
-    padding-left: $sph-inner + $icon-size + $sph-inner;
-    padding-right: $sph-inner;
+    padding-left: $sph--large + $icon-size + $sph--large;
+    padding-right: $sph--large;
     text-align: left;
     transition-duration: 0s;
     width: 100%;
     z-index: 2;
-  }
-
-  .p-accordion__tab {
-    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
-    // and offset to align it with baseline of accordion tab text element
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
-
-    background: {
-      position: top $icon-top-position left $sph-inner;
-      repeat: no-repeat;
-    }
-
-    font-size: inherit;
 
     // aria-selected controls the open and closed state for the accordion tab
     &[aria-expanded='true'] {
@@ -65,57 +61,6 @@
     }
   }
 
-  @include deprecate('3.0.0', '.p-accordion__title and .p-accordion__tab--with-title are being deprecated, please use .p-accordion__heading > .p-accordion__tab pattern instead') {
-    .p-accordion__title {
-      margin-bottom: 0;
-      padding-top: 0;
-      position: relative;
-      text-indent: -$sph-inner - $icon-size;
-
-      &::before {
-        background-size: $icon-size;
-        content: '';
-        display: inline-block;
-        height: $icon-size;
-        margin-right: $sph-inner;
-        width: $icon-size;
-      }
-    }
-
-    // FIXME: we shouldn't be targeting types directly here
-    // stylelint-disable selector-max-type
-    h2.p-accordion__title::before {
-      // make icon bigger for h2 (same as p-icon)
-      $icon-size-h2: $x-height;
-
-      background-size: $icon-size-h2;
-      height: $icon-size-h2;
-      width: $icon-size-h2;
-    }
-
-    h5.p-accordion__title::before,
-    h6.p-accordion__title::before {
-      // align icon within font metrics same as p-icon pattern
-      $vertical-offset: 0.5px;
-
-      vertical-align: calc(#{$vertical-offset} + #{0.5 * $cap-height} - #{0.5 * $icon-size});
-    }
-    // stylelint-enable selector-max-type
-
-    // override base expanded button styles
-    .p-accordion__tab--with-title[aria-expanded] {
-      background-color: inherit;
-    }
-
-    .p-accordion__tab--with-title[aria-expanded='true'] .p-accordion__title::before {
-      @include vf-icon-minus($color-mid-dark);
-    }
-
-    .p-accordion__tab--with-title[aria-expanded='false'] .p-accordion__title::before {
-      @include vf-icon-plus($color-mid-dark);
-    }
-  }
-
   .p-accordion__heading {
     margin-bottom: 0;
     max-width: none;
@@ -154,7 +99,7 @@
   .p-accordion__panel {
     margin: 0;
     overflow: auto; // include child margins into its height
-    padding-left: $sph-inner + $icon-size + $sph-inner * 2;
+    padding-left: $sph--large + $icon-size + $sph--large * 2;
 
     // Hides panel content
     &[aria-hidden='true'] {

package/scss/_patterns_article-pagination.scss

@@ -49,17 +49,14 @@
     width: 50%;
   }
 
-  .p-article-pagination__link {
-    @extend %p-article-pagination__link;
-  }
-
   .p-article-pagination__link--previous {
     @extend %p-article-pagination__link;
 
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
+      margin-right: 0;
       width: auto;
 
       &:only-child {
@@ -87,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
       width: 100%;
     }
 

package/scss/_patterns_breadcrumbs.scss

@@ -21,7 +21,7 @@
     margin-bottom: $spv-nudge-compensation;
 
     &:not(:first-of-type) {
-      text-indent: $sph-outer;
+      text-indent: $sph--large;
     }
 
     &:not(:first-of-type)::before {

package/scss/_patterns_buttons.scss

@@ -5,7 +5,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 // Default button styling
 @mixin vf-p-buttons {
   @include vf-button-plain;
-  @include vf-button-neutral;
   @include vf-button-brand;
   @include vf-button-positive;
   @include vf-button-negative;
@@ -13,16 +12,9 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   @include vf-button-link;
   @include vf-button-inline;
   @include vf-button-processing;
-  @include vf-button-active;
   @include vf-button-icon;
 }
 
-@mixin vf-button-white-success-icon {
-  @include deprecate('3.0.0', 'vf-button-white-success-icon mixin will be removed as it is not needed, %vf-button-white-success-icon is part of base styles') {
-    //
-  }
-}
-
 @mixin vf-button-plain {
   %p-button-light {
     @include vf-button-pattern();
@@ -62,21 +54,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 }
 
-// p-button--neutral is is exactly the same as p-button, so we are deprecating it
-@mixin vf-button-neutral {
-  @include deprecate('3.0.0', 'Use the `p-button` instead') {
-    %p-button--neutral {
-      @extend %vf-button-base;
-
-      @include vf-button-pattern;
-    }
-
-    .p-button--neutral {
-      @extend %p-button--neutral;
-    }
-  }
-}
-
 @mixin vf-button-brand {
   %p-button--brand-light {
     @include vf-button-pattern(
@@ -313,10 +290,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 
 @mixin vf-button-inline {
   [class*='p-button'].is-inline {
-    @media (min-width: $breakpoint-x-small) {
-      margin-left: $sph-outer;
-      width: auto;
-    }
+    margin-left: $sph--large;
   }
 }
 
@@ -326,14 +300,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 }
 
-@mixin vf-button-active {
-  @include deprecate('3.0.0', 'Use the `vf-button-processing instead') {
-    [class*='p-button'].is-active {
-      opacity: 1 !important;
-    }
-  }
-}
-
 @mixin vf-button-icon {
   [class*='p-button'].has-icon {
     @extend %vf-button-has-icon;

package/scss/_patterns_card.scss

@@ -14,7 +14,7 @@
     @extend %vf-is-bordered;
     @extend %vf-has-round-corners;
 
-    padding: calc(#{$spv-inner--large} - 1px);
+    padding: calc(#{$spv--large} - 1px);
   }
 }
 
@@ -34,9 +34,9 @@
   .p-card--overlay {
     background: transparentize($color-x-light, 0.1);
     color: $color-dark;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 }
 
@@ -46,9 +46,9 @@
     @extend %vf-has-box-shadow;
     @extend %vf-has-round-corners;
 
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 }
 
@@ -58,13 +58,13 @@
 
   .p-card__image {
     display: block;
-    margin-bottom: $spv-inner--small;
+    margin-bottom: $spv--small;
     width: 100%;
   }
 
   .p-card__header {
     border-bottom: 1px solid $color-mid-light;
-    padding-bottom: $spv-inner--large;
+    padding-bottom: $spv--large;
 
     > .p-link--soft {
       display: inline-block;
@@ -73,7 +73,7 @@
   }
 
   .p-card__inner {
-    @extend %vf-card-inner;
+    @extend %vf-card-padding;
   }
 
   .p-card__content {

package/scss/_patterns_chip.scss

@@ -13,11 +13,11 @@
     border-radius: $chip-line-height;
     display: inline-flex;
     line-height: $chip-line-height;
-    margin: map-get($nudges, nudge--p) $sph-inner--small 0 0;
+    margin: map-get($nudges, nudge--p) $sph--small 0 0;
     max-width: 100%;
     padding-bottom: 0.25rem;
-    padding-left: $sph-inner;
-    padding-right: $sph-inner;
+    padding-left: $sph--large;
+    padding-right: $sph--large;
     padding-top: 0.25rem;
     user-select: none;
     white-space: nowrap;
@@ -82,10 +82,6 @@
       position: relative;
       top: 0.05rem;
 
-      @media (max-width: $breakpoint-x-small) {
-        width: auto;
-      }
-
       [class*='p-icon'] {
         vertical-align: calc(#{0.5 * $cap-height} - #{0.5 * $default-icon-size});
       }

package/scss/_patterns_code-snippet.scss

@@ -1,11 +1,11 @@
 @import 'settings';
 
 $color-snippet-heading-bg: rgba($color-x-dark, 0.08);
-$code-snippet-header-v-spacing: $spv-inner--small;
+$code-snippet-header-v-spacing: $spv--small;
 
 @mixin vf-p-code-snippet {
   .p-code-snippet {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
 
     &.is-bordered {
       border: 1px solid $colors--light-theme--border-low-contrast;
@@ -24,7 +24,7 @@ $code-snippet-header-v-spacing: $spv-inner--small;
     .p-code-snippet__block--icon {
       @extend %leading-linux-prompt-icon;
 
-      padding-left: #{$sph-inner + map-get($icon-sizes, default) + $sph-inner--small};
+      padding-left: #{$sph--large + map-get($icon-sizes, default) + $sph--small};
       position: relative;
 
       &.is-windows-prompt::before {
@@ -51,8 +51,8 @@ $code-snippet-header-v-spacing: $spv-inner--small;
       background-color: $color-code-heading-background;
       display: flex;
       justify-content: space-between;
-      padding-left: $sph-inner;
-      padding-right: $sph-inner;
+      padding-left: $sph--large;
+      padding-right: $sph--large;
     }
 
     .p-code-snippet__title {
@@ -71,10 +71,10 @@ $code-snippet-header-v-spacing: $spv-inner--small;
       border: 0;
       color: $color-dark;
       margin-bottom: 0;
-      margin-left: $sph-inner--small;
+      margin-left: $sph--small;
       min-width: min-content;
       padding-bottom: $code-snippet-header-v-spacing;
-      padding-left: $sph-inner;
+      padding-left: $sph--large;
       padding-top: $code-snippet-header-v-spacing;
       width: min-content;
     }

package/scss/_patterns_contextual-menu.scss

@@ -72,7 +72,7 @@
     display: block;
     margin: 0;
     overflow: hidden;
-    padding: $spv-inner--x-small $sph-inner;
+    padding: $spv--x-small $sph--large;
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;

package/scss/_patterns_divider.scss

@@ -4,15 +4,15 @@
   .p-divider {
     @extend %vf-row;
 
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
   }
 
   .p-divider__block {
     position: relative;
 
-    @media (max-width: $threshold-6-12-col) {
-      padding-bottom: $spv-inner--large;
-      padding-top: $spv-inner--large;
+    @media (max-width: $threshold-6-12-col - 1) {
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
 
       &:not(:first-child)::before {
         content: '';

package/scss/_patterns_form-help-text.scss

@@ -5,10 +5,10 @@
     @extend %small-text;
 
     color: $color-mid-dark;
-    margin-top: $sp-unit * 2 - $spv-outer--scaleable; // negate the effect of scaling, as we don't want helper text position to change when the density multiplier changes
+    margin-top: -$sp-unit;
 
     &.is-tick-element {
-      margin-left: $sph-inner + $form-tick-box-size;
+      margin-left: $sph--large + $form-tick-box-size;
     }
   }
 }

package/scss/_patterns_form-password-toggle.scss

@@ -5,12 +5,6 @@
     align-items: flex-start;
     display: flex;
     justify-content: space-between;
-
-    .p-button--base {
-      @media (max-width: $breakpoint-small) {
-        width: auto !important;
-      }
-    }
   }
 
   .p-form-password-toggle__label {