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

package/src/css/qld-variables.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "mixins" as m;
 
 // GLOBALLY SCOPED VARIABLES
@@ -6,8 +7,8 @@
 // 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";
+@use "./qld-tokens.scss";
+@import "./qld-tokens.scss";
 
 //QLD Names Colours
 $qld-dark-blue: $core-default-color-brand-primary-dark-blue;
@@ -33,16 +34,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;
@@ -158,6 +160,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,
@@ -304,6 +307,8 @@ $project-base-colors: (
   "dark-hover": $qld-dark-hover
 );
 
+$qld-tokens: meta.module-variables("qld-tokens");
+
 // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
 :root {
   @include m.generate-color-vars($qld-tokens);
@@ -312,6 +317,7 @@ $project-base-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 +345,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;

package/src/css/themes/masterbrand.scss

@@ -0,0 +1,109 @@
+// Variables Override File - Emerald Theme
+// This file creates a custom emerald/green theme variant with different values from qld-tokens.scss
+
+// Core neutral colors - warmer tones
+$core-default-color-neutral-black: #0D1B0D;
+$core-default-color-neutral-darkest: #1A2E1A;
+$core-default-color-neutral-darker: #2D4A2D;
+$core-default-color-neutral-dark: #4A6B4A;
+$core-default-color-neutral-light: #C5E5C5;
+$core-default-color-neutral-lighter: #E0F2E0;
+$core-default-color-neutral-lightest: #F0F9F0;
+$core-default-color-neutral-white: #FFFFFF;
+
+// Status colors - emerald themed
+$core-default-color-status-caution-default: #F5A623;
+$core-default-color-status-caution-darker: #D4820A;
+$core-default-color-status-caution-lighter: #FFF8E1;
+$core-default-color-status-caution-lightest: #FFFCF5;
+$core-default-color-status-info-default: #17A2B8;
+$core-default-color-status-info-darker: #138496;
+$core-default-color-status-info-lighter: #D1ECF1;
+$core-default-color-status-info-lightest: #E8F6F8;
+$core-default-color-status-error-default: #DC3545;
+$core-default-color-status-error-darker: #C82333;
+$core-default-color-status-error-lighter: #F8D7DA;
+$core-default-color-status-error-lightest: #FCE8EA;
+$core-default-color-status-success-default: #28A745;
+$core-default-color-status-success-darker: #155724;
+$core-default-color-status-success-lighter: #D4EDDA;
+$core-default-color-status-success-lightest: #E8F5E8;
+
+// Underline colors
+$core-default-color-status-underline-light: #FFFFFF99;
+$core-default-color-status-underline-dark: #1B4D3E99;
+
+// Brand colors - emerald palette
+$core-default-color-brand-primary-dark-blue: #0D4E41;
+$core-default-color-brand-primary-sapphire-blue: #16A085;
+$core-default-color-brand-primary-light-blue: #48C9B0;
+$core-default-color-brand-primary-light-green: #58D68D;
+$core-default-color-brand-secondary-darkgreen: #239B56;
+$core-default-color-brand-secondary-golden-yellow: #F7DC6F;
+$core-default-color-brand-other-modern-maroon: #7D3C98;
+$core-default-color-brand-other-gov-maroon: #6C3483;
+
+// Code colors - emerald theme
+$core-default-color-code-green: #58D68D;
+$core-default-color-code-light-blue: #85E3FF;
+$core-default-color-code-violet: #BB8FCE;
+$core-default-color-code-muted: #A9DFBF;
+
+// Layout backgrounds
+$core-default-color-contained-layout-background: #16A085;
+$core-default-color-contained-layout-background-dark: #0D4E41;
+
+// Light theme colors - emerald variations
+$color-default-color-light-background-default: #FFFFFF;
+$color-default-color-light-background-default-shade: #F0F9F0;
+$color-default-color-light-background-light: #E8F6F3;
+$color-default-color-light-background-light-shade: #D5F2E8;
+$color-default-color-light-background-alt: #D5F2E8;
+$color-default-color-light-background-alt-shade: #C5E5C5;
+$color-default-color-light-border-default: #A9DFBF;
+$color-default-color-light-border-light: #85C1A6;
+$color-default-color-light-border-alt: #5D6D5D;
+$color-default-color-light-action-primary: #16A085;
+$color-default-color-light-action-primary-hover: #0D4E41;
+$color-default-color-light-action-secondary: #239B56;
+$color-default-color-light-action-secondary-hover: #1B7943;
+$color-default-color-light-link-on-action: #FFFFFF;
+$color-default-color-light-link-default: #16A085;
+$color-default-color-light-link-visited: #7D3C98;
+$color-default-color-light-accent-design-accent: #58D68D;
+$color-default-color-light-focus-default: #48C9B0;
+$color-default-color-light-underline-default: #229954;
+$color-default-color-light-underline-default-hover: #16A085;
+$color-default-color-light-underline-visited: #BB8FCE;
+$color-default-color-light-underline-visited-hover: #7D3C98;
+$color-default-color-light-text-default: #2E4E3E;
+$color-default-color-light-text-lighter: #566B56;
+$color-default-color-light-text-heading: #0D4E41;
+$color-default-color-light-site-title: #0A3D33;
+$color-default-color-light-crest-fill: #1B4D3E;
+
+// Dark theme colors - emerald variations
+$color-default-color-dark-background-default: #16A085;
+$color-default-color-dark-background-default-shade: #138D75;
+$color-default-color-dark-background-alt: #0D4E41;
+$color-default-color-dark-background-alt-shade: #0A3D33;
+$color-default-color-dark-border-default: #7DCEA0;
+$color-default-color-dark-border-alt: #58D68D;
+$color-default-color-dark-action-primary: #58D68D;
+$color-default-color-dark-action-primary-hover: #85E3FF;
+$color-default-color-dark-action-secondary: #F7DC6F;
+$color-default-color-dark-action-secondary-hover: #F4F6E7;
+$color-default-color-dark-link-default: #FFFFFF;
+$color-default-color-dark-link-visited: #D2B4DE;
+$color-default-color-dark-link-on-action: #0D4E41;
+$color-default-color-dark-accent-design-accent: #58D68D;
+$color-default-color-dark-focus-default: #7DCEA0;
+$color-default-color-dark-underline-default: #A9DFBF;
+$color-default-color-dark-underline-default-hover: #FFFFFF;
+$color-default-color-dark-underline-visited: #D2B4DE;
+$color-default-color-dark-underline-visited-hover: #BB8FCE;
+$color-default-color-dark-text-default: #FFFFFF;
+$color-default-color-dark-text-lighter: #E8F6F3;
+$color-default-color-dark-text-heading: #FFFFFF;
+$color-default-color-dark-site-title: #FFFFFF;
+$color-default-color-dark-crest-fill: #FFFFFF;

package/src/components/bs5/searchInput/_colours.scss

@@ -1,63 +0,0 @@
-.qld-search-input {
-    // ------------------------------------------------------------------------------------------------------------------
-    //  1. Common vars
-    // ------------------------------------------------------------------------------------------------------------------
-    //  Search inputs
-    --#{$prefix}site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
-    --#{$prefix}site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
-    --#{$prefix}site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}site-search_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
-
-    // Search input dark
-    --#{$prefix}dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
-    --#{$prefix}dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
-    
-    // Dropdown
-    --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-
-    // Search bootstrap variables
-    --site-search-bg: var(--#{$prefix}site-search-bg);
-    --site-search-btn-color: var(--#{$prefix}site-search-btn-color);
-    --site-search-btn-bg: var(--#{$prefix}site-search-btn-bg);
-    --site-search-border-color: var(--#{$prefix}site-search-border-color);
-    --site-search-icon-color: var(--#{$prefix}site-search-icon-color);
-    --site-search-input-color: var(--#{$prefix}site-search-text-color);
-    --site-search-text-color: var(--#{$prefix}site-search-text-color);
-    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-
-    
-    // ------------------------------------------------------------------------------------------------------------------
-    //  2. Colour modes
-    // ------------------------------------------------------------------------------------------------------------------
-    .dark &,
-    .dark-alt & {
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}dark-site-search-text-color);
-
-        // Suggestions colours
-        --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
-        --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
-        --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-        --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-    }
-}