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

package/src/css/qld-tokens.scss

@@ -0,0 +1,110 @@
+/* Master brand SASS variables that have changed to align with Brand Book release 2025 */
+
+/* Dark palettes */
+$color-default-color-dark-accent-design-accent: #84d3ff !default;
+$color-default-color-dark-action-primary-hover: #a6f7ff !default;
+$color-default-color-dark-action-primary: #84d3ff !default;
+$color-default-color-dark-action-secondary-hover: #a6f7ff !default;
+$color-default-color-dark-action-secondary: #84d3ff !default;
+$color-default-color-dark-background-alt-shade: #000764 !default;
+$color-default-color-dark-background-alt: #001d74 !default;
+$color-default-color-dark-background-default-shade: #003e96 !default;
+$color-default-color-dark-background-default: #005eb8 !default;
+$color-default-color-dark-border-alt: #63b1ff !default;
+$color-default-color-dark-border-default: #418fed !default;
+$color-default-color-dark-crest-fill: #ffffff !default;
+$color-default-color-dark-focus-default: #c6ffff !default;
+$color-default-color-dark-link-default: #ffffff !default;
+$color-default-color-dark-link-on-action: #001c37 !default;
+$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-site-title: #ffffff !default;
+$color-default-color-dark-text-default: #ffffff !default;
+$color-default-color-dark-text-heading: #ffffff !default;
+$color-default-color-dark-text-lighter: #deebf9 !default;
+$color-default-color-dark-underline-default-hover: #ffffff !default;
+$color-default-color-dark-underline-default: #b5cce2 !default;
+$color-default-color-dark-underline-visited-hover: #e1bbee !default;
+$color-default-color-dark-underline-visited: #e1c2ff !default;
+
+/* Light palettes */
+$color-default-color-light-accent-design-accent: #84d3ff !default;
+$color-default-color-light-action-primary-hover: #003e96 !default;
+$color-default-color-light-action-primary: #005eb8 !default;
+$color-default-color-light-action-secondary-hover: #004ea7 !default;
+$color-default-color-light-action-secondary: #307edb !default;
+$color-default-color-light-background-alt-shade: #d6dce0 !default;
+$color-default-color-light-background-alt: #e3e7ea !default;
+$color-default-color-light-background-default-shade: #f5f5f5 !default;
+$color-default-color-light-background-default: #ffffff !default;
+$color-default-color-light-background-light-shade: #ceedff !default;
+$color-default-color-light-background-light: #e6f6ff !default;
+$color-default-color-light-border-alt: #848484 !default;
+$color-default-color-light-border-default: #ebebeb !default;
+$color-default-color-light-border-light: #bedfff !default;
+$color-default-color-light-crest-fill: #005eb8 !default;
+$color-default-color-light-focus-default: #002e85 !default;
+$color-default-color-light-link-default: #005eb8 !default;
+$color-default-color-light-link-on-action: #ffffff !default;
+$color-default-color-light-link-visited: #551a8b !default;
+$color-default-color-light-site-title: #005eb8 !default;
+$color-default-color-light-text-default: #353535 !default;
+$color-default-color-light-text-heading: #000053 !default;
+$color-default-color-light-text-lighter: #636363 !default;
+$color-default-color-light-underline-default-hover: #005eb8 !default;
+$color-default-color-light-underline-default: #3f7ab4 !default;
+$color-default-color-light-underline-visited-hover: #551a8b !default;
+$color-default-color-light-underline-visited: #8b63b0 !default;
+
+/* V1 brand colors */
+$core-default-color-brand-other-gov-maroon: #771e32 !default;
+$core-default-color-brand-other-modern-maroon: #a70240 !default;
+$core-default-color-brand-primary-dark-blue: #05325f !default;
+$core-default-color-brand-primary-light-blue: #0085b3 !default;
+$core-default-color-brand-primary-light-green: #6bbe27 !default;
+$core-default-color-brand-primary-sapphire-blue: #09549f !default;
+$core-default-color-brand-secondary-darkgreen: #008635 !default;
+$core-default-color-brand-secondary-golden-yellow: #ffe500 !default;
+
+/* Code colors */
+$core-default-color-code-green: #6bbe27 !default;
+$core-default-color-code-light-blue: #a7e5ff !default;
+$core-default-color-code-muted: #c0d7ec !default;
+$core-default-color-code-violet: #c88df7 !default;
+
+/* Neutral colors */
+$core-default-color-neutral-black: #131212 !default;
+$core-default-color-neutral-dark: #78797e !default;
+$core-default-color-neutral-darker: #444444 !default;
+$core-default-color-neutral-darkest: #222020 !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;
+
+/* Status colors */
+$core-default-color-status-caution-darker: #b38800 !default;
+$core-default-color-status-caution-default: #ffcc2c !default;
+$core-default-color-status-caution-lighter: #fff2c9 !default;
+$core-default-color-status-caution-lightest: #fffaea !default;
+$core-default-color-status-error-darker: #8a1220 !default;
+$core-default-color-status-error-default: #e22339 !default;
+$core-default-color-status-error-lighter: #fdf0f0 !default;
+$core-default-color-status-error-lightest: #fff6f6 !default;
+$core-default-color-status-info-darker: #006a8f !default;
+$core-default-color-status-info-default: #0085b3 !default;
+$core-default-color-status-info-lighter: #e5eef5 !default;
+$core-default-color-status-info-lightest: #eff4f9 !default;
+$core-default-color-status-success-darker: #0a690d !default;
+$core-default-color-status-success-default: #339d37 !default;
+$core-default-color-status-success-lighter: #f2faf4 !default;
+$core-default-color-status-success-lightest: #f7fbf8 !default;
+$core-default-color-status-underline-dark: #03213fb8 !default;
+$core-default-color-status-underline-light: #ffffffb8 !default;
+
+/* Other for review */
+$core-default-color-contained-layout-background-dark: #09549f !default;
+$core-default-color-contained-layout-background: #09549f !default;
+$core-default-color-contained-layout-background-dark: #005eb8 !default;
+$core-default-color-contained-layout-background: #005eb8 !default;
+$core-default-color-status-underline-dark: #03213f !default;
+$core-default-color-status-underline-light: #ffffff !default;

package/src/css/qld-variables.scss

@@ -1,13 +1,7 @@
+@use "sass:meta";
 @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)
-
-// These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css,
-
-//QGDS tokens - masterbrand
-@import "@qld-gov-au/qgds-tokens/dist/scss/_variables.scss";
-@import "@qld-gov-au/qgds-tokens/dist/scss/_map.scss";
+// GLOBALLY SCOPED VARIABLES defined via qld-tokens.scss sass map, imported at top of main.scss
 
 //QLD Names Colours
 $qld-dark-blue: $core-default-color-brand-primary-dark-blue;
@@ -33,16 +27,17 @@ $qld-light-border: $color-default-color-light-border-default;
 $qld-light-border-alt: $color-default-color-light-border-alt;
 $qld-dark-focus: $color-default-color-dark-focus-default;
 $qld-light-focus: $color-default-color-light-focus-default;
+
 ////
 $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-link-underline-dark: $color-default-color-dark-underline-default;
 $qld-link-underline-hover-dark: $color-default-color-dark-underline-default-hover;
 $qld-link-underline-visited-dark: $color-default-color-dark-underline-visited;
 $qld-link-underline-visited-hover-dark: $color-default-color-dark-underline-visited-hover;
+
 ///
 $qld-link-visited: $color-default-color-light-underline-visited;
 $qld-link-visited-dark: $color-default-color-dark-underline-visited;
@@ -56,12 +51,20 @@ $qld-light-yellow: $core-default-color-status-caution-lightest;
 $qld-button-dark-blue: $color-default-color-light-action-primary-hover;
 
 //QGOV Brand Mapping - QLD.GOV.AU
-$qld-brand-primary-dark: $qld-dark-blue;
-$qld-brand-primary: $qld-sapphire-blue;
-$qld-brand-primary-light: $qld-light-blue;
-$qld-brand-secondary-dark: $qld-dark-green;
-$qld-brand-secondary: $qld-light-green;
-$qld-brand-accent: $qld-golden-yellow;
+// $qld-brand-primary-dark: $qld-dark-blue;
+// $qld-brand-primary: $qld-sapphire-blue;
+// $qld-brand-primary-light: $qld-light-blue;
+// $qld-brand-secondary-dark: $qld-dark-green;
+// $qld-brand-secondary: $qld-light-green;
+// $qld-brand-accent: $qld-golden-yellow;
+
+// Remapped legacy brand color values to align with correct UI Kit variables
+$qld-brand-primary: $color-default-color-light-action-primary;
+$qld-brand-primary-light: $color-default-color-light-action-primary;
+$qld-brand-primary-dark: $color-default-color-dark-action-primary;
+$qld-brand-secondary: $color-default-color-light-action-secondary;
+$qld-brand-secondary-dark: $color-default-color-dark-action-secondary;
+$qld-brand-accent: $color-default-color-light-accent-design-accent;
 
 // Resolves @qgds-tokens V1 gap between (_variables.scss and _map.scss).
 // Nuetrals were dropped from _variables.scss, but retained in _map.scss.
@@ -79,8 +82,12 @@ $qld-system-darkest: $core-default-color-neutral-darkest;
 $qld-dark-grey: $core-default-color-neutral-darker;
 $qld-medium-grey: $core-default-color-neutral-dark;
 $qld-alt-grey: $core-default-color-neutral-light;
+
+//Links
 $qld-light-link: $color-default-color-light-link-default;
 $qld-dark-link: $color-default-color-dark-link-default;
+$qld-light-link-on-action: $color-default-color-light-link-on-action;
+$qld-dark-link-on-action: $color-default-color-dark-link-on-action;
 
 //Should be core color rather than second hand reference (no match)
 $qld-soft-grey: $color-default-color-light-border-alt; //todo, replace soft-greys across the system with the below color
@@ -89,7 +96,7 @@ $qld-dark-grey-muted: $color-default-color-light-text-lighter;
 $qld-text-grey: $color-default-color-light-text-default;
 $qld-hint-text-color: $color-default-color-light-text-lighter;
 $qld-hint-text-color-muted: $color-default-color-dark-text-lighter;
-$qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
+
 $qld-text-headings: $color-default-color-light-text-heading;
 $qld-grey: $core-default-color-neutral-light;
 $qld-light-grey: $core-default-color-neutral-lighter;
@@ -120,19 +127,19 @@ $qld-color-light-background--shade: $color-default-color-light-background-light-
 $qld-color-light-alt-background: $color-default-color-light-background-alt;
 $qld-color-light-alt-background--shade: $color-default-color-light-background-alt-shade;
 
-$qld-color-dark-background: $core-default-color-brand-primary-sapphire-blue;
+$qld-color-dark-background: $color-default-color-dark-background-default;
 $qld-color-dark-background--shade: $color-default-color-dark-background-default-shade;
-$qld-color-dark-alt-background: $core-default-color-brand-primary-dark-blue;
+$qld-color-dark-alt-background: $color-default-color-dark-background-alt;
 $qld-color-dark-alt-background--shade: $color-default-color-dark-background-alt-shade;
 
-$qld-light-action-primary: $qld-sapphire-blue;
+$qld-light-action-primary: $color-default-color-light-action-primary;
 $qld-light-action-primary-hover: $color-default-color-light-action-primary-hover;
 $qld-light-action-secondary: $color-default-color-light-action-secondary;
 $qld-light-action-secondary-hover: $color-default-color-light-action-secondary-hover;
 
 $qld-dark-action-primary: $color-default-color-dark-action-primary;
 $qld-dark-action-primary-hover: $color-default-color-dark-action-primary-hover;
-$qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
+$qld-dark-action-secondary: $color-default-color-dark-action-secondary;
 $qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
 $qld-dark-action-text: $color-default-color-dark-link-on-action;
 
@@ -158,6 +165,7 @@ $color-default-color-dark-underline-default-hover: #ffffff;
 // These will NOT create utility classes, only CSS variables on :root
 // Available as var(--qld-[color-name])
 
+// DO NOT override the variables inside the object
 $project-colors: (
   "brand-primary-dark": $qld-brand-primary-dark,
   "brand-primary": $qld-brand-primary,
@@ -226,6 +234,8 @@ $project-colors: (
   //Links
   "light-link": $color-default-color-light-link-default,
   "dark-link": $color-default-color-dark-link-default,
+  "light-link-on-action": $color-default-color-light-link-on-action,
+  "dark-link-on-action": $color-default-color-dark-link-on-action,
 
   "link-visited": $qld-link-visited,
   "link-visited-dark": $qld-link-visited-dark,
@@ -277,11 +287,19 @@ $project-colors: (
     $color-default-color-dark-underline-default-hover,
 );
 
+// Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
+:root {
+  @include m.generate-color-vars($qld-tokens);
+  @include m.generate-color-vars($project-colors);
+}
+
+// These variables replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.css`
+
 $project-base-colors: (
   //Legacy color based variables - to review
-  "primary": $qld-sapphire-blue,
-  "primary-dark": $qld-brand-primary-dark,
-  "secondary": $qld-dark-green,
+  "primary": $color-default-color-light-action-primary,
+  "primary-dark": $color-default-color-dark-action-primary,
+  "secondary": $color-default-color-light-action-secondary,
   "success": $qld-notify-success,
   "info": $qld-notify-information,
   "warning": $qld-notify-alert,
@@ -304,14 +322,9 @@ $project-base-colors: (
   "dark-hover": $qld-dark-hover
 );
 
-// Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
-:root {
-  @include m.generate-color-vars($qld-tokens);
-  @include m.generate-color-vars($project-colors);
-}
-
 $theme-colors: map-merge($theme-colors, $project-base-colors);
 
+// DO NOT override the variables which is predefined in bootstrap;
 // Cusotm GRID breakpoints: https://getbootstrap.com/docs/5.2/layout/grid/#variables
 $grid-breakpoints: (
   xs: 0,
@@ -339,6 +352,7 @@ $qld-border-width-medium: 3px;
 $qld-border-width-thick: 4px;
 $qld-border-width-extra-thick: 8px;
 
+// DO NOT override the variables which is predefined in bootstrap;
 // Extended spacers to procude 8px and 16px increments
 // use px-16, py-sm-16, ml-40, mr-40, etc
 $qld-custom-spacers: (

package/src/css/readme.md

@@ -1,3 +1,8 @@
 This is the scss folder, that is converted to css for dist. 
 
-To match pathing the folder is 'css' even though it should be 'scss'.
+To match pathing the folder is 'css' even though it should be 'scss'.
+
+`/themes/qld-variables-theme.scss` is the additional variables file with the overriding theme palette or css variables. This would impact the main.scss to be bundled as a separate css output
+
+DO NOT override the variables inside the object;
+DO NOT override the variables which is predefined in bootstrap;