Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Support light mode in nav #2522

Merged
merged 8 commits into from
Jul 26, 2024
Merged

refactor: Support light mode in nav #2522

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
698a2ea
refactor: Changes for common components
EnMod Jul 23, 2024
cca82cf
refactor: Changes for product pages
EnMod Jul 23, 2024
2f0f743
refactor: Changes for homepage
EnMod Jul 23, 2024
bbd45d6
refactor: Changes for command bar
EnMod Jul 23, 2024
eaf25cf
chore: Remove unneeded comments
EnMod Jul 24, 2024
a3c1de5
chore: More command bar activator fixes
EnMod Jul 24, 2024
8570e66
chore: Fixes for mobile menu button
EnMod Jul 24, 2024
daa09b3
Merge branch 'main' into refactor/light-mode-nav
EnMod Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/components/command-bar/components/activator/command-bar-activator.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 7 additions & 0 deletions src/components/command-bar/components/dialog/command-bar-dialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
28 changes: 4 additions & 24 deletions src/components/navigation-header/components/dropdown-menu/dropdown-menu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,52 +30,32 @@

&[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 {
margin-right: 4px;
}

.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 {
Expand Down
4 changes: 4 additions & 0 deletions src/components/navigation-header/components/home-page-content/home-page-content.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,9 @@
@media (--dev-dot-tablet-up) {
height: 24px;
}

& path {
fill: var(--token-color-foreground-strong);
}
}
}
12 changes: 2 additions & 10 deletions src/components/navigation-header/components/primary-nav-link/primary-nav-link.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,17 @@
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);
padding-right: var(--header-menu-item-padding-left-right);
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 {
Expand Down
5 changes: 5 additions & 0 deletions ...duct-page-content/components/product-icon-text-lockup/product-icon-text-lockup.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 1 addition & 5 deletions ...ponents/navigation-header/components/product-page-content/product-page-content.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
28 changes: 8 additions & 20 deletions src/components/navigation-header/navigation-header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -33,10 +33,6 @@
padding-bottom: 14px;
padding-top: 14px;
}

@nest html[data-theme='dark'] & {
background-color: var(--token-color-surface-faint);
}
}

.leftSide {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}
} */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to comment this code out?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I was testing whether we needed that code, and left that in before review 😅 I'll double-check what's needed from it and remove in the next commit if I can (I should be able to) 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nandereck Removed the comments as of this commit (they were safe to remove):
eaf25cf

}
Loading