vanilla-framework 4.0.0-rc.1 → 4.1.0

package/README.md

@@ -84,6 +84,6 @@ Keep up to date with all new developments and upcoming changes with Vanilla.
 - Follow us on Twitter [@vanillaframewrk](https://twitter.com/vanillaframewrk)
 - Read our latest blog posts at [Ubuntu Blog](https://blog.ubuntu.com/topics/design)
 
-Code licensed [LGPLv3](http://opensource.org/licenses/lgpl-3.0.html) by [Canonical Ltd](http://www.canonical.com/)
+Code licensed [LGPLv3](https://opensource.org/license/lgpl-3-0/) by [Canonical Ltd](http://www.canonical.com/)
 
 With ♥ from Canonical

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.0.0-rc.1",
+  "version": "4.1.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,7 +55,7 @@
     "!/scss/standalone"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.4.0",
+    "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.4.1",
     "@percy/cli": "1.26.0",
     "@testing-library/cypress": "9.0.0",
@@ -69,7 +69,7 @@
     "postcss-scss": "4.0.6",
     "prettier": "2.8.8",
     "sass": "1.62.1",
-    "stylelint": "14.16.1",
+    "stylelint": "15.10.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_base_typography-definitions.scss

@@ -35,6 +35,23 @@
     font-weight: 550;
   }
 
+  %vf-heading-display {
+    @extend %vf-heading-2;
+
+    font-size: #{map-get($font-sizes, display-mobile)}rem;
+    font-weight: 100;
+    line-height: map-get($line-heights, display-mobile);
+    margin-bottom: map-get($sp-after, display-mobile) - map-get($nudges, display-mobile);
+    padding-top: map-get($nudges, display-mobile);
+
+    @media (min-width: $breakpoint-heading-threshold) {
+      font-size: #{map-get($font-sizes, display)}rem;
+      line-height: map-get($line-heights, display);
+      margin-bottom: map-get($sp-after, display) - map-get($nudges, display);
+      padding-top: map-get($nudges, display);
+    }
+  }
+
   %vf-heading-3 {
     @extend %vf-is-accent;
 

package/scss/_patterns_breadcrumbs.scss

@@ -7,25 +7,25 @@
     margin: 0;
     padding: 0;
     width: 100%;
+  }
 
-    &__items {
-      margin-left: 0;
-      padding-left: 0;
-    }
+  .p-breadcrumbs__items {
+    margin-bottom: 0;
+    margin-left: 0;
+    padding-left: 0;
   }
 
   .p-breadcrumbs__item {
-    @extend %default-text;
+    @extend %small-caps-text;
 
     display: inline-block;
-    margin-bottom: $spv-nudge-compensation;
 
     &:not(:first-of-type) {
       text-indent: $sph--large;
     }
 
     &:not(:first-of-type)::before {
-      content: '\203A';
+      content: '/';
       margin-left: -0.75rem;
       margin-right: 0.5rem;
     }

package/scss/_patterns_chip.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @import 'settings';
+$chip-border-thickness: 1px;
 
 @mixin vf-p-chip {
   %vf-chip {
@@ -12,10 +13,10 @@
     display: inline-flex;
     margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding: calc($spv--x-small - $input-border-thickness) $sph--small; // account for border thickness using calc
+    padding: calc($spv--x-small - $chip-border-thickness) $sph--small; // account for border thickness using calc
     position: relative;
     user-select: none;
-    vertical-align: calc($input-border-thickness - map-get($nudges, p));
+    vertical-align: calc($chip-border-thickness - map-get($nudges, p));
     white-space: nowrap;
 
     .p-chip__lead,
@@ -26,12 +27,11 @@
       padding: 0;
       text-overflow: ellipsis;
       vertical-align: baseline;
+      @extend %small-text;
     }
 
     .p-chip__lead {
-      @extend %x-small-text;
-
-      text-transform: uppercase;
+      @extend %small-caps-text;
     }
 
     .p-chip__lead + .p-chip__value::before {
@@ -40,11 +40,6 @@
       content: ': ';
     }
 
-    .p-chip__value {
-      @extend %small-text;
-      font-weight: $font-weight-bold;
-    }
-
     .p-chip__dismiss {
       @extend %icon;
       // also includes button and close icon styles in the theming section
@@ -242,7 +237,7 @@
   $color-border: map-get($colors-chip-tinted-borders, $chip-type);
 
   background-color: $color-background;
-  border: $input-border-thickness solid $color-border;
+  border: $chip-border-thickness solid $color-border;
 
   .p-chip__value {
     color: $color-chip-value;

package/scss/_patterns_grid.scss

@@ -241,6 +241,42 @@
     }
   }
 
+  .row--25-75.is-split-on-medium {
+    > .col {
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(2);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(4);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          @include vf-grid-column(4);
+          grid-column-start: calc(3);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-column($col-75);
+        }
+      }
+    }
+  }
+
   .row--25-25-50 {
     @extend %vf-row;
 

package/scss/_patterns_headings.scss

@@ -2,6 +2,10 @@
 
 // Default breadcrumbs styling
 @mixin vf-p-headings {
+  .p-heading--display {
+    @extend %vf-heading-display;
+  }
+
   .p-heading--1 {
     @extend %vf-heading-1;
   }

package/scss/_patterns_suru.scss

@@ -0,0 +1,22 @@
+@import 'settings';
+
+@mixin vf-p-suru {
+  .p-suru {
+    aspect-ratio: calc(2216 / 428); // aspect ratio calculated from image dimensions
+    background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
+    background-size: contain;
+    display: none; // only show suru on large screens
+    margin: 0 auto;
+    max-width: $grid-max-width;
+
+    // show suru only on large screens
+    @media (min-width: $breakpoint-large) {
+      display: block;
+    }
+
+    &.is-dark {
+      aspect-ratio: calc(2580 / 501); // aspect ratio calculated from image dimensions
+      background-image: url('#{$assets-path}9469ef82-1_website_suru_DARK_25%20(1)122.jpg');
+    }
+  }
+}

package/scss/_patterns_tabs.scss

@@ -1,9 +1,6 @@
 @import 'settings';
 
 @mixin vf-p-tabs {
-  // for _patterns_tabs.scss
-  $color-tabs-active-bar: $colors--light-theme--text-default !default;
-
   .p-tabs {
     border-radius: 0;
     overflow: hidden;
@@ -44,7 +41,6 @@
 
       align-items: center;
       border: none;
-      color: $colors--light-theme--text-default;
       display: flex;
       gap: $sph--small;
       height: 100%;
@@ -55,7 +51,6 @@
 
       &::before {
         @extend %vf-pseudo-border;
-        @include vf-transition(#{background-color, border-color}, snap, in);
 
         bottom: 0;
         z-index: 1;
@@ -71,20 +66,88 @@
         }
       }
 
+      &:active,
+      &[aria-selected='true'] {
+        // Hide the highlight when focussing (in combination with the parent
+        // states) in browsers that don't support focus-visible.
+        &:focus::before,
+        &:focus::after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  // Theming
+  @if ($theme-default-p-tabs == 'dark') {
+    .p-tabs {
+      @include vf-p-tabs-dark-theme;
+    }
+
+    .p-tabs.is-light {
+      @include vf-p-tabs-light-theme;
+    }
+  } @else {
+    .p-tabs {
+      @include vf-p-tabs-light-theme;
+    }
+
+    .p-tabs.is-dark {
+      @include vf-p-tabs-dark-theme;
+    }
+  }
+}
+
+@mixin vf-p-tabs-theme($color-tabs-text, $color-tabs-border, $color-tabs-highlight-hover) {
+  color: $color-tabs-text;
+  .p-tabs {
+    &__list::after {
+      background-color: $color-tabs-border;
+    }
+
+    &__link {
+      background-color: transparent;
+
+      color: $color-tabs-text;
+      @include vf-highlight-bar(transparent, bottom, false);
+
       // Display the highlight when focussing in modern browsers that support
       // focus-visible.
       &:focus:not(:focus-visible) {
-        @include vf-highlight-bar($color-tabs-active-bar, bottom, false);
+        @include vf-highlight-bar($color-tabs-text, bottom, false);
+      }
+
+      &:hover {
+        @include vf-highlight-bar($color-tabs-highlight-hover, bottom, false);
+
+        &::before,
+        &:focus:not(:focus-visible)::before {
+          bottom: 1px;
+          height: calc($bar-thickness - 1px);
+        }
+
+        // Display the highlight when focussing (in combination with the parent
+        // states) in modern browsers that support focus-visible.
+        &:focus:not(:focus-visible) {
+          @include vf-highlight-bar($color-tabs-highlight-hover, bottom, false);
+        }
+
+        // Hide the highlight when focussing (in combination with the parent
+        // states) in browsers that don't support focus-visible.
+        &:focus::before,
+        &:focus::after {
+          content: none;
+        }
       }
 
       &:active,
       &[aria-selected='true'] {
-        @include vf-highlight-bar($color-tabs-active-bar, bottom, false);
+        @include vf-highlight-bar($color-tabs-text, bottom, false);
 
         // Display the highlight when focussing (in combination with the parent
         // states) in modern browsers that support focus-visible.
         &:focus:not(:focus-visible) {
-          @include vf-highlight-bar($color-tabs-active-bar, bottom, false);
+          @include vf-highlight-bar($color-tabs-text, bottom, false);
         }
 
         // Hide the highlight when focussing (in combination with the parent
@@ -97,3 +160,19 @@
     }
   }
 }
+
+@mixin vf-p-tabs-light-theme {
+  @include vf-p-tabs-theme(
+    $color-tabs-text: $colors--light-theme--text-default,
+    $color-tabs-border: $colors--light-theme--border-default,
+    $color-tabs-highlight-hover: $colors--light-theme--border-default
+  );
+}
+
+@mixin vf-p-tabs-dark-theme {
+  @include vf-p-tabs-theme(
+    $color-tabs-text: $colors--dark-theme--text-default,
+    $color-tabs-border: $colors--dark-theme--border-default,
+    $color-tabs-highlight-hover: $colors--dark-theme--border-default
+  );
+}

package/scss/_settings_spacing.scss

@@ -8,6 +8,8 @@ $sp-unit-ratio: 0.5 !default;
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
 $font-sizes: (
+  display: 5,
+  display-mobile: 4,
   h1: 2.5,
   h1-mobile: 2,
   h2: 2.5,
@@ -21,6 +23,8 @@ $font-sizes: (
 ) !default;
 
 $line-heights: (
+  display: 11 * $sp-unit,
+  display-mobile: 9 * $sp-unit,
   h1: 6 * $sp-unit,
   h1-mobile: 5 * $sp-unit,
   h2: 6 * $sp-unit,
@@ -36,6 +40,8 @@ $line-heights: (
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
+  display: 0.35rem,
+  display-mobile: 0.25rem,
   h1-large: 0.55rem,
   h1-mobile: 0.55rem,
   h1: 0.55rem,
@@ -88,6 +94,8 @@ $sph--x-large: $sp-unit * 3 !default;
 
 // Space after text elements
 $sp-after: (
+  display: $spv--x-large,
+  display-mobile: $spv--x-large,
   h1: $spv--x-large,
   h1-mobile: $spv--x-large,
   h2: $spv--x-large,

package/scss/_settings_themes.scss

@@ -8,3 +8,4 @@ $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;
 $theme-default-p-button: 'light' !default;
 $theme-default-p-chip: 'light' !default;
+$theme-default-p-tabs: 'light' !default;

package/scss/_vanilla.scss

@@ -53,6 +53,7 @@
 @import 'patterns_table-sortable';
 @import 'patterns_tabs';
 @import 'patterns_tooltips';
+@import 'patterns_suru';
 
 // Layouts
 @import 'layouts_application';
@@ -142,6 +143,7 @@
   @include vf-p-table-sortable;
   @include vf-p-tabs;
   @include vf-p-tooltips;
+  @include vf-p-suru;
 
   // Layouts
   @include vf-l-application;