vanilla-framework 3.0.0-beta.1 → 3.0.1

package/scss/_patterns_chip.scss

@@ -1,90 +1,302 @@
+@use 'sass:math';
 @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;
+    }
 
-      &::after {
-        content: '\00a0:';
-        position: absolute;
-        right: $space-between-lead-and-value;
-      }
+    .p-chip__lead + .p-chip__value::before {
+      @extend %x-small-text;
+
+      content: ': ';
     }
 
     .p-chip__value {
       @extend %small-text;
+      font-weight: $font-weight-bold;
+    }
+
+    .p-chip__dismiss {
+      @extend %icon;
+      // also includes button and close icon styles in the theming section
 
-      line-height: $chip-line-height;
-      padding-top: 0.05rem;
+      align-self: center;
+      background-size: map-get($icon-sizes, small);
+      border-radius: 50%;
+      flex: 0 0 auto;
+      margin-left: $sph--x-small;
+      @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 {
+      padding: 0 $sph--small;
+    }
+
+    &.is-inline {
+      margin: 0;
+      vertical-align: baseline;
+    }
+  }
+
+  .p-chip,
+  .p-chip--positive,
+  .p-chip--caution,
+  .p-chip--negative,
+  .p-chip--information {
+    @extend %vf-chip;
+  }
+
+  // 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);
+    }
+
+    .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);
+    }
+
+    .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-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;
+  }
+
+  $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;
+
+  .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 {
     .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: transparent,
-        $button-hover-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
       );
-
-      border: none;
-      display: block;
-      flex: 0 0 auto;
-      left: $sp-unit * 0.5;
-      line-height: 1rem;
-      margin-bottom: 0;
-      margin-right: -$sp-unit * 0.5;
-      padding: 0;
-      position: relative;
-      top: 0.05rem;
-
-      [class*='p-icon'] {
-        vertical-align: calc(#{0.5 * $cap-height} - #{0.5 * $default-icon-size});
-      }
     }
   }
 }
+
+@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_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;
@@ -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_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_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

@@ -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_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 {
@@ -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
       }
     }
 

package/scss/_patterns_side-navigation.scss

@@ -357,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_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;
   }
 }