vanilla-framework 3.8.2 → 3.10.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.10.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.21",
     "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.5",
-    "sass": "1.56.0",
+    "postcss-scss": "4.0.6",
+    "sass": "1.57.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.2",
+    "stylelint": "14.16.1",
+    "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_fontfaces.scss

@@ -1,187 +1,80 @@
 @mixin vf-b-typography-fontfaces {
   @at-root {
     @if str-index($font-base-family, 'Ubuntu') {
-      @if $font-use-subset-latin {
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}46ed6870-Ubuntu-L-subset.woff2') format('woff2'), url('#{$assets-path}4070835e-Ubuntu-L-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}0c7b8dc0-Ubuntu-R-subset.woff2') format('woff2'), url('#{$assets-path}ef4d35ed-Ubuntu-R-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}6113b69a-Ubuntu-LI-subset.woff2') format('woff2'), url('#{$assets-path}56a10e22-Ubuntu-LI-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fd4ec0c7-Ubuntu-RI-subset.woff2') format('woff2'), url('#{$assets-path}89be6515-Ubuntu-RI-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-display-heading;
-          src: url('#{$assets-path}3baab91b-Ubuntu-Th-subset.woff2') format('woff2'), url('#{$assets-path}cb89e3ac-Ubuntu-Th-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}a6c34b5d-UbuntuMono-R-subset.woff2') format('woff2'), url('#{$assets-path}e6daa284-UbuntuMono-R-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}a662364d-UbuntuMono-B-subset.woff2') format('woff2'), url('#{$assets-path}22f97dd9-UbuntuMono-B-subset.woff') format('woff');
-          unicode-range: U+0-FF, U+131, U+152, U+153, U+2BB, U+2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-      } @else {
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}e8c07df6-Ubuntu-L_W.woff2') format('woff2'), url('#{$assets-path}8619add2-Ubuntu-L_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fff37993-Ubuntu-R_W.woff2') format('woff2'), url('#{$assets-path}7af50859-Ubuntu-R_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}f8097dea-Ubuntu-LI_W.woff2') format('woff2'), url('#{$assets-path}8be89d02-Ubuntu-LI_W.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: italic;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}fca66073-ubuntu-ri-webfont.woff2') format('woff2'), url('#{$assets-path}f0898c72-ubuntu-ri-webfont.woff') format('woff');
-        }
-
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-display-heading;
-          src: url('#{$assets-path}7f100985-Ubuntu-Th_W.woff2') format('woff2'), url('#{$assets-path}502cc3a1-Ubuntu-Th_W.woff') format('woff');
-        }
+      // Default font-display option
+      @font-face {
+        font-family: 'Ubuntu variable';
+        font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+        font-style: normal;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}f3b9cc97-Ubuntu[wdth,wght]-latin.woff2') format('woff2-variations');
+      }
 
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}fdd692b9-UbuntuMono-R_W.woff2') format('woff2'), url('#{$assets-path}85edb898-UbuntuMono-R_W.woff') format('woff');
-        }
+      @font-face {
+        font-family: 'Ubuntu variable';
+        font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+        font-style: italic;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}c1b12cdf-Ubuntu-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
+      }
 
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu Mono';
-          font-style: normal;
-          font-weight: $font-weight-bold;
-          src: url('#{$assets-path}dd4acb63-UbuntuMono-B.woff2') format('woff2'), url('#{$assets-path}e8e36b19-UbuntuMono-B.woff') format('woff');
-        }
+      @font-face {
+        font-family: 'Ubuntu Mono variable';
+        font-style: normal;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}0bd4277a-UbuntuMono[wght]-latin.woff2') format('woff2-variations');
       }
 
       @if $font-allow-cyrillic-greek-latin {
         // cyrillic-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}8aba5b6f-Ubuntu-L-cyrillic-ext-subset.woff2') format('woff2'), url('#{$assets-path}55e29aa9-Ubuntu-L-cyrillic-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}7d55b1fc-Ubuntu[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
           unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
         }
 
         // cyrillic
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}5bea8279-Ubuntu-L-cyrillic-subset.woff2') format('woff2'), url('#{$assets-path}b8058442-Ubuntu-L-cyrillic-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}086e42aa-Ubuntu[wdth,wght]-cyrillic.woff2') format('woff2-variations');
           unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
         }
 
         // greek-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}a6dcff6e-Ubuntu-L-greek-ext-subset.woff2') format('woff2'), url('#{$assets-path}496f3bda-Ubuntu-L-greek-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}77e5f6a2-Ubuntu[wdth,wght]-greek-extended.woff2') format('woff2-variations');
           unicode-range: U+1F00-1FFF;
         }
 
         // greek
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}b7ba71af-Ubuntu-L-greek-subset.woff2') format('woff2'), url('#{$assets-path}b864c12e-Ubuntu-L-greek-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}57fdffc1-Ubuntu[wdth,wght]-greek.woff2') format('woff2-variations');
           unicode-range: U+0370-03FF;
         }
 
         // latin-ext
         @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
+          font-family: 'Ubuntu variable';
+          font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}98e516d3-Ubuntu-L-latin-ext-subset.woff2') format('woff2'), url('#{$assets-path}11a74839-Ubuntu-L-latin-ext-subset.woff') format('woff');
+          font-weight: 100 800; /*  min and max value for the weight axis */
+          src: url('#{$assets-path}a312a7ed-Ubuntu[wdth,wght]-latin-extended.woff2') format('woff2-variations');
           unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
         }
-
-        // latin
-        @font-face {
-          font-display: $font-display-option;
-          font-family: 'Ubuntu';
-          font-style: normal;
-          font-weight: $font-weight-regular-text;
-          src: url('#{$assets-path}317bd676-Ubuntu-L-latin-subset.woff2') format('woff2'), url('#{$assets-path}c09862e1-Ubuntu-L-latin-subset.woff') format('woff');
-          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
-        }
       }
     }
   }

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_icon-definitions.scss

@@ -481,3 +481,7 @@
 @mixin vf-icon-linux-prompt($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='dollar-sign' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M8.85063291,15 L8.85063291,13.1075949 C9.73924051,12.9978903 10.3974684,12.7181434 10.8253165,12.2683544 C11.2531646,11.8185654 11.4670886,11.2700422 11.4670886,10.6227848 C11.4670886,10.1949367 11.3875528,9.82742616 11.228481,9.52025316 C11.0694092,9.21308017 10.8582278,8.94978903 10.5949367,8.73037975 C10.3316456,8.51097047 10.0244726,8.32172996 9.67341772,8.16265823 C9.32236287,8.00358649 8.96033756,7.85274262 8.58734177,7.71012658 C8.29113924,7.60042194 8.02510548,7.49620253 7.78924051,7.39746835 C7.55337553,7.29873418 7.34767933,7.18902953 7.1721519,7.06835443 C6.99662447,6.94767933 6.86223629,6.81054852 6.76898734,6.65696203 C6.67573839,6.50337553 6.62911392,6.31139241 6.62911392,6.08101266 C6.62911392,5.66413502 6.78544304,5.34599156 7.09810127,5.12658228 C7.41075949,4.907173 7.86329114,4.79746835 8.4556962,4.79746835 C8.99324895,4.79746835 9.43755275,4.84409282 9.78860759,4.93734177 C10.1396624,5.03059072 10.4303797,5.12109705 10.6607595,5.20886076 L10.9405063,4.05696203 C10.7210971,3.96919832 10.4276371,3.88417722 10.0601266,3.80189873 C9.69261604,3.71962025 9.28945148,3.66751055 8.85063291,3.64556962 L8.85063291,2 L7.63291139,2 L7.63291139,3.69493671 C6.84303797,3.81561181 6.23966244,4.09535865 5.82278481,4.53417722 C5.40590718,4.97299578 5.19746835,5.54345991 5.19746835,6.24556962 C5.19746835,6.64050633 5.26877637,6.97236287 5.41139241,7.24113924 C5.55400844,7.50991561 5.73776371,7.74029536 5.96265823,7.93227848 C6.18755275,8.12426161 6.44535865,8.28607595 6.73607595,8.41772152 C7.02679325,8.54936709 7.32025316,8.67004219 7.6164557,8.77974684 C7.9236287,8.88945148 8.21983123,9.00189873 8.50506329,9.11708861 C8.79029536,9.23227848 9.04535865,9.36392405 9.27025316,9.51202532 C9.49514768,9.66012658 9.67341772,9.83016877 9.80506329,10.0221519 C9.93670886,10.214135 10.0025316,10.4472574 10.0025316,10.721519 C10.0025316,10.9080169 9.96962025,11.0808017 9.90379747,11.2398734 C9.83797468,11.3989452 9.72827004,11.5360759 9.57468354,11.6512658 C9.42109705,11.7664557 9.20991561,11.8542194 8.94113924,11.914557 C8.67236287,11.9748945 8.34050633,12.0050633 7.94556962,12.0050633 C7.33122363,12.0050633 6.82109705,11.9419832 6.41518987,11.8158228 C6.0092827,11.6896624 5.65822785,11.5552743 5.36202532,11.4126582 L5,12.5481013 C5.20843882,12.6687763 5.52658228,12.7949367 5.95443038,12.9265823 C6.38227848,13.0582278 6.94177215,13.1350211 7.63291139,13.156962 L7.63291139,15 L8.85063291,15 Z' id='$' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
 }
+
+@mixin vf-icon-desktop($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
+}

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,12 +223,12 @@
     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 {
     @extend %vf-hide-text;
-    @include vf-icon-size(map-get($icon-sizes, heading-icon--small));
+    @include vf-icon-size(map-get($icon-sizes, heading-icon--x-small));
 
     background-repeat: no-repeat;
     display: inline-block;

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;
   }
 }