vanilla-framework 4.37.1 → 4.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.37.1",
+  "version": "4.38.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -95,5 +95,9 @@
   },
   "peerDependencies": {
     "sass": "^1.79.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }

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;
   }
 }
 

package/templates/_macros/vf_basic-section.jinja

@@ -300,6 +300,7 @@
 # padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
 # is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
 # top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
+# attrs: A dictionary of attributes to apply to the section element.
 {% macro vf_basic_section(
   title={},
   label_text="",
@@ -307,7 +308,8 @@
   items=[],
   padding="default",
   is_split_on_medium=false,
-  top_rule_variant="default"
+  top_rule_variant="default",
+  attrs={}
 ) -%}
 
   {%- set padding = padding | trim -%}
@@ -330,7 +332,13 @@
   {%- set has_label = label_text|length > 0 -%}
   {%- set has_subtitle = subtitle_text|length > 0 -%}
 
-<section class="{{ padding_classes }}">
+<section class="{{ padding_classes }} {{ attrs.get("class", "") -}}" 
+  {%- for attr, value in attrs.items() -%}
+    {% if attr != "class" %}
+      {{ attr }}="{{ value }}"
+    {%- endif -%}
+  {%- endfor -%}
+>
   <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
     {{ vf_section_top_rule(top_rule_variant) }}
     <div class="grid-col">

package/templates/_macros/vf_equal-heights.jinja

@@ -1,6 +1,7 @@
 {#-
   Params
   - title_text (string) (required): The text to be displayed as the heading
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the equal heights pattern.
   - subtitle_text (string) (optional): The text to be displayed as the subtitle
   - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
   - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
@@ -11,6 +12,7 @@
  -#}
 {%- macro vf_equal_heights(
   title_text,
+  attrs={},
   subtitle_text="",
   subtitle_heading_level=5,
   highlight_images=false,
@@ -31,7 +33,13 @@
     {% set subtitle_heading_level=5 %}
   {%- endif -%}
 
-  <div class="p-section">
+  <div class="p-section {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     <hr class="p-rule is-fixed-width"/>
     <div class="p-section--shallow">
     {%- if has_two_top_cols -%}

package/templates/_macros/vf_pricing-block.jinja

@@ -2,6 +2,7 @@
   Params
   - title_text (string) (required): The text to be displayed as the heading
   - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the Pricing block section.
   - tiers (Array<{
       tier_name_text: String (optional),
       tier_price_text: String,
@@ -20,6 +21,7 @@
 {%- macro vf_pricing_block(
   top_rule_variant="default",
   title_text="",
+  attrs={},
   tiers=[]
   ) -%}
   {% set top_rule_variant = top_rule_variant | trim %}
@@ -86,7 +88,13 @@
       <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
     {% endif %}
   {%- endmacro -%}
-  <div class="p-section">
+  <div class="p-section {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     {{ _top_rule() }}
     <div class="grid-row">
       <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">