mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

#3561 Adding cScale0-11 etc and usage of the colors from the mindmap diagram

This commit is contained in:
Knut Sveidqvist 2022-10-03 14:51:13 +02:00
parent 05a594a492
commit 8ee321fd7b
11 changed files with 300 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/knsv2.html
View File

@ -29,6 +29,12 @@
}
.mermaid svg {
/* font-size: 18px !important; */
background-color: #eee;
background-image: radial-gradient(#fff 1%, transparent 11%),
radial-gradient(#fff 1%, transparent 11%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-repeat: repeat;
}
.malware {
position: fixed;
@ -56,6 +62,16 @@ example-diagram
<pre id="diagram" class="mermaid">
mindmap
root
A
B
C
D
E
A2
B2
C2
D2
E2
child1((Circle))
grandchild 1
grandchild 2
@ -71,17 +87,18 @@ mindmap
</pre>
<!-- <div id="cy"></div> -->
<script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<script src="./mermaid-example-diagram-detector.js"></script>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'forest',
startOnLoad: true,
logLevel: 0,
basePath: './packages/',
// themeVariables: {relationLabelColor: 'red'}
// themeVariables: { darkMode: true },
});
function callback() {
alert('It worked');

42
packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
View File

@ -1,6 +1,6 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
import { log, getConfig } from './mermaidUtils';
import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
@ -10,10 +10,11 @@ import { log, getConfig } from './mermaidUtils';
* @param {any} version
* @param diagObj
*/
export const draw = (text, id, version, diagObj) => {
export const draw = (text, id, version) => {
try {
log.debug('Rendering info diagram\n' + text);
const conf = getConfig();
log.debug('Rendering example diagram\n' + text, 'Conf: ');
const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sanbox mode
let sandboxElement;
@ -25,14 +26,34 @@ export const draw = (text, id, version, diagObj) => {
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
// Parse the graph definition
// parser.parse(text);
// log.debug('Parsed info diagram');
// Fetch the default direction, use TD if none was found
const svg = root.select('#' + id);
const g = svg.append('g');
let i;
for (i = 0; i < THEME_COLOR_LIMIT; i++) {
const section = g.append('g').attr('class', 'section-' + i);
section
.append('rect')
.attr('x', (i % 5) * 110)
.attr('y', Math.floor(i / 5) * 90 + 60)
.attr('width', 100)
.attr('height', 60);
section
.append('rect')
.attr('x', (i % 5) * 110)
.attr('y', Math.floor(i / 5) * 90 + 120)
.attr('class', 'inverted')
.attr('width', 100)
.attr('height', 20);
section
.append('text', 'section-' + i)
.text('Section ' + i)
.attr('x', (i % 5) * 110 + 15)
.attr('y', Math.floor(i / 5) * 90 + 95)
.attr('class', 'section-text-' + i);
}
g.append('text') // text label for the x axis
.attr('x', 100)
.attr('y', 40)
@ -41,9 +62,8 @@ export const draw = (text, id, version, diagObj) => {
.style('text-anchor', 'middle')
.text('v ' + version);
svg.attr('height', 100);
svg.attr('width', 400);
// svg.attr('viewBox', '0 0 300 150');
// Setup the view box and size of the svg element
setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
} catch (e) {
log.error('Error while rendering info diagram');
log.error(e.message);

1
packages/mermaid-example-diagram/src/mermaidUtils.ts
View File

@ -19,7 +19,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
error: warning,
fatal: warning,
};
export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
export let getConfig: () => object;
export let sanitizeText: (str: string) => string;

28
packages/mermaid-example-diagram/src/styles.js
View File

@ -1,3 +1,29 @@
const getStyles = () => ``;
import { darken, lighten, isDark } from 'khroma';
const genSections = (options) => {
let sections = '';
for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
sections += `
.section-${i} rect {
fill: ${options['cScale' + i]};
stroke: ${options['cScalePeer' + i]};
stroke-width: 4;
}
.section-${i} rect.inverted {
fill: ${options['cScaleInv' + i]};
}
.section-${i} text {
fill: ${options['cScaleLabel' + i]};
}
`;
}
return sections;
};
const getStyles = (options) =>
`
${genSections(options)}
`;
export default getStyles;

14
packages/mermaid-mindmap/src/styles.js
View File

@ -3,8 +3,8 @@ import { darken, lighten, isDark } from 'khroma';
const genSections = (options) => {
let sections = '';
for (let i = 0; i < 8; i++) {
options['lineColor' + i] = options['lineColor' + i] || options['gitInv' + i];
for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
if (isDark(options['lineColor' + i])) {
options['lineColor' + i] = lighten(options['lineColor' + i], 20);
} else {
@ -12,25 +12,25 @@ const genSections = (options) => {
}
}
for (let i = 0; i < 8; i++) {
for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
const sw = '' + (17 - 3 * i);
sections += `
.section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
i - 1
} path {
fill: ${options['git' + i]};
fill: ${options['cScale' + i]};
}
.section-${i - 1} text {
fill: ${options['gitBranchLabel' + i]};
fill: ${options['cScaleLabel' + i]};
// fill: ${options['gitInv' + i]};
}
.node-icon-${i - 1} {
font-size: 40px;
color: ${options['gitBranchLabel' + i]};
color: ${options['cScaleLabel' + i]};
// color: ${options['gitInv' + i]};
}
.section-edge-${i - 1}{
stroke: ${options['git' + i]};
stroke: ${options['cScale' + i]};
}
.edge-depth-${i - 1}{
stroke-width: ${sw};

10
packages/mermaid-mindmap/src/svgDraw.js
View File

@ -1,5 +1,6 @@
import { select } from 'd3';
import * as db from './mindmapDb';
const MAX_SECTIONS = 12;
/**
* @param {string} text The text to be wrapped
@ -159,17 +160,19 @@ const roundedRectBkg = function (elem, node) {
* @param {object} elem The D3 dom element in which the node is to be added
* @param {object} node The node to be added
* @param section
* @param fullSection
* @param {object} conf The configuration object
* @returns {number} The height nodes dom element
*/
export const drawNode = function (elem, node, section, conf) {
export const drawNode = function (elem, node, fullSection, conf) {
const section = (fullSection % MAX_SECTIONS) - 1;
const nodeElem = elem.append('g');
node.section = section;
nodeElem.attr(
'class',
(node.class ? node.class + ' ' : '') +
'mindmap-node ' +
(section === -1 ? 'section-root' : 'section-' + section)
(section < 0 ? 'section-root' : 'section-' + section)
);
const bkgElem = nodeElem.append('g');
@ -260,7 +263,8 @@ export const drawNode = function (elem, node, section, conf) {
return node.height;
};
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section) {
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
const section = (fullSection % MAX_SECTIONS) - 1;
const sx = parent.x + parent.width / 2;
const sy = parent.y + parent.height / 2;
const ex = mindmap.x + mindmap.width / 2;

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

@ -20,6 +20,8 @@ class Theme {
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
this.THEME_COLOR_LIMIT = 12;
// dark
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
@ -123,6 +125,50 @@ class Theme {
this.transitionColor = this.transitionColor || this.lineColor;
this.specialStateColor = this.lineColor;
/* Color Scale */
/* Each color-set will have a background, a forgroupnd 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 teh 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;
}
/* class */
this.classText = this.classText || this.textColor;

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

@ -29,6 +29,7 @@ class Theme {
this.fontSize = '16px';
this.labelBackground = '#181818';
this.textColor = '#ccc';
this.THEME_COLOR_LIMIT = 12;
/* Flowchart variables */
this.nodeBkg = 'calculated';
@ -157,19 +158,55 @@ class Theme {
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || '#0b0000';
this.pie2 = this.pie2 || '#4d1037';
this.pie3 = this.pie3 || '#3f5258';
this.pie4 = this.pie4 || '#4f2f1b';
this.pie5 = this.pie5 || '#6e0a0a';
this.pie6 = this.pie6 || '#3b0048';
this.pie7 = this.pie7 || '#995a01';
this.pie8 = this.pie8 || '#154706';
this.pie9 = this.pie9 || '#161722';
this.pie10 = this.pie10 || '#00296f';
this.pie11 = this.pie11 || '#01629c';
this.pie12 = this.pie12 || '#010029';
/* cScale */
this.cScale1 = this.cScale1 || '#0b0000';
this.cScale2 = this.cScale2 || '#4d1037';
this.cScale3 = this.cScale3 || '#3f5258';
this.cScale4 = this.cScale4 || '#4f2f1b';
this.cScale5 = this.cScale5 || '#6e0a0a';
this.cScale6 = this.cScale6 || '#3b0048';
this.cScale7 = this.cScale7 || '#995a01';
this.cScale8 = this.cScale8 || '#154706';
this.cScale9 = this.cScale9 || '#161722';
this.cScale10 = this.cScale10 || '#00296f';
this.cScale11 = this.cScale11 || '#01629c';
this.cScale12 = this.cScale12 || '#010029';
/* Color Scale */
/* Each color-set will have a background, a forgroupnd 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 });
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 });
// 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++) {
this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
}
// Setup teh label color for the set
this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
/* Pie diagram */
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['pie' + i] = this['cScale' + i];
}
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';

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

@ -36,6 +36,7 @@ class Theme {
this.fontSize = '16px';
this.labelBackground = '#e8e8e8';
this.textColor = '#333';
this.THEME_COLOR_LIMIT = 12;
/* Flowchart variables */
@ -119,8 +120,41 @@ class Theme {
this.updateColors();
}
updateColors() {
/* Flowchart variables */
/* Color Scale */
/* Each color-set will have a background, a forgroupnd 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 });
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 });
this['cScalePeer' + 1] = this['cScalePeer' + 1] || darken(this.secondaryColor, 45);
this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
// Setup the peer color for the set, useful for borders
this['cScale' + i] = darken(this['cScale' + i], 10);
this['cScalePeer' + i] = this['cScalePeer' + 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] || adjust(this['cScale' + i], { h: 180 });
}
// Setup teh label color for the set
this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
this.nodeBorder = this.border1; // border 1
this.clusterBkg = this.secondBkg;

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

@ -30,6 +30,7 @@ class Theme {
this.tertiaryTextColor = invert(this.primaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.THEME_COLOR_LIMIT = 12;
/* Flowchart variables */
this.nodeBkg = 'calculated';
@ -93,6 +94,39 @@ class Theme {
this.errorTextColor = '#552222';
}
updateColors() {
/* Each color-set will have a background, a forgroupnd 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 });
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 });
this['cScalePeer' + 1] = this['cScalePeer' + 1] || darken(this.secondaryColor, 45);
this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
// Setup the peer color for the set, useful for borders
this['cScale' + i] = darken(this['cScale' + i], 10);
this['cScalePeer' + i] = this['cScalePeer' + 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] || adjust(this['cScale' + i], { h: 180 });
}
// Setup teh label color for the set
this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
/* Flowchart variables */
this.nodeBkg = this.mainBkg;

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

@ -41,6 +41,7 @@ class Theme {
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
this.fontSize = '16px';
this.THEME_COLOR_LIMIT = 12;
/* Flowchart variables */
@ -108,6 +109,44 @@ class Theme {
this.secondBkg = lighten(this.contrast, 55);
this.border2 = this.contrast;
/* Color Scale */
/* Each color-set will have a background, a forgroupnd and a border color */
this.cScale0 = this.cScale0 || '#555';
this.cScale1 = this.cScale1 || '#F4F4F4';
this.cScale2 = this.cScale2 || '#555';
this.cScale3 = this.cScale3 || '#BBB';
this.cScale4 = this.cScale4 || '#777';
this.cScale5 = this.cScale5 || '#999';
this.cScale6 = this.cScale6 || '#DDD';
this.cScale7 = this.cScale7 || '#FFF';
this.cScale8 = this.cScale8 || '#DDD';
this.cScale9 = this.cScale9 || '#BBB';
this.cScale10 = this.cScale10 || '#999';
this.cScale11 = this.cScale11 || '#777';
// 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.darkMode ? 'black' : this.labelTextColor);
this['cScaleLabel0'] = this['cScaleLabel0'] || this.cScale1;
this['cScaleLabel2'] = this['cScaleLabel2'] || this.cScale1;
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
}
/* Flowchart variables */
this.nodeBkg = this.mainBkg;
@ -185,18 +224,11 @@ class Theme {
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
// /* pie */
this.pie1 = this.pie1 || '#F4F4F4';
this.pie2 = this.pie2 || '#555';
this.pie3 = this.pie3 || '#BBB';
this.pie4 = this.pie4 || '#777';
this.pie5 = this.pie5 || '#999';
this.pie6 = this.pie6 || '#DDD';
this.pie7 = this.pie7 || '#FFF';
this.pie8 = this.pie8 || '#DDD';
this.pie9 = this.pie9 || '#BBB';
this.pie10 = this.pie10 || '#999';
this.pie11 = this.pie11 || '#777';
this.pie12 = this.pie12 || '#555';
/* Pie diagram */
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['pie' + i] = this['cScale' + i];
}
this.pie12 = this.pie0;
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
@ -207,19 +239,6 @@ class Theme {
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
// this.pie1 = this.pie1 || '#212529';
// this.pie2 = this.pie2 || '#343A40';
// this.pie3 = this.pie3 || '#495057';
// this.pie4 = this.pie4 || '#6C757D';
// 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 });
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;