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..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,20 +47,12 @@ } .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 { - 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; 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/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); + } } } 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/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 { diff --git a/src/components/navigation-header/navigation-header.module.css b/src/components/navigation-header/navigation-header.module.css index e6c51659d7..59a356336b 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 { @@ -58,26 +54,18 @@ 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; &: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,10 @@ /* 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); - } - - @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); - } + border-color: var(--token-color-border-strong); } }