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

package/scss/_patterns_chip.scss

@@ -1,94 +1,301 @@
 @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
+
+      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: 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;
+    }
+  }
 
-      line-height: $chip-line-height;
-      padding-top: 0.05rem;
+  .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;
-
-      @media (max-width: $breakpoint-x-small) {
-        width: auto;
-      }
-
-      [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

@@ -10,7 +10,7 @@
   .p-divider__block {
     position: relative;
 
-    @media (max-width: $threshold-6-12-col) {
+    @media (max-width: $threshold-6-12-col - 1) {
       padding-bottom: $spv--large;
       padding-top: $spv--large;
 
@@ -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_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 {

package/scss/_patterns_form-tick-elements.scss

@@ -149,6 +149,7 @@
   // Fix label alignment when text drops to new line
   .p-checkbox,
   .p-radio {
+    display: block;
     padding-left: $sph--large + $form-tick-box-size;
     text-indent: -1 * ($sph--large + $form-tick-box-size);
 

package/scss/_patterns_forms.scss

@@ -17,7 +17,7 @@
     width: 100%;
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         align-items: baseline;
 
         + .p-form__group {
@@ -30,7 +30,7 @@
 
 @mixin vf-p-forms-inline {
   .p-form--inline {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       align-items: baseline;
       display: inline-flex;
       flex-direction: row;
@@ -42,7 +42,7 @@
     }
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         display: flex;
         flex-shrink: 1;
         width: auto;

package/scss/_patterns_grid.scss

@@ -27,7 +27,7 @@
   }
 
   // mobile grid
-  @media (max-width: $threshold-4-6-col) {
+  @media (max-width: $threshold-4-6-col - 1) {
     @for $i from $grid-columns-small through 1 {
       .#{$grid-small-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -38,7 +38,7 @@
   }
 
   // tablet grid
-  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
     @for $i from $grid-columns-medium through 1 {
       .#{$grid-medium-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -94,11 +94,11 @@
   @each $label, $breakpoint-min, $breakpoint-max, $col-count in $offsets {
     $query: null;
     @if $breakpoint-min == 0 {
-      $query: '(max-width: #{$breakpoint-max})';
+      $query: '(max-width: #{$breakpoint-max - 1})';
     } @else if $breakpoint-max == -1 {
       $query: '(min-width: #{$breakpoint-min})';
     } @else {
-      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max})';
+      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max - 1})';
     }
 
     @media #{$query} {
@@ -127,14 +127,14 @@
       position: absolute;
       right: map-get($grid-margin-widths, small);
 
-      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
-        left: map-get($grid-margin-widths, medium);
-        right: map-get($grid-margin-widths, medium);
+      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+        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

@@ -4,7 +4,7 @@
   .p-heading-icon {
     margin-bottom: $spv--x-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       margin-bottom: 0;
     }
   }
@@ -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-medium) {
+    @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);
     }
   }
@@ -38,7 +38,7 @@
       margin-top: $sp-x-small;
       width: map-get($icon-sizes, heading-icon--x-small);
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $breakpoint-heading-threshold) {
         height: map-get($icon-sizes, heading-icon--small);
         margin-top: 0;
         width: map-get($icon-sizes, heading-icon--small);

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_list-tree.scss

@@ -77,7 +77,6 @@
     margin: 0 0.5rem 0 -1.75rem;
     padding: 0 0.5rem 0 1.75rem;
     transition-duration: 0s;
-    width: auto;
 
     &:hover {
       background: transparent;

package/scss/_patterns_lists.scss

@@ -347,7 +347,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       @extend %vf-row;
       @include vf-b-row-reset;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         padding-top: $sp-unit;
         position: relative;
 
@@ -368,7 +368,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 // Adaptor class `is-split` to split the items of a list into two columns
 @mixin vf-p-list-split {
   [class*='p-list'].is-split {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) {
       @supports ((-webkit-columns: 1) or (columns: 1)) {
         column-gap: $sp-x-large;
         columns: 2;

package/scss/_patterns_logo-section.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin vf-p-set-logo-section-item-width($breakpoint: small) {
   // This mixin calculates the width of an individual logo.
 
@@ -14,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;
@@ -101,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;