vanilla-framework 4.9.1 → 4.11.0

package/scss/_patterns_lists.scss

@@ -121,7 +121,7 @@ $list-step-bullet-margin: $sph--x-large;
 }
 
 @mixin vf-list-item-divided {
-  box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+  box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   margin: 0;
   padding-bottom: $sph--large;
   padding-top: $sph--small;
@@ -131,7 +131,7 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   .p-list--divided > .p-list__item:first-child {
-    box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+    box-shadow: inset 0px 1px 0px 0px $colors--theme--border-low-contrast;
   }
 }
 
@@ -396,7 +396,7 @@ $list-step-bullet-margin: $sph--x-large;
         position: relative;
 
         &::after {
-          background-color: $colors--light-theme--border-low-contrast;
+          background-color: $colors--theme--border-low-contrast;
           content: '';
           height: 1px;
           left: 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,86 @@ $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;
+            }
+          }
+        }
+      }
     }
   }
-}
+  /* stylelint-enable max-nesting-depth */
 
-@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;
-    }
+  .p-navigation--sliding {
+    // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
+    .p-navigation__item--dropdown-toggle {
+      position: initial;
 
-    &:hover {
-      background-color: $color-navigation-background--hover;
-    }
+      &::after {
+        content: none;
+      }
 
-    &[aria-pressed='true'],
-    &:active {
-      background-color: $color-navigation-background--active;
-    }
-  }
+      .p-navigation__link::after {
+        @include vf-icon-chevron-themed;
 
-  .p-navigation__logo-title {
-    color: $color-navigation-text;
-  }
+        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);
 
-  .p-navigation__item--dropdown-toggle {
-    &::after {
-      @include vf-icon-chevron($color-navigation-icon);
-    }
-    & > .p-navigation__link {
-      &::after {
-        @include vf-icon-chevron($color-navigation-icon);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          right: 0.5rem;
+          top: 1.2rem;
+          transform: none;
+        }
       }
-    }
-
-    &.is-active > .p-navigation__link {
-      background-color: $color-navigation-background--active;
-    }
-  }
 
-  .p-navigation__item--dropdown-close {
-    & > .p-navigation__link {
-      &::after {
-        @include vf-icon-chevron($color-navigation-icon);
+      &.is-active > .p-navigation__link::after {
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: rotate(180deg);
+        }
       }
     }
-  }
 
-  .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);
+    // Style for the "go back" button that closes the current level of the sidenav dropdown. Overrides base style from above
+    .p-navigation__item--dropdown-close {
+      .p-navigation__link::after {
+        left: 1rem;
+        transform: rotate(90deg);
+      }
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: none;
+      }
     }
   }
-
-  // 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;

package/scss/_patterns_pagination.scss

@@ -7,8 +7,8 @@
 
     &.is-active,
     &[aria-current='page'] {
-      background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
-      color: $colors--light-theme--text-default;
+      background-color: $colors--theme--background-active;
+      color: $colors--theme--text-default;
       text-decoration: none;
     }
   }

package/scss/_patterns_rule.scss

@@ -8,19 +8,11 @@
   }
 
   .p-rule--muted {
-    background-color: $colors--light-theme--border-low-contrast;
-
-    &.is-dark {
-      background-color: $colors--dark-theme--border-low-contrast;
-    }
+    background-color: $colors--theme--border-low-contrast;
   }
 
   .p-rule--highlight {
-    @include vf-highlight-bar($colors--light-theme--text-default);
-
-    &.is-dark {
-      @include vf-highlight-bar($colors--dark-theme--text-default);
-    }
+    @include vf-highlight-bar($colors--theme--text-default);
 
     &.is-accent {
       @include vf-highlight-bar($color-accent);

package/scss/_patterns_suru.scss

@@ -8,7 +8,7 @@
     :root,
     .is-light,
     .is-paper {
-      // new suru backgrounds don't have while (light) version,
+      // new suru backgrounds don't have white (light) version,
       // they need paper background
       --vf-suru-background: #{$color-paper};
       --vf-suru-25-75: url('#{$assets-path}505636a6-0000_suru-main-25x75-light.png');
@@ -17,6 +17,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}2adade55-suru-corner-fan--bottom-0000_light.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}8846d6a5-suru-pyramid-top-corner_0000_light.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}5d9f8cd3-suru-pyramid-top-right-corner_0000_light.jpg');
+      --vf-suru-divider: url('#{$assets-path}9e25feb2-suru-triangle-from-left-edge--_0000_light.jpg');
     }
 
     .is-dark {
@@ -27,6 +28,7 @@
       --vf-suru-fan-bottom-right: url('#{$assets-path}725af649-suru-corner-fan--bottom-0001_dark.jpg');
       --vf-suru-pyramid-top-left: url('#{$assets-path}86ed5771-suru-pyramid-top-corner_0001_dark.jpg');
       --vf-suru-pyramid-top-right: url('#{$assets-path}9f740811-suru-pyramid-top-right-corner_0001_dark.jpg');
+      --vf-suru-divider: url('#{$assets-path}9c0bee5c-suru-triangle-from-left-edge--_0001_dark.jpg');
     }
   }
 
@@ -85,7 +87,6 @@
     }
 
     // padding top based on p-section--hero
-    // bottom padding not needed (as it's covered by the suru background image)
     padding-top: $spv--large;
 
     // on large screens, same as %section-padding--shallow
@@ -108,7 +109,7 @@
       background-image: var(--vf-suru-fan-top-right);
       background-position: top right;
       background-repeat: no-repeat;
-      background-size: 512px 385.5px; // based on image dimensions (2048x1542) scaled down by 0.25
+      background-size: 32rem 24.09rem; // based on image dimensions (2048x1542) scaled down by 0.25, coverted to rem
     }
 
     .p-suru--fan-bottom {
@@ -121,7 +122,7 @@
       background-image: var(--vf-suru-pyramid-top-left);
       background-position: top left;
       background-repeat: no-repeat;
-      background-size: 354px 258.75px; // based on image dimensions (1380x1035) scaled down by 0.25
+      background-size: 22.125rem 16.1718rem; // based on image dimensions (1380x1035) scaled down by 0.25, converted to rem
     }
 
     .p-suru--pyramid-right {
@@ -129,4 +130,34 @@
       background-position: top right;
     }
   }
+
+  .p-suru--divider {
+    background-color: var(--vf-suru-background);
+    color: $colors--theme--text-default;
+    // same as %section-padding--deep
+    padding-bottom: calc($spv--strip-deep / 2);
+    position: relative;
+
+    // only apply suru background images on large screens
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: calc(2 * $spv--strip-deep);
+
+      &::after {
+        $suru-divider-height: 13.75rem; // 220px / 16px = 13.75rem
+
+        background-image: var(--vf-suru-divider);
+        background-position: bottom left;
+        background-repeat: no-repeat;
+        background-size: 80rem 14.8125rem; // based on image dimensions (2560x474) scaled down by 0.5, converted to rem
+
+        bottom: calc((2 * $spv--strip-deep - $suru-divider-height) / 2);
+        content: '';
+        display: block;
+
+        height: $suru-divider-height;
+        position: absolute;
+        width: 100%;
+      }
+    }
+  }
 }

package/scss/_settings_colors.scss

@@ -179,9 +179,9 @@ $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default,
 $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
-$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.3) !default;
+$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;
-$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.05) !default;
+$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
 $colors--dark-theme--icon: $colors--dark-theme--text-default !default;
 

package/scss/_settings_spacing.scss

@@ -52,10 +52,10 @@ $nudges: (
   h4-large: 0.45rem,
   h4: 0.45rem,
   h4-mobile: 0.45rem,
-  h5: 0.4rem,
-  h6: 0.4rem,
-  h6-large: 0.4rem,
-  p: 0.4rem,
+  h5: 0.375rem,
+  h6: 0.375em,
+  h6-large: 0.375rem,
+  p: 0.375rem,
   p-ubuntumono: 0.45rem,
   small: 0.05rem,
   x-small: 0.25rem,