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

Merge branch 'pebr/neo-style' into alanaV11

Browse Source
This commit is contained in:
Per Brolin
2024-06-18 13:03:08 +02:00
parent ea87596363 f96c6462de
commit 959d8cb606
15 changed files with 1941 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cypress/platform/per.html
View File

@@ -90,24 +90,23 @@ stateDiagram-v2
>
<pre id="diagram" class="mermaid">
stateDiagram
StateID
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
flowchart LR
A[Start] --Some text--> B(Continue)
B --> C{Evaluate}
C -- One --> D[Option 1]
C -- Two --> E[Option 2]
C -- Three --> F[fa:fa-car Option 3]
</pre>
<script type="module">

0
cypress/platform/state-refactor-neo.html → cypress/platform/state-refactor-looks.html
View File

1477
cypress/platform/state-refactor-neo-themes.html Normal file
View File

File diff suppressed because it is too large Load Diff

15
docs/neo-style-to-do
View File

@@ -1,5 +1,12 @@
1. Paddings of node labels for neo and classic does not differ, which it should. Status: Fixed
2. When layout is set to "elk" and look is "neo", the drop shadow is not present
3. Drop-shadows are not present for flow-charts, even if look is "neo"
4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case
5. When look is "neo" and "theme" is "neo", the background color shall be white
2. When layout is set to "elk" and look is "neo", the drop shadow is not present. Status: Fixed
3. Drop-shadows are not present for flow-charts, even if look is "neo". Status: Fixed
4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case: Status: Fixed
5. When look is "neo" and "theme" is "neo", the background color shall be white. Status: Fixed
6. Composite states contains borders in neo. Status: Fixed
7. Nested states contains borders in neo. Status: Fixed
8. The font-size of node labels seems a bit off.
9. When selecting look=neo and theme for composite stated, the height differs.
10. Drop-shadows for non-rectangular shapes are not supported: Status: Fixed
11. Gradient
12. Rx,Ry of rects do not apply any longer

2
packages/mermaid/src/config.type.ts
View File

@@ -68,7 +68,7 @@ export interface MermaidConfig {
* Defines which main look to use for the diagram.
*
*/
look?: 'classic' | 'handdrawn';
look?: 'classic' | 'handdrawn' | 'neo';
/**
* Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
*

3
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -7,6 +7,7 @@ import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js
import type { LayoutData } from '../../rendering-util/types.js';
import utils from '../../utils.js';
import { CSS_DIAGRAM, DEFAULT_NESTED_DOC_DIR } from './stateCommon.js';
import { lookUpDomId } from '../flowchart/flowDb';
/**
* Get the direction from the statement items.
@@ -87,7 +88,7 @@ export const draw = async function (
data4Layout.markers = ['barb'];
}
data4Layout.diagramId = id;
// console.log('REF1:', data4Layout);
console.log('REF1:', data4Layout);
await render(data4Layout, svg, element, positions);
const padding = 8;
utils.insertTitle(

6
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -168,7 +168,8 @@ const roundedWithTitle = (parent, node) => {
.attr('id', node.id)
.attr('data-et', 'node')
.attr('data-node', 'true')
.attr('data-id', node.id);
.attr('data-id', node.id)
.attr('data-look', node.look);
// add the rect
const outerRectG = shapeSvg.insert('g', ':first-child');
@@ -255,7 +256,8 @@ const roundedWithTitle = (parent, node) => {
.attr('x', x)
.attr('y', y)
.attr('width', width)
.attr('height', node.height + padding);
.attr('height', node.height + padding)
.attr('data-look', node.look);
innerRect
.attr('class', 'inner')
.attr('x', x)

26
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -24,7 +24,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
log.info('IPI node = ', node);
let rect;
node.look = look;
let { rx, ry } = node;
const { cssStyles } = node;
@@ -48,11 +47,25 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else {
rect = shapeSvg.insert('rect', ':first-child');
let gradient = shapeSvg.append('linearGradient');
let rectClass = 'basic label-container';
if (node.look === 'neo') {
rectClass += ' state-shadow-neo';
}
gradient
.attr('id', 'gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('spreadMethod', 'pad');
gradient
.append('svg:stop')
.attr('offset', '0%')
.attr('stop-color', '#eb0042')
.attr('stop-opacity', 1);
gradient
.append('svg:stop')
.attr('offset', '100%')
.attr('stop-color', '#0042eb')
.attr('stop-opacity', 1);
const rectClass = 'basic label-container';
rect
.attr('class', rectClass)
@@ -64,7 +77,8 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
.attr('height', totalHeight);
.attr('height', totalHeight)
.attr('stroke', 'url(#gradient)');
}
updateNodeBounds(node, rect);

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -4,7 +4,6 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const roundedRect = async (parent: SVGAElement, node: Node) => {
const { look } = getConfig();
node.look = look;
const options = {
rx: node.look === 'neo' ? 3 : 5,
ry: node.look === 'neo' ? 3 : 5,
@@ -12,9 +11,9 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
labelPaddingX: node.look === 'neo' ? node.padding * 2 : node.padding,
labelPaddingY: node.look === 'neo' ? node.padding : node.padding,
classes: '',
labelPaddingX: (node?.padding || 0) * 1,
labelPaddingY: (node?.padding || 0) * 1,
} as RectOptions;
console.log('Perra1, node, options: ', node, options);
return drawRect(parent, node, options);
};

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
View File

@@ -4,8 +4,6 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const state = async (parent: SVGAElement, node: Node) => {
const { look } = getConfig();
node.look = look;
const options = {
rx: node.look === 'neo' ? 3 : 5,
ry: node.look === 'neo' ? 3 : 5,

1
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -79,6 +79,7 @@ properties:
enum:
- classic
- handdrawn
- neo
default: 'classic'
handdrawnSeed:
description: |

36
packages/mermaid/src/styles.ts
View File

@@ -73,10 +73,40 @@ const getStyles = (
stroke: ${options.nodeBorder};
}
[data-look="neo"].node rect {
stroke: ${options.nodeBorder};
stroke: red !important
[data-look="neo"].node rect, [data-look="neo"].node polygon {
//stroke: none;
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
rx: 3;
ry: 3;
}
[data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon {
//stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
rx: 3;
ry: 3;
}
[data-look="neo"].node circle{
stroke: $(options.nodeBorder);
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
fill: #000000;
rx: 3;
ry: 3;
}
[data-look="neo"].statediagram-cluster rect {
fill: ${options.compositeTitleBackground};
stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
//stroke: none;
stroke-width: 1px;
rx: 3;
ry: 3;
}
${userStyles}
`;
};

4
packages/mermaid/src/themes/index.js
View File

@@ -4,6 +4,7 @@ import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
import { getThemeVariables as neoThemeVariables } from './theme-neo.js';
import { getThemeVariables as gradientThemeVariables } from './theme-gradient.js';
export default {
base: {
@@ -24,4 +25,7 @@ export default {
neo: {
getThemeVariables: neoThemeVariables,
},
gradient: {
getThemeVariables: gradientThemeVariables,
},
};

372
packages/mermaid/src/themes/theme-gradient.js Normal file
View File

@@ -0,0 +1,372 @@
import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
import { mkBorder } from './theme-helpers.js';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues.js';
class Theme {
constructor() {
/** # Base variables */
/**
* - Background - used to know what the background color is of the diagram. This is used for
* deducing colors for instance line color. Default value is #f4f4f4.
*/
this.background = '#ffffff';
this.primaryColor = '#cccccc';
this.mainBkg = '#ffffff';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
this.THEME_COLOR_LIMIT = 12;
this.radius = 3;
// dark
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '10px';
// Neo-specific
this.nodeBorder = '#550000';
this.stateBorder = 'none';
}
updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used
/* Main */
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 });
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor =
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
this.noteTextColor = this.noteTextColor || '#333';
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
this.lineColor = this.lineColor || invert(this.background);
this.arrowheadColor = this.arrowheadColor || invert(this.background);
this.textColor = this.textColor || this.primaryTextColor;
// TODO: should this instead default to secondaryBorderColor?
this.border2 = this.border2 || this.tertiaryBorderColor;
/* Flowchart variables */
this.nodeBkg = this.nodeBkg || this.primaryColor;
this.mainBkg = this.mainBkg || this.primaryColor;
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
this.titleColor = this.titleColor || this.tertiaryTextColor;
this.edgeLabelBackground =
this.edgeLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = this.actorBorder || this.primaryBorderColor;
this.actorBkg = this.actorBkg || this.mainBkg;
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
this.actorLineColor = this.actorLineColor || this.actorBorder;
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
this.signalColor = this.signalColor || this.textColor;
this.signalTextColor = this.signalTextColor || this.textColor;
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
this.labelTextColor = this.labelTextColor || this.actorTextColor;
this.loopTextColor = this.loopTextColor || this.actorTextColor;
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
/* Gantt chart variables */
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
this.gridColor = this.gridColor || 'lightgrey';
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
this.critBorderColor = this.critBorderColor || '#ff8888';
this.critBkgColor = this.critBkgColor || 'red';
this.todayLineColor = this.todayLineColor || 'red';
this.taskTextColor = this.taskTextColor || this.textColor;
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
/* Sequence Diagram variables */
this.personBorder = this.personBorder || this.primaryBorderColor;
this.personBkg = this.personBkg || this.mainBkg;
/* state colors */
this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
/* The color of the text tables of the states*/
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
this.stateBkg = this.stateBkg || this.mainBkg;
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
this.altBackground = this.altBackground || '#f0f0f0';
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
this.compositeBorder = this.compositeBorder || this.nodeBorder;
this.innerEndBackground = this.nodeBorder;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
this.transitionColor = this.transitionColor || this.lineColor;
this.specialStateColor = this.lineColor;
/* Color Scale */
/* Each color-set will have a background, a foreground and a border color */
this.cScale0 = this.cScale0 || this.primaryColor;
this.cScale1 = this.cScale1 || this.secondaryColor;
this.cScale2 = this.cScale2 || this.tertiaryColor;
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
if (this.darkMode) {
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScale' + i] = darken(this['cScale' + i], 75);
}
} else {
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScale' + i] = darken(this['cScale' + i], 25);
}
}
// Setup the inverted color for the set
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
}
// Setup the peer color for the set, useful for borders
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
if (this.darkMode) {
this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
} else {
this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
}
}
// Setup the label color for the set
this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
const multiplier = this.darkMode ? -4 : -1;
for (let i = 0; i < 5; i++) {
this['surface' + i] =
this['surface' + i] ||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });
this['surfacePeer' + i] =
this['surfacePeer' + i] ||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });
}
/* class */
this.classText = this.classText || this.textColor;
/* user-journey */
this.fillType0 = this.fillType0 || this.primaryColor;
this.fillType1 = this.fillType1 || this.secondaryColor;
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || this.tertiaryColor;
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';
/* quadrant-graph */
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
this.quadrant2TextFill =
this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
this.quadrant3TextFill =
this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
this.quadrant4TextFill =
this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
this.quadrantPointFill =
this.quadrantPointFill || isDark(this.quadrant1Fill)
? lighten(this.quadrant1Fill)
: darken(this.quadrant1Fill);
this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
this.quadrantInternalBorderStrokeFill =
this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantExternalBorderStrokeFill =
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
/* xychart */
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
};
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
this.requirementBorderSize = this.requirementBorderSize || '1';
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
this.relationColor = this.relationColor || this.lineColor;
this.relationLabelBackground =
this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
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 = this.gitInv0 || invert(this.git0);
this.gitInv1 = this.gitInv1 || invert(this.git1);
this.gitInv2 = this.gitInv2 || invert(this.git2);
this.gitInv3 = this.gitInv3 || invert(this.git3);
this.gitInv4 = this.gitInv4 || invert(this.git4);
this.gitInv5 = this.gitInv5 || invert(this.git5);
this.gitInv6 = this.gitInv6 || invert(this.git6);
this.gitInv7 = 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;
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
/* -------------------------------------------------- */
/* EntityRelationship diagrams */
this.attributeBackgroundColorOdd =
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
this.attributeBackgroundColorEven =
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
/* -------------------------------------------------- */
}
calculate(overrides) {
if (typeof overrides !== 'object') {
// Calculate colors form base colors
this.updateColors();
return;
}
const keys = Object.keys(overrides);
// Copy values from overrides, this is mainly for base colors
keys.forEach((k) => {
this[k] = overrides[k];
});
// Calculate colors form base colors
this.updateColors();
// Copy values from overrides again in case of an override of derived value
keys.forEach((k) => {
this[k] = overrides[k];
});
}
}
export const getThemeVariables = (userOverrides) => {
const theme = new Theme();
theme.calculate(userOverrides);
return theme;
};

4
packages/mermaid/src/themes/theme-neo.js
View File

@@ -15,8 +15,7 @@ class Theme {
this.background = '#ffffff';
this.primaryColor = '#cccccc';
//this.mainBkg = '#ffffff';
this.mainBkg = '#ecedfe';
this.mainBkg = '#ffffff';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
@@ -31,6 +30,7 @@ class Theme {
// Neo-specific
this.nodeBorder = 'none';
this.stateBorder = 'none';
this.useGradient = false;
}
updateColors() {
// The || is to make sure that if the variable has been defined by a user override that value is to be used