From 698a2ea50603e55fe865e7017e5b9686bf24477e Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Tue, 23 Jul 2024 17:41:44 -0400 Subject: [PATCH 1/7] refactor: Changes for common components --- .../dropdown-menu/dropdown-menu.module.css | 28 +++---------------- .../primary-nav-link.module.css | 12 ++------ .../navigation-header.module.css | 28 ++++++------------- 3 files changed, 14 insertions(+), 54 deletions(-) diff --git a/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css b/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css index d30dc2fd86..1422e46f24 100644 --- a/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css +++ b/src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css @@ -30,35 +30,19 @@ &[aria-expanded='true'] { & .activatorText { - color: var(--token-color-surface-primary); + color: var(--token-color-foreground-primary); } & .activatorTrailingIcon { - color: var(--token-color-surface-primary); + color: var(--token-color-foreground-primary); transform: rotate(-180deg); } } - - @nest html[data-theme='dark'] & { - &[aria-expanded='true'] { - & .activatorText { - color: var(--token-color-foreground-strong); - } - - & .activatorTrailingIcon { - color: var(--token-color-foreground-strong); - } - } - } } .activatorText { - color: var(--token-color-surface-strong); + color: var(--token-color-foreground-primary); margin-right: 6px; - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-primary); - } } .activatorLeadingIcon { @@ -66,16 +50,12 @@ } .activatorTrailingIcon { - color: var(--token-color-surface-strong); + color: var(--token-color-foreground-strong); /* Only enable animation if query is supported and value is no-preference */ @media (prefers-reduced-motion: no-preference) { transition: transform 0.2s ease-in-out; } - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-strong); - } } .dropdownContainer { diff --git a/src/components/navigation-header/components/primary-nav-link/primary-nav-link.module.css b/src/components/navigation-header/components/primary-nav-link/primary-nav-link.module.css index 617299b7a2..62df178b8e 100644 --- a/src/components/navigation-header/components/primary-nav-link/primary-nav-link.module.css +++ b/src/components/navigation-header/components/primary-nav-link/primary-nav-link.module.css @@ -11,7 +11,7 @@ align-items: center; gap: 6px; border-radius: 5px; - color: var(--token-color-surface-strong); + color: var(--token-color-foreground-primary); display: flex; padding-bottom: 8px; padding-left: var(--header-menu-item-padding-left-right); @@ -19,17 +19,9 @@ padding-top: 8px; &:hover { - color: var(--token-color-surface-primary); + color: var(--token-color-foreground-strong); cursor: pointer; } - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-primary); - - &:hover { - color: var(--token-color-foreground-strong); - } - } } .linkText { diff --git a/src/components/navigation-header/navigation-header.module.css b/src/components/navigation-header/navigation-header.module.css index e6c51659d7..d78b59e726 100644 --- a/src/components/navigation-header/navigation-header.module.css +++ b/src/components/navigation-header/navigation-header.module.css @@ -18,7 +18,7 @@ --header-padding-left-right: 24px; --header-menu-item-padding-left-right: 12px; - background-color: var(--token-color-palette-neutral-700); + background-color: var(--token-color-surface-faint); display: flex; padding-top: 0; padding-bottom: 0; @@ -33,10 +33,6 @@ padding-bottom: 14px; padding-top: 14px; } - - @nest html[data-theme='dark'] & { - background-color: var(--token-color-surface-faint); - } } .leftSide { @@ -64,20 +60,12 @@ padding: 5px; &:hover { - border: 1px solid var(--token-color-palette-neutral-200); + border: 1px solid var(--token-color-border-strong); } @media (--dev-dot-hide-mobile-menu) { display: none; } - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-strong); - - &:hover { - border: 1px solid var(--token-color-border-strong); - } - } } .authenticationControls { @@ -105,24 +93,24 @@ /* properties */ background-color: transparent; - color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); &:hover, &[aria-expanded='true'] { - border-color: var(--token-color-palette-neutral-200); + border-color: var(--token-color-border-strong); } - @nest html[data-theme='light'] & { + /* @nest html[data-theme='light'] & { &:active { background-color: var(--token-color-foreground-primary); } - } + } */ - @nest html[data-theme='dark'] & { + /* @nest html[data-theme='dark'] & { color: var(--token-color-foreground-strong); &:hover, &[aria-expanded='true'] { border-color: var(--token-color-border-strong); } - } + } */ } From cca82cfb29e44818e7ec320cbda88add6252d5f1 Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Tue, 23 Jul 2024 17:45:10 -0400 Subject: [PATCH 2/7] refactor: Changes for product pages --- .../product-icon-text-lockup.module.css | 5 +++++ .../product-page-content/product-page-content.module.css | 6 +----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/navigation-header/components/product-page-content/components/product-icon-text-lockup/product-icon-text-lockup.module.css b/src/components/navigation-header/components/product-page-content/components/product-icon-text-lockup/product-icon-text-lockup.module.css index 2406107e3c..b4b0f52f35 100644 --- a/src/components/navigation-header/components/product-page-content/components/product-icon-text-lockup/product-icon-text-lockup.module.css +++ b/src/components/navigation-header/components/product-page-content/components/product-icon-text-lockup/product-icon-text-lockup.module.css @@ -12,6 +12,11 @@ .text { composes: hds-typography-body-200 from global; font-weight: var(--token-typography-font-weight-medium); + color: var(--token-color-foreground-primary); + + &:hover { + color: var(--token-color-foreground-strong); + } } /* Note: rather than setting size here, we could create a separate diff --git a/src/components/navigation-header/components/product-page-content/product-page-content.module.css b/src/components/navigation-header/components/product-page-content/product-page-content.module.css index efbfddb6a4..960e2da89b 100644 --- a/src/components/navigation-header/components/product-page-content/product-page-content.module.css +++ b/src/components/navigation-header/components/product-page-content/product-page-content.module.css @@ -13,14 +13,10 @@ } .productsDropdownIcon { - color: var(--token-color-surface-primary); + color: var(--token-color-foreground-strong); display: block; height: 32px; width: 32px; - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-strong); - } } .productsDropdownButton { From 2f0f743d61cdedbf6ac1c7eca2c4170fcd519aea Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Tue, 23 Jul 2024 17:45:48 -0400 Subject: [PATCH 3/7] refactor: Changes for homepage --- .../components/home-page-content/home-page-content.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/navigation-header/components/home-page-content/home-page-content.module.css b/src/components/navigation-header/components/home-page-content/home-page-content.module.css index 76544efe5f..e466e2ac21 100644 --- a/src/components/navigation-header/components/home-page-content/home-page-content.module.css +++ b/src/components/navigation-header/components/home-page-content/home-page-content.module.css @@ -23,5 +23,9 @@ @media (--dev-dot-tablet-up) { height: 24px; } + + & path { + fill: var(--token-color-foreground-strong); + } } } From bbd45d6db0cae29acfa4e01952e384b0f68ec167 Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Tue, 23 Jul 2024 17:46:21 -0400 Subject: [PATCH 4/7] refactor: Changes for command bar --- .../components/activator/command-bar-activator.module.css | 6 +----- .../components/dialog/command-bar-dialog.module.css | 7 +++++++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/command-bar/components/activator/command-bar-activator.module.css b/src/components/command-bar/components/activator/command-bar-activator.module.css index 6c3bb36d8a..871d2e4b52 100644 --- a/src/components/command-bar/components/activator/command-bar-activator.module.css +++ b/src/components/command-bar/components/activator/command-bar-activator.module.css @@ -56,11 +56,7 @@ } .text { - color: var(--token-color-foreground-high-contrast); - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-strong); - } + color: var(--token-color-foreground-strong); } .right { diff --git a/src/components/command-bar/components/dialog/command-bar-dialog.module.css b/src/components/command-bar/components/dialog/command-bar-dialog.module.css index 23a5bd9bc8..657abcfbb3 100644 --- a/src/components/command-bar/components/dialog/command-bar-dialog.module.css +++ b/src/components/command-bar/components/dialog/command-bar-dialog.module.css @@ -127,6 +127,13 @@ gap: 4px; } +.badges { + align-items: center; + display: flex; + flex-shrink: 0; + gap: 4px; +} + .body { background-color: var(--token-color-surface-faint); flex-grow: 1; From eaf25cf09da0c17fd9e54f1113197fc7420b04aa Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Wed, 24 Jul 2024 12:15:44 -0400 Subject: [PATCH 5/7] chore: Remove unneeded comments --- .../navigation-header/navigation-header.module.css | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/navigation-header/navigation-header.module.css b/src/components/navigation-header/navigation-header.module.css index d78b59e726..e6eb42b689 100644 --- a/src/components/navigation-header/navigation-header.module.css +++ b/src/components/navigation-header/navigation-header.module.css @@ -99,18 +99,4 @@ &[aria-expanded='true'] { border-color: var(--token-color-border-strong); } - - /* @nest html[data-theme='light'] & { - &:active { - background-color: var(--token-color-foreground-primary); - } - } */ - - /* @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-strong); - - &:hover, &[aria-expanded='true'] { - border-color: var(--token-color-border-strong); - } - } */ } From a3c1de5aaeb5ef9a639a87603d61137aef0829d6 Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Wed, 24 Jul 2024 12:27:32 -0400 Subject: [PATCH 6/7] chore: More command bar activator fixes --- .../components/activator/command-bar-activator.module.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/command-bar/components/activator/command-bar-activator.module.css b/src/components/command-bar/components/activator/command-bar-activator.module.css index 871d2e4b52..1861ea45ae 100644 --- a/src/components/command-bar/components/activator/command-bar-activator.module.css +++ b/src/components/command-bar/components/activator/command-bar-activator.module.css @@ -26,7 +26,7 @@ padding: 10px; & .leadingIcon { - color: var(--token-color-palette-neutral-200); + color: var(--token-color-foreground-faint); } & .text { @@ -47,12 +47,8 @@ } .leadingIcon { - color: var(--token-color-palette-neutral-400); + color: var(--token-color-foreground-faint); display: flex; - - @nest html[data-theme='dark'] & { - color: var(--token-color-foreground-faint); - } } .text { From 8570e666dc098ba44b4a2dcc20f4edc65d1d8e90 Mon Sep 17 00:00:00 2001 From: Noel Quiles <3746694+EnMod@users.noreply.github.com> Date: Wed, 24 Jul 2024 12:27:52 -0400 Subject: [PATCH 7/7] chore: Fixes for mobile menu button --- src/components/navigation-header/navigation-header.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation-header/navigation-header.module.css b/src/components/navigation-header/navigation-header.module.css index e6eb42b689..59a356336b 100644 --- a/src/components/navigation-header/navigation-header.module.css +++ b/src/components/navigation-header/navigation-header.module.css @@ -54,7 +54,7 @@ background-color: transparent; border-radius: 5px; border: 1px solid transparent; - color: var(--token-color-foreground-high-contrast); + color: var(--token-color-foreground-strong); display: flex; justify-content: center; padding: 5px;