vanilla-framework 4.0.0 → 4.2.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",
+  "version": "4.2.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,21 +55,21 @@
     "!/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",
+    "@percy/cli": "1.26.2",
     "@testing-library/cypress": "9.0.0",
     "autoprefixer": "10.4.14",
-    "cypress": "12.13.0",
+    "cypress": "12.17.2",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.24",
+    "postcss": "8.4.27",
     "postcss-cli": "10.1.0",
     "postcss-scss": "4.0.6",
     "prettier": "2.8.8",
-    "sass": "1.62.1",
-    "stylelint": "14.16.1",
+    "sass": "1.64.2",
+    "stylelint": "15.10.2",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_base_forms.scss

@@ -68,22 +68,29 @@
       }
     }
 
-    // adjust input background color for paper theme
+    // Theming
+    @if ($theme-default-forms == 'dark') {
+      @include vf-input-dark-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;
+      &.is-light {
+        @include vf-input-light-theme;
+      }
+
+      .is-paper &,
+      &.is-paper {
+        @include vf-input-paper-theme;
+      }
+    } @else {
+      @include vf-input-light-theme;
 
-      &:hover {
-        background-color: $colors--paper-theme--background-hover;
+      .is-dark &,
+      &.is-dark {
+        @include vf-input-dark-theme;
       }
 
-      &:active,
-      &:focus {
-        background-color: $colors--paper-theme--background-active;
+      .is-paper &,
+      &.is-paper {
+        @include vf-input-paper-theme;
       }
     }
   }
@@ -193,12 +200,10 @@
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-color: $colors--light-theme--background-hover;
     background-position: right $sph--small center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
-    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;
@@ -208,10 +213,6 @@
       cursor: pointer;
     }
 
-    option {
-      background-color: white;
-    }
-
     &[multiple],
     &[size] {
       background-image: none;
@@ -219,7 +220,6 @@
       height: auto;
 
       option {
-        background-color: $colors--light-theme--background-hover;
         font-weight: $font-weight-regular-text;
         line-height: calc($sp-unit * 2 - 2px);
         padding: $spv--x-small 0;
@@ -247,3 +247,74 @@
   }
   // stylelint-enable selector-max-type
 }
+
+@mixin vf-input-theme($color-background-default, $color-background-hover, $color-background-active, $color-background-option, $color-border, $color-text, $color-text-placeholder) {
+  background-color: $color-background-default;
+  border-color: $color-border;
+  color: $color-text;
+
+  &:hover {
+    background-color: $color-background-hover;
+  }
+
+  &:active,
+  &:focus {
+    background-color: $color-background-active;
+  }
+
+  // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
+  option,
+  option:checked {
+    background-color: $color-background-option;
+    color: $color-text;
+  }
+
+  // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
+  option:checked:not(:disabled) {
+    background-color: $color-background-active;
+  }
+
+  &::placeholder {
+    color: $color-text-placeholder;
+  }
+}
+
+@mixin vf-input-light-theme {
+  @include vf-input-theme(
+    $color-background-default: $colors--light-theme--background-inputs,
+    $color-background-hover: $colors--light-theme--background-hover,
+    $color-background-active: $colors--light-theme--background-active,
+    $color-background-option: $colors--light-theme--background-alt,
+    $color-border: $colors--light-theme--text-default,
+    $color-text: $colors--light-theme--text-default,
+    $color-text-placeholder: $colors--light-theme--text-muted
+  );
+}
+
+@mixin vf-input-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.
+  @include vf-input-theme(
+    $color-background-default: $colors--paper-theme--background-inputs,
+    $color-background-hover: $colors--paper-theme--background-hover,
+    $color-background-active: $colors--paper-theme--background-active,
+    $color-background-option: $colors--light-theme--background-alt,
+    $color-border: $colors--light-theme--text-default,
+    $color-text: $colors--light-theme--text-default,
+    $color-text-placeholder: $colors--light-theme--text-muted
+  );
+}
+
+@mixin vf-input-dark-theme {
+  @include vf-input-theme(
+    $color-background-default: $colors--dark-theme--background-inputs,
+    $color-background-hover: $colors--dark-theme--background-hover,
+    $color-background-active: $colors--dark-theme--background-active,
+    $color-background-option: $colors--dark-theme--background-alt,
+    $color-border: $colors--dark-theme--border-high-contrast,
+    $color-text: $colors--dark-theme--text-default,
+    $color-text-placeholder: $colors--dark-theme--text-muted
+  );
+}

package/scss/_base_icon-definitions.scss

@@ -38,12 +38,12 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6v6a1.5 1.5 0 001.356 1.493L6 13.5h4a1.5 1.5 0 001.493-1.356L11.5 12V6H13v6a3 3 0 01-3 3H6a3 3 0 01-3-3V6h1.5zm3 0v5.994H6V6h1.5zm2.498 0v5.994h-1.5V6h1.5zM8.5 0A2.5 2.5 0 0111 2.5V3h3v1.5H2V3h3v-.5A2.5 2.5 0 017.5 0h1zm0 1.5h-1a1 1 0 00-.993.883L6.5 2.5V3h3v-.5a1 1 0 00-.883-.993L8.5 1.5z' fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-error($color: $color-negative) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' fill='#{vf-url-friendly-color($color)}' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E");
+@mixin vf-icon-error($color: $color-negative, $color-symbol: $color-x-light) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='#{vf-url-friendly-color($color)}' stroke-width='1.5' fill='#{vf-url-friendly-color($color)}' cx='8' cy='8' r='6.25'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' fill-rule='nonzero' d='M10.282 4.638l1.06 1.06L9.05 7.99l2.293 2.292-1.06 1.06L7.99 9.05 5.7 11.343l-1.06-1.06 2.29-2.293L4.64 5.7l1.06-1.06 2.291 2.29z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-warning($color: $color-caution) {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='#{vf-url-friendly-color($color)}'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");
+@mixin vf-icon-warning($color: $color-caution, $color-symbol: $color-x-light) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M9.34 1.2l5.842 11.627A1.5 1.5 0 0113.842 15H2.158a1.5 1.5 0 01-1.34-2.173L6.66 1.2a1.5 1.5 0 012.68 0z' fill='#{vf-url-friendly-color($color)}'/%3E%3Cpath d='M8.5 11a.5.5 0 01.492.41L9 11.5v1a.5.5 0 01-.41.492L8.5 13h-1a.5.5 0 01-.492-.41L7 12.5v-1a.5.5 0 01.41-.492L7.5 11h1zM9 5v4.5H7V5h2z' fill='#{vf-url-friendly-color($color-symbol)}'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-external-link($color) {
@@ -70,8 +70,8 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.964 1a5.964 5.964 0 014.709 9.623l4.303 4.305-1.06 1.06-4.306-4.305A5.964 5.964 0 116.963 1zm0 1.5a4.464 4.464 0 100 8.927 4.464 4.464 0 000-8.927z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-success($bg-color: $color-positive, $fg-color: $color-x-light) {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($bg-color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($fg-color)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");
+@mixin vf-icon-success($color: $color-positive, $color-symbol: $color-x-light) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-share($color) {

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,18 +7,18 @@
     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;

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_form-help-text.scss

@@ -11,4 +11,32 @@
       margin-left: $sph--large + $form-tick-box-size;
     }
   }
+
+  @if ($theme-default-forms == 'dark') {
+    .p-form-help-text {
+      @include vf-form-help-text-dark-theme;
+    }
+  } @else {
+    .p-form-help-text {
+      @include vf-form-help-text-light-theme;
+    }
+  }
+
+  .is-dark .p-form-help-text,
+  .p-form-help-text.is-dark {
+    @include vf-form-help-text-dark-theme;
+  }
+
+  .is-light .p-form-help-text,
+  .p-form-help-text.is-light {
+    @include vf-form-help-text-light-theme;
+  }
+}
+
+@mixin vf-form-help-text-dark-theme {
+  color: $colors--dark-theme--text-muted;
+}
+
+@mixin vf-form-help-text-light-theme {
+  color: $colors--light-theme--text-muted;
 }

package/scss/_patterns_form-validation.scss

@@ -13,71 +13,266 @@
 
   .p-form-validation__message {
     @extend %small-text;
+    @extend %vf-validation-wrapper;
 
     margin-top: -$sp-unit;
   }
 
-  .is-success {
+  // Theming
+  @if ($theme-default-forms == 'dark') {
     .p-form-validation__input {
-      background-color: $color-positive-background;
-      border-bottom-color: $color-positive;
+      .is-success & {
+        @include vf-form-validation-input-success-dark-theme;
+      }
 
-      &:hover {
-        background-color: $color-positive-background--hover;
+      .is-caution & {
+        @include vf-form-validation-input-caution-dark-theme;
       }
 
-      &:focus {
-        background-color: $color-positive-background--focus;
+      .is-error & {
+        @include vf-form-validation-input-error-dark-theme;
       }
     }
 
     .p-form-validation__message {
-      @extend %vf-validation-wrapper;
-      @include vf-icon-success($color-positive);
+      .is-success & {
+        @include vf-form-validation-message-success-dark-theme;
+      }
 
-      color: $color-positive;
-    }
-  }
+      .is-caution & {
+        @include vf-form-validation-message-caution-dark-theme;
+      }
 
-  .is-caution {
+      .is-error & {
+        @include vf-form-validation-message-error-dark-theme;
+      }
+    }
+  } @else {
     .p-form-validation__input {
-      background-color: $color-caution-background;
-      border-bottom-color: $color-caution;
+      .is-success & {
+        @include vf-form-validation-input-success-light-theme;
+      }
 
-      &:hover {
-        background-color: $color-caution-background--hover;
+      .is-caution & {
+        @include vf-form-validation-input-caution-light-theme;
       }
 
-      &:focus {
-        background-color: $color-caution-background--focus;
+      .is-error & {
+        @include vf-form-validation-input-error-light-theme;
       }
     }
 
     .p-form-validation__message {
-      @extend %vf-validation-wrapper;
-      @include vf-icon-warning($color-caution);
+      .is-success & {
+        @include vf-form-validation-message-success-light-theme;
+      }
+
+      .is-caution & {
+        @include vf-form-validation-message-caution-light-theme;
+      }
+
+      .is-error & {
+        @include vf-form-validation-message-error-light-theme;
+      }
     }
   }
 
-  .is-error {
+  // when is-dark/is-light is set on root p-form-validation element or its parent
+  .is-dark .is-success,
+  .is-success.is-dark {
     .p-form-validation__input {
-      background-color: $color-negative-background;
-      border-bottom-color: $color-negative;
+      @include vf-form-validation-input-success-dark-theme;
+    }
+    .p-form-validation__message {
+      @include vf-form-validation-message-success-dark-theme;
+    }
+  }
 
-      &:hover {
-        background-color: $color-negative-background--hover;
-      }
+  .is-success.is-light {
+    .p-form-validation__input {
+      @include vf-form-validation-input-success-light-theme;
+    }
+    .p-form-validation__message {
+      @include vf-form-validation-message-success-light-theme;
+    }
+  }
 
-      &:focus {
-        background-color: $color-negative-background--focus;
-      }
+  .is-dark .is-caution,
+  .is-caution.is-dark {
+    .p-form-validation__input {
+      @include vf-form-validation-input-caution-dark-theme;
+    }
+    .p-form-validation__message {
+      @include vf-form-validation-message-caution-dark-theme;
+    }
+  }
+
+  .is-caution.is-light {
+    .p-form-validation__input {
+      @include vf-form-validation-input-caution-light-theme;
+    }
+    .p-form-validation__message {
+      @include vf-form-validation-message-caution-light-theme;
     }
+  }
 
+  .is-dark .is-error,
+  .is-error.is-dark {
+    .p-form-validation__input {
+      @include vf-form-validation-input-error-dark-theme;
+    }
     .p-form-validation__message {
-      @extend %vf-validation-wrapper;
-      @include vf-icon-error($color-negative);
+      @include vf-form-validation-message-error-dark-theme;
+    }
+  }
+
+  .is-error.is-light {
+    .p-form-validation__input {
+      @include vf-form-validation-input-error-light-theme;
+    }
+    .p-form-validation__message {
+      @include vf-form-validation-message-error-light-theme;
+    }
+  }
 
-      color: $color-negative;
+  // when is-dark/is-light is set on p-form-validation__input element
+  .is-success .p-form-validation__input {
+    .is-dark &,
+    &.is-dark {
+      @include vf-form-validation-input-success-dark-theme;
     }
+
+    &.is-light {
+      @include vf-form-validation-input-success-light-theme;
+    }
+  }
+
+  .is-caution .p-form-validation__input {
+    .is-dark &,
+    &.is-dark {
+      @include vf-form-validation-input-caution-dark-theme;
+    }
+
+    &.is-light {
+      @include vf-form-validation-input-caution-light-theme;
+    }
+  }
+
+  .is-error .p-form-validation__input {
+    .is-dark &,
+    &.is-dark {
+      @include vf-form-validation-input-error-dark-theme;
+    }
+
+    &.is-light {
+      @include vf-form-validation-input-error-light-theme;
+    }
+  }
+}
+
+@mixin vf-form-validation-input-state-theme($color-background-default, $color-background-hover, $color-background-active, $color-border, $color-text) {
+  background-color: $color-background-default;
+  border-bottom-color: $color-border;
+
+  &:hover {
+    background-color: $color-background-hover;
   }
+
+  &:focus {
+    background-color: $color-background-active;
+  }
+}
+
+@mixin vf-form-validation-input-success-dark-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'default'),
+    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'hover'),
+    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'positive', 'active'),
+    $color-border: map-get($colors-dark-theme--tinted-borders, 'positive'),
+    $color-text: map-get($colors-dark-theme--tinted-borders, 'positive')
+  );
+}
+
+@mixin vf-form-validation-input-caution-dark-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'default'),
+    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'hover'),
+    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'caution', 'active'),
+    $color-border: map-get($colors-dark-theme--tinted-borders, 'caution'),
+    $color-text: map-get($colors-dark-theme--tinted-borders, 'caution')
+  );
+}
+
+@mixin vf-form-validation-input-error-dark-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'default'),
+    $color-background-hover: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'hover'),
+    $color-background-active: map-get($colors-dark-theme--tinted-backgrounds, 'negative', 'active'),
+    $color-border: map-get($colors-dark-theme--tinted-borders, 'negative'),
+    $color-text: map-get($colors-dark-theme--tinted-borders, 'negative')
+  );
+}
+
+@mixin vf-form-validation-input-success-light-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: $color-positive-background,
+    $color-background-hover: $color-positive-background--hover,
+    $color-background-active: $color-positive-background--focus,
+    $color-border: $color-positive,
+    $color-text: $color-positive
+  );
+}
+
+@mixin vf-form-validation-input-caution-light-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: $color-caution-background,
+    $color-background-hover: $color-caution-background--hover,
+    $color-background-active: $color-caution-background--focus,
+    $color-border: $color-caution,
+    $color-text: $color-caution
+  );
+}
+
+@mixin vf-form-validation-input-error-light-theme {
+  @include vf-form-validation-input-state-theme(
+    $color-background-default: $color-negative-background,
+    $color-background-hover: $color-negative-background--hover,
+    $color-background-active: $color-negative-background--focus,
+    $color-border: $color-negative,
+    $color-text: $color-negative
+  );
+}
+
+@mixin vf-form-validation-message-state-theme($color-text) {
+  color: $color-text;
+}
+
+@mixin vf-form-validation-message-success-dark-theme {
+  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'positive'));
+  @include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, 'positive'), $color-symbol: $colors--dark-theme--background-default);
+}
+
+@mixin vf-form-validation-message-caution-dark-theme {
+  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'caution'));
+  @include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, 'caution'), $color-symbol: $colors--dark-theme--background-default);
+}
+
+@mixin vf-form-validation-message-error-dark-theme {
+  @include vf-form-validation-message-state-theme($color-text: map-get($colors-dark-theme--tinted-borders, 'negative'));
+  @include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, 'negative'), $color-symbol: $colors--dark-theme--background-default);
+}
+
+@mixin vf-form-validation-message-success-light-theme {
+  @include vf-form-validation-message-state-theme($color-text: $color-positive);
+  @include vf-icon-success($color-positive);
+}
+
+@mixin vf-form-validation-message-caution-light-theme {
+  @include vf-form-validation-message-state-theme($color-text: $colors--light-theme--text-default);
+  @include vf-icon-warning($color-caution);
+}
+
+@mixin vf-form-validation-message-error-light-theme {
+  @include vf-form-validation-message-state-theme($color-text: $color-negative);
+  @include vf-icon-error($color-negative);
 }

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_logo-section.scss

@@ -1,152 +1,90 @@
-@use 'sass:math';
-
-@mixin vf-p-set-logo-section-item-width($breakpoint: small, $column-span: 1) {
-  // This mixin calculates the width of an individual logo.
-
-  $grid-column-count: $grid-columns-small;
-  $grid-column-prefix: $grid-small-col-prefix;
-  $gutter: map-get($grid-gutter-widths, small);
-  // medium and small use the same breakpoint, but one uses a max-width, the other a min-width;
-  // so, we need to specify which one to use
-  $media-query-keyword: max-width;
-  $media-query-width: $threshold-4-6-col;
-  // how many grid columns should a logo span
-  $logo-column-span: 1;
-
-  @if $breakpoint == medium {
-    $grid-column-count: $grid-columns-medium;
-    $grid-column-prefix: $grid-medium-col-prefix;
-    $gutter: map-get($grid-gutter-widths, default);
-    $media-query-keyword: min-width;
-    $media-query-width: $threshold-4-6-col;
-    $logo-column-span: 1;
-  } @else if $breakpoint == large {
-    $grid-column-count: $grid-columns;
-    $grid-column-prefix: $grid-large-col-prefix;
-    $gutter: map-get($grid-gutter-widths, default);
-    $media-query-keyword: min-width;
-    $media-query-width: $threshold-6-12-col;
-    $logo-column-span: $column-span;
+@mixin vf-p-logo-section {
+  // deprecated, to be removed in future version
+  .p-logo-section__title {
+    @extend %small-caps-text;
   }
 
-  @media ($media-query-keyword: #{$media-query-width}) {
-    // First set the width assuming the parent spans the entire grid. This is the case in 4 scenarios:
-    // 1. The logo section is nested inside a container that spans the entire grid, (depending on breakpoint that can be a .col-4, .col-6, or .col-12 class), which itself sits inside a .row
-    // 2. The logo section is nested inside a .u-fixed-width container
-    // 3. The logo section does not have a parent that sets a fixed width grid. This is not a recommended use case, but we ensure things still work
-
-    // The logic of these calculations is explained further down, in the @for loop
-    $gutters-total-width: $grid-column-count * $gutter;
-    $percentage-width-of-one-col: math.div(100%, $grid-column-count);
-    $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
-    $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
-    $rem-contribution: $logo-column-span * math.div($gutters-total-width, $grid-column-count) - $gutter-width-inside-logo;
-    @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
-
-    // Looping in reverse to ensure nested column rules end up further down in the generated css file, thus having higher specificity.
-    // E.g. if a col-4 is nested inside col-8, the col-8 rule should be written above the col-4 rule in the css file, to ensure the col-4 styles take precedence
-    // We start at one less than the column count, as this case has been handled above
-    @for $column-count from $grid-column-count - 1 through 1 {
-      // The number of gutters is equal to the number of columns. If we switch to usnig flex gap instead of margins, this should be updated to number of columns - 1.
-      // $gutters-total-width calculates the total width of all gutters
-      $gutters-total-width: $column-count * $gutter;
-      @if $column-count == 1 {
-        // if the available number of columns of the parent container is less than the desired number of columns the logo should span, we clamp that desired number ($logo-column-span) to what's available:
-        $logo-column-span: min($logo-column-span, $column-count);
+  $logo-section-item-size: 8rem; // height of the logos on large screens
+  $logo-section-item-size-medium: 6rem; // height of the logos on medium screens
+  $logo-section-item-size-small: 4rem; // height of the logos on small screens
+
+  $logo-section-offset: 1rem; // offset by which rows are pulled closer together
+  $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens
+  $logo-section-offset-small: 0.5rem; // height of the logos on small screens
+
+  $logo-section-item-gap: 3rem;
+  $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap);
+
+  .p-logo-section,
+  .p-logo-section--dense {
+    .p-logo-section__item {
+      display: inline-block;
+      margin: 0;
+      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
+      margin-right: $logo-section-item-gap;
+      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
+
+      @media (min-width: $breakpoint-small) {
+        margin-bottom: calc(-1 * $logo-section-offset-medium);
+        margin-top: calc(-1 * $logo-section-offset-medium);
       }
 
-      // The logos are sized so that, depending on breakpoint, they span either one, or two columns of the grid.
-      // When spanning more than one column, we need to account for the gutters between the columns.
-
-      // calc() doesn't allow dividing a mixture of different units, so the calculation
-      // (100% - $gutters-total-width) / $column-count needs to be broken down into two separate divisions:
-      // 100% / $column-count - $gutters-total-width / $column-count
-      // Thus the calculation is split into 2 parts, which are then used in the final calc() function:
-
-      // calculate the width of a single column by dividing the entire width by the number of columns it represents:
-      $percentage-width-of-one-col: math.div(100%, $column-count);
-
-      // multiply the width of one column by the number of columns the logo needs to span
-      $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
+      @media (min-width: $breakpoint-large) {
+        margin-bottom: calc(-1 * $logo-section-offset);
+        margin-top: calc(-1 * $logo-section-offset);
+      }
+    }
 
-      // calculate the number of gutters the logo spans
-      $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
+    .p-logo-section__logo {
+      display: block;
+      height: $logo-section-item-size-small;
+      max-width: none; // prevent logos from squishing on small screens
+      width: auto;
 
-      // add the width of gutters spanned by the logo, subtract the $gutters-total-width / $column-count;
-      // the signs here are reversed because the variable is subtracted. This avoids having + and - in the final css, e.g.: "+ -.75rem"
-      $rem-contribution: $logo-column-span * math.div($gutters-total-width, $column-count) - $gutter-width-inside-logo;
+      @media (min-width: $breakpoint-small) {
+        height: $logo-section-item-size-medium;
+      }
 
-      .#{$grid-column-prefix}#{$column-count} & {
-        @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
+      @media (min-width: $breakpoint-large) {
+        height: $logo-section-item-size;
       }
     }
-  }
-}
 
-@mixin vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution) {
-  @if $rem-contribution == 0 {
-    width: $percentage-contribution;
-  } @else {
-    width: calc($percentage-contribution - $rem-contribution);
-  }
-}
+    .p-logo-section__items {
+      line-height: 0; // prevent space between rows of inline logos
 
-@mixin vf-p-logo-section {
-  // The logo section pattern needs to align logos to the grid when they are an even number, and center them (while maintaining the same logo width) when the number of logos on a line is odd.
-  // This means we can't use css grid for this, instead we need to replicate its behavior for even numbers of logos, and center the odd ones.
-  .p-logo-section__title {
-    @extend %small-caps-text;
-  }
+      // compensate for the negative margin on the logos
+      padding-bottom: $logo-section-offset-small;
+      padding-top: $logo-section-offset-small;
 
-  $margin-small: map-get($grid-gutter-widths, small);
-  $margin-medium: map-get($grid-gutter-widths, default);
-  $margin-large: map-get($grid-gutter-widths, default);
-
-  .p-logo-section__items {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-bottom: $spv--x-large;
-    // negates the margin of logos that sit in the first column
-    margin-left: -#{$margin-small};
-    width: calc(100% + $margin-small);
-
-    @media (min-width: $threshold-4-6-col) {
-      margin-left: -$margin-medium;
-      width: calc(100% + $margin-medium);
-    }
+      @media (min-width: $breakpoint-small) {
+        padding-bottom: $logo-section-offset-medium;
+        padding-top: $logo-section-offset-medium;
+      }
 
-    @media (min-width: $threshold-6-12-col) {
-      margin-left: -$margin-large;
-      width: calc(100% + $margin-large);
+      @media (min-width: $breakpoint-large) {
+        padding-bottom: $logo-section-offset;
+        padding-top: $logo-section-offset;
+      }
     }
   }
 
-  .p-logo-section__item {
-    align-items: center;
-    display: flex;
-    flex: 0 1 auto;
-    margin-left: $margin-small;
-
-    @media (min-width: $threshold-4-6-col) {
-      margin-left: $margin-medium;
+  .p-logo-section--dense {
+    .p-logo-section__item {
+      display: inline-block;
+      margin: 0;
+      margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up
+      margin-right: $logo-section-item-gap-dense;
+      margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down
     }
 
-    @media (min-width: $threshold-6-12-col) {
-      margin-left: $margin-large;
+    .p-logo-section__logo {
+      height: $logo-section-item-size-small;
     }
 
-    @include vf-p-set-logo-section-item-width($breakpoint: small);
-    @include vf-p-set-logo-section-item-width($breakpoint: medium);
-    @include vf-p-set-logo-section-item-width($breakpoint: large, $column-span: 2);
-
-    .p-logo-section--dense & {
-      @include vf-p-set-logo-section-item-width($breakpoint: large);
+    .p-logo-section__items {
+      padding-bottom: $logo-section-offset-small;
+      padding-top: $logo-section-offset-small;
     }
   }
-
-  .p-logo-section__logo {
-    height: auto;
-    width: 100%;
-  }
 }

package/scss/_patterns_navigation.scss

@@ -588,7 +588,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       position: absolute;
       right: map-get($grid-margin-widths, small);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--large + map-get($nudges, x-small));
+      top: $spv--large;
       transform: rotate(-90deg);
       width: map-get($icon-sizes, default);
 
@@ -598,6 +598,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
       @media (min-width: $breakpoint-navigation-threshold) {
         right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        top: calc($spv--large + map-get($nudges, x-small));
         transform: rotate(0deg);
       }
     }

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

@@ -157,6 +157,7 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #2d2d2d !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;
 $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $hover-background-opacity-amount) !default;
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
@@ -195,9 +196,9 @@ $colors-dark-theme--tinted-backgrounds: (
 
 $colors-dark-theme--tinted-borders: (
   neutral: hsl(0deg 0% 65%),
-  positive: hsl(129deg 60% 65%),
-  caution: hsl(27deg 80% 65%),
-  negative: hsl(353deg 80% 70%),
+  positive: #62a36c,
+  caution: #c48831,
+  negative: #d17b85,
   information: hsl(210deg 80% 65%),
 );
 

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;