vanilla-framework 4.7.0 → 4.8.0

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

package/scss/_settings_colors.scss

@@ -14,7 +14,7 @@ $color-input-shadow: rgba($color-x-dark, 0.12) !default;
 
 // SEMANTIC COLOURS
 $color-negative: #c7162b !default;
-$color-caution: #f99b11 !default;
+$color-caution: #cc7900 !default;
 $color-positive: #0e8420 !default;
 $color-information: #24598f !default;
 
@@ -85,6 +85,10 @@ $states: (
 // --text-disabled   - dimmed version of default text color, to be used on disabled controls
 // --text-muted      - muted version of default text color, to be used on elements with less prominence
 //
+// Link colors:
+// --link-default    - default link color
+// --link-visited    - visited link color
+//
 // Background colors:
 // --background           - default background color
 // --background-alt       - alternative version of background color, to be used to differentiate given surface
@@ -102,6 +106,9 @@ $colors--light-theme--text-default: #000 !default;
 $colors--light-theme--text-muted: rgba($color-x-dark, $muted-text-opacity-amount) !default;
 $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-amount) !default;
 
+$colors--light-theme--link-default: $color-link !default;
+$colors--light-theme--link-visited: $color-link-visited !default;
+
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
 $colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
@@ -113,6 +120,10 @@ $colors--light-theme--border-default: rgba($color-x-dark, 0.2) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
+$colors--light-theme--icon: $colors--light-theme--text-default !default;
+
+$colors--light-theme--icon: $colors--light-theme--text-default !default;
+
 $colors-light-theme--tinted-backgrounds: (
   neutral: (
     default: #f2f2f2,
@@ -144,7 +155,7 @@ $colors-light-theme--tinted-backgrounds: (
 $colors-light-theme--tinted-borders: (
   neutral: $colors--light-theme--border-high-contrast,
   positive: $color-positive,
-  caution: hsl(27deg 100% 39%),
+  caution: $color-caution,
   negative: $color-negative,
   information: $color-information,
 );
@@ -155,6 +166,9 @@ $colors--dark-theme--text-hover: hsl(0, 0%, 76%) !default; // minimum contrast o
 $colors--dark-theme--text-muted: rgba($colors--dark-theme--text-default, $muted-text-opacity-amount) !default;
 $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $inactive-text-opacity-amount) !default;
 
+$colors--dark-theme--link-default: $color-link-dark !default;
+$colors--dark-theme--link-visited: $color-link-visited-dark !default;
+
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #2d2d2d !default;
 $colors--dark-theme--background-inputs: rgba($colors--dark-theme--text-default, $input-background-opacity-amount) !default;
@@ -166,6 +180,10 @@ $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.3
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;
 $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.05) !default;
 
+$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
+
+$colors--dark-theme--icon: $colors--dark-theme--text-default !default;
+
 $colors-dark-theme--tinted-backgrounds: (
   neutral: (
     default: rgba(255, 255, 255, 0.15),
@@ -207,6 +225,150 @@ $colors--paper-theme--background-inputs: rgba($color-x-dark, $input-background-o
 $colors--paper-theme--background-active: rgba($color-x-dark, $active-background-opacity-amount) !default;
 $colors--paper-theme--background-hover: rgba($color-x-dark, $hover-background-opacity-amount) !default;
 
+// Current theme (based on CSS variables)
+// This is a mapping between SCSS variable and it's CSS property equivalent.
+// These SCSS variables should be used in components as colour values.
+// See _base_themes.scss for CSS custom properties definitions.
+$colors--theme--text-default: var(--vf-color-text-default);
+$colors--theme--text-muted: var(--vf-color-text-muted);
+$colors--theme--text-inactive: var(--vf-color-text-inactive);
+
+$colors--theme--link-default: var(--vf-color-link-default);
+$colors--theme--link-visited: var(--vf-color-link-visited);
+
+$colors--theme--background-default: var(--vf-color-background-default);
+$colors--theme--background-alt: var(--vf-color-background-alt);
+$colors--theme--background-inputs: var(--vf-color-background-inputs);
+$colors--theme--background-active: var(--vf-color-background-active);
+$colors--theme--background-hover: var(--vf-color-background-hover);
+$colors--theme--background-overlay: var(--vf-color-background-overlay);
+
+$colors--theme--border-default: var(--vf-color-border-default);
+$colors--theme--border-high-contrast: var(--vf-color-border-high-contrast);
+$colors--theme--border-low-contrast: var(--vf-color-border-low-contrast);
+
+$colors--theme--border-neutral: var(--vf-color-border-neutral);
+$colors--theme--border-positive: var(--vf-color-border-positive);
+$colors--theme--border-negative: var(--vf-color-border-negative);
+$colors--theme--border-information: var(--vf-color-border-information);
+$colors--theme--border-caution: var(--vf-color-border-caution);
+
+$colors--theme--background-neutral-default: var(--vf-color-background-neutral-default);
+$colors--theme--background-neutral-hover: var(--vf-color-background-neutral-hover);
+$colors--theme--background-neutral-active: var(--vf-color-background-neutral-active);
+$colors--theme--background-positive-default: var(--vf-color-background-positive-default);
+$colors--theme--background-positive-hover: var(--vf-color-background-positive-hover);
+$colors--theme--background-positive-active: var(--vf-color-background-positive-active);
+$colors--theme--background-caution-default: var(--vf-color-background-caution-default);
+$colors--theme--background-caution-hover: var(--vf-color-background-caution-hover);
+$colors--theme--background-caution-active: var(--vf-color-background-caution-active);
+$colors--theme--background-negative-default: var(--vf-color-background-negative-default);
+$colors--theme--background-negative-hover: var(--vf-color-background-negative-hover);
+$colors--theme--background-negative-active: var(--vf-color-background-negative-active);
+$colors--theme--background-information-default: var(--vf-color-background-information-default);
+$colors--theme--background-information-hover: var(--vf-color-background-information-hover);
+$colors--theme--background-information-active: var(--vf-color-background-information-active);
+
+// Theme colors exposed as CSS custom properties
+@mixin vf-theme-light--colors {
+  // SCSS variables need to be interpolated to work in CSS custom properties
+  --vf-color-text-default: #{$colors--light-theme--text-default};
+  --vf-color-text-muted: #{$colors--light-theme--text-muted};
+  --vf-color-text-inactive: #{$colors--light-theme--text-inactive};
+
+  --vf-color-link-default: #{$colors--light-theme--link-default};
+  --vf-color-link-visited: #{$colors--light-theme--link-visited};
+
+  --vf-color-background-default: #{$colors--light-theme--background-default};
+  --vf-color-background-alt: #{$colors--light-theme--background-alt};
+  --vf-color-background-inputs: #{$colors--light-theme--background-inputs};
+  --vf-color-background-active: #{$colors--light-theme--background-active};
+  --vf-color-background-hover: #{$colors--light-theme--background-hover};
+  --vf-color-background-overlay: #{$colors--light-theme--background-overlay};
+
+  --vf-color-border-default: #{$colors--light-theme--border-default};
+  --vf-color-border-high-contrast: #{$colors--light-theme--border-high-contrast};
+  --vf-color-border-low-contrast: #{$colors--light-theme--border-low-contrast};
+
+  --vf-color-border-neutral: #{map-get($colors-light-theme--tinted-borders, neutral)};
+  --vf-color-border-positive: #{map-get($colors-light-theme--tinted-borders, positive)};
+  --vf-color-border-negative: #{map-get($colors-light-theme--tinted-borders, negative)};
+  --vf-color-border-information: #{map-get($colors-light-theme--tinted-borders, information)};
+  --vf-color-border-caution: #{map-get($colors-light-theme--tinted-borders, caution)};
+
+  --vf-color-background-neutral-default: #{map-get($colors-light-theme--tinted-backgrounds, neutral, default)};
+  --vf-color-background-neutral-hover: #{map-get($colors-light-theme--tinted-backgrounds, neutral, 'hover')};
+  --vf-color-background-neutral-active: #{map-get($colors-light-theme--tinted-backgrounds, neutral, active)};
+  --vf-color-background-positive-default: #{map-get($colors-light-theme--tinted-backgrounds, positive, default)};
+  --vf-color-background-positive-hover: #{map-get($colors-light-theme--tinted-backgrounds, positive, 'hover')};
+  --vf-color-background-positive-active: #{map-get($colors-light-theme--tinted-backgrounds, positive, active)};
+  --vf-color-background-caution-default: #{map-get($colors-light-theme--tinted-backgrounds, caution, default)};
+  --vf-color-background-caution-hover: #{map-get($colors-light-theme--tinted-backgrounds, caution, 'hover')};
+  --vf-color-background-caution-active: #{map-get($colors-light-theme--tinted-backgrounds, caution, active)};
+  --vf-color-background-negative-default: #{map-get($colors-light-theme--tinted-backgrounds, negative, default)};
+  --vf-color-background-negative-hover: #{map-get($colors-light-theme--tinted-backgrounds, negative, 'hover')};
+  --vf-color-background-negative-active: #{map-get($colors-light-theme--tinted-backgrounds, negative, active)};
+  --vf-color-background-information-default: #{map-get($colors-light-theme--tinted-backgrounds, information, default)};
+  --vf-color-background-information-hover: #{map-get($colors-light-theme--tinted-backgrounds, information, 'hover')};
+  --vf-color-background-information-active: #{map-get($colors-light-theme--tinted-backgrounds, information, active)};
+}
+
+@mixin vf-theme-dark--colors {
+  // SCSS variables need to be interpolated to work in CSS custom properties
+  --vf-color-text-default: #{$colors--dark-theme--text-default};
+  --vf-color-text-muted: #{$colors--dark-theme--text-muted};
+  --vf-color-text-inactive: #{$colors--dark-theme--text-inactive};
+
+  --vf-color-link-default: #{$colors--dark-theme--link-default};
+  --vf-color-link-visited: #{$colors--dark-theme--link-visited};
+
+  --vf-color-background-default: #{$colors--dark-theme--background-default};
+  --vf-color-background-alt: #{$colors--dark-theme--background-alt};
+  --vf-color-background-inputs: #{$colors--dark-theme--background-inputs};
+  --vf-color-background-active: #{$colors--dark-theme--background-active};
+  --vf-color-background-hover: #{$colors--dark-theme--background-hover};
+  --vf-color-background-overlay: #{$colors--dark-theme--background-overlay};
+
+  --vf-color-border-default: #{$colors--dark-theme--border-default};
+  --vf-color-border-high-contrast: #{$colors--dark-theme--border-high-contrast};
+  --vf-color-border-low-contrast: #{$colors--dark-theme--border-low-contrast};
+
+  --vf-color-border-neutral: #{map-get($colors-dark-theme--tinted-borders, neutral)};
+  --vf-color-border-positive: #{map-get($colors-dark-theme--tinted-borders, positive)};
+  --vf-color-border-negative: #{map-get($colors-dark-theme--tinted-borders, negative)};
+  --vf-color-border-information: #{map-get($colors-dark-theme--tinted-borders, information)};
+  --vf-color-border-caution: #{map-get($colors-dark-theme--tinted-borders, caution)};
+
+  --vf-color-background-neutral-default: #{map-get($colors-dark-theme--tinted-backgrounds, neutral, default)};
+  --vf-color-background-neutral-hover: #{map-get($colors-dark-theme--tinted-backgrounds, neutral, hover)};
+  --vf-color-background-neutral-active: #{map-get($colors-dark-theme--tinted-backgrounds, neutral, active)};
+  --vf-color-background-positive-default: #{map-get($colors-dark-theme--tinted-backgrounds, positive, default)};
+  --vf-color-background-positive-hover: #{map-get($colors-dark-theme--tinted-backgrounds, positive, hover)};
+  --vf-color-background-positive-active: #{map-get($colors-dark-theme--tinted-backgrounds, positive, active)};
+  --vf-color-background-caution-default: #{map-get($colors-dark-theme--tinted-backgrounds, caution, default)};
+  --vf-color-background-caution-hover: #{map-get($colors-dark-theme--tinted-backgrounds, caution, hover)};
+  --vf-color-background-caution-active: #{map-get($colors-dark-theme--tinted-backgrounds, caution, active)};
+  --vf-color-background-negative-default: #{map-get($colors-dark-theme--tinted-backgrounds, negative, default)};
+  --vf-color-background-negative-hover: #{map-get($colors-dark-theme--tinted-backgrounds, negative, hover)};
+  --vf-color-background-negative-active: #{map-get($colors-dark-theme--tinted-backgrounds, negative, active)};
+  --vf-color-background-information-default: #{map-get($colors-dark-theme--tinted-backgrounds, information, default)};
+  --vf-color-background-information-hover: #{map-get($colors-dark-theme--tinted-backgrounds, information, hover)};
+  --vf-color-background-information-active: #{map-get($colors-dark-theme--tinted-backgrounds, information, active)};
+}
+
+@mixin vf-theme-paper--colors {
+  // paper theme is based on light theme with some background colours adjusted
+  @include vf-theme-light--colors;
+
+  // SCSS variables need to be interpolated to work in CSS custom properties
+  --vf-color-background-default: #{$color-paper};
+  --vf-color-background-alt: #{$color-x-light};
+
+  --vf-color-background-inputs: #{$colors--paper-theme--background-inputs};
+  --vf-color-background-active: #{$colors--paper-theme--background-active};
+  --vf-color-background-hover: #{$colors--paper-theme--background-hover};
+}
+
 // Branding colors
 $color-ubuntu: #e95420; // Ubuntu orange, should not be overridden
 $color-brand: $color-ubuntu !default;

package/scss/_settings_themes.scss

@@ -1,11 +1,11 @@
 $theme-default-forms: 'light' !default;
-$theme-default-hr: 'light' !default;
+$theme-default-hr: 'light' !default; // deprecated -- use new theme classes instead
 $theme-default-nav: 'light' !default;
-$theme-default-p-side-navigation: 'light' !default;
+$theme-default-p-side-navigation: 'light' !default; // deprecated -- use new theme classes instead
 $theme-default-p-search-box: 'light' !default;
-$theme-default-p-divider: 'light' !default;
-$theme-default-p-contextual-menu: 'light' !default;
-$theme-default-p-inline-list--middot: 'light' !default;
+$theme-default-p-divider: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-p-contextual-menu: 'light' !default; // deprecated -- use new theme classes instead
+$theme-default-p-inline-list--middot: 'light' !default; // deprecated -- use new theme classes instead
 $theme-default-p-button: 'light' !default;
 $theme-default-p-chip: 'light' !default;
-$theme-default-p-tabs: 'light' !default;
+$theme-default-p-tabs: 'light' !default; // deprecated -- use new theme classes instead