marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-20 20:54:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added theming support for gitgraph

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-03-17 20:07:27 +01:00
parent 9f7130a3e6
commit b78b371025
14 changed files with 456 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/diagrams/git/gitGraphRenderer.js
View File

@@ -358,7 +358,7 @@ const drawBranches = (svg, branches) => {
const branchLabel = g.insert('g').attr('class', 'branchLabel');
// Create inner g, label, this will be positioned now for centering the text
const label = branchLabel.insert('g').attr('class', 'label');
const label = branchLabel.insert('g').attr('class', 'label branch-label'+index);
label.node().appendChild(labelElement);
let bbox = labelElement.getBBox();
bkg.attr('class', 'branchLabelBkg label' + index)

59
src/diagrams/git/styles.js
View File

@@ -8,28 +8,25 @@ const getStyles = (options) =>
font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family);
}
${[0, 1, 2, 3, 4, 5, 6, 7]
.map(
(i) =>
`
.branch-label${i} { fill: ${options['gitBranchLabel' + i]}; }
.commit${i} { stroke: ${options['git' + i]}; fill: ${options['git' + i]}; }
.commit-highlight${i} { stroke: ${options['gitInv' + i]}; fill: ${options['gitInv' + i]}; }
.label${i} { fill: ${options['git' + i]}; }
.arrow${i} { stroke: ${options['git' + i]}; }
`
)
.join('\n')}
.branch {
stroke-width: 1;
stroke: black;
stroke-dasharray: 2;
}
.commit-labels { font-size: 10px; }
.commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
.commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
.commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
.commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
.commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
.commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
.commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
.commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
.commit-highlight0 { stroke: ${options.gitInv0}; fill: ${options.gitInv0}; }
.commit-highlight1 { stroke: ${options.gitInv1}; fill: ${options.gitInv1}; }
.commit-highlight2 { stroke: ${options.gitInv2}; fill: ${options.gitInv2}; }
.commit-highlight3 { stroke: ${options.gitInv3}; fill: ${options.gitInv3}; }
.commit-highlight4 { stroke: ${options.gitInv4}; fill: ${options.gitInv4}; }
.commit-highlight5 { stroke: ${options.gitInv5}; fill: ${options.gitInv5}; }
.commit-highlight6 { stroke: ${options.gitInv6}; fill: ${options.gitInv6}; }
.commit-highlight7 { stroke: ${options.gitInv7}; fill: ${options.gitInv7}; }
.commit-labels { font-size: 10px; fill: ${options.textColor};}
.commit-merge {
stroke: ${options.primaryColor};
@@ -47,35 +44,7 @@ const getStyles = (options) =>
fill: ${options.primaryColor};
}
// .branch0 { stroke: ${options.git0}; }
// .branch1 { stroke: ${options.git1}; }
// .branch2 { stroke: ${options.git2}; }
// .branch3 { stroke: ${options.git3}; }
// .branch4 { stroke: ${options.git4}; }
// .branch5 { stroke: ${options.git5}; }
// .branch6 { stroke: ${options.git6}; }
// .branch7 { stroke: ${options.git7}; }
.label0 { fill: ${options.git0}; }
.label1 { fill: ${options.git1}; }
.label2 { fill: ${options.git2}; }
.label3 { fill: ${options.git3}; }
.label4 { fill: ${options.git4}; }
.label5 { fill: ${options.git5}; }
.label6 { fill: ${options.git6}; }
.label7 { fill: ${options.git7}; }
// .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
.arrow { stroke-width: 8; stroke-linecap: round; fill: none}
.arrow0 { stroke: ${options.git0}; }
.arrow1 { stroke: ${options.git1}; }
.arrow2 { stroke: ${options.git2}; }
.arrow3 { stroke: ${options.git3}; }
.arrow4 { stroke: ${options.git4}; }
.arrow5 { stroke: ${options.git5}; }
.arrow6 { stroke: ${options.git6}; }
.arrow7 { stroke: ${options.git7}; }
#arrowhead { fill: #990099;}
.branchLabel { }
}
`;

12
src/themes/theme-base.js
View File

@@ -42,7 +42,7 @@ class Theme {
// The || is to make sure that if the variable has been defiend by a user override that value is to be used
/* Main */
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
@@ -214,6 +214,16 @@ class Theme {
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor =
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

18
src/themes/theme-dark.js
View File

@@ -187,6 +187,24 @@ class Theme {
this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = lighten(this.secondaryColor, 20);
this.git1 = lighten(this.pie2 || this.secondaryColor, 20);
this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);
this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);
this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);
this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);
this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

47
src/themes/theme-default.js
View File

@@ -1,4 +1,4 @@
import { invert, lighten, rgba, adjust } from 'khroma';
import { invert, lighten, rgba, adjust, darken } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
@@ -199,6 +199,51 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.gitBranchLabel0 = invert(this.labelTextColor);
this.gitBranchLabel1 = this.labelTextColor;
this.gitBranchLabel2 = this.labelTextColor;
this.gitBranchLabel3 = invert(this.labelTextColor);
this.gitBranchLabel4 = this.labelTextColor;
this.gitBranchLabel5 = this.labelTextColor;
this.gitBranchLabel6 = this.labelTextColor;
this.gitBranchLabel7 = this.labelTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

37
src/themes/theme-forest.js
View File

@@ -169,6 +169,43 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
}
calculate(overrides) {
if (typeof overrides !== 'object') {

29
src/themes/theme-neutral.js
View File

@@ -219,6 +219,35 @@ class Theme {
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = darken(this.pie1, 25) || this.primaryColor;
this.git1 = this.pie2 || this.secondaryColor;
this.git2 = this.pie3 || this.tertiaryColor;
this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });
this.gitInv0 = invert(this.git0);
this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3);
this.gitInv4 = invert(this.git4);
this.gitInv5 = invert(this.git5);
this.gitInv6 = invert(this.git6);
this.gitInv7 = invert(this.git7);
this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
this.gitBranchLabel0 = this.branchLabelColor;
this.gitBranchLabel1 = 'white';
this.gitBranchLabel2 = this.branchLabelColor;
this.gitBranchLabel3 = 'white';
this.gitBranchLabel4 = this.branchLabelColor;
this.gitBranchLabel5 = this.branchLabelColor;
this.gitBranchLabel6 = this.branchLabelColor;
this.gitBranchLabel7 = this.branchLabelColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {