vanilla-framework 4.7.0 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,23 +57,23 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.27.7",
+    "@percy/cli": "1.28.0",
     "@testing-library/cypress": "10.0.1",
     "autoprefixer": "10.4.17",
-    "cypress": "13.6.4",
+    "cypress": "13.6.6",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.33",
+    "postcss": "8.4.35",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.2.4",
-    "sass": "1.70.0",
+    "prettier": "3.2.5",
+    "sass": "1.71.1",
     "stylelint": "16.2.1",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.0",
-    "svgo": "2.8.0",
-    "yaml": "2.3.4"
+    "svgo": "3.2.0",
+    "yaml": "2.4.0"
   }
 }

package/scss/_base.scss

@@ -1,6 +1,7 @@
 // Base
 @import 'base_placeholders'; //mandatory import
 @import 'base_icon-definitions';
+@import 'base_themes';
 @import 'base_typography';
 @import 'base_blockquotes';
 @import 'base_box-sizing';
@@ -23,6 +24,7 @@
   @include vf-b-reset;
   // Base
   @include vf-b-placeholders; // mandatory include
+  @include vf-b-themes;
   @include vf-base-background;
   @include vf-b-typography;
   @include vf-b-blockquotes;

package/scss/_base_background.scss

@@ -1,11 +1,7 @@
 @mixin vf-base-background {
   // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
   body {
-    background: $color-x-light;
-  }
-
-  // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
-  body.is-paper {
-    background: $color-paper;
+    background: $colors--theme--background-default;
+    color: $colors--theme--text-default;
   }
 }

package/scss/_base_button.scss

@@ -100,15 +100,15 @@
 }
 
 @mixin vf-button-pattern(
-  $button-background-color: $colors--light-theme--background-default,
-  $button-text-color: $colors--light-theme--text-default,
+  $button-background-color: $colors--theme--background-default,
+  $button-text-color: $colors--theme--text-default,
   $button-disabled-background-color: $color-transparent,
-  $button-disabled-border-color: $colors--light-theme--border-high-contrast,
-  $button-border-color: $colors--light-theme--border-high-contrast,
-  $button-hover-background-color: $colors--light-theme--background-hover,
-  $button-hover-border-color: $colors--light-theme--border-high-contrast,
-  $button-active-background-color: $colors--light-theme--background-active,
-  $button-active-border-color: $colors--light-theme--border-high-contrast
+  $button-disabled-border-color: $colors--theme--border-high-contrast,
+  $button-border-color: $colors--theme--border-high-contrast,
+  $button-hover-background-color: $colors--theme--background-hover,
+  $button-hover-border-color: $colors--theme--border-high-contrast,
+  $button-active-background-color: $colors--theme--background-active,
+  $button-active-border-color: $colors--theme--border-high-contrast
 ) {
   background-color: $button-background-color;
   border-color: $button-border-color;

package/scss/_base_code.scss

@@ -25,7 +25,7 @@ $code-inline-padding: 0.25rem;
   code,
   kbd,
   samp {
-    background-color: $color-code-background;
+    background-color: $colors--theme--background-code;
     box-decoration-break: slice;
     color: inherit;
     line-height: map-get($line-heights, default-text) - $code-inline-padding;
@@ -59,8 +59,8 @@ $code-inline-padding: 0.25rem;
   }
 
   pre {
-    background-color: $color-code-background;
-    color: $colors--light-theme--text-default;
+    background-color: $colors--theme--background-code;
+    color: $colors--theme--text-default;
     display: block;
     margin-bottom: $spv--x-large;
     margin-top: 0;
@@ -81,7 +81,7 @@ $code-inline-padding: 0.25rem;
   %leading-linux-prompt-icon {
     &::before {
       @extend %icon;
-      @include vf-icon-linux-prompt($color-mid-dark);
+      @include vf-icon-linux-prompt-themed;
 
       content: '';
       left: $sph--large;
@@ -110,7 +110,7 @@ $code-inline-padding: 0.25rem;
     }
 
     &::before {
-      color: $color-mid-dark;
+      color: $colors--theme--text-muted;
       content: counter(line-numbering);
       counter-increment: line-numbering;
       height: 100%;

package/scss/_base_forms.scss

@@ -21,11 +21,11 @@
     -moz-appearance: textfield;
     appearance: textfield;
     // stylelint-enable property-no-vendor-prefix
-    background-color: $colors--light-theme--background-inputs;
+    background-color: $colors--theme--background-inputs;
     border: 0 solid transparent;
-    border-bottom: $input-border-thickness solid $colors--light-theme--text-default;
+    border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
     border-radius: 0;
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
@@ -38,12 +38,28 @@
     width: 100%;
 
     &:hover {
-      background-color: $colors--light-theme--background-hover;
+      background-color: $colors--theme--background-hover;
     }
 
     &:active,
     &:focus {
-      background-color: $colors--light-theme--background-active;
+      background-color: $colors--theme--background-active;
+    }
+
+    // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
+    option,
+    option:checked {
+      background-color: $colors--theme--background-alt;
+      color: $colors--theme--text-default;
+    }
+
+    // stylelint-disable-next-line selector-max-type -- base styles can use type selectors
+    option:checked:not(:disabled) {
+      background-color: $colors--theme--background-active;
+    }
+
+    &::placeholder {
+      color: $colors--theme--text-muted;
     }
 
     &.is-dense {
@@ -67,32 +83,6 @@
         border: $input-border-thickness solid $color;
       }
     }
-
-    // Theming
-    @if ($theme-default-forms == 'dark') {
-      @include vf-input-dark-theme;
-
-      &.is-light {
-        @include vf-input-light-theme;
-      }
-
-      .is-paper &,
-      &.is-paper {
-        @include vf-input-paper-theme;
-      }
-    } @else {
-      @include vf-input-light-theme;
-
-      .is-dark &,
-      &.is-dark {
-        @include vf-input-dark-theme;
-      }
-
-      .is-paper &,
-      &.is-paper {
-        @include vf-input-paper-theme;
-      }
-    }
   }
 
   // Disabled form elements
@@ -193,7 +183,7 @@
 
   // Select styles
   select {
-    @include vf-icon-chevron;
+    @include vf-icon-chevron-themed;
 
     // stylelint-disable property-no-vendor-prefix
     -moz-appearance: none;
@@ -247,74 +237,3 @@
   }
   // 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_grid-definitions.scss

@@ -23,14 +23,14 @@
     @extend %fixed-width-container--common-properties;
 
     max-width: $grid-max-width;
-  }
-
-  %vf-row {
-    @extend %fixed-width-container;
 
     & & {
       @include vf-b-row-reset;
     }
+  }
+
+  %vf-row {
+    @extend %fixed-width-container;
 
     @supports (display: grid) {
       display: grid;

package/scss/_base_hr.scss

@@ -27,9 +27,14 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   hr {
     @extend %hr;
+    background: $colors--theme--border-default;
 
     margin-bottom: calc($spv--small - 1px);
 
+    &.is-muted {
+      background-color: $colors--theme--border-low-contrast;
+    }
+
     &.u-no-margin--bottom {
       // compensate for hr thickness, to make sure it doesn't drift from baseline grid
       @extend %u-no-margin--bottom--hr;
@@ -39,44 +44,5 @@
       @extend %fixed-width-hr;
     }
   }
-
-  // Theming
-  @if ($theme-default-hr == 'dark') {
-    hr {
-      @include vf-hr-dark-theme;
-    }
-
-    hr.is-light {
-      @include vf-hr-light-theme;
-    }
-  } @else {
-    hr {
-      @include vf-hr-light-theme;
-    }
-
-    hr.is-dark {
-      @include vf-hr-dark-theme;
-    }
-  }
   // stylelint-enable selector-max-type
 }
-
-@mixin vf-hr-theme(
-  // color of the horizontal rule line
-  $color-hr-line-default,
-  $color-hr-line-muted
-) {
-  background: $color-hr-line-default;
-
-  &.is-muted {
-    background-color: $color-hr-line-muted;
-  }
-}
-
-@mixin vf-hr-light-theme {
-  @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($color-hr-line-default: $colors--dark-theme--border-default, $color-hr-line-muted: $colors--dark-theme--border-low-contrast);
-}