vanilla-framework 4.16.0 → 4.17.1

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,7 +54,7 @@
 // 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;

package/scss/_patterns_chip.scss

@@ -71,6 +71,26 @@
   @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 {
@@ -81,19 +101,16 @@
     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
 
@@ -119,18 +136,14 @@
   }
 
   // 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
 
@@ -156,18 +169,14 @@
   }
 
   // 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
 
@@ -193,18 +202,14 @@
   }
 
   // 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
 
@@ -230,18 +235,14 @@
   }
 
   // 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_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

@@ -25,6 +25,7 @@
         Image element within an image container.
 */
 
+@use 'sass:color';
 @import 'settings';
 
 // Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
@@ -117,6 +118,6 @@ $aspect-ratios: (
 
   // 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;
@@ -43,10 +44,10 @@
     &: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_strip.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-p-strip {
@@ -118,9 +119,9 @@
 
 // DEPRECATED:
 // gradient of the main suru slant
-$color-suru-start: lighten($color-brand, 10%) !default;
+$color-suru-start: color.adjust($color-brand, $lightness: 10%) !default;
 $color-suru-middle: $color-brand !default;
-$color-suru-end: darken($color-brand, 10%) !default;
+$color-suru-end: color.adjust($color-brand, $lightness: -10%) !default;
 
 // page background
 $color-suru-background: $color-x-light !default;

package/scss/_patterns_switch.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 $knob-size: $sp-unit * 2;
 
@@ -37,7 +38,7 @@ $knob-size: $sp-unit * 2;
   .p-switch__slider {
     background: $colors--theme--background-neutral-default;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
+    box-shadow: inset 0 2px 5px 0 color.scale($color-x-dark, $alpha: -80%);
     display: inline-block;
     height: $knob-size;
     margin: 0;

package/scss/_settings_colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Global color settings
 $color-transparent: transparent !default;
 
@@ -123,7 +125,7 @@ $colors--light-theme--background-code: $color-code-background !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;
+$colors--light-theme--background-overlay: color.scale($color-dark, $alpha: -15%) !default;
 
 $colors--light-theme--border-default: rgba($color-x-dark, 0.2) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
@@ -183,7 +185,7 @@ $colors--dark-theme--background-code: $color-code-background-dark !default;
 $colors--dark-theme--background-inputs: #2f2f2f !default;
 $colors--dark-theme--background-active: #373737 !default;
 $colors--dark-theme--background-hover: #313131 !default;
-$colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
+$colors--dark-theme--background-overlay: color.scale($color-dark, $alpha: -15%) !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;

package/scss/_settings_placeholders.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings_spacing';
 @import 'settings_colors';
 
@@ -7,7 +8,7 @@ $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems s
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $colors--theme--border-default !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;
+  0 1px 1px 0 color.scale($color-x-dark, $alpha: -85%),
+  0 2px 2px -1px color.scale($color-x-dark, $alpha: -85%),
+  0 0 3px 0 color.scale($color-x-dark, $alpha: -80%) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

package/scss/_utilities_baseline-grid.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-u-baseline-grid {
@@ -9,7 +10,7 @@
     position: relative;
 
     &::after {
-      background: linear-gradient(to top, transparentize($baseline-color, 0.85), transparentize($baseline-color, 0.85) 1px, transparent 1px, transparent);
+      background: linear-gradient(to top, color.scale($baseline-color, $alpha: -85%), color.scale($baseline-color, $alpha: -85%) 1px, transparent 1px, transparent);
       background-size: 100% $baseline-size;
       bottom: 0;
       content: '';
@@ -26,7 +27,7 @@
   // baseline grid on document should be in the background
   // stylelint-disable selector-max-type -- needed for examples
   html.u-baseline-grid {
-    background-color: transparentize($baseline-color, 0.95);
+    background-color: color.scale($baseline-color, $alpha: -95%);
     position: static;
 
     &::after {

package/scss/_utilities_content-align.scss

@@ -6,6 +6,7 @@
   @include vf-u-align--left;
   @include vf-u-align--right;
   @include vf-u-align--bottom;
+  @include vf-u-vertical-align--middle;
   @include vf-u-align--text;
 }
 
@@ -33,12 +34,20 @@
   }
 }
 
+// Bottom align flex elements
 @mixin vf-u-align--bottom {
   .u-align--bottom {
     margin-top: auto !important;
   }
 }
 
+// Vertically align inline elements
+@mixin vf-u-vertical-align--middle {
+  .u-vertical-align--middle {
+    vertical-align: middle !important;
+  }
+}
+
 // Separate utility for aligning text
 @mixin vf-u-align--text {
   .u-align-text {