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

package/src/components/bs5/textbox/textInput.scss

@@ -35,7 +35,7 @@
 
   &:disabled {
     cursor: not-allowed;
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 
@@ -53,7 +53,7 @@
 
   &.field-required {
     &:before {
-      content: ' *';
+      content: " *";
     }
   }
 }
@@ -64,10 +64,10 @@
   }
 }
 
-*+.qld-hint-text,
-*+.qld-input-error,
-*+.qld-input-success,
-*+.date-container {
+* + .qld-hint-text,
+* + .qld-input-error,
+* + .qld-input-success,
+* + .date-container {
   margin-top: 8px;
 }
 
@@ -79,10 +79,10 @@
   margin-bottom: 0.5rem;
 }
 
-*+p.qld-input-error,
-*+span.qld-input-error,
-*+p.qld-input-success,
-*+span.qld-input-success {
+* + p.qld-input-error,
+* + span.qld-input-error,
+* + p.qld-input-success,
+* + span.qld-input-success {
   font-size: 1rem;
   line-height: 1.5;
   display: flex;
@@ -119,25 +119,25 @@ span.qld-input-error {
   }
 }
 
-.qld-hint-text+select,
-.qld-hint-text+input,
-.qld-hint-text+textarea,
-.sq-form-question-note+select,
-.sq-form-question-note+input,
-.sq-form-question-note+textarea {
+.qld-hint-text + select,
+.qld-hint-text + input,
+.qld-hint-text + textarea,
+.sq-form-question-note + select,
+.sq-form-question-note + input,
+.sq-form-question-note + textarea {
   margin-top: 0.5rem;
 }
 
-.qld-input-success+input[type=text],
-.qld-input-error+input[type=text],
-.qld-input-success+input[type=email],
-.qld-input-error+input[type=email],
-.qld-input-success+input[type=date],
-.qld-input-error+input[type=date],
-.qld-input-success+.qld-text-input,
-.qld-input-error+.qld-text-input,
-.qld-input-success+textarea,
-.qld-input-error+textarea {
+.qld-input-success + input[type="text"],
+.qld-input-error + input[type="text"],
+.qld-input-success + input[type="email"],
+.qld-input-error + input[type="email"],
+.qld-input-success + input[type="date"],
+.qld-input-error + input[type="date"],
+.qld-input-success + .qld-text-input,
+.qld-input-error + .qld-text-input,
+.qld-input-success + textarea,
+.qld-input-error + textarea {
   margin-top: 8px;
   margin-top: 0.5rem;
 }
@@ -172,7 +172,9 @@ select.qld-select.qld-input-success:not(:focus) {
 
   &.disabled,
   &:disabled {
-    background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+    background-color: var(
+      --#{$prefix}color-default-color-light-background-default-shade
+    );
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23636363' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
   }
 
@@ -204,7 +206,6 @@ select.qld-select.qld-input-success:not(:focus) {
 }
 
 @include media-breakpoint-up(md) {
-
   input.qld-field-width-1-quarter,
   select.qld-field-width-1-quarter {
     max-width: $qld-fluid-width-1-quarter;
@@ -222,41 +223,56 @@ select.qld-select.qld-input-success:not(:focus) {
 }
 
 .dark {
-  .form-control.qld-text-input:not(:hover):not(:focus):not(.qld-input-error):not(.qld-input-success)::-webkit-input-placeholder {
+  .form-control.qld-text-input:not(:hover):not(:focus):not(
+      .qld-input-error
+    ):not(.qld-input-success)::-webkit-input-placeholder {
     color: $qld-hint-text-color-muted;
   }
 
-  .form-control.qld-text-input:not(:hover):not(:focus):not(.qld-input-error):not(.qld-input-success)::-moz-placeholder {
+  .form-control.qld-text-input:not(:hover):not(:focus):not(
+      .qld-input-error
+    ):not(.qld-input-success)::-moz-placeholder {
     color: $qld-hint-text-color-muted;
   }
 
-  .form-control.qld-text-input:not(:hover):not(:focus):not(.qld-input-error):not(.qld-input-success)::-ms-placeholder {
+  .form-control.qld-text-input:not(:hover):not(:focus):not(
+      .qld-input-error
+    ):not(.qld-input-success)::-ms-placeholder {
     color: $qld-hint-text-color-muted;
   }
 
-  .form-control.qld-text-input:not(:hover):not(:focus):not(.qld-input-error):not(.qld-input-success)::placeholder {
+  .form-control.qld-text-input:not(:hover):not(:focus):not(
+      .qld-input-error
+    ):not(.qld-input-success)::placeholder {
     color: $qld-hint-text-color-muted;
   }
 
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(.qld-input-success)::-webkit-input-placeholder {
+  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
+      .qld-input-success
+    )::-webkit-input-placeholder {
     color: $qld-white;
   }
 
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(.qld-input-success)::-moz-placeholder {
+  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
+      .qld-input-success
+    )::-moz-placeholder {
     color: $qld-white;
   }
 
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(.qld-input-success)::-ms-placeholder {
+  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
+      .qld-input-success
+    )::-ms-placeholder {
     color: $qld-white;
   }
 
-  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(.qld-input-success)::placeholder {
+  .form-control.qld-text-input:hover:not(:focus):not(.qld-input-error):not(
+      .qld-input-success
+    )::placeholder {
     color: $qld-white;
   }
 }
 
 .dark {
-
   .qld-text-input {
     border-color: $qld-dark-alt-border;
     background-color: var(--qld-dark-background);
@@ -265,7 +281,7 @@ select.qld-select.qld-input-success:not(:focus) {
     &:hover {
       color: $qld-white;
       background-color: $qld-color-dark-background--shade;
-      border-color: $qld-color-dark-button-hover;
+      border-color: $color-default-color-dark-action-primary-hover;
     }
 
     &:focus {
@@ -293,4 +309,4 @@ select.qld-select.qld-input-success:not(:focus) {
   .form-style-filled {
     background-color: $qld-color-dark-background--shade;
   }
-}
+}

package/src/components/bs5/typography/Typography.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as TypographyStories from "./typography.stories";
 
 <Meta of={TypographyStories} />

package/src/components/bs5/typography/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/typography/typography.data.json

@@ -0,0 +1 @@
+{}

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

@@ -68,6 +68,8 @@ export default {
         url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-301553&mode=design&t=5REJ3QGtTW1K0fGT-4",
       },
     ],
+    backgrounds: { disable: false },
+    globals: { backgrounds: { value: "default" } },
   },
 };
 
@@ -80,12 +82,7 @@ export const Default = {};
  * Light colour Callout
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -103,12 +100,7 @@ export const Light = {
  * Alternative Callout
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -126,12 +118,7 @@ export const Alternative = {
  * Dark Callout
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -149,12 +136,7 @@ export const Dark = {
  * Dark alternative Callout
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/video/Video.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as VideoStories from "./video.stories";
 
 <Meta of={VideoStories} />

package/src/components/bs5/video/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/video/video.scss

@@ -1,6 +1,5 @@
 // QGDS QOL Video Component
 
-
 // Video variables.
 
 $video-icon-color: $qld-dark-text;
@@ -19,10 +18,10 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 .video {
   --#{$prefix}video-border-radius: 0.25rem;
   --#{$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-opacity: .9;
+  --#{$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-play-icon: #{escape-svg($video-play-icon)};
   --#{$prefix}video-play-icon-size: 2rem;
@@ -33,13 +32,12 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   .dark &,
   .dark-alt & {
     --#{$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: #{escape-svg($video-play-icon-dark)};
     --#{$prefix}video-clock-icon: #{escape-svg($video-clock-icon-dark)};
-
   }
 }
 
@@ -47,7 +45,9 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 .video {
   padding: 0px;
   border-radius: var(--#{$prefix}video-border-radius);
-  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0px 2px 6px 2px rgba(0, 0, 0, 0.15),
+    0px 1px 2px rgba(0, 0, 0, 0.3);
   display: grid;
   grid-template-rows: 1fr;
   grid-template-areas: "video" "description" "transcript";
@@ -63,7 +63,6 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       outline: 3px solid var(--#{$prefix}focus);
       outline-offset: 2px;
     }
-
   }
 
   &-thumbnail,
@@ -77,8 +76,12 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     width: 100%;
     overflow: clip;
     border: 0;
-    -webkit-transition: opacity .25s ease-out, z-index .3s 0s ease-out;
-    transition: opacity .25s ease-out, z-index .3s 0s ease-out;
+    -webkit-transition:
+      opacity 0.25s ease-out,
+      z-index 0.3s 0s ease-out;
+    transition:
+      opacity 0.25s ease-out,
+      z-index 0.3s 0s ease-out;
   }
 
   &-thumbnail {
@@ -94,17 +97,21 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       left: 0;
       width: 100%;
       height: 100%;
-      -webkit-transition: opacity .25s ease-in-out;
-      transition: opacity .25s ease-in-out;
+      -webkit-transition: opacity 0.25s ease-in-out;
+      transition: opacity 0.25s ease-in-out;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       &:before {
-        opacity: .15;
+        opacity: 0.15;
       }
 
       .video-nav {
-        background-color: rgba(var(--#{$prefix}video-nav-bg-hover-rgb), var(--#{$prefix}video-nav-bg-opacity));
+        background-color: rgba(
+          var(--#{$prefix}video-nav-bg-hover-rgb),
+          var(--#{$prefix}video-nav-bg-opacity)
+        );
 
         .video-watch {
           background-color: var(--#{$prefix}video-nav-bg-hover);
@@ -116,7 +123,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 
       .video-thumbnail-image {
         &:before {
-          opacity: .15;
+          opacity: 0.15;
         }
       }
     }
@@ -140,8 +147,8 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
         left: 0;
         width: 100%;
         height: 100%;
-        -webkit-transition: opacity .25s ease-in-out;
-        transition: opacity .25s ease-in-out;
+        -webkit-transition: opacity 0.25s ease-in-out;
+        transition: opacity 0.25s ease-in-out;
       }
     }
   }
@@ -179,7 +186,10 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     display: flex;
     left: 0;
     bottom: 0;
-    background-color: rgba(var(--#{$prefix}video-nav-bg-rgb), var(--#{$prefix}video-nav-bg-opacity));
+    background-color: rgba(
+      var(--#{$prefix}video-nav-bg-rgb),
+      var(--#{$prefix}video-nav-bg-opacity)
+    );
     border-top-right-radius: 0.75rem;
     overflow: clip;
     font-weight: 400;
@@ -188,8 +198,12 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 
   &-nav,
   &-watch {
-    -webkit-transition: background-color .25s ease-in-out, text-decoration-color .25s ease-in-out;
-    transition: background-color .25s ease-in-out, text-decoration-color .25s ease-in-out;
+    -webkit-transition:
+      background-color 0.25s ease-in-out,
+      text-decoration-color 0.25s ease-in-out;
+    transition:
+      background-color 0.25s ease-in-out,
+      text-decoration-color 0.25s ease-in-out;
   }
 
   &-duration,
@@ -206,7 +220,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       display: inline-block;
       vertical-align: middle;
       margin-left: -2rem;
-      margin-right: .5rem;
+      margin-right: 0.5rem;
     }
   }
 
@@ -229,12 +243,12 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     }
   }
 
-
-
   &-description {
     padding: 0.75rem 1rem;
     grid-area: description;
-    p, ul, ol {
+    p,
+    ul,
+    ol {
       &:last-child {
         margin-bottom: 0;
       }
@@ -246,7 +260,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     grid-area: transcript;
     &-item {
       &,
-      &:last-of-type>.accordion-header .accordion-button.collapsed {
+      &:last-of-type > .accordion-header .accordion-button.collapsed {
         border-bottom-right-radius: var(--#{$prefix}video-border-radius);
         border-bottom-left-radius: var(--#{$prefix}video-border-radius);
       }

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

@@ -84,7 +84,9 @@ export default {
     controls: {
       exclude: ["transcriptAccordion"],
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -110,12 +112,7 @@ export const Custom = {
  * Light colour Video
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -131,12 +128,7 @@ export const Light = {
  * Alternative Video
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -152,12 +144,7 @@ export const Alternative = {
  * Dark Video
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -173,12 +160,7 @@ export const Dark = {
  * Dark alternative Video
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/css/main.legacy.scss

@@ -0,0 +1,19 @@
+// Legacy Theme Entry Point
+//
+// This file compiles the stylesheet using the legacy (pre-October 2025) theme.
+//
+// It works by loading variables from `qld-tokens-legacy.scss` and creating a
+// `$qld-tokens` SASS map. This map is then consumed by the main application
+// (`main.scss`) to override the default theme tokens.
+
+@use "sass:meta";
+
+//Legacy Masterbrand "tokens" (Pre October 2025)
+@use "./qld-tokens-legacy";
+@import "./qld-tokens-legacy";
+
+//Map to $qld-tokens sass map
+$qld-tokens: meta.module-variables("qld-tokens-legacy");
+
+// Continue with full main.scss entry file
+@import "./main.scss";

package/src/css/main.scss

@@ -1,5 +1,22 @@
 // Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
 
+@use "sass:meta";
+
+//
+// Default Theme Token Setup
+//
+// This block establishes the default theme by creating a SASS map named `$qld-tokens`.
+//
+// 1. It loads variables from the default `qld-tokens.scss` file.
+// 2. It converts these variables into the `$qld-tokens` map.
+// 3. The `!default` flag is the core of the theming system: it allows an upstream
+//    entry point (e.g., `main.legacy.scss`) to define its own `$qld-tokens` map
+//    first, which will be used instead of these defaults.
+//
+@use "./qld-tokens";
+@import "./qld-tokens";
+$qld-tokens: meta.module-variables("qld-tokens") !default;
+
 // External fonts
 @import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap");
 $font-family-sans-serif: