vanilla-framework 4.7.0 → 4.9.0

package/scss/_patterns_links.scss

@@ -2,15 +2,15 @@
 
 @mixin vf-p-links {
   .p-link--soft {
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
 
     &:visited {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
       text-decoration: none;
     }
 
     &:hover {
-      color: $color-link;
+      color: $colors--theme--link-default;
     }
 
     &.is-selected {
@@ -18,21 +18,23 @@
     }
   }
 
+  // "inverted" links are meant for undefined dark backgrounds
+  // and they use the default text color
   .p-link--inverted {
-    color: $color-light;
+    color: $colors--theme--text-default;
     font-weight: $font-weight-bold;
 
     &:hover {
-      color: $color-light;
+      color: $colors--theme--text-default;
     }
 
     &:visited {
-      color: darken($color-light, 10%);
+      color: $colors--theme--text-muted;
     }
   }
 
   .p-link--skip {
-    color: $color-link;
+    color: $colors--theme--link-default;
     display: block;
     left: -999px;
     position: absolute;
@@ -54,7 +56,7 @@
     display: flex;
 
     &::before {
-      border-bottom: 1px solid $colors--light-theme--border-default;
+      border-bottom: 1px solid $colors--theme--border-default;
       content: '';
       flex-grow: 1;
       margin: $spv--x-large 0 calc($spv--x-large - 1px) 0;
@@ -62,6 +64,7 @@
 
     &::after {
       @extend %icon;
+      // FIXME: to do when icons are themed
       @include vf-icon-back-to-top($color-mid-dark);
 
       content: '';
@@ -70,7 +73,7 @@
   }
 
   .p-top__link {
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }

package/scss/_patterns_lists.scss

@@ -3,14 +3,24 @@ $list-status-icon-height: $default-icon-size;
 $list-step-bullet-margin: $sph--x-large;
 
 @mixin vf-p-list-placeholders {
+  // container for stepped lists (`ol`)
+  // defines the layout and resets the native browser counter
   %numbered-step-container {
-    counter-reset: li;
+    counter-reset: list-item;
     display: flex;
     flex-direction: column;
     list-style: none;
     padding-left: 0;
   }
 
+  // list item for stepped lists (`li`)
+  // increments the default browser counter
+  %numbered-step-item {
+    counter-increment: list-item;
+  }
+
+  // title for stepped lists
+  // displays the title and step counter
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
@@ -18,8 +28,7 @@ $list-step-bullet-margin: $sph--x-large;
     position: relative;
 
     &::before {
-      content: counter(li) '.';
-      counter-increment: li;
+      content: counter(list-item) '.';
       display: block;
       height: map-get($line-heights, default-text);
       left: 0;
@@ -30,6 +39,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
+  // used with .p-list--nested-counter
   %nested-counter {
     // Counter is named and it will be reset for each "ol" element.
     counter-reset: list-item;
@@ -198,7 +208,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-success-grey($color-mid-dark);
+      @include vf-icon-success-grey-themed;
     }
   }
 
@@ -207,7 +217,7 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       @extend %vf-list-item-state-base;
-      @include vf-icon-error-grey($color-mid-dark);
+      @include vf-icon-error-grey-themed;
     }
   }
 
@@ -256,37 +266,6 @@ $list-step-bullet-margin: $sph--x-large;
       }
     }
   }
-
-  // Theming
-  @if ($theme-default-p-inline-list--middot == 'dark') {
-    .p-inline-list--middot {
-      @include vf-p-inline-list-middot-dark-theme;
-    }
-
-    .p-inline-list--middot.is-light {
-      @include vf-p-inline-list-middot-light-theme;
-    }
-  } @else {
-    .p-inline-list--middot {
-      @include vf-p-inline-list-middot-light-theme;
-    }
-
-    .p-inline-list--middot.is-dark {
-      @include vf-p-inline-list-middot-dark-theme;
-    }
-  }
-}
-
-@mixin vf-p-inline-list-middot-theme($color-list-text) {
-  color: $color-list-text;
-}
-
-@mixin vf-p-inline-list-middot-light-theme {
-  @include vf-p-inline-list-middot-theme($colors--light-theme--text-default);
-}
-
-@mixin vf-p-inline-list-middot-dark-theme {
-  @include vf-p-inline-list-middot-theme($colors--dark-theme--text-default);
 }
 
 @mixin vf-p-inline-list-stretch {
@@ -314,6 +293,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   .p-stepped-list__item {
+    @extend %numbered-step-item;
+
     // override unecessary col-8 class in markup; layout is handled with css below
     float: none;
     margin-left: 0;
@@ -387,24 +368,26 @@ $list-step-bullet-margin: $sph--x-large;
 @mixin vf-p-stepped-list-detailed {
   .p-stepped-list--detailed {
     @extend %numbered-step-container;
-
     margin-left: auto;
 
     @supports (display: grid) {
       .p-stepped-list__content {
-        @media (min-width: $threshold-6-12-col) {
+        @media (min-width: $threshold-4-6-col) {
           grid-column-end: span 6;
           margin-top: 0;
         }
       }
 
       .p-stepped-list__title {
-        grid-column-end: span 6;
-        margin-left: 0;
+        @media (min-width: $threshold-4-6-col) {
+          grid-column-end: span 6;
+          margin-top: 0;
+        }
       }
     }
 
     .p-stepped-list__item {
+      @extend %numbered-step-item;
       @extend %vf-row;
       @include vf-b-row-reset;
 

package/scss/_patterns_media-container.scss

@@ -0,0 +1,5 @@
+@mixin vf-p-media-container {
+  .p-media-container {
+    margin-top: $spv--small;
+  }
+}

package/scss/_patterns_notifications.scss

@@ -76,9 +76,12 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     @extend %vf-is-bordered;
     @extend %vf-bg--x-light;
 
+    background: $colors--theme--background-default;
     background-position: $sph--large $notification-icon-vert-offset;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
+    border-color: $colors--theme--border-default;
+    color: $colors--theme--text-default;
     margin-bottom: $spv--x-large;
     padding-bottom: calc($spv--small - 1px);
     padding-left: $notification-content-icon-space;
@@ -90,7 +93,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     }
 
     &.is-borderless {
-      background-color: transparent;
       background-position: 0 $borderless-notification-icon-vert-offset;
       border: none;
       margin-top: 0;
@@ -145,7 +147,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 
     .p-notification__close {
       @extend %vf-hide-text;
-      @include vf-icon-close($color-mid-dark);
+      @include vf-icon-close-themed;
 
       background-color: transparent;
       background-position: center;
@@ -174,6 +176,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     .p-notification__timestamp {
       @extend %default-text;
       @extend %muted-text;
+
+      color: $colors--theme--text-muted;
     }
 
     .p-notification__actions {
@@ -187,6 +191,11 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 
     .p-notification__action {
       @extend %default-text;
+      color: $colors--theme--link-default;
+
+      &:visited {
+        color: $colors--theme--link-visited;
+      }
     }
 
     .p-notification__action + .p-notification__action {
@@ -205,8 +214,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-default {
   .p-notification {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-information, left, true);
-    @include vf-icon-info($color-mid-dark);
+    @include vf-highlight-bar($colors--theme--border-information, left, true);
+    @include vf-icon-info-themed;
   }
 }
 
@@ -214,8 +223,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-positive {
   .p-notification--positive {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-positive, left, true);
-    @include vf-icon-success;
+    @include vf-highlight-bar($colors--theme--border-positive, left, true);
+    @include vf-icon-success-themed;
   }
 }
 
@@ -223,8 +232,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-caution {
   .p-notification--caution {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-caution, left, true);
-    @include vf-icon-warning;
+    @include vf-highlight-bar($colors--theme--border-caution, left, true);
+    @include vf-icon-warning-themed;
   }
 }
 
@@ -232,8 +241,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-negative {
   .p-notification--negative {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-negative, left, true);
-    @include vf-icon-error;
+    @include vf-highlight-bar($colors--theme--border-negative, left, true);
+    @include vf-icon-error-themed;
   }
 }
 
@@ -241,7 +250,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
 @mixin vf-notifications-information {
   .p-notification--information {
     @extend %vf-notification;
-    @include vf-highlight-bar($color-information, left, true);
-    @include vf-icon-info($color-mid-dark);
+    @include vf-highlight-bar($colors--theme--border-information, left, true);
+    @include vf-icon-info-themed;
   }
 }

package/scss/_patterns_search-box.scss

@@ -38,13 +38,33 @@
       }
     }
 
+    // Theme set on body element
     .p-search-box__input {
+      background-color: $colors--theme--background-inputs;
+      border-color: $colors--theme--border-high-contrast;
+
+      color: $colors--theme--text-default;
       flex: 1 1 100%;
       margin-bottom: 0;
       padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
       position: absolute;
       right: 0;
 
+      &:hover,
+      &:-webkit-autofill:hover {
+        background-color: $colors--theme--background-hover !important;
+      }
+
+      &:active,
+      &:focus,
+      &:-internal-autofill-selected,
+      &:-webkit-autofill,
+      &:-webkit-autofill:focus {
+        // XXX: remove important once the button {} selector is refactored to use themeing. At the moment, it trumps these.
+        background-color: $colors--theme--background-active !important;
+        border-color: $colors--theme--border-high-contrast !important;
+      }
+
       &::-webkit-search-cancel-button {
         -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
       }
@@ -64,7 +84,6 @@
     }
   }
 
-  // Theming
   %transparent-button {
     &,
     &:active,
@@ -74,102 +93,4 @@
       border-width: 0;
     }
   }
-
-  @if ($theme-default-p-search-box == 'dark') {
-    .p-search-box__input {
-      @include vf-search-box-dark-theme;
-    }
-  } @else {
-    .p-search-box {
-      .p-search-box__input {
-        @include vf-search-box-light-theme;
-      }
-    }
-  }
-
-  // beware that the order of the following classes is important
-  // as they are used to override the default theme
-  .is-paper .p-search-box {
-    .p-search-box__input {
-      @include vf-search-box-paper-theme;
-    }
-  }
-
-  .p-search-box.is-light {
-    .p-search-box__input {
-      @include vf-search-box-light-theme;
-    }
-  }
-
-  .p-search-box.is-dark {
-    .p-search-box__input {
-      @include vf-search-box-dark-theme;
-    }
-  }
-}
-
-@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,
-  &:-internal-autofill-selected,
-  &:-webkit-autofill,
-  &:-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-active !important;
-    border-color: $color-search-box-border !important;
-  }
-}
-
-@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
-  );
-}
-
-@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
-  );
-
-  &::placeholder {
-    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_section.scss

@@ -1,5 +1,6 @@
 @mixin vf-p-section {
-  .p-section {
+  .p-section,
+  .p-section--hero {
     // same as %section-padding--default
     padding-bottom: $spv--strip-regular * 0.5;
 
@@ -22,4 +23,14 @@
     // same as %section-padding--shallow
     padding-bottom: $spv--x-large;
   }
+
+  // hero section has additional top padding (as it appears on the top of the page)
+  .p-section--hero {
+    padding-top: $spv--large;
+
+    // on large screens, same as %section-padding--shallow
+    @media (min-width: $breakpoint-large) {
+      padding-top: $spv--x-large;
+    }
+  }
 }

package/scss/_patterns_side-navigation-expandable.scss

@@ -15,6 +15,7 @@
   .p-side-navigation__expand {
     @include vf-button-base;
     background: none;
+    background-color: inherit;
     border: 0;
     border-radius: 0;
     font-size: inherit;
@@ -28,15 +29,29 @@
 
     &::before {
       @extend %icon;
-      @include vf-icon-chevron;
+      @include vf-icon-chevron-themed;
       content: '';
       transform: rotate(-90deg);
       transition: transform 100ms;
     }
+
+    &:hover {
+      background: $colors--theme--background-hover;
+      color: $colors--theme--text-default;
+    }
   }
 
-  .p-side-navigation__expand[aria-expanded='true']::before {
-    transform: rotate(0deg);
+  .p-side-navigation__expand[aria-expanded='true'] {
+    background-color: inherit;
+
+    &::before {
+      transform: rotate(0deg);
+    }
+
+    &:hover {
+      background: $colors--theme--background-hover;
+      color: $colors--theme--text-default;
+    }
   }
 
   // transition
@@ -59,56 +74,4 @@
     transform: translate3d(0, 0, 0);
     visibility: visible;
   }
-
-  // Theming for the expandable variant
-  @if ($theme-default-p-side-navigation == 'dark') {
-    .p-side-navigation,
-    [class*='p-side-navigation--'] {
-      @include vf-side-navigation-expandable-theme-dark;
-
-      &.is-light {
-        @include vf-side-navigation-expandable-theme-light;
-      }
-    }
-  } @else {
-    .p-side-navigation,
-    [class*='p-side-navigation--'] {
-      @include vf-side-navigation-expandable-theme-light;
-
-      &.is-dark {
-        @include vf-side-navigation-expandable-theme-dark;
-      }
-    }
-  }
-}
-
-@mixin vf-side-navigation-expandable-theme($color-sidenav-text-active, $color-sidenav-item-background-hover, $color-sidenav-toggle-icon) {
-  .p-side-navigation__expand {
-    background-color: inherit;
-    &::before {
-      @include vf-icon-chevron($color-sidenav-toggle-icon);
-    }
-
-    &:hover {
-      background: $color-sidenav-item-background-hover;
-      color: $color-sidenav-text-active;
-    }
-  }
-}
-
-@mixin vf-side-navigation-expandable-theme-light {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--light-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--light-theme--background-hover,
-    $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
-  );
-}
-
-@mixin vf-side-navigation-expandable-theme-dark {
-  @include vf-side-navigation-expandable-theme(
-    $color-sidenav-text-active: $colors--dark-theme--text-default,
-    $color-sidenav-item-background-hover: $colors--dark-theme--background-hover,
-    // color of toggle icon - needed because of lack of rgba support in icon mixin
-    $color-sidenav-toggle-icon: #999
-  );
 }