vanilla-framework 4.9.1 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.9.1",
+  "version": "4.11.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -55,25 +55,24 @@
     "!/scss/standalone"
   ],
   "devDependencies": {
-    "@canonical/cookie-policy": "3.5.0",
+    "@canonical/cookie-policy": "3.6.3",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.0",
+    "@percy/cli": "1.28.5",
     "@testing-library/cypress": "10.0.1",
-    "autoprefixer": "10.4.17",
-    "cypress": "13.6.6",
-    "get-site-urls": "3.0.0",
+    "autoprefixer": "10.4.19",
+    "cypress": "13.8.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.35",
+    "postcss": "8.4.38",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
     "prettier": "3.2.5",
-    "sass": "1.71.1",
-    "stylelint": "16.2.1",
+    "sass": "1.77.0",
+    "stylelint": "16.5.0",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
     "svgo": "3.2.0",
-    "yaml": "2.4.0"
+    "yaml": "2.4.2"
   }
 }

package/scss/_base_blockquotes.scss

@@ -4,7 +4,7 @@
 @mixin vf-b-blockquotes {
   // stylelint-disable selector-max-type -- base styles can use type selectors
   blockquote {
-    border-left: 2px solid $color-mid-dark;
+    border-left: 2px solid $colors--theme--border-high-contrast;
     margin-bottom: $spv--x-large;
     margin-left: 0;
     margin-top: 0;

package/scss/_base_button.scss

@@ -77,6 +77,8 @@
     // stylelint-enable selector-max-type
   }
 
+  // FIXME: buttons are using a custom version of success icon that is not themed
+  // this should ideally be replaced with a themed icon that uses text colour
   %vf-button-white-success-icon {
     & .p-icon--success {
       @include vf-icon-success($color-x-light, $color-transparent);

package/scss/_base_code.scss

@@ -1,6 +1,5 @@
 @import 'settings';
 
-$color-pre-bg: rgba($color-x-dark, 0.03);
 $digit-width: 1ch; // measured width of one character in the monospaced font
 $code-sidebar-width: calc($sph--large + (4 * $digit-width)) !default;
 $code-inline-padding: 0.25rem;
@@ -71,13 +70,6 @@ $code-inline-padding: 0.25rem;
     white-space: pre;
   }
 
-  // dark theme
-  [class*='--dark'] code,
-  code.is-dark {
-    background-color: $color-code-background-dark;
-    color: $colors--dark-theme--text-default;
-  }
-
   %leading-linux-prompt-icon {
     &::before {
       @extend %icon;

package/scss/_base_forms-range.scss

@@ -2,7 +2,7 @@
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
   $thumb-size: 1rem;
   $thumb-radius: 50%;
-  $thumb-border: $input-border-thickness solid $color-mid-dark;
+  $thumb-border: $input-border-thickness solid $colors--theme--border-high-contrast;
   $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 
@@ -13,6 +13,7 @@
     -moz-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
+    background-color: $color-transparent;
     border-radius: $track-radius;
     margin: $sp-small 0;
     padding: 0;
@@ -30,7 +31,7 @@
       -moz-appearance: none;
       appearance: none;
       // stylelint-enable property-no-vendor-prefix
-      background: $color-x-light;
+      background: $colors--theme--background-default;
       border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;
@@ -45,19 +46,19 @@
 
     // Firefox
     &::-moz-range-track {
-      background: $color-mid-light;
+      background: $colors--theme--border-default; // default; //mid-light;
       border-radius: $track-radius;
       height: $track-height;
     }
 
     &::-moz-range-progress {
-      background-color: $color-link;
+      background-color: $colors--theme--link-default; //-link;
       border-radius: $track-radius;
       height: $track-height;
     }
 
     &::-moz-range-thumb {
-      background: $color-x-light;
+      background: $colors--theme--background-default; // x-light;
       border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;

package/scss/_base_forms.scss

@@ -13,7 +13,7 @@
   // Default form input element styles
   %vf-input-elements {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus($color-focus, $bar-thickness, true);
+    @include vf-focus($has-validation: true);
     @include vf-animation(#{background-color}, fast);
 
     // stylelint-disable property-no-vendor-prefix
@@ -93,20 +93,15 @@
 
   // Readonly form elements
   %vf-readonly-element {
-    color: $color-mid-light;
+    color: $colors--theme--text-muted;
     cursor: default;
-
-    &:hover,
-    &:active {
-      border-color: $color-mid-dark;
-      outline: none;
-    }
   }
 
   // stylelint-disable selector-max-type -- base styles can use type selectors
   label {
     cursor: pointer;
     display: inline-block;
+    line-height: map-get($line-heights, default-text);
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $text-max-width;

package/scss/_base_icon-definitions.scss

@@ -369,7 +369,7 @@
 }
 
 @mixin vf-icon-get-link($color) {
-  background-image: vf-icon-chevron-url($color);
+  background-image: vf-icon-get-link-url($color);
 }
 
 @mixin vf-icon-get-link-themed {

package/scss/_base_placeholders.scss

@@ -25,11 +25,13 @@
     border: $border;
   }
 
+  // deprecated -- use the theme colour variables
   %vf-bg--light {
     background-color: $color-light;
     color: $colors--light-theme--text-default;
   }
 
+  // deprecated -- use the theme colour variables
   %vf-bg--x-light {
     background-color: $color-x-light;
     color: $colors--light-theme--text-default;

package/scss/_patterns_buttons.scss

@@ -54,18 +54,10 @@
     @extend %vf-button-base;
 
     // Theming
-    @if ($theme-default-p-button == 'dark') {
-      @extend %p-button--brand-dark;
-
-      &.is-light {
-        @extend %p-button--brand-light;
-      }
-    } @else {
-      @extend %p-button--brand-light;
+    @extend %p-button--brand-light;
 
-      &.is-dark {
-        @extend %p-button--brand-dark;
-      }
+    &.is-dark {
+      @extend %p-button--brand-dark;
     }
 
     @extend %vf-button-white-success-icon;

package/scss/_patterns_card.scss

@@ -40,9 +40,10 @@
 
 @mixin vf-p-card-muted {
   .p-card--muted {
-    @extend %vf-bg--light;
     @extend %vf-has-box-shadow;
 
+    background-color: $color-light;
+    color: $colors--light-theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;

package/scss/_patterns_chip.scss

@@ -82,15 +82,13 @@ $chip-border-thickness: 1px;
     border-color: $colors--theme--border-neutral;
   }
 
-  // stylelint-disable-next-line selector-max-type
+  // stylelint-disable selector-max-type -- allow button selector for interactive chips
   button.p-chip {
-    // stylelint-disable-next-line selector-max-type
     &:hover {
       background-color: $colors--theme--background-neutral-hover;
       border-color: $colors--theme--border-neutral;
     }
 
-    // stylelint-disable-next-line selector-max-type
     &[aria-pressed='true'],
     &.is-selected,
     &:active {
@@ -98,6 +96,7 @@ $chip-border-thickness: 1px;
       border-color: $colors--theme--border-neutral;
     }
   }
+  // stylelint-enable selector-max-type
 
   .p-chip .p-chip__dismiss {
     @include vf-button-pattern(
@@ -120,15 +119,13 @@ $chip-border-thickness: 1px;
     border-color: $colors--theme--border-positive;
   }
 
-  // stylelint-disable-next-line selector-max-type
+  // stylelint-disable selector-max-type  -- allow button selector for interactive chips
   button.p-chip--positive {
-    // stylelint-disable-next-line selector-max-type
     &:hover {
       background-color: $colors--theme--background-positive-hover;
       border-color: $colors--theme--border-positive;
     }
 
-    // stylelint-disable-next-line selector-max-type
     &[aria-pressed='true'],
     &.is-selected,
     &:active {
@@ -136,6 +133,7 @@ $chip-border-thickness: 1px;
       border-color: $colors--theme--border-positive;
     }
   }
+  // stylelint-enable selector-max-type
 
   .p-chip--positive .p-chip__dismiss {
     @include vf-button-pattern(
@@ -158,15 +156,13 @@ $chip-border-thickness: 1px;
     border-color: $colors--theme--border-caution;
   }
 
-  // stylelint-disable-next-line selector-max-type
+  // stylelint-disable selector-max-type  -- allow button selector for interactive chips
   button.p-chip--caution {
-    // stylelint-disable-next-line selector-max-type
     &:hover {
       background-color: $colors--theme--background-caution-hover;
       border-color: $colors--theme--border-caution;
     }
 
-    // stylelint-disable-next-line selector-max-type
     &[aria-pressed='true'],
     &.is-selected,
     &:active {
@@ -174,6 +170,7 @@ $chip-border-thickness: 1px;
       border-color: $colors--theme--border-caution;
     }
   }
+  // stylelint-enable selector-max-type
 
   .p-chip--caution .p-chip__dismiss {
     @include vf-button-pattern(
@@ -196,15 +193,13 @@ $chip-border-thickness: 1px;
     border-color: $colors--theme--border-negative;
   }
 
-  // stylelint-disable-next-line selector-max-type
+  // stylelint-disable selector-max-type  -- allow button selector for interactive chips
   button.p-chip--negative {
-    // stylelint-disable-next-line selector-max-type
     &:hover {
       background-color: $colors--theme--background-negative-hover;
       border-color: $colors--theme--border-negative;
     }
 
-    // stylelint-disable-next-line selector-max-type
     &[aria-pressed='true'],
     &.is-selected,
     &:active {
@@ -212,6 +207,7 @@ $chip-border-thickness: 1px;
       border-color: $colors--theme--border-negative;
     }
   }
+  // stylelint-enable selector-max-type
 
   .p-chip--negative .p-chip__dismiss {
     @include vf-button-pattern(
@@ -234,15 +230,13 @@ $chip-border-thickness: 1px;
     border-color: $colors--theme--border-information;
   }
 
-  // stylelint-disable-next-line selector-max-type
+  // stylelint-disable selector-max-type  -- allow button selector for interactive chips
   button.p-chip--information {
-    // stylelint-disable-next-line selector-max-type
     &:hover {
       background-color: $colors--theme--background-information-hover;
       border-color: $colors--theme--border-information;
     }
 
-    // stylelint-disable-next-line selector-max-type
     &[aria-pressed='true'],
     &.is-selected,
     &:active {
@@ -250,6 +244,7 @@ $chip-border-thickness: 1px;
       border-color: $colors--theme--border-information;
     }
   }
+  // stylelint-enable selector-max-type
 
   .p-chip--information .p-chip__dismiss {
     @include vf-button-pattern(

package/scss/_patterns_equal-height-row.scss

@@ -0,0 +1,107 @@
+@import 'settings';
+
+@mixin vf-p-equal-height-row {
+  .p-equal-height-row {
+    @extend %vf-row;
+    position: relative;
+
+    .p-equal-height-row__col {
+      // smaller screens each column will have border top by default
+      border-top-color: $colors--theme--border-low-contrast;
+      border-top-style: solid;
+      border-top-width: 1px;
+      display: grid;
+      grid-column: span $grid-columns-small;
+      grid-row: span 4;
+      grid-template-rows: subgrid;
+      margin-bottom: $spv--small;
+      margin-top: -1px;
+      position: relative;
+
+      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
+        grid-column: span $grid-columns-medium;
+        grid-template-columns: subgrid;
+
+        // for medium screen, each column item will take half of the available cols from the parent grid
+        .p-equal-height-row__item {
+          grid-column: span calc($grid-columns-medium / 2);
+        }
+
+        // for medium screen, position the first column item on the left of the grid
+        .p-equal-height-row__item:first-child {
+          grid-row: span 100; // this needs to be sufficiently large so remaining column items won't get stretched
+        }
+      }
+
+      @media screen and (width >= $breakpoint-large) {
+        border: none;
+        grid-column: span calc($grid-columns / 4);
+        margin-bottom: 0;
+      }
+    }
+
+    // DIVIDERS
+
+    // For each row or column grid we only have access to two pseudo elements
+    // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
+    // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
+    &.has-divider-1::before,
+    &.has-divider-2::after,
+    &.has-divider-3:not(.has-divider-1)::before,
+    &.has-divider-3:not(.has-divider-2)::after {
+      // row level dividers are not visible on smaller screen sizes
+      @extend %vf-pseudo-border;
+      background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
+      display: none;
+    }
+
+    @media screen and (width >= $breakpoint-large) {
+      &.has-divider-1::before,
+      &.has-divider-2::after,
+      &.has-divider-3:not(.has-divider-1)::before,
+      &.has-divider-3:not(.has-divider-2)::after {
+        display: block;
+        grid-column-end: span 12;
+        grid-column-start: 1;
+        margin: auto;
+      }
+
+      &.has-divider-1::before {
+        grid-row: 2;
+      }
+
+      &.has-divider-2::after {
+        grid-row: 3;
+      }
+
+      // when 3rd-divider is present and 1st-divider is not present
+      &.has-divider-3:not(.has-divider-1)::before,
+      // when 3rd-divider is present and 2nd-divider is not present
+      &.has-divider-3:not(.has-divider-2)::after,
+      // when only 3rd-divider is present
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
+        grid-row: 4;
+      }
+
+      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
+        display: none;
+      }
+    }
+  }
+
+  // support for 25-75 split on large screen size for this pattern
+  .row--25-75-on-large > .col,
+  .row > .col-9 {
+    & .p-equal-height-row {
+      grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));
+
+      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
+        grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
+      }
+
+      @media screen and (width >= $breakpoint-large) {
+        grid-template-columns: repeat(9, minmax(0, 1fr));
+      }
+    }
+  }
+}