Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add edgeLabelTextColor that take the color from secondaryTextColor #5057

Closed
wants to merge 4 commits into from
Closed

add edgeLabelTextColor that take the color from secondaryTextColor #5057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a33b5e
add edgeLabelTextColor that take the color from secondaryTextColor
omer-priel Nov 21, 2023
e8d97e0
add edgeLabelTextColor to docs
omer-priel Nov 21, 2023
350f224
Merge branch 'develop' into bug/5052_flowchart-labels-text-color
sidharthv96 Jan 29, 2024
989bb89
Merge branch 'develop' into bug/5052_flowchart-labels-text-color
sidharthv96 Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/config/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
| defaultLinkColor | lineColor | Link Color |
| titleColor | tertiaryTextColor | Title Color |
| edgeLabelBackground | calculated from secondaryColor | |
| edgeLabelTextColor | secondaryTextColor | |
| nodeTextColor | primaryTextColor | Color for text inside Nodes |

## Sequence Diagram Variables
Expand Down
3 changes: 3 additions & 0 deletions packages/mermaid/src/diagrams/flowchart/elk/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export interface FlowChartStyleOptions {
clusterBkg: string;
clusterBorder: string;
edgeLabelBackground: string;
edgeLabelTextColor: string;
fontFamily: string;
lineColor: string;
mainBkg: string;
Expand Down Expand Up @@ -85,6 +86,8 @@ const getStyles = (options: FlowChartStyleOptions) =>
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
}
fill: ${options.edgeLabelTextColor || options.textColor};
color: ${options.edgeLabelTextColor || options.textColor};
text-align: center;
}

Expand Down
5 changes: 4 additions & 1 deletion packages/mermaid/src/diagrams/flowchart/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface FlowChartStyleOptions {
clusterBkg: string;
clusterBorder: string;
edgeLabelBackground: string;
edgeLabelTextColor: string;
fontFamily: string;
lineColor: string;
mainBkg: string;
Expand Down Expand Up @@ -94,13 +95,15 @@ const getStyles = (options: FlowChartStyleOptions) =>
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
}
fill: ${options.edgeLabelTextColor || options.textColor};
color: ${options.edgeLabelTextColor || options.textColor};
text-align: center;
}

/* For html labels only */
.labelBkg {
background-color: ${fade(options.edgeLabelBackground, 0.5)};
// background-color:
// background-color:
}

.cluster rect {
Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/src/docs/config/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
| defaultLinkColor | lineColor | Link Color |
| titleColor | tertiaryTextColor | Title Color |
| edgeLabelBackground | calculated from secondaryColor | |
| edgeLabelTextColor | secondaryTextColor | |
| nodeTextColor | primaryTextColor | Color for text inside Nodes |

## Sequence Diagram Variables
Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/src/themes/theme-base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
this.edgeLabelBackground =
this.edgeLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.edgeLabelTextColor = this.secondaryTextColor;

Check warning on line 66 in packages/mermaid/src/themes/theme-base.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-base.js#L66 

Added line #L66 was not covered by tests
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
/* Sequence Diagram variables */

Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-dark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
this.defaultLinkColor = 'calculated';
this.titleColor = '#F9FFFE';
this.edgeLabelBackground = 'calculated';
this.edgeLabelTextColor = 'calculated';

Check warning on line 42 in packages/mermaid/src/themes/theme-dark.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-dark.js#L42 

Added line #L42 was not covered by tests

/* Sequence Diagram variables */

Expand Down Expand Up @@ -103,6 +104,7 @@
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.edgeLabelBackground = lighten(this.labelBackground, 25);
this.edgeLabelTextColor = this.secondaryTextColor;

Check warning on line 107 in packages/mermaid/src/themes/theme-dark.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-dark.js#L107 

Added line #L107 was not covered by tests

/* Sequence Diagram variables */

Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class Theme {
this.defaultLinkColor = 'calculated';
this.titleColor = 'calculated';
this.edgeLabelBackground = 'calculated';
this.edgeLabelTextColor = 'calculated';

/* Sequence Diagram variables */

Expand Down Expand Up @@ -173,6 +174,7 @@ class Theme {
this.defaultLinkColor = this.lineColor;
this.titleColor = this.textColor;
this.edgeLabelBackground = this.labelBackground;
this.edgeLabelTextColor = this.secondaryTextColor;

/* Sequence Diagram variables */

Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-forest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
this.defaultLinkColor = 'calculated';
this.titleColor = '#333';
this.edgeLabelBackground = '#e8e8e8';
this.edgeLabelTextColor = 'calculated';

Check warning on line 43 in packages/mermaid/src/themes/theme-forest.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-forest.js#L43 

Added line #L43 was not covered by tests

/* Sequence Diagram variables */

Expand Down Expand Up @@ -152,6 +153,7 @@
this.clusterBkg = this.secondBkg;
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.edgeLabelTextColor = this.secondaryTextColor;

Check warning on line 156 in packages/mermaid/src/themes/theme-forest.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-forest.js#L156 

Added line #L156 was not covered by tests

/* Gantt chart variables */

Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-neutral.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
this.defaultLinkColor = 'calculated';
this.titleColor = 'calculated';
this.edgeLabelBackground = 'white';
this.edgeLabelTextColor = 'calculated';

Check warning on line 55 in packages/mermaid/src/themes/theme-neutral.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-neutral.js#L55 

Added line #L55 was not covered by tests

/* Sequence Diagram variables */

Expand Down Expand Up @@ -176,6 +177,7 @@
this.clusterBorder = this.border2;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.text;
this.edgeLabelTextColor = this.secondaryTextColor;

Check warning on line 180 in packages/mermaid/src/themes/theme-neutral.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/themes/theme-neutral.js#L180 

Added line #L180 was not covered by tests

/* Gantt chart variables */

Expand Down
Loading