vanilla-framework 4.37.1 → 4.37.2

package/package.json

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

package/scss/_base_icon-definitions.scss

@@ -711,10 +711,6 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.95 12.95l-.18.173-.074.068a6.926 6.926 0 01-.318.271l-.271.207-.209.146-.254.163-.225.132-.243.13-.21.103-.276.121-.133.054-.385.139-.271.082-.264.068-.298.065-.272.047-.337.043-.304.025L8.12 15 8 15l-.214-.003-.285-.015-.381-.037-.339-.05-.184-.036-.324-.074-.258-.07-.249-.079-.323-.118-.195-.08-.214-.095-.276-.137-.213-.116a7.006 7.006 0 01-.551-.35l-.197-.142-.175-.136-.176-.146-.297-.27-.16-.158-.213-.229-.07-.08a7 7 0 1110.772-.221l-.194.234a7.043 7.043 0 01-.334.358zM8.5 10.502h-1a3.498 3.498 0 00-3.017 1.726A5.473 5.473 0 008 13.5a5.478 5.478 0 003.518-1.272 3.499 3.499 0 00-2.826-1.72l-.192-.006zM8 2.5a5.5 5.5 0 00-4.557 8.581 5.004 5.004 0 012.203-1.724A2.978 2.978 0 015 7.5V7a3 3 0 116 0v.5c0 .701-.24 1.347-.644 1.858.888.355 1.65.957 2.202 1.722A5.5 5.5 0 008 2.5zm0 3a1.5 1.5 0 00-1.493 1.356L6.5 7v.5a1.5 1.5 0 002.993.144L9.5 7.5V7A1.5 1.5 0 008 5.5z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-restart($color) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.197 1.15v4.931h-1.5l-.001-2.478a5.5 5.5 0 106.302-.215l.75-1.3a7 7 0 11-8.263.562H1.268v-1.5h4.93z' fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd'/%3E%3C/svg%3E");
-}
-
 @mixin vf-icon-revisions($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.583 3.566l1.019 1.131a5.5 5.5 0 109.847 4.056h1.51A7.001 7.001 0 112.584 3.567zM5.748 4.74l2.221 2.51L12 7.25v1.5H7.294l-2.67-3.018 1.124-.993zm8.014-.714c.493.712.856 1.52 1.058 2.39h-1.552a5.47 5.47 0 00-.56-1.26l1.054-1.13zM9.504 1.162a6.967 6.967 0 012.626 1.186l-1.033 1.106a5.475 5.475 0 00-1.594-.746V1.162zm-2.34-.113l.001 1.514a5.462 5.462 0 00-1.795.605L4.344 2.03a6.956 6.956 0 012.82-.98z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
@@ -831,18 +827,6 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-play($color) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='play'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Triangle (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M11.3844 7.98987L5.50005 3.87809L5.50005 12.1161L11.3844 7.98987ZM12.538 9.01296C13.2485 8.51475 13.2476 7.46192 12.5363 6.96488L5.96604 2.37377C5.13747 1.7948 4.00005 2.3876 4.00005 3.3984L4.00005 12.5968C4.00005 13.6085 5.13935 14.2011 5.96773 13.6202L12.538 9.01296Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
-}
-
-@mixin vf-icon-pause($color) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='pause'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M5.5 3.02393H4V12.9917H5.5V3.02393ZM11.5 3.02393H10V12.9917H11.5V3.02393Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin vf-icon-stop($color) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='stop'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Rectangle 13 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12 3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V12C3.5 12.2761 3.72386 12.5 4 12.5H12C12.2761 12.5 12.5 12.2761 12.5 12V4C12.5 3.72386 12.2761 3.5 12 3.5ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
 // ICONS ADDED IN OCTOBER 2024
 
 // Base definition mixins:
@@ -1568,3 +1552,51 @@
     $dark-value: vf-icon-vulnerable-url($color: map-get($colors-dark-theme--tinted-borders, negative), $color-symbol: $colors--dark-theme--background-default)
   );
 }
+
+@function vf-icon-restart-url($color) {
+  @return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.197 1.15v4.931h-1.5l-.001-2.478a5.5 5.5 0 106.302-.215l.75-1.3a7 7 0 11-8.263.562H1.268v-1.5h4.93z' fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-restart($color: $colors--light-theme--icon) {
+  background-image: vf-icon-restart-url($color);
+}
+
+@mixin vf-icon-restart-themed {
+  @include vf-themed-icon($light-value: vf-icon-restart-url($colors--light-theme--icon), $dark-value: vf-icon-restart-url($colors--dark-theme--icon));
+}
+
+@function vf-icon-play-url($color) {
+  @return url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='play'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Triangle (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M11.3844 7.98987L5.50005 3.87809L5.50005 12.1161L11.3844 7.98987ZM12.538 9.01296C13.2485 8.51475 13.2476 7.46192 12.5363 6.96488L5.96604 2.37377C5.13747 1.7948 4.00005 2.3876 4.00005 3.3984L4.00005 12.5968C4.00005 13.6085 5.13935 14.2011 5.96773 13.6202L12.538 9.01296Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-play($color: $colors--light-theme--icon) {
+  background-image: vf-icon-play-url($color);
+}
+
+@mixin vf-icon-play-themed {
+  @include vf-themed-icon($light-value: vf-icon-play-url($colors--light-theme--icon), $dark-value: vf-icon-play-url($colors--dark-theme--icon));
+}
+
+@function vf-icon-pause-url($color) {
+  @return url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='pause'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M5.5 3.02393H4V12.9917H5.5V3.02393ZM11.5 3.02393H10V12.9917H11.5V3.02393Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@mixin vf-icon-pause($color: $colors--light-theme--icon) {
+  background-image: vf-icon-pause-url($color);
+}
+
+@mixin vf-icon-pause-themed {
+  @include vf-themed-icon($light-value: vf-icon-pause-url($colors--light-theme--icon), $dark-value: vf-icon-pause-url($colors--dark-theme--icon));
+}
+
+@function vf-icon-stop-url($color) {
+  @return url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='stop'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Rectangle 13 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12 3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V12C3.5 12.2761 3.72386 12.5 4 12.5H12C12.2761 12.5 12.5 12.2761 12.5 12V4C12.5 3.72386 12.2761 3.5 12 3.5ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@mixin vf-icon-stop($color: $colors--light-theme--icon) {
+  background-image: vf-icon-stop-url($color);
+}
+
+@mixin vf-icon-stop-themed {
+  @include vf-themed-icon($light-value: vf-icon-stop-url($colors--light-theme--icon), $dark-value: vf-icon-stop-url($colors--dark-theme--icon));
+}

package/scss/_patterns_badge.scss

@@ -17,6 +17,7 @@
     overflow: hidden;
     padding: 0 $spv--x-small;
     text-align: center;
+    text-indent: 0;
   }
 
   .p-badge,

package/scss/_patterns_icons.scss

@@ -1187,14 +1187,7 @@
 @mixin vf-p-icon-restart {
   .p-icon--restart {
     @extend %icon;
-    @include vf-icon-restart($colors--light-theme--icon);
-
-    [class*='--dark'] &,
-    body.is-dark &,
-    &.is-light, // DEPRECATED: use is-dark instead
-    &.is-dark {
-      @include vf-icon-restart($colors--dark-theme--icon);
-    }
+    @include vf-icon-restart-themed;
   }
 }
 
@@ -1663,42 +1656,21 @@
 @mixin vf-p-icon-play {
   .p-icon--play {
     @extend %icon;
-    @include vf-icon-play($colors--light-theme--icon);
-
-    [class*='--dark'] &,
-    body.is-dark &,
-    &.is-light, // DEPRECATED: use is-dark instead
-    &.is-dark {
-      @include vf-icon-play($color-mid-x-light);
-    }
+    @include vf-icon-play-themed;
   }
 }
 
 @mixin vf-p-icon-pause {
   .p-icon--pause {
     @extend %icon;
-    @include vf-icon-pause($colors--light-theme--icon);
-
-    [class*='--dark'] &,
-    body.is-dark &,
-    &.is-light, // DEPRECATED: use is-dark instead
-    &.is-dark {
-      @include vf-icon-pause($color-mid-x-light);
-    }
+    @include vf-icon-pause-themed;
   }
 }
 
 @mixin vf-p-icon-stop {
   .p-icon--stop {
     @extend %icon;
-    @include vf-icon-stop($colors--light-theme--icon);
-
-    [class*='--dark'] &,
-    body.is-dark &,
-    &.is-light, // DEPRECATED: use is-dark instead
-    &.is-dark {
-      @include vf-icon-stop($color-mid-x-light);
-    }
+    @include vf-icon-stop-themed;
   }
 }