@qld-gov-au/qgds-bootstrap5 2.0.1 → 2.0.3

package/src/css/main.scss

@@ -19,11 +19,6 @@ $font-family-sans-serif:
   "Noto Color Emoji" !default;
 $font-family-sitename: "Fira Sans";
 
-//Icons
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
-//TODO: should we pull from ../../node_modules/@fortawesome/fontawesome-free/css/all.css instead of cdn
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-
 //Prefix to namespace design-system classes
 $prefix: "qld-";
 $enable-cssgrid: true;
@@ -37,8 +32,7 @@ $enable-dark-mode: true;
 
 // 2. QLD Design System variables (Bootstrap overrides)
 @import "./qld-variables";
-
-// @import "./scss/qld-variables-dark"; //future state
+@import "variables";
 
 // 3. Include remainder of bootstrap
 // 3.1 Required
@@ -88,6 +82,9 @@ $enable-dark-mode: true;
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "../../node_modules/bootstrap/scss/utilities/api";
 
+// Themes
+@import "qld-theme";
+
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";
 
@@ -136,8 +133,5 @@ $enable-dark-mode: true;
 // Custom utility classes
 @import "utilities";
 
-// Themes
-@import "qld-theme";
-
 // Print
 @import "qld-print";

package/src/css/mixins/_index.scss

@@ -1,4 +1,7 @@
 @forward "focusable";
 @forward "generate-color-vars";
+@forward "make-icon" with (
+  $prefix: "qld-"
+);
 @forward "register-vars";
 @forward "unset-button-styles";

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

@@ -0,0 +1,87 @@
+@use "sass:list";
+@use "sass:map";
+@use "../../components/bs5/icons/icons.list" as *;
+@use "../../components/bs5/icons/icons-multicolours.list" as *;
+@use "../../components/bs5/icons/icons.sizes" as *;
+@use "../functions" as f;
+
+$prefix: "qld-" !default;
+
+///
+/// @param {String} $name [null] - The name of icon
+/// @param {String} $size ["sm"] - The icon size, valid values are "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+/// @param {String | null} $pseudo [null] - Whether the mixin applies styles as a pseudo-element. Valid string values are "before" | "after"
+/// @param {false} $is-inline - Applies extra styles to assist with vertical alignent when used inline with text.
+/// @param {Boolean} $include-base [true] - Apply all base styles. Set to false when reusing this mixin to create modifier classes where base styles are already applied (For instance qld-icon-{name})
+@mixin make-icon(
+  $name: null,
+  $size: "sm",
+  $pseudo: null,
+  $is-inline: false,
+  $include-base: true
+) {
+  // validate $name
+  @if ($name and not f.in-list($name, $icon-names)) {
+    @error "Invalid parameter $name: " + $name;
+  }
+  // validate $include-base
+  @if (not $name and not $include-base and not $is-inline) {
+    @error "Must include either $name or $include-base or $is-inline";
+  }
+
+  //validate size
+  @if (not map.get($icon-sizes, $size)) {
+    @error "Invalid parameter $size. Use one of " + map.keys($icon-sizes);
+  }
+
+  // validate $pseudo
+  @if (not list.index(("before", "after", null), $pseudo)) {
+    @error 'Invalid $pseudo value, can only be "before", "after" or null';
+  }
+
+  @if $pseudo {
+    &::#{$pseudo} {
+      content: "";
+      // recursively call this mixin with $pseudo set to null
+      @include make-icon($name, $size, null, $is-inline, $include-base);
+    }
+  } @else {
+    @if $include-base {
+      --_icon-size: var(--icon-size, #{map.get($icon-sizes, $size)});
+      display: inline-block;
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      background-position: center center;
+      background-repeat: no-repeat;
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      background-size: contain;
+      vertical-align: middle;
+
+      // What's going on here?
+      // These styles unify svg and mask-image implementations
+      // Color is the property we can share across both, since we can apply currentColor to backgroundColor.
+      // Preferred API to set color on icons is via --qld-icon-color property.
+      // This is not set intentionally by default, so we can inherit --qld-action-icon-color from palette context.
+      // Final fallback to inherit in case these go wrong.
+      color: var(--#{$prefix}icon-color, var(--qld-action-icon-color, inherit));
+      background-color: currentColor;
+    }
+    @if $is-inline {
+      vertical-align: baseline;
+      position: relative;
+      top: calc(calc(var(--_icon-size) / 2) - 0.5cap);
+    }
+    @if $name {
+      @if f.in-list($name, $icons-multicolour) {
+        background-image: var(--qgds-icon-#{$name});
+        -webkit-background-image: var(--qgds-icon-#{$name});
+        background-color: transparent;
+      } @else {
+        mask-image: var(--qgds-icon-#{$name});
+        -webkit-mask-image: var(--qgds-icon-#{$name});
+      }
+    }
+  }
+}

package/src/css/qld-theme.scss

@@ -1,44 +1,87 @@
-// Dark mode.  
-// Note that you can't read custom variables into media queries (as at Sep 2023).
-// Example: "background: var(--theme-background);"  
+// QLD Theme Palette Classes
+// Provides complete theme styling including color, background-color, and CSS variables
 
-// However, you can set them, however:
-// example: --theme-background: #000;
-
-//You can also fall back to SASS variable to set at compile time.
-
-@include color-mode(dark) {
-    :root {
-        --#{$prefix}body-bg: var(--qld-brand-primary-dark);
-        --#{$prefix}body-color: #FFF;
-        --#{$prefix}heading-color: #FFF;
-        --#{$prefix}link-color: #FFF;
-        --#{$prefix}link-hover-color: var(--qld-brand-accent);
-    }
+// Theme properties mixins to avoid duplication
+@mixin light-theme-properties {
+  background-color: var(--qld-body-bg);
+  color: var(--qld-body-color);
+  --qld-action-icon-color: var(--qld-light-action-secondary);
+  --qld-action-icon-hover-color: var(--qld-light-action-secondary-hover);
+  --qld-body-color: #{$body-color};
+  --qld-body-font-weight: #{$body-font-weight};
+  --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)};
+  --qld-link-font-weight: 400;
+  --qld-link-hover-color: var(--qld-link-color);
+  --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
+  --qld-link-underline: #{$color-default-color-light-underline-default};
+  --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
+  --qld-link-underline-offset: 0.3rem;
+  --qld-link-underline-thickness: 0.5px;
+  --qld-link-underline-thickness-hover: 2px;
+  --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
+  --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
+  --qld-selection-bg: var(--qld-brand-primary);
+  --qld-selection-color: var(--qld-white);
+}
 
-    //...etc
+@mixin dark-theme-properties {
+  background-color: var(--qld-body-bg);
+  color: var(--qld-body-color);
+  --qld-action-icon-color: var(--qld-dark-action-secondary);
+  --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
+  --qld-body-color: #fff;
+  --qld-focus-color: var(--qld-dark-focus);
+  --qld-headings-color: #fff;
+  --qld-link-color: #fff;
+  --qld-link-color-rgb: 255, 255, 255;
+  --qld-link-hover-color: #fff;
+  --qld-link-hover-color-rgb: 255, 255, 255;
+  --qld-link-visited: var(--qld-link-visited-dark);
+  --qld-selection-bg: var(--qld-white);
+  --qld-selection-color: var(--qld-brand-primary);
 }
 
+// Default theme (inherits :root variables) and root variables
+:root,
+.default {
+  @include light-theme-properties;
+  --qld-body-bg: var(--qld-default-background);
+  --qld-border-color: var(--qld-light-border);
+}
 
+// Light theme
 .light {
-    background: var(--#{$prefix}light-background);
+  @include light-theme-properties;
+  --qld-body-bg: var(--qld-light-background);
+  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
 }
 
+// Alt theme (light alternative)
 .alt {
-    background: var(--#{$prefix}light-alt-background);
+  @include light-theme-properties;
+  --qld-body-bg: var(--qld-light-alt-background);
+  --qld-border-color: var(--qld-soft-grey);
 }
 
-.bg-default {  background-color: var(--qld-default-background); }
-.bg-default-shade {  background-color: var(--qld-default-background-shade); }
-
-.bg-light {  background-color: var(--qld-light-background); }
-.bg-light-shade {  background-color: var(--qld-light-background-shade); }
-
-.bg-light-alt {  background-color: var(--qld-light-alt-background); }
-.bg-light-alt-shade {  background-color: var(--qld-light-alt-background-shade); }
+// Dark theme
+.dark {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-dark-background);
+  --qld-border-color: var(--qld-dark-border);
+}
 
-.bg-dark {  background-color: var(--qld-dark-background); }
-.bg-dark-shade {  background-color: var(--qld-dark-background-shade); }
+// Dark alt theme
+.dark-alt {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-dark-alt-background);
+  --qld-border-color: var(--qld-dark-alt-border);
+}
 
-.bg-dark-alt {  background-color: var(--qld-dark-alt-background); }
-.bg-dark-alt-shade {  background-color: var(--qld-dark-alt-background-shade); }
+// Bootstrap dark mode support
+:root[data-bs-theme="dark"] {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-brand-primary);
+}

package/src/css/qld-type.scss

@@ -1,125 +1,4 @@
-//Typography
-$font-family-sans-serif: "Noto Sans",
-  system-ui,
-  -apple-system,
-  "Segoe UI",
-  Roboto,
-  "Helvetica Neue",
-  "Noto Sans",
-  "Liberation Sans",
-  Arial,
-  sans-serif,
-  "Apple Color Emoji",
-  "Segoe UI Emoji",
-  "Segoe UI Symbol",
-  "Noto Color Emoji" !default;
-
-// Override Bootstrap font variables
-$font-weight-base: 400;
-$font-weight-bold: 600;
-$font-weight-bolder: 900;
-
-// Apply custom font weights to Bootstrap's utility classes
-$font-weights: (
-  normal: 400,
-  bold: 600,
-  bolder: 900
-);
-
-$body-color: $qld-text-grey;
-$body-font-weight: 400;
-$font-size-base: 1rem;
-
-// https: //www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=58880-54175&t=35PGuqUnIyLmf28d-0
-// Headings font weight and line height
-$headings-font-weight: 600;
-$headings-line-height: 1.3;
-
-// Headings font sizes
-$h1-font-size: $font-size-base * 2.5;
-$h2-font-size: $font-size-base * 2;
-$h3-font-size: $font-size-base * 1.5;
-$h4-font-size: $font-size-base * 1.25;
-$h5-font-size: $font-size-base * 1;
-$h6-font-size: $font-size-base * 0.875;
-
-// < 991 Mobile Tablet font sizes and line heights
-$h1-font-size-mobile: $font-size-base * 2; // 32
-$h2-font-size-mobile: $font-size-base * 1.75; // 28
-$h1-line-height-mobile: 1.25; //40
-$h2-line-height-mobile: 1.285; //36
-
-$headings-color: $qld-text-headings;
-$qld-heading-color: $core-default-color-brand-primary-light-green;
-
-
-$link-color: $qld-brand-primary;
-$link-hover-color: $qld-brand-primary;
-$link-visited-color: $qld-link-visited;
-
-//Links
-.default,
-.light,
-.alt,
-:root {
-  --qld-headings-color: #{$headings-color};
-  --qld-body-color: #{$body-color};
-  --qld-body-font-weight: #{$body-font-weight};
-  --qld-link-font-weight: 400;
-  --qld-link-color: #{$link-color};
-  --qld-link-color-rgb: #{to-rgb($link-color)};
-  --qld-link-hover-color: var(--qld-link-color);
-  --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
-  --qld-link-underline-offset: 0.3rem;
-  --qld-link-underline-thickness: 0.5px;
-  --qld-link-underline-thickness-hover: 2px;
-  --qld-link-underline: #{$color-default-color-light-underline-default};
-  --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-selection-color: var(--qld-white);
-  --qld-selection-bg: var(--qld-brand-primary);
-  --qld-focus-color: var(--qld-light-focus);
-  --qld-action-icon-color: var(--qld-light-action-secondary);
-  --qld-action-icon-hover-color: var(--qld-light-action-secondary-hover);
-}
-
-.dark,
-.dark-alt,
-:root[data-bs-theme="dark"] {
-  --qld-headings-color: #fff;
-  --qld-body-color: #fff;
-  --qld-body-bg: var(--qld-brand-primary);
-  --qld-link-color: #fff;
-  --qld-link-color-rgb: 255, 255, 255;
-  --qld-link-hover-color: #fff;
-  --qld-link-hover-color-rgb: 255, 255, 255;
-  --qld-link-visited: var(--qld-link-visited-dark);
-  --qld-selection-color: var(--qld-brand-primary);
-  --qld-selection-bg: var(--qld-white);
-  --qld-focus-color: var(--qld-dark-focus);
-  --qld-action-icon-color: var(--qld-dark-action-secondary);
-  --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
-}
-
-.default {
-  --qld-border-color: var(--qld-light-border);
-}
-.light {
-  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
-}
-.alt {
-  --qld-body-bg: var(--qld-light-alt-background);
-  --qld-border-color: var(--qld-soft-grey);
-}
-.dark {
-  --qld-border-color: var(--qld-dark-border);
-}
-.dark-alt {
-  --qld-body-bg: var(--qld-dark-alt-background);
-  --qld-border-color: var(--qld-dark-alt-border);
-}
-
+//Links - default root variables moved to qld-theme.scss
 
 //Content and links
 body {
@@ -127,7 +6,6 @@ body {
 }
 
 .qld-content-body {
-
   p {
     margin-bottom: 1.25rem;
   }
@@ -141,7 +19,6 @@ body {
   li {
     margin-top: 0.5rem;
   }
-
 }
 
 // Apply correct bold font-weight
@@ -164,7 +41,6 @@ dt {
   font-weight: $font-weight-bold;
 }
 
-
 // Definition list
 dt {
   margin-top: 0.5rem;
@@ -182,10 +58,8 @@ dl.qld-content-dates {
   dd {
     margin-top: 0.5rem;
   }
-
 }
 
-
 // Light, Light alt
 
 h1,
@@ -197,26 +71,32 @@ h6 {
   color: var(--#{$prefix}color-default-color-light-text-heading);
 }
 
-
-
 a,
 a.nav-link {
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
-  text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default);
+  text-decoration-color: var(
+    --#{$prefix}color-default-color-light-underline-default
+  );
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-    text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default-hover);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-light-underline-default-hover
+    );
   }
 
   &:visited {
     color: var(--#{$prefix}color-default-color-light-link-visited);
-    text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-light-underline-visited
+    );
 
     &:hover {
       text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-      text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited-hover);
+      text-decoration-color: var(
+        --#{$prefix}color-default-color-light-underline-visited-hover
+      );
     }
   }
 
@@ -232,10 +112,9 @@ figure > figcaption {
   line-height: 20px;
 }
 
-// Dark, dark alt
+// Theme-specific typography styles
 .dark,
 .dark-alt {
-
   h1,
   h2,
   h3,
@@ -244,25 +123,32 @@ figure > figcaption {
   h6 {
     color: var(--#{$prefix}color-default-color-dark-text-heading);
   }
+
   body & {
     color: var(--qld-body-color);
   }
+
   a,
   a.nav-link {
-    text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-dark-underline-default
+    );
 
     &:visited {
       color: var(--#{$prefix}color-default-color-dark-link-visited);
-      text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-visited);
+      text-decoration-color: var(
+        --#{$prefix}color-default-color-dark-underline-visited
+      );
 
       &:hover {
-        text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
+        text-decoration-color: var(
+          --#{$prefix}color-default-color-dark-underline-default-hover
+        );
       }
     }
   }
 }
 
-
 a.nostyle {
   text-decoration: unset;
   text-underline-offset: unset;
@@ -282,4 +168,4 @@ a.nostyle {
   color: var(--qld-selection-color);
   background: var(--qld-selection-bg);
   text-shadow: none;
-}
+}

package/src/css/qld-utilities.scss

@@ -1,20 +1,35 @@
-
-// QLD Customm Utilities, extends Bootstrap utilities
-
-// Responsive width classes (w-md-25, w-lg-50, etc.)
+// QLD Custom Utilities, extends Bootstrap utilities
 $utilities: map-merge(
   $utilities,
   (
+    // Responsive width classes (w-md-25, w-lg-50, etc.)
     "width": (
-      property: width,
-      class: w,
-      responsive: true,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%
+        property: width,
+        class: w,
+        responsive: true,
+        values: (
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+        ),
+      ),
+    // QLD Background theme utilities (bg-dark, bg-dark-alt, etc.)
+    "qld-background": (
+        property: background-color,
+        class: bg,
+        values: (
+          "default": var(--qld-default-background),
+          "default-shade": var(--qld-default-background-shade),
+          "light": var(--qld-light-background),
+          "light-shade": var(--qld-light-background-shade),
+          "light-alt": var(--qld-light-alt-background),
+          "light-alt-shade": var(--qld-light-alt-background-shade),
+          "dark": var(--qld-dark-background),
+          "dark-shade": var(--qld-dark-background-shade),
+          "dark-alt": var(--qld-dark-alt-background),
+          "dark-alt-shade": var(--qld-dark-alt-background-shade),
+        ),
       )
-    )
   )
-);
+);

package/src/css/qld-variables.scss

@@ -1,4 +1,4 @@
-@use "mixins" as *;
+@use "mixins" as m;
 
 // GLOBALLY SCOPED VARIABLES
 // These variables are available to the full project and all components. (This file is included at the top of main.css to ensure this)
@@ -222,7 +222,7 @@ $project-colors: (
   "default-border": $qld-light-border,
   "light-border": $color-default-color-light-border-light,
   "light-border-alt": $qld-light-border-alt,
-  
+
   //Links
   "light-link": $color-default-color-light-link-default,
   "dark-link": $color-default-color-dark-link-default,
@@ -306,8 +306,8 @@ $project-base-colors: (
 
 // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
 :root {
-  @include generate-color-vars($qld-tokens);
-  @include generate-color-vars($project-colors);
+  @include m.generate-color-vars($qld-tokens);
+  @include m.generate-color-vars($project-colors);
 }
 
 $theme-colors: map-merge($theme-colors, $project-base-colors);

package/src/css/utilities/_index.scss

@@ -1 +1,2 @@
 @import "responsive-visually-hidden";
+@import "sr-only";

package/src/css/utilities/sr-only.scss

@@ -0,0 +1,5 @@
+///
+/// Screen reader only utility - hides content visually while keeping it accessible to screen readers
+.sr-only {
+  @include visually-hidden();
+}

package/src/css/variables/_index.scss

@@ -0,0 +1 @@
+@import "type";

package/src/css/variables/type.scss

@@ -0,0 +1,58 @@
+//Typography
+$font-family-sans-serif:
+  "Noto Sans",
+  system-ui,
+  -apple-system,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  "Noto Sans",
+  "Liberation Sans",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
+
+// Override Bootstrap font variables
+$font-weight-base: 400;
+$font-weight-bold: 600;
+$font-weight-bolder: 900;
+
+// Apply custom font weights to Bootstrap's utility classes
+$font-weights: (
+  normal: 400,
+  bold: 600,
+  bolder: 900,
+);
+
+$body-color: $qld-text-grey;
+$body-font-weight: 400;
+$font-size-base: 1rem;
+
+// https: //www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=58880-54175&t=35PGuqUnIyLmf28d-0
+// Headings font weight and line height
+$headings-font-weight: 600;
+$headings-line-height: 1.3;
+
+// Headings font sizes
+$h1-font-size: $font-size-base * 2.5;
+$h2-font-size: $font-size-base * 2;
+$h3-font-size: $font-size-base * 1.5;
+$h4-font-size: $font-size-base * 1.25;
+$h5-font-size: $font-size-base * 1;
+$h6-font-size: $font-size-base * 0.875;
+
+// < 991 Mobile Tablet font sizes and line heights
+$h1-font-size-mobile: $font-size-base * 2; // 32
+$h2-font-size-mobile: $font-size-base * 1.75; // 28
+$h1-line-height-mobile: 1.25; //40
+$h2-line-height-mobile: 1.285; //36
+
+$headings-color: $qld-text-headings;
+$qld-heading-color: $core-default-color-brand-primary-light-green;
+
+$link-color: $qld-brand-primary;
+$link-hover-color: $qld-brand-primary;
+$link-visited-color: $qld-link-visited;