Merge pull request #4751 from canonical/vanilla-4.0

⚠️ Vanilla 4.0 feature branch
canonical · Jul 6, 2023 · c2f5921 · c2f5921
2 parents 08bf23f + 31682a5
commit c2f5921
Show file tree

Hide file tree

Showing 97 changed files with 1,264 additions and 459 deletions.
diff --git a/.spelling b/.spelling
@@ -48,6 +48,7 @@ sub-navigation
 spec
 _n_
 px
+rems
 .5rem
 1.5rem
 1.0rem
@@ -88,6 +89,6 @@ datalist
 WAI-ARIA
 Heydon
 Pickering
-alt 
+alt
 WCAG
 A11y
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "3.15.1",
+  "version": "4.0.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

diff --git a/releases.yml b/releases.yml
@@ -1,3 +1,65 @@
+- version: 4.0.0
+  features:
+    - component: Migration guide
+      url: /docs/migration-guide-to-v4
+      status: New
+      notes: We've added a migration guide to help you upgrade to Vanilla 4.0.
+    - component: Section
+      url: /docs/patterns/section
+      status: Updated
+      notes: We've updated the section component with new shallow and deep options.
+    - component: Block
+      url: /docs/patterns/section#shallow-sections
+      status: Deprecated
+      notes: The block component should is deprecated, use shallow section instead.
+    - component: Border radius setting
+      url: /docs/settings/placeholder-settings
+      status: Deprecated
+      notes: We removed rounder corners from all Vanilla components and deprecated the use of <code>$border-radius</code> variable.
+    - component: Old-style numerals
+      url: /docs/base/typography#old-style-numerals
+      status: New
+      notes: We've added a new utility class <code>.u-oldstyle-nums</code> to use old-style numerals.
+    - component: Links dark theme
+      url: /docs/patterns/links#dark
+      status: New
+      notes: We've added a new class <code>.is-dark</code> to use the links on dark backgrounds.
+    - component: Rules dark theme
+      url: /docs/patterns/rule#dark-theme
+      status: New
+      notes: We've added a new class <code>.is-dark</code> to use the rules on dark backgrounds.
+    - component: Colours
+      url: /docs/settings/color-settings
+      status: Updated
+      notes: We've updated our brand colour to Ubuntu orange and added a teal accent colour.
+    - component: Accented headings
+      url: /docs/base/typography#accented-headings
+      status: New
+      notes: We've added a new class <code>.is-accent</code> to highlight headings with the accent colour.
+    - component: Accented rules
+      url: /docs/patterns/rule#highlighted
+      status: New
+      notes: We've added a new class <code>.is-accent</code> to highlight rules with the accent colour.
+    - component: Paper background
+      url: /docs/base/paper
+      status: New
+      notes: We've added new paper background colour that can be added to the body element using <code>is-paper</code> class name. Components designed for white backgrounds (like inputs) can use <code>on-paper</code> class to adjust for the new background.
+    - component: White strip
+      url: /docs/patterns/strip#white-strip
+      status: New
+      notes: We've added a new white strip component to highlight the content on new paper background.
+    - component: Text max width utility
+      url: /docs/utilities/text-max-width
+      status: New
+      notes: We've added a new utility class <code>.u-text-max-width</code> to limit the width of text lists.
+    - component: New grey error icon
+      url: /docs/patterns/icons#additional
+      status: New
+      notes: We've added new grey error icon.
+    - component: New grey status icons in lists
+      url: /docs/patterns/lists#status
+      status: Updated
+      notes: We've updated the status icons used in ticked lists to use grey outline instead of coloured background.
 - version: 3.15.0
   features:
     - component: Sliding navigation

diff --git a/scss/_base_background.scss b/scss/_base_background.scss
@@ -1,6 +1,11 @@
 @mixin vf-base-background {
   // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
-  html {
+  body {
     background: $color-x-light;
   }
+
+  // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
+  body.is-paper {
+    background: $color-paper;
+  }
 }
diff --git a/scss/_base_code.scss b/scss/_base_code.scss
@@ -26,7 +26,6 @@ $code-inline-padding: 0.25rem;
   kbd,
   samp {
     background-color: $color-code-background;
-    border-radius: $border-radius;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
@@ -61,7 +60,7 @@ $code-inline-padding: 0.25rem;
 
   pre {
     background-color: $color-code-background;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     display: block;
     margin-bottom: $spv--x-large;
     margin-top: 0;

diff --git a/scss/_base_fontfaces.scss b/scss/_base_fontfaces.scss
@@ -7,22 +7,22 @@
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}15be2ffe-UbuntuBeta0.865[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
       }
 
       @font-face {
         font-family: 'Ubuntu variable';
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: italic;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}a84821f4-UbuntuBeta0.865-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
       }
 
       @font-face {
         font-family: 'Ubuntu Mono variable';
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}ec568c8f-UbuntuMonoBeta0.865[wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}d5fc1819-UbuntuMono%5Bwght%5D-latin-v0.869.woff2') format('woff2-variations');
       }
 
       @if $font-allow-cyrillic-greek-latin {
@@ -32,7 +32,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}929e5b64-UbuntuBeta0.865[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}77cd6650-Ubuntu%5Bwdth,wght%5D-cyrillic-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
         }
 
@@ -42,7 +42,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}ec29c093-UbuntuBeta0.865[wdth,wght]-cyrillic.woff2') format('woff2-variations');
+          src: url('#{$assets-path}2702fce5-Ubuntu%5Bwdth,wght%5D-cyrillic-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
         }
 
@@ -52,7 +52,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}0a8276a6-UbuntuBeta0.865[wdth,wght]-greek-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}5c108b7d-Ubuntu%5Bwdth,wght%5D-greek-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+1F00-1FFF;
         }
 
@@ -62,7 +62,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}16acdbb4-UbuntuBeta0.865[wdth,wght]-greek.woff2') format('woff2-variations');
+          src: url('#{$assets-path}0a14c405-Ubuntu%5Bwdth,wght%5D-greek-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0370-03FF;
         }
 
@@ -72,7 +72,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}c81d0142-UbuntuBeta0.865[wdth,wght]-latin-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}19f68eeb-Ubuntu%5Bwdth,wght%5D-latin-extended-v0.896a.woff2') format('woff2-variations');
           unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
         }
       }

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
@@ -25,7 +25,7 @@
     border: 0 solid transparent;
     border-bottom: $input-border-thickness solid $colors--light-theme--text-default;
     border-radius: 0;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
@@ -67,6 +67,25 @@
         border: $input-border-thickness solid $color;
       }
     }
+
+    // adjust input background color for paper theme
+
+    // XXX: currently these colours are transparent,
+    // so they work both on paper and white backgrounds.
+    // We may need later to add a specific override for
+    // a white background within paper themed pages.
+    .is-paper & {
+      background-color: $colors--paper-theme--background-inputs;
+
+      &:hover {
+        background-color: $colors--paper-theme--background-hover;
+      }
+
+      &:active,
+      &:focus {
+        background-color: $colors--paper-theme--background-active;
+      }
+    }
   }
 
   // Disabled form elements
@@ -179,7 +198,7 @@
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     min-height: map-get($line-heights, default-text);
     padding-right: calc($default-icon-size + 2 * $sph--small);
     text-indent: 0.01px;
@@ -221,7 +240,6 @@
   fieldset {
     @extend %vf-card;
     @extend %vf-is-bordered;
-    @extend %vf-has-round-corners;
 
     margin-left: 0;
     margin-right: 0;

diff --git a/scss/_base_hr.scss b/scss/_base_hr.scss
@@ -35,10 +35,6 @@
       @extend %u-no-margin--bottom--hr;
     }
 
-    &.is-muted {
-      background-color: $colors--light-theme--border-low-contrast;
-    }
-
     &.is-fixed-width {
       @extend %fixed-width-hr;
     }
@@ -67,15 +63,20 @@
 
 @mixin vf-hr-theme(
   // color of the horizontal rule line
-  $color-hr-line
+  $color-hr-line-default,
+  $color-hr-line-muted
 ) {
-  background: $color-hr-line;
+  background: $color-hr-line-default;
+
+  &.is-muted {
+    background-color: $color-hr-line-muted;
+  }
 }
 
 @mixin vf-hr-light-theme {
-  @include vf-hr-theme($colors--light-theme--border-default);
+  @include vf-hr-theme($color-hr-line-default: $colors--light-theme--border-default, $color-hr-line-muted: $colors--light-theme--border-low-contrast);
 }
 
 @mixin vf-hr-dark-theme {
-  @include vf-hr-theme($colors--dark-theme--border-default);
+  @include vf-hr-theme($color-hr-line-default: $colors--dark-theme--border-default, $color-hr-line-muted: $colors--dark-theme--border-low-contrast);
 }
diff --git a/scss/_base_icon-definitions.scss b/scss/_base_icon-definitions.scss
@@ -418,6 +418,10 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 110 16A8 8 0 018 0zm0 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zm2.814 2.45l1.203.897-5.537 7.43-3.485-3.694 1.09-1.03 2.259 2.394 4.47-5.997z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
+@mixin vf-icon-error-grey($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1.52588e-05C12.4183 1.52588e-05 16 3.58174 16 8.00002C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8.00002C0 3.58174 3.58172 1.52588e-05 8 1.52588e-05ZM10.2821 4.63808L11.3427 5.69874L9.05007 7.99008L11.3427 10.2821L10.2821 11.3427L7.99007 9.05008L5.69873 11.3427L4.63807 10.2821L6.92907 7.99008L4.63807 5.69874L5.69873 4.63808L7.99007 6.92908L10.2821 4.63808ZM1.5 8.00002C1.5 4.41016 4.41015 1.50002 8 1.50002C11.5899 1.50002 14.5 4.41016 14.5 8.00002C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8.00002Z' fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
 @mixin vf-icon-switcher-dashboard($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25 9a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 012.75 9h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5a.75.75 0 01-.75-.75v-3.5A.75.75 0 019.75 9h3.5zM5.5 10.5h-2v2h2v-2zm7 0h-2v2h2v-2zM6.25 2a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 012 6.25v-3.5A.75.75 0 012.75 2h3.5zm7 0a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.5A.75.75 0 019 6.25v-3.5A.75.75 0 019.75 2h3.5zM5.5 3.5h-2v2h2v-2zm7 0h-2v2h2v-2z' fill='#{vf-url-friendly-color($color)}'  fill-rule='nonzero'/%3E%3C/svg%3E");
 }

diff --git a/scss/_base_links.scss b/scss/_base_links.scss
@@ -27,6 +27,14 @@
     &:visited {
       color: $color-link-visited;
     }
+
+    &.is-dark {
+      color: $color-link-dark;
+
+      &:visited {
+        color: $color-link-visited-dark;
+      }
+    }
   }
   // stylelint-enable selector-max-type
 }
diff --git a/scss/_base_placeholders.scss b/scss/_base_placeholders.scss
@@ -7,6 +7,8 @@
   @include vf-b-typography-definitions;
 
   // Styling
+
+  // deprecated, will be removed in future version of Vanilla
   %vf-has-round-corners {
     border-radius: $border-radius;
   }
@@ -25,12 +27,12 @@
 
   %vf-bg--light {
     background-color: $color-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-bg--x-light {
     background-color: $color-x-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-card-padding {

diff --git a/scss/_base_tables.scss b/scss/_base_tables.scss
@@ -41,7 +41,7 @@
       @extend %table-header-label;
 
       padding-bottom: $spv--large - map-get($nudges, x-small);
-      padding-top: map-get($nudges, x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
+      padding-top: map-get($nudges, x-small) + $sp-unit;
     }
 
     tr {