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

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

@@ -1,16 +1,16 @@
 // Blockquote.stories.js
-import { Pagination } from './Pagination.js';
-import defaultdata from './pagination.data.json';
+import { Pagination } from "./Pagination.js";
+import defaultdata from "./pagination.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Pagination',
+  tags: ["autodocs"],
+  title: "3. Components/Pagination",
   render: (args) => new Pagination(args).html,
-  
+
   parameters: {
     docs: {
       controls: {
-        exclude: ['previous', 'next', 'pages'],
+        exclude: ["previous", "next", "pages"],
         hideNoControlsWarning: true,
       },
     },
@@ -25,24 +25,20 @@ export const Default = {
   args: defaultdata,
 };
 
-
 /**
  * Pagination when used inside a <code>.light</code> container
  */
 
 export const Light = {
-  
   args: defaultdata,
 
   parameters: {
     backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
     },
   },
-  
+
   decorators: [
     (Story) => {
       return `
@@ -54,25 +50,22 @@ export const Light = {
   ],
 };
 
-
-
 /**
  * Pagination when used inside a <code>.light-alternative</code> container
  */
 
 export const LightAlternative = {
-  
   args: defaultdata,
 
   parameters: {
     backgrounds: {
-      default: 'Light Alternative',
+      default: "Light Alternative",
       values: [
-        { name: 'Light Alternative', value: 'var(--qld-light-alt-background)' },
+        { name: "Light Alternative", value: "var(--qld-light-alt-background)" },
       ],
     },
   },
-  
+
   decorators: [
     (Story) => {
       return `
@@ -84,25 +77,20 @@ export const LightAlternative = {
   ],
 };
 
-
-
 /**
  * Pagination when used inside a <code>.dark</code> container
  */
 
 export const Dark = {
-  
   args: defaultdata,
 
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
     },
   },
-  
+
   decorators: [
     (Story) => {
       return `
@@ -114,24 +102,22 @@ export const Dark = {
   ],
 };
 
-
 /**
  * Pagination when used inside a <code>.dark-alt</code> container
  */
 
 export const DarkAlternative = {
-  
   args: defaultdata,
 
   parameters: {
     backgrounds: {
-      default: 'Dark Alternative',
+      default: "Dark Alternative",
       values: [
-        { name: 'Dark Alternative', value: 'var(--qld-primary-dark)' },
+        { name: "Dark Alternative", value: "var(--qld-dark-alt-background)" },
       ],
     },
   },
-  
+
   decorators: [
     (Story) => {
       return `
@@ -142,4 +128,3 @@ export const DarkAlternative = {
     },
   ],
 };
-

package/src/components/bs5/searchInput/searchInput.test.js

@@ -1,4 +1,4 @@
-import { expect, it, describe, test, beforeEach } from "vitest";
+import { expect, it, describe, test, beforeEach, afterEach } from "vitest";
 import { JSDOM } from "jsdom";
 import { SearchInput } from "./SearchInput.js";
 import mockData from "./searchInput.data.json";
@@ -63,12 +63,15 @@ describe("SearchInput", () => {
     d = dom.window.document;
     window = dom.window;
 
-    // Wait for scripts to execute
-    await waitFor();
+    // Wait for scripts to execute and DOM to be fully ready
+    await waitFor(100);
+
+    // Additional wait to ensure all scripts are fully initialized
+    await new Promise(resolve => setTimeout(resolve, 100));
 
     form = d.querySelector(".site-search");
-    searchInput = form.querySelector(".qld-search-input input");
-    suggestions = form.querySelector(".suggestions");
+    searchInput = form?.querySelector(".qld-search-input input");
+    suggestions = form?.querySelector(".suggestions");
 
     // Ensure elements exist
     if (!form || !searchInput || !suggestions) {
@@ -76,6 +79,19 @@ describe("SearchInput", () => {
     }
   });
 
+  afterEach(() => {
+    // Clean up DOM and prevent memory leaks
+    if (dom) {
+      dom.window.close();
+      dom = null;
+      d = null;
+      window = null;
+      form = null;
+      searchInput = null;
+      suggestions = null;
+    }
+  });
+
   it("Renders as expected", () => {
     const SearchInputComponent = new SearchInput(mockData);
     expect(SearchInputComponent.html).toMatchSnapshot();

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/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/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:

package/src/css/qld-tokens-legacy.scss

@@ -0,0 +1,94 @@
+// Static copy of Masterbrand color tokens V1.0
+// Original generated on Thu, 13 Jun 2024 02:52:12 GMT
+
+$core-default-color-neutral-black: #131212 !default;
+$core-default-color-neutral-darkest: #222020 !default;
+$core-default-color-neutral-darker: #444444 !default;
+$core-default-color-neutral-dark: #78797e !default;
+$core-default-color-neutral-light: #e0e0e0 !default;
+$core-default-color-neutral-lighter: #ebebeb !default;
+$core-default-color-neutral-lightest: #f5f5f5 !default;
+$core-default-color-neutral-white: #ffffff !default;
+$core-default-color-status-caution-default: #ffcc2c !default;
+$core-default-color-status-caution-darker: #b38800 !default;
+$core-default-color-status-caution-lighter: #fff2c9 !default;
+$core-default-color-status-caution-lightest: #fffaea !default;
+$core-default-color-status-info-default: #0085b3 !default;
+$core-default-color-status-info-darker: #006a8f !default;
+$core-default-color-status-info-lighter: #e5eef5 !default;
+$core-default-color-status-info-lightest: #eff4f9 !default;
+$core-default-color-status-error-default: #e22339 !default;
+$core-default-color-status-error-darker: #8a1220 !default;
+$core-default-color-status-error-lighter: #fdf0f0 !default;
+$core-default-color-status-error-lightest: #fff6f6 !default;
+$core-default-color-status-success-default: #339d37 !default;
+$core-default-color-status-success-darker: #0a690d !default;
+$core-default-color-status-success-lighter: #f2faf4 !default;
+$core-default-color-status-success-lightest: #f7fbf8 !default;
+$core-default-color-status-underline-light: #ffffffb8 !default;
+$core-default-color-status-underline-dark: #03213fb8 !default;
+$core-default-color-brand-primary-dark-blue: #05325f !default;
+$core-default-color-brand-primary-sapphire-blue: #09549f !default;
+$core-default-color-brand-primary-light-blue: #0085b3 !default;
+$core-default-color-brand-primary-light-green: #6bbe27 !default;
+$core-default-color-brand-secondary-darkgreen: #008635 !default;
+$core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
+$core-default-color-brand-other-modern-maroon: #a70240 !default;
+$core-default-color-brand-other-gov-maroon: #771e32 !default;
+$core-default-color-code-green: #6bbe27 !default;
+$core-default-color-code-light-blue: #a7e5ff !default;
+$core-default-color-code-violet: #c88df7 !default;
+$core-default-color-code-muted: #c0d7ec !default;
+$core-default-color-contained-layout-background: #09549f !default;
+$core-default-color-contained-layout-background-dark: #09549f !default;
+$color-default-color-light-background-default: #ffffff !default;
+$color-default-color-light-background-default-shade: #f5f5f5 !default;
+$color-default-color-light-background-light: #eff4f9 !default;
+$color-default-color-light-background-light-shade: #e5eef5 !default;
+$color-default-color-light-background-alt: #e8e8e8 !default;
+$color-default-color-light-background-alt-shade: #e0e0e0 !default;
+$color-default-color-light-border-default: #ebebeb !default;
+$color-default-color-light-border-light: #ccddee !default;
+$color-default-color-light-border-alt: #7a7a7a !default;
+$color-default-color-light-action-primary: #09549f !default;
+$color-default-color-light-action-primary-hover: #003e7d !default;
+$color-default-color-light-action-secondary: #008635 !default;
+$color-default-color-light-action-secondary-hover: #005b23 !default;
+$color-default-color-light-link-on-action: #ffffff !default;
+$color-default-color-light-link-default: #09549f !default;
+$color-default-color-light-link-visited: #551a8b !default;
+$color-default-color-light-accent-design-accent: #6bbe27 !default;
+$color-default-color-light-focus-default: #0085b3 !default;
+$color-default-color-light-underline-default: #3f7ab4 !default;
+$color-default-color-light-underline-default-hover: #09549f !default;
+$color-default-color-light-underline-visited: #8b63b0 !default;
+$color-default-color-light-underline-visited-hover: #551a8b !default;
+$color-default-color-light-text-default: #414141 !default;
+$color-default-color-light-text-lighter: #636363 !default;
+$color-default-color-light-text-heading: #04284c !default;
+$color-default-color-light-site-title: #022a50 !default;
+$color-default-color-light-crest-fill: #1d1d1d !default;
+$color-default-color-dark-background-default: #09549f !default;
+$color-default-color-dark-background-default-shade: #04498f !default;
+$color-default-color-dark-background-alt: #05325f !default;
+$color-default-color-dark-background-alt-shade: #052c53 !default;
+$color-default-color-dark-border-default: #1d9ac6 !default;
+$color-default-color-dark-border-alt: #09acfe !default;
+$color-default-color-dark-action-primary: #78ba00 !default;
+$color-default-color-dark-action-primary-hover: #add33f !default;
+$color-default-color-dark-action-secondary: #ffe500 !default;
+$color-default-color-dark-action-secondary-hover: #ffef60 !default;
+$color-default-color-dark-link-default: #ffffff !default;
+$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-link-on-action: #121940 !default;
+$color-default-color-dark-accent-design-accent: #6bbe27 !default;
+$color-default-color-dark-focus-default: #01b0e5 !default;
+$color-default-color-dark-underline-default: #b5cce2 !default;
+$color-default-color-dark-underline-default-hover: #ffffff !default;
+$color-default-color-dark-underline-visited: #e1c2ff !default;
+$color-default-color-dark-underline-visited-hover: #ee11bb !default;
+$color-default-color-dark-text-default: #ffffff !default;
+$color-default-color-dark-text-lighter: #deebf9 !default;
+$color-default-color-dark-text-heading: #ffffff !default;
+$color-default-color-dark-site-title: #ffffff !default;
+$color-default-color-dark-crest-fill: #ffffff !default;