Add nav tokens

build/web/css/.css

@@ -57,8 +57,8 @@
   --gcds-container-xs: 20rem;
   --gcds-container-sm: 30rem;
   --gcds-container-md: 48rem;
-  --gcds-container-lg: 64rem;
-  --gcds-container-xl: 75rem;
+  --gcds-container-lg: 62rem;
+  --gcds-container-xl: 71.25rem;
   --gcds-container-full: 100%;
   --gcds-container-size-xs: 20rem;
   --gcds-container-size-sm: 30rem;
@@ -361,7 +361,7 @@
   --gcds-file-uploader-focus-button-text: #ffffff;
   --gcds-file-uploader-focus-text: #0535d2;
   --gcds-footer-container-margin: 0 auto;
-  --gcds-footer-container-width: 75rem;
+  --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
@@ -418,7 +418,7 @@
   --gcds-header-brand-padding: 0 0 0.375rem;
   --gcds-header-brand-search-width: 30rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
-  --gcds-header-container-max-width: 75rem;
+  --gcds-header-container-max-width: 71.25rem;
   --gcds-header-margin: 0 0 0.75rem;
   --gcds-header-topnav-top: 1.5rem;
   --gcds-hint-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -492,6 +492,62 @@
   --gcds-lang-toggle-hover-text: #0535d2;
   --gcds-lang-toggle-hover-decoration-thickness: 0.125rem;
   --gcds-lang-toggle-padding: 0.5625rem;
+  --gcds-nav-group-mobile-background: #ffffff;
+  --gcds-nav-group-mobile-list-margin: 0.9375rem 0 0;
+  --gcds-nav-group-mobile-padding: 0.5625rem 0.9375rem 1.5rem 0.9375rem;
+  --gcds-nav-group-mobile-trigger-border-radius: 0.375rem;
+  --gcds-nav-group-mobile-trigger-border-width: 0.125rem;
+  --gcds-nav-group-mobile-trigger-margin: 0.5625rem;
+  --gcds-nav-group-mobile-trigger-text: #2b4380;
+  --gcds-nav-group-side-nav-dropdown-padding: 2.25rem;
+  --gcds-nav-group-side-nav-trigger-font-weight: 600;
+  --gcds-nav-group-side-nav-trigger-hover-background: #f1f2f3;
+  --gcds-nav-group-side-nav-trigger-icon-margin: 1.125rem;
+  --gcds-nav-group-side-nav-trigger-margin: 0.5625rem;
+  --gcds-nav-group-top-nav-dropdown-background: #f1f2f3;
+  --gcds-nav-group-top-nav-dropdown-box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.25);
+  --gcds-nav-group-top-nav-dropdown-padding: 0.75rem 0.75rem 0.1875rem;
+  --gcds-nav-group-top-nav-dropdown-width: 20rem;
+  --gcds-nav-group-top-nav-trigger-border-width: 0.25rem;
+  --gcds-nav-group-top-nav-trigger-hover-background: #d6d9dd;
+  --gcds-nav-group-top-nav-trigger-icon-margin: 0.9375rem;
+  --gcds-nav-group-top-nav-trigger-padding: 1.125rem;
+  --gcds-nav-group-trigger-focus-background: #0535d2;
+  --gcds-nav-group-trigger-focus-text: #ffffff;
+  --gcds-nav-group-trigger-focus-border-radius: 0.1875rem;
+  --gcds-nav-group-trigger-focus-outline-offset: 0.125rem;
+  --gcds-nav-group-trigger-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-group-trigger-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-group-trigger-hover-text: #0535d2;
+  --gcds-nav-group-trigger-max-width: 20rem;
+  --gcds-nav-group-trigger-padding: 0.9375rem;
+  --gcds-nav-group-trigger-text: #333333;
+  --gcds-nav-link-active-border-color: #33465c;
+  --gcds-nav-link-active-font-weight: 700;
+  --gcds-nav-link-active-text: #26374a;
+  --gcds-nav-link-active-background: #d7e5f5;
+  --gcds-nav-link-border-width: 0.25rem;
+  --gcds-nav-link-default-text: #2b4380;
+  --gcds-nav-link-default-decoration-thickness: 0.0625rem;
+  --gcds-nav-link-default-max-width: 20rem;
+  --gcds-nav-link-default-underline-offset: 0.25rem;
+  --gcds-nav-link-focus-background: #0535d2;
+  --gcds-nav-link-focus-text: #ffffff;
+  --gcds-nav-link-focus-border-radius: 0.1875rem;
+  --gcds-nav-link-focus-outline-offset: 0.125rem;
+  --gcds-nav-link-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-link-hover-decoration-thickness: 0.125rem;
+  --gcds-nav-link-hover-text: #0535d2;
+  --gcds-nav-link-margin: 0.5625rem;
+  --gcds-nav-link-padding: 0.9375rem;
+  --gcds-nav-link-side-nav-hover-background: #f1f2f3;
+  --gcds-nav-link-side-nav-padding: 0.9375rem 0.75rem;
+  --gcds-nav-link-top-nav-hover-background: #d6d9dd;
+  --gcds-nav-link-top-nav-home-font: 500 1.58203125rem/126.41975308641975% "Noto Sans", sans-serif;
+  --gcds-nav-link-top-nav-home-padding: 0.9375rem 0.1875rem;
+  --gcds-nav-link-top-nav-padding: 1.125rem;
+  --gcds-nav-link-top-nav-text: #333333;
   --gcds-pagination-active-text: #ffffff;
   --gcds-pagination-active-background: #26374a;
   --gcds-pagination-border-radius: 0.1875rem;
@@ -553,6 +609,10 @@
   --gcds-select-min-width-and-height: 3rem;
   --gcds-select-outline-width: 0.1875rem;
   --gcds-select-padding: 0.75rem 3.75rem 0.75rem 0.75rem;
+  --gcds-side-nav-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-side-nav-heading-margin: 0.5625rem;
+  --gcds-side-nav-heading-padding: 0.9375rem;
+  --gcds-side-nav-max-width: 20rem;
   --gcds-signature-color-flag: #ff0000;
   --gcds-signature-color-text: #000000;
   --gcds-signature-margin: 0 0 0.375rem;
@@ -561,20 +621,6 @@
   --gcds-signature-white-default: #ffffff;
   --gcds-signature-wordmark-margin: 2.25rem 0;
   --gcds-signature-wordmark-height: 3rem;
-  --gcds-site-menu-active-background: #333333;
-  --gcds-site-menu-active-text: #ffffff;
-  --gcds-site-menu-container-max-width: 75rem;
-  --gcds-site-menu-default-background: #f1f2f3;
-  --gcds-site-menu-default-border: #00000030;
-  --gcds-site-menu-default-text: #333333;
-  --gcds-site-menu-focus-background: #0535d2;
-  --gcds-site-menu-focus-text: #ffffff;
-  --gcds-site-menu-hover-background: #a8adb450;
-  --gcds-site-menu-selection-background: #b3800f;
-  --gcds-site-menu-selection-text: #333333;
-  --gcds-site-menu-submenu-background: #d6d9dd;
-  --gcds-site-menu-submenu-box-shadow: #00000030;
-  --gcds-site-menu-submenu-trigger-text: #333333;
   --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif;
   --gcds-stepper-margin: 0 0 1.125rem;
   --gcds-stepper-text: #43474e;
@@ -591,12 +637,14 @@
   --gcds-textarea-min-height: 3rem;
   --gcds-textarea-outline-width: 0.1875rem;
   --gcds-textarea-padding: 0.75rem;
+  --gcds-top-nav-background: #f1f2f3;
+  --gcds-top-nav-max-width: 71.25rem;
   --gcds-verify-banner-background: #d6d9dd;
   --gcds-verify-banner-container-xs: 20rem;
   --gcds-verify-banner-container-sm: 30rem;
   --gcds-verify-banner-container-md: 48rem;
-  --gcds-verify-banner-container-lg: 64rem;
-  --gcds-verify-banner-container-xl: 75rem;
+  --gcds-verify-banner-container-lg: 62rem;
+  --gcds-verify-banner-container-xl: 71.25rem;
   --gcds-verify-banner-container-full: 100%;
   --gcds-verify-banner-container-padding: 1.125rem;
   --gcds-verify-banner-content-border-color: #7d828b;

build/web/css/components.css

@@ -250,7 +250,7 @@
   --gcds-file-uploader-focus-button-text: #ffffff;
   --gcds-file-uploader-focus-text: #0535d2;
   --gcds-footer-container-margin: 0 auto;
-  --gcds-footer-container-width: 75rem;
+  --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;
@@ -307,7 +307,7 @@
   --gcds-header-brand-padding: 0 0 0.375rem;
   --gcds-header-brand-search-width: 30rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
-  --gcds-header-container-max-width: 75rem;
+  --gcds-header-container-max-width: 71.25rem;
   --gcds-header-margin: 0 0 0.75rem;
   --gcds-header-topnav-top: 1.5rem;
   --gcds-hint-font: 400 1.25rem/120% "Noto Sans", sans-serif;
@@ -381,6 +381,62 @@
   --gcds-lang-toggle-hover-text: #0535d2;
   --gcds-lang-toggle-hover-decoration-thickness: 0.125rem;
   --gcds-lang-toggle-padding: 0.5625rem;
+  --gcds-nav-group-mobile-background: #ffffff;
+  --gcds-nav-group-mobile-list-margin: 0.9375rem 0 0;
+  --gcds-nav-group-mobile-padding: 0.5625rem 0.9375rem 1.5rem 0.9375rem;
+  --gcds-nav-group-mobile-trigger-border-radius: 0.375rem;
+  --gcds-nav-group-mobile-trigger-border-width: 0.125rem;
+  --gcds-nav-group-mobile-trigger-margin: 0.5625rem;
+  --gcds-nav-group-mobile-trigger-text: #2b4380;
+  --gcds-nav-group-side-nav-dropdown-padding: 2.25rem;
+  --gcds-nav-group-side-nav-trigger-font-weight: 600;
+  --gcds-nav-group-side-nav-trigger-hover-background: #f1f2f3;
+  --gcds-nav-group-side-nav-trigger-icon-margin: 1.125rem;
+  --gcds-nav-group-side-nav-trigger-margin: 0.5625rem;
+  --gcds-nav-group-top-nav-dropdown-background: #f1f2f3;
+  --gcds-nav-group-top-nav-dropdown-box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.25);
+  --gcds-nav-group-top-nav-dropdown-padding: 0.75rem 0.75rem 0.1875rem;
+  --gcds-nav-group-top-nav-dropdown-width: 20rem;
+  --gcds-nav-group-top-nav-trigger-border-width: 0.25rem;
+  --gcds-nav-group-top-nav-trigger-hover-background: #d6d9dd;
+  --gcds-nav-group-top-nav-trigger-icon-margin: 0.9375rem;
+  --gcds-nav-group-top-nav-trigger-padding: 1.125rem;
+  --gcds-nav-group-trigger-focus-background: #0535d2;
+  --gcds-nav-group-trigger-focus-text: #ffffff;
+  --gcds-nav-group-trigger-focus-border-radius: 0.1875rem;
+  --gcds-nav-group-trigger-focus-outline-offset: 0.125rem;
+  --gcds-nav-group-trigger-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-group-trigger-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-group-trigger-hover-text: #0535d2;
+  --gcds-nav-group-trigger-max-width: 20rem;
+  --gcds-nav-group-trigger-padding: 0.9375rem;
+  --gcds-nav-group-trigger-text: #333333;
+  --gcds-nav-link-active-border-color: #33465c;
+  --gcds-nav-link-active-font-weight: 700;
+  --gcds-nav-link-active-text: #26374a;
+  --gcds-nav-link-active-background: #d7e5f5;
+  --gcds-nav-link-border-width: 0.25rem;
+  --gcds-nav-link-default-text: #2b4380;
+  --gcds-nav-link-default-decoration-thickness: 0.0625rem;
+  --gcds-nav-link-default-max-width: 20rem;
+  --gcds-nav-link-default-underline-offset: 0.25rem;
+  --gcds-nav-link-focus-background: #0535d2;
+  --gcds-nav-link-focus-text: #ffffff;
+  --gcds-nav-link-focus-border-radius: 0.1875rem;
+  --gcds-nav-link-focus-outline-offset: 0.125rem;
+  --gcds-nav-link-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-link-hover-decoration-thickness: 0.125rem;
+  --gcds-nav-link-hover-text: #0535d2;
+  --gcds-nav-link-margin: 0.5625rem;
+  --gcds-nav-link-padding: 0.9375rem;
+  --gcds-nav-link-side-nav-hover-background: #f1f2f3;
+  --gcds-nav-link-side-nav-padding: 0.9375rem 0.75rem;
+  --gcds-nav-link-top-nav-hover-background: #d6d9dd;
+  --gcds-nav-link-top-nav-home-font: 500 1.58203125rem/126.41975308641975% "Noto Sans", sans-serif;
+  --gcds-nav-link-top-nav-home-padding: 0.9375rem 0.1875rem;
+  --gcds-nav-link-top-nav-padding: 1.125rem;
+  --gcds-nav-link-top-nav-text: #333333;
   --gcds-pagination-active-text: #ffffff;
   --gcds-pagination-active-background: #26374a;
   --gcds-pagination-border-radius: 0.1875rem;
@@ -442,6 +498,10 @@
   --gcds-select-min-width-and-height: 3rem;
   --gcds-select-outline-width: 0.1875rem;
   --gcds-select-padding: 0.75rem 3.75rem 0.75rem 0.75rem;
+  --gcds-side-nav-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-side-nav-heading-margin: 0.5625rem;
+  --gcds-side-nav-heading-padding: 0.9375rem;
+  --gcds-side-nav-max-width: 20rem;
   --gcds-signature-color-flag: #ff0000;
   --gcds-signature-color-text: #000000;
   --gcds-signature-margin: 0 0 0.375rem;
@@ -450,20 +510,6 @@
   --gcds-signature-white-default: #ffffff;
   --gcds-signature-wordmark-margin: 2.25rem 0;
   --gcds-signature-wordmark-height: 3rem;
-  --gcds-site-menu-active-background: #333333;
-  --gcds-site-menu-active-text: #ffffff;
-  --gcds-site-menu-container-max-width: 75rem;
-  --gcds-site-menu-default-background: #f1f2f3;
-  --gcds-site-menu-default-border: #00000030;
-  --gcds-site-menu-default-text: #333333;
-  --gcds-site-menu-focus-background: #0535d2;
-  --gcds-site-menu-focus-text: #ffffff;
-  --gcds-site-menu-hover-background: #a8adb450;
-  --gcds-site-menu-selection-background: #b3800f;
-  --gcds-site-menu-selection-text: #333333;
-  --gcds-site-menu-submenu-background: #d6d9dd;
-  --gcds-site-menu-submenu-box-shadow: #00000030;
-  --gcds-site-menu-submenu-trigger-text: #333333;
   --gcds-stepper-font: 600 1.40625rem/124.44444444444444% "Lato", sans-serif;
   --gcds-stepper-margin: 0 0 1.125rem;
   --gcds-stepper-text: #43474e;
@@ -480,12 +526,14 @@
   --gcds-textarea-min-height: 3rem;
   --gcds-textarea-outline-width: 0.1875rem;
   --gcds-textarea-padding: 0.75rem;
+  --gcds-top-nav-background: #f1f2f3;
+  --gcds-top-nav-max-width: 71.25rem;
   --gcds-verify-banner-background: #d6d9dd;
   --gcds-verify-banner-container-xs: 20rem;
   --gcds-verify-banner-container-sm: 30rem;
   --gcds-verify-banner-container-md: 48rem;
-  --gcds-verify-banner-container-lg: 64rem;
-  --gcds-verify-banner-container-xl: 75rem;
+  --gcds-verify-banner-container-lg: 62rem;
+  --gcds-verify-banner-container-xl: 71.25rem;
   --gcds-verify-banner-container-full: 100%;
   --gcds-verify-banner-container-padding: 1.125rem;
   --gcds-verify-banner-content-border-color: #7d828b;

build/web/css/components/footer.css

@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Mon, 19 Jun 2023 20:28:18 GMT
+ * Generated on Tue, 27 Jun 2023 23:49:41 GMT
  */
 
 :root {
   --gcds-footer-container-margin: 0 auto;
-  --gcds-footer-container-width: 75rem;
+  --gcds-footer-container-width: 71.25rem;
   --gcds-footer-contextual-background: #33465c;
   --gcds-footer-contextual-padding: 1.125rem 0;
   --gcds-footer-contextual-text: #ffffff;

build/web/css/components/header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 19 Jun 2023 20:28:18 GMT
+ * Generated on Tue, 27 Jun 2023 23:49:41 GMT
  */
 
 :root {
@@ -11,7 +11,7 @@
   --gcds-header-brand-padding: 0 0 0.375rem;
   --gcds-header-brand-search-width: 30rem;
   --gcds-header-brand-toggle-padding: 0 1.125rem;
-  --gcds-header-container-max-width: 75rem;
+  --gcds-header-container-max-width: 71.25rem;
   --gcds-header-margin: 0 0 0.75rem;
   --gcds-header-topnav-top: 1.5rem;
 }

build/web/css/components/nav-group.css

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 23:49:41 GMT
+ */
+
+:root {
+  --gcds-nav-group-mobile-background: #ffffff;
+  --gcds-nav-group-mobile-list-margin: 0.9375rem 0 0;
+  --gcds-nav-group-mobile-padding: 0.5625rem 0.9375rem 1.5rem 0.9375rem;
+  --gcds-nav-group-mobile-trigger-border-radius: 0.375rem;
+  --gcds-nav-group-mobile-trigger-border-width: 0.125rem;
+  --gcds-nav-group-mobile-trigger-margin: 0.5625rem;
+  --gcds-nav-group-mobile-trigger-text: #2b4380;
+  --gcds-nav-group-side-nav-dropdown-padding: 2.25rem;
+  --gcds-nav-group-side-nav-trigger-font-weight: 600;
+  --gcds-nav-group-side-nav-trigger-hover-background: #f1f2f3;
+  --gcds-nav-group-side-nav-trigger-icon-margin: 1.125rem;
+  --gcds-nav-group-side-nav-trigger-margin: 0.5625rem;
+  --gcds-nav-group-top-nav-dropdown-background: #f1f2f3;
+  --gcds-nav-group-top-nav-dropdown-box-shadow: 0 0 0.5625rem rgba(0, 0, 0, 0.25);
+  --gcds-nav-group-top-nav-dropdown-padding: 0.75rem 0.75rem 0.1875rem;
+  --gcds-nav-group-top-nav-dropdown-width: 20rem;
+  --gcds-nav-group-top-nav-trigger-border-width: 0.25rem;
+  --gcds-nav-group-top-nav-trigger-hover-background: #d6d9dd;
+  --gcds-nav-group-top-nav-trigger-icon-margin: 0.9375rem;
+  --gcds-nav-group-top-nav-trigger-padding: 1.125rem;
+  --gcds-nav-group-trigger-focus-background: #0535d2;
+  --gcds-nav-group-trigger-focus-text: #ffffff;
+  --gcds-nav-group-trigger-focus-border-radius: 0.1875rem;
+  --gcds-nav-group-trigger-focus-outline-offset: 0.125rem;
+  --gcds-nav-group-trigger-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-group-trigger-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-group-trigger-hover-text: #0535d2;
+  --gcds-nav-group-trigger-max-width: 20rem;
+  --gcds-nav-group-trigger-padding: 0.9375rem;
+  --gcds-nav-group-trigger-text: #333333;
+}

build/web/css/components/nav-link.css

@@ -0,0 +1,33 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 23:49:41 GMT
+ */
+
+:root {
+  --gcds-nav-link-active-border-color: #33465c;
+  --gcds-nav-link-active-font-weight: 700;
+  --gcds-nav-link-active-text: #26374a;
+  --gcds-nav-link-active-background: #d7e5f5;
+  --gcds-nav-link-border-width: 0.25rem;
+  --gcds-nav-link-default-text: #2b4380;
+  --gcds-nav-link-default-decoration-thickness: 0.0625rem;
+  --gcds-nav-link-default-max-width: 20rem;
+  --gcds-nav-link-default-underline-offset: 0.25rem;
+  --gcds-nav-link-focus-background: #0535d2;
+  --gcds-nav-link-focus-text: #ffffff;
+  --gcds-nav-link-focus-border-radius: 0.1875rem;
+  --gcds-nav-link-focus-outline-offset: 0.125rem;
+  --gcds-nav-link-focus-outline: 0.1875rem solid #0535d2;
+  --gcds-nav-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
+  --gcds-nav-link-hover-decoration-thickness: 0.125rem;
+  --gcds-nav-link-hover-text: #0535d2;
+  --gcds-nav-link-margin: 0.5625rem;
+  --gcds-nav-link-padding: 0.9375rem;
+  --gcds-nav-link-side-nav-hover-background: #f1f2f3;
+  --gcds-nav-link-side-nav-padding: 0.9375rem 0.75rem;
+  --gcds-nav-link-top-nav-hover-background: #d6d9dd;
+  --gcds-nav-link-top-nav-home-font: 500 1.58203125rem/126.41975308641975% "Noto Sans", sans-serif;
+  --gcds-nav-link-top-nav-home-padding: 0.9375rem 0.1875rem;
+  --gcds-nav-link-top-nav-padding: 1.125rem;
+  --gcds-nav-link-top-nav-text: #333333;
+}

build/web/css/components/side-nav.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 23:49:41 GMT
+ */
+
+:root {
+  --gcds-side-nav-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif;
+  --gcds-side-nav-heading-margin: 0.5625rem;
+  --gcds-side-nav-heading-padding: 0.9375rem;
+  --gcds-side-nav-max-width: 20rem;
+}