vanilla-framework 4.11.0 → 4.12.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.12.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,22 +57,22 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.3",
     "@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_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_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_lists.scss

@@ -318,6 +318,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 +395,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_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_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/_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;
-    }
-  }
-}