vanilla-framework 2.37.0 → 3.0.0-beta.2

package/scss/_patterns_chip.scss

@@ -1,66 +1,48 @@
 @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-inner--small 0 0;
+    margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding-bottom: 0.25rem;
-    padding-left: $sph-inner;
-    padding-right: $sph-inner;
-    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 %muted-text;
+      @extend %x-small-text;
+
+      content: ': ';
     }
 
     .p-chip__value {
       @extend %small-text;
-
-      line-height: $chip-line-height;
-      padding-top: 0.05rem;
     }
 
     .p-chip__dismiss {
@@ -71,24 +53,84 @@
         $button-hover-border-color: transparent
       );
 
+      align-self: center;
       border: none;
-      display: block;
       flex: 0 0 auto;
-      left: $sp-unit * 0.5;
-      line-height: 1rem;
+      height: $default-icon-size;
+      line-height: $default-icon-size;
       margin-bottom: 0;
-      margin-right: -$sp-unit * 0.5;
+      margin-left: $sph--x-small;
+      margin-top: 0; // override top margin that button gets in some contexts (in paragraphs)
       padding: 0;
       position: relative;
-      top: 0.05rem;
+      width: $default-icon-size;
+    }
 
-      @media (max-width: $breakpoint-x-small) {
-        width: auto;
-      }
+    &.is-dense {
+      padding: 0 $sph--small;
+    }
 
-      [class*='p-icon'] {
-        vertical-align: calc(#{0.5 * $cap-height} - #{0.5 * $default-icon-size});
-      }
+    &.is-inline {
+      margin-bottom: 0;
+      margin-top: 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 {
+    @extend %vf-chip;
+    @include vf-chip-type(default);
+  }
+}
+
+@mixin vf-chip-positive {
+  .p-chip--positive {
+    @extend %vf-chip;
+    @include vf-chip-type(positive);
+  }
+}
+
+@mixin vf-chip-caution {
+  .p-chip--caution {
+    @extend %vf-chip;
+    @include vf-chip-type(caution);
+  }
+}
+
+@mixin vf-chip-negative {
+  .p-chip--negative {
+    @extend %vf-chip;
+    @include vf-chip-type(negative);
+  }
+}
+
+@mixin vf-chip-information {
+  .p-chip--information {
+    @extend %vf-chip;
+    @include vf-chip-type(information);
+  }
+}
+
+@mixin vf-chip-type($type: neutral) {
+  $color-background: null;
+  $color-border: null;
+
+  @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);
+  } @else {
+    $color-background: map-get($colors-light-theme--tinted-backgrounds, neutral);
+    $color-border: map-get($colors-light-theme--tinted-borders, neutral);
+  }
+
+  background-color: $color-background;
+  border: 1px solid $color-border;
 }

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 {

package/scss/_patterns_form-tick-elements.scss

@@ -1,6 +1,126 @@
 @import 'settings';
 
 @mixin vf-p-form-tick-elements {
+  %vf-hidden-tick-input {
+    float: none;
+    height: $form-tick-box-size;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: $form-tick-box-size;
+  }
+
+  %vf-pseudo-tick-box {
+    padding-left: $sph--large + $form-tick-box-size;
+    position: relative;
+
+    &::before,
+    &::after {
+      $properties: #{background-color, border-color};
+      @include vf-animation($properties);
+
+      position: absolute;
+    }
+
+    // container
+    &::before {
+      content: '';
+      height: $form-tick-box-size;
+      left: 0;
+      outline-offset: 1px;
+      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-tick-box-nudge});
+      width: $form-tick-box-size;
+    }
+
+    // tick/circle
+    &::after {
+      content: '';
+      opacity: 0;
+    }
+
+    .p-muted-heading & {
+      color: $colors--light-theme--text-muted;
+    }
+  }
+
+  %vf-pseudo-tick-box-checked {
+    &::before {
+      background-color: $color-link;
+      border-color: $color-link;
+    }
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  %vf-pseudo-tick-box-focused {
+    &::before {
+      outline: $bar-thickness solid $color-focus;
+    }
+  }
+
+  %vf-pseudo-checkbox {
+    // container
+    &::before {
+      border-radius: $border-radius;
+    }
+
+    //tick
+    &::after {
+      border-bottom: 2px solid;
+      border-left: 2px solid;
+      height: $form-tick-height;
+      left: $form-tick-height * 0.5;
+      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-tick-offset-top} + #{$form-tick-box-nudge});
+      transform: rotate(-45deg);
+      width: 0.625rem;
+    }
+
+    [aria-checked='mixed'] + &,
+    :indeterminate + & {
+      @extend %vf-pseudo-tick-box-checked;
+
+      &::after {
+        border-left: none;
+        transform: none;
+      }
+    }
+  }
+
+  %vf-pseudo-radio {
+    &::before {
+      border-radius: 50%;
+    }
+
+    &::after {
+      border-radius: 50%;
+      height: $form-radio-inner-circle-diameter;
+      left: #{($form-tick-box-size - $form-radio-inner-circle-diameter) * 0.5};
+      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-radio-circle-offset} + #{$form-tick-box-nudge});
+      width: $form-radio-inner-circle-diameter;
+    }
+  }
+
+  .p-radio__label {
+    @extend %vf-pseudo-tick-box;
+    @extend %vf-pseudo-radio;
+  }
+
+  .p-checkbox__label {
+    @extend %vf-pseudo-tick-box;
+    @extend %vf-pseudo-checkbox;
+  }
+
+  // nudge ticks in headings back to the baseline
+  .p-checkbox--heading .p-checkbox__label,
+  .p-radio--heading .p-radio__label {
+    &::before,
+    &::after {
+      margin-top: -$form-tick-box-nudge;
+    }
+  }
+
   // contain the absolutely positioned input
   .p-checkbox,
   .p-checkbox--heading,
@@ -15,13 +135,13 @@
     &.is-required {
       &::before {
         display: block;
-        left: $sph-inner + $form-tick-box-size;
+        left: $sph--large + $form-tick-box-size;
         position: absolute;
         width: $asterisk-width;
       }
       .p-radio__label,
       .p-checkbox__label {
-        padding-left: calc(#{$sph-inner + $form-tick-box-size} + #{$asterisk-width});
+        padding-left: calc(#{$sph--large + $form-tick-box-size} + #{$asterisk-width});
       }
     }
   }
@@ -29,35 +149,25 @@
   // Fix label alignment when text drops to new line
   .p-checkbox,
   .p-radio {
-    padding-left: $sph-inner + $form-tick-box-size;
-    text-indent: -1 * ($sph-inner + $form-tick-box-size);
+    display: block;
+    padding-left: $sph--large + $form-tick-box-size;
+    text-indent: -1 * ($sph--large + $form-tick-box-size);
 
     &.is-required {
       &::before {
-        left: $sph-inner + $form-tick-box-size + $sph-inner + $form-tick-box-size;
+        left: $sph--large + $form-tick-box-size + $sph--large + $form-tick-box-size;
       }
     }
   }
 
-  // specify both [type] and class to fight specificity of base `label [type]` styles
-  [type='checkbox'].p-checkbox__input,
-  [type='radio'].p-radio__input {
+  .p-checkbox__input,
+  .p-radio__input {
     @extend %vf-hidden-tick-input;
 
     // adjust position of hidden inputs to place them approximately on the baseline
     bottom: 0.2em;
   }
 
-  .p-checkbox__label {
-    @extend %vf-pseudo-tick-box;
-    @extend %vf-pseudo-checkbox;
-  }
-
-  .p-radio__label {
-    @extend %vf-pseudo-tick-box;
-    @extend %vf-pseudo-radio;
-  }
-
   // inline variants
   .p-checkbox--heading,
   .p-checkbox--inline,
@@ -66,15 +176,6 @@
     display: inline;
   }
 
-  // nudge ticks in headings back to the baseline
-  .p-checkbox--heading .p-checkbox__label,
-  .p-radio--heading .p-radio__label {
-    &::before,
-    &::after {
-      margin-top: -$form-tick-box-nudge;
-    }
-  }
-
   // fake tick checked state
   .p-checkbox__input:checked + .p-checkbox__label,
   .p-radio__input:checked + .p-radio__label {
@@ -137,3 +238,92 @@
     }
   }
 }
+
+// theme for common properties on radios and checkboxes
+@mixin vf-tick-elements-theme(
+  // color of the tick element label text
+  $color-tick-text,
+  // color of the tick element background
+  $color-tick-background,
+  // color of the tick element border
+  $color-tick-border: $colors--light-theme--border-high-contrast
+) {
+  color: $color-tick-text;
+
+  &::before {
+    background: $color-tick-background;
+    border: 1px solid $color-tick-border;
+  }
+}
+
+// theme for checkbox (including common properties)
+@mixin vf-checkbox-theme(
+  // color of the tick element label text
+  $color-tick-text,
+  // color of the tick element background
+  $color-tick-background,
+  // color of the tick element border
+  $color-tick-border,
+  // color of the checkbox tick
+  $color-checkbox-tick
+) {
+  @include vf-tick-elements-theme($color-tick-text, $color-tick-background, $color-tick-border);
+
+  &::after {
+    color: $color-checkbox-tick;
+  }
+}
+
+@mixin vf-checkbox-light-theme {
+  @include vf-checkbox-theme(
+    $color-tick-text: $colors--light-theme--text-default,
+    $color-tick-background: $colors--light-theme--background-default,
+    $color-tick-border: $colors--light-theme--border-high-contrast,
+    $color-checkbox-tick: $colors--light-theme--background-default
+  );
+}
+
+@mixin vf-checkbox-dark-theme {
+  @include vf-checkbox-theme(
+    $color-tick-text: $colors--dark-theme--text-default,
+    $color-tick-background: $colors--dark-theme--background-default,
+    $color-tick-border: $colors--dark-theme--border-high-contrast,
+    $color-checkbox-tick: $colors--dark-theme--text-default
+  );
+}
+
+// theme for radio (including common properties)
+@mixin vf-radio-theme(
+  // color of the tick element label text
+  $color-tick-text,
+  // color of the tick element background
+  $color-tick-background,
+  // color of the tick element border
+  $color-tick-border,
+  // color of the radio dot
+  $color-radio-dot
+) {
+  @include vf-tick-elements-theme($color-tick-text, $color-tick-background, $color-tick-border);
+
+  &::after {
+    background-color: $color-radio-dot;
+  }
+}
+
+@mixin vf-radio-light-theme {
+  @include vf-radio-theme(
+    $color-tick-text: $colors--light-theme--text-default,
+    $color-tick-background: $colors--light-theme--background-default,
+    $color-tick-border: $colors--light-theme--border-high-contrast,
+    $color-radio-dot: $colors--light-theme--background-default
+  );
+}
+
+@mixin vf-radio-dark-theme {
+  @include vf-radio-theme(
+    $color-tick-text: $colors--dark-theme--text-default,
+    $color-tick-background: $colors--dark-theme--background-default,
+    $color-tick-border: $colors--dark-theme--border-high-contrast,
+    $color-radio-dot: $colors--dark-theme--text-default
+  );
+}

package/scss/_patterns_form-validation.scss

@@ -7,14 +7,14 @@
   %vf-validation-wrapper {
     background-position: left, center;
     background-repeat: no-repeat;
-    padding-left: calc(#{$icon-size} + #{$sph-inner--small});
+    padding-left: calc(#{$icon-size} + #{$sph--small});
     padding-top: 0;
   }
 
   .p-form-validation__message {
     @extend %small-text;
 
-    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-success {

package/scss/_patterns_forms.scss

@@ -8,7 +8,7 @@
   // We should avoid targetting form element types
   // stylelint-disable-next-line selector-max-type
   form + [class*='p-button'] {
-    margin-top: $spv-outer--scaleable;
+    margin-top: $spv--x-large;
   }
 }
 
@@ -17,11 +17,11 @@
     width: 100%;
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         align-items: baseline;
 
         + .p-form__group {
-          margin-top: $spv-inner--small;
+          margin-top: $spv--small;
         }
       }
     }
@@ -30,19 +30,19 @@
 
 @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;
       flex-wrap: wrap;
 
       > * {
-        margin-right: $sph-inner--large;
+        margin-right: $sph--x-large;
       }
     }
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         display: flex;
         flex-shrink: 1;
         width: auto;
@@ -60,7 +60,7 @@
 
         .p-form__label {
           flex-shrink: 0;
-          padding-right: $sph-inner;
+          padding-right: $sph--large;
         }
 
         .p-form__control {