vanilla-framework 4.0.0-alpha.1 → 4.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -59,16 +59,16 @@
     "@canonical/latest-news": "1.4.1",
     "@percy/script": "1.1.0",
     "@testing-library/cypress": "9.0.0",
-    "autoprefixer": "10.4.13",
-    "cypress": "12.7.0",
+    "autoprefixer": "10.4.14",
+    "cypress": "12.11.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.21",
+    "postcss": "8.4.23",
     "postcss-cli": "9.1.0",
     "postcss-scss": "4.0.6",
-    "prettier": "2.8.4",
-    "sass": "1.58.3",
+    "prettier": "2.8.8",
+    "sass": "1.62.1",
     "stylelint": "14.16.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",

package/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;
+  }
 }

package/scss/_base_forms.scss

@@ -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

package/scss/_patterns_search-box.scss

@@ -99,23 +99,38 @@
       }
     }
   }
+
+  .is-paper .p-search-box {
+    .p-search-box__input {
+      @include vf-search-box-paper-theme;
+    }
+  }
 }
 
-@mixin vf-search-box-theme($color-search-box-background, $color-search-box-border, $color-search-box-text) {
+@mixin vf-search-box-theme(
+  $color-search-box-background,
+  $color-search-box-background-hover,
+  $color-search-box-background-active,
+  $color-search-box-border,
+  $color-search-box-text
+) {
   //XXX: This should inherit from input color theming. Once that becomes available, delete this.
   background-color: $color-search-box-background;
   border-color: $color-search-box-border;
   color: $color-search-box-text;
 
+  &:hover,
+  &:-webkit-autofill:hover {
+    background-color: $color-search-box-background-hover !important;
+  }
+
   &:active,
   &:focus,
-  &:hover,
   &:-internal-autofill-selected,
   &:-webkit-autofill,
-  &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
     // XXX: remove important once the button {} selector is refactored to use themeing. At the moment, it trumps these.
-    background-color: $color-search-box-background !important;
+    background-color: $color-search-box-background-active !important;
     border-color: $color-search-box-border !important;
   }
 }
@@ -123,6 +138,8 @@
 @mixin vf-search-box-light-theme {
   @include vf-search-box-theme(
     $color-search-box-background: $colors--light-theme--background-inputs,
+    $color-search-box-background-hover: $colors--light-theme--background-hover,
+    $color-search-box-background-active: $colors--light-theme--background-active,
     $color-search-box-border: $colors--light-theme--border-high-contrast,
     $color-search-box-text: $colors--light-theme--text-default
   );
@@ -131,6 +148,8 @@
 @mixin vf-search-box-dark-theme {
   @include vf-search-box-theme(
     $color-search-box-background: lighten($colors--dark-theme--background-default, 10%),
+    $color-search-box-background-hover: $colors--dark-theme--background-hover,
+    $color-search-box-background-active: $colors--dark-theme--background-active,
     $color-search-box-border: $color-x-light,
     $color-search-box-text: $colors--dark-theme--text-default
   );
@@ -139,3 +158,17 @@
     color: $colors--dark-theme--text-default;
   }
 }
+
+@mixin vf-search-box-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-search-box-theme(
+    $color-search-box-background: $colors--paper-theme--background-inputs,
+    $color-search-box-background-hover: $colors--paper-theme--background-hover,
+    $color-search-box-background-active: $colors--paper-theme--background-active,
+    $color-search-box-border: $colors--light-theme--border-high-contrast,
+    $color-search-box-text: $colors--light-theme--text-default
+  );
+}

package/scss/_patterns_strip.scss

@@ -24,19 +24,26 @@
     @extend %vf-strip;
 
     background-color: transparent;
+  }
 
-    &--light {
-      @extend %vf-strip;
+  .p-strip--light {
+    @extend %vf-strip;
 
-      background-color: $color-light;
-    }
+    background-color: $color-light;
+  }
+
+  .p-strip--dark {
+    @extend %vf-strip;
 
-    &--dark {
-      @extend %vf-strip;
+    background-color: $color-dark;
+    color: $color-light;
+  }
 
-      background-color: $color-dark;
-      color: $color-light;
-    }
+  .p-strip--white {
+    @extend %vf-strip;
+
+    background-color: $color-x-light;
+    color: $colors--light-theme--text-default;
   }
 }
 

package/scss/_settings_colors.scss

@@ -18,6 +18,8 @@ $color-caution: #f99b11 !default;
 $color-positive: #0e8420 !default;
 $color-information: #24598f !default;
 
+$color-paper: #f3f3f3 !default;
+
 // for dark themes
 $color-negative-dark: #a11223 !default;
 $color-positive-dark: #008013 !default;
@@ -196,6 +198,11 @@ $colors-dark-theme--tinted-borders: (
   information: hsl(210deg 80% 65%),
 );
 
+// Paper theme (work in progress)
+$colors--paper-theme--background-inputs: rgba($color-x-dark, $input-background-opacity-amount) !default;
+$colors--paper-theme--background-active: rgba($color-x-dark, $active-background-opacity-amount) !default;
+$colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
+
 // Branding colors
 $color-brand: #333 !default;
 $color-brand-dark: $color-brand !default;