@qld-gov-au/qgds-bootstrap5 2.0.5 → 2.0.6

package/dist/assets/js/handlebars.init.min.js

@@ -825,7 +825,7 @@
   </section>
   {{/each }}
 </div>`;var R=`
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/assets/node/handlebars.init.min.js

@@ -808,7 +808,7 @@ var head_default;
 var init_head = __esm({
   "src/components/bs5/head/head.hbs?raw"() {
     head_default = `
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "",
   "repository": {
     "type": "git",

package/esbuild.js

@@ -37,9 +37,13 @@ const buildConfig = {
       out: "./assets/js/qld.bootstrap.min",
     },
     {
-      in: "./src/css/main.scss",
+      in: "./src/css/main.scss", //default masterbrand theme
       out: "./assets/css/qld.bootstrap",
     },
+    {
+      in: "./src/css/main.legacy.scss", //legacy masterbrand theme (before October 2025)
+      out: "./assets/css/qld.bootstrap.legacy",
+    },
     {
       in: "./src/js/handlebars.helpers.js",
       out: "./assets/js/handlebars.helpers.bundle",
@@ -107,6 +111,7 @@ async function StartBuild() {
   // Choose configuration based on theme
   let config = buildConfig;
   const tempEntries = [];
+
   if (argv.theme) {
     const themes = Array.isArray(argv.theme) ? argv.theme : [argv.theme];
     const cssDir = path.resolve("src/css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/accordion/accordion.scss

@@ -3,11 +3,11 @@
 
 //SASS variables;
 $accordion-padding: 1rem;
-$accordion-icon-color: $qld-brand-secondary-dark;
-$accordion-icon-active-color: $qld-brand-secondary-dark;
+$accordion-icon-color: $color-default-color-light-action-primary;
+$accordion-icon-active-color: $color-default-color-light-action-primary;
 $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><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>");
 $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><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>");
-$accordion-icon-dark-color: $qld-brand-accent;
+$accordion-icon-dark-color: $color-default-color-dark-action-primary;
 $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><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>");
 $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><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>");
 

package/src/components/bs5/button/button.scss

@@ -18,20 +18,16 @@
   //Primary button variant
   &-primary {
     --#{$prefix}btn-bg: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
     --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
+      --#{$prefix}light-action-primary-hover
     );
     --#{$prefix}icon-color: currentColor;
     --#{$prefix}icon-hover-color: currentColor;
@@ -41,12 +37,12 @@
   &-outline-secondary {
     --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
-    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}light-action-secondary);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
+    --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
@@ -57,7 +53,7 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
     --#{$prefix}gradient: none;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
   }
 
@@ -83,40 +79,32 @@
 .dark-alt .btn {
   //Primary button variant (dark mode)
   &-primary {
-    --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
+    --#{$prefix}btn-bg: var(--#{$prefix}dark-action-secondary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}text-darkest);
     --#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
   }
 
   //Secondary button variant (dark mode)
   &-secondary,
   &-outline-secondary {
-    --#{$prefix}btn-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary
-    );
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}white);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
     --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-hover-color: var(--#{$prefix}white);
@@ -124,13 +112,11 @@
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
     --#{$prefix}btn-focus-bg: transparent;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
   }
 
@@ -145,9 +131,7 @@
     --#{$prefix}btn-active-color: var(--#{$prefix}white);
     --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-background-shade);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
   }
 }
@@ -321,19 +305,15 @@ a.btn,
   &-tertiary {
     text-decoration: underline;
     text-underline-offset: 0.3em;
-    --qld-body-color: var(--#{$prefix}dark-green);
+    --qld-body-color: var(--#{$prefix}light-link);
 
     &:hover {
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:focus {
       background-color: var(--#{$prefix}btn-hover-bg);
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:active {
@@ -409,7 +389,7 @@ a.btn,
   }
 
   &-tertiary {
-    --qld-body-color: var(--#{$prefix}golden-yellow);
+    --qld-body-color: var(--#{$prefix}dark-link);
 
     &:hover {
       --qld-body-color: var(--#{$prefix}dark-action-secondary-hover);
@@ -421,7 +401,7 @@ a.btn,
 
     &:active {
       text-decoration: none;
-      --qld-body-color: var(--#{$prefix}white);
+      --qld-body-color: var(--#{$prefix}dark-link);
     }
   }
 }

package/src/components/bs5/callout/callout.stories.js

@@ -1,20 +1,20 @@
 // callout.stories.js
-import { Callout } from './Callout.js';
-import defaultdata from './callout.data.json';
+import { Callout } from "./Callout.js";
+import defaultdata from "./callout.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Callout',
+  tags: ["autodocs"],
+  title: "3. Components/Callout",
   render: (args) => new Callout(args).html,
 
   argTypes: {
     title: {
-      name: 'Title',
+      name: "Title",
       description: `H3 title text for the callout.`,
     },
     content: {
-      name: 'Content',
-      description: 'Text content for the callout. Can include HTML markup.',
+      name: "Content",
+      description: "Text content for the callout. Can include HTML markup.",
     },
   },
 
@@ -57,10 +57,8 @@ export const Light = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
     },
   },
   decorators: [
@@ -83,10 +81,8 @@ export const Alternative = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Alternative',
-      values: [
-        { name: 'Alternative', value: 'var(--qld-light-grey-alt)' },
-      ],
+      default: "Alternative",
+      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
     },
   },
   decorators: [
@@ -109,10 +105,8 @@ export const Dark = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
     },
   },
   decorators: [
@@ -135,9 +129,9 @@ export const DarkAlternative = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Dark alternative',
+      default: "Dark alternative",
       values: [
-        { name: 'Dark alternative', value: 'var(--qld-dark-blue)' },
+        { name: "Dark alternative", value: "var(--qld-dark-alt-background)" },
       ],
     },
   },

package/src/components/bs5/card/card.scss

@@ -50,9 +50,9 @@
   // Video styled card
   .video-overlay {
     --#{$prefix}video-nav-bg: var(--#{$prefix}light-action-primary);
-    --#{$prefix}video-nav-bg-rgb: 9, 84, 159;
+    --#{$prefix}video-nav-bg-rgb: 0, 94, 184;
     --#{$prefix}video-nav-bg-hover: var(--#{$prefix}light-action-primary-hover);
-    --#{$prefix}video-nav-bg-hover-rgb: 0, 62, 125;
+    --#{$prefix}video-nav-bg-hover-rgb: 0, 62, 150;
     --#{$prefix}video-nav-bg-opacity: 0.9;
     --#{$prefix}video-nav-color: var(--#{$prefix}dark-text);
     --#{$prefix}video-clock-icon-size: 1.25rem;
@@ -144,11 +144,11 @@
     }
     .video-overlay {
       --#{$prefix}video-nav-bg: var(--#{$prefix}dark-action-primary);
-      --#{$prefix}video-nav-bg-rgb: 120, 186, 0;
+      --#{$prefix}video-nav-bg-rgb: 132, 211, 255;
       --#{$prefix}video-nav-bg-hover: var(
         --#{$prefix}dark-action-primary-hover
       );
-      --#{$prefix}video-nav-bg-hover-rgb: 173, 211, 63;
+      --#{$prefix}video-nav-bg-hover-rgb: 166, 247, 255;
       --#{$prefix}video-nav-color: var(--#{$prefix}dark-action-text);
       --#{$prefix}video-play-icon-color: var(--#{$prefix}text-darkest);
     }
@@ -162,7 +162,7 @@
     --#{$prefix}card-footer-border: var(--#{$prefix}dark-border);
   }
   &-dark-alt {
-    --#{$prefix}card-bg: var(--#{$prefix}dark-blue);
+    --#{$prefix}card-bg: var(--#{$prefix}dark-alt-background);
     --#{$prefix}card-icon-background-color: var(
       --#{$prefix}dark-alt-background-shade
     );

package/src/components/bs5/footer/footer.scss

@@ -7,9 +7,7 @@
   //  1. Palette colours
   // ------------------------------------------------------------------------------------------------------------------
   // Default palette
-  --#{$prefix}footer-color-crest-fill: var(
-    --#{$prefix}color-default-color-light-crest-fill
-  );
+  --#{$prefix}footer-color-crest-fill: var(--#{$prefix}-neutral-black);
   --#{$prefix}footer-color-border: var(
     --#{$prefix}color-default-color-light-border-default
   );
@@ -35,11 +33,9 @@
   --#{$prefix}footer-color-background: var(
     --#{$prefix}color-default-color-light-background-default
   );
-  --#{$prefix}footer-color-alt-button: var(
-    --#{$prefix}core-default-color-brand-secondary-darkgreen
-  );
+  --#{$prefix}footer-color-alt-button: var(--#{$prefix}light-action-secondary);
   --#{$prefix}footer-color-alt-button__hover: var(
-    --#{$prefix}core-default-color-brand-primary-light-green
+    --#{$prefix}light-action-secondary-hover
   );
   --#{$prefix}footer-color-social-icon: #{$core-default-color-neutral-black};