vanilla-framework 4.13.0 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.13.0",
+  "version": "4.15.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -31,14 +31,14 @@
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
     "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
-    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
+    "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
     "test-spelling": "mdspell templates/docs/**/*.md -r -n -a --en-gb",
-    "test": "yarn lint-scss && yarn lint-prettier &&  yarn test-spelling && yarn test-scss",
+    "test": "yarn lint-scss && yarn lint-prettier &&  yarn test-spelling && yarn test-scss && yarn jest",
     "lint-prettier": "prettier -c .",
     "lint-scss": "stylelint 'scss/**/*.scss'",
     "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
@@ -57,22 +57,24 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.7",
+    "@percy/cli": "1.29.0",
     "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.19",
-    "cypress": "13.10.0",
+    "cypress": "13.13.2",
+    "jest": "29.7.0",
+    "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.38",
+    "postcss": "8.4.40",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.3.0",
-    "sass": "1.77.4",
-    "stylelint": "16.6.1",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "prettier": "3.3.3",
+    "sass": "1.77.8",
+    "stylelint": "16.8.1",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-prettier": "5.0.0",
+    "stylelint-prettier": "5.0.2",
     "svgo": "3.3.2",
-    "yaml": "2.4.3"
+    "yaml": "2.5.0"
   }
 }

package/scss/_base_forms-range.scss

@@ -78,11 +78,11 @@
       outline: none;
 
       &::-webkit-slider-thumb {
-        outline: $bar-thickness solid $color-focus;
+        outline: $bar-thickness solid $colors--theme--focus;
       }
 
       &::-moz-range-thumb {
-        outline: $bar-thickness solid $color-focus;
+        outline: $bar-thickness solid $colors--theme--focus;
       }
     }
 

package/scss/_base_forms.scss

@@ -163,11 +163,6 @@
     &::-webkit-search-results-decoration {
       display: none;
     }
-
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: searchfield-cancel-button; // stylelint-disable-line property-no-vendor-prefix
-      cursor: pointer;
-    }
   }
 
   input[list] {

package/scss/_base_icon-definitions.scss

@@ -17,10 +17,35 @@
   background-image: vf-icon-chevron-url($color);
 }
 
+// Default chevron is the same as down chevron - points down, as in its usage
+// in accordions/dropdowns
 @mixin vf-icon-chevron-themed {
   @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-chevron-up-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(180deg);
+}
+
+@mixin vf-icon-chevron-right-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(-90deg);
+}
+
+@mixin vf-icon-chevron-down-themed {
+  @include vf-icon-chevron-themed;
+}
+
+@mixin vf-icon-chevron-left-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(90deg);
+}
+
+@mixin vf-icon-chevron-muted {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--text-muted), $dark-value: vf-icon-chevron-url($colors--dark-theme--text-muted));
+}
+
 // anchor
 @function vf-icon-anchor-url($color) {
   @return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a2.5 2.5 0 01.75 4.885v1.068h2.27v1.5H8.75v5.022c2.438-.161 4.172-1.077 4.172-1.669h1.5C14.422 13.57 11.547 15 8 15c-3.547 0-6.422-1.43-6.422-3.194h1.5c0 .592 1.734 1.508 4.172 1.67V8.452H4.904v-1.5H7.25V5.886A2.501 2.501 0 018 1zm0 1.5a1 1 0 100 2 1 1 0 000-2z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -269,6 +294,10 @@
   @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--icon), $dark-value: vf-icon-search-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-search-muted {
+  @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--text-muted), $dark-value: vf-icon-search-url($colors--dark-theme--text-muted));
+}
+
 // success
 @function vf-icon-success-url($color: $color-positive, $color-symbol: $color-x-light) {
   @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");

package/scss/_base_placeholders.scss

@@ -43,7 +43,7 @@
   }
 
   %vf-card-padding {
-    overflow: auto;
+    overflow: auto; // prevent overflow of child margins
     padding: $spv--large;
   }
 
@@ -52,8 +52,6 @@
     @extend %vf-card-padding;
 
     margin-bottom: $spv--x-large;
-    overflow: auto; // prevent overflow of child margins
-    padding: $spv--large;
   }
 
   //accordion, table

package/scss/_global_functions.scss

@@ -62,7 +62,7 @@
 
 // Adds visual focus to elements on :focus-visible,
 // or :focus if the browser doesn't support the former
-@mixin vf-focus($color: $color-focus, $width: $bar-thickness, $has-validation: false) {
+@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
   &:focus {
     outline: $width solid $color;
     outline-offset: -#{$width};

package/scss/_layouts_application-panels.scss

@@ -1,14 +1,9 @@
 @mixin vf-l-application-panels {
   .p-panel {
-    background: $colors--light-theme--background-default;
-    color: $colors--light-theme--text-default;
+    background: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     max-width: 100%;
     min-height: 100%; // make sure it fills whole container even when has little content
-
-    &.is-dark {
-      background: $colors--dark-theme--background-default;
-      color: $colors--dark-theme--text-default;
-    }
   }
 
   .p-panel__header {
@@ -18,14 +13,10 @@
   }
 
   .p-panel__header.is-sticky {
-    background: $colors--light-theme--background-default;
+    background: $colors--theme--background-default;
     position: sticky;
     top: 0;
     z-index: 5;
-
-    .p-panel.is-dark & {
-      background: $colors--dark-theme--background-default;
-    }
   }
 
   .p-panel__content {

package/scss/_layouts_application.scss

@@ -229,7 +229,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-application .l-status {
-    border-top: 1px solid $colors--light-theme--border-low-contrast;
+    border-top: 1px solid $colors--theme--border-default;
     grid-area: status;
     z-index: 102;
   }
@@ -265,7 +265,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 
     @media (min-width: $application-layout--breakpoint-side-nav-collapsed) {
       &.is-pinned {
-        border-left: 1px solid $colors--light-theme--border-low-contrast;
+        border-left: 1px solid $colors--theme--border-default;
         box-shadow: none;
         grid-area: aside;
         justify-self: auto;

package/scss/_patterns_article-pagination.scss

@@ -3,7 +3,6 @@
 @mixin vf-p-article-pagination {
   %chevron-icon {
     @extend %icon;
-    @include vf-icon-chevron-themed;
 
     content: '';
     position: absolute;
@@ -73,9 +72,9 @@
 
     &::before {
       @extend %chevron-icon;
+      @include vf-icon-chevron-left-themed;
 
       left: $sp-small;
-      transform: rotate(90deg);
     }
   }
 
@@ -95,9 +94,9 @@
 
     &::after {
       @extend %chevron-icon;
+      @include vf-icon-chevron-right-themed;
 
       right: $sp-small;
-      transform: rotate(-90deg);
     }
   }
 }

package/scss/_patterns_buttons.scss

@@ -80,7 +80,7 @@
       $button-disabled-border-color: $colors--theme--button-positive-default,
       $button-text-color: $colors--theme--button-positive-text
     );
-    @include vf-focus($color-focus-positive);
+    @include vf-focus($colors--theme--positive-focus);
   }
 }
 

package/scss/_patterns_cta.scss

@@ -0,0 +1,20 @@
+/*
+  @classreference
+  cta-block:
+    CTA Block:
+      .p-cta-block:
+        Main element of the CTA block.
+*/
+
+@import 'settings';
+
+@mixin vf-p-cta-block {
+  .p-cta-block {
+    align-items: baseline;
+    border-top: 1px solid $colors--theme--border-low-contrast;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--small;
+  }
+}

package/scss/_patterns_form-tick-elements.scss

@@ -65,7 +65,7 @@
 
   %vf-pseudo-tick-box-focused {
     &::before {
-      outline: $bar-thickness solid $color-focus;
+      outline: $bar-thickness solid $colors--theme--focus;
     }
   }
 

package/scss/_patterns_grid.scss

@@ -39,7 +39,7 @@
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
   .grid-demo .col,
   .grid-demo [class*='#{$grid-column-prefix}'] {
-    background: transparentize($color-negative, 0.9);
+    background: $colors--theme--background-negative-default;
     margin-bottom: $spv--small;
   }
 
@@ -167,11 +167,12 @@
 
   // variants
 
+  // deprecated, will be removed in v5
   .row.is-bordered {
     position: relative;
 
     &::before {
-      background: $color-mid-light;
+      background: $colors--theme--border-low-contrast;
       content: '';
       height: 1px;
       left: map-get($grid-margin-widths, small);
@@ -319,6 +320,77 @@
     }
   }
 
+  // 75/25 split on medium and large screens
+  .row--75-25 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-medium {
+    @extend %vf-row;
+
+    > .col {
+      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-large {
+    @extend %vf-row;
+
+    > .col {
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
   .row--25-25-50 {
     @extend %vf-row;
 

package/scss/_patterns_icons.scss

@@ -130,21 +130,23 @@
 
 @mixin vf-p-icon-chevron {
   .p-icon--chevron-up {
-    transform: rotate(180deg);
-  }
-  .p-icon--chevron-left {
-    transform: rotate(90deg);
+    @include vf-icon-chevron-up-themed;
   }
   .p-icon--chevron-right {
-    transform: rotate(-90deg);
+    @include vf-icon-chevron-right-themed;
+  }
+  .p-icon--chevron-down {
+    @include vf-icon-chevron-down-themed;
+  }
+  .p-icon--chevron-left {
+    @include vf-icon-chevron-left-themed;
   }
 
-  .p-icon--chevron-left,
+  .p-icon--chevron-up,
   .p-icon--chevron-right,
   .p-icon--chevron-down,
-  .p-icon--chevron-up {
+  .p-icon--chevron-left {
     @extend %icon;
-    @include vf-icon-chevron-themed;
   }
 }
 

package/scss/_patterns_image.scss

@@ -4,6 +4,8 @@
     Image container:
       .p-image-container:
         Main element of the image component.
+      "&.is-cover":
+        Cover variant, to be used to set the `.p-image-container__image` within to cover the container.
       "&.is-highlighted":
         Highlighted variant, to be used to highlight contents.
       .p-image-container--16-9:
@@ -27,14 +29,28 @@
   .p-image-container,
   [class^='p-image-container--'] {
     align-items: center;
-    display: grid;
+    display: flex;
     justify-content: center;
     text-align: center;
+
+    &.is-highlighted {
+      background: $colors--theme--background-alt;
+    }
+
     .p-image-container__image {
+      // max height prevents the image from stretching the container
+      // when the aspect ratio is set, and object-fit ensures the aspect ratio
+      // of the image content is maintained
+      max-height: 100%;
       object-fit: contain;
     }
-    &.is-highlighted {
-      background: $colors--theme--background-alt;
+
+    &.is-cover {
+      .p-image-container__image {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
     }
   }
 

package/scss/_patterns_links.scss

@@ -77,4 +77,30 @@
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }
+
+  .p-link--anchor-heading {
+    color: $colors--theme--text-default;
+
+    &:visited {
+      color: $colors--theme--text-default;
+    }
+
+    &::after {
+      @extend %icon;
+      @include vf-icon-get-link-themed;
+
+      content: '';
+      margin-left: $sph--small;
+      padding: $spv--small $sph--small;
+      vertical-align: baseline;
+      visibility: hidden;
+    }
+
+    &:hover,
+    &:focus {
+      &::after {
+        visibility: visible;
+      }
+    }
+  }
 }

package/scss/_patterns_logo-section.scss

@@ -4,17 +4,16 @@
     @extend %small-caps-text;
   }
 
-  $logo-section-item-size: 8rem; // height of the logos on large screens
-  $logo-section-item-size-medium: 6rem; // height of the logos on medium screens
+  $logo-section-item-size: 6.5rem; // height of the logos on large screens
   $logo-section-item-size-small: 4rem; // height of the logos on small screens
 
   $logo-section-offset: 1rem; // offset by which rows are pulled closer together
-  $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens
   $logo-section-offset-small: 0.5rem; // height of the logos on small screens
 
-  $logo-section-item-gap: 3rem;
-  $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap);
+  $logo-section-item-gap: 2rem;
 
+  // TODO: Remove .p-logo-section--dense since it's been deprecated in favor
+  // of just using .p-logo-section instead
   .p-logo-section,
   .p-logo-section--dense {
     .p-logo-section__item {
@@ -25,11 +24,6 @@
       margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
 
       @media (min-width: $breakpoint-small) {
-        margin-bottom: calc(-1 * $logo-section-offset-medium);
-        margin-top: calc(-1 * $logo-section-offset-medium);
-      }
-
-      @media (min-width: $breakpoint-large) {
         margin-bottom: calc(-1 * $logo-section-offset);
         margin-top: calc(-1 * $logo-section-offset);
       }
@@ -42,10 +36,6 @@
       width: auto;
 
       @media (min-width: $breakpoint-small) {
-        height: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         height: $logo-section-item-size;
       }
     }
@@ -58,36 +48,12 @@
       padding-top: $logo-section-offset-small;
 
       @media (min-width: $breakpoint-small) {
-        padding-bottom: $logo-section-offset-medium;
-        padding-top: $logo-section-offset-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         padding-bottom: $logo-section-offset;
         padding-top: $logo-section-offset;
       }
     }
   }
 
-  .p-logo-section--dense {
-    .p-logo-section__item {
-      display: inline-block;
-      margin: 0;
-      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
-      margin-right: $logo-section-item-gap-dense;
-      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
-    }
-
-    .p-logo-section__logo {
-      height: $logo-section-item-size-small;
-    }
-
-    .p-logo-section__items {
-      padding-bottom: $logo-section-offset-small;
-      padding-top: $logo-section-offset-small;
-    }
-  }
-
   // fallback for old logo sections that may have logos not properly aligned by design team
   .p-logo-section.has-misaligned-images,
   .p-logo-section--dense.has-misaligned-images {
@@ -98,10 +64,6 @@
       width: $logo-section-item-size-small;
 
       @media (min-width: $breakpoint-small) {
-        width: $logo-section-item-size-medium;
-      }
-
-      @media (min-width: $breakpoint-large) {
         width: $logo-section-item-size;
       }
     }

package/scss/_patterns_media-object.scss

@@ -1,3 +1,7 @@
+// Note: vf-url-friendly-color does not work with the new theming variable
+// setup, since it can't interpolate CSS variables during compilation. Instead,
+// we're hard-coding light/dark icons here when necessary.
+
 @import 'settings';
 
 @mixin vf-p-media-object {
@@ -10,7 +14,7 @@
   %vf-meta-list-item {
     @extend %small-text;
 
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
     padding-left: map-get($icon-sizes, default) + $sph--large;
   }
 
@@ -65,18 +69,34 @@
       @extend %vf-iconed-list-item;
       // prettier-ignore
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g transform="translate(0 -962.362)"><path color="%23000" fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 962.362h90v90H0z"/><path d="M35.914 968.362v9c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-8.547C7.56 969.892 6 973.59 6 986.362v42c0 18 3 18 30 18h18c27 0 30 0 30-18v-42c0-12.773-1.56-16.47-12.086-17.547v8.547c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-9H35.914zm.086 24h18c24 0 24 0 24 12v24c0 12 0 12-24 12H36c-24 0-24 0-24-12v-24c0-12 0-12 24-12z" fill="' + vf-url-friendly-color($color-mid-dark) + '"/><rect width="6" height="18" x="24" y="962.362" ry="3" color="%23000" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><rect ry="3" y="962.362" x="60" height="18" width="6" color="%23000" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><path style="text-align:center;line-height:125%;-inkscape-font-specification:Ubuntu Medium" d="M33.336 1001.364v.01c-1.8 0-3.5.348-5.087 1.043-1.548.663-2.913 1.553-4.08 2.664l-.352.337 3.06 4.335.474-.472c.158-.158.425-.388.787-.673l.01-.013.01-.012c.342-.295.74-.582 1.194-.86.467-.27 1.002-.507 1.607-.71.577-.19 1.206-.288 1.896-.288 1.048 0 1.885.26 2.58.768.626.46.964 1.222.964 2.497 0 .56-.114 1.1-.35 1.647-.246.538-.58 1.082-1.006 1.635h-.002c-.408.535-.896 1.088-1.466 1.658-.582.582-1.192 1.176-1.827 1.785h-.004c-.827.8-1.653 1.613-2.48 2.44-.846.845-1.61 1.748-2.292 2.704h-.002c-.692.967-1.26 2.02-1.702 3.15-.426 1.134-.635 2.372-.635 3.707v.72c0 .31.015.583.046.828l.064.493h18.65v-5.197H31.386c.072-.144.057-.21.18-.392l.006-.012h.002c.33-.507.727-1.034 1.192-1.576.47-.548.966-1.096 1.488-1.645l.008-.01c.527-.553.998-1.027 1.413-1.416h.007c.8-.775 1.6-1.56 2.4-2.36h.007c.813-.844 1.534-1.7 2.163-2.576h.002c.66-.906 1.197-1.83 1.613-2.773.428-.994.645-2.02.645-3.054 0-2.528-.756-4.605-2.28-6.102-1.524-1.55-3.862-2.28-6.9-2.28zm16.626.635v.01l-.024.537c-.106 2.31-.24 4.618-.4 6.927-.158 2.277-.384 4.688-.676 7.233l-.07.628h.632c2.187 0 3.982.12 5.37.353h.004c1.42.23 2.518.58 3.283 1.01h.01c.804.44 1.316.945 1.6 1.512.302.606.46 1.297.46 2.1 0 .514-.094.994-.278 1.457-.174.414-.456.79-.876 1.14h-.016c-.375.333-.9.615-1.582.836-.677.193-1.514.298-2.51.298-1.48 0-2.72-.144-3.718-.42-1.012-.31-1.79-.596-2.3-.84l-.638-.304-1.17 5.187.394.198c.32.16.74.313 1.287.477.553.167 1.168.315 1.847.45.703.163 1.43.3 2.184.407.77.11 1.527.163 2.273.163 1.826 0 3.44-.214 4.84-.66h.008c1.386-.473 2.56-1.12 3.502-1.948.94-.827 1.647-1.823 2.105-2.967.454-1.135.68-2.365.68-3.678 0-2.868-1.023-5.22-3.034-6.892-1.888-1.617-4.76-2.472-8.434-2.75.033-.27.064-.51.097-.834.055-.535.096-1.096.123-1.68l.002-.025c.052-.575.09-1.138.117-1.688l.003-.027c.035-.38.054-.693.077-1.02h10.055V1002H49.962z" font-size="35.345" font-weight="500" letter-spacing="0" word-spacing="0" text-anchor="middle" fill="' + vf-url-friendly-color($color-mid-dark) + '" font-family="Ubuntu"/></g></svg>');
+
+      .is-dark & {
+        // prettier-ignore
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g transform="translate(0 -962.362)"><path color="%23000" fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 962.362h90v90H0z"/><path d="M35.914 968.362v9c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-8.547C7.56 969.892 6 973.59 6 986.362v42c0 18 3 18 30 18h18c27 0 30 0 30-18v-42c0-12.773-1.56-16.47-12.086-17.547v8.547c0 4.837-4.078 8.914-8.914 8.914-4.836 0-8.914-4.077-8.914-8.914v-9H35.914zm.086 24h18c24 0 24 0 24 12v24c0 12 0 12-24 12H36c-24 0-24 0-24-12v-24c0-12 0-12 24-12z" fill="' + vf-url-friendly-color($color-mid-light) + '"/><rect width="6" height="18" x="24" y="962.362" ry="3" color="%23000" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><rect ry="3" y="962.362" x="60" height="18" width="6" color="%23000" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width=".1" overflow="visible" enable-background="accumulate"/><path style="text-align:center;line-height:125%;-inkscape-font-specification:Ubuntu Medium" d="M33.336 1001.364v.01c-1.8 0-3.5.348-5.087 1.043-1.548.663-2.913 1.553-4.08 2.664l-.352.337 3.06 4.335.474-.472c.158-.158.425-.388.787-.673l.01-.013.01-.012c.342-.295.74-.582 1.194-.86.467-.27 1.002-.507 1.607-.71.577-.19 1.206-.288 1.896-.288 1.048 0 1.885.26 2.58.768.626.46.964 1.222.964 2.497 0 .56-.114 1.1-.35 1.647-.246.538-.58 1.082-1.006 1.635h-.002c-.408.535-.896 1.088-1.466 1.658-.582.582-1.192 1.176-1.827 1.785h-.004c-.827.8-1.653 1.613-2.48 2.44-.846.845-1.61 1.748-2.292 2.704h-.002c-.692.967-1.26 2.02-1.702 3.15-.426 1.134-.635 2.372-.635 3.707v.72c0 .31.015.583.046.828l.064.493h18.65v-5.197H31.386c.072-.144.057-.21.18-.392l.006-.012h.002c.33-.507.727-1.034 1.192-1.576.47-.548.966-1.096 1.488-1.645l.008-.01c.527-.553.998-1.027 1.413-1.416h.007c.8-.775 1.6-1.56 2.4-2.36h.007c.813-.844 1.534-1.7 2.163-2.576h.002c.66-.906 1.197-1.83 1.613-2.773.428-.994.645-2.02.645-3.054 0-2.528-.756-4.605-2.28-6.102-1.524-1.55-3.862-2.28-6.9-2.28zm16.626.635v.01l-.024.537c-.106 2.31-.24 4.618-.4 6.927-.158 2.277-.384 4.688-.676 7.233l-.07.628h.632c2.187 0 3.982.12 5.37.353h.004c1.42.23 2.518.58 3.283 1.01h.01c.804.44 1.316.945 1.6 1.512.302.606.46 1.297.46 2.1 0 .514-.094.994-.278 1.457-.174.414-.456.79-.876 1.14h-.016c-.375.333-.9.615-1.582.836-.677.193-1.514.298-2.51.298-1.48 0-2.72-.144-3.718-.42-1.012-.31-1.79-.596-2.3-.84l-.638-.304-1.17 5.187.394.198c.32.16.74.313 1.287.477.553.167 1.168.315 1.847.45.703.163 1.43.3 2.184.407.77.11 1.527.163 2.273.163 1.826 0 3.44-.214 4.84-.66h.008c1.386-.473 2.56-1.12 3.502-1.948.94-.827 1.647-1.823 2.105-2.967.454-1.135.68-2.365.68-3.678 0-2.868-1.023-5.22-3.034-6.892-1.888-1.617-4.76-2.472-8.434-2.75.033-.27.064-.51.097-.834.055-.535.096-1.096.123-1.68l.002-.025c.052-.575.09-1.138.117-1.688l.003-.027c.035-.38.054-.693.077-1.02h10.055V1002H49.962z" font-size="35.345" font-weight="500" letter-spacing="0" word-spacing="0" text-anchor="middle" fill="' + vf-url-friendly-color($color-mid-light) + '" font-family="Ubuntu"/></g></svg>');
+      }
     }
 
     &--location {
       @extend %vf-iconed-list-item;
       // prettier-ignore
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g color="%23000"><path d="M45 0C30.088 0 18 12.088 18 27c0 .562.03 1.103.063 1.656.013.248.012.497.03.75.02.23.07.46.095.688C20.22 51.854 41.922 90 45 90c3.078 0 24.78-38.146 26.813-59.906.02-.232.076-.46.093-.688.022-.248.016-.5.03-.75.032-.56.064-1.12.064-1.656C72 12.088 59.912 0 45 0zm0 18c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9z" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="3" overflow="visible" enable-background="accumulate"/><path fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/></g></svg>');
+
+      .is-dark & {
+        // prettier-ignore
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><g color="%23000"><path d="M45 0C30.088 0 18 12.088 18 27c0 .562.03 1.103.063 1.656.013.248.012.497.03.75.02.23.07.46.095.688C20.22 51.854 41.922 90 45 90c3.078 0 24.78-38.146 26.813-59.906.02-.232.076-.46.093-.688.022-.248.016-.5.03-.75.032-.56.064-1.12.064-1.656C72 12.088 59.912 0 45 0zm0 18c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9z" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="3" overflow="visible" enable-background="accumulate"/><path fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/></g></svg>');
+      }
     }
 
     &--venue {
       @extend %vf-iconed-list-item;
       // prettier-ignore
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90.000001"><g transform="translate(-111.967 -929.337)" color="%23000"><path fill="none" stroke-width="4" overflow="visible" enable-background="accumulate" d="M111.967 929.336h90v90h-90z"/><circle r="6.5" cy="24.5" cx="23.5" transform="matrix(1.846 0 0 1.846 113.583 929.105)" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="2" overflow="visible" enable-background="accumulate"/><circle r="21" cy="45" cx="45" transform="matrix(1.429 0 0 1.429 92.682 910.05)" fill="none" stroke="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="4.2" stroke-linejoin="round" overflow="visible" enable-background="accumulate"/><path d="M152.967 931.736l8-2.4v15h-8zM160.967 1016.336h-8v-12h8zM198.967 970.336v8h-12v-8zM114.967 978.336v-8h12v8z" overflow="visible" fill="' + vf-url-friendly-color($color-mid-dark) + '" stroke-width="6" enable-background="accumulate"/></g></svg>');
+
+      .is-dark & {
+        @extend %vf-iconed-list-item;
+        // prettier-ignore
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90.000001"><g transform="translate(-111.967 -929.337)" color="%23000"><path fill="none" stroke-width="4" overflow="visible" enable-background="accumulate" d="M111.967 929.336h90v90h-90z"/><circle r="6.5" cy="24.5" cx="23.5" transform="matrix(1.846 0 0 1.846 113.583 929.105)" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="2" overflow="visible" enable-background="accumulate"/><circle r="21" cy="45" cx="45" transform="matrix(1.429 0 0 1.429 92.682 910.05)" fill="none" stroke="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="4.2" stroke-linejoin="round" overflow="visible" enable-background="accumulate"/><path d="M152.967 931.736l8-2.4v15h-8zM160.967 1016.336h-8v-12h8zM198.967 970.336v8h-12v-8zM114.967 978.336v-8h12v8z" overflow="visible" fill="' + vf-url-friendly-color($color-mid-light) + '" stroke-width="6" enable-background="accumulate"/></g></svg>');
+      }
     }
   }