vanilla-framework 4.12.0 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,7 +55,7 @@
     "!/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",

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

@@ -1,6 +1,60 @@
+/*
+  @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: grid;
+    justify-content: center;
+    text-align: center;
+    .p-image-container__image {
+      object-fit: contain;
+    }
+    &.is-highlighted {
+      background: $colors--theme--background-alt;
+    }
+  }
+
+  .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 +63,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_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_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;
     }
   }
 
@@ -227,7 +227,7 @@ $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);
       }
 
       // on medium screen sizes (6 columns) use 2/4 column split
@@ -404,6 +404,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 +430,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);
 
@@ -508,7 +514,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,7 +524,7 @@ $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);
+      padding-left: $sph--large;
 
       .p-navigation__search-label {
         display: initial;
@@ -536,7 +542,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);
@@ -679,7 +685,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 +708,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 {

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_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

@@ -172,7 +172,7 @@ $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-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;

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),