vanilla-framework 4.0.0-alpha.2 → 4.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-rc.1",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -45,7 +45,7 @@
     "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
-    "percy": "percy exec -- node snapshots.js",
+    "percy": "percy snapshot snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
   "files": [
@@ -57,15 +57,15 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
-    "@percy/script": "1.1.0",
+    "@percy/cli": "1.26.0",
     "@testing-library/cypress": "9.0.0",
     "autoprefixer": "10.4.14",
-    "cypress": "12.11.0",
+    "cypress": "12.13.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.23",
-    "postcss-cli": "9.1.0",
+    "postcss": "8.4.24",
+    "postcss-cli": "10.1.0",
     "postcss-scss": "4.0.6",
     "prettier": "2.8.8",
     "sass": "1.62.1",
@@ -75,6 +75,6 @@
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "svgo": "2.8.0",
-    "yaml": "2.2.2"
+    "yaml": "2.3.1"
   }
 }

package/scss/_base_code.scss

@@ -26,7 +26,6 @@ $code-inline-padding: 0.25rem;
   kbd,
   samp {
     background-color: $color-code-background;
-    border-radius: $border-radius;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
@@ -61,7 +60,7 @@ $code-inline-padding: 0.25rem;
 
   pre {
     background-color: $color-code-background;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     display: block;
     margin-bottom: $spv--x-large;
     margin-top: 0;

package/scss/_base_fontfaces.scss

@@ -7,7 +7,7 @@
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}15be2ffe-UbuntuBeta0.865[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
       }
 
       @font-face {
@@ -15,14 +15,14 @@
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: italic;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}a84821f4-UbuntuBeta0.865-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
       }
 
       @font-face {
         font-family: 'Ubuntu Mono variable';
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}ec568c8f-UbuntuMonoBeta0.865[wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}d5fc1819-UbuntuMono%5Bwght%5D-latin-v0.869.woff2') format('woff2-variations');
       }
 
       @if $font-allow-cyrillic-greek-latin {
@@ -32,7 +32,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}929e5b64-UbuntuBeta0.865[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}77cd6650-Ubuntu%5Bwdth,wght%5D-cyrillic-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
         }
 
@@ -42,7 +42,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}ec29c093-UbuntuBeta0.865[wdth,wght]-cyrillic.woff2') format('woff2-variations');
+          src: url('#{$assets-path}2702fce5-Ubuntu%5Bwdth,wght%5D-cyrillic-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
         }
 
@@ -52,7 +52,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}0a8276a6-UbuntuBeta0.865[wdth,wght]-greek-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}5c108b7d-Ubuntu%5Bwdth,wght%5D-greek-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+1F00-1FFF;
         }
 
@@ -62,7 +62,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}16acdbb4-UbuntuBeta0.865[wdth,wght]-greek.woff2') format('woff2-variations');
+          src: url('#{$assets-path}0a14c405-Ubuntu%5Bwdth,wght%5D-greek-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0370-03FF;
         }
 
@@ -72,7 +72,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}c81d0142-UbuntuBeta0.865[wdth,wght]-latin-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}19f68eeb-Ubuntu%5Bwdth,wght%5D-latin-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
         }
       }

package/scss/_base_forms.scss

@@ -25,13 +25,13 @@
     border: 0 solid transparent;
     border-bottom: $input-border-thickness solid $colors--light-theme--text-default;
     border-radius: 0;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
     margin-bottom: $input-margin-bottom;
-    min-width: 10em;
+    min-width: 8em;
     padding-left: $sph--small;
     padding-right: $sph--small;
     vertical-align: baseline;
@@ -198,7 +198,7 @@
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     min-height: map-get($line-heights, default-text);
     padding-right: calc($default-icon-size + 2 * $sph--small);
     text-indent: 0.01px;
@@ -240,7 +240,6 @@
   fieldset {
     @extend %vf-card;
     @extend %vf-is-bordered;
-    @extend %vf-has-round-corners;
 
     margin-left: 0;
     margin-right: 0;

package/scss/_base_hr.scss

@@ -35,10 +35,6 @@
       @extend %u-no-margin--bottom--hr;
     }
 
-    &.is-muted {
-      background-color: $colors--light-theme--border-low-contrast;
-    }
-
     &.is-fixed-width {
       @extend %fixed-width-hr;
     }
@@ -67,15 +63,20 @@
 
 @mixin vf-hr-theme(
   // color of the horizontal rule line
-  $color-hr-line
+  $color-hr-line-default,
+  $color-hr-line-muted
 ) {
-  background: $color-hr-line;
+  background: $color-hr-line-default;
+
+  &.is-muted {
+    background-color: $color-hr-line-muted;
+  }
 }
 
 @mixin vf-hr-light-theme {
-  @include vf-hr-theme($colors--light-theme--border-default);
+  @include vf-hr-theme($color-hr-line-default: $colors--light-theme--border-default, $color-hr-line-muted: $colors--light-theme--border-low-contrast);
 }
 
 @mixin vf-hr-dark-theme {
-  @include vf-hr-theme($colors--dark-theme--border-default);
+  @include vf-hr-theme($color-hr-line-default: $colors--dark-theme--border-default, $color-hr-line-muted: $colors--dark-theme--border-low-contrast);
 }

package/scss/_base_icon-definitions.scss

@@ -418,6 +418,10 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 110 16A8 8 0 018 0zm0 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm2.814 2.45l1.203.897-5.537 7.43-3.485-3.694 1.09-1.03 2.259 2.394 4.47-5.997z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
+@mixin vf-icon-error-grey($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
 @mixin vf-icon-switcher-dashboard($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 9a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 012.75 9h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 019.75 9h3.5zM5.5 10.5h-2v2h2v-2zm7 0h-2v2h2v-2zM6.25 2a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 012 6.25v-3.5A.75.75 0 012.75 2h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 019 6.25v-3.5A.75.75 0 019.75 2h3.5zM5.5 3.5h-2v2h2v-2zm7 0h-2v2h2v-2z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }

package/scss/_base_links.scss

@@ -27,6 +27,14 @@
     &:visited {
       color: $color-link-visited;
     }
+
+    &.is-dark {
+      color: $color-link-dark;
+
+      &:visited {
+        color: $color-link-visited-dark;
+      }
+    }
   }
   // stylelint-enable selector-max-type
 }

package/scss/_base_placeholders.scss

@@ -7,6 +7,8 @@
   @include vf-b-typography-definitions;
 
   // Styling
+
+  // deprecated, will be removed in future version of Vanilla
   %vf-has-round-corners {
     border-radius: $border-radius;
   }
@@ -25,12 +27,12 @@
 
   %vf-bg--light {
     background-color: $color-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-bg--x-light {
     background-color: $color-x-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-card-padding {

package/scss/_base_typography-definitions.scss

@@ -1,6 +1,14 @@
 @mixin vf-b-typography-definitions {
+  %vf-is-accent {
+    &.is-accent {
+      color: $color-accent;
+    }
+  }
+
   //@section Heading styling in placeholders
   %vf-heading-2 {
+    @extend %vf-is-accent;
+
     font-size: #{map-get($font-sizes, h2-mobile)}rem;
     font-style: normal;
     font-weight: 180;
@@ -28,6 +36,8 @@
   }
 
   %vf-heading-3 {
+    @extend %vf-is-accent;
+
     font-size: #{map-get($font-sizes, h3-mobile)}rem;
     font-style: normal;
     font-weight: 550;
@@ -50,6 +60,8 @@
   }
 
   %vf-heading-4 {
+    @extend %vf-is-accent;
+
     font-size: #{map-get($font-sizes, h4-mobile)}rem;
     font-style: normal;
     font-weight: 275;
@@ -184,11 +196,12 @@
   %small-caps-text {
     @extend %default-text;
     font-variant-caps: all-small-caps;
+    font-variant-numeric: oldstyle-nums;
     letter-spacing: 0.05em;
-    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
+    margin-bottom: map-get($sp-after, p-small-caps) - map-get($nudges, p);
 
     &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--small;
+      @extend %u-no-margin--bottom--default-text;
     }
 
     // deprecated: the use of .u-align-text--x-small-to-default on small caps text is deprecated

package/scss/_base_typography.scss

@@ -8,7 +8,7 @@
 
   // stylelint-disable selector-max-type -- base styles can use type selectors
   html {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     font-family: unquote($font-base-family);
     // These vendor prefixes are unique and cannot be added by autoprefixer
     -moz-osx-font-smoothing: grayscale;

package/scss/_global_functions.scss

@@ -34,9 +34,9 @@
 // Test value of bg $color and return light or dark text color accordingly
 @function vf-contrast-text-color($color) {
   @if (lightness($color) > 55) {
-    @return $color-dark; // Lighter background, return dark color
+    @return $colors--light-theme--text-default; // Lighter background, return dark color
   } @else {
-    @return $color-x-light; // Darker background, return light color
+    @return $colors--dark-theme--text-default; // Darker background, return light color
   }
 }
 
@@ -44,9 +44,9 @@
 // variable.
 @function vf-determine-text-color($background-color) {
   @if (lightness($background-color) > 50) {
-    @return $color-dark;
+    @return $colors--light-theme--text-default;
   } @else {
-    @return $color-x-light;
+    @return $colors--dark-theme--text-default;
   }
 }
 

package/scss/_patterns_article-pagination.scss

@@ -17,7 +17,7 @@
 
   .p-article-pagination__label,
   .p-article-pagination__title {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     display: block;
     margin-top: 0;
     width: 100%;

package/scss/_patterns_badge.scss

@@ -3,7 +3,7 @@
 @mixin vf-p-badge {
   %vf-badge {
     @extend %x-small-text;
-    background-color: $color-dark;
+    background-color: $colors--light-theme--text-default;
     border-radius: 1rem;
     box-sizing: content-box;
     color: $color-x-light;

package/scss/_patterns_card.scss

@@ -12,7 +12,6 @@
   .p-card {
     @extend %vf-card;
     @extend %vf-is-bordered;
-    @extend %vf-has-round-corners;
 
     padding: calc($spv--large - 1px);
   }
@@ -22,7 +21,6 @@
   %p-card--highlighted {
     @extend %vf-card;
     @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
   }
 
   .p-card--highlighted {
@@ -33,7 +31,7 @@
 @mixin vf-p-card-overlay {
   .p-card--overlay {
     background: transparentize($color-x-light, 0.1);
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;
@@ -44,7 +42,6 @@
   .p-card--muted {
     @extend %vf-bg--light;
     @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
 
     margin-bottom: $spv--x-large;
     overflow: auto;

package/scss/_patterns_code-snippet.scss

@@ -115,7 +115,7 @@ $code-snippet-header-v-spacing: $spv--small;
     .p-code-snippet__dropdown {
       background-color: $color-transparent;
       border: 0;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       margin-bottom: 0;
       margin-left: $sph--small;
       min-width: min-content;

package/scss/_patterns_contextual-menu.scss

@@ -14,7 +14,6 @@
   // Dropdown element for contextual menu
   .p-contextual-menu__dropdown {
     @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
 
     display: none;
     margin: 0;
@@ -79,7 +78,6 @@
     width: 100%;
 
     &:hover {
-      border-radius: $border-radius;
       text-decoration: none;
     }
   }

package/scss/_patterns_form-password-toggle.scss

@@ -18,7 +18,7 @@
   .p-form-password-toggle + [type='text'] {
     &[readonly],
     &[readonly='readonly'] {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
     }
   }
 }

package/scss/_patterns_icons.scss

@@ -21,6 +21,8 @@
   @include vf-p-icon-copy;
   @include vf-p-icon-search;
   @include vf-p-icon-success;
+  @include vf-p-icon-success-grey;
+  @include vf-p-icon-error-grey;
   @include vf-p-icon-share;
   @include vf-p-icon-user;
   @include vf-p-icon-spinner;
@@ -1359,6 +1361,18 @@
   }
 }
 
+@mixin vf-p-icon-error-grey {
+  .p-icon--error-grey {
+    @extend %icon;
+    @include vf-icon-error-grey($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-error-grey($color-x-light);
+    }
+  }
+}
+
 @mixin vf-p-icon-switcher-dashboard {
   .p-icon--switcher-dashboard {
     @extend %icon;

package/scss/_patterns_links.scss

@@ -2,10 +2,10 @@
 
 @mixin vf-p-links {
   .p-link--soft {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
 
     &:visited {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       text-decoration: none;
     }
 
@@ -70,7 +70,7 @@
   }
 
   .p-top__link {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }

package/scss/_patterns_lists.scss

@@ -77,7 +77,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
 
     &::before {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       content: counters(list-item, '.') '. ';
       display: inline-block;
       text-align: right;
@@ -86,7 +86,7 @@ $list-step-bullet-margin: $sph--x-large;
 
   %vf-list-item-bullet {
     &::before {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       content: '•';
       display: inline-block;
       text-align: right;
@@ -198,7 +198,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-success;
+      @include vf-icon-success-grey($color-mid-dark);
     }
   }
 
@@ -207,7 +207,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-error;
+      @include vf-icon-error-grey($color-mid-dark);
     }
   }
 

package/scss/_patterns_media-object.scss

@@ -10,7 +10,7 @@
   %vf-meta-list-item {
     @extend %small-text;
 
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     padding-left: map-get($icon-sizes, default) + $sph--large;
   }
 
@@ -28,7 +28,6 @@
 
   .p-media-object__image {
     align-self: flex-start;
-    border-radius: $border-radius;
     flex-basis: inherit;
     flex-shrink: 0;
     margin-right: $sph--large;

package/scss/_patterns_modal.scss

@@ -23,7 +23,6 @@
   .p-modal__dialog {
     @extend %vf-card;
     @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
 
     left: $sph--x-large;
     margin-bottom: 0;

package/scss/_patterns_navigation.scss

@@ -117,7 +117,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  .p-navigation {
+  .p-navigation,
+  .p-navigation--sliding {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -244,10 +245,13 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__tagged-logo {
     display: flex; // to prevent logo link from expanding full width
     margin-right: 0;
-    min-width: 13rem;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      min-width: 13rem;
+    }
 
     .p-navigation__logo-tag {
-      background-color: $color-accent;
+      background-color: $color-ubuntu;
       height: $navigation-logo-tag-height;
       left: 0;
       position: absolute;
@@ -499,7 +503,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.has-search-open,
+  .p-navigation--sliding.has-search-open {
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
@@ -547,7 +552,6 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__dropdown,
   .p-navigation__dropdown--right {
     @extend %vf-has-box-shadow;
-    @extend %vf-has-round-corners;
 
     display: none;
     margin: 0;
@@ -607,8 +611,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
         }
       }
 
-      .p-navigation__dropdown,
-      .p-navigation__dropdown--right {
+      > .p-navigation__dropdown,
+      > .p-navigation__dropdown--right {
         display: block;
       }
     }
@@ -652,21 +656,216 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
+  @keyframes vf-nav-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.5;
+    }
+  }
+
+  $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
+
+  .p-navigation--sliding.has-menu-open {
+    height: 100vh;
+    overflow-y: hidden;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      height: auto;
+      overflow-y: visible;
+    }
+
+    .p-navigation__banner .p-navigation__items {
+      display: flex;
+      flex-wrap: nowrap;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: none;
+      }
+    }
+    .p-navigation__nav {
+      display: block;
+      height: 100vh;
+      overflow-x: hidden;
+
+      .p-navigation__items {
+        display: block;
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: flex;
+        height: auto;
+        overflow-x: visible;
+
+        .p-navigation__items {
+          display: flex;
+        }
+      }
+    }
+
+    .p-navigation__items:not(:first-child)::before {
+      content: none;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+  .p-navigation--sliding .p-navigation__items {
+    transition: transform $sliding-nav-animation-settings;
+
+    &.is-active {
+      transform: translateX(-25vw);
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: none;
+      }
+      .p-navigation__dropdown {
+        transform: translateX(25vw);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: none;
+        }
+        &[aria-hidden='false'],
+        &:not([aria-hidden]) {
+          transform: translateX(-75vw);
+          @media (min-width: $breakpoint-navigation-threshold) {
+            transform: none;
+          }
+          &.is-active {
+            transform: translateX(-100vw);
+            @media (min-width: $breakpoint-navigation-threshold) {
+              transform: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  /* stylelint-enable max-nesting-depth */
+
+  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
+    position: initial;
+
+    &::after {
+      content: none;
+    }
+
+    .p-navigation__link::after {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: '';
+      display: block;
+      height: $spv--large;
+      pointer-events: none;
+      position: absolute;
+      right: map-get($grid-margin-widths, small);
+      text-indent: calc(100% + 10rem);
+      top: 1rem;
+      transform: rotate(-90deg);
+      width: map-get($icon-sizes, default);
+      @include vf-icon-chevron($colors--dark-theme--text-default);
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        right: 0.5rem;
+        top: 1.2rem;
+        transform: none;
+      }
+    }
+
+    &.is-active > .p-navigation__link::after {
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .p-navigation--sliding .p-navigation__item--dropdown-close {
+    .p-navigation__link::after {
+      left: 1rem;
+      transform: rotate(90deg);
+    }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: none;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+
+  .p-navigation--sliding .p-navigation__dropdown {
+    display: block;
+    height: 100vh;
+    left: 100vw;
+    position: absolute;
+    top: 0;
+    transition: transform $sliding-nav-animation-settings;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: none;
+      height: auto;
+      left: auto;
+      min-width: unset;
+      top: unset;
+    }
+
+    &::before {
+      box-shadow: -100vw 15px 0 15px black;
+      content: '';
+      height: 100%;
+      opacity: 0;
+      position: absolute;
+      transition: opacity $sliding-nav-animation-settings;
+      width: 100%;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        content: none;
+      }
+    }
+
+    &[aria-hidden='false'],
+    &:not([aria-hidden]) {
+      &::before {
+        opacity: 0.75;
+      }
+
+      display: block;
+      transform: translateX(-75vw);
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: none;
+
+        .p-navigation__item--dropdown-close {
+          @media (min-width: $breakpoint-navigation-threshold) {
+            display: none;
+          }
+        }
+      }
+
+      &.is-active {
+        transform: translateX(-100vw);
+      }
+    }
+  }
+
+  /* stylelint-enable max-nesting-depth */
+
   // Theming
   @if ($theme-default-nav == 'dark') {
-    .p-navigation {
+    .p-navigation,
+    .p-navigation--sliding {
       @include vf-navigation-dark-theme;
     }
 
-    .p-navigation.is-light {
+    .p-navigation.is-light,
+    .p-navigation--sliding.is-light {
       @include vf-navigation-light-theme;
     }
   } @else {
-    .p-navigation {
+    .p-navigation,
+    .p-navigation--sliding {
       @include vf-navigation-light-theme;
     }
 
-    .p-navigation.is-dark {
+    .p-navigation.is-dark,
+    .p-navigation--sliding.is-dark {
       @include vf-navigation-dark-theme;
     }
   }
@@ -683,7 +882,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   $color-navigation-background--hover,
   // color for the navigation highlight bar
   $color-navigation-highlight,
-  $color-navigation-icon
+  $color-navigation-icon,
+  $overlay-target-opacity
 ) {
   background-color: $color-navigation-background;
 
@@ -717,12 +917,25 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     &::after {
       @include vf-icon-chevron($color-navigation-icon);
     }
+    & > .p-navigation__link {
+      &::after {
+        @include vf-icon-chevron($color-navigation-icon);
+      }
+    }
 
     &.is-active > .p-navigation__link {
       background-color: $color-navigation-background--active;
     }
   }
 
+  .p-navigation__item--dropdown-close {
+    & > .p-navigation__link {
+      &::after {
+        @include vf-icon-chevron($color-navigation-icon);
+      }
+    }
+  }
+
   .p-navigation__toggle--search::after,
   .p-navigation__item .p-navigation__link--search-toggle::after {
     @include vf-icon-search($color-navigation-icon);
@@ -752,12 +965,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   // on mobile expanded nav needs to match pressed color of the buttons
   &.has-menu-open .p-navigation__nav,
+  &.p-navigation:target .p-navigation__nav,
+  &.p-navigation:target .p-navigation__dropdown,
   &.has-search-open .p-navigation__nav {
-    background-color: $color-navigation-background--active;
+    background-color: $color-navigation-background;
+  }
 
-    @media (min-width: $breakpoint-navigation-threshold) {
-      background-color: transparent;
-    }
+  .p-navigation__dropdown[aria-hidden='false']::before,
+  .p-navigation__dropdown:not([aria-hidden])::before {
+    opacity: $overlay-target-opacity;
   }
 }
 
@@ -769,7 +985,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     $color-navigation-background--active: $colors--light-theme--background-active,
     $color-navigation-highlight: $colors--light-theme--text-default,
     $color-navigation-separator: $colors--light-theme--border-low-contrast,
-    $color-navigation-icon: $colors--light-theme--text-default
+    $color-navigation-icon: $colors--light-theme--text-default,
+    $overlay-target-opacity: 0.33
   );
 }
 
@@ -778,9 +995,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     $color-navigation-text: $colors--dark-theme--text-default,
     $color-navigation-background: $colors--dark-theme--background-default,
     $color-navigation-background--hover: $colors--dark-theme--background-hover,
-    $color-navigation-background--active: $colors--dark-theme--background-active,
+    $color-navigation-background--active: $colors--dark-theme--background-alt,
     $color-navigation-highlight: $colors--dark-theme--text-default,
     $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-    $color-navigation-icon: $colors--dark-theme--text-default
+    $color-navigation-icon: $colors--dark-theme--text-default,
+    $overlay-target-opacity: 0.75
   );
 }

package/scss/_patterns_notifications.scss

@@ -79,7 +79,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     background-position: $sph--large $notification-icon-vert-offset;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
-    border-radius: 0 $border-radius $border-radius 0;
     margin-bottom: $spv--x-large;
     padding-bottom: calc($spv--small - 1px);
     padding-left: $notification-content-icon-space;

package/scss/_patterns_pagination.scss

@@ -8,7 +8,7 @@
     &.is-active,
     &[aria-current='page'] {
       background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       text-decoration: none;
     }
   }

package/scss/_patterns_rule.scss

@@ -2,11 +2,28 @@
 
 @mixin vf-p-rule {
   .p-rule,
+  .p-rule--muted,
   .p-rule--highlight {
     @extend %u-no-margin--bottom--hr;
   }
 
+  .p-rule--muted {
+    background-color: $colors--light-theme--border-low-contrast;
+
+    &.is-dark {
+      background-color: $colors--dark-theme--border-low-contrast;
+    }
+  }
+
   .p-rule--highlight {
-    @include vf-highlight-bar($color-dark);
+    @include vf-highlight-bar($colors--light-theme--text-default);
+
+    &.is-dark {
+      @include vf-highlight-bar($colors--dark-theme--text-default);
+    }
+
+    &.is-accent {
+      @include vf-highlight-bar($color-accent);
+    }
   }
 }

package/scss/_patterns_search-and-filter.scss

@@ -73,7 +73,6 @@
       @include vf-transition(opacity, fast);
 
       background-color: $color-x-light;
-      border-radius: $border-radius;
       box-shadow: $box-shadow;
       opacity: 1;
       padding: $input-vertical-padding $sph--large 0;

package/scss/_patterns_search-box.scss

@@ -60,7 +60,6 @@
 
       border-left-style: solid;
       border-left-width: 1px;
-      border-radius: 0 $border-radius $border-radius 0;
       margin-right: $bar-thickness;
     }
   }

package/scss/_patterns_section.scss

@@ -8,7 +8,17 @@
     }
   }
 
-  .p-block {
+  .p-section--deep {
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-deep * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-deep;
+    }
+  }
+
+  .p-block, // deprecated, use .p-section--shallow
+  .p-section--shallow {
     // same as %section-padding--shallow
     padding-bottom: $spv--x-large;
   }

package/scss/_patterns_segmented-control.scss

@@ -1,7 +1,7 @@
 @mixin vf-p-segmented-control {
   .p-segmented-control,
   // p-tab-buttons is deprecated,
-  // please use p-segmented-control instead 
+  // please use p-segmented-control instead
   .p-tab-buttons {
     .p-segmented-control__list,
     .p-tab-buttons__list {
@@ -36,14 +36,6 @@
           width: $input-border-thickness;
         }
       }
-
-      &:first-child {
-        border-radius: $border-radius 0 0 $border-radius;
-      }
-
-      &:last-child {
-        border-radius: 0 $border-radius $border-radius 0;
-      }
     }
 
     &.is-dense .p-segmented-control__button,

package/scss/_patterns_status-label.scss

@@ -6,7 +6,6 @@
     @extend %x-small-text;
     @extend %u-no-margin--bottom--small;
 
-    border-radius: $border-radius;
     display: inline-block;
     font-weight: $font-weight-bold;
     padding: map-get($nudges, x-small) $sph--small;
@@ -36,7 +35,7 @@
     @extend %vf-status-label;
 
     background-color: $color-caution;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   .p-status-label--information,

package/scss/_patterns_strip.scss

@@ -35,8 +35,8 @@
   .p-strip--dark {
     @extend %vf-strip;
 
-    background-color: $color-dark;
-    color: $color-light;
+    background-color: $colors--dark-theme--background-default;
+    color: $colors--dark-theme--text-default;
   }
 
   .p-strip--white {
@@ -64,7 +64,7 @@
     background-size: cover;
 
     &.is-light {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
     }
 
     &.is-dark {

package/scss/_patterns_switch.scss

@@ -45,7 +45,6 @@ $knob-size: $sp-unit * 2;
     width: $knob-size * 2;
 
     &::before {
-      @extend %vf-has-round-corners;
       @extend %vf-has-box-shadow;
       @include vf-transition($duration: slow);
 

package/scss/_patterns_table-mobile-card.scss

@@ -26,7 +26,6 @@
 
         tr {
           border: $border;
-          border-radius: $border-radius;
           display: block;
           margin-bottom: $spv--x-large;
           padding: 0 $sph--large;

package/scss/_patterns_table-of-contents.scss

@@ -36,11 +36,11 @@
 
     .p-table-of-contents__link {
       border-bottom: 0;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       margin-bottom: $sp-x-small;
 
       &:visited {
-        color: $color-dark;
+        color: $colors--light-theme--text-default;
       }
 
       &:hover {

package/scss/_patterns_tabs.scss

@@ -44,7 +44,7 @@
 
       align-items: center;
       border: none;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       display: flex;
       gap: $sph--small;
       height: 100%;

package/scss/_patterns_tooltips.scss

@@ -36,7 +36,6 @@ $tooltip-overlay-top-border-radius: 0% 0% 100% 100%;
 
     background-color: $color-dark;
     border: 0;
-    border-radius: $border-radius;
     color: $color-x-light;
     display: none;
     left: -2 * $triangle-height;

package/scss/_settings_colors.scss

@@ -34,6 +34,9 @@ $color-link: #06c !default;
 $color-link-visited: #7d42b8 !default;
 $color-focus: #2e96ff !default;
 
+$color-link-dark: #69c !default;
+$color-link-visited-dark: #a679d2 !default;
+
 // Focus modifications to meet AA 3:1 contrast ratio against
 // button background for positive/negative buttons
 $color-focus-positive: #003008 !default;
@@ -95,7 +98,7 @@ $states: (
 // --border-low-contrast  - low contrast version of border color, to be used when border needs more visibility (separators)
 
 // Light theme
-$colors--light-theme--text-default: #111 !default;
+$colors--light-theme--text-default: #000 !default;
 $colors--light-theme--text-muted: rgba($color-x-dark, $muted-text-opacity-amount) !default;
 $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-amount) !default;
 
@@ -106,7 +109,7 @@ $colors--light-theme--background-active: adjust-color($color-x-dark, $lightness:
 $colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
 $colors--light-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
-$colors--light-theme--border-default: rgba($color-x-dark, 0.15) !default;
+$colors--light-theme--border-default: rgba($color-x-dark, 0.2) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
@@ -152,15 +155,15 @@ $colors--dark-theme--text-hover: hsl(0, 0%, 76%) !default; // minimum contrast o
 $colors--dark-theme--text-muted: rgba($colors--dark-theme--text-default, $muted-text-opacity-amount) !default;
 $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $inactive-text-opacity-amount) !default;
 
-$colors--dark-theme--background-default: hsl(0, 0%, 15%) !default;
-$colors--dark-theme--background-alt: hsl(0, 0%, 20%) !default;
+$colors--dark-theme--background-default: #262626 !default;
+$colors--dark-theme--background-alt: #2d2d2d !default;
 $colors--dark-theme--background-active: rgba($colors--dark-theme--text-default, $active-background-opacity-amount) !default;
 $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
-$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
-$colors--dark-theme--border-high-contrast: hsl(0deg 0% 60%) !default;
-$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
+$colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.3) !default;
+$colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;
+$colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.05) !default;
 
 $colors-dark-theme--tinted-backgrounds: (
   neutral: (
@@ -204,8 +207,8 @@ $colors--paper-theme--background-active: rgba($color-x-dark, $active-background-
 $colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
 
 // Branding colors
-$color-brand: #333 !default;
+$color-ubuntu: #e95420; // Ubuntu orange, should not be overridden
+$color-brand: $color-ubuntu !default;
 $color-brand-dark: $color-brand !default;
-$color-brand-background: $colors--dark-theme--background-default;
-$color-accent: #e95420 !default;
-$color-accent-background: $color-brand !default;
+$color-accent: #0f95a1 !default;
+$color-accent-background: $colors--dark-theme--background-default !default; // changed from "brand" colour to dark theme background

package/scss/_settings_placeholders.scss

@@ -4,7 +4,7 @@
 // Global placeholder settings
 $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: $sp-unit * 0.25 !default;
+$border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $color-mid-light !default;
 $box-shadow: 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

package/scss/_settings_spacing.scss

@@ -97,6 +97,7 @@ $sp-after: (
   h4: $spv--x-large,
   h4-mobile: $spv--x-large,
   p: $spv--x-large,
+  p-small-caps: $spv--large,
   p-dense: $spv--large,
   default-text: $sp-unit,
   small: $spv--large,

package/scss/_utilities_text-figures.scss

@@ -0,0 +1,8 @@
+@import 'settings';
+
+// Force a parent to clear floated children
+@mixin vf-u-text-figures {
+  .u-text-figures {
+    font-variant-numeric: oldstyle-nums !important;
+  }
+}

package/scss/_utilities_text-max-width.scss

@@ -0,0 +1,14 @@
+@import 'settings';
+
+// Force child text elements (such as list items) to use text max width
+@mixin vf-u-text-max-width {
+  // currently we only need this on list items, as paragraphs and headings have max width by default
+
+  // stylelint-disable selector-max-type -- Utility needs to target elements
+  ul.u-text-max-width,
+  ol.u-text-max-width,
+  .u-text-max-width ul,
+  .u-text-max-width ol {
+    max-width: $text-max-width !important;
+  }
+}

package/scss/_utilities_vertical-spacing.scss

@@ -1,4 +1,8 @@
 @mixin vf-u-vertical-spacing($start: -3, $end: 3) {
+  // FIXME
+  // this utility works only on elements that don't have borders or backgrounds
+  // by adding an ::after pseudo-element it extends the inside of the element
+  // rather than modyfing the space after it
   %u-vertical-spacer {
     content: '';
     display: block;

package/scss/_vanilla.scss

@@ -83,6 +83,8 @@
 @import 'utilities_vertical-spacing';
 @import 'utilities_vertically-center';
 @import 'utilities_no-print';
+@import 'utilities_text-max-width';
+@import 'utilities_text-figures';
 
 // Include all the CSS
 @mixin vanilla {
@@ -170,4 +172,6 @@
   @include vf-u-show;
   @include vf-u-visualise-baseline;
   @include vf-u-no-print;
+  @include vf-u-text-max-width;
+  @include vf-u-text-figures;
 }