vanilla-framework 3.8.2 → 3.9.0

package/package.json

@@ -47,7 +47,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.8.2",
+  "version": "3.9.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -58,22 +58,22 @@
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
     "autoprefixer": "10.4.13",
-    "postcss": "8.4.18",
+    "postcss": "8.4.19",
     "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.5",
-    "sass": "1.56.0",
+    "postcss-scss": "4.0.6",
+    "sass": "1.56.1",
     "yaml": "1.10.2"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
-    "@testing-library/cypress": "8.0.3",
+    "@testing-library/cypress": "8.0.7",
     "cypress": "10.11.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.7.1",
-    "stylelint": "14.14.1",
-    "stylelint-config-prettier": "9.0.3",
+    "prettier": "2.8.0",
+    "stylelint": "14.16.0",
+    "stylelint-config-prettier": "9.0.4",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",

package/scss/_base_button.scss

@@ -9,17 +9,16 @@
   }
 
   %vf-button-dense-vertical-padding {
-    padding-bottom: calc(#{$spv-nudge - $sp-unit * 0.5} - 1px);
-    padding-top: calc(#{$spv-nudge - $sp-unit * 0.5} - 1px);
+    padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+    padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
   }
 
   %vf-button-base {
     @include vf-transition(#{background-color, border-color}, snap, in);
     @include vf-focus;
 
-    border-radius: $border-radius;
     border-style: solid;
-    border-width: 1px;
+    border-width: $input-border-thickness;
     cursor: pointer;
     display: inline-block;
     font-size: 1rem;
@@ -57,13 +56,13 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(#{map-get($nudges, small)} - 1px) $sph--small;
+      padding: calc(map-get($nudges, small) - $input-border-thickness) $sph--small;
     }
 
     &.is-small.is-dense {
       margin-bottom: $spv-nudge-compensation;
-      padding-bottom: calc(#{$spv-nudge - $sp-unit * 0.5} - 1px);
-      padding-top: calc(#{$spv-nudge - $sp-unit * 0.5} - 1px);
+      padding-bottom: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
+      padding-top: calc($spv-nudge - $sp-unit * 0.5 - $input-border-thickness);
     }
 
     // The following rules address buttons nested in <p>'s;

package/scss/_base_code.scss

@@ -2,7 +2,7 @@
 
 $color-pre-bg: rgba($color-x-dark, 0.03);
 $digit-width: 1ch; // measured width of one character in the monospaced font
-$code-sidebar-width: calc(#{$sph--large} + (4 * #{$digit-width})) !default;
+$code-sidebar-width: calc($sph--large + (4 * $digit-width)) !default;
 $code-inline-padding: 0.25rem;
 
 // Base code styles
@@ -30,7 +30,7 @@ $code-inline-padding: 0.25rem;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
-    padding: calc(#{$code-inline-padding} - 1px) $code-inline-padding;
+    padding: calc($code-inline-padding - $input-border-thickness) $code-inline-padding;
   }
 
   code,
@@ -124,7 +124,7 @@ $code-inline-padding: 0.25rem;
       user-select: none;
       // We're adding a negative left position above of $digit-width,
       // so the width here needs to take that into account
-      width: calc(#{$code-sidebar-width} + #{$digit-width});
+      width: calc($code-sidebar-width + $digit-width);
     }
   }
 }

package/scss/_base_forms-range.scss

@@ -2,7 +2,7 @@
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
   $thumb-size: 1rem;
   $thumb-radius: 50%;
-  $thumb-border: 1px solid $color-mid-dark;
+  $thumb-border: $input-border-thickness solid $color-mid-dark;
   $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 

package/scss/_base_forms.scss

@@ -4,7 +4,6 @@
 // Form element styles
 @mixin vf-b-forms {
   @include vf-b-range;
-
   // Used in buttons, inputs
   %bordered-text-vertical-padding {
     padding-bottom: $input-vertical-padding;
@@ -15,17 +14,17 @@
   %vf-input-elements {
     @extend %bordered-text-vertical-padding;
     @include vf-focus($color-focus, $bar-thickness, true);
+    @include vf-animation(#{background-color}, fast);
 
     // stylelint-disable property-no-vendor-prefix
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
     // stylelint-enable property-no-vendor-prefix
-
-    background-color: $color-x-light;
-    border: 1px solid $colors--light-theme--border-high-contrast;
+    background-color: $colors--light-theme--background-inputs;
+    border: 0 solid transparent;
+    border-bottom: $input-border-thickness solid $colors--light-theme--text-default;
     border-radius: 0;
-    box-shadow: inset 0 1px 1px $color-input-shadow;
     color: $color-dark;
     font-family: unquote($font-base-family);
     font-size: 1rem;
@@ -38,10 +37,19 @@
     vertical-align: baseline;
     width: 100%;
 
+    &:hover {
+      background-color: $colors--light-theme--background-hover;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $colors--light-theme--background-active;
+    }
+
     &.is-dense {
       margin: 0 0 $spv-nudge-compensation 0;
-      padding-bottom: calc(#{$spv-nudge - $spv--x-small} - 1px);
-      padding-top: calc(#{$spv-nudge - $spv--x-small} - 1px);
+      padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
+      padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);
     }
 
     &[disabled],
@@ -56,7 +64,7 @@
 
     @each $state, $color in $states {
       &.has-#{$state} {
-        border: 1px solid $color;
+        border: $input-border-thickness solid $color;
       }
     }
   }
@@ -166,14 +174,14 @@
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-color: $color-x-light;
+    background-color: $colors--light-theme--background-hover;
     background-position: right $sph--small center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
     color: $color-dark;
     min-height: map-get($line-heights, default-text);
-    padding-right: calc(#{$default-icon-size} + #{2 * $sph--small});
+    padding-right: calc($default-icon-size + 2 * $sph--small);
     text-indent: 0.01px;
     text-overflow: '';
 
@@ -181,6 +189,10 @@
       cursor: pointer;
     }
 
+    option {
+      background-color: white;
+    }
+
     &[multiple],
     &[size] {
       background-image: none;
@@ -188,8 +200,9 @@
       height: auto;
 
       option {
+        background-color: $colors--light-theme--background-hover;
         font-weight: $font-weight-regular-text;
-        line-height: calc(#{$sp-unit * 2} - 2px);
+        line-height: calc($sp-unit * 2 - 2px);
         padding: $spv--x-small 0;
       }
     }
@@ -212,7 +225,7 @@
 
     margin-left: 0;
     margin-right: 0;
-    padding: calc(#{$spv--large} - 1px);
+    padding: calc($spv--large - $input-border-thickness);
   }
   // stylelint-enable selector-max-type
 }

package/scss/_base_hr.scss

@@ -6,7 +6,7 @@
   hr {
     @extend %hr;
 
-    margin-bottom: calc(#{$spv--small} - 1px);
+    margin-bottom: calc($spv--small - $input-border-thickness);
 
     &.u-no-margin--bottom {
       // compensate for hr thickness, to make sure it doesn't drift from baseline grid
@@ -20,17 +20,17 @@
     &.is-fixed-width {
       margin-left: auto;
       margin-right: auto;
-      max-width: calc(#{$grid-max-width} - #{2 * map-get($grid-margin-widths, small)});
-      width: calc(100% - #{2 * map-get($grid-margin-widths, small)});
+      max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
+      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, default)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
+        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, default)});
-        width: calc(100% - #{2 * map-get($grid-margin-widths, default)});
+        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/_base_placeholders.scss

@@ -50,7 +50,7 @@
   //accordion, table
   %single-border-text-vpadding--scaling {
     padding-bottom: $table-cell-vertical-padding;
-    padding-top: calc(#{$table-cell-vertical-padding} - 1px);
+    padding-top: calc($table-cell-vertical-padding - 1px);
   }
 
   // Default list styling
@@ -223,7 +223,7 @@
     margin: 0;
     padding: 0;
     position: relative;
-    vertical-align: calc(#{$vertical-offset} + #{0.5 * $cap-height} - #{0.5 * $default-icon-size});
+    vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
   }
 
   %social-icon {

package/scss/_layouts_fluid-breakout.scss

@@ -21,7 +21,7 @@
       grid-template-rows: auto;
       margin-left: auto;
       margin-right: auto;
-      max-width: calc(2 * #{$l-fluid-breakout-aside-width} + #{$l-fluid-breakout-max-width});
+      max-width: calc(2 * $l-fluid-breakout-aside-width + $l-fluid-breakout-max-width);
     }
 
     @media (min-width: $threshold-4-6-col) {
@@ -135,7 +135,7 @@
         grid-template-rows: auto;
         margin-left: auto;
         margin-right: auto;
-        max-width: calc(2 * #{$l-fluid-breakout-aside-width} + #{$l-fluid-breakout-max-width});
+        max-width: calc(2 * $l-fluid-breakout-aside-width + $l-fluid-breakout-max-width);
       }
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {

package/scss/_patterns_card.scss

@@ -14,7 +14,7 @@
     @extend %vf-is-bordered;
     @extend %vf-has-round-corners;
 
-    padding: calc(#{$spv--large} - 1px);
+    padding: calc($spv--large - 1px);
   }
 }
 

package/scss/_patterns_chip.scss

@@ -12,10 +12,10 @@
     display: inline-flex;
     margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding: calc(#{$spv--x-small} - 1px) $sph--small; // account for border thickness using calc
+    padding: calc($spv--x-small - $input-border-thickness) $sph--small; // account for border thickness using calc
     position: relative;
     user-select: none;
-    vertical-align: calc(1px - #{map-get($nudges, p)});
+    vertical-align: calc($input-border-thickness - map-get($nudges, p));
     white-space: nowrap;
 
     .p-chip__lead,
@@ -242,7 +242,7 @@
   $color-border: map-get($colors-chip-tinted-borders, $chip-type);
 
   background-color: $color-background;
-  border: 1px solid $color-border;
+  border: $input-border-thickness solid $color-border;
 
   .p-chip__value {
     color: $color-chip-value;

package/scss/_patterns_contextual-menu.scss

@@ -59,8 +59,8 @@
 
     + .p-contextual-menu__group {
       border-top-style: solid;
-      border-top-width: 1px;
-      margin: -1px 0 0 0;
+      border-top-width: $input-border-thickness;
+      margin: -$input-border-thickness 0 0 0;
     }
   }
 

package/scss/_patterns_form-tick-elements.scss

@@ -27,8 +27,8 @@
       content: '';
       height: $form-tick-box-size;
       left: 0;
-      outline-offset: 1px;
-      top: calc(#{$baseline-position} - #{$form-tick-box-size} + #{$form-tick-box-nudge});
+      outline-offset: $input-border-thickness;
+      top: calc($baseline-position - $form-tick-box-size + $form-tick-box-nudge);
       width: $form-tick-box-size;
     }
 
@@ -41,6 +41,10 @@
     .p-muted-heading & {
       color: $colors--light-theme--text-muted;
     }
+
+    &:hover::before {
+      background-color: $colors--light-theme--background-hover;
+    }
   }
 
   %vf-pseudo-tick-box-checked {
@@ -63,7 +67,7 @@
   %vf-pseudo-checkbox {
     // container
     &::before {
-      border-radius: $border-radius;
+      border-radius: 0;
     }
 
     //tick
@@ -72,7 +76,7 @@
       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});
+      top: calc($baseline-position - $form-tick-box-size + $form-tick-offset-top + $form-tick-box-nudge);
       transform: rotate(-45deg);
       width: 0.625rem;
     }
@@ -97,7 +101,7 @@
       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});
+      top: calc($baseline-position - $form-tick-box-size + $form-radio-circle-offset + $form-tick-box-nudge);
       width: $form-radio-inner-circle-diameter;
     }
   }
@@ -141,7 +145,7 @@
       }
       .p-radio__label,
       .p-checkbox__label {
-        padding-left: calc(#{$sph--large + $form-tick-box-size} + #{$asterisk-width});
+        padding-left: calc($sph--large + $form-tick-box-size + $asterisk-width);
       }
     }
   }
@@ -252,7 +256,7 @@
 
   &::before {
     background: $color-tick-background;
-    border: 1px solid $color-tick-border;
+    border: $input-border-thickness solid $color-tick-border;
   }
 }
 

package/scss/_patterns_form-validation.scss

@@ -7,7 +7,7 @@
   %vf-validation-wrapper {
     background-position: left, center;
     background-repeat: no-repeat;
-    padding-left: calc(#{$icon-size} + #{$sph--small});
+    padding-left: calc($icon-size + $sph--small);
     padding-top: 0;
   }
 
@@ -19,7 +19,16 @@
 
   .is-success {
     .p-form-validation__input {
-      border-color: $color-positive;
+      background-color: $color-positive-background;
+      border-bottom-color: $color-positive;
+
+      &:hover {
+        background-color: $color-positive-background--hover;
+      }
+
+      &:focus {
+        background-color: $color-positive-background--focus;
+      }
     }
 
     .p-form-validation__message {
@@ -32,7 +41,16 @@
 
   .is-caution {
     .p-form-validation__input {
-      border-color: $color-caution;
+      background-color: $color-caution-background;
+      border-bottom-color: $color-caution;
+
+      &:hover {
+        background-color: $color-caution-background--hover;
+      }
+
+      &:focus {
+        background-color: $color-caution-background--focus;
+      }
     }
 
     .p-form-validation__message {
@@ -43,7 +61,16 @@
 
   .is-error {
     .p-form-validation__input {
-      border-color: $color-negative;
+      background-color: $color-negative-background;
+      border-bottom-color: $color-negative;
+
+      &:hover {
+        background-color: $color-negative-background--hover;
+      }
+
+      &:focus {
+        background-color: $color-negative-background--focus;
+      }
     }
 
     .p-form-validation__message {