mermaid
Version:
Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
1 lines • 1.96 MB
Source Map (JSON)
{"version":3,"file":"mermaid.core.mjs","sources":["../src/logger.ts","../src/diagrams/common/common.ts","../src/themes/theme-helpers.js","../src/themes/erDiagram-oldHardcodedValues.ts","../src/themes/theme-base.js","../src/themes/theme-dark.js","../src/themes/theme-default.js","../src/themes/theme-forest.js","../src/themes/theme-neutral.js","../src/themes/index.js","../src/defaultConfig.ts","../../../node_modules/.pnpm/js-yaml@4.1.0/node_modules/js-yaml/dist/js-yaml.mjs","../src/diagram-api/frontmatter.ts","../src/diagram-api/detectType.ts","../src/assignWithDepth.js","../src/utils.ts","../src/config.ts","../src/setupGraphViewbox.js","../src/diagrams/class/styles.js","../src/diagrams/er/styles.js","../src/diagrams/error/styles.js","../src/diagrams/flowchart/styles.ts","../src/diagrams/gantt/styles.js","../src/diagrams/info/styles.js","../src/diagrams/pie/styles.js","../src/diagrams/requirement/styles.js","../src/diagrams/sequence/styles.js","../src/diagrams/state/styles.js","../src/diagrams/user-journey/styles.js","../src/diagrams/c4/styles.js","../src/styles.ts","../src/diagram-api/diagramAPI.ts","../src/diagrams/git/parser/gitGraph.jison","../src/diagrams/git/gitGraphDetector.ts","../src/commonDb.ts","../src/diagrams/git/gitGraphAst.js","../src/diagrams/git/gitGraphRenderer.js","../src/diagrams/git/styles.js","../src/diagrams/c4/parser/c4Diagram.jison","../src/diagrams/c4/c4Detector.ts","../src/diagrams/c4/c4Db.js","../src/diagrams/c4/svgDraw.js","../src/diagrams/c4/c4Renderer.js","../src/diagrams/class/parser/classDiagram.jison","../src/diagrams/class/classDetector.ts","../src/diagrams/class/classDetector-V2.ts","../src/diagrams/class/classDb.js","../src/diagrams/class/svgDraw.js","../src/diagrams/class/classRenderer.js","../src/dagre-wrapper/markers.js","../src/dagre-wrapper/createLabel.js","../src/dagre-wrapper/shapes/util.js","../src/dagre-wrapper/mermaid-graphlib.js","../src/dagre-wrapper/intersect/intersect-node.js","../src/dagre-wrapper/intersect/intersect-ellipse.js","../src/dagre-wrapper/intersect/intersect-circle.js","../src/dagre-wrapper/intersect/intersect-line.js","../src/dagre-wrapper/intersect/intersect-polygon.js","../src/dagre-wrapper/intersect/intersect-rect.js","../src/dagre-wrapper/intersect/index.js","../src/dagre-wrapper/shapes/note.js","../src/dagre-wrapper/nodes.js","../src/dagre-wrapper/clusters.js","../src/dagre-wrapper/edges.js","../src/dagre-wrapper/index.js","../src/diagrams/class/classRenderer-v2.js","../src/diagrams/er/parser/erDiagram.jison","../src/diagrams/er/erDetector.ts","../src/diagrams/er/erDb.js","../src/diagrams/er/erMarkers.js","../src/diagrams/er/erRenderer.js","../src/diagrams/flowchart/parser/flow.jison","../src/diagrams/flowchart/flowDetector.ts","../src/diagrams/flowchart/flowDetector-v2.ts","../src/diagrams/flowchart/flowDb.js","../src/diagrams/flowchart/flowChartShapes.js","../src/diagrams/flowchart/flowRenderer.js","../src/diagrams/flowchart/flowRenderer-v2.js","../src/diagrams/gantt/parser/gantt.jison","../src/diagrams/gantt/ganttDetector.ts","../src/diagrams/gantt/ganttDb.js","../src/diagrams/gantt/ganttRenderer.js","../src/diagrams/info/parser/info.jison","../src/diagrams/info/infoDb.js","../src/diagrams/info/infoRenderer.js","../src/diagrams/info/infoDetector.ts","../src/diagrams/pie/parser/pie.jison","../src/diagrams/pie/pieDetector.ts","../src/diagrams/pie/pieDb.js","../src/diagrams/pie/pieRenderer.js","../src/diagrams/requirement/parser/requirementDiagram.jison","../src/diagrams/requirement/requirementDetector.ts","../src/diagrams/requirement/requirementDb.js","../src/diagrams/requirement/requirementMarkers.js","../src/diagrams/requirement/requirementRenderer.js","../src/diagrams/sequence/parser/sequenceDiagram.jison","../src/diagrams/sequence/sequenceDetector.ts","../src/diagrams/sequence/sequenceDb.js","../src/interactionDb.ts","../src/diagrams/sequence/svgDraw.js","../src/diagrams/sequence/sequenceRenderer.ts","../src/diagrams/state/parser/stateDiagram.jison","../src/diagrams/state/stateDetector.ts","../src/diagrams/state/stateDetector-V2.ts","../src/diagrams/state/stateCommon.ts","../src/diagrams/state/stateDb.js","../src/diagrams/state/id-cache.js","../src/diagrams/state/shapes.js","../src/diagrams/state/stateRenderer.js","../src/diagrams/state/stateRenderer-v2.js","../src/diagrams/user-journey/parser/journey.jison","../src/diagrams/user-journey/journeyDetector.ts","../src/diagrams/user-journey/journeyDb.js","../src/diagrams/user-journey/svgDraw.js","../src/diagrams/user-journey/journeyRenderer.ts","../src/diagrams/error/errorRenderer.ts","../src/diagram-api/diagram-orchestration.ts","../src/Diagram.ts","../src/accessibility.ts","../src/mermaidAPI.ts","../src/mermaid.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-empty-function */\n/* eslint-disable no-console */\nimport moment from 'moment-mini';\n\nexport type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';\n\nexport const LEVELS: Record<LogLevel, number> = {\n trace: 0,\n debug: 1,\n info: 2,\n warn: 3,\n error: 4,\n fatal: 5,\n};\n\nexport const log: Record<keyof typeof LEVELS, typeof console.log> = {\n trace: (..._args: any[]) => {},\n debug: (..._args: any[]) => {},\n info: (..._args: any[]) => {},\n warn: (..._args: any[]) => {},\n error: (..._args: any[]) => {},\n fatal: (..._args: any[]) => {},\n};\n\n/**\n * Sets a log level\n *\n * @param level - The level to set the logging to. Default is `\"fatal\"`\n */\nexport const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {\n let numericLevel: number = LEVELS.fatal;\n if (typeof level === 'string') {\n level = level.toLowerCase();\n if (level in LEVELS) {\n numericLevel = LEVELS[level as keyof typeof LEVELS];\n }\n } else if (typeof level === 'number') {\n numericLevel = level;\n }\n log.trace = () => {};\n log.debug = () => {};\n log.info = () => {};\n log.warn = () => {};\n log.error = () => {};\n log.fatal = () => {};\n\n if (numericLevel <= LEVELS.fatal) {\n log.fatal = console.error\n ? console.error.bind(console, format('FATAL'), 'color: orange')\n : console.log.bind(console, '\\x1b[35m', format('FATAL'));\n }\n if (numericLevel <= LEVELS.error) {\n log.error = console.error\n ? console.error.bind(console, format('ERROR'), 'color: orange')\n : console.log.bind(console, '\\x1b[31m', format('ERROR'));\n }\n if (numericLevel <= LEVELS.warn) {\n log.warn = console.warn\n ? console.warn.bind(console, format('WARN'), 'color: orange')\n : console.log.bind(console, `\\x1b[33m`, format('WARN'));\n }\n if (numericLevel <= LEVELS.info) {\n log.info = console.info\n ? console.info.bind(console, format('INFO'), 'color: lightblue')\n : console.log.bind(console, '\\x1b[34m', format('INFO'));\n }\n if (numericLevel <= LEVELS.debug) {\n log.debug = console.debug\n ? console.debug.bind(console, format('DEBUG'), 'color: lightgreen')\n : console.log.bind(console, '\\x1b[32m', format('DEBUG'));\n }\n if (numericLevel <= LEVELS.trace) {\n log.trace = console.debug\n ? console.debug.bind(console, format('TRACE'), 'color: lightgreen')\n : console.log.bind(console, '\\x1b[32m', format('TRACE'));\n }\n};\n\n/**\n * Returns a format with the timestamp and the log level\n *\n * @param level - The level for the log format\n * @returns The format with the timestamp and log level\n */\nconst format = (level: Uppercase<LogLevel>): string => {\n const time = moment().format('ss.SSS');\n return `%c${time} : ${level} : `;\n};\n","import DOMPurify from 'dompurify';\nimport { MermaidConfig } from '../../config.type';\n\n/**\n * Gets the rows of lines in a string\n *\n * @param s - The string to check the lines for\n * @returns The rows in that string\n */\nexport const getRows = (s?: string): string[] => {\n if (!s) {\n return [''];\n }\n const str = breakToPlaceholder(s).replace(/\\\\n/g, '#br#');\n return str.split('#br#');\n};\n\n/**\n * Removes script tags from a text\n *\n * @param txt - The text to sanitize\n * @returns The safer text\n */\nexport const removeScript = (txt: string): string => {\n return DOMPurify.sanitize(txt);\n};\n\nconst sanitizeMore = (text: string, config: MermaidConfig) => {\n if (config.flowchart?.htmlLabels !== false) {\n const level = config.securityLevel;\n if (level === 'antiscript' || level === 'strict') {\n text = removeScript(text);\n } else if (level !== 'loose') {\n text = breakToPlaceholder(text);\n text = text.replace(/</g, '<').replace(/>/g, '>');\n text = text.replace(/=/g, '=');\n text = placeholderToBreak(text);\n }\n }\n return text;\n};\n\nexport const sanitizeText = (text: string, config: MermaidConfig): string => {\n if (!text) {\n return text;\n }\n if (config.dompurifyConfig) {\n text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();\n } else {\n text = DOMPurify.sanitize(sanitizeMore(text, config), {\n FORBID_TAGS: ['style'],\n }).toString();\n }\n return text;\n};\n\nexport const sanitizeTextOrArray = (\n a: string | string[] | string[][],\n config: MermaidConfig\n): string | string[] => {\n if (typeof a === 'string') {\n return sanitizeText(a, config);\n }\n // TODO: Refactor to avoid flat.\n return a.flat().map((x: string) => sanitizeText(x, config));\n};\n\nexport const lineBreakRegex = /<br\\s*\\/?>/gi;\n\n/**\n * Whether or not a text has any line breaks\n *\n * @param text - The text to test\n * @returns Whether or not the text has breaks\n */\nexport const hasBreaks = (text: string): boolean => {\n return lineBreakRegex.test(text);\n};\n\n/**\n * Splits on <br> tags\n *\n * @param text - Text to split\n * @returns List of lines as strings\n */\nexport const splitBreaks = (text: string): string[] => {\n return text.split(lineBreakRegex);\n};\n\n/**\n * Converts placeholders to line breaks in HTML\n *\n * @param s - HTML with placeholders\n * @returns HTML with breaks instead of placeholders\n */\nconst placeholderToBreak = (s: string): string => {\n return s.replace(/#br#/g, '<br/>');\n};\n\n/**\n * Opposite of `placeholderToBreak`, converts breaks to placeholders\n *\n * @param s - HTML string\n * @returns String with placeholders\n */\nconst breakToPlaceholder = (s: string): string => {\n return s.replace(lineBreakRegex, '#br#');\n};\n\n/**\n * Gets the current URL\n *\n * @param useAbsolute - Whether to return the absolute URL or not\n * @returns The current URL\n */\nconst getUrl = (useAbsolute: boolean): string => {\n let url = '';\n if (useAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replaceAll(/\\(/g, '\\\\(');\n url = url.replaceAll(/\\)/g, '\\\\)');\n }\n\n return url;\n};\n\n/**\n * Converts a string/boolean into a boolean\n *\n * @param val - String or boolean to convert\n * @returns The result from the input\n */\nexport const evaluate = (val?: string | boolean): boolean =>\n val === false || ['false', 'null', '0'].includes(String(val).trim().toLowerCase()) ? false : true;\n\n/**\n * Makes generics in typescript syntax\n *\n * @example\n * Array of array of strings in typescript syntax\n *\n * ```js\n * // returns \"Array<Array<string>>\"\n * parseGenericTypes('Array~Array~string~~');\n * ```\n * @param text - The text to convert\n * @returns The converted string\n */\nexport const parseGenericTypes = function (text: string): string {\n let cleanedText = text;\n\n if (text.includes('~')) {\n cleanedText = cleanedText.replace(/~([^~].*)/, '<$1');\n cleanedText = cleanedText.replace(/~([^~]*)$/, '>$1');\n\n return parseGenericTypes(cleanedText);\n } else {\n return cleanedText;\n }\n};\n\nexport default {\n getRows,\n sanitizeText,\n sanitizeTextOrArray,\n hasBreaks,\n splitBreaks,\n lineBreakRegex,\n removeScript,\n getUrl,\n evaluate,\n};\n","import { adjust } from 'khroma';\n\nexport const mkBorder = (col, darkMode) =>\n darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });\n","/**\n * Values that have been hardcoded in src/diagrams/er/styles.js. These can be used by\n * theme-_._ files to maintain display styles until themes, styles, renderers are revised. --\n * 2022-09-22\n */\nexport const oldAttributeBackgroundColorOdd = '#ffffff';\nexport const oldAttributeBackgroundColorEven = '#f2f2f2';\n","import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nimport {\n oldAttributeBackgroundColorEven,\n oldAttributeBackgroundColorOdd,\n} from './erDiagram-oldHardcodedValues';\n\nclass Theme {\n constructor() {\n /** # Base variables */\n /**\n * - Background - used to know what the background color is of the diagram. This is used for\n * deducing colors for instance line color. Default value is #f4f4f4.\n */\n this.background = '#f4f4f4';\n this.darkMode = false;\n\n this.primaryColor = '#fff4dd';\n\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = '#333';\n\n this.THEME_COLOR_LIMIT = 12;\n\n // dark\n\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n }\n updateColors() {\n // The || is to make sure that if the variable has been defined by a user override that value is to be used\n\n /* Main */\n this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);\n this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });\n this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });\n\n this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor =\n this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor =\n this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);\n this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);\n this.noteBkgColor = this.noteBkgColor || '#fff5ad';\n this.noteTextColor = this.noteTextColor || '#333';\n\n this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);\n this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);\n this.lineColor = this.lineColor || invert(this.background);\n this.textColor = this.textColor || this.primaryTextColor;\n\n /* Flowchart variables */\n this.nodeBkg = this.nodeBkg || this.primaryColor;\n this.mainBkg = this.mainBkg || this.primaryColor;\n this.nodeBorder = this.nodeBorder || this.primaryBorderColor;\n this.clusterBkg = this.clusterBkg || this.tertiaryColor;\n this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;\n this.defaultLinkColor = this.defaultLinkColor || this.lineColor;\n this.titleColor = this.titleColor || this.tertiaryTextColor;\n this.edgeLabelBackground =\n this.edgeLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = this.actorBorder || this.primaryBorderColor;\n this.actorBkg = this.actorBkg || this.mainBkg;\n this.actorTextColor = this.actorTextColor || this.primaryTextColor;\n this.actorLineColor = this.actorLineColor || 'grey';\n this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;\n this.signalColor = this.signalColor || this.textColor;\n this.signalTextColor = this.signalTextColor || this.textColor;\n this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;\n this.labelTextColor = this.labelTextColor || this.actorTextColor;\n this.loopTextColor = this.loopTextColor || this.actorTextColor;\n this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);\n this.activationBkgColor = this.activationBkgColor || this.secondaryColor;\n this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;\n this.altSectionBkgColor = this.altSectionBkgColor || 'white';\n this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;\n this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;\n this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';\n this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;\n this.taskBkgColor = this.taskBkgColor || this.primaryColor;\n this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;\n this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);\n this.gridColor = this.gridColor || 'lightgrey';\n this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';\n this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';\n this.critBorderColor = this.critBorderColor || '#ff8888';\n this.critBkgColor = this.critBkgColor || 'red';\n this.todayLineColor = this.todayLineColor || 'red';\n this.taskTextColor = this.taskTextColor || this.textColor;\n this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;\n this.taskTextLightColor = this.taskTextLightColor || this.textColor;\n this.taskTextColor = this.taskTextColor || this.primaryTextColor;\n this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;\n this.taskTextClickableColor = this.taskTextClickableColor || '#003163';\n\n /* Sequence Diagram variables */\n\n this.personBorder = this.personBorder || this.primaryBorderColor;\n this.personBkg = this.personBkg || this.mainBkg;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n /* The color of the text tables of the states*/\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || this.tertiaryColor;\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.nodeBorder;\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n this.transitionColor = this.transitionColor || this.lineColor;\n this.specialStateColor = this.lineColor;\n\n /* Color Scale */\n /* Each color-set will have a background, a foreground and a border color */\n this.cScale0 = this.cScale0 || this.primaryColor;\n this.cScale1 = this.cScale1 || this.secondaryColor;\n this.cScale2 = this.cScale2 || this.tertiaryColor;\n this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });\n this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });\n this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });\n this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });\n this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });\n this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });\n this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });\n this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });\n this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });\n if (this.darkMode) {\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScale' + i] = darken(this['cScale' + i], 75);\n }\n } else {\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScale' + i] = darken(this['cScale' + i], 25);\n }\n }\n\n // Setup the inverted color for the set\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);\n }\n // Setup the peer color for the set, useful for borders\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n if (this.darkMode) {\n this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);\n } else {\n this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);\n }\n }\n\n // Setup teh label color for the set\n this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;\n\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;\n }\n\n /* class */\n this.classText = this.classText || this.textColor;\n\n /* user-journey */\n this.fillType0 = this.fillType0 || this.primaryColor;\n this.fillType1 = this.fillType1 || this.secondaryColor;\n this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });\n this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });\n this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });\n this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });\n\n /* pie */\n this.pie1 = this.pie1 || this.primaryColor;\n this.pie2 = this.pie2 || this.secondaryColor;\n this.pie3 = this.pie3 || this.tertiaryColor;\n this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });\n this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });\n this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });\n this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });\n this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });\n this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });\n this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });\n this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });\n this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground =\n this.relationLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = this.git0 || this.primaryColor;\n this.git1 = this.git1 || this.secondaryColor;\n this.git2 = this.git2 || this.tertiaryColor;\n this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });\n this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });\n this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });\n this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });\n this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });\n if (this.darkMode) {\n this.git0 = lighten(this.git0, 25);\n this.git1 = lighten(this.git1, 25);\n this.git2 = lighten(this.git2, 25);\n this.git3 = lighten(this.git3, 25);\n this.git4 = lighten(this.git4, 25);\n this.git5 = lighten(this.git5, 25);\n this.git6 = lighten(this.git6, 25);\n this.git7 = lighten(this.git7, 25);\n } else {\n this.git0 = darken(this.git0, 25);\n this.git1 = darken(this.git1, 25);\n this.git2 = darken(this.git2, 25);\n this.git3 = darken(this.git3, 25);\n this.git4 = darken(this.git4, 25);\n this.git5 = darken(this.git5, 25);\n this.git6 = darken(this.git6, 25);\n this.git7 = darken(this.git7, 25);\n }\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n this.branchLabelColor =\n this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);\n this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;\n this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;\n this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;\n this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;\n this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;\n this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;\n this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;\n this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n\n /* -------------------------------------------------- */\n /* EntityRelationship diagrams */\n\n this.attributeBackgroundColorOdd =\n this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;\n this.attributeBackgroundColorEven =\n this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;\n /* -------------------------------------------------- */\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, darken, rgba, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\n\nclass Theme {\n constructor() {\n this.background = '#333';\n this.primaryColor = '#1f2020';\n this.secondaryColor = lighten(this.primaryColor, 16);\n\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = invert(this.background);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.mainBkg = '#1f2020';\n this.secondBkg = 'calculated';\n this.mainContrastColor = 'lightgrey';\n this.darkTextColor = lighten(invert('#323D47'), 10);\n this.lineColor = 'calculated';\n this.border1 = '#81B1DB';\n this.border2 = rgba(255, 255, 255, 0.25);\n this.arrowheadColor = 'calculated';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n this.labelBackground = '#181818';\n this.textColor = '#ccc';\n this.THEME_COLOR_LIMIT = 12;\n\n /* Flowchart variables */\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#F9FFFE';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = 'calculated';\n this.activationBkgColor = 'calculated';\n this.sequenceNumberColor = 'black';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = darken('#EAE8D9', 30);\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = '#EAE8D9';\n this.taskBorderColor = rgba(255, 255, 255, 70);\n this.taskBkgColor = 'calculated';\n this.taskTextColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = rgba(255, 255, 255, 50);\n this.activeTaskBkgColor = '#81B1DB';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#E83737';\n this.critBkgColor = '#E83737';\n this.taskTextDarkColor = 'calculated';\n this.todayLineColor = '#DB5757';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'calculated';\n\n this.errorBkgColor = '#a44141';\n this.errorTextColor = '#ddd';\n }\n updateColors() {\n this.secondBkg = lighten(this.mainBkg, 16);\n this.lineColor = this.mainContrastColor;\n this.arrowheadColor = this.mainContrastColor;\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.edgeLabelBackground = lighten(this.labelBackground, 25);\n\n /* Sequence Diagram variables */\n\n this.actorBorder = this.border1;\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.mainContrastColor;\n this.actorLineColor = this.mainContrastColor;\n this.signalColor = this.mainContrastColor;\n this.signalTextColor = this.mainContrastColor;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.mainContrastColor;\n this.loopTextColor = this.mainContrastColor;\n this.noteBorderColor = this.secondaryBorderColor;\n this.noteBkgColor = this.secondBkg;\n this.noteTextColor = this.secondaryTextColor;\n this.activationBorderColor = this.border1;\n this.activationBkgColor = this.secondBkg;\n\n /* Gantt chart variables */\n\n this.altSectionBkgColor = this.background;\n this.taskBkgColor = lighten(this.mainBkg, 23);\n this.taskTextColor = this.darkTextColor;\n this.taskTextLightColor = this.mainContrastColor;\n this.taskTextOutsideColor = this.taskTextLightColor;\n this.gridColor = this.mainContrastColor;\n this.doneTaskBkgColor = this.mainContrastColor;\n this.taskTextDarkColor = this.darkTextColor;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#555';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.primaryBorderColor;\n this.specialStateColor = '#f4f4f4'; // this.lineColor;\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n /* cScale */\n this.cScale1 = this.cScale1 || '#0b0000';\n this.cScale2 = this.cScale2 || '#4d1037';\n this.cScale3 = this.cScale3 || '#3f5258';\n this.cScale4 = this.cScale4 || '#4f2f1b';\n this.cScale5 = this.cScale5 || '#6e0a0a';\n this.cScale6 = this.cScale6 || '#3b0048';\n this.cScale7 = this.cScale7 || '#995a01';\n this.cScale8 = this.cScale8 || '#154706';\n this.cScale9 = this.cScale9 || '#161722';\n this.cScale10 = this.cScale10 || '#00296f';\n this.cScale11 = this.cScale11 || '#01629c';\n this.cScale12 = this.cScale12 || '#010029';\n\n /* Color Scale */\n /* Each color-set will have a background, a foreground and a border color */\n this.cScale0 = this.cScale0 || this.primaryColor;\n this.cScale1 = this.cScale1 || this.secondaryColor;\n this.cScale2 = this.cScale2 || this.tertiaryColor;\n this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });\n this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });\n this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });\n this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });\n this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });\n this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });\n this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });\n this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });\n this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });\n\n // Setup the inverted color for the set\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);\n }\n // Setup the peer color for the set, useful for borders\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);\n }\n\n // Setup teh label color for the set\n this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);\n\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;\n }\n\n /* Pie diagram */\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['pie' + i] = this['cScale' + i];\n }\n this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n this.pieStrokeColor = this.pieStrokeColor || 'black';\n this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* class */\n this.classText = this.primaryTextColor;\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n this.relationColor = this.relationColor || this.lineColor;\n this.relationLabelBackground =\n this.relationLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n /* git */\n this.git0 = lighten(this.secondaryColor, 20);\n this.git1 = lighten(this.pie2 || this.secondaryColor, 20);\n this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);\n this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);\n this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);\n this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);\n this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);\n this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);\n this.gitInv0 = this.gitInv0 || invert(this.git0);\n this.gitInv1 = this.gitInv1 || invert(this.git1);\n this.gitInv2 = this.gitInv2 || invert(this.git2);\n this.gitInv3 = this.gitInv3 || invert(this.git3);\n this.gitInv4 = this.gitInv4 || invert(this.git4);\n this.gitInv5 = this.gitInv5 || invert(this.git5);\n this.gitInv6 = this.gitInv6 || invert(this.git6);\n this.gitInv7 = this.gitInv7 || invert(this.git7);\n\n this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n\n /* -------------------------------------------------- */\n /* EntityRelationship diagrams */\n\n this.attributeBackgroundColorOdd =\n this.attributeBackgroundColorOdd || lighten(this.background, 12);\n this.attributeBackgroundColorEven =\n this.attributeBackgroundColorEven || lighten(this.background, 2);\n /* -------------------------------------------------- */\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach((k) => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = (userOverrides) => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, rgba, adjust, darken } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nimport {\n oldAttributeBackgroundColorEven,\n oldAttributeBackgroundColorOdd,\n} from './erDiagram-oldHardcodedValues';\n\nclass Theme {\n constructor() {\n /* Base variables */\n this.background = '#f4f4f4';\n this.primaryColor = '#ECECFF';\n\n this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n this.secondaryColor = '#ffffde';\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.background = 'white';\n this.mainBkg = '#ECECFF';\n this.secondBkg = '#ffffde';\n this.lineColor = '#333333';\n this.border1 = '#9370DB';\n this.border2 = '#aaaa33';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial, sans-serif';\n this.fontSize = '16px';\n this.labelBackground = '#e8e8e8';\n this.textColor = '#333';\n this.THEME_COLOR_LIMIT = 12;\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = 'calculated';\n this.excludeBkgColor = '#eeeeee';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.taskTextClickableColor = 'calculated';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n this.sectionBkgColor = rgba(102, 102, 255, 0.49);\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#fff400';\n this.taskBorderColor = '#534fbc';\n this.taskBkgColor = '#8a90dd';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = '#534fbc';\n this.activeTaskBkgColor = '#bfc7ff';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* C4 Context Diagram variables */\n\n this.personBorder = 'calculated';\n this.personBkg = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n this.updateColors();\n }\n updateColors() {\n /* Color Scale */\n /* Each color-set will have a background, a foreground and a border color */\n this.cScale0 = this.cScale0 || this.primaryColor;\n this.cScale1 = this.cScale1 || this.secondaryColor;\n this.cScale2 = this.cScale2 || this.tertiaryColor;\n this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });\n this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });\n this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });\n this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });\n this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });\n this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });\n this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });\n this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });\n this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });\n this['cScalePeer' + 1] = this['cScalePeer' + 1] || darken(this.secondaryColor, 45);\n this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n // Setup the peer color for the set, useful for borders\n this['cScale' + i] = darken(this['cScale' + i], 10);\n this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);\n }\n\n // Setup the inverted color for the set\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });\n }\n\n // Setup the label color for the set\n this.scaleLabelColor =\n this.scaleLabelColor !== 'calculated' && this.scaleLabelColor\n ? this.scaleLabelColor\n : this.labelTextColor;\n\n if (this.labelTextColor !== 'calculated') {\n this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor);\n this.cScaleLabel3 = this.cScaleLabel3 || invert(this.labelTextColor);\n for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {\n this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.labelTextColor;\n }\n }\n\n /* Flowchart variables */\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1; // border 1\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.textColor;\n this.edgeLabelBackground = this.labelBackground;\n\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.signalColor = this.textColor;\n this.signalTextColor = this.textColor;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n\n /* state colors */\n this.transitionColor = this.transitionColor || this.lineColor;\n this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n this.stateBkg = this.stateBkg || this.mainBkg;\n this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n this.altBackground = this.altBackground || '#f0f0f0';\n this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n this.compositeBorder = this.compositeBorder || this.nodeBorder;\n this.innerEndBackground = this.nodeBorder;\n this.specialStateColor = this.lineColor;\n\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n this.transitionColor = this.transitionColor || this.lineColor;\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.