vanilla-framework 4.6.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,23 +57,22 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.27.6",
+    "@percy/cli": "1.27.7",
     "@testing-library/cypress": "10.0.1",
-    "autoprefixer": "10.4.16",
-    "cypress": "13.6.2",
+    "autoprefixer": "10.4.17",
+    "cypress": "13.6.4",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.32",
-    "postcss-cli": "10.1.0",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "2.8.8",
-    "sass": "1.69.6",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
+    "prettier": "3.2.4",
+    "sass": "1.70.0",
+    "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"
   }

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_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,14 +183,14 @@
 
   // Select styles
   select {
-    @include vf-icon-chevron;
+    @include vf-icon-chevron-themed;
 
     // stylelint-disable property-no-vendor-prefix
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-position: right $sph--small center;
+    background-position: right calc(map-get($grid-margin-widths, default) / 2) center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: 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_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);
-}