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

fix(arch): correctly utilize calculated style

Browse Source
This commit is contained in:
NicolasNewman
2024-07-06 17:32:07 -05:00
parent 1b128cae77
commit 4d6b92e5bf
7 changed files with 50 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/mermaid/src/diagrams/architecture/architectureStyles.ts
View File

@@ -4,8 +4,8 @@ import type { ArchitectureStyleOptions } from './architectureTypes.js';
const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
`
.edge {
stroke-width: ${options.archEdgeStrokeWidth};
stroke: ${options.archEdgeStrokeColor};
stroke-width: ${options.archEdgeWidth};
stroke: ${options.archEdgeColor};
fill: none;
}
@@ -15,8 +15,8 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
.node-bkg {
fill: none;
stroke: ${options.archGroupBorderStrokeColor};
stroke-width: ${options.archGroupBorderStrokeWidth};
stroke: ${options.archGroupBorderColor};
stroke-width: ${options.archGroupBorderWidth};
stroke-dasharray: 8;
}
.node-icon-text {

8
packages/mermaid/src/diagrams/architecture/architectureTypes.ts
View File

@@ -171,11 +171,11 @@ export const getArchitectureDirectionXYFactors = function (
};
export interface ArchitectureStyleOptions {
archEdgeStrokeColor: string;
archEdgeColor: string;
archEdgeArrowColor: string;
archEdgeStrokeWidth: string;
archGroupBorderStrokeColor: string;
archGroupBorderStrokeWidth: string;
archEdgeWidth: string;
archGroupBorderColor: string;
archGroupBorderWidth: string;
}
export interface ArchitectureService {

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

@@ -221,11 +221,11 @@ class Theme {
this.pieOpacity = this.pieOpacity || '0.7';
/* architecture */
this.archEdgeStrokeColor = this.archEdgeStrokeColor || '#777';
this.archEdgeColor = this.archEdgeColor || '#777';
this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';
this.archEdgeStrokeWidth = this.archEdgeStrokeWidth || '3';
this.archGroupBorderStrokeColor = this.archGroupBorderStrokeColor || '#000';
this.archGroupBorderStrokeWidth = this.archGroupBorderStrokeWidth || '2px';
this.archEdgeWidth = this.archEdgeWidth || '3';
this.archGroupBorderColor = this.archGroupBorderColor || '#000';
this.archGroupBorderWidth = this.archGroupBorderWidth || '2px';
/* quadrant-graph */
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;

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

@@ -86,11 +86,11 @@ class Theme {
this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeStrokeColor = 'calculated';
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeStrokeWidth = 'calculated';
this.archGroupBorderStrokeColor = '#FFF';
this.archGroupBorderStrokeWidth = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */
this.labelColor = 'calculated';
@@ -140,6 +140,10 @@ class Theme {
this.doneTaskBkgColor = this.mainContrastColor;
this.taskTextDarkColor = this.darkTextColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;

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

@@ -113,11 +113,11 @@ class Theme {
this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeStrokeColor = 'calculated';
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeStrokeWidth = 'calculated';
this.archGroupBorderStrokeColor = 'calculated';
this.archGroupBorderStrokeWidth = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */
this.labelColor = 'black';
@@ -201,6 +201,10 @@ class Theme {
this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;

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

@@ -86,6 +86,13 @@ class Theme {
this.personBorder = this.primaryBorderColor;
this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */
this.labelColor = 'black';
@@ -162,6 +169,10 @@ class Theme {
this.activeTaskBorderColor = this.taskBorderColor;
this.activeTaskBkgColor = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;

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

@@ -98,6 +98,13 @@ class Theme {
this.personBorder = this.primaryBorderColor;
this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */
this.labelColor = 'black';
@@ -199,6 +206,10 @@ class Theme {
this.todayLineColor = this.critBkgColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */
this.transitionColor = this.transitionColor || '#000';
this.transitionLabelColor = this.transitionLabelColor || this.textColor;