vanilla-framework 4.15.0 → 4.17.0

package/scss/_base_links.scss

@@ -8,7 +8,7 @@
   }
 
   %vf-link-base {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     color: $colors--theme--link-default;
     text-decoration: none;

package/scss/_base_placeholders.scss

@@ -98,8 +98,10 @@
   }
 
   %hr {
+    background: $colors--theme--border-default;
     border: 0;
     height: 1px;
+    margin-bottom: calc($spv--small - 1px);
     margin-top: 0;
     position: relative;
     width: 100%;

package/scss/_base_typography-definitions.scss

@@ -1,7 +1,7 @@
 @mixin vf-b-typography-definitions {
   %vf-is-accent {
     &.is-accent {
-      color: $color-accent;
+      color: $colors--theme--accent;
     }
   }
 

package/scss/_global_functions.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 
 // Functions used across multiple patterns or utils
 
@@ -33,7 +34,7 @@
 
 // Test value of bg $color and return light or dark text color accordingly
 @function vf-contrast-text-color($color) {
-  @if (lightness($color) > 55) {
+  @if (color.channel($color, 'lightness', $space: hsl) > 55) {
     @return $colors--light-theme--text-default; // Lighter background, return dark color
   } @else {
     @return $colors--dark-theme--text-default; // Darker background, return light color
@@ -43,7 +44,7 @@
 // Returns the font color to be presented on the passed background-color
 // variable.
 @function vf-determine-text-color($background-color) {
-  @if (lightness($background-color) > 50) {
+  @if (color.channel($background-color, 'lightness', $space: hsl) > 50) {
     @return $colors--light-theme--text-default;
   } @else {
     @return $colors--dark-theme--text-default;
@@ -53,23 +54,29 @@
 // Includes the theme variables based on the background color passed as an argument.
 // This is currently only used in the deprecated p-strip--accent.
 @mixin vf-determine-theme-from-background($background-color) {
-  @if (lightness($background-color) > 50) {
+  @if (color.channel($background-color, 'lightness', $space: hsl) > 50) {
     @include vf-theme-light;
   } @else {
     @include vf-theme-dark;
   }
 }
 
-// Adds visual focus to elements on :focus-visible,
-// or :focus if the browser doesn't support the former
-@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
+// Adds visual focus to elements on :focus-visible or :focus if the browser
+// doesn't support the former
+@mixin vf-focus-themed($light-color: $colors--light-theme--focus, $dark-color: $colors--dark-theme--focus, $width: $bar-thickness, $has-validation: false) {
+  --vf-focus-outline-color: #{$light-color};
+
+  .is-dark & {
+    --vf-focus-outline-color: #{$dark-color};
+  }
+
   &:focus {
-    outline: $width solid $color;
+    outline: $width solid var(--vf-focus-outline-color);
     outline-offset: -#{$width};
   }
 
   &:focus-visible {
-    outline: $width solid $color;
+    outline: $width solid var(--vf-focus-outline-color);
     outline-offset: -#{$width};
   }
 
@@ -93,6 +100,12 @@
   }
 }
 
+// This mixin is deprecated and will be removed in a future version of Vanilla.
+// Please use vf-focus-themed instead.
+@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
+  @include vf-focus-themed($light-color: $color, $width: $width, $has-validation: $has-validation);
+}
+
 // Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)
 @function pow($number, $exponent) {
   $value: 1;

package/scss/_layouts_fluid-breakout.scss

@@ -149,7 +149,7 @@
       grid-column: 2 / -1;
       grid-template-columns: repeat(2, minmax(0, 1fr));
 
-      @media (max-width: $threshold-4-6-col - 1) {
+      @media (width < $threshold-4-6-col) {
         grid-template-columns: repeat(1, minmax(0, 1fr));
         width: $l-fluid-breakout-main-child-width;
       }
@@ -163,7 +163,7 @@
       &:nth-child(2) {
         justify-content: flex-end;
 
-        @media (max-width: $threshold-4-6-col - 1) {
+        @media (width < $threshold-4-6-col) {
           justify-content: flex-start;
         }
       }

package/scss/_patterns_accordion.scss

@@ -17,7 +17,7 @@
 
   .p-accordion__tab {
     @extend %single-border-text-vpadding--scaling;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background-color: inherit;
     border: 0;

package/scss/_patterns_article-pagination.scss

@@ -55,7 +55,7 @@
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       margin-right: 0;
       width: auto;
 
@@ -84,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       width: 100%;
     }
 

package/scss/_patterns_buttons.scss

@@ -80,7 +80,7 @@
       $button-disabled-border-color: $colors--theme--button-positive-default,
       $button-text-color: $colors--theme--button-positive-text
     );
-    @include vf-focus($colors--theme--positive-focus);
+    @include vf-focus-themed($light-color: $color-focus-positive);
   }
 }
 

package/scss/_patterns_chip.scss

@@ -1,22 +1,21 @@
 @use 'sass:math';
 @import 'settings';
-$chip-border-thickness: 1px;
 
 @mixin vf-p-chip {
   %vf-chip {
     @extend %small-text;
     @include vf-transition(#{background-color, border-color}, snap, out);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     align-items: baseline;
     border-radius: 1rem;
     display: inline-flex;
     margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding: calc($spv--x-small - $chip-border-thickness) $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($chip-border-thickness - map-get($nudges, p));
+    vertical-align: calc($input-border-thickness - map-get($nudges, p));
     white-space: nowrap;
 
     .p-chip__lead,
@@ -72,29 +71,46 @@ $chip-border-thickness: 1px;
   @include vf-chips-information;
 }
 
+@mixin vf-chip-interactive(
+  $color-background-hover: $colors--theme--background-neutral-hover,
+  $color-border-hover: $colors--theme--border-neutral,
+  $color-background-active: $colors--theme--background-neutral-active,
+  $color-border-active: $colors--theme--border-neutral
+) {
+  &:hover {
+    background-color: $color-background-hover;
+    border-color: $color-border-hover;
+    text-decoration: none;
+  }
+
+  &[aria-pressed='true'],
+  &.is-selected,
+  &:active {
+    background-color: $color-background-active;
+    border-color: $color-border-active;
+  }
+}
+
 // Default notification styling
 @mixin vf-chips-default {
   .p-chip {
     @extend %vf-chip;
 
     background-color: $colors--theme--background-neutral-default;
-    border: $chip-border-thickness solid $colors--theme--border-neutral;
+    border: $input-border-thickness solid $colors--theme--border-neutral;
     border-color: $colors--theme--border-neutral;
   }
 
+  // Status-color chips all use the button pattern mixin to set their colors, so they already have most button styling.
+  // We need to add the default button styling to the link default chip as well.
   // stylelint-disable selector-max-type -- allow button selector for interactive chips
-  button.p-chip {
-    &:hover {
-      background-color: $colors--theme--background-neutral-hover;
-      border-color: $colors--theme--border-neutral;
-    }
+  a.p-chip {
+    @include vf-button-pattern;
+    @include vf-chip-interactive;
+  }
 
-    &[aria-pressed='true'],
-    &.is-selected,
-    &:active {
-      background-color: $colors--theme--background-neutral-active;
-      border-color: $colors--theme--border-neutral;
-    }
+  button.p-chip {
+    @include vf-chip-interactive;
   }
   // stylelint-enable selector-max-type
 
@@ -115,23 +131,19 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-positive-default;
-    border: $chip-border-thickness solid $colors--theme--border-positive;
+    border: $input-border-thickness solid $colors--theme--border-positive;
     border-color: $colors--theme--border-positive;
   }
 
   // stylelint-disable selector-max-type  -- allow button selector for interactive chips
-  button.p-chip--positive {
-    &:hover {
-      background-color: $colors--theme--background-positive-hover;
-      border-color: $colors--theme--border-positive;
-    }
-
-    &[aria-pressed='true'],
-    &.is-selected,
-    &:active {
-      background-color: $colors--theme--background-positive-active;
-      border-color: $colors--theme--border-positive;
-    }
+  button.p-chip--positive,
+  a.p-chip--positive {
+    @include vf-chip-interactive(
+      $color-background-hover: $colors--theme--background-positive-hover,
+      $color-border-hover: $colors--theme--border-positive,
+      $color-background-active: $colors--theme--background-positive-active,
+      $color-border-active: $colors--theme--border-positive
+    );
   }
   // stylelint-enable selector-max-type
 
@@ -152,23 +164,19 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-caution-default;
-    border: $chip-border-thickness solid $colors--theme--border-caution;
+    border: $input-border-thickness solid $colors--theme--border-caution;
     border-color: $colors--theme--border-caution;
   }
 
   // stylelint-disable selector-max-type  -- allow button selector for interactive chips
-  button.p-chip--caution {
-    &:hover {
-      background-color: $colors--theme--background-caution-hover;
-      border-color: $colors--theme--border-caution;
-    }
-
-    &[aria-pressed='true'],
-    &.is-selected,
-    &:active {
-      background-color: $colors--theme--background-caution-active;
-      border-color: $colors--theme--border-caution;
-    }
+  button.p-chip--caution,
+  a.p-chip--caution {
+    @include vf-chip-interactive(
+      $color-background-hover: $colors--theme--background-caution-hover,
+      $color-border-hover: $colors--theme--border-caution,
+      $color-background-active: $colors--theme--background-caution-active,
+      $color-border-active: $colors--theme--border-caution
+    );
   }
   // stylelint-enable selector-max-type
 
@@ -189,23 +197,19 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-negative-default;
-    border: $chip-border-thickness solid $colors--theme--border-negative;
+    border: $input-border-thickness solid $colors--theme--border-negative;
     border-color: $colors--theme--border-negative;
   }
 
   // stylelint-disable selector-max-type  -- allow button selector for interactive chips
-  button.p-chip--negative {
-    &:hover {
-      background-color: $colors--theme--background-negative-hover;
-      border-color: $colors--theme--border-negative;
-    }
-
-    &[aria-pressed='true'],
-    &.is-selected,
-    &:active {
-      background-color: $colors--theme--background-negative-active;
-      border-color: $colors--theme--border-negative;
-    }
+  button.p-chip--negative,
+  a.p-chip--negative {
+    @include vf-chip-interactive(
+      $color-background-hover: $colors--theme--background-negative-hover,
+      $color-border-hover: $colors--theme--border-negative,
+      $color-background-active: $colors--theme--background-negative-active,
+      $color-border-active: $colors--theme--border-negative
+    );
   }
   // stylelint-enable selector-max-type
 
@@ -226,23 +230,19 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-information-default;
-    border: $chip-border-thickness solid $colors--theme--border-information;
+    border: $input-border-thickness solid $colors--theme--border-information;
     border-color: $colors--theme--border-information;
   }
 
   // stylelint-disable selector-max-type  -- allow button selector for interactive chips
-  button.p-chip--information {
-    &:hover {
-      background-color: $colors--theme--background-information-hover;
-      border-color: $colors--theme--border-information;
-    }
-
-    &[aria-pressed='true'],
-    &.is-selected,
-    &:active {
-      background-color: $colors--theme--background-information-active;
-      border-color: $colors--theme--border-information;
-    }
+  button.p-chip--information,
+  a.p-chip--information {
+    @include vf-chip-interactive(
+      $color-background-hover: $colors--theme--background-information-hover,
+      $color-border-hover: $colors--theme--border-information,
+      $color-background-active: $colors--theme--background-information-active,
+      $color-border-active: $colors--theme--border-information
+    );
   }
   // stylelint-enable selector-max-type
 

package/scss/_patterns_code-snippet.scss

@@ -9,7 +9,7 @@
 
     Code block:
         .p-code-snippet__block:
-            Code block without any additonal styling elements.
+            Code block without any additional styling elements.
         "&.is-wrapped":
             Code block with wrapped content in lines.
         .p-code-snippet__block--icon:

package/scss/_patterns_contextual-menu.scss

@@ -66,7 +66,7 @@
   }
 
   .p-contextual-menu__link {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     border: 0;
     clear: both;

package/scss/_patterns_cta.scss

@@ -4,6 +4,8 @@
     CTA Block:
       .p-cta-block:
         Main element of the CTA block.
+      "&.is-borderless":
+        Borderless variant, to be used to hide top border and padding.
 */
 
 @import 'settings';
@@ -16,5 +18,10 @@
     flex-wrap: wrap;
     padding-bottom: $spv--x-large;
     padding-top: $spv--small;
+
+    &.is-borderless {
+      border: none;
+      padding-top: 0;
+    }
   }
 }

package/scss/_patterns_equal-height-row.scss

@@ -1,12 +1,36 @@
+/*
+  @classreference
+  equal-height-row:
+    Equal height row:
+      .p-equal-height-row:
+        Main element of the equal height row component.
+      "&.has-divider-1":
+        Cross-column divider shown between the first and second grid rows.
+      "&.has-divider-2":
+        Cross-column divider shown between the second and third grid rows.
+      "&.has-divider-3":
+        Cross-column divider shown between the third and fourth grid rows.
+      .p-equal-height-row--wrap:
+        Wraps contents such that two items appear per row on medium screen sizes.
+    Column:
+      .p-equal-height-row__col:
+        Column element within an equal height row.
+    Item:
+      .p-equal-height-row__item:
+        Item element within an equal height row column.
+*/
+
 @import 'settings';
 
 @mixin vf-p-equal-height-row {
-  .p-equal-height-row {
+  .p-equal-height-row,
+  .p-equal-height-row--wrap {
     @extend %vf-row;
+
     position: relative;
 
     .p-equal-height-row__col {
-      // smaller screens each column will have border top by default
+      // At smaller sizes, each column will have top border by default
       border-top-color: $colors--theme--border-low-contrast;
       border-top-style: solid;
       border-top-width: 1px;
@@ -15,21 +39,24 @@
       grid-row: span 4;
       grid-template-rows: subgrid;
       margin-bottom: $spv--small;
-      margin-top: -1px;
       position: relative;
 
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
         grid-column: span $grid-columns-medium;
         grid-template-columns: subgrid;
 
-        // for medium screen, each column item will take half of the available cols from the parent grid
+        // At medium size, each column item will take half of the available
+        // cols from the parent grid
         .p-equal-height-row__item {
           grid-column: span calc($grid-columns-medium / 2);
         }
 
-        // for medium screen, position the first column item on the left of the grid
+        // At medium size, position the first column item on the left of the
+        // grid
         .p-equal-height-row__item:first-child {
-          grid-row: span 100; // this needs to be sufficiently large so remaining column items won't get stretched
+          // This needs to be sufficiently large so remaining column items won't
+          // get stretched
+          grid-row: span 100;
         }
       }
 
@@ -42,63 +69,80 @@
 
     // DIVIDERS
 
-    // For each row or column grid we only have access to two pseudo elements
-    // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
-    // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
+    // For each row or column grid we only have access to two pseudo elements:
+    // If 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
+    // If 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
     &.has-divider-1::before,
     &.has-divider-2::after,
     &.has-divider-3:not(.has-divider-1)::before,
     &.has-divider-3:not(.has-divider-2)::after {
-      // row level dividers are not visible on smaller screen sizes
       @extend %vf-pseudo-border;
-      background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
+
+      // Override border color to be low contrast
+      background-color: $colors--theme--border-low-contrast;
+      // Row-level dividers are not visible on smaller screen sizes
       display: none;
-    }
+      grid-column-end: span 12;
+      grid-column-start: 1;
+      margin: auto;
 
-    @media screen and (width >= $breakpoint-large) {
-      &.has-divider-1::before,
-      &.has-divider-2::after,
-      &.has-divider-3:not(.has-divider-1)::before,
-      &.has-divider-3:not(.has-divider-2)::after {
+      @media screen and (width >= $breakpoint-large) {
         display: block;
-        grid-column-end: span 12;
-        grid-column-start: 1;
-        margin: auto;
       }
+    }
 
-      &.has-divider-1::before {
-        grid-row: 2;
-      }
+    &.has-divider-1::before {
+      grid-row: 2;
+    }
 
-      &.has-divider-2::after {
-        grid-row: 3;
-      }
+    &.has-divider-2::after {
+      grid-row: 3;
+    }
 
-      // when 3rd-divider is present and 1st-divider is not present
-      &.has-divider-3:not(.has-divider-1)::before,
-      // when 3rd-divider is present and 2nd-divider is not present
-      &.has-divider-3:not(.has-divider-2)::after,
-      // when only 3rd-divider is present
-      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
-        grid-row: 4;
-      }
+    // When 3rd-divider is present and 1st-divider is not present
+    &.has-divider-3:not(.has-divider-1)::before,
+    // When 3rd-divider is present and 2nd-divider is not present
+    &.has-divider-3:not(.has-divider-2)::after,
+    // When only 3rd-divider is present
+    &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
+      grid-row: 4;
+    }
 
-      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
-        display: none;
-      }
+    &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
+      display: none;
     }
   }
 
-  // support for 25-75 split on large screen size for this pattern
-  .row--25-75-on-large > .col,
-  .row > .col-9 {
-    & .p-equal-height-row {
-      grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));
+  // WRAP VARIANT
 
+  // This variant displays multiple columns side-by-side and wraps them at
+  // medium size; we have to unset some grid properties from the default
+  // variant to enable this functionality
+  .p-equal-height-row--wrap {
+    .p-equal-height-row__col {
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
+        // Fit 2 columns onto each row at medium size
+        grid-column: span calc($grid-columns-medium / 2);
+        grid-template-columns: none;
+
+        .p-equal-height-row__item {
+          grid-column: auto;
+        }
+
+        .p-equal-height-row__item:first-child {
+          grid-row: auto;
+        }
       }
+    }
+  }
 
+  // ADVANCED GRID SUPPORT
+
+  // Support for 25-75 split on large screen size
+  .row--25-75-on-large > .col,
+  .row > .col-9 {
+    & .p-equal-height-row,
+    & .p-equal-height-row--wrap {
       @media screen and (width >= $breakpoint-large) {
         grid-template-columns: repeat(9, minmax(0, 1fr));
       }