vanilla-framework 4.12.0 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -38,7 +38,7 @@
     "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",
@@ -55,12 +55,13 @@
     "!/scss/standalone"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.6.3",
+    "@canonical/cookie-policy": "3.6.4",
     "@canonical/latest-news": "1.5.0",
     "@percy/cli": "1.28.7",
     "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.19",
     "cypress": "13.10.0",
+    "jest": "29.7.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "postcss": "8.4.38",

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

@@ -185,7 +185,7 @@
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-position: right calc(map-get($grid-margin-widths, default) / 2) center;
+    background-position: right $sph--small center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;

package/scss/_base_placeholders.scss

@@ -25,6 +25,11 @@
     border: $border;
   }
 
+  %vf-bg-themed {
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
+  }
+
   // deprecated -- use the theme colour variables
   %vf-bg--light {
     background-color: $color-light;
@@ -43,7 +48,7 @@
   }
 
   %vf-card {
-    @extend %vf-bg--x-light;
+    @extend %vf-bg-themed;
     @extend %vf-card-padding;
 
     margin-bottom: $spv--x-large;

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/_patterns_accordion.scss

@@ -33,7 +33,7 @@
 
     &::before {
       @extend %icon;
-      @include vf-icon-chevron($color-mid-dark);
+      @include vf-icon-chevron-themed;
       @include vf-transition($property: transform, $duration: fast);
 
       content: '';
@@ -46,7 +46,7 @@
       background-color: inherit;
 
       &:hover {
-        background-color: $colors--light-theme--background-hover;
+        background-color: $colors--theme--background-hover;
       }
       @include vf-transition(#{background-color, border-color});
     }

package/scss/_patterns_article-pagination.scss

@@ -3,7 +3,7 @@
 @mixin vf-p-article-pagination {
   %chevron-icon {
     @extend %icon;
-    @include vf-icon-chevron($color-mid-dark);
+    @include vf-icon-chevron-themed;
 
     content: '';
     position: absolute;
@@ -17,7 +17,7 @@
 
   .p-article-pagination__label,
   .p-article-pagination__title {
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
     display: block;
     margin-top: 0;
     width: 100%;

package/scss/_patterns_card.scss

@@ -12,7 +12,6 @@
   .p-card {
     @extend %vf-card;
     @extend %vf-is-bordered;
-
     padding: calc($spv--large - 1px);
   }
 }
@@ -30,8 +29,8 @@
 
 @mixin vf-p-card-overlay {
   .p-card--overlay {
-    background: transparentize($color-x-light, 0.1);
-    color: $colors--light-theme--text-default;
+    background: $colors--theme--background-alt;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;
@@ -42,8 +41,8 @@
   .p-card--muted {
     @extend %vf-has-box-shadow;
 
-    background-color: $color-light;
-    color: $colors--light-theme--text-default;
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;
@@ -61,7 +60,7 @@
   }
 
   .p-card__header {
-    border-bottom: 1px solid $color-mid-light;
+    border-bottom: 1px solid $colors--theme--border-low-contrast;
     padding-bottom: $spv--large;
 
     > .p-link--soft {

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_image.scss

@@ -1,6 +1,74 @@
+/*
+  @classreference
+  image-container:
+    Image container:
+      .p-image-container:
+        Main element of the image component.
+      "&.is-highlighted":
+        Highlighted variant, to be used to highlight contents.
+      .p-image-container--16-9:
+        Wraps contents in a container with an aspect ratio of 16:9.
+      .p-image-container--3-2:
+        Wraps contents in a container with an aspect ratio of 3:2.
+      .p-image-container--2-3:
+        Wraps contents in a container with an aspect ratio of 2:3.
+      .p-image-container--cinematic:
+        Wraps contents in a container with an aspect ratio of 2.4:1.
+      .p-image-container--square:
+        Wraps contents in a container with an aspect ratio of 1:1.
+    Image:
+      .p-image-container__image:
+        Image element within an image container.
+*/
+
 @import 'settings';
 
 @mixin vf-p-image {
+  .p-image-container,
+  [class^='p-image-container--'] {
+    align-items: center;
+    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-cover {
+      .p-image-container__image {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+    }
+  }
+
+  .p-image-container--16-9 {
+    aspect-ratio: 16/9;
+  }
+  .p-image-container--3-2 {
+    aspect-ratio: 3/2;
+  }
+  .p-image-container--2-3 {
+    aspect-ratio: 2/3;
+  }
+  .p-image-container--cinematic {
+    aspect-ratio: 2.4/1;
+  }
+  .p-image-container--square {
+    aspect-ratio: 1/1;
+  }
+
+  // Deprecated; will be removed in v5
   .p-image--bordered {
     border: {
       color: $color-mid-light;
@@ -9,6 +77,7 @@
     }
   }
 
+  // Deprecated; will be removed in v5
   .p-image--shadowed {
     box-shadow: 0 1px 5px 1px transparentize($color-mid-light, 0.8);
   }

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_lists.scss

@@ -87,7 +87,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
 
     &::before {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
       content: counters(list-item, '.') '. ';
       display: inline-block;
       text-align: right;
@@ -96,7 +96,7 @@ $list-step-bullet-margin: $sph--x-large;
 
   %vf-list-item-bullet {
     &::before {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
       content: '•';
       display: inline-block;
       text-align: right;
@@ -174,10 +174,6 @@ $list-step-bullet-margin: $sph--x-large;
       }
     }
 
-    &.is-split .p-list__item:last-of-type {
-      border-bottom: 1px solid $color-mid-light;
-    }
-
     & & {
       margin-bottom: 0;
       margin-left: $sp-x-large;

package/scss/_patterns_matrix.scss

@@ -15,7 +15,7 @@
   }
 
   .p-matrix__item {
-    border-top: 1px solid $color-mid-light;
+    border-top: 1px solid $colors--theme--border-low-contrast;
     display: flex;
     flex: 1 1 auto;
     padding-bottom: $spv--large;
@@ -40,8 +40,10 @@
       }
     }
 
+    // TODO: Multiple redundant properties between this media query and the one
+    // below
     @media (min-width: $threshold-6-12-col) {
-      border-right: 1px solid $color-mid-light;
+      border-right: 1px solid $colors--theme--border-low-contrast;
       padding-left: $spv--large;
       padding-right: $spv--large;
       width: 33.333%;
@@ -67,7 +69,7 @@
 
     @media (min-width: $threshold-6-12-col) {
       // 3 items per row
-      border-right: 1px solid $color-mid-light;
+      border-right: 1px solid $colors--theme--border-low-contrast;
       width: 33.333%;
 
       &:empty {

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>');
+      }
     }
   }
 

package/scss/_patterns_navigation-reduced.scss

@@ -0,0 +1,85 @@
+@mixin vf-p-navigation-reduced {
+  .p-navigation--reduced {
+    position: relative;
+    z-index: 99; // display above sticky top navigation, but below modals/overlays
+
+    // LOGO OVERRIDES FOR REDUCED NAVIGATION
+
+    // orange logo tag is hidden in reduced navigation
+    .p-navigation__tagged-logo {
+      .p-navigation__link {
+        padding-left: 0;
+      }
+
+      .p-navigation__logo-tag {
+        display: none;
+      }
+    }
+
+    // reduced nav logo text uses default font size (on small screens)
+    .p-navigation__logo-title {
+      font-size: #{map-get($font-sizes, default)}rem;
+    }
+
+    // REDUCED SIZE OF NAVIGATION ON LARGE SCREENS
+    @media (min-width: $breakpoint-navigation-threshold) {
+      background-color: $colors--theme--background-alt;
+
+      // adjust font size for reduced nav on large screens
+      .p-navigation__link,
+      .p-navigation__logo-title {
+        color: $colors--theme--text-muted;
+        font-size: #{map-get($font-sizes, small)}rem;
+        line-height: map-get($line-heights, x-small);
+      }
+
+      .p-navigation__link {
+        padding-bottom: $spv--small;
+        padding-top: $spv--small;
+      }
+
+      .p-navigation__item--dropdown-toggle .p-navigation__link {
+        &::after {
+          top: $spv--small;
+        }
+      }
+
+      .p-navigation__item--dropdown-toggle.is-active {
+        background-color: $colors--theme--background-default;
+      }
+    }
+
+    // SEARCH IN REDUCED NAVIGATION
+
+    .p-navigation__link--search-toggle {
+      // search label is always hidden in reduced navigation
+      .p-navigation__search-label {
+        display: none;
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        &::after {
+          top: $spv--small;
+        }
+      }
+    }
+
+    // hide secondary navigation banner when search is open on mobile
+    &.has-search-open + .has-search-open .p-navigation__banner {
+      display: none;
+    }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      &.has-search-open + .has-search-open .p-navigation__banner {
+        display: flex; // reset to value as defined in _patterns_navigation.scss
+      }
+
+      &.has-search-open {
+        // make sure reduced navigation items remain visible when search is open
+        // both classes needed for specificity
+        .p-navigation__nav .p-navigation__items {
+          display: inline-flex;
+        }
+      }
+    }
+  }
+}

package/scss/_patterns_navigation.scss

@@ -32,7 +32,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: map-get($grid-margin-widths, default);
+      padding-left: $sph--large;
     }
   }
 
@@ -45,7 +45,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-right: map-get($grid-margin-widths, default);
+      padding-right: $sph--large;
     }
   }
 
@@ -67,7 +67,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     &:hover {
-      background-color: $colors--theme--background-alt;
+      background-color: $colors--theme--background-hover;
     }
 
     &[aria-pressed='true'],
@@ -110,7 +110,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: map-get($grid-margin-widths, default);
+      padding-left: $sph--large;
     }
   }
 
@@ -140,7 +140,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   .p-navigation,
-  .p-navigation--sliding {
+  .p-navigation--sliding,
+  .p-navigation--reduced {
     background-color: $colors--theme--background-default;
     display: flex;
     flex-direction: column;
@@ -227,7 +228,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
       // shift navigation items by the size of grid margin to align with grid
       .p-navigation__items:first-child {
-        margin-left: calc(-1 * map-get($grid-margin-widths, default));
+        margin-left: calc(-1 * $sph--large);
+        width: calc(100% + $sph--large);
       }
 
       // on medium screen sizes (6 columns) use 2/4 column split
@@ -261,12 +263,33 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
       max-width: $nav-link-max-width;
     }
+
+    &.is-right-shifted {
+      margin-left: auto;
+    }
   }
 
   .p-navigation__link {
     @extend %navigation-link;
   }
 
+  .p-navigation__link--menu-toggle {
+    @extend %navigation-link;
+
+    &::after {
+      @extend %icon;
+      @include vf-icon-chevron-themed;
+      content: '';
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .has-menu-open &::after {
+      transform: rotate(180deg);
+    }
+  }
+
   // navigation logo
   .p-navigation__banner {
     @extend %navigation-link-responsive-padding-left;
@@ -276,7 +299,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     justify-content: space-between;
     padding-right: 0;
 
-    .p-navigation__link {
+    .p-navigation__link,
+    .p-navigation__link--menu-toggle {
       // reset padding for navigation links in the navigation banner
       @extend %navigation-link-responsive-padding-horizontal;
       @extend %navigation-link-responsive-padding-vertical;
@@ -404,6 +428,12 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       justify-content: space-between;
       margin-right: map-get($grid-margin-widths, default);
       width: 100%;
+
+      // in documentation layout navigation items need to be aligned with the grid of the content
+      // so we substract the navigation item padding from the grid margin
+      .l-docs__main & {
+        margin-left: calc(map-get($grid-margin-widths, default) - $sph--large);
+      }
     }
   }
 
@@ -424,7 +454,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   [class*='p-navigation__item'].is-selected > .p-navigation__link {
-    background-color: $colors--theme--background-alt;
+    background-color: $colors--theme--background-hover;
 
     @include vf-highlight-bar($colors--theme--text-default, left, true);
 
@@ -488,6 +518,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
+  // STICKY NAVIGATION
+  .p-navigation.is-sticky,
+  // cover both --sticky and --reduced navigation
+  [class^='p-navigation--'].is-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 98; // show it above all other content, but below modal/overlays and reduced navigation
+  }
+
   // SEARCH
 
   // on mobile screens search box is visible inside of the mobile navigation dropdown
@@ -508,7 +547,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     height: 100%; // keep the height of the navigation when 'Search' label is hidden
 
     padding-left: 0; // on small screens label is hidden, so we remove left padding as well
-    padding-right: calc(map-get($grid-margin-widths, default) + map-get($icon-sizes, default));
+    padding-right: calc(2 * $sph--small + map-get($icon-sizes, default)); // TODO: 2x sp small, or just large?
     position: relative;
 
     // hide "search" label on small screens (only show the icon)
@@ -518,10 +557,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show both label and icon on large screens
     @media (min-width: $breakpoint-large) {
-      padding-left: map-get($grid-margin-widths, default);
-
       .p-navigation__search-label {
         display: initial;
+        padding-left: $sph--large;
       }
     }
 
@@ -536,7 +574,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       height: $spv--large;
       pointer-events: none;
       position: absolute;
-      right: calc(map-get($grid-margin-widths, default) / 2);
+      right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
       top: calc($spv--medium + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
@@ -583,7 +621,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   // when navigation search is expanded
   .p-navigation.has-search-open,
-  .p-navigation--sliding.has-search-open {
+  .p-navigation--sliding.has-search-open,
+  .p-navigation--reduced.has-search-open {
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
@@ -605,6 +644,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       opacity: 0.5;
       pointer-events: all;
     }
+
+    // change search toggle icon to close icon
+    .p-navigation__link--search-toggle::after {
+      @include vf-icon-close-themed;
+    }
   }
 
   .p-navigation.has-menu-open {
@@ -679,7 +723,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc(map-get($grid-margin-widths, default) / 2); // position by the center of grid margin
+        right: calc($sph--large / 2); // position by the center of grid margin
         top: calc($spv--large + map-get($nudges, x-small));
         transform: rotate(0deg);
       }
@@ -702,7 +746,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     .p-navigation__link {
       // increase padding to accommodate chevron icon
-      padding-right: map-get($grid-margin-widths, default) + map-get($icon-sizes, default);
+      padding-right: calc(2 * $sph--small + map-get($icon-sizes, default));
     }
 
     &:first-child .p-navigation__link::before {
@@ -743,13 +787,18 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
 
-  .p-navigation--sliding.has-menu-open {
+  .p-navigation--sliding.has-menu-open,
+  .p-navigation--reduced.has-menu-open {
     height: 100vh;
     overflow-y: hidden;
+    position: fixed;
+    width: 100vw;
 
     @media (min-width: $breakpoint-navigation-threshold) {
       height: auto;
       overflow-y: visible;
+      position: static;
+      width: auto;
     }
 
     .p-navigation__banner .p-navigation__items {
@@ -786,7 +835,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   /* stylelint-disable max-nesting-depth -- allow deep nesting for sliding navigation */
-  .p-navigation--sliding .p-navigation__dropdown {
+  .p-navigation--sliding .p-navigation__dropdown,
+  .p-navigation--reduced .p-navigation__dropdown {
     display: block;
     height: 100vh;
     left: 100vw;
@@ -841,7 +891,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  .p-navigation--sliding .p-navigation__items {
+  .p-navigation--sliding .p-navigation__items,
+  .p-navigation--reduced .p-navigation__items {
     transition: transform $sliding-nav-animation-settings;
 
     &.is-active {
@@ -872,7 +923,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
   /* stylelint-enable max-nesting-depth */
 
-  .p-navigation--sliding {
+  .p-navigation--sliding,
+  .p-navigation--reduced {
     // Default positioning for nested dropdown buttons. Overridden by subsequent styles.
     .p-navigation__item--dropdown-toggle {
       position: initial;

package/scss/_patterns_pull-quotes.scss

@@ -1,7 +1,7 @@
 @import 'settings';
 
 @mixin vf-quote-mark {
-  color: $color-mid-dark;
+  color: $colors--theme--text-muted;
   display: inline-block;
   position: absolute;
   width: 0.5em;

package/scss/_patterns_search-box.scss

@@ -32,10 +32,6 @@
     .p-search-box__reset {
       @extend %search-box-button;
       @extend %transparent-button;
-
-      &:not(:last-of-type):not(:only-of-type) {
-        margin-right: $bar-thickness;
-      }
     }
 
     // Theme set on body element
@@ -80,7 +76,6 @@
 
       border-left-style: solid;
       border-left-width: 1px;
-      margin-right: $bar-thickness;
     }
   }
 

package/scss/_patterns_switch.scss

@@ -13,7 +13,7 @@ $knob-size: $sp-unit * 2;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
-      border: $input-border-thickness solid $color-link;
+      border: $input-border-thickness solid $colors--theme--link-default;
       left: 50%;
     }
 
@@ -22,22 +22,22 @@ $knob-size: $sp-unit * 2;
     }
 
     &:checked + .p-switch__slider {
-      background: $color-link;
+      background: $colors--theme--link-default;
     }
 
     &:focus {
       outline: none;
 
       + .p-switch__slider {
-        outline: $bar-thickness solid $color-focus;
+        outline: $bar-thickness solid $colors--theme--focus;
       }
     }
   }
 
   .p-switch__slider {
-    background: $color-mid-light;
+    background: $colors--theme--background-neutral-default;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
+    box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
     display: inline-block;
     height: $knob-size;
     margin: 0;
@@ -48,8 +48,8 @@ $knob-size: $sp-unit * 2;
       @extend %vf-has-box-shadow;
       @include vf-transition($duration: slow);
 
-      background: $color-x-light;
-      border: $input-border-thickness solid $color-mid-dark;
+      background: $colors--theme--background-default;
+      border: $input-border-thickness solid $colors--theme--background-neutral-default;
       border-radius: 50%;
       content: '';
       height: $knob-size;

package/scss/_patterns_table-of-contents.scss

@@ -13,7 +13,7 @@
     padding-bottom: $spv--large;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $color-mid-light;
+      border-bottom: 1px solid $colors--theme--border-low-contrast;
     }
   }
 
@@ -37,7 +37,7 @@
       }
 
       &:visited {
-        color: $color-link;
+        color: $colors--theme--link-default;
       }
     }
   }

package/scss/_patterns_table-sortable.scss

@@ -29,13 +29,13 @@
 
     &[aria-sort='ascending']::after {
       @extend %heading-icon;
+
+      -webkit-transform: rotate(180deg); // stylelint-disable-line property-no-vendor-prefix
+      transform: rotate(180deg);
     }
 
     &[aria-sort='descending']::after {
       @extend %heading-icon;
-
-      -webkit-transform: rotate(180deg); // stylelint-disable-line property-no-vendor-prefix
-      transform: rotate(180deg);
     }
 
     &[aria-sort]:hover {

package/scss/_settings_colors.scss

@@ -29,13 +29,14 @@ $disabled-element-opacity: 0.33;
 
 $shadow-opacity: 0.2;
 
-// Link colors
+// Link and focus colors
 $color-link: #06c !default;
 $color-link-visited: #7d42b8 !default;
 $color-focus: #2e96ff !default;
 
 $color-link-dark: #69c !default;
 $color-link-visited-dark: #a679d2 !default;
+$color-focus-dark: #9cf !default;
 
 // Focus modifications to meet AA 3:1 contrast ratio against
 // button background for positive/negative buttons
@@ -88,9 +89,10 @@ $states: (
 // --text-disabled   - dimmed version of default text color, to be used on disabled controls
 // --text-muted      - muted version of default text color, to be used on elements with less prominence
 //
-// Link colors:
+// Link and focus colors:
 // --link-default    - default link color
 // --link-visited    - visited link color
+// --focus           - focus highlight/outline color
 //
 // Background colors:
 // --background           - default background color
@@ -111,6 +113,7 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 
 $colors--light-theme--link-default: $color-link !default;
 $colors--light-theme--link-visited: $color-link-visited !default;
+$colors--light-theme--focus: $color-focus !default;
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
@@ -170,9 +173,10 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 
 $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-dark !default;
+$colors--dark-theme--focus: $color-focus-dark !default;
 
 $colors--dark-theme--background-default: #262626 !default;
-$colors--dark-theme--background-alt: #2d2d2d !default;
+$colors--dark-theme--background-alt: #202020 !default;
 $colors--dark-theme--background-code: $color-code-background-dark !default;
 $colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
 $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
@@ -236,6 +240,7 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
 
 $colors--theme--link-default: var(--vf-color-link-default);
 $colors--theme--link-visited: var(--vf-color-link-visited);
+$colors--theme--focus: var(--vf-color-focus);
 
 $colors--theme--background-default: var(--vf-color-background-default);
 $colors--theme--background-alt: var(--vf-color-background-alt);
@@ -290,6 +295,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   --vf-color-link-default: #{$colors--light-theme--link-default};
   --vf-color-link-visited: #{$colors--light-theme--link-visited};
+  --vf-color-focus: #{$colors--light-theme--focus};
 
   --vf-color-background-default: #{$colors--light-theme--background-default};
   --vf-color-background-alt: #{$colors--light-theme--background-alt};
@@ -344,6 +350,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   --vf-color-link-default: #{$colors--dark-theme--link-default};
   --vf-color-link-visited: #{$colors--dark-theme--link-visited};
+  --vf-color-focus: #{$colors--dark-theme--focus};
 
   --vf-color-background-default: #{$colors--dark-theme--background-default};
   --vf-color-background-alt: #{$colors--dark-theme--background-alt};
@@ -396,7 +403,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
 
   // SCSS variables need to be interpolated to work in CSS custom properties
   --vf-color-background-default: #{$color-paper};
-  --vf-color-background-alt: #{$color-x-light};
+  --vf-color-background-alt: #{#ebebeb};
 
   --vf-color-background-inputs: #{$colors--paper-theme--background-inputs};
   --vf-color-background-active: #{$colors--paper-theme--background-active};

package/scss/_settings_placeholders.scss

@@ -5,7 +5,7 @@
 $input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
-$border: $input-border-thickness solid $color-mid-light !default;
+$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),

package/scss/_settings_spacing.scss

@@ -18,6 +18,7 @@ $font-sizes: (
   h3-mobile: 1.5,
   h4: 1.5,
   h4-mobile: 1.5,
+  default: 1,
   small: 0.875,
   x-small: 0.75,
 ) !default;

package/scss/_vanilla.scss

@@ -33,6 +33,7 @@
 @import 'patterns_modal';
 @import 'patterns_muted-heading';
 @import 'patterns_navigation';
+@import 'patterns_navigation-reduced';
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
@@ -113,7 +114,6 @@
   @include vf-p-heading-icon;
   @include vf-p-headings;
   @include vf-p-section;
-
   @include vf-p-form-password-toggle;
   @include vf-p-icons;
   @include vf-p-image;
@@ -127,6 +127,7 @@
   @include vf-p-modal;
   @include vf-p-muted-heading;
   @include vf-p-navigation;
+  @include vf-p-navigation-reduced;
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pull-quotes;