@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.14

package/src/components/bs5/header/header.scss

@@ -46,7 +46,7 @@
 				color: var(--#{$prefix}header_skip-link_focus_text_color);
 				background-color: var(--#{$prefix}header_skip-link_focus_bg_color);
 				outline: 3px solid var(--#{$prefix}header_skip-link_focus_outline_color);
-				z-index: 600;
+				z-index: 999;
 			}
 		}
 	}
@@ -207,20 +207,15 @@
 				font-size: .875rem;
 				line-height: 1.42;
 				padding-left: .75rem;
+				margin: 0 .5rem;
 				align-items: center;
 				color: var(--#{$prefix}header__cta-wrapper__cta-link_text_color);
-
-				&:hover {
-					.qld__header__cta-link-icon {
-						color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_hover_color);
-					}
-				}
 			}
 
 			.qld__header__cta-link-icon {
-				height: 1.25rem;
-				width: 1.25rem;
-				margin-right: .5rem;
+				height: 1rem;
+				width: 1rem;
+				margin-left: .5rem;
 				text-align: center;
 				display: inline-block;
 				color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
@@ -475,153 +470,9 @@
 		form {
 			display: flex;
 			position: relative;
-
-			::placeholder {
-				color: var(--site-search-input-color);
-			}
-
-			//Search dropdown
-			.suggestions-dropdown {
-				position: absolute;
-				display: none;
-				left: 0;	
-				top: 100%;  
-				width: 100%;			
-				z-index: 99; 
-				border-radius: .5rem;
-				background: var(--#{$prefix}header_site-search-suggestions-bg);
-				box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
-				border-bottom: solid .25rem var(--#{$prefix}header_site-search-suggestions-hover__border_color);
-
-				.suggestions-category {
-					padding: 0 1rem;
-				}
-
-				hr {
-					margin: 0;
-				}
-
-				// Featured search result styles
-				.feature {
-					background-color: var(--#{$prefix}header_site-search-suggestions-feature_bg);
-					strong {
-						color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
-					}
-					ul {
-						li {
-							&:hover {
-								background-color: var(--#{$prefix}header_site-search-suggestions-feature_hover);
-							}
-							a {
-								color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
-							}
-						}
-					}				
-				}
-
-				// Show when active
-				&.show {
-					display: block; 
-				}
-
-				&__group {
-					padding: 0;
-
-					a, strong {
-						color: var(--site-search-input-color);
-						font-weight: 400;
-						font-size: 1rem;
-						text-decoration: none; 
-					}
-
-					strong {
-						font-weight: 600;
-					}
-
-					ul {
-						padding: 0;
-
-						li {
-							min-height: 3rem;
-							list-style: none;
-							cursor: pointer;
-
-							a {
-								vertical-align: middle;
-								vertical-align: -webkit-baseline-middle;
-								&:hover {
-									text-decoration: underline; 
-								}
-							}
-
-							&:hover {
-								background-color: var(--#{$prefix}header_site-search-suggestions-hover);
-								margin: 0 -1rem;
-								padding: 0 1rem;
-
-								a {
-									text-decoration: underline;
-								}
-
-							}
-						}
-					}
-				}
-			}
-
-			input[type="text"] {
-				box-shadow: none;
-				border: none;
-				padding-left: 3rem;
-				width: 20.62rem;
-				color: var(--site-search-input-color);
-				background: var(--site-search-bg);
-				border-radius: 0.25rem 0 0 0;
-				border-bottom: 2px solid var(--site-search-border-color);
-
-				@include media-breakpoint-down(lg) {
-					border: 2px solid var(--site-search-border-color);
-					width: 100%;
-				}
-
-				&:focus {
-					outline: 2px solid var(--site-search-input-focus-color);
-					outline-offset: 2px;
-				}
-
-				&.border-full {
-					border: 2px solid var(--site-search-border-color);
-					border-right: 0;
-					border-radius: 0.25rem 0 0 0.25rem;
-				}
-
-			}
-
-			input[type="submit"] {
-				border: none;
-				box-shadow: none;
-				border-radius: 0 0.25rem 0.25rem 0;
-				background: var(--site-search-btn-bg);
-				color: var(--site-search-btn-color);
-			}
-
-			//Icon
-			&:before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				bottom: 2px;
-				width: 3rem;
-				mask-position: center center;
-				mask-repeat: no-repeat;
-				mask-image: var(--icon-search);
-				background-color: var(--site-search-icon-color);
-			}
 		}
-
+		
 		@include media-breakpoint-down(lg) {
-
 			// Mobile search open class
 			&--open {
 				z-index: 1;
@@ -633,10 +484,10 @@
 				margin-top: 1rem;
 				background-color: var(--#{$prefix}header_bg);
 			}
-
 			&--closed {
 				display: none;
 			}
 		}
 	}
+
 }

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

@@ -1,19 +1,23 @@
 // Navbar.stories.js
 import { Header } from './Header.js';
 import { Navbar } from '../navbar/Navbar.js';
+import { SearchInput } from "../searchInput/SearchInput.js";
+
 import { menu_state } from '../navbar/navbar.data.json';
+import defaultdata from '../searchInput/searchInput.data.json';
+
 import { 
   masterbrand_variant, 
   subbrand_variant, 
   endorsed_variant, 
   standalone_variant } from './header.data.json';
-  
+
 export default {
   tags: ['autodocs'],
   title: 'Components/Header',
   render: (args) => {
     return `
-        ${new Header(args).html}
+        ${new Header({...args, searchInput: new SearchInput(defaultdata).html}).html}
         ${new Navbar(args).html}
         `//expand arguments, specifically turn isdisabled into true
   },
@@ -28,7 +32,7 @@ export default {
 export const MasterBrand = {
   args: {
     ...masterbrand_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -51,7 +55,7 @@ export const MasterBrand = {
 export const Subbrand = {
   args: {
     ...subbrand_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -74,7 +78,7 @@ export const Subbrand = {
 export const EndorsedBrand = {
   args: {
     ...endorsed_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -112,51 +116,7 @@ export const StandaloneBrand = {
       return `
         <style>
           :root {
-            --qld-color-light__site-title: #000000;
-            --qld-color-light__design-accent: #FF0084;
-            --qld-color-light__heading: #1C0A20;
-            --qld-color-light__text: #414141;
-            --qld-color-light__text--lighter: #333333;
-            --qld-color-light__link: #710074;
-            --qld-color-light__link--visited: #810036;
-            --qld-color-light__link--on-action: #FFFFFF;
-            --qld-color-light__action--primary: #420725;
-            --qld-color-light__action--primary-hover: #000000;
-            --qld-color-light__focus: #9C008D;
-            --qld-color-light__border: #A5A5A5;
-            --qld-color-light__background: #FFFFFF;
-            --qld-color-light__background--shade: #F6F6F6;
-            --qld-color-light__underline: #97009b;
-            --qld-color-light__underline--hover: #710074;
-            --qld-color-light__underline--visited: #94003e;
-            --qld-color-light__underline--hover-visited: #810036;
-            --qld-color-light__action--secondary: #59449A;
-            --qld-color-light__action--secondary-hover: #810036;
-            --qld-color-light__border--alt: #595959;
-            --qld-color-light__background--alt: #FFEAF5;
-            --qld-color-light__background--alt-shade: #F8E1ED;
-            --qld-color-dark__design-accent: #FF0084;
-            --qld-color-dark__heading: #FFFFFF;
-            --qld-color-dark__text: #FFFFFF;
-            --qld-color-dark__text--lighter: #FECBE5;
-            --qld-color-dark__link: #faddec;
-            --qld-color-dark__link--visited: #faddec;
-            --qld-color-dark__link--on-action: #000000;
-            --qld-color-dark__action--primary: #FC5CAF;
-            --qld-color-dark__action--primary-hover: #FFC85E;
-            --qld-color-dark__focus: #FFCAE5;
-            --qld-color-dark__border: #FFA3D2;
-            --qld-color-dark__background: #000000;
-            --qld-color-dark__background--shade: #141414;
-            --qld-color-dark__underline: #5d2158;
-            --qld-color-dark__underline--hover: #faddec;
-            --qld-color-dark__underline--visited: #5d2158;
-            --qld-color-dark__underline--hover-visited: #faddec;
-            --qld-color-dark__action--secondary: #FFFFFF;
-            --qld-color-dark__action--secondary-hover: #FFEF60;
-            --qld-color-dark__border--alt: #ffd1e8;
-            --qld-color-dark__background--alt: #34001B;
-            --qld-color-dark__background--alt-shade: #210011;
+            //Override example
           }
         </style>
         ${Story()}

package/src/components/bs5/modal/modal.scss

@@ -1,7 +1,8 @@
-// Modal extends https://getbootstrap.com/docs/5.3/components/modal/
-// Default CSS variables https://getbootstrap.com/docs/5.3/components/modal/#variables
+// QGDS QOL Modal Component
+// extends Modal https://getbootstrap.com/docs/5.3/components/modal/#variables
+// extends Close Button https://getbootstrap.com/docs/5.2/components/close-button/#variables
 
-// Default
+// QGDS specific modal variables.
 .modal {
     --#{$prefix}modal-zindex: #{$zindex-modal};
     --#{$prefix}modal-width: #{$modal-md};
@@ -9,17 +10,17 @@
     --#{$prefix}modal-margin: #{$modal-dialog-margin};
     --#{$prefix}modal-color: #{$modal-content-color};
     --#{$prefix}modal-bg: #{$modal-content-bg};
+    --#{$prefix}modal-padding: 1.5rem 2rem;
     
-    --#{$prefix}modal-border-color: var(--qld-light-grey);
+    --#{$prefix}modal-border-color: var(--#{$prefix}light-grey);
     --#{$prefix}modal-border-width: 1px;
     --#{$prefix}modal-border-radius: 0.75rem;
     
     --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
     --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-    --#{$prefix}modal-header-padding: 2rem 1.5rem;
 
-    --#{$prefix}modal-header-border-color: var(--qld-light-grey);
-    --#{$prefix}modal-header-border-width: 1px;
+    --#{$prefix}modal-header-padding: 2rem 2rem 0;
+    --#{$prefix}modal-header-border-width: 0px;
 
     --#{$prefix}modal-title-line-height: 2rem;
 
@@ -28,35 +29,59 @@
     --#{$prefix}modal-footer-border-color: none; 
     --#{$prefix}modal-footer-border-width: none;
 
-    //QGDS specific
     .btn-close {
-        --qld-btn-close-icon: "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
-        --qld-btn-close-color: var(--qld-light-action-secondary);
-        --qld-btn-close-opacity: 1;
-        --qld-btn-close-hover-opacity: 1;
-        --qld-btn-close-focus-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
+        --#{$prefix}btn-close-icon: "data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
+        --#{$prefix}btn-close-color: var(--#{$prefix}color-default-color-light-text-lighter);
+        --#{$prefix}btn-close-width: 40px;
+        --#{$prefix}btn-border-radius: 50%;
 
-        background: var(--qld-btn-close-color);
-        mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A");
-        mask-repeat: no-repeat;
+        //Hover state
+        --#{$prefix}btn-close-hover-color: var(--#{$prefix}color-default-color-light-text-heading);
+        --#{$prefix}btn-close-hover-bg: var(--#{$prefix}core-default-color-neutral-lightest);
+        --#{$prefix}btn-close-hover-bg-size: 15px;
+
+        //Focus state
+        --#{$prefix}btn-close-focus-color: var(--#{$prefix}color-default-color-light-text-heading);
+        --#{$prefix}btn-close-focus-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
+        --#{$prefix}btn-close-focus-border: var(--#{$prefix}light-blue) solid 3px;
     }
+}
 
-    .modal-header {
-        padding: 2rem 1.5rem 1.5rem 1.5rem;
+// General styling rules.
+.modal {
+    .btn-close {
+        width: var(--#{$prefix}btn-close-width);
+        height: var(--#{$prefix}btn-close-width);
+        border-radius: var(--#{$prefix}btn-border-radius);
+        background-size: 12px;
+        padding: 0;
 
+        &:hover {
+            width: var(--#{$prefix}btn-close-width);
+            height: var(--#{$prefix}btn-close-width);
+            color: var(--#{$prefix}btn-close-hover-color);
+            background-size: var(--#{$prefix}btn-close-hover-bg-size);
+            background-color: var(--#{$prefix}btn-close-hover-bg);
+        }
+        &:focus {
+            width: var(--#{$prefix}btn-close-width);
+            height: var(--#{$prefix}btn-close-width);
+            color: var(--#{$prefix}btn-close-focus-color);
+            background-size: var(--#{$prefix}btn-close-hover-bg-size);
+            background-color: var(--#{$prefix}btn-close-hover-bg);
+            outline: var(--#{$prefix}btn-close-focus-border);
+        }
+    }
+
+    .modal-header {
         .modal-title {
             line-height: var(--#{$prefix}modal-title-line-height);
             font-size: 1.5rem;
         }
     }
 
-    .modal-body {
-        padding: 1.5rem 1.5rem 2rem 1.5rem;
-    }
-
     .modal-footer {
-        padding: 0 1.5rem 2rem 1.5rem;
-        display: flex;
+        padding: 0 2rem 2rem;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: flex-end;
@@ -70,28 +95,22 @@
     .modal-dialog {
         &.modal-sm {
             .modal-footer {
-                flex-direction: column-reverse;
+                flex-wrap: wrap;
                 .btn {
                     width: 100%;
-                    margin: 0 0 1.5rem 0;
-                    &:first-child {
-                        margin: 0;
-                    }
+                    margin: 1rem 0;
                 }
             }
         }
     }
 
     //Rescope for smaller viewports 
-    @include media-breakpoint-between(xs, sm) {
+    @include media-breakpoint-down(md) {
         .modal-footer {
-            flex-direction: column-reverse;
+            flex-wrap: wrap;
             .btn {
                 width: 100%;
-                margin: 0 0 1.5rem 0;
-                &:first-child {
-                    margin: 0;
-                }
+                margin: 1rem 0;
             }
         }
     }

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

@@ -10,7 +10,7 @@ let buttonItems = [{
   "islink": true,
   "isdisabled": false,
   "iconClass": "",
-  "href": "https:///www.google.com",
+  "href": "https://www.google.com",
   "label": "External link",
   "target": "_blank",
   "dataatts": false,
@@ -35,7 +35,7 @@ let buttonItems = [{
   "label": "Confirm",
   "target": "",
   "dataatts": "data-bs-dismiss='modal'",
-  "arialabel": "Close",
+  "arialabel": "Confirm",
 }];
 
 defaultdata.footer.buttons = buttonItems.map((item) => { 

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

@@ -1,106 +1,70 @@
 .navbar {
     // ------------------------------------------------------------------------------------------------------------------
-    //  1. Palette colours
-    // ------------------------------------------------------------------------------------------------------------------
-    --#{$prefix}navbar-color-crest-fill: #1D1D1D;
-    --#{$prefix}navbar-color-light-siteTitle: #022A50;
-    --#{$prefix}navbar-color-light-designAccent: #6BBE27;
-    --#{$prefix}navbar-color-light-text: #414141;
-    --#{$prefix}navbar-color-light-text__muted: #636363;
-    --#{$prefix}navbar-color-light-link: #09549F;
-    --#{$prefix}navbar-color-light-focus: #0085B3;
-    --#{$prefix}navbar-color-light-border: #EBEBEB;
-    --#{$prefix}navbar-color-light-background: #FFFFFF;
-    --#{$prefix}navbar-color-light-background__shade: #F5F5F5;
-    --#{$prefix}navbar-color-light-alt-background__shade: #EBEBEB;
-    --#{$prefix}navbar-color-light-underline: #3F7AB4;
-    --#{$prefix}navbar-color-light-hover-underline: #09549F;
-    --#{$prefix}navbar-color-light-alt-button: #008733;
-    --#{$prefix}navbar-color-light-alt-button__hover: #00702B;
-    --#{$prefix}navbar-color-light-button__hover: #003E7D;
-
-    // Dark palette
-    --#{$prefix}navbar-color-dark-crest-fill: #FFFFFF;
-    --#{$prefix}navbar-color-dark-siteTitle: #FFFFFF;
-    --#{$prefix}navbar-color-dark-designAccent: #6BBE27;
-    --#{$prefix}navbar-color-dark-heading: #FFFFFF;
-    --#{$prefix}navbar-color-dark-text: #FFFFFF;
-    --#{$prefix}navbar-color-dark-text__muted: #DEEBF9;
-    --#{$prefix}navbar-color-dark-link: #FFFFFF;
-    --#{$prefix}navbar-color-dark-focus: #01B0E5;
-    --#{$prefix}navbar-color-dark-border: #03151c;
-    --#{$prefix}navbar-color-dark-background: #09549F;
-    --#{$prefix}navbar-color-dark-background__shade: #04498F;
-    --#{$prefix}navbar-color-dark-underline: #B5CCE2;
-    --#{$prefix}navbar-color-dark-hover-underline: #FFFFFF;
-    --#{$prefix}navbar-color-dark-alt-button: #EFD700;
-    --#{$prefix}navbar-color-dark-alt-button__hover: #ADD33F;
-    --#{$prefix}navbar-color-dark-alt-background: #05325F;
-    --#{$prefix}navbar-color-dark-alt-background__shade: #052C53;
-
-    // ------------------------------------------------------------------------------------------------------------------
-    //  2. Overrides
+    //  1. Assign local var using qgds-tokens
     // ------------------------------------------------------------------------------------------------------------------
     --#{$prefix}navbar-border-width: 0.5rem;
-    --#{$prefix}navbar-link-color: var(--#{$prefix}navbar-color-light-link);
-    --#{$prefix}navbar-text-color: var(--#{$prefix}navbar-color-light-text);
-    --#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-light-focus);
-    --#{$prefix}navbar-nav-text-color: var(--#{$prefix}navbar-color-light-text);
-    --#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-light-background__shade);
-    --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-light-background);
-    --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-light-alt-background__shade);
-    --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-light-button__hover);
-    --#{$prefix}navbar-border-color: var(--#{$prefix}navbar-color-light-border);
-    --#{$prefix}navbar-border-accent: var(--#{$prefix}navbar-color-light-designAccent);
-    --#{$prefix}navbar-home-icon-color: var(--#{$prefix}navbar-color-light-text);
-    --#{$prefix}navbar-hover-color: var(--#{$prefix}navbar-color-light-button__hover);
-    --#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-light-alt-button__hover);
-    --#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-light-alt-button);
+    --#{$prefix}navbar-link-color: var(--#{$prefix}color-default-color-light-link-default);
+    --#{$prefix}navbar-text-color: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
+    --#{$prefix}navbar-nav-text-color: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+    --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-light-background-default);
+    --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}core-default-color-neutral-lighter);
+    --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-light-action-primary-hover);
+    --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
+    --#{$prefix}navbar-border-accent: var(--#{$prefix}color-default-color-light-accent-design-accent);
+    --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}navbar-hover-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
+    --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
+    --#{$prefix}navbar-svg-color: var(--#{$prefix}color-default-color-dark-action-primary);
 
     // Mobile default is dark
-    --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}navbar-color-dark-background);
-    --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
-    --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}white);
-    --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}dark-border);
-    --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}navbar-color-dark-background__shade);
+    --#{$prefix}navbar-overlay: var(--#{$prefix}color-default-color-dark-background-alt-shade);
+    --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-light-action-secondary);
+    --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
+    --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
+    --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
+    --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+    --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
 
     // Toggle icons for mobile
     --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
     --#{$prefix}navbar-mobile-menu-toggle-boxshadow__hover: 0px 4px 8px 3px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .2);
-    --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}navbar-color-light-background);
+    --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-light-background-default);
 
     // ------------------------------------------------------------------------------------------------------------------
     //  3. Modes
     // ------------------------------------------------------------------------------------------------------------------
     .alt &,
     .light & {
-        --#{$prefix}navbar-title-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}navbar-color-light-text);
-        --#{$prefix}navbar-border-color: var(--#{$prefix}light-grey);
+        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-text-default);
+        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
     }
 
     .dark &,
     .dark-alt & {
         // Mobile default is dark
-        --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}navbar-color-dark-alt-background);
-        --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}navbar-color-dark-alt-background);
-        --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
-        --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}dark-border);
-        --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}navbar-color-dark-alt-background__shade);
+        --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-dark-action-secondary);
+        --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
+        --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+        --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
 
-        --#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-dark-background__shade);
-        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-alt-background);
-        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-alt-background);
-        --#{$prefix}navbar-title-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-text-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-link-color: var(--#{$prefix}white);
-        --#{$prefix}navbar-border-color: var(--#{$prefix}dark-border);
-        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-dark-alt-button__hover);
-        --#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-dark-alt-button);
-        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-dark-focus);
-        --#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
+        --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
+        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
+        --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary);
+        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default);
+        --#{$prefix}navbar-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
     }
 }