diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts index 48294354ef2..cf6f8b816a4 100644 --- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts +++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts @@ -45,6 +45,12 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, { '& .akamai-logo-name': { transition: theme.transitions.create(['opacity']), }, + 'path, polygon': { + fill: theme.tokens.color.Neutrals.White, + [theme.breakpoints.down('md')]: { + fill: theme.tokens.sideNavigation.Icon, + }, + }, // give the svg a transition so it smoothly resizes transition: 'width .1s linear', })); diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 87b0421a06e..cd74582fdcc 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -9,6 +9,7 @@ import { Content, Dropdown, Elevation, + GlobalHeader, Interaction, NotificationToast, Select, @@ -228,8 +229,8 @@ export const darkTheme: ThemeOptions = { MuiAppBar: { styleOverrides: { root: { - backgroundColor: tempReplacementforColorNeutralsBlack, - color: primaryColors.text, + backgroundColor: GlobalHeader.Background, + color: GlobalHeader.Text.Default, }, }, }, diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts index b2feef72fb3..05b1973a4a0 100644 --- a/packages/ui/src/foundations/themes/index.ts +++ b/packages/ui/src/foundations/themes/index.ts @@ -30,6 +30,7 @@ import type { ElevationTypes as ElevationTypesLight, FontTypes, GlobalFooterTypes, + GlobalHeaderTypes, InteractionTypes as InteractionTypesLight, RadiusTypes, SideNavigationTypes as SideNavigationTypesLight, @@ -124,6 +125,7 @@ declare module '@mui/material/styles/createTheme' { color: ColorTypes; font: FontTypes; footer: GlobalFooterTypes; + header: GlobalHeaderTypes; spacing: SpacingTypes; // ---------------------------------------- accent: AccentTypes; @@ -164,6 +166,7 @@ declare module '@mui/material/styles/createTheme' { color?: ColorTypes; font?: FontTypes; footer?: GlobalFooterTypes; + header?: GlobalHeaderTypes; spacing?: SpacingTypes; // ---------------------------------------- accent?: AccentTypes; diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 52665b3816f..05cb672e172 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -12,6 +12,7 @@ import { Elevation, Font, GlobalFooter, + GlobalHeader, Interaction, NotificationToast, Radius, @@ -333,8 +334,8 @@ export const lightTheme: ThemeOptions = { MuiAppBar: { styleOverrides: { root: { - backgroundColor: bg.bgPaper, - color: primaryColors.text, + backgroundColor: GlobalHeader.Background, + color: GlobalHeader.Text.Default, position: 'relative', }, }, @@ -1454,7 +1455,7 @@ export const lightTheme: ThemeOptions = { '&.Mui-active': { color: Table.HeaderFilled.Text, }, - ':hover': { + ':hover, :focus': { ...MuiTableHeadSvgStyles, color: Color.Brand[60], cursor: 'pointer', @@ -1760,6 +1761,7 @@ export const lightTheme: ThemeOptions = { elevation: Elevation, font: Font, footer: GlobalFooter, + header: GlobalHeader, interaction: Interaction, radius: Radius, sideNavigation: SideNavigation,