vanilla-framework 4.9.0 → 4.10.0

package/scss/_patterns_media-container.scss

@@ -1,5 +1,10 @@
 @mixin vf-p-media-container {
+  // stylelint-disable selector-max-type -- media container can use selector type
   .p-media-container {
     margin-top: $spv--small;
+    img {
+      display: block;
+    }
   }
+  // stylelint-enable selector-max-type
 }

package/scss/_patterns_navigation.scss

@@ -54,6 +54,28 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     @extend %navigation-link-responsive-padding-right;
   }
 
+  %navigation-link-text {
+    color: $colors--theme--text-default;
+    text-decoration: none;
+
+    &:link,
+    &:visited,
+    &:focus,
+    &:hover {
+      color: $colors--theme--text-default;
+      text-decoration: none;
+    }
+
+    &:hover {
+      background-color: $colors--theme--background-alt;
+    }
+
+    &[aria-pressed='true'],
+    &:active {
+      background-color: $colors--theme--background-active;
+    }
+  }
+
   %navigation-link {
     $properties:
       #{background-color,
@@ -61,6 +83,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
+    @extend %navigation-link-text;
     @extend %vf-navigation-separator;
     @include vf-transition($properties, snap);
     @include vf-focus;
@@ -89,12 +112,6 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     @media (min-width: $breakpoint-navigation-threshold) {
       padding-left: map-get($grid-margin-widths, default);
     }
-
-    &:visited,
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
   }
 
   %vf-reset-horizontal-padding {
@@ -104,6 +121,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   %vf-navigation-separator {
     &::before {
+      background: $colors--theme--border-low-contrast;
       content: '';
       height: 1px;
       left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large});
@@ -123,6 +141,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   .p-navigation,
   .p-navigation--sliding {
+    background-color: $colors--theme--background-default;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -323,6 +342,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__logo-title {
+      color: $colors--theme--text-default;
       // font sizing adjusted to match logo
       font-size: 1.3rem;
       font-weight: 300;
@@ -403,6 +423,16 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
+  [class*='p-navigation__item'].is-selected > .p-navigation__link {
+    background-color: $colors--theme--background-alt;
+
+    @include vf-highlight-bar($colors--theme--text-default, left, true);
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      @include vf-highlight-bar($colors--theme--text-default, bottom, false);
+    }
+  }
+
   // small screen navigation toggles
   .p-navigation__toggle--close {
     display: none;
@@ -422,16 +452,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__toggle--search {
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
+    @extend %navigation-link-text;
     @include vf-focus;
 
     margin: 0 0 auto 0;
-
-    &,
-    &:visited,
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
   }
 
   .p-navigation:target {
@@ -502,6 +526,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     &::after {
+      @include vf-icon-search-themed;
+
       background-position: center;
       background-repeat: no-repeat;
       background-size: contain;
@@ -541,7 +567,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__search-overlay {
       @include vf-transition(opacity, snap);
 
-      background-color: $colors--light-theme--background-overlay;
+      background-color: $colors--theme--background-overlay;
       display: block;
       height: 100%;
       left: 0;
@@ -606,6 +632,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__dropdown--right {
     @extend %vf-has-box-shadow;
 
+    background-color: $colors--theme--background-default;
     display: none;
     margin: 0;
     min-width: 100%;
@@ -631,6 +658,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     position: relative;
 
     &::after {
+      @include vf-icon-chevron-themed;
+
       background-position: center;
       background-repeat: no-repeat;
       background-size: contain;
@@ -684,6 +713,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__dropdown-item {
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
+    @extend %navigation-link-text;
     @extend %vf-navigation-separator;
 
     display: block;
@@ -700,14 +730,6 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       padding-left: $sph--large;
       padding-top: $spv--medium;
     }
-
-    &,
-    &:active,
-    &:focus,
-    &:hover,
-    &:visited {
-      text-decoration: none;
-    }
   }
 
   @keyframes vf-nav-fade-in {
@@ -763,87 +785,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  /* stylelint-disable max-nesting-depth */
-  .p-navigation--sliding .p-navigation__items {
-    transition: transform $sliding-nav-animation-settings;
-
-    &.is-active {
-      transform: translateX(-25vw);
-      @media (min-width: $breakpoint-navigation-threshold) {
-        transform: none;
-      }
-      .p-navigation__dropdown {
-        transform: translateX(25vw);
-        @media (min-width: $breakpoint-navigation-threshold) {
-          transform: none;
-        }
-        &[aria-hidden='false'],
-        &:not([aria-hidden]) {
-          transform: translateX(-75vw);
-          @media (min-width: $breakpoint-navigation-threshold) {
-            transform: none;
-          }
-          &.is-active {
-            transform: translateX(-100vw);
-            @media (min-width: $breakpoint-navigation-threshold) {
-              transform: none;
-            }
-          }
-        }
-      }
-    }
-  }
-  /* stylelint-enable max-nesting-depth */
-
-  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
-    position: initial;
-
-    &::after {
-      content: none;
-    }
-
-    .p-navigation__link::after {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-      content: '';
-      display: block;
-      height: $spv--large;
-      pointer-events: none;
-      position: absolute;
-      right: map-get($grid-margin-widths, small);
-      text-indent: calc(100% + 10rem);
-      top: 1rem;
-      transform: rotate(-90deg);
-      width: map-get($icon-sizes, default);
-      @include vf-icon-chevron($colors--dark-theme--text-default);
-
-      @media (min-width: $breakpoint-navigation-threshold) {
-        right: 0.5rem;
-        top: 1.2rem;
-        transform: none;
-      }
-    }
-
-    &.is-active > .p-navigation__link::after {
-      @media (min-width: $breakpoint-navigation-threshold) {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .p-navigation--sliding .p-navigation__item--dropdown-close {
-    .p-navigation__link::after {
-      left: 1rem;
-      transform: rotate(90deg);
-    }
-    @media (min-width: $breakpoint-navigation-threshold) {
-      display: none;
-    }
-  }
-
-  /* stylelint-disable max-nesting-depth */
-
+  /* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */
   .p-navigation--sliding .p-navigation__dropdown {
     display: block;
     height: 100vh;
@@ -877,7 +819,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     &[aria-hidden='false'],
     &:not([aria-hidden]) {
       &::before {
-        opacity: 0.75;
+        @include vf-themed-property(opacity, 0.33, 0.75);
       }
 
       display: block;
@@ -899,160 +841,82 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  /* stylelint-enable max-nesting-depth */
-
-  // Theming
-  @if ($theme-default-nav == 'dark') {
-    .p-navigation,
-    .p-navigation--sliding {
-      @include vf-navigation-dark-theme;
-    }
-
-    .p-navigation.is-light,
-    .p-navigation--sliding.is-light {
-      @include vf-navigation-light-theme;
-    }
-  } @else {
-    .p-navigation,
-    .p-navigation--sliding {
-      @include vf-navigation-light-theme;
-    }
+  .p-navigation--sliding .p-navigation__items {
+    transition: transform $sliding-nav-animation-settings;
 
-    .p-navigation.is-dark,
-    .p-navigation--sliding.is-dark {
-      @include vf-navigation-dark-theme;
+    &.is-active {
+      transform: translateX(-25vw);
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: none;
+      }
+      .p-navigation__dropdown {
+        transform: translateX(25vw);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: none;
+        }
+        &[aria-hidden='false'],
+        &:not([aria-hidden]) {
+          transform: translateX(-75vw);
+          @media (min-width: $breakpoint-navigation-threshold) {
+            transform: none;
+          }
+          &.is-active {
+            transform: translateX(-100vw);
+            @media (min-width: $breakpoint-navigation-threshold) {
+              transform: none;
+            }
+          }
+        }
+      }
     }
   }
-}
-
-@mixin vf-navigation-theme(
-  // color for the navigation separator on small screens
-  $color-navigation-separator,
-  // color for the navigation background
-  $color-navigation-background,
-  $color-navigation-background--active,
-  // color for the navigation text
-  $color-navigation-text,
-  $color-navigation-background--hover,
-  // color for the navigation highlight bar
-  $color-navigation-highlight,
-  $color-navigation-icon,
-  $overlay-target-opacity
-) {
-  background-color: $color-navigation-background;
-
-  .p-navigation__link,
-  .p-navigation__link--search-toggle,
-  .p-navigation__toggle--close,
-  .p-navigation__toggle--open,
-  .p-navigation__dropdown-item {
-    &,
-    &:hover,
-    &:visited,
-    &:focus {
-      color: $color-navigation-text;
-    }
+  /* stylelint-enable max-nesting-depth */
 
-    &:hover {
-      background-color: $color-navigation-background--hover;
+  .p-navigation--sliding .p-navigation__item--dropdown-close {
+    .p-navigation__link::after {
+      left: 1rem;
+      transform: rotate(90deg);
     }
-
-    &[aria-pressed='true'],
-    &:active {
-      background-color: $color-navigation-background--active;
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: none;
     }
   }
 
-  .p-navigation__logo-title {
-    color: $color-navigation-text;
-  }
+  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
+    position: initial;
 
-  .p-navigation__item--dropdown-toggle {
     &::after {
-      @include vf-icon-chevron($color-navigation-icon);
-    }
-    & > .p-navigation__link {
-      &::after {
-        @include vf-icon-chevron($color-navigation-icon);
-      }
+      content: none;
     }
 
-    &.is-active > .p-navigation__link {
-      background-color: $color-navigation-background--active;
-    }
-  }
+    .p-navigation__link::after {
+      @include vf-icon-chevron-themed;
 
-  .p-navigation__item--dropdown-close {
-    & > .p-navigation__link {
-      &::after {
-        @include vf-icon-chevron($color-navigation-icon);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: '';
+      display: block;
+      height: $spv--large;
+      pointer-events: none;
+      position: absolute;
+      right: map-get($grid-margin-widths, small);
+      text-indent: calc(100% + 10rem);
+      top: 1rem;
+      transform: rotate(-90deg);
+      width: map-get($icon-sizes, default);
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        right: 0.5rem;
+        top: 1.2rem;
+        transform: none;
       }
     }
-  }
-
-  .p-navigation__toggle--search::after,
-  .p-navigation__item .p-navigation__link--search-toggle::after {
-    @include vf-icon-search($color-navigation-icon);
-  }
-
-  .p-navigation__dropdown,
-  .p-navigation__dropdown--right {
-    background-color: $color-navigation-background;
-  }
-
-  [class*='p-navigation__item'].is-selected > .p-navigation__link {
-    background-color: $color-navigation-background--hover;
 
-    @include vf-highlight-bar($color-navigation-highlight, left, true);
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      @include vf-highlight-bar($color-navigation-highlight, bottom, false);
+    &.is-active > .p-navigation__link::after {
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: rotate(180deg);
+      }
     }
   }
-
-  // add color to separator line for navigation items, navigation links and dropdown items
-  .p-navigation__nav .p-navigation__link::before,
-  .p-navigation__nav .p-navigation__items::before,
-  .p-navigation__nav .p-navigation__items .p-navigation__dropdown-item::before {
-    background: $color-navigation-separator;
-  }
-
-  // on mobile expanded nav needs to match pressed color of the buttons
-  &.has-menu-open .p-navigation__nav,
-  &.p-navigation:target .p-navigation__nav,
-  &.p-navigation:target .p-navigation__dropdown,
-  &.has-search-open .p-navigation__nav {
-    background-color: $color-navigation-background;
-  }
-
-  .p-navigation__dropdown[aria-hidden='false']::before,
-  .p-navigation__dropdown:not([aria-hidden])::before {
-    opacity: $overlay-target-opacity;
-  }
-}
-
-@mixin vf-navigation-light-theme {
-  @include vf-navigation-theme(
-    $color-navigation-text: $colors--light-theme--text-default,
-    $color-navigation-background: $colors--light-theme--background-default,
-    $color-navigation-background--hover: $colors--light-theme--background-alt,
-    $color-navigation-background--active: $colors--light-theme--background-active,
-    $color-navigation-highlight: $colors--light-theme--text-default,
-    $color-navigation-separator: $colors--light-theme--border-low-contrast,
-    $color-navigation-icon: $colors--light-theme--text-default,
-    $overlay-target-opacity: 0.33
-  );
-}
-
-@mixin vf-navigation-dark-theme {
-  @include vf-navigation-theme(
-    $color-navigation-text: $colors--dark-theme--text-default,
-    $color-navigation-background: $colors--dark-theme--background-default,
-    $color-navigation-background--hover: $colors--dark-theme--background-hover,
-    $color-navigation-background--active: $colors--dark-theme--background-alt,
-    $color-navigation-highlight: $colors--dark-theme--text-default,
-    $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-    $color-navigation-icon: $colors--dark-theme--text-default,
-    $overlay-target-opacity: 0.75
-  );
 }

package/scss/_patterns_notifications.scss

@@ -74,7 +74,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
   // The mixin for basic notification styling
   %vf-notification {
     @extend %vf-is-bordered;
-    @extend %vf-bg--x-light;
 
     background: $colors--theme--background-default;
     background-position: $sph--large $notification-icon-vert-offset;
@@ -215,7 +214,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
   .p-notification {
     @extend %vf-notification;
     @include vf-highlight-bar($colors--theme--border-information, left, true);
-    @include vf-icon-info-themed;
+    @include vf-icon-info-coloured-themed;
   }
 }
 
@@ -251,6 +250,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
   .p-notification--information {
     @extend %vf-notification;
     @include vf-highlight-bar($colors--theme--border-information, left, true);
-    @include vf-icon-info-themed;
+    @include vf-icon-info-coloured-themed;
   }
 }

package/scss/_patterns_table-mobile-card.scss

@@ -24,8 +24,9 @@
           width: 100%;
         }
 
-        tr {
-          border: $border;
+        // tbody selector needed to override the default table styles
+        tbody tr {
+          border: 1px solid $colors--theme--border-default;
           display: block;
           margin-bottom: $spv--x-large;
           padding: 0 $sph--large;

package/scss/_settings_colors.scss

@@ -50,6 +50,9 @@ $active-background-opacity-amount: 0.08;
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
 
+$active-background-opacity-percentage: $active-background-opacity-amount * 100%;
+$hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
+
 // NON-SEMANTIC COLOURS
 $color-label-validated: #006b75;
 $color-code-background: rgba($color-x-dark, 0.03);

package/scss/_settings_themes.scss

@@ -1,11 +1,14 @@
+// deprecated
+// the following SCSS variables are deprecated and will be removed in a future release
+// they are not used to switch themes anymore, instead use the CSS theme class names `is-light`, `is-dark` or `is-paper`
 $theme-default-forms: 'light' !default;
-$theme-default-hr: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-hr: 'light' !default;
 $theme-default-nav: 'light' !default;
-$theme-default-p-side-navigation: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-p-side-navigation: 'light' !default;
 $theme-default-p-search-box: 'light' !default;
-$theme-default-p-divider: 'light' !default; // deprecated -- use new theme classes instead
-$theme-default-p-contextual-menu: 'light' !default; // deprecated -- use new theme classes instead
-$theme-default-p-inline-list--middot: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-p-divider: 'light' !default;
+$theme-default-p-contextual-menu: 'light' !default;
+$theme-default-p-inline-list--middot: 'light' !default;
 $theme-default-p-button: 'light' !default;
 $theme-default-p-chip: 'light' !default;
-$theme-default-p-tabs: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-p-tabs: 'light' !default;

package/scss/_vanilla.scss

@@ -4,18 +4,19 @@
 
 @import 'patterns_accordion';
 @import 'patterns_article-pagination';
+@import 'patterns_badge';
 @import 'patterns_breadcrumbs';
 @import 'patterns_buttons';
 @import 'patterns_card';
 @import 'patterns_chip';
-@import 'patterns_badge';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_divider';
+@import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
-@import 'patterns_form-validation';
-@import 'patterns_form-tick-elements';
 @import 'patterns_form-password-toggle';
+@import 'patterns_form-tick-elements';
+@import 'patterns_form-validation';
 @import 'patterns_forms';
 @import 'patterns_grid';
 @import 'patterns_heading-icon';
@@ -39,22 +40,22 @@
 @import 'patterns_search-and-filter';
 @import 'patterns_search-box';
 @import 'patterns_section';
+@import 'patterns_segmented-control';
 @import 'patterns_separator';
-@import 'patterns_side-navigation';
 @import 'patterns_side-navigation-expandable';
+@import 'patterns_side-navigation';
 @import 'patterns_slider';
 @import 'patterns_status-label';
 @import 'patterns_strip';
+@import 'patterns_suru';
 @import 'patterns_switch';
-@import 'patterns_segmented-control';
-@import 'patterns_table-icons';
 @import 'patterns_table-expanding';
-@import 'patterns_table-of-contents';
+@import 'patterns_table-icons';
 @import 'patterns_table-mobile-card';
+@import 'patterns_table-of-contents';
 @import 'patterns_table-sortable';
 @import 'patterns_tabs';
 @import 'patterns_tooltips';
-@import 'patterns_suru';
 
 // Layouts
 @import 'layouts_application';
@@ -96,22 +97,23 @@
   // Patterns
   @include vf-p-accordion;
   @include vf-p-article-pagination;
+  @include vf-p-badge;
   @include vf-p-breadcrumbs;
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
-  @include vf-p-section;
-  @include vf-p-badge;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-divider;
+  @include vf-p-equal-height-row;
   @include vf-p-form-help-text;
-  @include vf-p-form-validation;
   @include vf-p-form-tick-elements;
+  @include vf-p-form-validation;
   @include vf-p-forms;
   @include vf-p-grid;
   @include vf-p-heading-icon;
   @include vf-p-headings;
+  @include vf-p-section;
 
   @include vf-p-form-password-toggle;
   @include vf-p-icons;