vanilla-framework 2.36.0 → 3.0.0-beta.1

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 {

package/scss/_patterns_grid.scss

@@ -1,22 +1,10 @@
 @import 'settings';
 
-@mixin vf-p-grid-modifications {
-  @include deprecate('3.0.0', 'vf-p-grid-modifications mixin will be removed') {
-    .row {
-      width: 100%;
-    }
-  }
-}
-
 // CSS grid implementation of columns for all screens sizes
 @mixin vf-grid-column($col) {
   @supports (display: grid) {
     grid-column-end: span #{$col};
 
-    // reset flex box fallback styles
-    margin-left: 0;
-    width: auto;
-
     //nesting
     @if $col > 1 {
       & .row {
@@ -31,7 +19,7 @@
   // (see https://github.com/canonical-web-and-design/vanilla-framework/issues/3199)
   .grid-demo [class*='#{$grid-column-prefix}'] {
     background: transparentize($color-negative, 0.9);
-    margin-bottom: $spv-outer--small;
+    margin-bottom: $spv--small;
   }
 
   .row {
@@ -39,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);
@@ -50,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);
@@ -65,9 +53,7 @@
     @for $i from $grid-columns through 1 {
       // set col-* to span respective number of columns on desktop
       .#{$grid-large-col-prefix}#{$i} {
-        // on large screens provide flex box column implementation for IE
         // on smaller screens let them display full width one under another
-        @include vf-grid-flex-column($i);
         @include vf-grid-column($i);
       }
     }
@@ -108,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} {
@@ -141,7 +127,7 @@
       position: absolute;
       right: map-get($grid-margin-widths, small);
 
-      @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) {
         left: map-get($grid-margin-widths, medium);
         right: map-get($grid-margin-widths, medium);
       }

package/scss/_patterns_heading-icon.scss

@@ -2,9 +2,9 @@
 
 @mixin vf-p-heading-icon {
   .p-heading-icon {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       margin-bottom: 0;
     }
   }
@@ -21,11 +21,11 @@
     flex-shrink: 0;
     height: map-get($icon-sizes, heading-icon--small);
     margin-bottom: 0;
-    margin-right: $sph-inner;
+    margin-right: $sph--large;
     margin-top: map-get($nudges, nudge--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);
       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_headings.scss

@@ -25,30 +25,4 @@
   .p-heading--6 {
     @extend %vf-heading-6;
   }
-
-  @include deprecate('3.0.0', 'Use the `p-heading--1`, `p-heading--2`, ... instead') {
-    .p-heading--one {
-      @extend %vf-heading-1;
-    }
-
-    .p-heading--two {
-      @extend %vf-heading-2;
-    }
-
-    .p-heading--three {
-      @extend %vf-heading-3;
-    }
-
-    .p-heading--four {
-      @extend %vf-heading-4;
-    }
-
-    .p-heading--five {
-      @extend %vf-heading-5;
-    }
-
-    .p-heading--six {
-      @extend %vf-heading-6;
-    }
-  }
 }

package/scss/_patterns_icons.scss

@@ -8,7 +8,6 @@
   @include vf-p-icon-expand;
   @include vf-p-icon-collapse;
   @include vf-p-icon-chevron;
-  @include vf-p-icon-contextual-menu;
   @include vf-p-icon-close;
   @include vf-p-icon-help;
   @include vf-p-icon-info;
@@ -24,7 +23,6 @@
   @include vf-p-icon-success;
   @include vf-p-icon-share;
   @include vf-p-icon-user;
-  @include vf-p-icon-question;
   @include vf-p-icon-spinner;
   @include vf-p-icon-facebook;
   @include vf-p-icon-github;
@@ -32,12 +30,9 @@
   @include vf-p-icon-instagram;
   @include vf-p-icon-linkedin;
   @include vf-p-icon-youtube;
-  @include vf-p-icon-canonical;
-  @include vf-p-icon-ubuntu;
   @include vf-p-icon-rss;
   @include vf-p-icon-email;
   @include vf-p-icon-sizes;
-  @include vf-p-icon-in-button;
   @include vf-p-icon-show;
   @include vf-p-icon-hide;
 }
@@ -46,7 +41,6 @@
   // stylelint-disable selector-max-type
   h1,
   .p-heading--1,
-  .p-heading--one,
   .u-match-h1 {
     [class*='p-icon'] {
       @include vf-icon-size($x-height);
@@ -57,7 +51,6 @@
 
   h2,
   .p-heading--2,
-  .p-heading--two,
   .u-match-h2 {
     [class*='p-icon'] {
       @include vf-icon-size($x-height);
@@ -68,7 +61,6 @@
 
   h3,
   .p-heading--3,
-  .p-heading--three,
   .u-match-h3 {
     [class*='p-icon'] {
       @include vf-icon-size($default-icon-size);
@@ -79,7 +71,6 @@
 
   h4,
   .p-heading--4,
-  .p-heading--four,
   .u-match-h4 {
     [class*='p-icon'] {
       vertical-align: 0;
@@ -166,20 +157,6 @@
   }
 }
 
-@mixin vf-p-icon-contextual-menu {
-  @include deprecate('3.0.0', 'Use the `p-icon--chevron` class instead') {
-    .p-icon--contextual-menu {
-      @extend %icon;
-      @include vf-icon-contextual-menu($color-mid-dark);
-
-      [class*='--dark'] &,
-      &.is-light {
-        @include vf-icon-contextual-menu($color-mid-x-light);
-      }
-    }
-  }
-}
-
 @mixin vf-p-icon-close {
   .p-icon--close {
     @extend %icon;
@@ -346,12 +323,6 @@
   }
 }
 
-@mixin vf-p-icon-question {
-  @include deprecate('3.0.0', 'Use the `p-icon--help` class instead') {
-    // moved to vf-p-icon-help
-  }
-}
-
 @mixin vf-p-icon-spinner {
   .p-icon--spinner {
     @extend %icon;
@@ -406,24 +377,6 @@
   }
 }
 
-@mixin vf-p-icon-canonical {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    .p-icon--canonical {
-      @extend %social-icon;
-      @include vf-icon-canonical;
-    }
-  }
-}
-
-@mixin vf-p-icon-ubuntu {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    .p-icon--ubuntu {
-      @extend %social-icon;
-      @include vf-icon-ubuntu;
-    }
-  }
-}
-
 @mixin vf-p-icon-rss {
   .p-icon--rss {
     @extend %social-icon;
@@ -456,17 +409,6 @@
   }
 }
 
-@mixin vf-p-icon-in-button {
-  @include deprecate('3.0.0', 'No longer necessary') {
-    // Style overides for icons within a button
-    [class*='p-button-'] {
-      [class*='p-icon-'] {
-        top: 0;
-      }
-    }
-  }
-}
-
 @mixin vf-p-icon-applications {
   .p-icon--applications {
     @extend %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-inner--small;
+    padding: map-get($nudges, nudge--x-small) $sph--small;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;