Iterate

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);
 `;

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,
+    &:focus {
-    &[data-expanded="true"] {
         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
+    color: ${({ theme }): string => theme.subheadingColor};
-    margin-top: 16px;
+    margin-top: var(--cpd-space-4x);
-    margin-bottom: 8px;
+    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 {
+    &:hover,
-        background-color: #eeeff2; // TODO
+    &: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-radius: 4px;
-    border: 1px solid #eeeff2; // TODO
+    border: ${({ theme }): string => `var(--cpd-border-width-1) solid ${theme.menuButtonBackgroundColorPressed}`};
-    margin-right: 8px;
     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;

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)",
+    triggerBackgroundColor: "var(--cpd-color-bg-subtle-secondary)",
-    // triggerBackgroundColorHover: "var(--cpd-color-bg-accent-hovered)",
+    triggerBackgroundColorHover: "var(--cpd-color-bg-accent-hovered)",
-    triggerBackgroundColorHover: "var(--cpd-color-text-action-accent)",
+    triggerBackgroundColorPressed: "var(--cpd-color-bg-accent-pressed)",
-    triggerColor: "var(--cpd-color-text-primary)",
+    triggerColor: "var(--cpd-color-icon-primary)",
-    triggerColorHover: "var(--cpd-color-bg-canvas-default)",
+    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;