vanilla-framework 3.0.0-beta.2 → 3.1.0

package/scss/_base_hr.scss

@@ -24,13 +24,13 @@
       width: calc(100% - #{2 * map-get($grid-margin-widths, small)});
 
       @media (min-width: $threshold-4-6-col) {
-        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, medium)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, medium)});
+        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
+        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
       }
 
       @media (min-width: $threshold-6-12-col) {
-        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, large)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, large)});
+        max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, default)});
+        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
       }
 
       .row &,

package/scss/_layouts_fluid-breakout.scss

@@ -25,13 +25,13 @@
     }
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: map-get($grid-margin-widths, medium);
-      padding-right: map-get($grid-margin-widths, medium);
+      padding-left: map-get($grid-margin-widths, default);
+      padding-right: map-get($grid-margin-widths, default);
     }
 
     @media (min-width: $threshold-6-12-col) {
-      padding-left: map-get($grid-margin-widths, large);
-      padding-right: map-get($grid-margin-widths, large);
+      padding-left: map-get($grid-margin-widths, default);
+      padding-right: map-get($grid-margin-widths, default);
     }
 
     @media (min-width: $l-fluid-breakout-3-col-threshold) {
@@ -51,8 +51,8 @@
       width: 100%;
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
-        padding-left: map-get($grid-margin-widths, large);
-        padding-right: map-get($grid-margin-widths, large);
+        padding-left: map-get($grid-margin-widths, default);
+        padding-right: map-get($grid-margin-widths, default);
       }
 
       @media (min-width: $breakpoint-large) {
@@ -97,11 +97,11 @@
       @extend %l-fluid-breakout__aside-common-properties#{$suffix};
 
       @media (min-width: $breakpoint-large) {
-        padding-right: map-get($grid-margin-widths, large);
+        padding-right: map-get($grid-margin-widths, default);
       }
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
-        padding-left: map-get($grid-margin-widths, large);
+        padding-left: map-get($grid-margin-widths, default);
         padding-right: 0;
       }
     }
@@ -110,13 +110,13 @@
       @extend %l-fluid-breakout__aside-common-properties#{$suffix};
 
       @media (min-width: $breakpoint-large) {
-        padding-left: map-get($grid-margin-widths, large);
+        padding-left: map-get($grid-margin-widths, default);
         padding-right: 0;
       }
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
         padding-left: 0;
-        padding-right: map-get($grid-margin-widths, large);
+        padding-right: map-get($grid-margin-widths, default);
       }
 
       @extend %l-fluid-breakout__aside-common-properties#{$suffix};
@@ -139,8 +139,8 @@
       }
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
-        margin-left: map-get($grid-margin-widths, large);
-        margin-right: map-get($grid-margin-widths, large);
+        margin-left: map-get($grid-margin-widths, default);
+        margin-right: map-get($grid-margin-widths, default);
       }
     }
 

package/scss/_patterns_chip.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import 'settings';
 
 @mixin vf-p-chip {
@@ -28,14 +29,12 @@
     }
 
     .p-chip__lead {
-      @extend %muted-text;
       @extend %x-small-text;
 
       text-transform: uppercase;
     }
 
     .p-chip__lead + .p-chip__value::before {
-      @extend %muted-text;
       @extend %x-small-text;
 
       content: ': ';
@@ -43,27 +42,21 @@
 
     .p-chip__value {
       @extend %small-text;
+      font-weight: $font-weight-bold;
     }
 
     .p-chip__dismiss {
-      @include vf-button-pattern(
-        $button-background-color: transparent,
-        $button-border-color: transparent,
-        $button-hover-background-color: transparent,
-        $button-hover-border-color: transparent
-      );
+      @extend %icon;
+      // also includes button and close icon styles in the theming section
 
       align-self: center;
-      border: none;
+      background-size: map-get($icon-sizes, small);
+      border-radius: 50%;
       flex: 0 0 auto;
-      height: $default-icon-size;
-      line-height: $default-icon-size;
-      margin-bottom: 0;
       margin-left: $sph--x-small;
-      margin-top: 0; // override top margin that button gets in some contexts (in paragraphs)
-      padding: 0;
-      position: relative;
-      width: $default-icon-size;
+      @media (min-width: $breakpoint-x-large) {
+        background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
+      }
     }
 
     &.is-dense {
@@ -71,66 +64,239 @@
     }
 
     &.is-inline {
-      margin-bottom: 0;
-      margin-top: 0;
+      margin: 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 {
+  .p-chip,
+  .p-chip--positive,
+  .p-chip--caution,
+  .p-chip--negative,
+  .p-chip--information {
     @extend %vf-chip;
-    @include vf-chip-type(default);
   }
-}
 
-@mixin vf-chip-positive {
-  .p-chip--positive {
-    @extend %vf-chip;
-    @include vf-chip-type(positive);
-  }
-}
+  // Theming
+  @if ($theme-default-p-chip == 'dark') {
+    .p-chip {
+      @include vf-chip-dark-theme;
+    }
+    .p-chip.is-light {
+      @include vf-chip-light-theme;
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip {
+      @include vf-chip-dark-theme($is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip.is-light {
+      @include vf-chip-light-theme($is-interactive: true);
+    }
 
-@mixin vf-chip-caution {
-  .p-chip--caution {
-    @extend %vf-chip;
-    @include vf-chip-type(caution);
-  }
-}
+    .p-chip--positive {
+      @include vf-chip-dark-theme(positive);
+    }
+    .p-chip--positive.is-light {
+      @include vf-chip-light-theme(positive);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--positive {
+      @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--positive.is-light {
+      @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
+    }
 
-@mixin vf-chip-negative {
-  .p-chip--negative {
-    @extend %vf-chip;
-    @include vf-chip-type(negative);
+    .p-chip--caution {
+      @include vf-chip-dark-theme(caution);
+    }
+    .p-chip--caution.is-light {
+      @include vf-chip-light-theme(caution);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--caution {
+      @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--caution.is-light {
+      @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
+    }
+
+    .p-chip--negative {
+      @include vf-chip-dark-theme(negative);
+    }
+    .p-chip--negative.is-light {
+      @include vf-chip-light-theme(negative);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--negative {
+      @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--negative.is-light {
+      @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
+    }
+
+    .p-chip--information {
+      @include vf-chip-dark-theme(information);
+    }
+    .p-chip--information.is-light {
+      @include vf-chip-light-theme(information);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--information {
+      @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--information.is-light {
+      @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
+    }
+  } @else {
+    .p-chip {
+      @include vf-chip-light-theme;
+    }
+    .p-chip.is-dark {
+      @include vf-chip-dark-theme;
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip {
+      @include vf-chip-light-theme($is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip.is-dark {
+      @include vf-chip-dark-theme($is-interactive: true);
+    }
+
+    .p-chip--positive {
+      @include vf-chip-light-theme(positive);
+    }
+    .p-chip--positive.is-dark {
+      @include vf-chip-dark-theme(positive);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--positive {
+      @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--positive.is-dark {
+      @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
+    }
+
+    .p-chip--caution {
+      @include vf-chip-light-theme(caution);
+    }
+    .p-chip--caution.is-dark {
+      @include vf-chip-dark-theme(caution);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--caution {
+      @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--caution.is-dark {
+      @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
+    }
+
+    .p-chip--negative {
+      @include vf-chip-light-theme(negative);
+    }
+    .p-chip--negative.is-dark {
+      @include vf-chip-dark-theme(negative);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--negative {
+      @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--negative.is-dark {
+      @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
+    }
+
+    .p-chip--information {
+      @include vf-chip-light-theme(information);
+    }
+    .p-chip--information.is-dark {
+      @include vf-chip-dark-theme(information);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--information {
+      @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
+    }
+    // stylelint-disable-next-line selector-max-type
+    button.p-chip--information.is-dark {
+      @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
+    }
   }
 }
 
-@mixin vf-chip-information {
-  .p-chip--information {
-    @extend %vf-chip;
-    @include vf-chip-type(information);
+@mixin vf-chip-theme($chip-type: neutral, $is-interactive: false, $colors-chip-tinted-backgrounds, $colors-chip-tinted-borders, $color-chip-value, $color-chip-lead) {
+  @if (not map-has-key($colors-chip-tinted-backgrounds, $chip-type)) {
+    $chip-type: neutral;
   }
-}
 
-@mixin vf-chip-type($type: neutral) {
-  $color-background: null;
-  $color-border: null;
+  $color-background: map-get($colors-chip-tinted-backgrounds, $chip-type, 'default');
+  $color-background-hover: map-get($colors-chip-tinted-backgrounds, $chip-type, 'hover');
+  $color-background-active: map-get($colors-chip-tinted-backgrounds, $chip-type, 'active');
+  $color-border: map-get($colors-chip-tinted-borders, $chip-type);
+
+  background-color: $color-background;
+  border: 1px solid $color-border;
 
-  @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);
+  .p-chip__value {
+    color: $color-chip-value;
+  }
+  .p-chip__lead,
+  .p-chip__lead + .p-chip__value::before {
+    color: $color-chip-lead;
+  }
+
+  @if ($is-interactive) {
+    &:hover {
+      background-color: $color-background-hover;
+      border-color: $color-border;
+    }
+    &[aria-pressed='true'],
+    &.is-selected,
+    &:active {
+      background-color: $color-background-active;
+      border-color: $color-border;
+    }
   } @else {
-    $color-background: map-get($colors-light-theme--tinted-backgrounds, neutral);
-    $color-border: map-get($colors-light-theme--tinted-borders, neutral);
+    .p-chip__dismiss {
+      @include vf-icon-close($color-chip-lead);
+
+      @include vf-button-pattern(
+        $button-background-color: transparent,
+        $button-border-color: transparent,
+        $button-hover-background-color: $color-background-hover,
+        $button-hover-border-color: transparent,
+        $button-active-background-color: $color-background-active,
+        $button-active-border-color: transparent
+      );
+    }
   }
+}
 
-  background-color: $color-background;
-  border: 1px solid $color-border;
+@mixin vf-chip-light-theme($chip-type: neutral, $is-interactive: false) {
+  @include vf-chip-theme(
+    $chip-type: $chip-type,
+    $is-interactive: $is-interactive,
+    $colors-chip-tinted-backgrounds: $colors-light-theme--tinted-backgrounds,
+    $colors-chip-tinted-borders: $colors-light-theme--tinted-borders,
+    $color-chip-value: $colors--light-theme--text-default,
+    $color-chip-lead: $colors--light-theme--text-default
+  );
+}
+
+@mixin vf-chip-dark-theme($chip-type: neutral, $is-interactive: false) {
+  @include vf-chip-theme(
+    $chip-type: $chip-type,
+    $is-interactive: $is-interactive,
+    $colors-chip-tinted-backgrounds: $colors-dark-theme--tinted-backgrounds,
+    $colors-chip-tinted-borders: $colors-dark-theme--tinted-borders,
+    $color-chip-value: $colors--dark-theme--text-default,
+    $color-chip-lead: $colors--dark-theme--text-default
+  );
 }

package/scss/_patterns_divider.scss

@@ -28,7 +28,7 @@
       &:not(:first-child)::before {
         bottom: 0;
         content: '';
-        left: map-get($grid-gutter-widths, large) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
+        left: map-get($grid-gutter-widths, default) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
         position: absolute;
         top: 0;
         width: 1px;

package/scss/_patterns_grid.scss

@@ -128,13 +128,13 @@
       right: map-get($grid-margin-widths, small);
 
       @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
-        left: map-get($grid-margin-widths, medium);
-        right: map-get($grid-margin-widths, medium);
+        left: map-get($grid-margin-widths, default);
+        right: map-get($grid-margin-widths, default);
       }
 
       @media (min-width: $threshold-6-12-col) {
-        left: map-get($grid-margin-widths, large);
-        right: map-get($grid-margin-widths, large);
+        left: map-get($grid-margin-widths, default);
+        right: map-get($grid-margin-widths, default);
       }
     }
   }

package/scss/_patterns_label.scss

@@ -22,52 +22,28 @@
     color: $color-x-light;
   }
 
-  @include vf-p-label-validated;
-  @include vf-p-label-in-progress;
-  @include vf-p-label-new;
-  @include vf-p-label-updated;
-  @include vf-p-label-deprecated;
-}
-
-// Override local variables
-@mixin vf-p-label-validated {
-  .p-label--validated {
+  .p-label--positive {
     @extend %vf-label;
 
-    background-color: $color-label-validated;
+    background-color: $color-positive;
     color: $color-x-light;
   }
-}
 
-@mixin vf-p-label-in-progress {
-  .p-label--in-progress {
+  .p-label--caution {
     @extend %vf-label;
 
     background-color: $color-caution;
     color: $color-dark;
   }
-}
 
-@mixin vf-p-label-new {
-  .p-label--new {
-    @extend %vf-label;
-
-    background-color: $color-positive;
-    color: $color-x-light;
-  }
-}
-
-@mixin vf-p-label-updated {
-  .p-label--updated {
+  .p-label--information {
     @extend %vf-label;
 
     background-color: $color-information;
     color: $color-x-light;
   }
-}
 
-@mixin vf-p-label-deprecated {
-  .p-label--deprecated {
+  .p-label--negative {
     @extend %vf-label;
 
     background-color: $color-negative;

package/scss/_patterns_lists.scss

@@ -29,6 +29,18 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     }
   }
 
+  %nested-counter {
+    // Counter is named and it will be reset for each "ol" element.
+    counter-reset: list-item;
+    li::marker {
+      // "counters" function returns a string representing the current value of the named counter ("list-item").
+      // It is used to insert a string between different levels of nested counters.
+      // Source: https://www.w3schools.com/css/css_counters.asp
+      content: counters(list-item, '.') '. ';
+      counter-increment: list-item;
+    }
+  }
+
   // Mixin for list items
   %vf-list-item {
     padding-bottom: $spv--x-small;
@@ -395,6 +407,12 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
+@mixin vf-p-list-nested-counter {
+  .p-list--nested-counter {
+    @extend %nested-counter;
+  }
+}
+
 @mixin vf-p-lists {
   @include vf-p-list-placeholders;
 
@@ -407,4 +425,5 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   @include vf-p-stepped-list;
   @include vf-p-stepped-list-detailed;
   @include vf-p-list-split;
+  @include vf-p-list-nested-counter;
 }

package/scss/_patterns_logo-section.scss

@@ -16,14 +16,14 @@
   @if $breakpoint == medium {
     $grid-column-count: $grid-columns-medium;
     $grid-column-prefix: $grid-medium-col-prefix;
-    $gutter: map-get($grid-gutter-widths, medium);
+    $gutter: map-get($grid-gutter-widths, default);
     $media-query-keyword: min-width;
     $media-query-width: $threshold-4-6-col;
     $logo-column-span: 1;
   } @else if $breakpoint == large {
     $grid-column-count: $grid-columns;
     $grid-column-prefix: $grid-large-col-prefix;
-    $gutter: map-get($grid-gutter-widths, large);
+    $gutter: map-get($grid-gutter-widths, default);
     $media-query-keyword: min-width;
     $media-query-width: $threshold-6-12-col;
     $logo-column-span: 2;
@@ -103,8 +103,8 @@
   }
 
   $margin-small: map-get($grid-gutter-widths, small);
-  $margin-medium: map-get($grid-gutter-widths, medium);
-  $margin-large: map-get($grid-gutter-widths, large);
+  $margin-medium: map-get($grid-gutter-widths, default);
+  $margin-large: map-get($grid-gutter-widths, default);
 
   .p-logo-section__items {
     display: flex;

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%;
     }
   }
@@ -336,7 +336,7 @@ $lightness-threshold: 70;
         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) {
@@ -439,7 +439,7 @@ $lightness-threshold: 70;
       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_notifications.scss

@@ -101,6 +101,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
       background-repeat: no-repeat;
       background-size: unset;
       border: 0;
+      // set the height of the button to be size of an icon + padding on top and bottom
+      height: calc(2 * $spv--small + $default-icon-size);
       position: absolute;
       right: $sph--large * 0.5;
       top: $spv--small;

package/scss/_patterns_pagination.scss

@@ -5,7 +5,8 @@
     @extend %vf-button-base;
     @include vf-button-pattern;
 
-    &.is-active {
+    &.is-active,
+    &[aria-current='page'] {
       background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
       color: $color-dark;
       text-decoration: none;

package/scss/_patterns_search-and-filter.scss

@@ -154,11 +154,15 @@
     }
 
     .p-chip {
-      @include vf-focus;
+      margin-bottom: $spv--small;
 
-      cursor: pointer;
+      // hide chips lead when there are in panel
+      // FIXME: this should be handled in HTML/React, not CSS
+      .p-chip__lead {
+        display: none;
+      }
 
-      &__lead {
+      .p-chip__lead + .p-chip__value::before {
         display: none;
       }
     }
@@ -175,7 +179,7 @@
       position: relative;
 
       &[aria-expanded='false'] {
-        max-height: 4rem;
+        max-height: 5rem; // 2 rows of chips
       }
     }