vanilla-framework 4.6.0 → 4.8.0

package/scss/_base_themes.scss

@@ -0,0 +1,52 @@
+@import 'settings';
+
+@mixin vf-theme-light {
+  --vf-theme-light: var(--vf-FLAG-ON);
+  --vf-theme-dark: var(--vf-FLAG-OFF);
+  @include vf-theme-light--colors;
+}
+
+@mixin vf-theme-dark {
+  --vf-theme-light: var(--vf-FLAG-OFF);
+  --vf-theme-dark: var(--vf-FLAG-ON);
+  @include vf-theme-dark--colors;
+}
+
+@mixin vf-theme-paper {
+  // we treat the paper theme as a light theme
+  --vf-theme-light: var(--vf-FLAG-ON);
+  --vf-theme-dark: var(--vf-FLAG-OFF);
+  @include vf-theme-paper--colors;
+}
+
+// Color themes
+@mixin vf-b-themes {
+  @at-root {
+    :root {
+      // based on:
+      // https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
+      --vf-FLAG-ON: initial;
+      --vf-FLAG-OFF: ;
+    }
+
+    :root,
+    .is-light {
+      @include vf-theme-light;
+    }
+
+    .is-dark {
+      @include vf-theme-dark;
+    }
+
+    .is-paper {
+      @include vf-theme-paper;
+    }
+  }
+}
+
+// based on:
+// https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
+// https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/
+@mixin vf-themed-property($property, $light-value, $dark-value) {
+  #{$property}: var(--vf-theme-light, #{$light-value}) var(--vf-theme-dark, #{$dark-value});
+}

package/scss/_base_typography-definitions.scss

@@ -200,7 +200,7 @@
   }
 
   %muted-text {
-    color: $colors--light-theme--text-muted;
+    color: $colors--theme--text-muted;
   }
 
   %small-caps-text {

package/scss/_global_functions.scss

@@ -50,6 +50,16 @@
   }
 }
 
+// Includes the theme variables based on the background color passed as an argument.
+// This is currently only used in the deprecated p-strip--accent.
+@mixin vf-determine-theme-from-background($background-color) {
+  @if (lightness($background-color) > 50) {
+    @include vf-theme-light;
+  } @else {
+    @include vf-theme-dark;
+  }
+}
+
 // Adds visual focus to elements on :focus-visible,
 // or :focus if the browser doesn't support the former
 @mixin vf-focus($color: $color-focus, $width: $bar-thickness, $has-validation: false) {

package/scss/_layouts_application-panels.scss

@@ -21,7 +21,7 @@
     background: $colors--light-theme--background-default;
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 5;
 
     .p-panel.is-dark & {
       background: $colors--dark-theme--background-default;

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_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);
 }