vanilla-framework 4.11.0 → 4.13.0

package/README.md

@@ -1,6 +1,5 @@
 # ![vanilla](https://assets.ubuntu.com/v1/70041419-vanilla-framework.png?w=35 'Vanilla') Vanilla Framework
 
-[![CircleCI build status](https://circleci.com/gh/canonical/vanilla-framework.svg?style=shield)](https://circleci.com/gh/canonical/vanilla-framework)
 [![npm version](https://badge.fury.io/js/vanilla-framework.svg)](http://badge.fury.io/js/vanilla-framework)
 [![Downloads](http://img.shields.io/npm/dm/vanilla-framework.svg)](https://www.npmjs.com/package/vanilla-framework)
 [![devDependency Status](https://david-dm.org/canonical/vanilla-framework/dev-status.svg)](https://david-dm.org/canonical/vanilla-framework#info=devDependencies)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,24 +55,24 @@
     "!/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.5",
-    "@testing-library/cypress": "10.0.1",
+    "@percy/cli": "1.28.7",
+    "@testing-library/cypress": "10.0.2",
     "autoprefixer": "10.4.19",
-    "cypress": "13.8.1",
+    "cypress": "13.10.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "postcss": "8.4.38",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.2.5",
-    "sass": "1.77.0",
-    "stylelint": "16.5.0",
+    "prettier": "3.3.0",
+    "sass": "1.77.4",
+    "stylelint": "16.6.1",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
-    "svgo": "3.2.0",
-    "yaml": "2.4.2"
+    "svgo": "3.3.2",
+    "yaml": "2.4.3"
   }
 }

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

@@ -16,6 +16,7 @@
     font-weight: $font-weight-regular-text;
     // set default line height to match p
     line-height: map-get($line-heights, default-text);
+    text-wrap: pretty;
 
     @if ($increase-font-size-on-larger-screens) {
       font-size: map-get($base-font-sizes, base);

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

@@ -132,7 +132,15 @@
   .p-icon--chevron-up {
     transform: rotate(180deg);
   }
+  .p-icon--chevron-left {
+    transform: rotate(90deg);
+  }
+  .p-icon--chevron-right {
+    transform: rotate(-90deg);
+  }
 
+  .p-icon--chevron-left,
+  .p-icon--chevron-right,
   .p-icon--chevron-down,
   .p-icon--chevron-up {
     @extend %icon;

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;
@@ -318,6 +314,9 @@ $list-step-bullet-margin: $sph--x-large;
 
   .p-stepped-list__title + .p-stepped-list__content {
     margin-left: $bullet-width-mobile + $list-step-bullet-margin;
+    @media (min-width: $threshold-6-12-col) {
+      padding-top: $spv-nudge;
+    }
 
     @media (min-width: $breakpoint-heading-threshold) {
       margin-left: $bullet-width + $list-step-bullet-margin;
@@ -392,7 +391,6 @@ $list-step-bullet-margin: $sph--x-large;
       @include vf-b-row-reset;
 
       @media (min-width: $threshold-6-12-col) {
-        padding-top: $sp-unit;
         position: relative;
 
         &::after {

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

@@ -5,7 +5,7 @@
 
   .p-modal {
     align-items: center;
-    background: transparentize($color-dark, 0.15);
+    background: $colors--theme--background-overlay;
     bottom: 0;
     display: flex;
     height: 100vh;
@@ -21,9 +21,11 @@
   }
 
   .p-modal__dialog {
-    @extend %vf-card;
+    @extend %vf-card-padding;
     @extend %vf-has-box-shadow;
 
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     left: $sph--x-large;
     margin-bottom: 0;
     max-height: calc(100% - 2 * $spv--large);
@@ -46,7 +48,7 @@
   .p-modal__header {
     @extend %vf-pseudo-border--bottom;
 
-    background: $color-x-light;
+    background: $colors--theme--background-default;
     display: flex;
     justify-content: space-between;
     margin-bottom: $spv--small;
@@ -65,8 +67,8 @@
   }
 
   .p-modal__close {
+    @include vf-icon-close-themed;
     background: {
-      image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='90' width='90'%3E%3Cg color='%23000'%3E%3Cpath fill='none' d='M0 0h90v90H0z'/%3E%3Cpath d='M14.52 6L6 14.52 36.48 45 6 75.49 14.52 84 45 53.52 75.48 84 84 75.49 53.52 45 84 14.52 75.48 6 45 36.49z' fill='%23888'/%3E%3C/g%3E%3C/svg%3E");
       position: center;
       repeat: no-repeat;
       size: $icon-size;
@@ -83,10 +85,6 @@
     text-indent: -999em;
     top: 0;
     width: $icon-size;
-
-    &:focus {
-      outline: $bar-thickness solid $color-focus;
-    }
   }
 
   .p-modal__footer {

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_segmented-control.scss

@@ -27,7 +27,7 @@
         border-right: 0;
 
         &::after {
-          background-color: $colors--light-theme--border-low-contrast;
+          background-color: $colors--theme--border-low-contrast;
           bottom: 0;
           content: '';
           position: absolute;

package/scss/_patterns_side-navigation.scss

@@ -117,8 +117,6 @@
     width: 100%;
     z-index: 102;
 
-    .p-side-navigation:target &,
-    [class*='p-side-navigation--']:target &,
     // is-expanded and is-collapsed are deprecated and replaced by is-drawer-expanded and is-drawer-collapsed
     .p-side-navigation.is-expanded &,
     .p-side-navigation.is-drawer-expanded &,
@@ -167,8 +165,6 @@
     top: 0;
     z-index: 101;
 
-    .p-side-navigation:target &,
-    [class*='p-side-navigation--']:target &,
     .p-side-navigation.is-expanded &,
     .p-side-navigation.is-drawer-expanded &,
     [class*='p-side-navigation--'].is-expanded &,
@@ -258,8 +254,6 @@
 
     .p-side-navigation__drawer,
     // fight specificity of expanded version
-    .p-side-navigation:target .p-side-navigation__drawer,
-    [class*='p-side-navigation--']:target .p-side-navigation__drawer,
     .p-side-navigation.is-expanded .p-side-navigation__drawer,
     .p-side-navigation.is-drawer-expanded .p-side-navigation__drawer,
     [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer,

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

package/scss/_utilities_baseline-grid.scss

@@ -34,19 +34,4 @@
     }
   }
   // stylelint-enable selector-max-type
-
-  .u-baseline-grid__toggle {
-    bottom: $spv--x-large;
-    color: $colors--light-theme--text-default; // Force light theme colour because of baseline grid background
-    position: fixed;
-    right: $sp-unit * 3;
-    z-index: 201;
-  }
-
-  // hide the theme toggle in Percy
-  @media only percy {
-    .u-baseline-grid__toggle {
-      visibility: hidden !important;
-    }
-  }
 }

package/scss/_vanilla.scss

@@ -89,7 +89,6 @@
 @import 'utilities_no-print';
 @import 'utilities_text-max-width';
 @import 'utilities_text-figures';
-@import 'utilities_theme-toggle';
 
 // Include all the CSS
 @mixin vanilla {
@@ -183,5 +182,4 @@
   @include vf-u-no-print;
   @include vf-u-text-max-width;
   @include vf-u-text-figures;
-  @include vf-u-theme-toggle;
 }

package/scss/_utilities_theme-toggle.scss

@@ -1,39 +0,0 @@
-@import 'settings';
-
-@mixin vf-u-theme-toggle {
-  .u-theme-toggle {
-    bottom: $spv--x-large;
-    position: fixed;
-    right: $sp-unit * 30;
-    z-index: 100;
-
-    .u-theme-toggle__button {
-      margin: 0;
-
-      &:not(:last-child) {
-        border-right: 0;
-      }
-    }
-
-    .u-theme-toggle__dark {
-      background-color: $colors--dark-theme--background-default;
-      color: $colors--dark-theme--text-default;
-    }
-
-    .u-theme-toggle__light {
-      background-color: $colors--light-theme--background-default;
-      color: $colors--light-theme--text-default;
-    }
-    .u-theme-toggle__paper {
-      background-color: $color-paper;
-      color: $color-x-dark;
-    }
-  }
-
-  // hide the theme toggle in Percy
-  @media only percy {
-    .u-theme-toggle {
-      visibility: hidden !important;
-    }
-  }
-}