Merge branch 'main' into hoc-quote-wrapper-macro

Author: jmuzina

.github/.jira_sync_config.yaml

@@ -28,9 +28,9 @@ settings:
   sync_comments: true
 
   # (Optional) (Default: None) Parent Epic key to link the issue to
-  epic_key: "WD-189"
+  epic_key: "WD-15821"
 
   # (Optional) Dictionary mapping GitHub issue labels to Jira issue types.
   # If label on the issue is not in specified list, this issue will be created as a Bug
   label_mapping:
-    enhancement: Story
+    enhancement: Story

redirects.yaml

@@ -9,6 +9,7 @@
 /docs/upgrade-guide-v3: /docs/migration-guide-to-v3
 /docs/examples/patterns/x-small-capitalised: /docs/examples/patterns/text-small-caps
 /docs/base/separators: /docs/patterns/rule
+/docs/base/paper: /docs/base/themes
 
 # redirects based on class names
 /docs/patterns/code-snippet: /docs/base/code

releases.yml

@@ -4,6 +4,14 @@
       url: /docs/patterns/quote-wrapper
       status: New
       notes: The quote wrapper pattern macro has been published.
+    - component: Grid
+      url: /docs/patterns/grid
+      status: New
+      notes: We've created a new grid component. It is a replacement for the <a href="/docs/patterns/grid-legacy">legacy grid</a> with 4 columns on small/medium and 8 columns on large screens.
+    - component: Legacy grid
+      url: /docs/patterns/grid-legacy
+      status: Deprecated
+      notes: We've deprecated the legacy grid component. Use the new <a href="/docs/patterns/grid">grid component</a> instead.
 - version: 4.17.0
   features:
     - component: Tiered list

scss/_base_grid-definitions.scss

@@ -29,6 +29,7 @@
     }
   }
 
+  // Deprecated, use new 4/4/8 grid %vf-grid-row instead
   %vf-row {
     @extend %fixed-width-container;
 
@@ -70,6 +71,47 @@
     }
   }
 
+  %vf-grid-row {
+    @extend %fixed-width-container;
+
+    @supports (display: grid) {
+      display: grid;
+      grid-gap: 0 map-get($grid-gutter-widths, small);
+      grid-template-columns: repeat($grid-8-columns-small, minmax(0, 1fr));
+      grid-template-rows: auto;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: $grid-max-width;
+
+      & > * {
+        grid-column-end: span $grid-8-columns-small;
+      }
+
+      [class*='#{$grid-8-column-prefix}'] {
+        grid-column-start: auto;
+      }
+
+      // set static gutter width per breakpoint
+      @media (min-width: $threshold-4-6-col) {
+        grid-gap: 0 map-get($grid-gutter-widths, default);
+        grid-template-columns: repeat($grid-8-columns-medium, minmax(0, 1fr));
+
+        & > * {
+          grid-column-end: span $grid-8-columns-medium;
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        grid-gap: 0 map-get($grid-gutter-widths, default);
+        grid-template-columns: repeat($grid-8-columns, minmax(0, 1fr));
+
+        & > * {
+          grid-column-end: span $grid-8-columns;
+        }
+      }
+    }
+  }
+
   %vf-grid-container-padding {
     // set static outside padding per breakpoint
     padding-left: map-get($grid-margin-widths, small);

scss/_base_hr.scss

@@ -17,6 +17,7 @@
   }
 
   .row &,
+  .grid-row &,
   .u-fixed-width & {
     width: 100%;
   }

scss/_base_icon-definitions.scss

@@ -863,7 +863,7 @@
 
 // arrow-bottom-left
 @function vf-icon-arrow-bottom-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M5.6 11.4h5.3v1.5H3V5.1h1.5v5.3l7.9-7.9 1.1 1.1-7.9 7.9Z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M5.594 11.431h5.284v1.5H3.033V5.086h1.5v5.285l7.905-7.904 1.06 1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-bottom-left($color: $colors--light-theme--icon) {
@@ -876,7 +876,7 @@
 
 // arrow-bottom-right
 @function vf-icon-arrow-bottom-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M10.4 11.5H5.1V13h7.8V5.2h-1.5v5.3l-7.8-8-1.1 1.1z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M10.406 11.503H5.122v1.5h7.845V5.158h-1.5v5.285L3.563 2.538 2.503 3.6z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-bottom-right($color: $colors--light-theme--icon) {
@@ -889,7 +889,7 @@
 
 // arrow-down
 @function vf-icon-arrow-down-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 12.117 3.514 8.381l-1.06 1.06L7.47 14.46l.53.53.53-.53 5.018-5.017-1.061-1.06-3.737 3.736V.94h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 12.117 3.514 8.381l-1.06 1.06L8 14.99l5.548-5.547-1.061-1.06-3.737 3.736V.94h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-down($color: $colors--light-theme--icon) {
@@ -902,7 +902,7 @@
 
 // arrow-left
 @function vf-icon-arrow-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m3.847 8.714 3.737 3.737-1.061 1.06-5.017-5.017-.53-.53.53-.53 5.017-5.017 1.06 1.06-3.736 3.737h11.178v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m3.847 8.714 3.736 3.737-1.06 1.06L.976 7.964l5.547-5.547 1.06 1.06-3.736 3.737h11.178v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-left($color: $colors--light-theme--icon) {
@@ -915,7 +915,7 @@
 
 // arrow-right
 @function vf-icon-arrow-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m12.154 8.714-3.737 3.737 1.06 1.06 5.018-5.017.53-.53-.53-.53-5.017-5.017-1.06 1.06 3.736 3.737H.976v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='m12.154 8.714-3.737 3.737 1.06 1.06 5.548-5.547-5.547-5.547-1.06 1.06 3.736 3.737H.976v1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-right($color: $colors--light-theme--icon) {
@@ -928,7 +928,7 @@
 
 // arrow-top-left
 @function vf-icon-arrow-top-left-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M5.6 4.5h5.3V3H3v7.8h1.5V5.5l7.9 7.9 1.1-1.1-7.9-7.9Z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M5.594 4.497h5.284v-1.5H3.033v7.845h1.5V5.557l7.905 7.904 1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-top-left($color: $colors--light-theme--icon) {
@@ -941,7 +941,7 @@
 
 // arrow-top-right
 @function vf-icon-arrow-top-right-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='M10.4 4.5H5.1V3h7.8v7.8h-1.5V5.5l-7.9 7.9-1.1-1.1 7.9-7.9Z'/%3Eą%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M10.406 4.497H5.122v-1.5h7.845v7.845h-1.5V5.557l-7.904 7.904-1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-top-right($color: $colors--light-theme--icon) {
@@ -954,7 +954,7 @@
 
 // arrow-up
 @function vf-icon-arrow-up-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 3.811 3.514 7.547l-1.06-1.06L7.47 1.47 8 .94l.53.53 5.018 5.017-1.061 1.06L8.75 3.811v11.178h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M7.25 3.811 3.514 7.547l-1.06-1.06L8 .94l5.548 5.547-1.061 1.06L8.75 3.811v11.178h-1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-arrow-up($color: $colors--light-theme--icon) {
@@ -1006,7 +1006,7 @@
 
 // certification
 @function vf-icon-certification-url($color) {
-  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='#{vf-url-friendly-color($color)}' d='m10.7 1.1.3.5c.2.3.5.5.8.6h.5c.6.3 1.1.9 1 1.6v.6c0 .4 0 .7.3 1l.3.4c.4.5.4 1.2 0 1.7l-.3.4c-.2.3-.3.6-.3 1v.6c0 .7-.4 1.2-1 1.4h-.5c-.3.2-.6.4-.8.6v4l-3-1.6-3 1.6v-3.9c-.2-.3-.5-.5-.8-.6h-.5c-.6-.3-1.1-.9-1-1.6v-.6c0-.4 0-.7-.3-1l-.3-.4c-.4-.5-.4-1.2 0-1.7l.3-.4c.2-.3.3-.6.3-1v-.6c0-.7.4-1.2 1-1.4h.5c.3-.2.6-.5.8-.8l.3-.5C5.7.5 6.3.2 7 .5l.5.2c.3.1.7.1 1 0L9 .5c.6-.2 1.3 0 1.7.5ZM9.5 2l-.4.2c-.6.2-1.3.2-1.9 0H7L6.5 2l-.3.4q-.6.75-1.5 1.2h-.2l-.5.2v.5c0 .6-.1 1.3-.5 1.8v.2c-.1 0-.4.4-.4.4l.3.4q.6.75.6 1.8v.7h.5c.6.3 1.2.7 1.6 1.2v.2c.1 0 .4.4.4.4l.5-.2c.6-.2 1.3-.2 1.9 0h.2l.4.2.3-.4q.6-.75 1.5-1.2h.2l.5-.2v-.5c0-.6.1-1.3.5-1.8v-.2c.1 0 .4-.4.4-.4l-.3-.4q-.6-.75-.6-1.8v-.7h-.5c-.6-.3-1.2-.7-1.6-1.2v-.2c-.1 0-.4-.4-.4-.4'/%3E%3Cpath d='m7.8 7.6 1.8-2.7-2.2 3.4L6 7.2l.7.6.7.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='m7.5 9.4-2-1.7 1-1.1.7.6L9 4.5l1.2.9z'/%3E%3C/svg%3E");
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M6.488.475a1.4 1.4 0 0 0-1.193.627l-.307.462c-.199.3-.5.519-.847.616l-.536.15A1.404 1.404 0 0 0 2.58 3.742l.024.555c.015.36-.101.714-.325.996l-.343.436a1.4 1.4 0 0 0 0 1.744l.343.435c.224.282.34.637.325.996l-.024.555a1.404 1.404 0 0 0 1.025 1.412l.536.15c.346.097.648.316.847.616l.016.023v3.887l3-1.588 3 1.588v-3.899l.1-.134c.194-.237.458-.41.755-.493l.536-.15A1.404 1.404 0 0 0 13.42 9.46l-.024-.555c-.015-.36.101-.714.325-.996l.343-.435a1.4 1.4 0 0 0 0-1.744l-.343-.436a1.5 1.5 0 0 1-.325-.996l.024-.555a1.404 1.404 0 0 0-1.025-1.412l-.536-.15a1.5 1.5 0 0 1-.847-.616l-.307-.462a1.404 1.404 0 0 0-1.66-.54l-.522.194a1.5 1.5 0 0 1-1.046 0L6.955.563a1.4 1.4 0 0 0-.467-.088m.016 1.52.45.167.204.068a3 3 0 0 0 1.889-.068l.45-.168.265.4.127.176c.394.51.942.88 1.566 1.055l.463.129-.02.48-.002.215c.02.644.246 1.268.649 1.776l.297.375-.297.377-.127.173a3 3 0 0 0-.52 1.817l.02.478-.463.131-.205.065a3 3 0 0 0-1.488 1.166l-.266.398-.45-.166-.204-.068a3 3 0 0 0-1.889.068l-.45.166-.265-.398-.127-.176a3 3 0 0 0-1.566-1.055l-.465-.13.022-.48.002-.214a3 3 0 0 0-.649-1.775L3.156 6.6l.3-.375.128-.174a3 3 0 0 0 .518-1.817l-.022-.48.465-.129.205-.066a3 3 0 0 0 1.488-1.164ZM8.96 4.528 7.199 7.19l-.681-.59-.983 1.133.684.592 1.289 1.117.943-1.423 1.76-2.663Z'/%3E%3C/svg%3E");
 }
 
 @mixin vf-icon-certification($color: $colors--light-theme--icon) {

scss/_layouts_fluid-breakout.scss

@@ -69,6 +69,7 @@
         }
       }
 
+      // TODO implement new 4/4/8 grid (.grid-row)
       .row {
         max-width: 100%;
         padding-left: 0;

scss/_layouts_full-width.scss

@@ -19,7 +19,7 @@
     }
 
     .l-full-width__sidebar {
-      background: $color-light;
+      background: $colors--theme--background-alt;
 
       // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
       $navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);
@@ -65,6 +65,7 @@
         // grid should align to the left (no left margin)
         // TODO: ideally this should be applied to %fixed-width-container
         .row,
+        .grid-row,
         .u-fixed-width {
           margin-left: 0;
         }
@@ -84,6 +85,7 @@
 
       .l-main {
         .row,
+        .grid-row,
         .u-fixed-width {
           margin-left: auto;
         }

scss/_patterns_badge.scss

@@ -3,10 +3,10 @@
 @mixin vf-p-badge {
   %vf-badge {
     @extend %x-small-text;
-    background-color: $colors--light-theme--text-default;
+    background-color: $colors--theme--text-default; // inverse the theme by using the text color
     border-radius: 1rem;
     box-sizing: content-box;
-    color: $color-x-light;
+    color: $colors--theme--background-default; // inverse the theme by using the baackground color
     margin-bottom: 0;
     max-width: 4ch;
     overflow: hidden;
@@ -19,7 +19,8 @@
   }
 
   .p-badge--negative {
-    background-color: $color-negative;
+    background-color: $colors--theme--button-negative-default;
+    color: $colors--theme--button-negative-text;
   }
 
   .p-chip,

scss/_patterns_equal-height-row.scss

@@ -25,6 +25,7 @@
 @mixin vf-p-equal-height-row {
   .p-equal-height-row,
   .p-equal-height-row--wrap {
+    // TODO use new 4/4/8 grid (`%vf-grid-row`)
     @extend %vf-row;
 
     position: relative;
@@ -139,6 +140,7 @@
   // ADVANCED GRID SUPPORT
 
   // Support for 25-75 split on large screen size
+  // TODO implement with new 4/4/8 grid (.grid-row)
   .row--25-75-on-large > .col,
   .row > .col-9 {
     & .p-equal-height-row,