Add configurable color option to expanded launcher icon (#141)

* Add configurable color option to expanded launcher icon
* Update mypy version

Signed-off-by: Milton Moura <[email protected]>

Author: mgcm

.changeset/small-beans-fry.md

@@ -0,0 +1,5 @@
+---
+'@nordeck/element-web-opendesk-module': minor
+---
+
+Launcher icon color when expanded is now configurable

packages/element-web-opendesk-module/README.md

@@ -39,6 +39,12 @@ The module provides the following optional configuration options:
   - `portal_url` - The URL of the portal.
 - `custom_css_variables` - a configuration of `--cpd-color-*` css variables to override selected colors in the Element theme. The [Element Compound](https://compound.element.io/?path=/docs/tokens-semantic-colors--docs) documentation has a list of all available options.
 
+For the navigation bar and launcher, the following variables are relevant:
+
+- `--cpd-color-text-action-accent` sets the background of the launcher icon when expanded and the top border of the menu
+- `--cpd-color-icon-on-solid-primary` sets the color of the launcher icon when expanded
+- `
+
 Example configuration:
 
 ```json
@@ -54,7 +60,8 @@ Example configuration:
 
       // ... add more optional configurations
       "custom_css_variables": {
-        "--cpd-color-text-action-accent": "purple"
+        "--cpd-color-text-action-accent": "#dadada",
+        "--cpd-color-icon-on-solid-primary": "#aa0000"
       }
     }
   }

packages/element-web-opendesk-module/src/components/Navbar/Launcher.tsx

@@ -28,7 +28,9 @@ const Root = styled.button`
     ariaExpanded ? theme.compound.color.textActionAccent : 'transparent'};
   border: none;
   color: ${({ 'aria-expanded': ariaExpanded, theme }) =>
-    ariaExpanded ? theme.navbar.color : theme.compound.color.textPrimary};
+    ariaExpanded
+      ? theme.compound.color.iconOnSolidPrimary
+      : theme.compound.color.textPrimary};
   cursor: pointer;
   display: flex;
   padding: 0 22px;

packages/element-web-opendesk-module/src/global.d.ts

@@ -23,6 +23,7 @@ declare module 'styled-components' {
         bgCanvasDefault: string;
         textActionAccent: string;
         textPrimary: string;
+        iconOnSolidPrimary: string;
       };
       font: {
         bodyMdSemibold: string;
@@ -31,7 +32,6 @@ declare module 'styled-components' {
     navbar: {
       border: string;
       boxShadow: string;
-      color: string;
       height: string;
       hoverBackgroundColor: string;
       offsetHeight: string;

packages/element-web-opendesk-module/src/theme.ts

@@ -19,6 +19,7 @@ import { DefaultTheme } from 'styled-components';
 const bgCanvasDefault = 'var(--cpd-color-bg-canvas-default)';
 const textActionAccent = 'var(--cpd-color-text-action-accent)';
 const textPrimary = 'var(--cpd-color-text-primary)';
+const iconOnSolidPrimary = 'var(--cpd-color-icon-on-solid-primary)';
 
 const bodyMdSemibold = 'var(--cpd-font-body-md-semibold)';
 
@@ -28,6 +29,7 @@ const theme: DefaultTheme = {
       bgCanvasDefault,
       textActionAccent,
       textPrimary,
+      iconOnSolidPrimary,
     },
     font: {
       bodyMdSemibold,
@@ -36,7 +38,6 @@ const theme: DefaultTheme = {
   navbar: {
     border: '1px solid rgba(27, 29, 34, 0.1)',
     boxShadow: '4px 4px 12px 0 rgba(118, 131, 156, 0.6)',
-    color: '#fff',
     height: '63px',
     hoverBackgroundColor: '#f5f8fa',
     offsetHeight: '64px',

packages/synapse-guest-module/setup.cfg

@@ -29,7 +29,7 @@ dev =
   twisted
   aiounittest
   # for type checking
-  mypy == 0.931
+  mypy == 1.10.0
   pydantic == 2.4.2
   # for linting
   black == 22.3.0