vanilla-framework 3.8.2 → 3.9.0

package/scss/_patterns_links.scss

@@ -57,7 +57,7 @@
       border-bottom: 1px solid $colors--light-theme--border-default;
       content: '';
       flex-grow: 1;
-      margin: $spv--x-large 0 calc(#{$spv--x-large} - 1px) 0;
+      margin: $spv--x-large 0 calc($spv--x-large - 1px) 0;
     }
 
     &::after {

package/scss/_patterns_lists.scss

@@ -278,13 +278,13 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
     &::before {
       // Need to account for the 1px border:
-      line-height: calc(#{$bullet-width-mobile} - 2px);
+      line-height: calc($bullet-width-mobile - 2px);
       margin-right: $sph--large;
       width: $bullet-width-mobile;
 
       @media (min-width: $breakpoint-heading-threshold) {
         // Need to account for the 1px border:
-        line-height: calc(#{$bullet-width} - 2px);
+        line-height: calc($bullet-width - 2px);
         width: $bullet-width;
       }
     }
@@ -324,14 +324,14 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
       &::before {
         // Need to account for the 1px border:
-        line-height: calc(#{$bullet-width-mobile} - 2px);
+        line-height: calc($bullet-width-mobile - 2px);
         margin-right: $sph--large;
         margin-top: $bullet-margin-mobile;
         width: $bullet-width-mobile;
 
         @media (min-width: $breakpoint-heading-threshold) {
           // Need to account for the 1px border:
-          line-height: calc(#{$bullet-width} - 2px);
+          line-height: calc($bullet-width - 2px);
           margin-top: $bullet-margin;
           width: $bullet-width;
         }

package/scss/_patterns_logo-section.scss

@@ -87,7 +87,7 @@
   @if $rem-contribution == 0 {
     width: $percentage-contribution;
   } @else {
-    width: calc(#{$percentage-contribution} - #{$rem-contribution});
+    width: calc($percentage-contribution - $rem-contribution);
   }
 }
 
@@ -112,16 +112,16 @@
     margin-bottom: $spv--x-large;
     // negates the margin of logos that sit in the first column
     margin-left: -#{$margin-small};
-    width: calc(100% + #{$margin-small});
+    width: calc(100% + $margin-small);
 
     @media (min-width: $threshold-4-6-col) {
       margin-left: -$margin-medium;
-      width: calc(100% + #{$margin-medium});
+      width: calc(100% + $margin-medium);
     }
 
     @media (min-width: $threshold-6-12-col) {
       margin-left: -$margin-large;
-      width: calc(100% + #{$margin-large});
+      width: calc(100% + $margin-large);
     }
   }
 

package/scss/_patterns_matrix.scss

@@ -19,7 +19,7 @@
     display: flex;
     flex: 1 1 auto;
     padding-bottom: $spv--large;
-    padding-top: calc(#{$spv--large} - 1px);
+    padding-top: calc($spv--large - 1px);
 
     &:first-child {
       border-top: none;
@@ -118,7 +118,7 @@
     padding-right: $sph--large;
 
     @media (min-width: $breakpoint-large) {
-      width: calc(100% - #{$matrix-img-width + $matrix-img-gutter});
+      width: calc(100% - ($matrix-img-width + $matrix-img-gutter));
     }
   }
 

package/scss/_patterns_modal.scss

@@ -17,7 +17,7 @@
     right: 0;
     top: 0;
     width: 100%;
-    z-index: 101;
+    z-index: 150; // render on top of any other content or layout elements
   }
 
   .p-modal__dialog {
@@ -27,7 +27,7 @@
 
     left: $sph--x-large;
     margin-bottom: 0;
-    max-height: calc(100% - #{2 * $spv--large});
+    max-height: calc(100% - 2 * $spv--large);
     max-width: $grid-max-width;
     overflow: auto;
     padding-top: 0;

package/scss/_patterns_navigation.scss

@@ -412,13 +412,13 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       height: $spv--large;
       pointer-events: none;
       position: absolute;
-      right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+      right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
       text-indent: calc(100% + 10rem);
-      top: calc(#{$spv--medium} + #{map-get($nudges, x-small)});
+      top: calc($spv--medium + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        top: calc(#{$spv--large} + #{map-get($nudges, x-small)});
+        top: calc($spv--large + map-get($nudges, x-small));
       }
     }
   }
@@ -543,7 +543,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       position: absolute;
       right: map-get($grid-margin-widths, small);
       text-indent: calc(100% + 10rem);
-      top: calc(#{$spv--large} + #{map-get($nudges, x-small)});
+      top: calc($spv--large + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
 
       @media (min-width: $threshold-4-6-col) {
@@ -551,7 +551,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
       }
     }
 

package/scss/_patterns_notifications.scss

@@ -81,9 +81,9 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     background-size: map-get($icon-sizes, default);
     border-radius: 0 $border-radius $border-radius 0;
     margin-bottom: $spv--x-large;
-    padding-bottom: calc(#{$spv--small} - 1px);
+    padding-bottom: calc($spv--small - 1px);
     padding-left: $notification-content-icon-space;
-    padding-top: calc(#{$spv--small} - 1px);
+    padding-top: calc($spv--small - 1px);
     position: relative;
 
     &::before {

package/scss/_patterns_search-and-filter.scss

@@ -19,15 +19,15 @@
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
   // of an input's line-height, its vertical padding, and a nudge.
-  $input-height: calc(#{map-get($line-heights, default-text)} + #{$input-vertical-padding} + #{$spv-nudge} - 1px);
+  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);
 
   .p-search-and-filter {
-    border: 1px solid $colors--light-theme--border-high-contrast;
+    border-bottom: $input-border-thickness solid $colors--light-theme--border-high-contrast;
     position: relative;
 
     .p-search-and-filter__search-container {
       align-items: center;
-      background-color: $color-x-light;
+      background-color: $colors--light-theme--background-inputs;
       display: flex;
       flex-wrap: wrap;
       height: auto;
@@ -72,7 +72,7 @@
     .p-search-and-filter__panel {
       @include vf-transition(opacity, fast);
 
-      background: $color-x-light;
+      background-color: $colors--light-theme--background-inputs;
       border-radius: $border-radius;
       box-shadow: $box-shadow;
       opacity: 1;
@@ -100,6 +100,7 @@
 
     .p-search-and-filter__clear {
       @extend %vf-button-has-icon;
+      background-color: $colors--light-theme--background-inputs;
 
       border: none;
       bottom: $focus-outline-offset;

package/scss/_patterns_search-box.scss

@@ -1,9 +1,7 @@
 @mixin vf-p-search-box {
-  $input-border-thicknes: 1px;
-
   %search-box-button {
     display: block;
-    height: calc(#{2 * $spv-nudge + map-get($line-heights, default-text)} - #{2 * $bar-thickness}); // side padding + icon width - focus outline width * 2
+    height: calc((2 * $spv-nudge + map-get($line-heights, default-text)) - (2 * $bar-thickness)); // side padding + icon width - focus outline width * 2
     margin: $bar-thickness 0;
     position: relative;
 
@@ -43,7 +41,7 @@
     .p-search-box__input {
       flex: 1 1 100%;
       margin-bottom: 0;
-      padding-right: calc(2 * #{2 * $spv-nudge + map-get($line-heights, default-text)});
+      padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
       position: absolute;
       right: 0;
 
@@ -124,7 +122,7 @@
 
 @mixin vf-search-box-light-theme {
   @include vf-search-box-theme(
-    $color-search-box-background: $colors--light-theme--background-default,
+    $color-search-box-background: $colors--light-theme--background-inputs,
     $color-search-box-border: $colors--light-theme--border-high-contrast,
     $color-search-box-text: $colors--light-theme--text-default
   );
@@ -132,8 +130,12 @@
 
 @mixin vf-search-box-dark-theme {
   @include vf-search-box-theme(
-    $color-search-box-background: $colors--dark-theme--background-default,
-    $color-search-box-border: $colors--dark-theme--border-high-contrast,
+    $color-search-box-background: lighten($colors--dark-theme--background-default, 10%),
+    $color-search-box-border: $color-x-light,
     $color-search-box-text: $colors--dark-theme--text-default
   );
+
+  &::placeholder {
+    color: $colors--dark-theme--text-default;
+  }
 }

package/scss/_patterns_segmented-control.scss

@@ -33,7 +33,7 @@
           position: absolute;
           right: 0;
           top: 0;
-          width: 1px;
+          width: $input-border-thickness;
         }
       }
 

package/scss/_patterns_side-navigation.scss

@@ -179,7 +179,7 @@
     border-bottom-style: solid;
     border-bottom-width: 1px;
     margin-bottom: $spv--small;
-    padding-bottom: calc(#{$spv--small} - 1px); // compensate for border thickness
+    padding-bottom: calc($spv--small - 1px); // compensate for border thickness
     padding-left: 0.25rem; // nudge to visually align icon with text
     padding-top: $spv--small;
     position: sticky;

package/scss/_patterns_strip.scss

@@ -130,7 +130,7 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       $padding: 3rem;
 
       background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-      background-size: 100% calc(100% - #{$padding}), 100% 100%, 100% $padding, 100% $padding, auto;
+      background-size: 100% calc(100% - $padding), 100% 100%, 100% $padding, 100% $padding, auto;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
@@ -138,7 +138,7 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
         $padding: 6rem;
 
         background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-        background-size: 100% calc(100% - #{$padding}), 50% 100%, 100% $padding, 100% $padding, auto;
+        background-size: 100% calc(100% - $padding), 50% 100%, 100% $padding, 100% $padding, auto;
         margin-bottom: -$padding;
         padding-bottom: ($padding * 3) !important;
       }

package/scss/_patterns_switch.scss

@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
-      border: 1px solid $color-link;
+      border: $input-border-thickness solid $color-link;
       left: 50%;
     }
 
@@ -50,7 +50,7 @@ $knob-size: $sp-unit * 2;
       @include vf-transition($duration: slow);
 
       background: $color-x-light;
-      border: 1px solid $color-mid-dark;
+      border: $input-border-thickness solid $color-mid-dark;
       border-radius: 50%;
       content: '';
       height: $knob-size;

package/scss/_patterns_table-sortable.scss

@@ -15,8 +15,8 @@
     display: inline-block;
     margin-left: $sp-x-small;
     // table heading text is smaller than the icon, so we need to compensate with negative top margin
-    margin-top: calc(#{map-get($font-sizes, x-small)}rem - #{$default-icon-size});
-    vertical-align: calc(#{$vertical-offset} + #{0.5 * $cap-height} - #{0.5 * $default-icon-size});
+    margin-top: calc(#{map-get($font-sizes, x-small)}rem - $default-icon-size);
+    vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
   }
 
   // stylelint-disable selector-max-type -- table elements can use selector types

package/scss/_settings_colors.scss

@@ -38,8 +38,9 @@ $color-focus-positive: #003008 !default;
 $color-focus-negative: #3b0006 !default;
 
 // Button background color changes
+$input-background-opacity-amount: 0.04;
 $hover-background-opacity-amount: 0.05;
-$active-background-opacity-amount: 0.1;
+$active-background-opacity-amount: 0.08;
 
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
@@ -50,6 +51,19 @@ $color-code-background: rgba($color-x-dark, 0.03);
 $color-code-background-dark: rgba($color-x-light, 0.3);
 $color-code-heading-background: rgba($color-x-dark, 0.08);
 
+// Background colours for form elements
+$color-positive-background: #edf8eb;
+$color-positive-background--hover: #e5f6e2;
+$color-positive-background--focus: #e0f4dc;
+
+$color-caution-background: #f8efe8;
+$color-caution-background--hover: #f5e7dd;
+$color-caution-background--focus: #f3e2d6;
+
+$color-negative-background: #f8e9e8;
+$color-negative-background--hover: #f5dfdd;
+$color-negative-background--focus: #f3d8d6;
+
 $states: (
   error: $color-negative,
   caution: $color-caution,
@@ -85,6 +99,7 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
+$colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
 $colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
 $colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
 $colors--light-theme--background-overlay: transparentize($color-dark, 0.15) !default;

package/scss/_settings_grid.scss

@@ -28,4 +28,4 @@ $grid-margin-widths: (
 $l-fluid-breakout-max-width: $grid-max-width !default;
 $l-fluid-breakout-aside-width: 14rem !default;
 $l-fluid-breakout-main-child-width: 13rem !default;
-$l-fluid-breakout-3-col-threshold: calc(#{$grid-max-width} + #{$l-fluid-breakout-aside-width});
+$l-fluid-breakout-3-col-threshold: calc($grid-max-width + $l-fluid-breakout-aside-width);

package/scss/_settings_placeholders.scss

@@ -2,9 +2,9 @@
 @import 'settings_colors';
 
 // Global placeholder settings
-
+$input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: $sp-unit * 0.25 !default;
-$border: 1px solid $color-mid-light !default;
+$border: $input-border-thickness solid $color-mid-light !default;
 $box-shadow: 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

package/scss/_settings_spacing.scss

@@ -105,7 +105,7 @@ $sp-after: (
 $spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
-$input-vertical-padding: calc(#{$spv-nudge} - 1px);
+$input-vertical-padding: calc($spv-nudge - 1px);
 
 // tick element variables
 $form-tick-box-size: 1rem;

package/scss/_utilities_font-metrics.scss

@@ -11,11 +11,11 @@
       border-top-style: solid;
       border-width: 1px;
       content: '';
-      height: calc(#{$cap-height - $x-height});
+      height: calc($cap-height - $x-height);
       left: -#{$horizontal-bleed};
       position: absolute;
-      top: calc(#{$baseline-position - $cap-height} - 1px);
-      width: calc(#{$horizontal-bleed * 2} + 100%);
+      top: calc($baseline-position - $cap-height - 1px);
+      width: calc($horizontal-bleed * 2 + 100%);
     }
 
     &::after {
@@ -24,8 +24,8 @@
       height: 1px;
       left: -#{$horizontal-bleed};
       position: absolute;
-      top: calc(#{$baseline-position} - 1px);
-      width: calc(#{$horizontal-bleed * 2} + 100%);
+      top: calc($baseline-position - 1px);
+      width: calc($horizontal-bleed * 2 + 100%);
     }
   }
 }

package/scss/_utilities_margin-collapse.scss

@@ -23,6 +23,6 @@
 
   .u-table-cell-padding-overlap {
     margin-bottom: -#{$table-cell-vertical-padding} !important;
-    margin-top: calc(-#{$table-cell-vertical-padding} - 1px) !important;
+    margin-top: calc(-1 * $table-cell-vertical-padding - 1px) !important;
   }
 }

package/scss/_utilities_vertical-spacing.scss

@@ -12,7 +12,7 @@
         &::after {
           @extend %u-vertical-spacer;
 
-          margin-top: calc(#{$sp-unit * $i} - 1px); // subtracting the element height, which is set to 1px above.
+          margin-top: calc($sp-unit * $i - 1px); // subtracting the element height, which is set to 1px above.
         }
       }
     }