From b7767b82ccd25950fb0fa79ab7b25d67db57fe7e Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 15 Jun 2023 12:37:31 -0700 Subject: [PATCH 01/13] add nav-link tokens --- build/figma/figma.tokens.json | 140 ++++++++++++++++++++++++++ build/web/css/.css | 25 +++++ build/web/scss/.scss | 25 +++++ tokens/components/nav-link/base.json | 142 +++++++++++++++++++++++++++ 4 files changed, 332 insertions(+) create mode 100644 tokens/components/nav-link/base.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index a78db279..1cdfaf77 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -2538,6 +2538,146 @@ "type": "spacing" } }, + "nav-link": { + "active": { + "border": { + "color": { + "value": "#33465c", + "type": "color" + } + }, + "fontWeight": { + "value": "700", + "type": "color" + }, + "text": { + "value": "#26374A", + "type": "color" + }, + "background": { + "value": "#D7E5F5", + "type": "color" + } + }, + "border": { + "width": { + "value": "0.25rem", + "type": "borderWidth" + } + }, + "default": { + "text": { + "value": "#2b4380", + "type": "color" + }, + "decoration": { + "thickness": { + "value": "0.0625rem", + "type": "borderWidth" + } + }, + "maxWidth": { + "value": "20rem", + "type": "sizing" + }, + "underline": { + "offset": { + "value": "0.25rem", + "type": "borderWidth" + } + } + }, + "focus": { + "background": { + "value": "#0535d2", + "type": "color" + }, + "text": { + "value": "#FFF", + "type": "color" + }, + "border-radius": { + "value": "0.1875rem", + "type": "other" + }, + "outline-offset": { + "value": "0.125rem", + "type": "borderWidth" + }, + "outline": { + "value": "0.1875rem solid #0535d2", + "type": "other" + } + }, + "font": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "120%", + "fontSize": "1.25rem" + }, + "type": "typography" + }, + "hover": { + "decoration": { + "thickness": { + "value": "0.125rem", + "type": "borderWidth" + } + } + }, + "margin": { + "value": "0.5625rem", + "type": "spacing" + }, + "padding": { + "value": "0.9375rem", + "type": "spacing" + }, + "sideNav": { + "hover": { + "background": { + "value": "#F1F2F3", + "type": "color" + } + }, + "padding": { + "value": "0.9375rem 0.75rem", + "type": "spacing" + } + }, + "topNav": { + "hover": { + "background": { + "value": "#D6D9DD", + "type": "color" + } + }, + "home": { + "font": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "500", + "lineHeight": "126.41975308641975%", + "fontSize": "1.58203125rem" + }, + "type": "typography" + }, + "padding": { + "value": "0.9375rem 0.1875rem", + "type": "spacing" + } + }, + "padding": { + "value": "1.125rem", + "type": "spacing" + }, + "text": { + "value": "#333333", + "type": "color" + } + } + }, "pagination": { "active": { "text": { diff --git a/build/web/css/.css b/build/web/css/.css index 733a08a5..3e6ee330 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -492,6 +492,31 @@ --gcds-lang-toggle-hover-text: #0535d2; --gcds-lang-toggle-hover-decoration-thickness: 0.125rem; --gcds-lang-toggle-padding: 0.5625rem; + --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-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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 537944bd..a18f63df 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -490,6 +490,31 @@ $gcds-lang-toggle-font: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-lang-toggle-hover-text: #0535d2; $gcds-lang-toggle-hover-decoration-thickness: 0.125rem; $gcds-lang-toggle-padding: 0.5625rem; +$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-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; diff --git a/tokens/components/nav-link/base.json b/tokens/components/nav-link/base.json new file mode 100644 index 00000000..e9b3d539 --- /dev/null +++ b/tokens/components/nav-link/base.json @@ -0,0 +1,142 @@ +{ + "nav-link": { + "active": { + "border": { + "color": { + "value": "{color.blue.700.value}", + "type": "color" + } + }, + "fontWeight": { + "value": "{fontWeights.bold.value}", + "type": "color" + }, + "text": { + "value": "{color.blue.900.value}", + "type": "color" + }, + "background": { + "value": "{color.blue.100.value}", + "type": "color" + } + }, + "border": { + "width": { + "value": "{border.width.lg.value}", + "type": "borderWidth" + } + }, + "default": { + "text": { + "value": "{link.default.value}", + "type": "color" + }, + "decoration": { + "thickness": { + "value": "{border.width.sm.value}", + "type": "borderWidth" + } + }, + "maxWidth": { + "value": "{container.xs.value}", + "type": "sizing" + }, + "underline": { + "offset": { + "value": "{border.width.lg.value}", + "type": "borderWidth" + } + } + }, + "focus": { + "background": { + "value": "{focus.background.value}", + "type": "color" + }, + "text": { + "value": "{focus.text.value}", + "type": "color" + }, + "border-radius": { + "value": "{border.radius.sm.value}", + "type": "other" + }, + "outline-offset": { + "value": "{border.width.md.value}", + "type": "borderWidth" + }, + "outline": { + "value": "{spacing.50.value} solid {focus.background.value}", + "type": "other" + } + }, + "font": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.text}", + "fontSize": "{fontSizes.text}" + }, + "type": "typography" + }, + "hover": { + "decoration": { + "thickness": { + "value": "{border.width.md.value}", + "type": "borderWidth" + } + } + }, + "margin": { + "value": "{spacing.150.value}", + "type": "spacing" + }, + "padding": { + "value": "{spacing.250.value}", + "type": "spacing" + }, + "sideNav": { + "hover": { + "background": { + "value": "{color.grayscale.50.value}", + "type": "color" + } + }, + "padding": { + "value": "{spacing.250.value} {spacing.200.value}", + "type": "spacing" + } + }, + "topNav": { + "hover": { + "background": { + "value": "{color.grayscale.100.value}", + "type": "color" + } + }, + "home": { + "font": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.medium}", + "lineHeight": "{lineHeights.h5}", + "fontSize": "{fontSizes.h5}" + }, + "type": "typography" + }, + "padding": { + "value": "{spacing.250.value} {spacing.50.value}", + "type": "spacing" + } + }, + "padding": { + "value": "{spacing.300.value}", + "type": "spacing" + }, + "text": { + "value": "{text.primary.value}", + "type": "color" + } + } + } +} From 5eda70dfdb0ae97af574324ca93f937d28812073 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 15 Jun 2023 12:39:10 -0700 Subject: [PATCH 02/13] add nav-group tokens --- build/figma/figma.tokens.json | 117 +++++++++++++++++++++++++ build/web/css/.css | 21 +++++ build/web/scss/.scss | 21 +++++ tokens/components/nav-group/base.json | 119 ++++++++++++++++++++++++++ 4 files changed, 278 insertions(+) create mode 100644 tokens/components/nav-group/base.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 1cdfaf77..9a488948 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -2538,6 +2538,123 @@ "type": "spacing" } }, + "nav-group": { + "sideNav": { + "dropdown": { + "padding": { + "value": "2.25rem", + "type": "spacing" + } + }, + "trigger": { + "fontWeight": { + "value": "600", + "type": "color" + }, + "hover": { + "background": { + "value": "#F1F2F3", + "type": "color" + } + }, + "icon": { + "margin": { + "value": "1.125rem", + "type": "spacing" + } + }, + "margin": { + "value": "0.5625rem", + "type": "spacing" + } + } + }, + "topNav": { + "dropdown": { + "background": { + "value": "#F1F2F3", + "type": "color" + }, + "padding": { + "value": "0.75rem 0.75rem 0.1875rem", + "type": "spacing" + }, + "width": { + "value": "20rem", + "type": "sizing" + } + }, + "trigger": { + "border": { + "width": { + "value": "0.25rem", + "type": "borderWidth" + } + }, + "hover": { + "background": { + "value": "#D6D9DD", + "type": "color" + } + }, + "icon": { + "margin": { + "value": "0.9375rem", + "type": "spacing" + } + }, + "padding": { + "value": "1.125rem", + "type": "spacing" + } + } + }, + "trigger": { + "focus": { + "background": { + "value": "#0535d2", + "type": "color" + }, + "text": { + "value": "#FFF", + "type": "color" + }, + "border-radius": { + "value": "0.1875rem", + "type": "other" + }, + "outline-offset": { + "value": "0.125rem", + "type": "borderWidth" + }, + "outline": { + "value": "0.1875rem solid #0535d2", + "type": "other" + } + }, + "font": { + "value": { + "fontFamily": "\"Noto Sans\", sans-serif", + "fontWeight": "400", + "lineHeight": "120%", + "fontSize": "1.25rem" + }, + "type": "typography" + }, + "maxWidth": { + "value": "20rem", + "type": "sizing" + }, + "padding": { + "value": "0.9375rem", + "type": "spacing" + }, + "text": { + "value": "#333333", + "type": "color" + } + } + }, "nav-link": { "active": { "border": { diff --git a/build/web/css/.css b/build/web/css/.css index 3e6ee330..f8aa2041 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -492,6 +492,27 @@ --gcds-lang-toggle-hover-text: #0535d2; --gcds-lang-toggle-hover-decoration-thickness: 0.125rem; --gcds-lang-toggle-padding: 0.5625rem; + --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-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-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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index a18f63df..bcdb9645 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -490,6 +490,27 @@ $gcds-lang-toggle-font: 400 1.25rem/120% "Noto Sans", sans-serif; $gcds-lang-toggle-hover-text: #0535d2; $gcds-lang-toggle-hover-decoration-thickness: 0.125rem; $gcds-lang-toggle-padding: 0.5625rem; +$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-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-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; diff --git a/tokens/components/nav-group/base.json b/tokens/components/nav-group/base.json new file mode 100644 index 00000000..e81ff0bc --- /dev/null +++ b/tokens/components/nav-group/base.json @@ -0,0 +1,119 @@ +{ + "nav-group": { + "sideNav": { + "dropdown": { + "padding": { + "value": "{spacing.450.value}", + "type": "spacing" + } + }, + "trigger": { + "fontWeight": { + "value": "{fontWeights.semibold.value}", + "type": "color" + }, + "hover": { + "background": { + "value": "{color.grayscale.50.value}", + "type": "color" + } + }, + "icon": { + "margin": { + "value": "{spacing.300.value}", + "type": "spacing" + } + }, + "margin": { + "value": "{spacing.150.value}", + "type": "spacing" + } + } + }, + "topNav": { + "dropdown": { + "background": { + "value": "{color.grayscale.50.value}", + "type": "color" + }, + "padding": { + "value": "{spacing.200.value} {spacing.200.value} {spacing.50.value}", + "type": "spacing" + }, + "width": { + "value": "{container.xs.value}", + "type": "sizing" + } + }, + "trigger": { + "border": { + "width": { + "value": "{border.width.lg.value}", + "type": "borderWidth" + } + }, + "hover": { + "background": { + "value": "{color.grayscale.100.value}", + "type": "color" + } + }, + "icon": { + "margin": { + "value": "{spacing.250.value}", + "type": "spacing" + } + }, + "padding": { + "value": "{spacing.300.value}", + "type": "spacing" + } + } + }, + "trigger": { + "focus": { + "background": { + "value": "{focus.background.value}", + "type": "color" + }, + "text": { + "value": "{focus.text.value}", + "type": "color" + }, + "border-radius": { + "value": "{border.radius.sm.value}", + "type": "other" + }, + "outline-offset": { + "value": "{border.width.md.value}", + "type": "borderWidth" + }, + "outline": { + "value": "{spacing.50.value} solid {focus.background.value}", + "type": "other" + } + }, + "font": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.text}", + "fontSize": "{fontSizes.text}" + }, + "type": "typography" + }, + "maxWidth": { + "value": "{container.xs.value}", + "type": "sizing" + }, + "padding": { + "value": "{spacing.250.value}", + "type": "spacing" + }, + "text": { + "value": "{text.primary.value}", + "type": "color" + } + } + } +} From 46211545e5697593786c53f921ae0e04bd75576e Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 15 Jun 2023 12:40:56 -0700 Subject: [PATCH 03/13] replace site-menu tokens with top-nav tokens --- build/figma/figma.tokens.json | 84 +++---------------------- build/web/css/.css | 16 +---- build/web/scss/.scss | 16 +---- tokens/components/site-menu/tokens.json | 76 ---------------------- tokens/components/top-nav/base.json | 12 ++++ 5 files changed, 26 insertions(+), 178 deletions(-) delete mode 100644 tokens/components/site-menu/tokens.json create mode 100644 tokens/components/top-nav/base.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 9a488948..58c5b8c8 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -3194,80 +3194,6 @@ } } }, - "site-menu": { - "active": { - "background": { - "value": "#333333", - "type": "color" - }, - "text": { - "value": "#FFF", - "type": "color" - } - }, - "container": { - "maxWidth": { - "value": "75rem", - "type": "sizing" - } - }, - "default": { - "background": { - "value": "#F1F2F3", - "type": "color" - }, - "border": { - "value": "#00030", - "type": "color" - }, - "text": { - "value": "#333333", - "type": "color" - } - }, - "focus": { - "background": { - "value": "#0535d2", - "type": "color" - }, - "text": { - "value": "#FFF", - "type": "color" - } - }, - "hover": { - "background": { - "value": "#A8ADB450", - "type": "color" - } - }, - "selection": { - "background": { - "value": "#B3800F", - "type": "color" - }, - "text": { - "value": "#333333", - "type": "color" - } - }, - "submenu": { - "background": { - "value": "#D6D9DD", - "type": "color" - }, - "box-shadow": { - "value": "#00030", - "type": "color" - }, - "trigger": { - "text": { - "value": "#333333", - "type": "color" - } - } - } - }, "stepper": { "font": { "value": { @@ -3358,6 +3284,16 @@ "type": "spacing" } }, + "top-nav": { + "background": { + "value": "#F1F2F3", + "type": "color" + }, + "maxWidth": { + "value": "75rem", + "type": "sizing" + } + }, "verify-banner": { "background": { "value": "#D6D9DD", diff --git a/build/web/css/.css b/build/web/css/.css index f8aa2041..60d65d9f 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -607,20 +607,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; @@ -637,6 +623,8 @@ --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: 75rem; --gcds-verify-banner-background: #d6d9dd; --gcds-verify-banner-container-xs: 20rem; --gcds-verify-banner-container-sm: 30rem; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index bcdb9645..3af8d845 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -605,20 +605,6 @@ $gcds-signature-signature-height: 1.6875rem; $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; @@ -635,6 +621,8 @@ $gcds-textarea-margin: 0 0 1.5rem; $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: 75rem; $gcds-verify-banner-background: #d6d9dd; $gcds-verify-banner-container-xs: 20rem; $gcds-verify-banner-container-sm: 30rem; diff --git a/tokens/components/site-menu/tokens.json b/tokens/components/site-menu/tokens.json deleted file mode 100644 index 85f864aa..00000000 --- a/tokens/components/site-menu/tokens.json +++ /dev/null @@ -1,76 +0,0 @@ -{ - "site-menu": { - "active": { - "background": { - "value": "{color.grayscale.900.value}", - "type": "color" - }, - "text": { - "value": "{text.light.value}", - "type": "color" - } - }, - "container": { - "maxWidth": { - "value": "{container.xl.value}", - "type": "sizing" - } - }, - "default": { - "background": { - "value": "{color.grayscale.50.value}", - "type": "color" - }, - "border": { - "value": "{color.grayscale.1000.value}30", - "type": "color" - }, - "text": { - "value": "{text.primary.value}", - "type": "color" - } - }, - "focus": { - "background": { - "value": "{focus.background.value}", - "type": "color" - }, - "text": { - "value": "{focus.text.value}", - "type": "color" - } - }, - "hover": { - "background": { - "value": "{color.grayscale.300.value}50", - "type": "color" - } - }, - "selection": { - "background": { - "value": "{color.yellow.500.value}", - "type": "color" - }, - "text": { - "value": "{text.primary.value}", - "type": "color" - } - }, - "submenu": { - "background": { - "value": "{color.grayscale.100.value}", - "type": "color" - }, - "box-shadow": { - "value": "{color.grayscale.1000.value}30", - "type": "color" - }, - "trigger": { - "text": { - "value": "{text.primary.value}", - "type": "color" - } - } - } - } -} diff --git a/tokens/components/top-nav/base.json b/tokens/components/top-nav/base.json new file mode 100644 index 00000000..0097264a --- /dev/null +++ b/tokens/components/top-nav/base.json @@ -0,0 +1,12 @@ +{ + "top-nav": { + "background": { + "value": "{color.grayscale.50.value}", + "type": "color" + }, + "maxWidth": { + "value": "{container.xl.value}", + "type": "sizing" + } + } +} From 2aada684b55524c91b96c5ef891ef1596359dbf7 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 15 Jun 2023 12:42:02 -0700 Subject: [PATCH 04/13] add side-nav tokens --- build/figma/figma.tokens.json | 25 +++++++++++++++++++++++++ build/web/css/.css | 4 ++++ build/web/scss/.scss | 4 ++++ tokens/components/side-nav/base.json | 27 +++++++++++++++++++++++++++ 4 files changed, 60 insertions(+) create mode 100644 tokens/components/side-nav/base.json diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index 58c5b8c8..c4390ff7 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -3152,6 +3152,31 @@ "type": "spacing" } }, + "side-nav": { + "heading": { + "font": { + "value": { + "fontFamily": "\"Lato\", sans-serif", + "fontWeight": "700", + "lineHeight": "126.41975308641975%", + "fontSize": "1.58203125rem" + }, + "type": "typography" + }, + "margin": { + "value": "0.5625rem", + "type": "spacing" + }, + "padding": { + "value": "0.9375rem", + "type": "spacing" + } + }, + "maxWidth": { + "value": "20rem", + "type": "sizing" + } + }, "signature": { "color": { "flag": { diff --git a/build/web/css/.css b/build/web/css/.css index 60d65d9f..2493ad58 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -599,6 +599,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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 3af8d845..38d8c142 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -597,6 +597,10 @@ $gcds-select-margin: 0 0 1.5rem; $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; diff --git a/tokens/components/side-nav/base.json b/tokens/components/side-nav/base.json new file mode 100644 index 00000000..120843a8 --- /dev/null +++ b/tokens/components/side-nav/base.json @@ -0,0 +1,27 @@ +{ + "side-nav": { + "heading": { + "font": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.bold}", + "lineHeight": "{lineHeights.h5}", + "fontSize": "{fontSizes.h5}" + }, + "type": "typography" + }, + "margin": { + "value": "{spacing.150.value}", + "type": "spacing" + }, + "padding": { + "value": "{spacing.250.value}", + "type": "spacing" + } + }, + "maxWidth": { + "value": "{container.xs.value}", + "type": "sizing" + } + } +} From fcadc4143df8c217cbc40b9f092abfc100151708 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 15 Jun 2023 12:45:01 -0700 Subject: [PATCH 05/13] change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md --- build/figma/figma.tokens.json | 14 +++++----- build/web/css/.css | 41 ++++++++++++++++++++++++----- build/web/scss/.scss | 41 ++++++++++++++++++++++++----- tokens/global/container/tokens.json | 4 +-- 4 files changed, 77 insertions(+), 23 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index c4390ff7..f292494b 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -244,11 +244,11 @@ "type": "sizing" }, "lg": { - "value": "64rem", + "value": "62rem", "type": "sizing" }, "xl": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" }, "full": { @@ -1880,7 +1880,7 @@ "type": "spacing" }, "width": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" } }, @@ -2175,7 +2175,7 @@ }, "container": { "maxWidth": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" } }, @@ -3315,7 +3315,7 @@ "type": "color" }, "maxWidth": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" } }, @@ -3338,11 +3338,11 @@ "type": "sizing" }, "lg": { - "value": "64rem", + "value": "62rem", "type": "sizing" }, "xl": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" }, "full": { diff --git a/build/web/css/.css b/build/web/css/.css index 2493ad58..ce1f9424 100644 --- a/build/web/css/.css +++ b/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; @@ -149,6 +149,15 @@ --gcds-alert-button-margin: 0 0 0 0.9375rem; --gcds-alert-button-mobile-margin: 0.9375rem 0 0; --gcds-alert-button-outline-width: 0.1875rem; +<<<<<<< HEAD:build/web/css/.css +======= + --gcds-alert-container-xs: 20rem; + --gcds-alert-container-sm: 30rem; + --gcds-alert-container-md: 48rem; + --gcds-alert-container-lg: 62rem; + --gcds-alert-container-xl: 71.25rem; + --gcds-alert-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-alert-content-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif; --gcds-alert-content-heading-margin: 0 0 0.5625rem; --gcds-alert-content-heading-mobile-margin: 0 0 0.5625rem; @@ -361,7 +370,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; @@ -395,6 +404,15 @@ --gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-footer-link-focus-outline-offset: 0.125rem; --gcds-footer-link-focus-outline: 0.1875rem solid #0535d2; +<<<<<<< HEAD:build/web/css/.css +======= + --gcds-grid-container-xs: 20rem; + --gcds-grid-container-sm: 30rem; + --gcds-grid-container-md: 48rem; + --gcds-grid-container-lg: 62rem; + --gcds-grid-container-xl: 71.25rem; + --gcds-grid-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-grid-gap-0: 0; --gcds-grid-gap-50: 0.1875rem; --gcds-grid-gap-100: 0.375rem; @@ -418,7 +436,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; @@ -557,6 +575,15 @@ --gcds-pagination-simple-listitem-margin: 0.375rem 0.375rem 0.75rem; --gcds-pagination-simple-listitem-text-margin: 0 0 0.1875rem; --gcds-pagination-simple-padding: 0.75rem 0.5625rem; +<<<<<<< HEAD:build/web/css/.css +======= + --gcds-phase-banner-container-xs: 20rem; + --gcds-phase-banner-container-sm: 30rem; + --gcds-phase-banner-container-md: 48rem; + --gcds-phase-banner-container-lg: 62rem; + --gcds-phase-banner-container-xl: 71.25rem; + --gcds-phase-banner-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-phase-banner-details-cta-margin: 0 0 0 0.9375rem; --gcds-phase-banner-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-phase-banner-icon-margin: 1.125rem; @@ -628,13 +655,13 @@ --gcds-textarea-outline-width: 0.1875rem; --gcds-textarea-padding: 0.75rem; --gcds-top-nav-background: #f1f2f3; - --gcds-top-nav-max-width: 75rem; + --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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 38d8c142..752a1e3f 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -55,8 +55,8 @@ $gcds-text-secondary: #43474e; // Global color: text secondary $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; @@ -147,6 +147,15 @@ $gcds-alert-button-icon-width-and-height: 1.125rem; $gcds-alert-button-margin: 0 0 0 0.9375rem; $gcds-alert-button-mobile-margin: 0.9375rem 0 0; $gcds-alert-button-outline-width: 0.1875rem; +<<<<<<< HEAD:build/web/scss/.scss +======= +$gcds-alert-container-xs: 20rem; +$gcds-alert-container-sm: 30rem; +$gcds-alert-container-md: 48rem; +$gcds-alert-container-lg: 62rem; +$gcds-alert-container-xl: 71.25rem; +$gcds-alert-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-alert-content-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif; $gcds-alert-content-heading-margin: 0 0 0.5625rem; $gcds-alert-content-heading-mobile-margin: 0 0 0.5625rem; @@ -359,7 +368,7 @@ $gcds-file-uploader-focus-button-background: #0535d2; $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; @@ -393,6 +402,15 @@ $gcds-footer-link-focus-radius: 0.1875rem; $gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-footer-link-focus-outline-offset: 0.125rem; $gcds-footer-link-focus-outline: 0.1875rem solid #0535d2; +<<<<<<< HEAD:build/web/scss/.scss +======= +$gcds-grid-container-xs: 20rem; +$gcds-grid-container-sm: 30rem; +$gcds-grid-container-md: 48rem; +$gcds-grid-container-lg: 62rem; +$gcds-grid-container-xl: 71.25rem; +$gcds-grid-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-grid-gap-0: 0; $gcds-grid-gap-50: 0.1875rem; $gcds-grid-gap-100: 0.375rem; @@ -416,7 +434,7 @@ $gcds-header-brand-margin: 1.125rem 0 0; $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; @@ -555,6 +573,15 @@ $gcds-pagination-simple-label-font-weight: 400; $gcds-pagination-simple-listitem-margin: 0.375rem 0.375rem 0.75rem; $gcds-pagination-simple-listitem-text-margin: 0 0 0.1875rem; $gcds-pagination-simple-padding: 0.75rem 0.5625rem; +<<<<<<< HEAD:build/web/scss/.scss +======= +$gcds-phase-banner-container-xs: 20rem; +$gcds-phase-banner-container-sm: 30rem; +$gcds-phase-banner-container-md: 48rem; +$gcds-phase-banner-container-lg: 62rem; +$gcds-phase-banner-container-xl: 71.25rem; +$gcds-phase-banner-container-full: 100%; +>>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-phase-banner-details-cta-margin: 0 0 0 0.9375rem; $gcds-phase-banner-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-phase-banner-icon-margin: 1.125rem; @@ -626,13 +653,13 @@ $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: 75rem; +$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; diff --git a/tokens/global/container/tokens.json b/tokens/global/container/tokens.json index 6a7e5494..d3b701bc 100644 --- a/tokens/global/container/tokens.json +++ b/tokens/global/container/tokens.json @@ -13,11 +13,11 @@ "type": "sizing" }, "lg": { - "value": "64rem", + "value": "62rem", "type": "sizing" }, "xl": { - "value": "75rem", + "value": "71.25rem", "type": "sizing" }, "full": { From 136221528a7d60da4a701301b9d6289a4a9af3df Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Mon, 26 Jun 2023 13:30:34 -0700 Subject: [PATCH 06/13] rename base.json token files to token.json --- tokens/components/nav-group/{base.json => tokens.json} | 0 tokens/components/nav-link/{base.json => tokens.json} | 0 tokens/components/side-nav/{base.json => tokens.json} | 0 tokens/components/top-nav/{base.json => tokens.json} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename tokens/components/nav-group/{base.json => tokens.json} (100%) rename tokens/components/nav-link/{base.json => tokens.json} (100%) rename tokens/components/side-nav/{base.json => tokens.json} (100%) rename tokens/components/top-nav/{base.json => tokens.json} (100%) diff --git a/tokens/components/nav-group/base.json b/tokens/components/nav-group/tokens.json similarity index 100% rename from tokens/components/nav-group/base.json rename to tokens/components/nav-group/tokens.json diff --git a/tokens/components/nav-link/base.json b/tokens/components/nav-link/tokens.json similarity index 100% rename from tokens/components/nav-link/base.json rename to tokens/components/nav-link/tokens.json diff --git a/tokens/components/side-nav/base.json b/tokens/components/side-nav/tokens.json similarity index 100% rename from tokens/components/side-nav/base.json rename to tokens/components/side-nav/tokens.json diff --git a/tokens/components/top-nav/base.json b/tokens/components/top-nav/tokens.json similarity index 100% rename from tokens/components/top-nav/base.json rename to tokens/components/top-nav/tokens.json From 41cb12720c08e2a4c41777de5a06d29367cc7a8f Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 16:19:18 -0700 Subject: [PATCH 07/13] remove site menu tokens --- build/web/css/components/site-menu.css | 21 --------------------- build/web/scss/components/site-menu.scss | 18 ------------------ 2 files changed, 39 deletions(-) delete mode 100644 build/web/css/components/site-menu.css delete mode 100644 build/web/scss/components/site-menu.scss diff --git a/build/web/css/components/site-menu.css b/build/web/css/components/site-menu.css deleted file mode 100644 index 7b3605e8..00000000 --- a/build/web/css/components/site-menu.css +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Do not edit directly - * Generated on Mon, 19 Jun 2023 20:28:18 GMT - */ - -:root { - --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; -} diff --git a/build/web/scss/components/site-menu.scss b/build/web/scss/components/site-menu.scss deleted file mode 100644 index 8a9f69d0..00000000 --- a/build/web/scss/components/site-menu.scss +++ /dev/null @@ -1,18 +0,0 @@ - -// Do not edit directly -// Generated on Mon, 19 Jun 2023 20:28:18 GMT - -$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; From e0763ac40a4da800794c9e752bd83eb336b240ff Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 16:21:53 -0700 Subject: [PATCH 08/13] add mobile nav-link tokens --- build/web/css/components/nav-link.css | 33 +++++++++++++++++++++++++ build/web/scss/components/nav-link.scss | 30 ++++++++++++++++++++++ tokens/components/nav-link/tokens.json | 4 +++ 3 files changed, 67 insertions(+) create mode 100644 build/web/css/components/nav-link.css create mode 100644 build/web/scss/components/nav-link.scss diff --git a/build/web/css/components/nav-link.css b/build/web/css/components/nav-link.css new file mode 100644 index 00000000..a9d0df00 --- /dev/null +++ b/build/web/css/components/nav-link.css @@ -0,0 +1,33 @@ +/** + * Do not edit directly + * Generated on Tue, 27 Jun 2023 23:17:02 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; +} diff --git a/build/web/scss/components/nav-link.scss b/build/web/scss/components/nav-link.scss new file mode 100644 index 00000000..63696bc0 --- /dev/null +++ b/build/web/scss/components/nav-link.scss @@ -0,0 +1,30 @@ + +// Do not edit directly +// Generated on Tue, 27 Jun 2023 23:17:02 GMT + +$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; diff --git a/tokens/components/nav-link/tokens.json b/tokens/components/nav-link/tokens.json index e9b3d539..1e7fab93 100644 --- a/tokens/components/nav-link/tokens.json +++ b/tokens/components/nav-link/tokens.json @@ -85,6 +85,10 @@ "value": "{border.width.md.value}", "type": "borderWidth" } + }, + "text": { + "value": "{link.hover.value}", + "type": "color" } }, "margin": { From b5f209cf1cc98665c14093c8fb04676d59d508a8 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 16:22:16 -0700 Subject: [PATCH 09/13] add mobile side-nav tokens --- build/web/css/components/side-nav.css | 11 +++++++++++ build/web/scss/components/side-nav.scss | 8 ++++++++ 2 files changed, 19 insertions(+) create mode 100644 build/web/css/components/side-nav.css create mode 100644 build/web/scss/components/side-nav.scss diff --git a/build/web/css/components/side-nav.css b/build/web/css/components/side-nav.css new file mode 100644 index 00000000..a72bc74d --- /dev/null +++ b/build/web/css/components/side-nav.css @@ -0,0 +1,11 @@ +/** + * Do not edit directly + * Generated on Tue, 27 Jun 2023 23:17:02 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; +} diff --git a/build/web/scss/components/side-nav.scss b/build/web/scss/components/side-nav.scss new file mode 100644 index 00000000..7a6ef908 --- /dev/null +++ b/build/web/scss/components/side-nav.scss @@ -0,0 +1,8 @@ + +// Do not edit directly +// Generated on Tue, 27 Jun 2023 23:17:02 GMT + +$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; From 1f8aead90d58bce69de6f9a278924b9b0a66b5a9 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 16:22:30 -0700 Subject: [PATCH 10/13] add mobile top-nav tokens --- build/web/css/components/top-nav.css | 9 +++++++++ build/web/scss/components/top-nav.scss | 6 ++++++ 2 files changed, 15 insertions(+) create mode 100644 build/web/css/components/top-nav.css create mode 100644 build/web/scss/components/top-nav.scss diff --git a/build/web/css/components/top-nav.css b/build/web/css/components/top-nav.css new file mode 100644 index 00000000..1d4b4ac5 --- /dev/null +++ b/build/web/css/components/top-nav.css @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 27 Jun 2023 23:17:02 GMT + */ + +:root { + --gcds-top-nav-background: #f1f2f3; + --gcds-top-nav-max-width: 71.25rem; +} diff --git a/build/web/scss/components/top-nav.scss b/build/web/scss/components/top-nav.scss new file mode 100644 index 00000000..13fdb967 --- /dev/null +++ b/build/web/scss/components/top-nav.scss @@ -0,0 +1,6 @@ + +// Do not edit directly +// Generated on Tue, 27 Jun 2023 23:17:02 GMT + +$gcds-top-nav-background: #f1f2f3; +$gcds-top-nav-max-width: 71.25rem; From 45f726ba2e1b72e1ffb92ac1e563a9ffd6244fa8 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 16:35:59 -0700 Subject: [PATCH 11/13] add mobile nav-group tokens --- build/web/css/components/nav-group.css | 37 +++++++++++++++++++ build/web/scss/components/nav-group.scss | 34 ++++++++++++++++++ tokens/components/nav-group/tokens.json | 46 ++++++++++++++++++++++++ 3 files changed, 117 insertions(+) create mode 100644 build/web/css/components/nav-group.css create mode 100644 build/web/scss/components/nav-group.scss diff --git a/build/web/css/components/nav-group.css b/build/web/css/components/nav-group.css new file mode 100644 index 00000000..7a2f0580 --- /dev/null +++ b/build/web/css/components/nav-group.css @@ -0,0 +1,37 @@ +/** + * Do not edit directly + * Generated on Tue, 27 Jun 2023 23:33:37 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; +} diff --git a/build/web/scss/components/nav-group.scss b/build/web/scss/components/nav-group.scss new file mode 100644 index 00000000..886250e1 --- /dev/null +++ b/build/web/scss/components/nav-group.scss @@ -0,0 +1,34 @@ + +// Do not edit directly +// Generated on Tue, 27 Jun 2023 23:33:37 GMT + +$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; diff --git a/tokens/components/nav-group/tokens.json b/tokens/components/nav-group/tokens.json index e81ff0bc..067228aa 100644 --- a/tokens/components/nav-group/tokens.json +++ b/tokens/components/nav-group/tokens.json @@ -1,5 +1,41 @@ { "nav-group": { + "mobile": { + "background": { + "value": "{color.grayscale.0.value}", + "type": "color" + }, + "list": { + "margin": { + "value": "{spacing.250.value} 0 0", + "type": "spacing" + } + }, + "padding": { + "value": "{spacing.150.value} {spacing.250.value} {spacing.400.value} {spacing.250.value}", + "type": "spacing" + }, + "trigger": { + "border": { + "radius": { + "value": "{border.radius.md.value}", + "type": "other" + }, + "width": { + "value": "{border.width.md.value}", + "type": "borderWidth" + } + }, + "margin": { + "value": "{spacing.150.value}", + "type": "spacing" + }, + "text": { + "value": "{link.default.value}", + "type": "color" + } + } + }, "sideNav": { "dropdown": { "padding": { @@ -36,6 +72,10 @@ "value": "{color.grayscale.50.value}", "type": "color" }, + "box-shadow": { + "value": "0 0 {spacing.150.value} rgba(0, 0, 0, 0.25)", + "type": "color" + }, "padding": { "value": "{spacing.200.value} {spacing.200.value} {spacing.50.value}", "type": "spacing" @@ -102,6 +142,12 @@ }, "type": "typography" }, + "hover": { + "text": { + "value": "{link.hover.value}", + "type": "color" + } + }, "maxWidth": { "value": "{container.xs.value}", "type": "sizing" From 3e405ab80edb723d8492bb2c4d1014e07961fa5c Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 17:03:06 -0700 Subject: [PATCH 12/13] update tokens --- build/figma/figma.tokens.json | 50 +++++++++++ build/web/css/.css | 37 +++----- build/web/css/components.css | 84 +++++++++++++++---- build/web/css/components/footer.css | 4 +- build/web/css/components/header.css | 4 +- build/web/css/components/nav-group.css | 2 +- build/web/css/components/nav-link.css | 2 +- build/web/css/components/side-nav.css | 2 +- build/web/css/components/top-nav.css | 2 +- build/web/css/components/verify-banner.css | 6 +- build/web/css/global.css | 6 +- build/web/css/global/container.css | 6 +- build/web/css/tokens.css | 88 +++++++++++++++----- build/web/scss/.scss | 37 +++----- build/web/scss/components.scss | 84 +++++++++++++++---- build/web/scss/components/footer.scss | 4 +- build/web/scss/components/header.scss | 4 +- build/web/scss/components/nav-group.scss | 2 +- build/web/scss/components/nav-link.scss | 2 +- build/web/scss/components/side-nav.scss | 2 +- build/web/scss/components/top-nav.scss | 2 +- build/web/scss/components/verify-banner.scss | 6 +- build/web/scss/global.scss | 6 +- build/web/scss/global/container.scss | 6 +- build/web/scss/tokens.scss | 88 +++++++++++++++----- 25 files changed, 372 insertions(+), 164 deletions(-) diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json index f292494b..81416f7b 100644 --- a/build/figma/figma.tokens.json +++ b/build/figma/figma.tokens.json @@ -2539,6 +2539,42 @@ } }, "nav-group": { + "mobile": { + "background": { + "value": "#FFF", + "type": "color" + }, + "list": { + "margin": { + "value": "0.9375rem 0 0", + "type": "spacing" + } + }, + "padding": { + "value": "0.5625rem 0.9375rem 1.5rem 0.9375rem", + "type": "spacing" + }, + "trigger": { + "border": { + "radius": { + "value": "0.375rem", + "type": "other" + }, + "width": { + "value": "0.125rem", + "type": "borderWidth" + } + }, + "margin": { + "value": "0.5625rem", + "type": "spacing" + }, + "text": { + "value": "#2b4380", + "type": "color" + } + } + }, "sideNav": { "dropdown": { "padding": { @@ -2575,6 +2611,10 @@ "value": "#F1F2F3", "type": "color" }, + "box-shadow": { + "value": "0 0 0.5625rem rgba(0, 0, 0, 0.25)", + "type": "color" + }, "padding": { "value": "0.75rem 0.75rem 0.1875rem", "type": "spacing" @@ -2641,6 +2681,12 @@ }, "type": "typography" }, + "hover": { + "text": { + "value": "#0535d2", + "type": "color" + } + }, "maxWidth": { "value": "20rem", "type": "sizing" @@ -2741,6 +2787,10 @@ "value": "0.125rem", "type": "borderWidth" } + }, + "text": { + "value": "#0535d2", + "type": "color" } }, "margin": { diff --git a/build/web/css/.css b/build/web/css/.css index ce1f9424..b02bd510 100644 --- a/build/web/css/.css +++ b/build/web/css/.css @@ -149,15 +149,6 @@ --gcds-alert-button-margin: 0 0 0 0.9375rem; --gcds-alert-button-mobile-margin: 0.9375rem 0 0; --gcds-alert-button-outline-width: 0.1875rem; -<<<<<<< HEAD:build/web/css/.css -======= - --gcds-alert-container-xs: 20rem; - --gcds-alert-container-sm: 30rem; - --gcds-alert-container-md: 48rem; - --gcds-alert-container-lg: 62rem; - --gcds-alert-container-xl: 71.25rem; - --gcds-alert-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-alert-content-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif; --gcds-alert-content-heading-margin: 0 0 0.5625rem; --gcds-alert-content-heading-mobile-margin: 0 0 0.5625rem; @@ -404,15 +395,6 @@ --gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; --gcds-footer-link-focus-outline-offset: 0.125rem; --gcds-footer-link-focus-outline: 0.1875rem solid #0535d2; -<<<<<<< HEAD:build/web/css/.css -======= - --gcds-grid-container-xs: 20rem; - --gcds-grid-container-sm: 30rem; - --gcds-grid-container-md: 48rem; - --gcds-grid-container-lg: 62rem; - --gcds-grid-container-xl: 71.25rem; - --gcds-grid-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-grid-gap-0: 0; --gcds-grid-gap-50: 0.1875rem; --gcds-grid-gap-100: 0.375rem; @@ -510,12 +492,20 @@ --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; @@ -528,6 +518,7 @@ --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; @@ -547,6 +538,7 @@ --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; @@ -575,15 +567,6 @@ --gcds-pagination-simple-listitem-margin: 0.375rem 0.375rem 0.75rem; --gcds-pagination-simple-listitem-text-margin: 0 0 0.1875rem; --gcds-pagination-simple-padding: 0.75rem 0.5625rem; -<<<<<<< HEAD:build/web/css/.css -======= - --gcds-phase-banner-container-xs: 20rem; - --gcds-phase-banner-container-sm: 30rem; - --gcds-phase-banner-container-md: 48rem; - --gcds-phase-banner-container-lg: 62rem; - --gcds-phase-banner-container-xl: 71.25rem; - --gcds-phase-banner-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/variables.css --gcds-phase-banner-details-cta-margin: 0 0 0 0.9375rem; --gcds-phase-banner-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; --gcds-phase-banner-icon-margin: 1.125rem; diff --git a/build/web/css/components.css b/build/web/css/components.css index d26b8183..d6007306 100644 --- a/build/web/css/components.css +++ b/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; diff --git a/build/web/css/components/footer.css b/build/web/css/components/footer.css index 856d63e7..8e699c0c 100644 --- a/build/web/css/components/footer.css +++ b/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; diff --git a/build/web/css/components/header.css b/build/web/css/components/header.css index 3f00fec5..9a1f3b68 100644 --- a/build/web/css/components/header.css +++ b/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; } diff --git a/build/web/css/components/nav-group.css b/build/web/css/components/nav-group.css index 7a2f0580..c5e150bc 100644 --- a/build/web/css/components/nav-group.css +++ b/build/web/css/components/nav-group.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 23:33:37 GMT + * Generated on Tue, 27 Jun 2023 23:49:41 GMT */ :root { diff --git a/build/web/css/components/nav-link.css b/build/web/css/components/nav-link.css index a9d0df00..6805ab72 100644 --- a/build/web/css/components/nav-link.css +++ b/build/web/css/components/nav-link.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 23:17:02 GMT + * Generated on Tue, 27 Jun 2023 23:49:41 GMT */ :root { diff --git a/build/web/css/components/side-nav.css b/build/web/css/components/side-nav.css index a72bc74d..a729378c 100644 --- a/build/web/css/components/side-nav.css +++ b/build/web/css/components/side-nav.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 23:17:02 GMT + * Generated on Tue, 27 Jun 2023 23:49:41 GMT */ :root { diff --git a/build/web/css/components/top-nav.css b/build/web/css/components/top-nav.css index 1d4b4ac5..978096a5 100644 --- a/build/web/css/components/top-nav.css +++ b/build/web/css/components/top-nav.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 27 Jun 2023 23:17:02 GMT + * Generated on Tue, 27 Jun 2023 23:49:41 GMT */ :root { diff --git a/build/web/css/components/verify-banner.css b/build/web/css/components/verify-banner.css index f300cd01..96451e9b 100644 --- a/build/web/css/components/verify-banner.css +++ b/build/web/css/components/verify-banner.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 { @@ -8,8 +8,8 @@ --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; diff --git a/build/web/css/global.css b/build/web/css/global.css index 704d6de3..d1f118a7 100644 --- a/build/web/css/global.css +++ b/build/web/css/global.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 { @@ -32,8 +32,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-outline-width: 0.1875rem; /* Global outline: width */ --gcds-spacing-0: 0; diff --git a/build/web/css/global/container.css b/build/web/css/global/container.css index b49a1c2b..7eddf823 100644 --- a/build/web/css/global/container.css +++ b/build/web/css/global/container.css @@ -1,13 +1,13 @@ /** * 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-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%; } diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css index 733a08a5..b02bd510 100644 --- a/build/web/css/tokens.css +++ b/build/web/css/tokens.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; diff --git a/build/web/scss/.scss b/build/web/scss/.scss index 752a1e3f..2f92d4de 100644 --- a/build/web/scss/.scss +++ b/build/web/scss/.scss @@ -147,15 +147,6 @@ $gcds-alert-button-icon-width-and-height: 1.125rem; $gcds-alert-button-margin: 0 0 0 0.9375rem; $gcds-alert-button-mobile-margin: 0.9375rem 0 0; $gcds-alert-button-outline-width: 0.1875rem; -<<<<<<< HEAD:build/web/scss/.scss -======= -$gcds-alert-container-xs: 20rem; -$gcds-alert-container-sm: 30rem; -$gcds-alert-container-md: 48rem; -$gcds-alert-container-lg: 62rem; -$gcds-alert-container-xl: 71.25rem; -$gcds-alert-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-alert-content-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif; $gcds-alert-content-heading-margin: 0 0 0.5625rem; $gcds-alert-content-heading-mobile-margin: 0 0 0.5625rem; @@ -402,15 +393,6 @@ $gcds-footer-link-focus-radius: 0.1875rem; $gcds-footer-link-focus-box-shadow: 0 0 0 0.125rem #ffffff; $gcds-footer-link-focus-outline-offset: 0.125rem; $gcds-footer-link-focus-outline: 0.1875rem solid #0535d2; -<<<<<<< HEAD:build/web/scss/.scss -======= -$gcds-grid-container-xs: 20rem; -$gcds-grid-container-sm: 30rem; -$gcds-grid-container-md: 48rem; -$gcds-grid-container-lg: 62rem; -$gcds-grid-container-xl: 71.25rem; -$gcds-grid-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-grid-gap-0: 0; $gcds-grid-gap-50: 0.1875rem; $gcds-grid-gap-100: 0.375rem; @@ -508,12 +490,20 @@ $gcds-lang-toggle-font: 400 1.25rem/120% "Noto Sans", sans-serif; $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; @@ -526,6 +516,7 @@ $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; @@ -545,6 +536,7 @@ $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; @@ -573,15 +565,6 @@ $gcds-pagination-simple-label-font-weight: 400; $gcds-pagination-simple-listitem-margin: 0.375rem 0.375rem 0.75rem; $gcds-pagination-simple-listitem-text-margin: 0 0 0.1875rem; $gcds-pagination-simple-padding: 0.75rem 0.5625rem; -<<<<<<< HEAD:build/web/scss/.scss -======= -$gcds-phase-banner-container-xs: 20rem; -$gcds-phase-banner-container-sm: 30rem; -$gcds-phase-banner-container-md: 48rem; -$gcds-phase-banner-container-lg: 62rem; -$gcds-phase-banner-container-xl: 71.25rem; -$gcds-phase-banner-container-full: 100%; ->>>>>>> a202957 (change container xl to 71.25rem (1140px) to be aligned with canada.ca, change lg to 62rem (992px) to create more equal spacing between xl-lg and lg-md):build/web/_variables.scss $gcds-phase-banner-details-cta-margin: 0 0 0 0.9375rem; $gcds-phase-banner-font: 400 1.1111111111111112rem/135% "Noto Sans", sans-serif; $gcds-phase-banner-icon-margin: 1.125rem; diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss index cbc5f8e2..53498fba 100644 --- a/build/web/scss/components.scss +++ b/build/web/scss/components.scss @@ -248,7 +248,7 @@ $gcds-file-uploader-focus-button-background: #0535d2; $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; @@ -305,7 +305,7 @@ $gcds-header-brand-margin: 1.125rem 0 0; $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; @@ -379,6 +379,62 @@ $gcds-lang-toggle-font: 400 1.25rem/120% "Noto Sans", sans-serif; $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; @@ -440,6 +496,10 @@ $gcds-select-margin: 0 0 1.5rem; $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; @@ -448,20 +508,6 @@ $gcds-signature-signature-height: 1.6875rem; $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; @@ -478,12 +524,14 @@ $gcds-textarea-margin: 0 0 1.5rem; $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; diff --git a/build/web/scss/components/footer.scss b/build/web/scss/components/footer.scss index 64e74bd6..71ab6bb6 100644 --- a/build/web/scss/components/footer.scss +++ b/build/web/scss/components/footer.scss @@ -1,9 +1,9 @@ // Do not edit directly -// Generated on Mon, 19 Jun 2023 20:28:18 GMT +// Generated on Tue, 27 Jun 2023 23:49:40 GMT $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; diff --git a/build/web/scss/components/header.scss b/build/web/scss/components/header.scss index 81d9704f..4a0304b9 100644 --- a/build/web/scss/components/header.scss +++ b/build/web/scss/components/header.scss @@ -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:40 GMT $gcds-header-brand-border-color: #26374a; $gcds-header-brand-border-width: 0.1875rem; @@ -9,6 +9,6 @@ $gcds-header-brand-margin: 1.125rem 0 0; $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; diff --git a/build/web/scss/components/nav-group.scss b/build/web/scss/components/nav-group.scss index 886250e1..aa52556a 100644 --- a/build/web/scss/components/nav-group.scss +++ b/build/web/scss/components/nav-group.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 23:33:37 GMT +// Generated on Tue, 27 Jun 2023 23:49:40 GMT $gcds-nav-group-mobile-background: #ffffff; $gcds-nav-group-mobile-list-margin: 0.9375rem 0 0; diff --git a/build/web/scss/components/nav-link.scss b/build/web/scss/components/nav-link.scss index 63696bc0..1806e308 100644 --- a/build/web/scss/components/nav-link.scss +++ b/build/web/scss/components/nav-link.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 23:17:02 GMT +// Generated on Tue, 27 Jun 2023 23:49:40 GMT $gcds-nav-link-active-border-color: #33465c; $gcds-nav-link-active-font-weight: 700; diff --git a/build/web/scss/components/side-nav.scss b/build/web/scss/components/side-nav.scss index 7a6ef908..1d16d2cb 100644 --- a/build/web/scss/components/side-nav.scss +++ b/build/web/scss/components/side-nav.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 23:17:02 GMT +// Generated on Tue, 27 Jun 2023 23:49:40 GMT $gcds-side-nav-heading-font: 700 1.58203125rem/126.41975308641975% "Lato", sans-serif; $gcds-side-nav-heading-margin: 0.5625rem; diff --git a/build/web/scss/components/top-nav.scss b/build/web/scss/components/top-nav.scss index 13fdb967..5e0789c6 100644 --- a/build/web/scss/components/top-nav.scss +++ b/build/web/scss/components/top-nav.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Tue, 27 Jun 2023 23:17:02 GMT +// Generated on Tue, 27 Jun 2023 23:49:41 GMT $gcds-top-nav-background: #f1f2f3; $gcds-top-nav-max-width: 71.25rem; diff --git a/build/web/scss/components/verify-banner.scss b/build/web/scss/components/verify-banner.scss index 12bec26f..ab316159 100644 --- a/build/web/scss/components/verify-banner.scss +++ b/build/web/scss/components/verify-banner.scss @@ -1,13 +1,13 @@ // Do not edit directly -// Generated on Mon, 19 Jun 2023 20:28:18 GMT +// Generated on Tue, 27 Jun 2023 23:49:41 GMT $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; diff --git a/build/web/scss/global.scss b/build/web/scss/global.scss index ca0610cd..c22e59b4 100644 --- a/build/web/scss/global.scss +++ b/build/web/scss/global.scss @@ -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 $gcds-border-radius-sm: 0.1875rem; // Global border: radius sm $gcds-border-radius-md: 0.375rem; // Global border: radius md @@ -30,8 +30,8 @@ $gcds-text-secondary: #43474e; // Global color: text secondary $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-outline-width: 0.1875rem; // Global outline: width $gcds-spacing-0: 0; diff --git a/build/web/scss/global/container.scss b/build/web/scss/global/container.scss index 4064f10a..0540881a 100644 --- a/build/web/scss/global/container.scss +++ b/build/web/scss/global/container.scss @@ -1,10 +1,10 @@ // Do not edit directly -// Generated on Mon, 19 Jun 2023 20:28:18 GMT +// Generated on Tue, 27 Jun 2023 23:49:41 GMT $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%; diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss index 537944bd..2f92d4de 100644 --- a/build/web/scss/tokens.scss +++ b/build/web/scss/tokens.scss @@ -55,8 +55,8 @@ $gcds-text-secondary: #43474e; // Global color: text secondary $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; @@ -359,7 +359,7 @@ $gcds-file-uploader-focus-button-background: #0535d2; $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; @@ -416,7 +416,7 @@ $gcds-header-brand-margin: 1.125rem 0 0; $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; @@ -490,6 +490,62 @@ $gcds-lang-toggle-font: 400 1.25rem/120% "Noto Sans", sans-serif; $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; @@ -551,6 +607,10 @@ $gcds-select-margin: 0 0 1.5rem; $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; @@ -559,20 +619,6 @@ $gcds-signature-signature-height: 1.6875rem; $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; @@ -589,12 +635,14 @@ $gcds-textarea-margin: 0 0 1.5rem; $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; From cba85eabb36cd2822e83f6c85a52fb80df774baa Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Tue, 27 Jun 2023 17:06:25 -0700 Subject: [PATCH 13/13] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 94ce05da..3b92b976 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cdssnc/gcds-tokens", - "version": "1.3.3", + "version": "1.4.0", "author": "Government of Canada | Gouvernement du Canada", "description": "GC Design System Tokens", "homepage": "https://design-system.alpha.canada.ca/",