Skip to content
This repository was archived by the owner on Mar 5, 2025. It is now read-only.

Commit c63e67b

Browse files
authored
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]>
1 parent 91a5b1f commit c63e67b

File tree

6 files changed

+20
-5
lines changed

6 files changed

+20
-5
lines changed

.changeset/small-beans-fry.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@nordeck/element-web-opendesk-module': minor
3+
---
4+
5+
Launcher icon color when expanded is now configurable

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

+8-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ The module provides the following optional configuration options:
3939
- `portal_url` - The URL of the portal.
4040
- `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.
4141

42+
For the navigation bar and launcher, the following variables are relevant:
43+
44+
- `--cpd-color-text-action-accent` sets the background of the launcher icon when expanded and the top border of the menu
45+
- `--cpd-color-icon-on-solid-primary` sets the color of the launcher icon when expanded
46+
- `
47+
4248
Example configuration:
4349
4450
```json
@@ -54,7 +60,8 @@ Example configuration:
5460

5561
// ... add more optional configurations
5662
"custom_css_variables": {
57-
"--cpd-color-text-action-accent": "purple"
63+
"--cpd-color-text-action-accent": "#dadada",
64+
"--cpd-color-icon-on-solid-primary": "#aa0000"
5865
}
5966
}
6067
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const Root = styled.button`
2828
ariaExpanded ? theme.compound.color.textActionAccent : 'transparent'};
2929
border: none;
3030
color: ${({ 'aria-expanded': ariaExpanded, theme }) =>
31-
ariaExpanded ? theme.navbar.color : theme.compound.color.textPrimary};
31+
ariaExpanded
32+
? theme.compound.color.iconOnSolidPrimary
33+
: theme.compound.color.textPrimary};
3234
cursor: pointer;
3335
display: flex;
3436
padding: 0 22px;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ declare module 'styled-components' {
2323
bgCanvasDefault: string;
2424
textActionAccent: string;
2525
textPrimary: string;
26+
iconOnSolidPrimary: string;
2627
};
2728
font: {
2829
bodyMdSemibold: string;
@@ -31,7 +32,6 @@ declare module 'styled-components' {
3132
navbar: {
3233
border: string;
3334
boxShadow: string;
34-
color: string;
3535
height: string;
3636
hoverBackgroundColor: string;
3737
offsetHeight: string;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { DefaultTheme } from 'styled-components';
1919
const bgCanvasDefault = 'var(--cpd-color-bg-canvas-default)';
2020
const textActionAccent = 'var(--cpd-color-text-action-accent)';
2121
const textPrimary = 'var(--cpd-color-text-primary)';
22+
const iconOnSolidPrimary = 'var(--cpd-color-icon-on-solid-primary)';
2223

2324
const bodyMdSemibold = 'var(--cpd-font-body-md-semibold)';
2425

@@ -28,6 +29,7 @@ const theme: DefaultTheme = {
2829
bgCanvasDefault,
2930
textActionAccent,
3031
textPrimary,
32+
iconOnSolidPrimary,
3133
},
3234
font: {
3335
bodyMdSemibold,
@@ -36,7 +38,6 @@ const theme: DefaultTheme = {
3638
navbar: {
3739
border: '1px solid rgba(27, 29, 34, 0.1)',
3840
boxShadow: '4px 4px 12px 0 rgba(118, 131, 156, 0.6)',
39-
color: '#fff',
4041
height: '63px',
4142
hoverBackgroundColor: '#f5f8fa',
4243
offsetHeight: '64px',

packages/synapse-guest-module/setup.cfg

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ dev =
2929
twisted
3030
aiounittest
3131
# for type checking
32-
mypy == 0.931
32+
mypy == 1.10.0
3333
pydantic == 2.4.2
3434
# for linting
3535
black == 22.3.0

0 commit comments

Comments
 (0)