diff --git a/modules/banner/element-web/src/Banner.tsx b/modules/banner/element-web/src/Banner.tsx index 310f584312..27e9fae5b9 100644 --- a/modules/banner/element-web/src/Banner.tsx +++ b/modules/banner/element-web/src/Banner.tsx @@ -19,7 +19,7 @@ import { theme } from "./theme.ts"; const Root = styled.nav` height: ${({ theme }): string => theme.bannerHeight}; background-color: ${({ theme }): string => theme.bannerBackgroundColor}; - border-bottom: "1px solid var(--cpd-color-bg-subtle-primary)"; + border-bottom: "var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary)"; display: flex; gap: var(--cpd-space-3x); `; diff --git a/modules/banner/element-web/src/Menu.tsx b/modules/banner/element-web/src/Menu.tsx index e77dfaf67b..673080a70b 100644 --- a/modules/banner/element-web/src/Menu.tsx +++ b/modules/banner/element-web/src/Menu.tsx @@ -32,7 +32,7 @@ const SidebarHeading = styled.div` display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; // TODO check + margin-bottom: var(--cpd-space-5x); // TODO check `; const Trigger = styled.button` @@ -45,10 +45,15 @@ const Trigger = styled.button` width: ${({ theme }): string => theme.triggerWidth}; &:hover, - &:focus, - &[data-expanded="true"] { + &:focus { background-color: ${({ theme }): string => theme.triggerBackgroundColorHover}; - color: ${({ theme }): string => theme.triggerColorHover}; + color: ${({ theme }): string => theme.triggerColorContrast}; + } + + &:active, + &[data-expanded="true"] { + background-color: ${({ theme }): string => theme.triggerBackgroundColorPressed}; + color: ${({ theme }): string => theme.triggerColorContrast}; } svg { @@ -73,41 +78,50 @@ const CloseButton = styled.button` &:focus { background-color: ${({ theme }): string => theme.menuButtonBackgroundColorHover}; } + + &:active { + background-color: ${({ theme }): string => theme.menuButtonBackgroundColorPressed}; + } `; const CategoryHeading = styled.h2` font-weight: 700; font-size: 12px; - color: #203257; // TODO font - margin-top: 16px; - margin-bottom: 8px; + color: ${({ theme }): string => theme.subheadingColor}; + margin-top: var(--cpd-space-4x); + margin-bottom: var(--cpd-space-2x); `; const LinkButton = styled.a` - font-size: 14px; // TODO font + font-size: 14px; color: var(--cpd-color-text-action-primary); - font-weight: 500; + font-weight: var(--cpd-font-weight-medium); display: flex; border-radius: 8px; - padding: 8px; + padding: var(--cpd-space-2x); align-items: center; &:link { - color: var(--cpd-color-text-action-primary); // TODO + color: var(--cpd-color-text-action-primary); } - &:hover { - background-color: #eeeff2; // TODO + &:hover, + &:focus { + background-color: ${({ theme }): string => theme.menuButtonBackgroundColorHover}; + } + + &:active { + background-color: ${({ theme }): string => theme.menuButtonBackgroundColorPressed}; } `; const LinkLogo = styled.img` height: 24px; width: 24px; - border-radius: 3px; // TODO - border: 1px solid #eeeff2; // TODO - margin-right: 8px; + border-radius: 4px; + border: ${({ theme }): string => `var(--cpd-border-width-1) solid ${theme.menuButtonBackgroundColorPressed}`}; background-color: ${({ theme }): string => theme.menuBackgroundColor}; + margin-right: var(--cpd-space-2x); `; const CentredContainer = styled.div` @@ -116,7 +130,7 @@ const CentredContainer = styled.div` width: 100%; align-items: center; text-align: center; - font-weight: 600; + font-weight: var(--cpd-font-weight-semibold); svg { margin: 0 auto; diff --git a/modules/banner/element-web/src/theme.ts b/modules/banner/element-web/src/theme.ts index f6a6c43f30..bdc1285727 100644 --- a/modules/banner/element-web/src/theme.ts +++ b/modules/banner/element-web/src/theme.ts @@ -7,17 +7,19 @@ Please see LICENSE files in the repository root for full details. const theme = { textColor: "var(--cpd-color-text-primary)", + subheadingColor: "var(--cpd-color-text-secondary)", // TODO bannerBackgroundColor: "var(--cpd-color-bg-canvas-default)", bannerHeight: "60px", triggerWidth: "68px", - triggerBackgroundColor: "var(--cpd-color-bg-subtle-primary)", - // triggerBackgroundColorHover: "var(--cpd-color-bg-accent-hovered)", - triggerBackgroundColorHover: "var(--cpd-color-text-action-accent)", - triggerColor: "var(--cpd-color-text-primary)", - triggerColorHover: "var(--cpd-color-bg-canvas-default)", + triggerBackgroundColor: "var(--cpd-color-bg-subtle-secondary)", + triggerBackgroundColorHover: "var(--cpd-color-bg-accent-hovered)", + triggerBackgroundColorPressed: "var(--cpd-color-bg-accent-pressed)", + triggerColor: "var(--cpd-color-icon-primary)", + triggerColorContrast: "var(--cpd-color-icon-on-solid-primary)", menuWidth: "320px", menuBackgroundColor: "var(--cpd-color-bg-canvas-default)", - menuButtonBackgroundColorHover: "var(--cpd-color-bg-subtle-primary)", + menuButtonBackgroundColorHover: "var(--cpd-color-bg-action-secondary-hovered)", + menuButtonBackgroundColorPressed: "var(--cpd-color-bg-action-secondary-pressed)", }; type Theme = typeof theme; diff --git a/modules/banner/element-web/tests/snapshots/banner.spec.ts/static-menu-linux.png b/modules/banner/element-web/tests/snapshots/banner.spec.ts/static-menu-linux.png index 8752e393a5..9970b9ebde 100644 Binary files a/modules/banner/element-web/tests/snapshots/banner.spec.ts/static-menu-linux.png and b/modules/banner/element-web/tests/snapshots/banner.spec.ts/static-menu-linux.png differ diff --git a/modules/banner/element-web/tests/snapshots/banner.spec.ts/univention-menu-linux.png b/modules/banner/element-web/tests/snapshots/banner.spec.ts/univention-menu-linux.png index f999f1d666..c28ec77d31 100644 Binary files a/modules/banner/element-web/tests/snapshots/banner.spec.ts/univention-menu-linux.png and b/modules/banner/element-web/tests/snapshots/banner.spec.ts/univention-menu-linux.png differ