vanilla-framework 4.15.0 → 4.17.0

package/scss/_patterns_icons.scss

@@ -1699,3 +1699,343 @@
 }
 
 // stylelint-enable selector-max-type
+
+// ICONS ADDED IN OCTOBER 2024
+
+@mixin vf-p-icon-archive {
+  .p-icon--archive {
+    @extend %icon;
+    @include vf-icon-archive-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-bottom-left {
+  .p-icon--arrow-bottom-left {
+    @extend %icon;
+    @include vf-icon-arrow-bottom-left-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-bottom-right {
+  .p-icon--arrow-bottom-right {
+    @extend %icon;
+    @include vf-icon-arrow-bottom-right-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-down {
+  .p-icon--arrow-down {
+    @extend %icon;
+    @include vf-icon-arrow-down-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-left {
+  .p-icon--arrow-left {
+    @extend %icon;
+    @include vf-icon-arrow-left-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-right {
+  .p-icon--arrow-right {
+    @extend %icon;
+    @include vf-icon-arrow-right-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-top-left {
+  .p-icon--arrow-top-left {
+    @extend %icon;
+    @include vf-icon-arrow-top-left-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-top-right {
+  .p-icon--arrow-top-right {
+    @extend %icon;
+    @include vf-icon-arrow-top-right-themed;
+  }
+}
+
+@mixin vf-p-icon-arrow-up {
+  .p-icon--arrow-up {
+    @extend %icon;
+    @include vf-icon-arrow-up-themed;
+  }
+}
+
+@mixin vf-p-icon-blueprint {
+  .p-icon--blueprint {
+    @extend %icon;
+    @include vf-icon-blueprint-themed;
+  }
+}
+
+@mixin vf-p-icon-book {
+  .p-icon--book {
+    @extend %icon;
+    @include vf-icon-book-themed;
+  }
+}
+
+@mixin vf-p-icon-certificate {
+  .p-icon--certificate {
+    @extend %icon;
+    @include vf-icon-certificate-themed;
+  }
+}
+
+@mixin vf-p-icon-certification {
+  .p-icon--certification {
+    @extend %icon;
+    @include vf-icon-certification-themed;
+  }
+}
+
+@mixin vf-p-icon-cluster-host {
+  .p-icon--cluster-host {
+    @extend %icon;
+    @include vf-icon-cluster-host-themed;
+  }
+}
+
+@mixin vf-p-icon-contact {
+  .p-icon--contact {
+    @extend %icon;
+    @include vf-icon-contact-themed;
+  }
+}
+
+@mixin vf-p-icon-contextual-menu {
+  .p-icon--contextual-menu {
+    @extend %icon;
+    @include vf-icon-contextual-menu-themed;
+  }
+}
+
+@mixin vf-p-icon-cursor {
+  .p-icon--cursor {
+    @extend %icon;
+    @include vf-icon-cursor-themed;
+  }
+}
+
+@mixin vf-p-icon-file-blank {
+  .p-icon--file-blank {
+    @extend %icon;
+    @include vf-icon-file-blank-themed;
+  }
+}
+
+@mixin vf-p-icon-file {
+  .p-icon--file {
+    @extend %icon;
+    @include vf-icon-file-themed;
+  }
+}
+
+@mixin vf-p-icon-folder {
+  .p-icon--folder {
+    @extend %icon;
+    @include vf-icon-folder-themed;
+  }
+}
+
+@mixin vf-p-icon-gift {
+  .p-icon--gift {
+    @extend %icon;
+    @include vf-icon-gift-themed;
+  }
+}
+
+@mixin vf-p-icon-image {
+  .p-icon--image {
+    @extend %icon;
+    @include vf-icon-image-themed;
+  }
+}
+
+@mixin vf-p-icon-iso {
+  .p-icon--iso {
+    @extend %icon;
+    @include vf-icon-iso-themed;
+  }
+}
+
+@mixin vf-p-icon-location {
+  .p-icon--location {
+    @extend %icon;
+    @include vf-icon-location-themed;
+  }
+}
+
+@mixin vf-p-icon-log-out {
+  .p-icon--log-out {
+    @extend %icon;
+    @include vf-icon-log-out-themed;
+  }
+}
+
+@mixin vf-p-icon-map {
+  .p-icon--map {
+    @extend %icon;
+    @include vf-icon-map-themed;
+  }
+}
+
+@mixin vf-p-icon-notifications {
+  .p-icon--notifications {
+    @extend %icon;
+    @include vf-icon-notifications-themed;
+  }
+}
+
+@mixin vf-p-icon-private-key {
+  .p-icon--private-key {
+    @extend %icon;
+    @include vf-icon-private-key-themed;
+  }
+}
+
+@mixin vf-p-icon-profiles {
+  .p-icon--profiles {
+    @extend %icon;
+    @include vf-icon-profiles-themed;
+  }
+}
+
+@mixin vf-p-icon-repository {
+  .p-icon--repository {
+    @extend %icon;
+    @include vf-icon-repository-themed;
+  }
+}
+
+@mixin vf-p-icon-security-error {
+  .p-icon--security-error {
+    @extend %icon;
+    @include vf-icon-security-error-themed;
+  }
+}
+
+@mixin vf-p-icon-security-tick {
+  .p-icon--security-tick {
+    @extend %icon;
+    @include vf-icon-security-tick-themed;
+  }
+}
+
+@mixin vf-p-icon-security-warning {
+  .p-icon--security-warning {
+    @extend %icon;
+    @include vf-icon-security-warning-themed;
+  }
+}
+
+@mixin vf-p-icon-select-add {
+  .p-icon--select-add {
+    @extend %icon;
+    @include vf-icon-select-add-themed;
+  }
+}
+
+@mixin vf-p-icon-select-remove {
+  .p-icon--select-remove {
+    @extend %icon;
+    @include vf-icon-select-remove-themed;
+  }
+}
+
+@mixin vf-p-icon-select {
+  .p-icon--select {
+    @extend %icon;
+    @include vf-icon-select-themed;
+  }
+}
+
+@mixin vf-p-icon-single-host {
+  .p-icon--single-host {
+    @extend %icon;
+    @include vf-icon-single-host-themed;
+  }
+}
+
+@mixin vf-p-icon-snapshot {
+  .p-icon--snapshot {
+    @extend %icon;
+    @include vf-icon-snapshot-themed;
+  }
+}
+
+@mixin vf-p-icon-snooze {
+  .p-icon--snooze {
+    @extend %icon;
+    @include vf-icon-snooze-themed;
+  }
+}
+
+@mixin vf-p-icon-statistics {
+  .p-icon--statistics {
+    @extend %icon;
+    @include vf-icon-statistics-themed;
+  }
+}
+
+@mixin vf-p-icon-thumbs-down {
+  .p-icon--thumbs-down {
+    @extend %icon;
+    @include vf-icon-thumbs-down-themed;
+  }
+}
+
+@mixin vf-p-icon-thumbs-up {
+  .p-icon--thumbs-up {
+    @extend %icon;
+    @include vf-icon-thumbs-up-themed;
+  }
+}
+
+@mixin vf-p-icon-tidy {
+  .p-icon--tidy {
+    @extend %icon;
+    @include vf-icon-tidy-themed;
+  }
+}
+
+@mixin vf-p-icon-toggle-side-nav {
+  .p-icon--toggle-side-nav {
+    @extend %icon;
+    @include vf-icon-toggle-side-nav-themed;
+  }
+}
+
+@mixin vf-p-icon-turn-off-notification {
+  .p-icon--turn-off-notification {
+    @extend %icon;
+    @include vf-icon-turn-off-notification-themed;
+  }
+}
+
+@mixin vf-p-icon-upload {
+  .p-icon--upload {
+    @extend %icon;
+    @include vf-icon-upload-themed;
+  }
+}
+
+@mixin vf-p-icon-usb {
+  .p-icon--usb {
+    @extend %icon;
+    @include vf-icon-usb-themed;
+  }
+}
+
+@mixin vf-p-icon-website {
+  .p-icon--website {
+    @extend %icon;
+    @include vf-icon-website-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of October 2024**

package/scss/_patterns_image.scss

@@ -18,13 +18,64 @@
         Wraps contents in a container with an aspect ratio of 2.4:1.
       .p-image-container--square:
         Wraps contents in a container with an aspect ratio of 1:1.
+      .p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large):
+        Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
     Image:
       .p-image-container__image:
         Image element within an image container.
 */
 
+@use 'sass:color';
 @import 'settings';
 
+// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
+$aspect-ratios: (
+  '16-9': calc(16 / 9),
+  '3-2': calc(3 / 2),
+  '2-3': calc(2 / 3),
+  'cinematic': 2.4,
+  'square': 1,
+);
+
+@mixin aspect-ratio-classes {
+  @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+    .p-image-container--#{$aspect-ratio} {
+      aspect-ratio: $aspect-ratio-value;
+    }
+  }
+
+  @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
+    $min-width: map-get($breakpoint-bounds-pair, min);
+    $max-width: map-get($breakpoint-bounds-pair, max);
+
+    @if $min-width and $max-width {
+      @media ($min-width <= width < $max-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    } @else if $min-width {
+      @media (width >= $min-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    } @else if $max-width {
+      @media (width < $max-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin vf-p-image {
   .p-image-container,
   [class^='p-image-container--'] {
@@ -54,21 +105,7 @@
     }
   }
 
-  .p-image-container--16-9 {
-    aspect-ratio: 16/9;
-  }
-  .p-image-container--3-2 {
-    aspect-ratio: 3/2;
-  }
-  .p-image-container--2-3 {
-    aspect-ratio: 2/3;
-  }
-  .p-image-container--cinematic {
-    aspect-ratio: 2.4/1;
-  }
-  .p-image-container--square {
-    aspect-ratio: 1/1;
-  }
+  @include aspect-ratio-classes;
 
   // Deprecated; will be removed in v5
   .p-image--bordered {
@@ -81,6 +118,6 @@
 
   // Deprecated; will be removed in v5
   .p-image--shadowed {
-    box-shadow: 0 1px 5px 1px transparentize($color-mid-light, 0.8);
+    box-shadow: 0 1px 5px 1px color.scale($color-mid-light, $alpha: -80%);
   }
 }

package/scss/_patterns_links.scss

@@ -34,6 +34,7 @@
   }
 
   .p-link--skip {
+    background: $colors--theme--background-alt;
     color: $colors--theme--link-default;
     display: block;
     left: -999px;
@@ -41,12 +42,12 @@
     top: -999px;
 
     &:focus {
-      @include vf-focus;
+      @include vf-focus-themed;
 
-      left: 0;
-      padding: $spv--x-small;
-      position: relative;
-      top: 0;
+      left: $sph--small;
+      padding: $spv--large $sph--large;
+      position: fixed;
+      top: $spv--small;
       z-index: 999999;
     }
   }

package/scss/_patterns_list-tree.scss

@@ -1,87 +1,93 @@
 @import 'settings';
 
 @mixin vf-p-list-tree {
-  %list-tree-icon {
-    $icon-size: 0.9375rem; // 15px
-    background: {
-      position: center;
-      repeat: no-repeat;
-    }
+  $list-tree-toggle-icon-size: 1rem;
+  $list-tree-item-indent-size: calc($sph--x-large + map-get($icon-sizes, small) / 2);
 
+  %list-tree-icon {
     content: ' ';
     display: block;
-    height: $icon-size;
-    left: -0.75rem;
+    height: $list-tree-toggle-icon-size;
+    left: 0;
     pointer-events: none;
     position: absolute;
-    top: 0.4rem;
-    width: $icon-size;
+    top: 0.3rem;
+    width: $list-tree-toggle-icon-size;
+  }
+
+  %list-tree-expand-icon {
+    @extend %list-tree-icon;
+    @include vf-icon-chevron-right-themed;
+  }
+
+  %list-tree-collapse-icon {
+    @extend %list-tree-icon;
+    @include vf-icon-chevron-down-themed;
+  }
+
+  .p-list-tree__link,
+  .p-list-tree__toggle {
+    color: $colors--theme--text-default;
+    cursor: pointer;
+
+    &:hover {
+      color: $colors--theme--link-default;
+      text-decoration: underline;
+    }
+
+    &.is-active {
+      color: $colors--theme--link-default;
+    }
   }
 
   .p-list-tree {
-    border-left: 1px solid $color-mid-light;
     list-style-type: none;
-    margin-left: $sp-medium;
-    padding: 0 0 0 $sp-x-small;
+    margin-left: $sp-x-small;
+    padding-left: $sph--small;
 
     .p-list-tree {
       display: none;
-      margin-left: 0;
+      margin: 0;
+      padding: 0;
 
       &[aria-hidden='false'] {
         display: block;
       }
 
-      &[aria-hidden='false']::after {
-        @extend %list-tree-icon;
-
-        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='15' width='15' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h15v15H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cuse xlink:href='%23a' fill='%23FFF'/%3E%3Cpath stroke='%23888' d='M.5.5h14v14H.5z'/%3E%3Cpath fill='%23888' d='M4 8V7h7v1z'/%3E%3C/g%3E%3C/svg%3E");
-        // At this point we need to push this icon above the --group icon.
-        z-index: 1;
+      &[aria-hidden='false']::before {
+        @extend %list-tree-collapse-icon;
       }
     }
   }
 
   .p-list-tree__item {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-top: $sp-xx-small;
-    padding-left: 0.8rem;
+    padding-left: $list-tree-item-indent-size;
     position: relative;
+  }
 
+  .p-list-tree__toggle[aria-expanded='false'] {
     &::before {
-      background: $color-mid-light;
-      content: ' ';
-      display: block;
-      height: 1px;
-      left: -$sp-x-small;
-      pointer-events: none;
-      position: absolute;
-      top: 0.8rem;
-      width: 0.625rem;
+      @extend %list-tree-expand-icon;
     }
   }
 
-  .p-list-tree__item--group::after {
-    @extend %list-tree-icon;
-
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='15' width='15' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h15v15H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cuse xlink:href='%23a' fill='%23FFF'/%3E%3Cpath stroke='%23888' d='M.5.5h14v14H.5z'/%3E%3Cpath fill='%23888' d='M7 4h1v7H7z'/%3E%3Cpath fill='%23888' d='M4 8V7h7v1z'/%3E%3C/g%3E%3C/svg%3E");
-  }
-
   .p-list-tree__toggle {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background: transparent;
     border: 0;
     font-weight: normal;
-    margin: 0 0.5rem 0 -1.75rem;
-    padding: 0 0.5rem 0 1.75rem;
+    margin: 0 0 0 (-$list-tree-item-indent-size);
+    padding: 0 $sph--small 0 $list-tree-item-indent-size;
     transition-duration: 0s;
 
+    // Hide the default button styling for toggles
+    &[aria-expanded='true'],
     &:hover {
-      background: transparent;
-      color: $color-link;
-      text-decoration: underline;
+      background: $colors--theme--background-default;
     }
   }
 }