@qld-gov-au/qgds-bootstrap5 2.0.12 → 2.1.1

package/src/components/bs5/table/table.scss

@@ -1,93 +1,103 @@
 .qld-table {
-
-    border: 1px solid var(--qld-light-grey);
+  border: 1px solid var(--qld-neutral-lighter);
+  border-radius: 0.75rem;
+  margin-bottom: 1rem;
+
+  // DS includes a version of the table without borders ("quiet table").
+  // This is achieved by setting the border on a wrapping .qld-table--borderless class
+  &--borderless {
+    border: 1px solid transparent;
+  }
+
+  .table {
+    --qld-table-border-color: var(--qld-neutral-lighter);
+    --qld-table-header-color: var(--qld-light-text-heading);
+    --qld-table-cell-color: var(--qld-light-text-text);
+    --qld-table-striped-bg: var(--qld-neutral-lightest);
+
+    margin-bottom: 0;
     border-radius: 0.75rem;
-    margin-bottom: 1rem;
 
-    // DS includes a version of the table without borders ("quiet table").
-    // This is achieved by setting the border on a wrapping .qld-table--borderless class
-    &--borderless {
-        border: 1px solid transparent;
+    //required to maintain effective border-radius on the table
+    overflow: hidden;
+
+    // Override Bootstrap's default odd-row striping to use even rows
+    &.table-striped {
+      > tbody > tr:nth-of-type(odd) > * {
+        --qld-table-accent-bg: transparent;
+        --qld-table-bg-type: transparent;
+      }
+
+      > tbody > tr:nth-of-type(even) > * {
+        --qld-table-accent-bg: var(--qld-table-striped-bg);
+        --qld-table-bg-type: var(--qld-table-striped-bg);
+      }
+    }
+
+    caption {
+      caption-side: top;
+      color: var(--qld-headings-color);
+      padding: 0.75rem;
+      line-height: 2rem;
+      font-weight: 600;
+      font-size: 1.25rem;
+      border-bottom: 1px solid var(--qld-table-border-color);
+    }
+
+    .sub-caption {
+      color: var(--qld-light-text-lighter);
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+      display: table-row;
     }
 
-    .table {
-        --qld-table-border-color: var(--qld-light-grey);
-        --qld-table-header-color: var(--qld-light-text-heading);
-        --qld-table-cell-color: var(--qld-light-text-text);
-        --qld-table-striped-bg: var(--qld-extra-light-grey);
-
-        margin-bottom: 0;
-        border-radius: 0.75rem;
-
-        //required to maintain effective border-radius on the table
-        overflow: hidden;
-
-        caption {
-            caption-side: top;
-            color: var(--qld-headings-color);
-            padding: 0.75rem;
-            line-height: 2rem;
-            font-weight: 600;
-            font-size: 1.25rem;
-            border-bottom: 1px solid var(--qld-table-border-color);
-        }
-
-        .sub-caption {
-            color: var(--qld-dark-grey-muted);
-            font-size: 0.875rem;
-            font-weight: 400;
-            line-height: 1.25rem;
-            display: table-row;
-        }
-
-        thead th,
-        thead td {
-            border-bottom: 2px solid var(--qld-brand-secondary);
-        }
-
-        th {
-            color: var(--qld-table-header-color);
-            padding: 1.25rem 0.75rem; 
-        }
-
-        td {
-            color: var(--qld-table-cell-color);
-            padding: 0.75rem; 
-        }
-
-        tbody tr {
-            border-bottom: 1px solid var(--qld-table-border-color);
-        }
-
-        tfoot th,
-        tfoot td {
-            border-top: 2px solid $qld-brand-secondary;
-            border-bottom: 0;
-            font-weight: 600;
-            padding: 0.75rem;
-        }
+    thead th,
+    thead td {
+      border-bottom: 2px solid var(--qld-light-accent);
+    }
+
+    th {
+      color: var(--qld-table-header-color);
+      padding: 1.25rem 0.75rem;
+    }
 
+    td {
+      color: var(--qld-table-cell-color);
+      padding: 0.75rem;
     }
 
+    tbody tr {
+      border-bottom: 1px solid var(--qld-table-border-color);
+    }
+
+    tfoot th,
+    tfoot td {
+      border-top: 2px solid var(--qld-light-accent);
+      border-bottom: 0;
+      font-weight: 600;
+      padding: 0.75rem;
+    }
+  }
+
+  //Build a bootstrap ".table-dark" class dynamically, passing in a background colour
+  @include table-variant("dark", $color-default-color-dark-background-default);
+
+  //Then, we extend .table-dark with some additional rules
+  .table-dark {
+    --qld-table-border-color: var(--qld-dark-border);
+    --qld-table-header-color: var(--qld-dark-text-heading);
+    --qld-table-cell-color: var(--qld-dark-text-text);
+    --qld-table-striped-bg: var(--qld-dark-background-shade);
+
+    caption,
+    .sub-caption {
+      background-color: var(--qld-dark-background);
+      color: var(--qld-dark-text-text);
+    }
 
-    //Build a bootstrap ".table-dark" class dynamically, passing in a background colour
-    @include table-variant("dark", #09549F);
-
-    //Then, we extend .table-dark with some additional rules 
-    .table-dark {
-        --qld-table-border-color: var(--qld-dark-border);
-        --qld-table-header-color: var(--qld-white);
-        --qld-table-cell-color: var(--qld-white);
-        --qld-table-striped-bg: var(--qld-extra-light-grey);
-        
-        caption,
-        .sub-caption {
-            background-color: #09549F;
-            color: #FFF;
-        }
-
-        thead th {
-            background-color: #04498F;
-        }
+    thead th {
+      background-color: var(--qld-dark-background-shade);
     }
-}
+  }
+}

package/src/components/common/focus-styles/focusStyles.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, Controls } from "@storybook/addon-docs/blocks";
+import * as Stories from "./focusStyles.stories";
+
+<Meta of={Stories} />
+
+# Focus Styles
+
+Use the mixin `focusable()` to keep focus styles consistent across all elements including links, buttons, and single-action cards.
+
+## Focus ring color and palette context
+
+Focus ring color is palette context-aware via CSS custom property `--qld-focus-color`. This means it changes color based on the classes `default`, `alt`, `light`, `dark`, and `dark-alt`.
+Because a focus ring is offset beyond an element's boundaries, when a themable component such as a Card is also focusable, it must retain the palette color of its parent.
+For this reason `--qld-focus-color` is set on children of elements with palette classes, not the element itself. Change the values of `paletteClass` and `cardPaletteClass` to see this in effect.
+
+To otherwise force a focus-ring's palette context, you may also use utility classes `qld-focus-light` and `qld-focus-dark`. This should only be done as a final resort however.
+
+<Canvas of={Stories.Default} />
+
+<Controls />

package/src/components/common/focus-styles/focusStyles.stories.js

@@ -0,0 +1,58 @@
+import { Button, defaultArgs as buttonArgs } from "../../bs5/button/Button";
+import { Card } from "../../bs5/card/Card";
+import cardData from "../../bs5/card/card.data.json";
+const cardArgs = cardData.singleAction;
+/**
+ * @import { Meta, StoryObj } from "@storybook/html";
+ */
+
+/**
+ * @typedef {Object} Args
+ * @prop {"focus-light" | "focus-dark" | ""} [utilityClass] - Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [paletteClass]
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [cardPaletteClass]
+ */
+
+/**
+ * @type { Meta<Args> }
+ */
+export default {
+  title: "1. Core Styles/Focus Styles",
+  tags: ["autodocs"],
+  argTypes: {
+    utilityClass: {
+      description:
+        "Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.",
+      control: "radio",
+      options: ["qld-focus-light", "qld-focus-dark", null],
+    },
+    paletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt", null],
+    },
+    cardPaletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt"],
+    },
+  },
+  parameters: { layout: "fullscreen" },
+
+  render: (args) => {
+    return `<div class="p-24 ${args.paletteClass || ""}" style="display: flex; gap: 48px; align-items: flex-start">
+<a href=javascript:void()" class="${args.utilityClass || ""}">Here is a link</a>
+${new Button({ ...buttonArgs, variantClass: `${buttonArgs.variantClass} ${args.utilityClass || ""}` }).html}
+${new Card({ ...cardArgs, variantClass: `${args.cardPaletteClass} ${args.utilityClass || ""}` }).html}
+</div>
+`;
+  },
+};
+
+/** @type {StoryObj<Args>} */
+export const Default = {
+  /**@type Args */
+  args: {
+    utilityClass: "",
+    paletteClass: "",
+    cardPaletteClass: "default",
+  },
+};

package/src/css/functions/_index.scss

@@ -1,3 +1,6 @@
+@forward "color-icon";
 @forward "in-list";
 @forward "remify";
 @forward "snap-line-height";
+@forward "string-replace";
+@forward "svg-encode";

package/src/css/functions/color-icon.scss

@@ -0,0 +1,31 @@
+@use "../../components/bs5/icons/icons.list" as icons;
+@use "../functions/string-replace" as *;
+@use "../functions/in-list" as *;
+@use "../functions/svg-encode" as *;
+@use "bootstrap/scss/functions" as bs;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
+///
+/// This function can create an svg string with a customised fill color by replacing all instances of the string "currentColor" with the chosen color.
+/// This is useful when creating svg data urls for use in background property, where currentColor does not work.
+/// Use it together with svg-encode for fun and profit.
+/// @param {string} $name - The name of the QGDS icon
+/// @param {color} $color -The desired new color. Must be of type color (eg hex or rgb notation) not a CSS custom property.
+/// @return {string} - the new svg string with "currentColor" replaced with chosen color
+@function color-icon($name, $color) {
+  $_validNames: map.keys(icons.$icon-names);
+  // validate $name
+  @if ($name and not in-list($name, $_validNames)) {
+    @error "Invalid parameter $name: " + $name;
+  }
+
+  // validate color is valid.
+  @if (meta.type-of($color) != "color") {
+    @error "Invalid parameter $color: " + $name;
+  }
+
+  $svg: map.get(icons.$icon-names, $name);
+  @return string-replace($svg, "currentColor", "#{$color}");
+}

package/src/css/functions/string-replace.scss

@@ -0,0 +1,49 @@
+@use "sass:string";
+@use "sass:meta";
+
+///
+/// Adapted from Kitty Giraudel https://kittygiraudel.com/2014/01/13/string-replacement-function-in-sass/
+/// @param {type} $string - The string to be searched, with substring $replace replaced with $replaceWith
+/// @param {type} $replace - The substring to be replaced by $replaceWith
+/// @param {type} $replaceWith - The string to replace $replace
+/// @return {string} - A new string with $replace replaced by $replaceWith
+@function string-replace($string, $replace, $replaceWith) {
+  // validate strings
+  @if meta.type-of($string) !=
+    string or
+    meta.type-of($replace) !=
+    string or
+    meta.type-of($replaceWith) !=
+    string
+  {
+    @warn "One of the 3 arguments is not a string.";
+    @return $string;
+  }
+
+  // avoid infinite recursion
+  @if string.index($replaceWith, $replace) {
+    @warn "The string to be replaced is contained in the new string. Infinite recursion avoided.";
+    @return $string;
+  }
+
+  // Find the index of the string to replace
+  $index: string.index($string, $replace);
+
+  // If $replace string is found
+  @if ($index) and ($replaceWith != $replace) {
+    // Create a new string. Then we loop through each character in the string, and append them to the new string only if they are not part of the $replace string.
+    $newString: string.quote(string.slice($string, 1, $index - 1));
+
+    @for $i from $index through string.length($string) {
+      @if $i < $index or $i >= $index + string.length($replace) {
+        $newString: $newString + string.slice($string, $i, $i);
+      }
+    }
+
+    $newString: string.insert($newString, $replaceWith, $index);
+    @return string-replace($newString, $replace, $replaceWith);
+  }
+
+  // else nothing to do - return original $string
+  @return $string;
+}

package/src/css/functions/svg-encode.scss

@@ -0,0 +1,22 @@
+@use "../functions/string-replace" as *;
+
+///
+/// A simpler version of bootstrap's escape-svg, which cannot be used with sass module system.
+/// Unlike bootstraps' version, this function cannot be used to wrap `url()` function.
+/// It only works on strings!
+/// Based on the same original source at https://codepen.io/kevinweber/pen/dXWoRw
+/// @param {type} $svg -
+/// @return {string} - the encoded svg prefixed with "data:image/svg+xml,", ready to be used within `url()` for background images.
+@function svg-encode($svg) {
+  $encoding-reference: (
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+  );
+  @each $char, $encoded in $encoding-reference {
+    $svg: string-replace($svg, $char, $encoded);
+  }
+  @return "data:image/svg+xml," + $svg;
+}

package/src/css/main.scss

@@ -152,3 +152,6 @@ $enable-dark-mode: true;
 
 // Print
 @import "qld-print";
+
+// Reduced motion
+@import "qld-reduced-motion";

package/src/css/mixins/focusable.scss

@@ -1,6 +1,6 @@
 ///
 /// Default focus styles for use in buttons etc. Resets :focus and uses :focus-visible instead which only appears on keyboard interaction.
-/// @param {Boolean} $offsetOutline [true] - Offset the focus ring by 2px.
+/// @param {Boolean|number} $offsetOutline [true] - Offset the focus ring by 2px.
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
 /// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput

package/src/css/mixins/make-icon.scss

@@ -22,7 +22,7 @@ $prefix: "qld-" !default;
   $include-base: true
 ) {
   // validate $name
-  @if ($name and not f.in-list($name, $icon-names)) {
+  @if ($name and not f.in-list($name, map.keys($icon-names))) {
     @error "Invalid parameter $name: " + $name;
   }
   // validate $include-base

package/src/css/mixins/make-link.scss

@@ -1,24 +1,27 @@
 @use "focusable" as *;
-@use "../variables/animation";
+@use "../functions" as f;
+// @use "../variables/animation";
 
 ///
 /// Apply generic links styles. Ensures consistent styles including transition effects.
 @mixin make-link() {
   color: var(--qld-link-color);
-  transition: {
-    property:
-      color, background-color, border-color, outline-color, outline-offset,
-      outline-width, text-decoration-color, text-decoration-line,
-      text-decoration-thickness, text-underline-offset, opacity;
-    duration: animation.$duration-fast;
-    timing-function: animation.$timing-function;
-  }
+  border-radius: 0.25rem;
+  transition: none; // remove transitions until decisions at design system level.
+  // {
+  //   property:
+  //     color, background-color, border-color, outline-color, outline-offset,
+  //     outline-width, text-decoration-color, text-decoration-line,
+  //     text-decoration-thickness, text-underline-offset, opacity;
+  //   duration: animation.$duration-fast;
+  //   timing-function: animation.$timing-function;
+  // }
 
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
   text-decoration-color: var(--qld-link-underline);
 
-  @include focusable($offsetOutline: true, $outlineWidth: 2px);
+  @include focusable();
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);

package/src/css/qld-palettes.scss

@@ -1,7 +1,6 @@
-// QLD Theme Palette Classes
+// QLD Palette Classes
 // Provides complete theme styling including color, background-color, and CSS variables
 
-// Theme properties mixins to avoid duplication
 %qld-palette-default {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
@@ -11,7 +10,6 @@
   --qld-body-color: #{$body-color};
   --qld-body-font-weight: #{$body-font-weight};
   --qld-border-color: var(--qld-light-border);
-  --qld-focus-color: var(--qld-light-focus);
   --qld-headings-color: #{$headings-color};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
@@ -22,11 +20,20 @@
   --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
   --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
   --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
-  --qld-link-underline-offset: 0.3rem;
+  --qld-link-underline-offset: 0.3em;
   --qld-link-underline-thickness: 0.5px;
   --qld-link-underline-thickness-hover: 2px;
-  --qld-selection-bg: var(--qld-brand-primary);
-  --qld-selection-color: var(--qld-white);
+  --qld-selection-bg: var(--qld-dark-background);
+  --qld-selection-color: var(--qld-neutral-white);
+ 
+
+  // Because a focus ring generally is offset outside of an element, at the boundary between palette themes,
+  // its color should inherit the parent's palette, not the focussed element's palette, so defer setting
+  // focus color until first descendant, unless this is :root
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-light-focus);
+  }
 }
 
 %qld-palette-light {
@@ -49,22 +56,23 @@
   --qld-body-bg: var(--qld-dark-background);
   --qld-body-color: #fff;
   --qld-border-color: var(--qld-dark-border);
-  --qld-focus-color: var(--qld-dark-focus);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
   --qld-link-color: #{$color-default-color-dark-link-default};
   --qld-link-color-rgb: 255, 255, 255;
   --qld-link-hover-color: #{$color-default-color-dark-link-default};
   --qld-link-hover-color-rgb: 255, 255, 255;
   --qld-link-visited-color: #{$color-default-color-dark-link-visited};
-  --qld-link-visited: var(
-    --qld-link-visited-dark
-  ); // TODO tidy up these variables, we should only use --qld-link-visited-color
   --qld-link-underline: #{$qld-link-underline-dark};
   --qld-link-underline-hover: #{$qld-link-underline-hover-dark};
   --qld-link-underline-visited: #{$qld-link-underline-visited-dark};
   --qld-link-underline-visited-hover: #{$qld-link-underline-hover-dark};
-  --qld-selection-bg: var(--qld-white);
-  --qld-selection-color: var(--qld-brand-primary);
+  --qld-selection-bg: var(--qld-neutral-white);
+  --qld-selection-color: var(--qld-dark-background);
+
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-dark-focus);
+  }
 }
 
 %qld-palette-dark-alt {

package/src/css/qld-reduced-motion.scss

@@ -0,0 +1,51 @@
+@media (prefers-reduced-motion: reduce) {
+  .show,
+  .show:after,
+  .show:before,
+  a::after,
+  a::before,
+  a.dropdown-item,
+  .collapsed,
+  .accordion-toggle-btn--closed::after,
+  .accordion-toggle-btn--open::after,
+  .video-thumbnail .video-thumbnail-image:before,
+  * {
+    transition-duration: 0.001ms !important;
+    animation-duration: 0.001ms !important;
+    transition: none !important;
+    animation: none !important;
+  }
+  a.dropdown-item,
+  a.dropdown-item:hover {
+    gap: 1rem !important;
+  }
+  a.dropdown-item,
+  a.dropdown-item:hover,
+  a.dropdown-item:hover::after {
+    padding-inline-end: 0.5rem !important;
+    transform: none !important;
+    top: unset;
+  }
+  .qld-cta-link:hover {
+    gap: 0.5rem !important;
+  }
+  .link-column .nav-item .nav-link::after,
+  .link-column .nav-item .nav-link:hover::after {
+    margin-inline-end: 0.5rem;
+  }
+  .link-column .all-link .qld-cta-link:hover {
+    padding-inline-end: 0.5rem;
+  }
+  .qld-tabs .nav-tabs {
+    scroll-behavior: unset !important;
+  }
+  .card.card-arrow:hover .qld-icon {
+    transform: translateX(0rem);
+  }
+  @media (max-width: 991.98px) {
+    .navbar.show > .container,
+    .navbar.vertical.show > .container {
+      transform: translateX(0);
+    }
+  }
+}

package/src/css/qld-tokens.scss

@@ -16,15 +16,15 @@ $color-default-color-dark-crest-fill: #ffffff !default;
 $color-default-color-dark-focus-default: #c6ffff !default;
 $color-default-color-dark-link-default: #ffffff !default;
 $color-default-color-dark-link-on-action: #001c37 !default;
-$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-link-visited: #F2CDFF !default;
 $color-default-color-dark-site-title: #ffffff !default;
 $color-default-color-dark-text-default: #ffffff !default;
 $color-default-color-dark-text-heading: #ffffff !default;
 $color-default-color-dark-text-lighter: #deebf9 !default;
 $color-default-color-dark-underline-default-hover: #ffffff !default;
 $color-default-color-dark-underline-default: #b5cce2 !default;
-$color-default-color-dark-underline-visited-hover: #e1bbee !default;
-$color-default-color-dark-underline-visited: #e1c2ff !default;
+$color-default-color-dark-underline-visited-hover: #F2CDFF !default;
+$color-default-color-dark-underline-visited: #C6AED9 !default;
 
 /* Light palettes */
 $color-default-color-light-accent-design-accent: #84d3ff !default;

package/src/css/qld-type.scss

@@ -6,12 +6,11 @@ body {
 
 .qld-content-body {
   p {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
   }
-
   ul,
-  ol,
-  p {
+  ol{
     line-height: 1.75;
   }
 
@@ -68,15 +67,13 @@ h6 {
   color: var(--qld-headings-color);
 }
 
-a,
-a.nav-link {
+a {
   @include mixins.make-link();
 }
 
-figure > figcaption {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
+a.nav-link {
+  @include mixins.make-link();
+  border-radius: 0;
 }
 
 a.nostyle {
@@ -89,9 +86,10 @@ a.nostyle {
   }
 }
 
-::-moz-selection {
-  background: var(--qld-selection-bg);
-  text-shadow: none;
+figure > figcaption {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
 }
 
 ::selection {

package/src/css/qld-utilities.scss

@@ -30,6 +30,14 @@ $utilities: map-merge(
           "dark-alt": var(--qld-dark-alt-background),
           "dark-alt-shade": var(--qld-dark-alt-background-shade),
         ),
-      )
+      ),
+    "focus": (
+      class: "qld-focus",
+      property: --qld-focus-color,
+      values: (
+        "light": var(--#{$prefix}light-focus),
+        "dark": var(--#{$prefix}dark-focus),
+      ),
+    )
   )
 );

package/src/css/qld-variables.scss

@@ -21,7 +21,7 @@ $qld-red-border: $core-default-color-status-error-darker;
 $qld-blue-border: $color-default-color-light-border-light;
 $qld-yellow-border: $core-default-color-status-caution-darker;
 $qld-dark-blue-shade: $color-default-color-dark-background-alt-shade;
-$qld-light-background: $core-default-color-status-info-lightest;
+$qld-light-background: $color-default-color-light-background-light;
 $qld-light-background-shade: $color-default-color-light-background-light-shade;
 $qld-light-border: $color-default-color-light-border-default;
 $qld-light-border-alt: $color-default-color-light-border-alt;