vanilla-framework 4.6.0 → 4.8.0

package/scss/_patterns_strip.scss

@@ -20,59 +20,84 @@
 }
 
 @mixin vf-p-strip-default {
+  // default strip is theme-agnostic, it doesn't change the theme
+  // unless the theme class is specifically applied to it,
+  // in which case it will set the background and text colours
   .p-strip {
     @extend %vf-strip;
 
     background-color: transparent;
+
+    // themed versions of the strip should set the background and text colours
+    &.is-light,
+    &.is-paper,
+    &.is-dark {
+      background-color: $colors--theme--background-default;
+      color: $colors--theme--text-default;
+    }
+  }
+
+  // highligted version if the strip is using the alternative background colour
+  // this is the recommended replacement for the deprecated .p-strip--white,
+  // .p-strip--light and .p-strip--accent
+  .p-strip--highlighted {
+    @extend %vf-strip;
+
+    background-color: $colors--theme--background-alt;
+    color: $colors--theme--text-default;
   }
 
+  // DEPRECATED: use any other available p-strip instead
   .p-strip--light {
     @extend %vf-strip;
+    @include vf-theme-light;
 
-    background-color: $color-light;
+    background-color: $colors--theme--background-alt;
+    color: $colors--theme--text-default;
   }
 
+  // DEPRECATED: use .p-strip .is-dark instead
   .p-strip--dark {
     @extend %vf-strip;
+    @include vf-theme-dark;
 
-    background-color: $colors--dark-theme--background-default;
-    color: $colors--dark-theme--text-default;
+    background-color: $colors--theme--background-default;
+    color: $colors--theme--text-default;
   }
 
+  // DEPRECATED: use .p-strip--highlighted instead
   .p-strip--white {
     @extend %vf-strip;
+    @include vf-theme-light;
 
     background-color: $color-x-light;
-    color: $colors--light-theme--text-default;
+    color: $colors--theme--text-default;
   }
 }
 
+// DEPRECATED: use other available strip variants instead
 @mixin vf-p-strip-accent {
   .p-strip--accent {
     @extend %vf-strip;
+    @include vf-determine-theme-from-background($color-accent-background);
 
     background-color: $color-accent-background;
-    color: vf-determine-text-color($color-accent-background);
+    color: $colors--theme--text-default;
   }
 }
 
+// DEPRECATED: use other available strip variants or suru component instead
 @mixin vf-p-strip-image {
   .p-strip--image {
     @extend %vf-strip;
 
     background-repeat: no-repeat;
     background-size: cover;
-
-    &.is-light {
-      color: $colors--light-theme--text-default;
-    }
-
-    &.is-dark {
-      color: $color-x-light;
-    }
+    color: $colors--theme--text-default;
   }
 }
 
+// DEPRECATED: use other available strip variants instead
 @mixin vf-p-strip-bordered {
   [class*='p-strip'].is-bordered {
     @extend %vf-pseudo-border--bottom;
@@ -91,6 +116,7 @@
   }
 }
 
+// DEPRECATED:
 // gradient of the main suru slant
 $color-suru-start: lighten($color-brand, 10%) !default;
 $color-suru-middle: $color-brand !default;
@@ -107,6 +133,7 @@ $color-suru-slant-left: rgba(205, 205, 205, 0.55) !default;
 $color-suru-slant-right-fallback: rgba(205, 205, 205, 0.14) !default;
 $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
 
+// DEPRECATED: use new .p-suru components instead
 @mixin vf-p-strip-suru {
   .p-strip--suru {
     @extend %vf-strip;
@@ -116,9 +143,19 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to top right, #fff 0%, #fff 49%, transparent 50%, transparent 100%), linear-gradient(to top right, #fff 0%, #fff 100%),
       linear-gradient(111deg, $color-suru-start 10%, $color-suru-middle 37%, $color-suru-end 100%);
 
-    background-position: 0% 0%, top right, right 0 bottom 4rem, right bottom, 0% 0%;
+    background-position:
+      0% 0%,
+      top right,
+      right 0 bottom 4rem,
+      right bottom,
+      0% 0%;
     background-repeat: no-repeat;
-    background-size: 100% calc(100% - 4rem), 50% 100%, 100% 4rem, 100% 4rem, auto;
+    background-size:
+      100% calc(100% - 4rem),
+      50% 100%,
+      100% 4rem,
+      100% 4rem,
+      auto;
     color: $color-x-light;
     margin-bottom: -4rem;
     overflow: hidden;
@@ -136,16 +173,36 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
     &.is-deep {
       $padding: 3rem;
 
-      background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-      background-size: 100% calc(100% - $padding), 100% 100%, 100% $padding, 100% $padding, auto;
+      background-position:
+        0% 0%,
+        top right,
+        right 0 bottom $padding,
+        right bottom,
+        0% 0%;
+      background-size:
+        100% calc(100% - $padding),
+        100% 100%,
+        100% $padding,
+        100% $padding,
+        auto;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
       @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
-        background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-        background-size: 100% calc(100% - $padding), 50% 100%, 100% $padding, 100% $padding, auto;
+        background-position:
+          0% 0%,
+          top right,
+          right 0 bottom $padding,
+          right bottom,
+          0% 0%;
+        background-size:
+          100% calc(100% - $padding),
+          50% 100%,
+          100% $padding,
+          100% $padding,
+          auto;
         margin-bottom: -$padding;
         padding-bottom: ($padding * 3) !important;
       }
@@ -158,6 +215,7 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
   }
 }
 
+// DEPRECATED: use new .p-suru components instead
 @mixin vf-p-strip-suru-topped {
   .p-strip--suru-topped {
     @extend %vf-strip;
@@ -167,9 +225,17 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to bottom right, transparent 0%, transparent 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%),
       linear-gradient(90deg, $color-suru-start 4%, $color-suru-middle 50%, $color-suru-end 88%);
 
-    background-position: top right, top right, top left, top left;
+    background-position:
+      top right,
+      top right,
+      top left,
+      top left;
     background-repeat: no-repeat;
-    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
+    background-size:
+      39.4% 6rem,
+      54% 4rem,
+      63% 4rem,
+      62.6% 4rem;
     padding-bottom: 4rem;
     padding-top: 6rem;
 

package/scss/_patterns_suru.scss

@@ -1,16 +1,132 @@
 @import 'settings';
 
 @mixin vf-p-suru {
-  .p-suru {
-    aspect-ratio: calc(2216 / 428); // aspect ratio calculated from image dimensions
-    background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
-    background-size: contain;
-    margin: 0 auto;
-    max-width: $grid-max-width;
-
-    &.is-dark {
-      aspect-ratio: calc(2580 / 501); // aspect ratio calculated from image dimensions
-      background-image: url('#{$assets-path}9469ef82-1_website_suru_DARK_25%20(1)122.jpg');
+  $vf-suru-min-height: 24rem;
+
+  // add suru backgrounds to the themes
+  @at-root {
+    :root,
+    .is-light,
+    .is-paper {
+      // new suru backgrounds don't have while (light) version,
+      // they need paper background
+      --vf-suru-background: #{$color-paper};
+      --vf-suru-25-75: url('#{$assets-path}505636a6-0000_suru-main-25x75-light.png');
+      --vf-suru-50-50: url('#{$assets-path}e66e280b-0001_suru-main-50x50-light.png');
+      --vf-suru-fan-top-right: url('#{$assets-path}ed94a429-0000_suru-corner-fan--top-right-light.jpg');
+      --vf-suru-fan-bottom-right: url('#{$assets-path}2adade55-suru-corner-fan--bottom-0000_light.jpg');
+      --vf-suru-pyramid-top-left: url('#{$assets-path}8846d6a5-suru-pyramid-top-corner_0000_light.jpg');
+      --vf-suru-pyramid-top-right: url('#{$assets-path}5d9f8cd3-suru-pyramid-top-right-corner_0000_light.jpg');
+    }
+
+    .is-dark {
+      --vf-suru-background: #{$colors--theme--background-default};
+      --vf-suru-25-75: url('#{$assets-path}7ccd4f39-0003_suru-main-25x75-dark.png');
+      --vf-suru-50-50: url('#{$assets-path}70c2bbcd-0002_suru-main-50x50-dark.png');
+      --vf-suru-fan-top-right: url('#{$assets-path}fd6ef995-0001_suru-corner-fan--top-right-dark.jpg');
+      --vf-suru-fan-bottom-right: url('#{$assets-path}725af649-suru-corner-fan--bottom-0001_dark.jpg');
+      --vf-suru-pyramid-top-left: url('#{$assets-path}86ed5771-suru-pyramid-top-corner_0001_dark.jpg');
+      --vf-suru-pyramid-top-right: url('#{$assets-path}9f740811-suru-pyramid-top-right-corner_0001_dark.jpg');
+    }
+  }
+
+  .p-suru,
+  .p-suru--25-75,
+  .p-suru--50-50 {
+    background-color: var(--vf-suru-background);
+    color: $colors--theme--text-default;
+
+    // padding top based on p-section--hero
+    // bottom padding not needed (as it's covered by the suru background image)
+    padding-top: $spv--large;
+
+    // on large screens, same as %section-padding--shallow
+    @media (min-width: $breakpoint-large) {
+      padding-top: $spv--x-large;
+    }
+
+    // for backwards compatibility with p-suru used as a standalone component
+    // we remove top padding if there are no children
+    // for this to work there can't be any whitespace in the suru element
+    // <div class="p-suru"></div>
+    &:-moz-only-whitespace,
+    &:empty {
+      padding-top: 0;
+    }
+
+    &::after {
+      aspect-ratio: calc(2600 / 471); // aspect ratio calculated from image dimensions
+      background-image: var(--vf-suru-25-75);
+      background-size: contain;
+      content: '';
+      display: block;
+      margin: 0 auto;
+      max-width: $grid-max-width;
+    }
+
+    &.p-suru--50-50::after {
+      // aspect ratio of 50/50 background is the same, so no need to override
+      background-image: var(--vf-suru-50-50);
+    }
+  }
+
+  .p-suru--fan-top,
+  .p-suru--fan-bottom,
+  .p-suru--pyramid-left,
+  .p-suru--pyramid-right {
+    background-color: var(--vf-suru-background);
+    color: $colors--theme--text-default;
+
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-regular * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-regular;
+    }
+
+    // padding top based on p-section--hero
+    // bottom padding not needed (as it's covered by the suru background image)
+    padding-top: $spv--large;
+
+    // on large screens, same as %section-padding--shallow
+    @media (min-width: $breakpoint-large) {
+      padding-top: $spv--x-large;
+    }
+  }
+
+  // only apply suru background images on large screens
+  @media (min-width: $breakpoint-large) {
+    .p-suru--fan-top,
+    .p-suru--fan-bottom,
+    .p-suru--pyramid-left,
+    .p-suru--pyramid-right {
+      min-height: $vf-suru-min-height;
+    }
+
+    .p-suru--fan-top,
+    .p-suru--fan-bottom {
+      background-image: var(--vf-suru-fan-top-right);
+      background-position: top right;
+      background-repeat: no-repeat;
+      background-size: 512px 385.5px; // based on image dimensions (2048x1542) scaled down by 0.25
+    }
+
+    .p-suru--fan-bottom {
+      background-image: var(--vf-suru-fan-bottom-right);
+      background-position: bottom right;
+    }
+
+    .p-suru--pyramid-right,
+    .p-suru--pyramid-left {
+      background-image: var(--vf-suru-pyramid-top-left);
+      background-position: top left;
+      background-repeat: no-repeat;
+      background-size: 354px 258.75px; // based on image dimensions (1380x1035) scaled down by 0.25
+    }
+
+    .p-suru--pyramid-right {
+      background-image: var(--vf-suru-pyramid-top-right);
+      background-position: top right;
     }
   }
 }

package/scss/_patterns_table-mobile-card.scss

@@ -64,7 +64,7 @@
           }
 
           &:not(:first-child)::after {
-            background-color: $color-mid-light;
+            background-color: $colors--theme--border-low-contrast;
             content: '';
             height: 1px;
             left: 0;

package/scss/_patterns_table-sortable.scss

@@ -3,7 +3,7 @@
 @mixin vf-p-table-sortable {
   %heading-icon {
     $vertical-offset: 0.5px;
-    @include vf-icon-chevron;
+    @include vf-icon-chevron-themed;
     @include vf-icon-size(map-get($icon-sizes, default));
 
     background: {
@@ -39,7 +39,7 @@
     }
 
     &[aria-sort]:hover {
-      color: $color-link;
+      color: $colors--theme--link-default;
       text-decoration: underline;
     }
   }

package/scss/_patterns_tabs.scss

@@ -17,6 +17,9 @@
       position: relative;
       white-space: nowrap;
       width: 100%;
+      &::after {
+        background-color: $colors--theme--border-default;
+      }
     }
 
     &__item {
@@ -38,9 +41,10 @@
         $button-disabled-border-color: $color-transparent
       );
       @include vf-highlight-bar(transparent, bottom, false);
-
       align-items: center;
+      background-color: transparent;
       border: none;
+      color: $colors--theme--text-default;
       display: flex;
       gap: $sph--small;
       height: 100%;
@@ -66,59 +70,19 @@
         }
       }
 
-      &:active,
-      &[aria-selected='true'] {
-        // Hide the highlight when focussing (in combination with the parent
-        // states) in browsers that don't support focus-visible.
-        &:focus::before,
-        &:focus::after {
-          content: none;
-        }
+      &:visited {
+        color: $colors--theme--text-default;
       }
-    }
-  }
-
-  // Theming
-  @if ($theme-default-p-tabs == 'dark') {
-    .p-tabs {
-      @include vf-p-tabs-dark-theme;
-    }
-
-    .p-tabs.is-light {
-      @include vf-p-tabs-light-theme;
-    }
-  } @else {
-    .p-tabs {
-      @include vf-p-tabs-light-theme;
-    }
-
-    .p-tabs.is-dark {
-      @include vf-p-tabs-dark-theme;
-    }
-  }
-}
 
-@mixin vf-p-tabs-theme($color-tabs-text, $color-tabs-border, $color-tabs-highlight-hover) {
-  color: $color-tabs-text;
-  .p-tabs {
-    &__list::after {
-      background-color: $color-tabs-border;
-    }
-
-    &__link {
-      background-color: transparent;
-
-      color: $color-tabs-text;
-      @include vf-highlight-bar(transparent, bottom, false);
-
-      // Display the highlight when focussing in modern browsers that support
+      // Display the highlight when focusing in modern browsers that support
       // focus-visible.
       &:focus:not(:focus-visible) {
-        @include vf-highlight-bar($color-tabs-text, bottom, false);
+        @include vf-highlight-bar($colors--theme--text-default, bottom, false);
       }
 
       &:hover {
-        @include vf-highlight-bar($color-tabs-highlight-hover, bottom, false);
+        background-color: transparent;
+        @include vf-highlight-bar($colors--theme--border-default, bottom, false);
 
         &::before,
         &:focus:not(:focus-visible)::before {
@@ -126,31 +90,32 @@
           height: calc($bar-thickness - 1px);
         }
 
-        // Display the highlight when focussing (in combination with the parent
-        // states) in modern browsers that support focus-visible.
-        &:focus:not(:focus-visible) {
-          @include vf-highlight-bar($color-tabs-highlight-hover, bottom, false);
-        }
-
-        // Hide the highlight when focussing (in combination with the parent
+        // Hide the highlight when focusing (in combination with the parent
         // states) in browsers that don't support focus-visible.
         &:focus::before,
         &:focus::after {
           content: none;
         }
+
+        // Display the highlight when focusing (in combination with the parent
+        // states) in modern browsers that support focus-visible.
+        &:focus:not(:focus-visible) {
+          @include vf-highlight-bar($colors--theme--border-default, bottom, false);
+        }
       }
 
       &:active,
       &[aria-selected='true'] {
-        @include vf-highlight-bar($color-tabs-text, bottom, false);
+        background-color: transparent;
+        @include vf-highlight-bar($colors--theme--text-default, bottom, false);
 
-        // Display the highlight when focussing (in combination with the parent
+        // Display the highlight when focusing (in combination with the parent
         // states) in modern browsers that support focus-visible.
         &:focus:not(:focus-visible) {
-          @include vf-highlight-bar($color-tabs-text, bottom, false);
+          @include vf-highlight-bar($colors--theme--text-default, bottom, false);
         }
 
-        // Hide the highlight when focussing (in combination with the parent
+        // Hide the highlight when focusing (in combination with the parent
         // states) in browsers that don't support focus-visible.
         &:focus::before,
         &:focus::after {
@@ -160,19 +125,3 @@
     }
   }
 }
-
-@mixin vf-p-tabs-light-theme {
-  @include vf-p-tabs-theme(
-    $color-tabs-text: $colors--light-theme--text-default,
-    $color-tabs-border: $colors--light-theme--border-default,
-    $color-tabs-highlight-hover: $colors--light-theme--border-default
-  );
-}
-
-@mixin vf-p-tabs-dark-theme {
-  @include vf-p-tabs-theme(
-    $color-tabs-text: $colors--dark-theme--text-default,
-    $color-tabs-border: $colors--dark-theme--border-default,
-    $color-tabs-highlight-hover: $colors--dark-theme--border-default
-  );
-}