vanilla-framework 4.3.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,18 +57,18 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.4.1",
-    "@percy/cli": "1.27.1",
+    "@percy/cli": "1.27.2",
     "@testing-library/cypress": "9.0.0",
-    "autoprefixer": "10.4.15",
+    "autoprefixer": "10.4.16",
     "cypress": "12.17.4",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.29",
+    "postcss": "8.4.31",
     "postcss-cli": "10.1.0",
-    "postcss-scss": "4.0.7",
+    "postcss-scss": "4.0.9",
     "prettier": "2.8.8",
-    "sass": "1.66.1",
+    "sass": "1.68.0",
     "stylelint": "15.10.3",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",

package/scss/_base_typography-definitions.scss

@@ -238,9 +238,9 @@
     text-transform: uppercase;
   }
 
-  // deprecated: %muted-text is deprecated, use %small-caps-text instead
   %muted-heading {
     @extend %small-caps-text;
+    @extend %bold;
   }
 
   %bold {

package/scss/_layouts_docs.scss

@@ -0,0 +1,99 @@
+@mixin vf-l-docs {
+  $l-documentation-sidebar-width: 15rem !default;
+
+  // we switch to full screen layout (with side navigation fixed to left side)
+  // when screen is big enough to fit 12 column grid and side navigation
+  $breakpoint-full-screen-layout: calc($breakpoint-large + $l-documentation-sidebar-width);
+
+  // root element for the documentation layout
+  .l-docs,
+  // root element for that can be used on a nested container to create a subgrid aligned with the main documentation layout grid
+  .l-docs__subgrid {
+    // container for the site global navigation header
+    .l-docs__header {
+      grid-area: header;
+    }
+
+    // left side container, for side navigation
+    .l-docs__sidebar {
+      grid-area: sidebar;
+    }
+
+    // main content title container
+    // will appear above table of contents on medium screens
+    .l-docs__title {
+      grid-area: title;
+    }
+
+    // metadata container (for table of contents, etc)
+    // will appear between title and content on medium screens
+    // and on the right side on large screens
+    .l-docs__meta {
+      grid-area: meta;
+    }
+
+    // main content container
+    // will appear below table of contents on medium screens
+    .l-docs__main {
+      grid-area: main;
+    }
+
+    // container for site global footer
+    .l-docs__footer {
+      grid-area: footer;
+    }
+  }
+
+  @media (min-width: $breakpoint-large) {
+    .l-docs {
+      display: grid;
+      grid-gap: 0;
+      grid-template-areas:
+        'header  header'
+        'sidebar title'
+        'sidebar meta'
+        'sidebar main'
+        'footer  footer';
+
+      grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr);
+      grid-template-rows: auto auto auto 1fr auto; // stretch main content to fill the space
+      width: 100%;
+    }
+
+    .l-docs__subgrid {
+      display: grid;
+      grid-template-areas: 'sidebar main meta';
+      grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr) min-content;
+      width: 100%;
+    }
+  }
+
+  @media (min-width: $breakpoint-full-screen-layout) {
+    .l-docs {
+      grid-template-areas:
+        'header  header header'
+        'sidebar title  meta'
+        'sidebar main   meta'
+        'footer  footer footer';
+
+      grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr) $l-documentation-sidebar-width;
+      grid-template-rows: auto auto 1fr auto; // stretch main content to fill the space
+
+      .l-docs__content {
+        display: contents;
+      }
+    }
+
+    .l-docs__subgrid {
+      grid-template-columns: $l-documentation-sidebar-width minmax(0, 1fr) $l-documentation-sidebar-width;
+    }
+
+    // on largest screens we want to keep the table of contents sticky
+    .l-docs__sticky-container {
+      max-height: 100vh;
+      overflow-y: auto;
+      position: sticky;
+      top: 0;
+    }
+  }
+}

package/scss/_layouts_full-width.scss

@@ -1,3 +1,5 @@
+// DEPRECATED
+// .l-full-width is deprecated, use .l-docs and .l-docs__container instead
 @mixin vf-l-full-width {
   $l-full-screen-aside-width: 15rem;
 

package/scss/_patterns_side-navigation-expandable.scss

@@ -46,6 +46,7 @@
   .p-side-navigation__expand[aria-expanded='false'] + .p-side-navigation__list {
     height: 0;
     opacity: 0;
+    overflow: hidden;
     transform: translate3d(0, -0.5rem, 0);
     // disable transition on close
     transition-duration: 0s;

package/scss/_patterns_side-navigation.scss

@@ -539,7 +539,7 @@
     .p-side-navigation--raw-html {
       @include vf-side-navigation-raw-html-theme-light;
 
-      &.is-light {
+      &.is-dark {
         @include vf-side-navigation-raw-html-theme-dark;
       }
     }
@@ -723,6 +723,20 @@
     $color-sidenav-list-border: $colors--light-theme--border-low-contrast,
     $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
   );
+
+  .is-paper & {
+    @include vf-side-navigation-theme(
+      $color-sidenav-text-default: $colors--light-theme--text-inactive,
+      $color-sidenav-background-default: $color-paper,
+      $color-sidenav-background-overlay: $colors--light-theme--background-overlay,
+      $color-sidenav-text-active: $colors--light-theme--text-default,
+      $color-sidenav-item-background-active: $colors--paper-theme--background-active,
+      $color-sidenav-item-background-hover: $colors--paper-theme--background-hover,
+      $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
+      $color-sidenav-list-border: $colors--light-theme--border-low-contrast,
+      $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
+    );
+  }
 }
 
 @mixin vf-side-navigation-theme-dark {
@@ -804,6 +818,17 @@
     $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
     $color-sidenav-list-border: $colors--light-theme--border-low-contrast
   );
+
+  .is-paper {
+    @include vf-side-navigation-raw-html-theme(
+      $color-sidenav-text-default: $colors--light-theme--text-inactive,
+      $color-sidenav-text-active: $colors--light-theme--text-default,
+      $color-sidenav-item-background-active: $colors--paper-theme--background-active,
+      $color-sidenav-item-background-hover: $colors--paper-theme--background-hover,
+      $color-sidenav-item-border-highlight: $colors--light-theme--text-default,
+      $color-sidenav-list-border: $colors--light-theme--border-low-contrast
+    );
+  }
 }
 
 @mixin vf-side-navigation-raw-html-theme-dark {

package/scss/_patterns_table-of-contents.scss

@@ -2,55 +2,43 @@
 
 @mixin vf-p-table-of-contents {
   .p-table-of-contents {
-    border-top: 1px solid $color-mid-light;
-    font-size: 0.875rem;
-    padding: 0 $sp-large;
-
-    @media (min-width: $threshold-6-12-col) {
-      border-left: 1px solid $color-mid-light;
-      border-top: 0;
-      padding: 0 $sp-medium;
-    }
+    @extend %vf-grid-container-padding;
   }
 
   .p-table-of-contents__header {
-    color: $color-mid-dark;
-    font-size: $sp-medium;
-    line-height: 1.5;
-    margin-bottom: $sp-medium;
-    text-transform: uppercase;
+    @extend %muted-heading;
   }
 
   .p-table-of-contents__section {
-    padding: $sp-medium 0;
+    padding-bottom: $spv--large;
 
     &:not(:last-child) {
-      border-bottom: 1px dotted $color-mid-light;
+      border-bottom: 1px solid $color-mid-light;
     }
   }
 
-  .p-table-of-contents__nav {
+  .p-table-of-contents__list {
     list-style: none;
     margin: 0;
     padding: 0;
 
+    .p-table-of-contents__list {
+      margin-left: $sph--large;
+    }
+
     .p-table-of-contents__link {
-      border-bottom: 0;
-      color: $colors--light-theme--text-default;
-      margin-bottom: $sp-x-small;
+      display: block;
+      // paddings based on side navigation
+      padding-bottom: $spv--x-small;
+      padding-top: $spv--x-small;
 
-      &:visited {
-        color: $colors--light-theme--text-default;
+      &.is-active {
+        font-weight: $font-weight-bold;
       }
 
-      &:hover {
+      &:visited {
         color: $color-link;
       }
-
-      &.is-active {
-        font-weight: $font-weight-bold;
-        padding-left: $sp-x-small;
-      }
     }
   }
 }

package/scss/_vanilla.scss

@@ -57,6 +57,7 @@
 
 // Layouts
 @import 'layouts_application';
+@import 'layouts_docs';
 @import 'layouts_full-width';
 @import 'layouts_site';
 @import 'layouts_fluid-breakout';
@@ -147,6 +148,7 @@
 
   // Layouts
   @include vf-l-application;
+  @include vf-l-docs;
   @include vf-l-full-width;
   @include vf-l-site;
   @include vf-l-fluid-breakout;