vanilla-framework 4.7.0 → 4.9.0

package/scss/_base_links.scss

@@ -10,7 +10,7 @@
   %vf-link-base {
     @include vf-focus;
 
-    color: $color-link;
+    color: $colors--theme--link-default;
     text-decoration: none;
 
     &:focus {
@@ -25,15 +25,7 @@
     }
 
     &:visited {
-      color: $color-link-visited;
-    }
-
-    &.is-dark {
-      color: $color-link-dark;
-
-      &:visited {
-        color: $color-link-visited-dark;
-      }
+      color: $colors--theme--link-visited;
     }
   }
   // stylelint-enable selector-max-type

package/scss/_base_placeholders.scss

@@ -64,7 +64,7 @@
 
   // Bars and borders
   %vf-pseudo-border {
-    background-color: $color-mid-light;
+    background-color: $colors--theme--border-default;
     content: '';
     height: 1px;
     left: 0;

package/scss/_base_syntax-highlighting.scss

@@ -13,11 +13,11 @@
     &.prolog,
     &.doctype,
     &.cdata {
-      color: $colors--light-theme--text-muted;
+      color: $colors--theme--text-muted;
     }
 
     &.punctuation {
-      color: $colors--light-theme--text-default;
+      color: $colors--theme--text-default;
     }
 
     &.namespace {

package/scss/_base_tables.scss

@@ -45,7 +45,7 @@
     }
 
     tr {
-      border-bottom: 1px solid $colors--light-theme--border-default;
+      border-bottom: 1px solid $colors--theme--border-default;
       vertical-align: top;
     }
   }
@@ -71,6 +71,6 @@
   // stylelint-enable selector-max-type
 
   %table-row-border {
-    border-top: 1px solid $colors--light-theme--border-low-contrast;
+    border-top: 1px solid $colors--theme--border-low-contrast;
   }
 }

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_buttons.scss

@@ -16,44 +16,13 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 }
 
 @mixin vf-button-plain {
-  %p-button-light {
-    @include vf-button-pattern();
-  }
-
-  %p-button-dark {
-    @include vf-button-pattern(
-      $button-background-color: $colors--dark-theme--background-default,
-      $button-text-color: $colors--dark-theme--text-default,
-      $button-disabled-background-color: $color-transparent,
-      $button-disabled-border-color: $colors--dark-theme--border-high-contrast,
-      $button-border-color: $colors--dark-theme--border-high-contrast,
-      $button-hover-background-color: $colors--dark-theme--background-hover,
-      $button-hover-border-color: $colors--dark-theme--border-high-contrast,
-      $button-active-background-color: $colors--dark-theme--background-active,
-      $button-active-border-color: $colors--dark-theme--border-high-contrast
-    );
-  }
-
   .p-button {
     @extend %vf-button-base;
-
-    // Theming
-    @if ($theme-default-p-button == 'dark') {
-      @extend %p-button-dark;
-
-      &.is-light {
-        @extend %p-button-light;
-      }
-    } @else {
-      @extend %p-button-light;
-
-      &.is-dark {
-        @extend %p-button-dark;
-      }
-    }
+    @include vf-button-pattern;
   }
 }
 
+// DEPRECATED: brand coloured button is deprecated, please use other type of button instead
 @mixin vf-button-brand {
   %p-button--brand-light {
     @include vf-button-pattern(
@@ -106,158 +75,57 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 }
 
 @mixin vf-button-positive {
-  %p-button--positive-light {
-    @include vf-button-pattern(
-      $button-background-color: $color-positive,
-      $button-hover-background-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
-      $button-active-background-color: adjust-color($color-positive, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-background-color: $color-positive,
-      $button-border-color: $color-positive,
-      $button-hover-border-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
-      $button-active-border-color: adjust-color($color-positive, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-border-color: $color-positive,
-      $button-text-color: vf-contrast-text-color($color-positive)
-    );
-
-    @include vf-focus($color-focus-positive);
-  }
-
-  %p-button--positive-dark {
-    @include vf-button-pattern(
-      $button-background-color: $color-positive-dark,
-      $button-hover-background-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
-      $button-active-background-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-background-color: $color-positive-dark,
-      $button-border-color: $color-positive-dark,
-      $button-hover-border-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
-      $button-active-border-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-border-color: $color-positive-dark,
-      $button-text-color: vf-contrast-text-color($color-positive-dark)
-    );
-
-    @include vf-focus($color-focus-positive);
-  }
-
   .p-button--positive {
     @extend %vf-button-base;
-
-    // Theming
-    @if ($theme-default-p-button == 'dark') {
-      @extend %p-button--positive-dark;
-
-      &.is-light {
-        @extend %p-button--positive-light;
-      }
-    } @else {
-      @extend %p-button--positive-light;
-
-      &.is-dark {
-        @extend %p-button--positive-dark;
-      }
-    }
-
     @extend %vf-button-white-success-icon;
-  }
-}
 
-@mixin vf-button-negative {
-  %p-button--negative-light {
     @include vf-button-pattern(
-      $button-background-color: $color-negative,
-      $button-hover-background-color: adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage),
-      $button-active-background-color: adjust-color($color-negative, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-background-color: $color-negative,
-      $button-border-color: $color-negative,
-      $button-hover-border-color: adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage),
-      $button-active-border-color: adjust-color($color-negative, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-border-color: $color-negative,
-      $button-text-color: vf-contrast-text-color($color-negative)
+      $button-background-color: $colors--theme--button-positive-default,
+      $button-hover-background-color: $colors--theme--button-positive-hover,
+      $button-active-background-color: $colors--theme--button-positive-active,
+      $button-disabled-background-color: $colors--theme--button-positive-default,
+      $button-border-color: $colors--theme--button-positive-default,
+      $button-hover-border-color: $colors--theme--button-positive-hover,
+      $button-active-border-color: $colors--theme--button-positive-active,
+      $button-disabled-border-color: $colors--theme--button-positive-default,
+      $button-text-color: $colors--theme--button-positive-text
     );
-
-    @include vf-focus($color-focus-negative);
-  }
-
-  %p-button--negative-dark {
-    @include vf-button-pattern(
-      $button-background-color: $color-negative-dark,
-      $button-hover-background-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
-      $button-active-background-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-background-color: $color-negative-dark,
-      $button-border-color: $color-negative-dark,
-      $button-hover-border-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
-      $button-active-border-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
-      $button-disabled-border-color: $color-negative-dark,
-      $button-text-color: vf-contrast-text-color($color-negative-dark)
-    );
-
-    @include vf-focus($color-focus-negative);
+    @include vf-focus($color-focus-positive);
   }
+}
 
+@mixin vf-button-negative {
   .p-button--negative {
     @extend %vf-button-base;
-
-    // Theming
-    @if ($theme-default-p-button == 'dark') {
-      @extend %p-button--negative-dark;
-
-      &.is-light {
-        @extend %p-button--negative-light;
-      }
-    } @else {
-      @extend %p-button--negative-light;
-
-      &.is-dark {
-        @extend %p-button--negative-dark;
-      }
-    }
-
     @extend %vf-button-white-success-icon;
-  }
-}
 
-@mixin vf-button-base {
-  %p-button--base-light {
     @include vf-button-pattern(
-      $button-background-color: $color-transparent,
-      $button-border-color: $color-transparent,
-      $button-hover-border-color: $color-transparent,
-      $button-active-border-color: $color-transparent,
-      $button-disabled-border-color: $color-transparent
+      $button-background-color: $colors--theme--button-negative-default,
+      $button-hover-background-color: $colors--theme--button-negative-hover,
+      $button-active-background-color: $colors--theme--button-negative-active,
+      $button-disabled-background-color: $colors--theme--button-negative-default,
+      $button-border-color: $colors--theme--button-negative-default,
+      $button-hover-border-color: $colors--theme--button-negative-hover,
+      $button-active-border-color: $colors--theme--button-negative-active,
+      $button-disabled-border-color: $colors--theme--button-negative-default,
+      $button-text-color: $colors--theme--button-negative-text
     );
   }
+}
+
+@mixin vf-button-base {
+  .p-button--base {
+    @extend %vf-button-base;
 
-  %p-button--base-dark {
+    // override default button styles with transparent background and border
     @include vf-button-pattern(
       $button-background-color: $color-transparent,
-      $button-text-color: $colors--dark-theme--text-default,
-      $button-disabled-background-color: $color-transparent,
-      $button-hover-background-color: $colors--dark-theme--background-hover,
-      $button-active-background-color: $colors--dark-theme--background-active,
       $button-border-color: $color-transparent,
       $button-hover-border-color: $color-transparent,
       $button-active-border-color: $color-transparent,
       $button-disabled-border-color: $color-transparent
     );
   }
-
-  .p-button--base {
-    @extend %vf-button-base;
-
-    // Theming
-    @if ($theme-default-p-button == 'dark') {
-      @extend %p-button--base-dark;
-
-      &.is-light {
-        @extend %p-button--base-light;
-      }
-    } @else {
-      @extend %p-button--base-light;
-
-      &.is-dark {
-        @extend %p-button--base-dark;
-      }
-    }
-  }
 }
 
 @mixin vf-button-link {
@@ -272,6 +140,12 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
     padding-left: 0;
     padding-right: 0;
 
+    // stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
+    p & {
+      margin-bottom: 0;
+      padding-top: 0;
+    }
+
     &:hover {
       background: transparent;
     }
@@ -279,12 +153,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
     &.u-no-margin--bottom {
       @extend %u-no-margin--bottom--default-text;
     }
-
-    // stylelint-disable-next-line selector-max-type -- buttons should not affect paragraph spacing
-    p & {
-      margin-bottom: 0;
-      padding-top: 0;
-    }
   }
 }