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

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

@@ -6,66 +6,82 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Search Input",
   render: (args) => {
-    return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search">${new SearchInput(args).html}</form>`;
-  },
-
-  argTypes: {
+    return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search p-3">${new SearchInput(args).html}</form>`;
   },
 
+  argTypes: {},
   parameters: {
     docs: {
       controls: {
-        exclude: ["variantClass", "customClass", "inputID", "inputName", "buttonID", "buttonType", "ariaLabel"],
+        include: ["buttonLabel", "suggestions"],
       },
+      story: { height: "400px" },
     },
   },
-
 };
 
-
-
-
-/**
- * Default Search Input
- */
 export const Default = {
   args: defaultdata,
+  name: "Default - Outline Variant",
 };
 
 /**
- * Full width Search Input
+ * With `customClass: is-filled`
  */
+export const FilledVariant = {
+  args: { ...defaultdata, customClass: "is-filled" },
+};
+
 export const FullWidth = {
   args: {
     ...defaultdata,
     customClass: "full-width",
   },
-}
-
+};
 
 /**
  * Dark themed Search Input
- * 
- * Apply a class <code>.dark</code> to the parent container of the <code>.qld-search-input</code> element. 
+ *
+ * Apply a class <code>.dark</code> to the parent container of the <code>.qld-search-input</code> element.
  */
-
 export const Dark = {
-  args: { 
-	  ...defaultdata,
-	  variantClass: "dark",
+  args: {
+    ...defaultdata,
+  },
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+    },
   },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Dark themed Search Input
+ *
+ * Apply a class <code>.dark</code> to the parent container of the <code>.qld-search-input</code> element.
+ */
+export const DarkFilled = {
+  args: { ...defaultdata, customClass: "is-filled" },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
     },
   },
   decorators: [
     (Story) => {
       return `
-      <div class="dark p-5">
+      <div class="dark">
           ${Story()}
       </div>
       `;

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/tabs/tabs.scss

@@ -1,27 +1,27 @@
 .qld-tabs {
-  --accent-colour: var(--qld-brand-secondary);
+  --accent-colour: var(--#{$prefix}brand-secondary);
   --border-radius: #{$border-radius};
   --section-content-padding: 4rem;
   // tabs colours
-  --default-bg-colour: var(--qld-default-background);
-  --light-bg-colour: var(--qld-light-background);
-  --alt-bg-colour: var(--qld-light-alt-background);
-  --dark-bg-colour: var(--qld-dark-background);
-  --dark-alt-bg-colour: var(--qld-dark-alt-background);
-  --light-border-colour: var(--qld-soft-grey);
-  --light-colour: var(--qld-light-text-heading);
-  --dark-border-colour: var(--qld-dark-alt-border);
-  --dark-colour: var(--qld-dark-text);
+  --default-bg-colour: var(--#{$prefix}default-background);
+  --light-bg-colour: var(--#{$prefix}light-background);
+  --alt-bg-colour: var(--#{$prefix}light-alt-background);
+  --dark-bg-colour: var(--#{$prefix}dark-background);
+  --dark-alt-bg-colour: var(--#{$prefix}dark-alt-background);
+  --light-border-colour: var(--#{$prefix}soft-grey);
+  --light-colour: var(--#{$prefix}light-text-heading);
+  --dark-border-colour: var(--#{$prefix}dark-alt-border);
+  --dark-colour: var(--#{$prefix}dark-text);
   --icon-dropshadow:
     0px 1px 2px rgba(0, 0, 0, 0.2), 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
-  --focus-default-colour: var(--qld-light-focus);
+  --focus-default-colour: var(--#{$prefix}light-focus);
   --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill=''><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>");
   // bootstrap variables
   --#{$prefix}nav-tabs-border-radius: var(--border-radius);
-  --#{$prefix}nav-tabs-link-hover-border-color: var(--qld-tab-background-hover);
-  --#{$prefix}nav-tabs-link-active-color: var(--qld-tab-hover-text-color);
-  --#{$prefix}nav-tabs-link-active-bg: var(--qld-tab-background);
-  --#{$prefix}nav-tabs-link-active-border-color: var(--qld-border-color);
+  --#{$prefix}nav-tabs-link-hover-border-color: var(--#{$prefix}tab-background-hover);
+  --#{$prefix}nav-tabs-link-active-color: var(--#{$prefix}tab-hover-text-color);
+  --#{$prefix}nav-tabs-link-active-bg: var(--#{$prefix}tab-background);
+  --#{$prefix}nav-tabs-link-active-border-color: var(--#{$prefix}border-color);
   // animation
   --fade-time: 0.15s;
 
@@ -30,60 +30,62 @@
   .default &,
   .default,
   &.default {
-    --qld-tab-background: var(--qld-default-background-shade);
+    --qld-tab-background: var(--#{$prefix}default-background-shade);
   }
   .alt &,
   .alt,
   &.alt {
-    --qld-body-bg: var(--qld-light-alt-background);
-    --qld-border-color: var(--qld-soft-grey);
-    --qld-tab-background: var(--qld-light-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}light-alt-background);
+    --qld-border-color: var(--#{$prefix}soft-grey);
+    --qld-tab-background: var(--#{$prefix}light-alt-background-shade);
   }
   .light &,
   .light,
   &.light {
     --qld-body-bg: #eff4f9;
     --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
-    --qld-tab-background: var(--qld-light-background-shade);
-    --qld-tab-background-hover: var(--qld-button-dark-blue);
+    --qld-tab-background: var(--#{$prefix}light-background-shade);
+    --qld-tab-background-hover: var(--#{$prefix}button-dark-blue);
   }
   .dark &,
   .dark,
   &.dark {
-    --qld-border-color: var(--qld-dark-border);
-    --qld-tab-background: var(--qld-dark-hover);
+    --qld-border-color: var(--#{$prefix}dark-border);
+    --qld-tab-background: var(--#{$prefix}dark-hover);
   }
   .dark-alt &,
   .dark-alt,
   &.dark-alt {
-    --qld-body-bg: var(--qld-dark-alt-background);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-background: var(--qld-dark-alt-background-shade);
+    --qld-body-bg: var(--#{$prefix}dark-alt-background);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-background: var(--#{$prefix}dark-alt-background-shade);
   }
   &.default,
   &.light,
   &.alt {
     --qld-tab-hover-text-color: #{$color-default-color-light-link-on-action};
-    --qld-tab-icon-color: var(--qld-light-action-secondary);
-    --qld-tab-background-hover: var(--qld-light-action-primary-hover);
+    --qld-tab-icon-color: var(--#{$prefix}light-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}light-action-primary-hover);
     --qld-border-color: var(--light-border-colour);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
-    --qld-tab-focus-colour: var(--qld-light-focus);
-    --qld-tab-active-focus-colour: var(--qld-light-focus);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-secondary);
+    --qld-tab-focus-colour: var(--#{$prefix}light-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}light-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}nav-link-color);
   }
   &.dark,
   &.dark-alt {
-    --qld-tab-background-hover: var(--qld-dark-action-primary-hover);
-    --qld-tab-hover-text-color: var(--qld-text-darkest);
-    --qld-tab-icon-color: var(--qld-dark-action-secondary);
+    --qld-tab-background-hover: var(--#{$prefix}dark-action-primary-hover);
+    --qld-tab-hover-text-color: var(--#{$prefix}text-darkest);
+    --qld-tab-icon-color: var(--#{$prefix}dark-action-secondary);
     --qld-tab-disabled-colour: #{$qld-hint-text-color-muted};
-    --qld-tab-text-colour-heading: var(--qld-dark-text);
-    --qld-border-color: var(--qld-dark-alt-border);
-    --qld-tab-icon-color-hover: var(--qld-dark-action-text);
-    --qld-tab-focus-colour: var(--qld-dark-focus);
-    --qld-tab-active-focus-colour: var(--qld-dark-focus);
+    --qld-tab-text-colour-heading: var(--#{$prefix}dark-text);
+    --qld-border-color: var(--#{$prefix}dark-alt-border);
+    --qld-tab-icon-color-hover: var(--#{$prefix}dark-action-text);
+    --qld-tab-focus-colour: var(--#{$prefix}dark-focus);
+    --qld-tab-active-focus-colour: var(--#{$prefix}dark-focus);
     --qld-scroll-bg-color: var(--default-bg-colour);
+    --nav-link-color: var(--#{$prefix}dark-text);
   }
   &.container-tabs {
     --scroll-distance: 0;
@@ -417,7 +419,7 @@
           display: flex;
           gap: 0.5rem;
           white-space: nowrap;
-          color: var(--qld-nav-link-color);
+          color: var(--nav-link-color);
           align-items: anchor-center;
           i {
             font-size: 1.125rem;
@@ -544,6 +546,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--default-bg-colour);
       }
@@ -559,6 +562,7 @@
       --qld-scroll-bg-color: var(--light-bg-colour);
       --qld-scroll-area-bg-color: var(--light-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--light-bg-colour);
       }
@@ -574,6 +578,7 @@
       --qld-scroll-bg-color: var(--alt-bg-colour);
       --qld-scroll-area-bg-color: var(--alt-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-secondary);
+      --nav-link-color: var(--#{$prefix}nav-link-color);
       .tabs-area {
         background-color: var(--alt-bg-colour);
       }
@@ -587,6 +592,7 @@
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-scroll-area-bg-color: var(--dark-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       .tabs-area {
         background-color: var(--dark-bg-colour);
       }
@@ -599,6 +605,7 @@
       --qld-tab-text-colour-heading: var(--qld-dark-text);
       --qld-scroll-bg-color: var(--default-bg-colour);
       --qld-tab-icon-color-hover: var(--qld-dark-action-text);
+      --nav-link-color: var(--#{$prefix}dark-text);
       color: var(--qld-body-color);
       background-color: var(--qld-dark-alt-background);
       .tabs-area {

package/src/css/main.masterbrand.scss

@@ -0,0 +1,137 @@
+@import './themes/masterbrand.scss';// Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
+
+// 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:
+  "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;
+$font-family-sitename: "Fira Sans";
+
+//Prefix to namespace design-system classes
+$prefix: "qld-";
+$enable-cssgrid: true;
+$color-mode-type: data;
+$enable-dark-mode: true;
+
+// 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
+
+// 2. QLD Design System variables (Bootstrap overrides)
+@import "./qld-variables";
+@import "variables";
+
+// 3. Include remainder of bootstrap
+// 3.1 Required
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";
+
+// 3.2 QLD Design System utilities (is dependent on maps, mixins and utilities being available)
+@import "./qld-utilities";
+
+// 3.2 Recommended, Resets and shared
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/helpers";
+
+// 3.3 Optional components
+@import "../../node_modules/bootstrap/scss/accordion";
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/carousel";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/list-group";
+@import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/progress";
+@import "../../node_modules/bootstrap/scss/transitions";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/offcanvas";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/placeholders";
+@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/spinners";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/toasts";
+@import "../../node_modules/bootstrap/scss/tooltip";
+
+// 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";
+
+// Common Layout Blocks
+@import "../components/common/layout/content";
+@import "../components/common/layout/container";
+
+// 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency.
+@import "../components/bs5/accordion/accordion";
+@import "../components/bs5/banner/banner";
+@import "../components/bs5/blockquote/blockquote";
+@import "../components/bs5/breadcrumbs/breadcrumbs";
+@import "../components/bs5/button/button";
+@import "../components/bs5/callout/callout";
+@import "../components/bs5/card/card";
+@import "../components/bs5/callToAction/callToAction";
+@import "../components/bs5/correctincorrect/correctincorrect";
+@import "../components/bs5/dateinput/dateinput";
+@import "../components/bs5/directionLinks/directionLinks";
+@import "../components/bs5/formcheck/formcheck";
+@import "../components/bs5/footer/footer";
+@import "../components/bs5/globalAlert/globalAlert";
+@import "../components/bs5/link/link";
+@import "../components/bs5/header/header";
+@import "../components/bs5/icons/icons";
+@import "../components/bs5/inpageAlert/inpageAlert";
+@import "../components/bs5/image/image";
+@import "../components/bs5/inpagenav/inpagenav";
+@import "../components/bs5/linkColumns/linkColumns";
+@import "../components/bs5/modal/modal";
+@import "../components/bs5/navbar/navbar";
+@import "../components/bs5/pagination/pagination";
+@import "../components/bs5/promotionalPanel/promotionalPanel";
+@import "../components/bs5/quickexit/quickexit";
+@import "../components/bs5/sidenav/sidenav";
+@import "../components/bs5/searchInput/searchInput";
+@import "../components/bs5/skiplinks/skipLinks";
+@import "../components/bs5/spinner/spinner";
+@import "../components/bs5/table/table";
+@import "../components/bs5/tabs/tabs";
+@import "../components/bs5/tag/tag";
+@import "../components/bs5/textbox/textInput";
+@import "../components/bs5/typography/typography";
+@import "../components/bs5/video/video";
+
+// Custom utility classes
+@import "utilities";
+
+// Print
+@import "qld-print";

package/src/css/mixins/focusable.scss

@@ -2,8 +2,12 @@
 /// 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} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
-/// @param {String} $prefix ["qld-"] The css var prefix. This is declared in main.scss but required here as a module because reimporting will emit the entire main css file.
-@mixin focusable($offsetOutline: true, $isFocusWithin: false) {
+/// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+@mixin focusable(
+  $offsetOutline: true,
+  $isFocusWithin: false,
+  $customSelector: null
+) {
   // outline styles without the pseudo state to allow for transition animations.
 
   $outline-width: 3px;
@@ -18,7 +22,11 @@
   outline: $outline-width solid transparent;
   outline-offset: $initial-offset;
 
-  $selector: if($isFocusWithin, ":focus-within", ":focus");
+  $selector: if(
+    $customSelector,
+    $customSelector,
+    if($isFocusWithin, ":focus-within", ":focus")
+  );
 
   &#{$selector} {
     outline: {

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

@@ -13,6 +13,7 @@ $prefix: "qld-" !default;
 /// @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})
+/// @content
 @mixin make-icon(
   $name: null,
   $size: "sm",
@@ -43,7 +44,9 @@ $prefix: "qld-" !default;
     &::#{$pseudo} {
       content: "";
       // recursively call this mixin with $pseudo set to null
-      @include make-icon($name, $size, null, $is-inline, $include-base);
+      @include make-icon($name, $size, null, $is-inline, $include-base) {
+        @content;
+      }
     }
   } @else {
     @if $include-base {
@@ -83,5 +86,8 @@ $prefix: "qld-" !default;
         -webkit-mask-image: var(--qgds-icon-#{$name});
       }
     }
+
+    // allow arbitrary content
+    @content;
   }
 }

package/src/css/qld-tokens.scss

@@ -0,0 +1,95 @@
+
+// Do not edit directly
+// 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;