vanilla-framework 4.21.1 → 4.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.21.1",
+  "version": "4.22.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_base_icon-definitions.scss

@@ -1486,3 +1486,30 @@
 @mixin vf-icon-credit-card-themed {
   @include vf-themed-icon($light-value: vf-icon-credit-card-url($colors--light-theme--icon), $dark-value: vf-icon-credit-card-url($colors--dark-theme--icon));
 }
+
+// ICONS ADDED IN MARCH 2025 v4.22.0
+// heading
+@function vf-icon-heading-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M3.704 13.544V2.456h1.648v4.592h5.296V2.456h1.648v11.088h-1.648V8.456H5.352v5.088z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-heading($color: $colors--light-theme--icon) {
+  background-image: vf-icon-heading-url($color);
+}
+
+@mixin vf-icon-heading-themed {
+  @include vf-themed-icon($light-value: vf-icon-heading-url($colors--light-theme--icon), $dark-value: vf-icon-heading-url($colors--dark-theme--icon));
+}
+
+// quote
+@function vf-icon-quote-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='m3.623 12.782-2.026-.856q1.17-2.206 1.576-4.008.45-1.846.45-3.378v-.766q0-.36-.045-.765h3.018v.495q0 2.522-.72 4.82-.721 2.25-2.253 4.458m7.477 0-2.027-.856q1.125-2.206 1.531-4.008.45-1.846.45-3.378v-.766q0-.36-.045-.765h3.018q.045.135.045.27v.225q0 2.522-.766 4.82-.72 2.25-2.206 4.458'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-quote($color: $colors--light-theme--icon) {
+  background-image: vf-icon-quote-url($color);
+}
+
+@mixin vf-icon-quote-themed {
+  @include vf-themed-icon($light-value: vf-icon-quote-url($colors--light-theme--icon), $dark-value: vf-icon-quote-url($colors--dark-theme--icon));
+}

package/scss/_patterns_icons.scss

@@ -2051,4 +2051,20 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of October 2024**
+// ICONS ADDED IN MARCH 2025
+
+@mixin vf-p-icon-heading {
+  .p-icon--heading {
+    @extend %icon;
+    @include vf-icon-heading-themed;
+  }
+}
+
+@mixin vf-p-icon-quote {
+  .p-icon--quote {
+    @extend %icon;
+    @include vf-icon-quote-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of March 2025**

package/scss/_patterns_switch.scss

@@ -36,9 +36,8 @@ $knob-size: $sp-unit * 2;
   }
 
   .p-switch__slider {
-    background: $colors--theme--background-neutral-default;
+    background: $colors--theme--border-high-contrast;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 color.scale($color-x-dark, $alpha: -80%);
     display: inline-block;
     height: $knob-size;
     margin: 0;
@@ -46,11 +45,10 @@ $knob-size: $sp-unit * 2;
     width: $knob-size * 2;
 
     &::before {
-      @extend %vf-has-box-shadow;
       @include vf-transition($duration: slow);
 
       background: $colors--theme--background-default;
-      border: $input-border-thickness solid $colors--theme--background-neutral-default;
+      border: $input-border-thickness solid $colors--theme--border-high-contrast;
       border-radius: 50%;
       content: '';
       height: $knob-size;

package/scss/_settings_colors.scss

@@ -128,7 +128,7 @@ $colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness:
 $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;
+$colors--light-theme--border-high-contrast: #707070 !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
 $colors--light-theme--icon: $colors--light-theme--text-default !default;
@@ -188,7 +188,7 @@ $colors--dark-theme--background-hover: #313131 !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;
+$colors--dark-theme--border-high-contrast: #939393 !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;