marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-10 09:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Add themes for radar

Browse Source
This commit is contained in:
Thomas Di Cizerone
2025-03-16 18:15:30 +01:00
parent 1fb91d14c9
commit d53c66dde5
5 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/mermaid/src/themes/theme-base.js
View File

@@ -230,6 +230,20 @@ class Theme {
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black'; this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7'; this.pieOpacity = this.pieOpacity || '0.7';
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* architecture */ /* architecture */
this.archEdgeColor = this.archEdgeColor || '#777'; this.archEdgeColor = this.archEdgeColor || '#777';
this.archEdgeArrowColor = this.archEdgeArrowColor || '#777'; this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';

14
packages/mermaid/src/themes/theme-dark.js
View File

@@ -291,6 +291,20 @@ class Theme {
blockFillColor: this.background, blockFillColor: this.background,
}; };
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* class */ /* class */
this.classText = this.primaryTextColor; this.classText = this.primaryTextColor;

14
packages/mermaid/src/themes/theme-default.js
View File

@@ -291,6 +291,20 @@ class Theme {
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* xychart */ /* xychart */
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,

14
packages/mermaid/src/themes/theme-forest.js
View File

@@ -265,6 +265,20 @@ class Theme {
blockFillColor: this.mainBkg, blockFillColor: this.mainBkg,
}; };
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* xychart */ /* xychart */
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,

14
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -303,6 +303,20 @@ class Theme {
'#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0', '#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0',
}; };
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* requirement-diagram */ /* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;