@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.4

package/src/components/bs5/sidenav/sidenav.scss

@@ -1,184 +1,269 @@
 .nav {
-    --#{$prefix}nav-link-color: var(--#{$prefix}brand-primary);
+  --#{$prefix}nav-link-color: var(--#{$prefix}brand-primary);
 }
 
 @include color-mode(dark) {
-    .nav {
-        --#{$prefix}nav-link-color: #FFF;
-    }
+  .nav {
+    --#{$prefix}nav-link-color: #fff;
+  }
 }
 
-
 .qld-side-navigation {
-
-    --sidenav-level-one-left-padding: 0;
-    --sidenav-level-two-padding: 2rem;
-    --sidenav-level-three-padding: 3.5rem;
-    --sidenav-navlink-padding: 1rem;
-
-    --sidenav-hover-bg: var(--#{$prefix}extra-light-grey);
-    --sidenav-hover-color: var(--#{$prefix}brand-primary);
-    --sidenav-hover-underline-color: var(--#{$prefix}color-default-color-light-underline-hover);
-    --sidenav-visited-color: var(--#{$prefix}color-default-color-light-link);
-    --sidenav-active-color: var(--#{$prefix}color-default-color-light-text-heading);
-
-    --sidenav-heading-border-color: #{$qld-brand-secondary};
-    --sidenav-item-border-color: #{$qld-soft-grey};
-    --sidenav-subitem-border-color: #{$qld-light-grey};
-
-    --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='var(--#{$prefix}color-light-border)' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
-
-    --sidenav-active-item-color: var(--light-text-heading);
-
+  --sidenav-level-one-left-padding: 0;
+  --sidenav-level-two-padding: 2rem;
+  --sidenav-level-three-padding: 3.5rem;
+  --sidenav-navlink-padding: 1rem;
+
+  --sidenav-hover-bg: var(--#{$prefix}extra-light-grey);
+  --sidenav-hover-color: var(--#{$prefix}brand-primary);
+  --sidenav-hover-underline-color: var(
+    --#{$prefix}color-default-color-light-underline-hover
+  );
+  --sidenav-visited-color: var(--#{$prefix}color-default-color-light-link);
+  --sidenav-active-color: var(
+    --#{$prefix}color-default-color-light-text-heading
+  );
+
+  --sidenav-heading-border-color: #{$qld-brand-secondary};
+  --sidenav-item-border-color: #{$qld-soft-grey};
+  --sidenav-subitem-border-color: #{$qld-light-grey};
+
+  --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='var(--#{$prefix}color-light-border)' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
+
+  --sidenav-active-item-color: var(--light-text-heading);
+
+  --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+  --#{$prefix}accordion-bg: var(--#{$prefix}body-bg);
+  --#{$prefix}accordion-border-color: var(
+    --#{$prefix}color-default-color-light-border-default
+  );
+  --#{$prefix}accordion-border-width: 1px;
+  --#{$prefix}accordion-border-radius: 0;
+  --#{$prefix}accordion-inner-border-radius: 0;
+  --#{$prefix}accordion-btn-padding-x: 1rem;
+  --#{$prefix}accordion-btn-padding-y: 1rem;
+  --#{$prefix}accordion-btn-color: var(--#{$prefix}link-color);
+  --#{$prefix}accordion-btn-bg: var(--#{$prefix}extra-light-grey);
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+      $accordion-button-active-icon
+    )};
+  --#{$prefix}accordion-btn-icon-width: 1.5rem;
+  --#{$prefix}accordion-btn-icon-transform: rotate(180deg);
+  --#{$prefix}accordion-btn-icon-transition: transform 0.25s ease-in;
+  --#{$prefix}accordion-btn-focus-box-shadow: none;
+  --#{$prefix}accordion-active-bg: var(--#{$prefix}accordion-btn-bg);
+  --#{$prefix}accordion-active-color: var(--#{$prefix}accordion-btn-color);
+  --#{$prefix}focus: var(--#{$prefix}light-focus);
+
+  .light & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}light-background);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}light-background-shade);
+    --#{$prefix}accordion-border-color: var(
+      --#{$prefix}color-default-color-light-border-light
+    );
+  }
+
+  .alt & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}light-grey-alt);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}grey);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}soft-grey);
+  }
+
+  // Shared 'Dark' theme variables
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+    --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+        $accordion-button-active-icon-dark
+      )};
+    --#{$prefix}accordion-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-btn-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-active-color: var(--#{$prefix}white);
+    --#{$prefix}focus: var(--#{$prefix}dark-focus);
+  }
+
+  // Theme specific variables
+  .dark & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}brand-primary);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-background-shade);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}dark-border);
+  }
+
+  .dark-alt & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}dark-blue);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-blue-shade);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}dark-alt-border);
+  }
 }
 
 .dark,
 .dark-alt {
-    .qld-side-navigation {
-        --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2309ACFE' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");        
-        
-        --sidenav-hover-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --sidenav-hover-color: var(--#{$prefix}white);
-        --sidenav-hover-underline-color:  var(--#{$prefix}color-default-color-dark-underline-hover);
-        --sidenav-visited-color: var(--#{$prefix}white);
-        --sidenav-active-color: var(--#{$prefix}color-default-color-dark-text-heading);
-
-        --sidenav-heading-border-color: var(--#{$prefix}brand-secondary);
-        --sidenav-item-border-color:    var(--#{$prefix}brand-primary-light);
-        --sidenav-subitem-border-color: var(--#{$prefix}brand-primary-light);
-        --sidenav-active-item-color: var(--#{$prefix}white);
-    }
+  .qld-side-navigation {
+    --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2309ACFE' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
+
+    --sidenav-hover-bg: var(
+      --#{$prefix}color-default-color-dark-background-default-shade
+    );
+    --sidenav-hover-color: var(--#{$prefix}white);
+    --sidenav-hover-underline-color: var(
+      --#{$prefix}color-default-color-dark-underline-hover
+    );
+    --sidenav-visited-color: var(--#{$prefix}white);
+    --sidenav-active-color: var(
+      --#{$prefix}color-default-color-dark-text-heading
+    );
+
+    --sidenav-heading-border-color: var(--#{$prefix}brand-secondary);
+    --sidenav-item-border-color: var(--#{$prefix}brand-primary-light);
+    --sidenav-subitem-border-color: var(--#{$prefix}brand-primary-light);
+    --sidenav-active-item-color: var(--#{$prefix}white);
+  }
 }
 
-@include color-mode(dark) {
-
-}
-
-
 .qld-side-navigation {
-
-    .nav-title {
-        color: var(--#{$prefix}-headings-color);
-        line-height: 1.5;
-        margin: 0;
-        border-bottom: 2px solid var(--sidenav-heading-border-color);
-
-        a {
-            color: var(--#{$prefix}headings-color);
-            text-decoration: none;
-            font-weight: inherit;
-            font-size: 1rem;
-        }
-
-        .nav-link {
-            &:visited {
-                color: var(--#{$prefix}headings-color);
-            }
-        }
+  border: var(--qld-accordion-border-width) solid
+    var(--qld-accordion-border-color);
+  background-color: var(--#{$prefix}accordion-bg);
+
+  .nav-title {
+    color: var(--#{$prefix}-headings-color);
+    line-height: 1.5;
+    margin: 0;
+    border-bottom: 2px solid var(--sidenav-heading-border-color);
+
+    a {
+      color: var(--#{$prefix}headings-color);
+      text-decoration: none;
+      font-weight: inherit;
+      font-size: 1rem;
     }
 
     .nav-link {
-        padding: var(--sidenav-navlink-padding);
-        font-size: 0.875rem;
-        color: var(--body-color);
-        text-decoration: none;
-        transition-duration: 0s;
-
-        //.nav-link Hover state
-        &:hover {
-            background-color: var(--sidenav-hover-bg);
-            color: var(--sidenav-hover-color);
-            text-decoration: underline;
-            text-underline-offset: 0.25rem;
-            text-decoration-thickness: 2px;
-        }
-    }
+      line-height: 1.5rem;
 
-    a.nav-link {
-        &:visited {
-            color: var(--sidenav-visited-color);
-            &:hover {
-                color: var(--sidenav-hover-color);
-                text-decoration-color: var(--sidenav-hover-underline-color);
-            }
-        }
+      &:visited {
+        color: var(--#{$prefix}headings-color);
+      }
+    }
+  }
+
+  .nav-link {
+    padding: var(--sidenav-navlink-padding);
+    font-size: 0.875rem;
+    color: var(--body-color);
+    text-decoration: none;
+    transition-duration: 0s;
+    line-height: 1.25rem;
+
+    //.nav-link Hover state
+    &:hover {
+      background-color: var(--sidenav-hover-bg);
+      color: var(--sidenav-hover-color);
+      text-decoration: underline;
+      text-underline-offset: 0.25rem;
+      text-decoration-thickness: 2px;
     }
 
-    .nav-item.active {
-        color: var(--sidenav-active-color);
+    &:focus-visible {
+      box-shadow: none;
     }
+  }
+
+  a.nav-link {
+    &:visited {
+      color: var(--sidenav-visited-color);
+      &:hover {
+        color: var(--sidenav-hover-color);
+        text-decoration-color: var(--sidenav-hover-underline-color);
+      }
+    }
+  }
 
-    //Side navigation (ul.nav) 
-    
-    ul.nav {
-        
-        //Side navigation all items remove all bullets
-        //Reset all left padding  
-        ul, ol {
-            list-style: none;
-            padding-left: 0;
-        }
+  .nav-item.active {
+    color: var(--sidenav-active-color);
+  }
 
-        display: flex;
-        flex-direction: column;
+  //Side navigation (ul.nav)
 
-        //Specifically target the first level LI's only
-        > li.nav-item {
+  ul.nav {
+    //Side navigation all items remove all bullets
+    //Reset all left padding
+    ul,
+    ol {
+      list-style: none;
+      padding-left: 0;
+    }
 
-            border-top: 1px solid var(--sidenav-item-border-color);
+    display: flex;
+    flex-direction: column;
 
-            &:first-child {
-                border-top: none;
-            }
+    //Specifically target the first level LI's only
+    > li.nav-item {
+      border-top: 1px solid var(--sidenav-item-border-color);
 
-        }
-
-        //All nav items, all levels
-        li.nav-item {
-
-            //Level two menu LI's
-            > ul > li { border-top: 1px solid var(--sidenav-subitem-border-color) }
-            > ul > li  > .nav-link { padding-left: var( --sidenav-level-two-padding); }
-            
-            //Level three menu LI's
-            > ul > li > ul > li { border-top: none }
-            > ul > li > ul > li > .nav-link {  padding-left: var( --sidenav-level-three-padding); }
-
-             //li .nav-link.active
-             &.active {
-                .nav-link {
-                    font-weight: 600;
-                    color: var(--light-text-heading);
-                    text-decoration: none;
-                    pointer-events: none;
-                }
-            }
+      &:first-child {
+        border-top: none;
+      }
+    }
 
+    //All nav items, all levels
+    li.nav-item {
+      //Level two menu LI's
+      > ul > li {
+        border-top: 1px solid var(--sidenav-subitem-border-color);
+      }
+      > ul > li > .nav-link {
+        padding-left: var(--sidenav-level-two-padding);
+      }
+
+      //Level three menu LI's
+      > ul > li > ul > li {
+        border-top: none;
+      }
+      > ul > li > ul > li > .nav-link {
+        padding-left: var(--sidenav-level-three-padding);
+      }
+
+      //li .nav-link.active
+      &.active {
+        .nav-link {
+          font-weight: 600;
+          color: var(--light-text-heading);
+          text-decoration: none;
+          pointer-events: none;
         }
+      }
+    }
 
-        //Add stalks to a UL menu (usually level 3) 
-        // <ul class="nav ... with-stalks">...</ul> 
-        .with-stalks {
-
-            .nav-item {
-                
-                position: relative;
-            
-                &:before {
-                    content: "";
-                    position: absolute;
-                    background: escape-svg(var(--sidenav-submenu-divider));
-                    background-repeat: no-repeat;
-                    // background-position: center center;
-                    top: 1rem;
-                    left: 2rem;
-                    bottom: 0;
-                    width: 1rem;
-                }
-            }
+    //Add stalks to a UL menu (usually level 3)
+    // <ul class="nav ... with-stalks">...</ul>
+    .with-stalks {
+      .nav-item {
+        position: relative;
+
+        &:before {
+          content: "";
+          position: absolute;
+          background: escape-svg(var(--sidenav-submenu-divider));
+          background-repeat: no-repeat;
+          // background-position: center center;
+          top: 1rem;
+          left: 2rem;
+          bottom: 0;
+          width: 1rem;
         }
-
+      }
     }
-
+  }
+  .nav-wrapper {
+    padding: 0.5rem 1rem;
+  }
+  @include media-breakpoint-up(lg) {
+    border: none;
+
+    .nav-wrapper {
+      padding: 0;
+    }
+  }
 }
-

package/src/components/bs5/skiplinks/skipLinks.functions.js

@@ -1,5 +1,3 @@
-import { isFocusable } from "../../../js/utils";
-
 /**
  * Checks whether target elements in a list of skip links are valid - ie they can receive focus.
  * @returns {boolean} Return true if skip links are valid, false if there is a problem.
@@ -17,13 +15,6 @@ export function validateSkipLinks() {
       );
       return false;
     }
-    // check if target is focusable
-    if (!isFocusable(target)) {
-      console.error(
-        `A skip link with label "${item.textContent}" is targeting a non-focusable element with id "${targetId}". Make sure the element is natively focusable, or assign a tab index of -1.`,
-      );
-      return false;
-    }
     return true;
   });
 }

package/src/components/bs5/skiplinks/skipLinks.test.js

@@ -72,7 +72,6 @@ describe("Skip Links", () => {
 
     expect(resolvedMessages).toEqual([
       'A skip link with label "Skip to nowhere" is targeting a non-existent element with id "i-dont-exist".',
-      'A skip link with label "Skip to unfocusable" is targeting a non-focusable element with id "unfocusable". Make sure the element is natively focusable, or assign a tab index of -1.',
     ]);
 
     // JSDOM does not implement navigation so must manual test for main functionality

package/src/components/bs5/tabs/tabs.scss

@@ -1,27 +1,27 @@
 .qld-tabs {
-  --accent-colour: var(--qld-brand-secondary);
+  --accent-colour: var(--#{$prefix}brand-secondary);
   --border-radius: #{$border-radius};
   --section-content-padding: 4rem;
   // tabs colours
-  --default-bg-colour: var(--qld-default-background);
-  --light-bg-colour: var(--qld-light-background);
-  --alt-bg-colour: var(--qld-light-alt-background);
-  --dark-bg-colour: var(--qld-dark-background);
-  --dark-alt-bg-colour: var(--qld-dark-alt-background);
-  --light-border-colour: var(--qld-soft-grey);
-  --light-colour: var(--qld-light-text-heading);
-  --dark-border-colour: var(--qld-dark-alt-border);
-  --dark-colour: var(--qld-dark-text);
+  --default-bg-colour: var(--#{$prefix}default-background);
+  --light-bg-colour: var(--#{$prefix}light-background);
+  --alt-bg-colour: var(--#{$prefix}light-alt-background);
+  --dark-bg-colour: var(--#{$prefix}dark-background);
+  --dark-alt-bg-colour: var(--#{$prefix}dark-alt-background);
+  --light-border-colour: var(--#{$prefix}soft-grey);
+  --light-colour: var(--#{$prefix}light-text-heading);
+  --dark-border-colour: var(--#{$prefix}dark-alt-border);
+  --dark-colour: var(--#{$prefix}dark-text);
   --icon-dropshadow:
     0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
-  --focus-default-colour: var(--qld-light-focus);
+  --focus-default-colour: var(--#{$prefix}light-focus);
   --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill=''><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
   // bootstrap variables
   --#{$prefix}nav-tabs-border-radius: var(--border-radius);
-  --#{$prefix}nav-tabs-link-hover-border-color: var(--qld-tab-background-hover);
-  --#{$prefix}nav-tabs-link-active-color: var(--qld-tab-hover-text-color);
-  --#{$prefix}nav-tabs-link-active-bg: var(--qld-tab-background);
-  --#{$prefix}nav-tabs-link-active-border-color: var(--qld-border-color);
+  --#{$prefix}nav-tabs-link-hover-border-color: var(--#{$prefix}tab-background-hover);
+  --#{$prefix}nav-tabs-link-active-color: var(--#{$prefix}tab-hover-text-color);
+  --#{$prefix}nav-tabs-link-active-bg: var(--#{$prefix}tab-background);
+  --#{$prefix}nav-tabs-link-active-border-color: var(--#{$prefix}border-color);
   // animation
   --fade-time: 0.15s;
 
@@ -30,60 +30,62 @@
   .default &,
   .default,
   &.default {
-    --qld-tab-background: var(--qld-default-background-shade);
+    --qld-tab-background: var(--#{$prefix}default-background-shade);
   }
   .alt &,
   .alt,
   &.alt {
-    --qld-body-bg: var(--qld-light-alt-background);
-    --qld-border-color: var(--qld-soft-grey);
-    --qld-tab-background: var(--qld-light-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}light-alt-background);
+    --qld-border-color: var(--#{$prefix}soft-grey);
+    --qld-tab-background: var(--#{$prefix}light-alt-background-shade);
   }
   .light &,
   .light,
   &.light {
     --qld-body-bg: #eff4f9;
     --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
-    --qld-tab-background: var(--qld-light-background-shade);
-    --qld-tab-background-hover: var(--qld-button-dark-blue);
+    --qld-tab-background: var(--#{$prefix}light-background-shade);
+    --qld-tab-background-hover: var(--#{$prefix}button-dark-blue);
   }
   .dark &,
   .dark,
   &.dark {
-    --qld-border-color: var(--qld-dark-border);
-    --qld-tab-background: var(--qld-dark-hover);
+    --qld-border-color: var(--#{$prefix}dark-border);
+    --qld-tab-background: var(--#{$prefix}dark-hover);
   }
   .dark-alt &,
   .dark-alt,
   &.dark-alt {
-    --qld-body-bg: var(--qld-dark-alt-background);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-background: var(--qld-dark-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}dark-alt-background);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-background: var(--#{$prefix}dark-alt-background-shade);
   }
   &.default,
   &.light,
   &.alt {
     --qld-tab-hover-text-color: #{$color-default-color-light-link-on-action};
-    --qld-tab-icon-color: var(--qld-light-action-secondary);
-    --qld-tab-background-hover: var(--qld-light-action-primary-hover);
+    --qld-tab-icon-color: var(--#{$prefix}light-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}light-action-primary-hover);
     --qld-border-color: var(--light-border-colour);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
-    --qld-tab-focus-colour: var(--qld-light-focus);
-    --qld-tab-active-focus-colour: var(--qld-light-focus);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-secondary);
+    --qld-tab-focus-colour: var(--#{$prefix}light-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}light-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}nav-link-color);
   }
   &.dark,
   &.dark-alt {
-    --qld-tab-background-hover: var(--qld-dark-action-primary-hover);
-    --qld-tab-hover-text-color: var(--qld-text-darkest);
-    --qld-tab-icon-color: var(--qld-dark-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}dark-action-primary-hover);
+    --qld-tab-hover-text-color: var(--#{$prefix}text-darkest);
+    --qld-tab-icon-color: var(--#{$prefix}dark-action-secondary);
     --qld-tab-disabled-colour: #{$qld-hint-text-color-muted};
-    --qld-tab-text-colour-heading: var(--qld-dark-text);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-text);
-    --qld-tab-focus-colour: var(--qld-dark-focus);
-    --qld-tab-active-focus-colour: var(--qld-dark-focus);
+    --qld-tab-text-colour-heading: var(--#{$prefix}dark-text);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-text);
+    --qld-tab-focus-colour: var(--#{$prefix}dark-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}dark-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}dark-text);
   }
   &.container-tabs {
     --scroll-distance: 0;
@@ -417,7 +419,7 @@
           display: flex;
           gap: 0.5rem;
           white-space: nowrap;
-          color: var(--qld-nav-link-color);
+          color: var(--nav-link-color);
           align-items: anchor-center;
           i {
             font-size: 1.125rem;
@@ -544,6 +546,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--default-bg-colour);
       }
@@ -559,6 +562,7 @@
       --qld-scroll-bg-color: var(--light-bg-colour);
       --qld-scroll-area-bg-color: var(--light-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--light-bg-colour);
       }
@@ -574,6 +578,7 @@
       --qld-scroll-bg-color: var(--alt-bg-colour);
       --qld-scroll-area-bg-color: var(--alt-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--alt-bg-colour);
       }
@@ -587,6 +592,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--dark-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       .tabs-area {
         background-color: var(--dark-bg-colour);
       }
@@ -599,6 +605,7 @@
       --qld-tab-text-colour-heading: var(--qld-dark-text);
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       color: var(--qld-body-color);
       background-color: var(--qld-dark-alt-background);
       .tabs-area {

package/src/components/common/layout/container.scss

@@ -19,4 +19,9 @@
   max-width: var(--qld-container-max-width);
   padding-left: var(--qld-container-padding-x);
   padding-right: var(--qld-container-padding-x);
+
+  &.is-extended {
+    // Maximum width for extended containers, 100rem (or 1600px)
+    --qld-container-max-width: 100rem;
+  }
 }

package/src/components/common/layout/content.scss

@@ -1,13 +1,21 @@
-.qld-content-body {
-  .emphasis {
-    margin: 4rem -2rem;
+.content-emphasis {
+  // Negative margin on the emphasis section. Capped to outer container padding,
+  // to prevent overflow and horizontal scrollbar
+  --margin-offset: max(-2rem, calc(var(--qld-container-padding-x) * -1));
+
+  margin-left: var(--margin-offset);
+  margin-right: var(--margin-offset);
+
+  padding: 2.5rem var(--qld-container-padding-x);
+
+  @include media-breakpoint-up(lg) {
     padding: 4rem 2rem;
     overflow: visible;
+  }
 
-    & p:last-child,
-    & ul:last-child,
-    & ol:last-child {
-      margin-bottom: 0;
-    }
+  & p:last-child,
+  & ul:last-child,
+  & ol:last-child {
+    margin-bottom: 0;
   }
 }