vanilla-framework 4.7.0 → 4.9.0

package/scss/_patterns_chip.scss

@@ -21,6 +21,7 @@ $chip-border-thickness: 1px;
 
     .p-chip__lead,
     .p-chip__value {
+      color: $colors--theme--text-default;
       display: inline;
       margin-bottom: 0;
       overflow: hidden;
@@ -42,7 +43,7 @@ $chip-border-thickness: 1px;
 
     .p-chip__dismiss {
       @extend %icon;
-      // also includes button and close icon styles in the theming section
+      @include vf-icon-close-themed;
 
       align-self: center;
       background-size: map-get($icon-sizes, small);
@@ -64,234 +65,200 @@ $chip-border-thickness: 1px;
     }
   }
 
-  .p-chip,
-  .p-chip--positive,
-  .p-chip--caution,
-  .p-chip--negative,
-  .p-chip--information {
+  @include vf-chips-default;
+  @include vf-chips-positive;
+  @include vf-chips-caution;
+  @include vf-chips-negative;
+  @include vf-chips-information;
+}
+
+// Default notification styling
+@mixin vf-chips-default {
+  .p-chip {
     @extend %vf-chip;
+
+    background-color: $colors--theme--background-neutral-default;
+    border: $chip-border-thickness solid $colors--theme--border-neutral;
+    border-color: $colors--theme--border-neutral;
   }
 
-  // Theming
-  @if ($theme-default-p-chip == 'dark') {
-    .p-chip {
-      @include vf-chip-dark-theme;
-    }
-    .p-chip.is-light {
-      @include vf-chip-light-theme;
-    }
+  // stylelint-disable-next-line selector-max-type
+  button.p-chip {
     // stylelint-disable-next-line selector-max-type
-    button.p-chip {
-      @include vf-chip-dark-theme($is-interactive: true);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip.is-light {
-      @include vf-chip-light-theme($is-interactive: true);
+    &:hover {
+      background-color: $colors--theme--background-neutral-hover;
+      border-color: $colors--theme--border-neutral;
     }
 
-    .p-chip--positive {
-      @include vf-chip-dark-theme(positive);
-    }
-    .p-chip--positive.is-light {
-      @include vf-chip-light-theme(positive);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--positive {
-      @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
-    }
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--positive.is-light {
-      @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
+    &[aria-pressed='true'],
+    &.is-selected,
+    &:active {
+      background-color: $colors--theme--background-neutral-active;
+      border-color: $colors--theme--border-neutral;
     }
+  }
 
-    .p-chip--caution {
-      @include vf-chip-dark-theme(caution);
-    }
-    .p-chip--caution.is-light {
-      @include vf-chip-light-theme(caution);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--caution {
-      @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--caution.is-light {
-      @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
-    }
+  .p-chip .p-chip__dismiss {
+    @include vf-button-pattern(
+      $button-background-color: transparent,
+      $button-border-color: transparent,
+      $button-hover-background-color: $colors--theme--background-neutral-hover,
+      $button-hover-border-color: transparent,
+      $button-active-background-color: $colors--theme--background-neutral-active,
+      $button-active-border-color: transparent
+    );
+  }
+}
 
-    .p-chip--negative {
-      @include vf-chip-dark-theme(negative);
-    }
-    .p-chip--negative.is-light {
-      @include vf-chip-light-theme(negative);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--negative {
-      @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--negative.is-light {
-      @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
-    }
+@mixin vf-chips-positive {
+  .p-chip--positive {
+    @extend %vf-chip;
 
-    .p-chip--information {
-      @include vf-chip-dark-theme(information);
-    }
-    .p-chip--information.is-light {
-      @include vf-chip-light-theme(information);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--information {
-      @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--information.is-light {
-      @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
-    }
-  } @else {
-    .p-chip {
-      @include vf-chip-light-theme;
-    }
-    .p-chip.is-dark {
-      @include vf-chip-dark-theme;
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip {
-      @include vf-chip-light-theme($is-interactive: true);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip.is-dark {
-      @include vf-chip-dark-theme($is-interactive: true);
-    }
+    background-color: $colors--theme--background-positive-default;
+    border: $chip-border-thickness solid $colors--theme--border-positive;
+    border-color: $colors--theme--border-positive;
+  }
 
-    .p-chip--positive {
-      @include vf-chip-light-theme(positive);
-    }
-    .p-chip--positive.is-dark {
-      @include vf-chip-dark-theme(positive);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--positive {
-      @include vf-chip-light-theme($chip-type: positive, $is-interactive: true);
-    }
+  // stylelint-disable-next-line selector-max-type
+  button.p-chip--positive {
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--positive.is-dark {
-      @include vf-chip-dark-theme($chip-type: positive, $is-interactive: true);
+    &:hover {
+      background-color: $colors--theme--background-positive-hover;
+      border-color: $colors--theme--border-positive;
     }
 
-    .p-chip--caution {
-      @include vf-chip-light-theme(caution);
-    }
-    .p-chip--caution.is-dark {
-      @include vf-chip-dark-theme(caution);
-    }
-    // stylelint-disable-next-line selector-max-type
-    button.p-chip--caution {
-      @include vf-chip-light-theme($chip-type: caution, $is-interactive: true);
-    }
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--caution.is-dark {
-      @include vf-chip-dark-theme($chip-type: caution, $is-interactive: true);
+    &[aria-pressed='true'],
+    &.is-selected,
+    &:active {
+      background-color: $colors--theme--background-positive-active;
+      border-color: $colors--theme--border-positive;
     }
+  }
 
-    .p-chip--negative {
-      @include vf-chip-light-theme(negative);
-    }
-    .p-chip--negative.is-dark {
-      @include vf-chip-dark-theme(negative);
-    }
+  .p-chip--positive .p-chip__dismiss {
+    @include vf-button-pattern(
+      $button-background-color: transparent,
+      $button-border-color: transparent,
+      $button-hover-background-color: $colors--theme--background-positive-hover,
+      $button-hover-border-color: transparent,
+      $button-active-background-color: $colors--theme--background-positive-active,
+      $button-active-border-color: transparent
+    );
+  }
+}
+
+@mixin vf-chips-caution {
+  .p-chip--caution {
+    @extend %vf-chip;
+
+    background-color: $colors--theme--background-caution-default;
+    border: $chip-border-thickness solid $colors--theme--border-caution;
+    border-color: $colors--theme--border-caution;
+  }
+
+  // stylelint-disable-next-line selector-max-type
+  button.p-chip--caution {
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--negative {
-      @include vf-chip-light-theme($chip-type: negative, $is-interactive: true);
+    &:hover {
+      background-color: $colors--theme--background-caution-hover;
+      border-color: $colors--theme--border-caution;
     }
+
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--negative.is-dark {
-      @include vf-chip-dark-theme($chip-type: negative, $is-interactive: true);
+    &[aria-pressed='true'],
+    &.is-selected,
+    &:active {
+      background-color: $colors--theme--background-caution-active;
+      border-color: $colors--theme--border-caution;
     }
+  }
 
-    .p-chip--information {
-      @include vf-chip-light-theme(information);
-    }
-    .p-chip--information.is-dark {
-      @include vf-chip-dark-theme(information);
-    }
+  .p-chip--caution .p-chip__dismiss {
+    @include vf-button-pattern(
+      $button-background-color: transparent,
+      $button-border-color: transparent,
+      $button-hover-background-color: $colors--theme--background-caution-hover,
+      $button-hover-border-color: transparent,
+      $button-active-background-color: $colors--theme--background-caution-active,
+      $button-active-border-color: transparent
+    );
+  }
+}
+
+@mixin vf-chips-negative {
+  .p-chip--negative {
+    @extend %vf-chip;
+
+    background-color: $colors--theme--background-negative-default;
+    border: $chip-border-thickness solid $colors--theme--border-negative;
+    border-color: $colors--theme--border-negative;
+  }
+
+  // stylelint-disable-next-line selector-max-type
+  button.p-chip--negative {
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--information {
-      @include vf-chip-light-theme($chip-type: information, $is-interactive: true);
+    &:hover {
+      background-color: $colors--theme--background-negative-hover;
+      border-color: $colors--theme--border-negative;
     }
+
     // stylelint-disable-next-line selector-max-type
-    button.p-chip--information.is-dark {
-      @include vf-chip-dark-theme($chip-type: information, $is-interactive: true);
+    &[aria-pressed='true'],
+    &.is-selected,
+    &:active {
+      background-color: $colors--theme--background-negative-active;
+      border-color: $colors--theme--border-negative;
     }
   }
-}
 
-@mixin vf-chip-theme($chip-type: neutral, $is-interactive: false, $colors-chip-tinted-backgrounds, $colors-chip-tinted-borders, $color-chip-value, $color-chip-lead) {
-  @if (not map-has-key($colors-chip-tinted-backgrounds, $chip-type)) {
-    $chip-type: neutral;
+  .p-chip--negative .p-chip__dismiss {
+    @include vf-button-pattern(
+      $button-background-color: transparent,
+      $button-border-color: transparent,
+      $button-hover-background-color: $colors--theme--background-negative-hover,
+      $button-hover-border-color: transparent,
+      $button-active-background-color: $colors--theme--background-negative-active,
+      $button-active-border-color: transparent
+    );
   }
+}
 
-  $color-background: map-get($colors-chip-tinted-backgrounds, $chip-type, 'default');
-  $color-background-hover: map-get($colors-chip-tinted-backgrounds, $chip-type, 'hover');
-  $color-background-active: map-get($colors-chip-tinted-backgrounds, $chip-type, 'active');
-  $color-border: map-get($colors-chip-tinted-borders, $chip-type);
-
-  background-color: $color-background;
-  border: $chip-border-thickness solid $color-border;
+@mixin vf-chips-information {
+  .p-chip--information {
+    @extend %vf-chip;
 
-  .p-chip__value {
-    color: $color-chip-value;
-  }
-  .p-chip__lead,
-  .p-chip__lead + .p-chip__value::before {
-    color: $color-chip-lead;
+    background-color: $colors--theme--background-information-default;
+    border: $chip-border-thickness solid $colors--theme--border-information;
+    border-color: $colors--theme--border-information;
   }
 
-  @if ($is-interactive) {
+  // stylelint-disable-next-line selector-max-type
+  button.p-chip--information {
+    // stylelint-disable-next-line selector-max-type
     &:hover {
-      background-color: $color-background-hover;
-      border-color: $color-border;
+      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 {
-      background-color: $color-background-active;
-      border-color: $color-border;
-    }
-  } @else {
-    .p-chip__dismiss {
-      @include vf-icon-close($color-chip-lead);
-
-      @include vf-button-pattern(
-        $button-background-color: transparent,
-        $button-border-color: transparent,
-        $button-hover-background-color: $color-background-hover,
-        $button-hover-border-color: transparent,
-        $button-active-background-color: $color-background-active,
-        $button-active-border-color: transparent
-      );
+      background-color: $colors--theme--background-information-active;
+      border-color: $colors--theme--border-information;
     }
   }
-}
 
-@mixin vf-chip-light-theme($chip-type: neutral, $is-interactive: false) {
-  @include vf-chip-theme(
-    $chip-type: $chip-type,
-    $is-interactive: $is-interactive,
-    $colors-chip-tinted-backgrounds: $colors-light-theme--tinted-backgrounds,
-    $colors-chip-tinted-borders: $colors-light-theme--tinted-borders,
-    $color-chip-value: $colors--light-theme--text-default,
-    $color-chip-lead: $colors--light-theme--text-default
-  );
-}
-
-@mixin vf-chip-dark-theme($chip-type: neutral, $is-interactive: false) {
-  @include vf-chip-theme(
-    $chip-type: $chip-type,
-    $is-interactive: $is-interactive,
-    $colors-chip-tinted-backgrounds: $colors-dark-theme--tinted-backgrounds,
-    $colors-chip-tinted-borders: $colors-dark-theme--tinted-borders,
-    $color-chip-value: $colors--dark-theme--text-default,
-    $color-chip-lead: $colors--dark-theme--text-default
-  );
+  .p-chip--information .p-chip__dismiss {
+    @include vf-button-pattern(
+      $button-background-color: transparent,
+      $button-border-color: transparent,
+      $button-hover-background-color: $colors--theme--background-information-hover,
+      $button-hover-border-color: transparent,
+      $button-active-background-color: $colors--theme--background-information-active,
+      $button-active-border-color: transparent
+    );
+  }
 }

package/scss/_patterns_code-snippet.scss

@@ -46,7 +46,6 @@
 
 @import 'settings';
 
-$color-snippet-heading-bg: rgba($color-x-dark, 0.08);
 $code-snippet-header-v-spacing: $spv--small;
 
 @mixin vf-p-code-snippet {
@@ -54,7 +53,7 @@ $code-snippet-header-v-spacing: $spv--small;
     margin-bottom: $spv--x-large;
 
     &.is-bordered {
-      border: 1px solid $colors--light-theme--border-low-contrast;
+      border: 1px solid $colors--theme--border-low-contrast;
     }
 
     .p-code-snippet__block,
@@ -74,13 +73,13 @@ $code-snippet-header-v-spacing: $spv--small;
       position: relative;
 
       &.is-windows-prompt::before {
-        @include vf-icon-chevron($color-mid-dark);
+        @include vf-icon-chevron-themed;
 
         transform: rotate(270deg);
       }
 
       &.is-url::before {
-        @include vf-icon-get-link($color-mid-dark);
+        @include vf-icon-get-link-themed;
       }
     }
 
@@ -94,7 +93,7 @@ $code-snippet-header-v-spacing: $spv--small;
 
     .p-code-snippet__header {
       align-items: flex-start;
-      background-color: $color-code-heading-background;
+      background-color: $colors--theme--background-active;
       display: flex;
       justify-content: space-between;
       padding-left: $sph--large;
@@ -115,7 +114,7 @@ $code-snippet-header-v-spacing: $spv--small;
     .p-code-snippet__dropdown {
       background-color: $color-transparent;
       border: 0;
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
       margin-bottom: 0;
       margin-left: $sph--small;
       min-width: min-content;
@@ -137,7 +136,7 @@ $code-snippet-header-v-spacing: $spv--small;
     }
 
     .p-code-snippet__dropdown + .p-code-snippet__dropdown {
-      border-left: 1px solid $colors--light-theme--border-default;
+      border-left: 1px solid $colors--theme--border-default;
     }
 
     .p-code-snippet__header.is-stacked {
@@ -154,7 +153,7 @@ $code-snippet-header-v-spacing: $spv--small;
       }
 
       .p-code-snippet__title + .p-code-snippet__dropdowns {
-        border-top: 1px solid $colors--light-theme--border-default;
+        border-top: 1px solid $colors--theme--border-default;
       }
     }
 

package/scss/_patterns_contextual-menu.scss

@@ -15,6 +15,7 @@
   .p-contextual-menu__dropdown {
     @extend %vf-has-box-shadow;
 
+    background: $colors--theme--background-default;
     display: none;
     margin: 0;
     max-width: 21rem;
@@ -57,6 +58,7 @@
     display: block;
 
     + .p-contextual-menu__group {
+      border-top-color: $colors--theme--border-default;
       border-top-style: solid;
       border-top-width: $input-border-thickness;
       margin: -$input-border-thickness 0 0 0;
@@ -77,9 +79,23 @@
     white-space: nowrap;
     width: 100%;
 
+    &,
+    &:active,
+    &:hover,
+    &:visited {
+      background-color: transparent;
+      color: $colors--theme--text-default;
+    }
+
     &:hover {
+      background-color: $colors--theme--background-hover;
       text-decoration: none;
     }
+
+    &:active {
+      background-color: $colors--theme--background-active;
+      cursor: default;
+    }
   }
 
   .p-contextual-menu__toggle {
@@ -94,79 +110,4 @@
       transform: rotate(180deg);
     }
   }
-
-  // Theming
-  @if ($theme-default-p-contextual-menu == 'dark') {
-    @include vf-contextual-menu-dark-theme;
-
-    [class*='p-contextual-menu'].is-light {
-      @include vf-contextual-menu-light-theme;
-    }
-  } @else {
-    @include vf-contextual-menu-light-theme;
-
-    [class*='p-contextual-menu'].is-dark {
-      @include vf-contextual-menu-dark-theme;
-    }
-  }
-}
-
-@mixin vf-contextual-menu-theme(
-  // color of the contextual menu background
-  $color-contextual-menu-background,
-  // color of the contextual menu border between groups
-  $color-contextual-menu-border,
-  // color of the contextual menu item link text
-  $color-contextual-menu-text,
-  // color of the contextual menu item link active background
-  $color-contextual-menu-active-background,
-  // color of the contextual menu item link hover background
-  $color-contextual-menu-hover-background
-) {
-  .p-contextual-menu__dropdown {
-    background: $color-contextual-menu-background;
-  }
-
-  .p-contextual-menu__group + .p-contextual-menu__group {
-    border-top-color: $color-contextual-menu-border;
-  }
-
-  .p-contextual-menu__link {
-    &,
-    &:active,
-    &:hover,
-    &:visited {
-      background-color: transparent;
-      color: $color-contextual-menu-text;
-    }
-
-    &:hover {
-      background-color: $color-contextual-menu-hover-background;
-    }
-
-    &:active {
-      background-color: $color-contextual-menu-active-background;
-      cursor: default;
-    }
-  }
-}
-
-@mixin vf-contextual-menu-light-theme {
-  @include vf-contextual-menu-theme(
-    $color-contextual-menu-background: $colors--light-theme--background-default,
-    $color-contextual-menu-hover-background: $colors--light-theme--background-hover,
-    $color-contextual-menu-active-background: $colors--light-theme--background-active,
-    $color-contextual-menu-border: $colors--light-theme--border-default,
-    $color-contextual-menu-text: $colors--light-theme--text-default
-  );
-}
-
-@mixin vf-contextual-menu-dark-theme {
-  @include vf-contextual-menu-theme(
-    $color-contextual-menu-background: $colors--dark-theme--background-default,
-    $color-contextual-menu-hover-background: $colors--dark-theme--background-hover,
-    $color-contextual-menu-active-background: $colors--dark-theme--background-active,
-    $color-contextual-menu-border: $colors--dark-theme--border-default,
-    $color-contextual-menu-text: $colors--dark-theme--text-default
-  );
 }

package/scss/_patterns_divider.scss

@@ -40,8 +40,13 @@
   }
 
   .p-divider__block {
+    color: $colors--theme--text-default;
     position: relative;
 
+    &:not(:first-child)::before {
+      background-color: $colors--theme--border-default;
+    }
+
     @include horizontal-dividers();
 
     // Medium screens will have horizontal dividers unless col-medium-...
@@ -57,39 +62,4 @@
       @include vertical-dividers();
     }
   }
-
-  // Theming
-  @if ($theme-default-p-divider == 'dark') {
-    .p-divider__block {
-      @include vf-divider-dark-theme;
-    }
-
-    .p-divider.is-light .p-divider__block {
-      @include vf-divider-light-theme;
-    }
-  } @else {
-    .p-divider__block {
-      @include vf-divider-light-theme;
-    }
-
-    .p-divider.is-dark .p-divider__block {
-      @include vf-divider-dark-theme;
-    }
-  }
-}
-
-@mixin vf-divider-theme($color-divider-text, $color-divider-line) {
-  color: $color-divider-text;
-
-  &:not(:first-child)::before {
-    background-color: $color-divider-line;
-  }
-}
-
-@mixin vf-divider-light-theme {
-  @include vf-divider-theme($colors--light-theme--text-default, $colors--light-theme--border-default);
-}
-
-@mixin vf-divider-dark-theme {
-  @include vf-divider-theme($colors--dark-theme--text-default, $colors--dark-theme--border-default);
 }

package/scss/_patterns_form-help-text.scss

@@ -4,39 +4,11 @@
   .p-form-help-text {
     @extend %small-text;
 
-    color: $color-mid-dark;
+    color: $colors--theme--text-muted;
     margin-top: -$sp-unit;
 
     &.is-tick-element {
       margin-left: $sph--large + $form-tick-box-size;
     }
   }
-
-  @if ($theme-default-forms == 'dark') {
-    .p-form-help-text {
-      @include vf-form-help-text-dark-theme;
-    }
-  } @else {
-    .p-form-help-text {
-      @include vf-form-help-text-light-theme;
-    }
-  }
-
-  .is-dark .p-form-help-text,
-  .p-form-help-text.is-dark {
-    @include vf-form-help-text-dark-theme;
-  }
-
-  .is-light .p-form-help-text,
-  .p-form-help-text.is-light {
-    @include vf-form-help-text-light-theme;
-  }
-}
-
-@mixin vf-form-help-text-dark-theme {
-  color: $colors--dark-theme--text-muted;
-}
-
-@mixin vf-form-help-text-light-theme {
-  color: $colors--light-theme--text-muted;
 }