mermaid
Version:
Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.
4 lines • 240 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/logger.ts", "../../../src/diagram-api/regexes.ts", "../../../src/errors.ts", "../../../src/diagram-api/detectType.ts", "../../../src/assignWithDepth.ts", "../../../src/themes/theme-base.js", "../../../src/themes/erDiagram-oldHardcodedValues.ts", "../../../src/themes/theme-helpers.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/schemas/config.schema.yaml", "../../../src/defaultConfig.ts", "../../../src/utils/sanitizeDirective.ts", "../../../src/config.ts", "../../../src/diagrams/common/common.ts", "../../../src/setupGraphViewbox.js", "../../../src/styles.ts", "../../../src/diagrams/common/commonDb.ts", "../../../src/diagram-api/diagramAPI.ts"],
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-function */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/* eslint-disable no-console */\nimport dayjs from 'dayjs';\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 = 'fatal') {\n let numericLevel: number = LEVELS.fatal;\n if (typeof level === 'string') {\n if (level.toLowerCase() in LEVELS) {\n numericLevel = LEVELS[level];\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 = dayjs().format('ss.SSS');\n return `%c${time} : ${level} : `;\n};\n", "// Match Jekyll-style front matter blocks (https://jekyllrb.com/docs/front-matter/).\n// Based on regex used by Jekyll: https://github.com/jekyll/jekyll/blob/6dd3cc21c40b98054851846425af06c64f9fb466/lib/jekyll/document.rb#L10\n// Note that JS doesn't support the \"\\A\" anchor, which means we can't use\n// multiline mode.\n// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents\nexport const frontMatterRegex = /^-{3}\\s*[\\n\\r](.*?)[\\n\\r]-{3}\\s*[\\n\\r]+/s;\n\nexport const directiveRegex =\n /%{2}{\\s*(?:(\\w+)\\s*:|(\\w+))\\s*(?:(\\w+)|((?:(?!}%{2}).|\\r?\\n)*))?\\s*(?:}%{2})?/gi;\n\nexport const anyCommentRegex = /\\s*%%.*\\n/gm;\n", "export class UnknownDiagramError extends Error {\n constructor(message: string) {\n super(message);\n this.name = 'UnknownDiagramError';\n }\n}\n", "import type { MermaidConfig } from '../config.type.js';\nimport { log } from '../logger.js';\nimport type {\n DetectorRecord,\n DiagramDetector,\n DiagramLoader,\n ExternalDiagramDefinition,\n} from './types.js';\nimport { anyCommentRegex, directiveRegex, frontMatterRegex } from './regexes.js';\nimport { UnknownDiagramError } from '../errors.js';\n\nexport const detectors: Record<string, DetectorRecord> = {};\n\n/**\n * Detects the type of the graph text.\n *\n * Takes into consideration the possible existence of an `%%init` directive\n *\n * @param text - The text defining the graph. For example:\n *\n * ```mermaid\n * %%{initialize: {\"startOnLoad\": true, logLevel: \"fatal\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param config - The mermaid config.\n * @returns A graph definition key\n */\nexport const detectType = function (text: string, config?: MermaidConfig): string {\n text = text\n .replace(frontMatterRegex, '')\n .replace(directiveRegex, '')\n .replace(anyCommentRegex, '\\n');\n for (const [key, { detector }] of Object.entries(detectors)) {\n const diagram = detector(text, config);\n if (diagram) {\n return key;\n }\n }\n\n throw new UnknownDiagramError(\n `No diagram type detected matching given configuration for text: ${text}`\n );\n};\n\n/**\n * Registers lazy-loaded diagrams to Mermaid.\n *\n * The diagram function is loaded asynchronously, so that diagrams are only loaded\n * if the diagram is detected.\n *\n * @remarks\n * Please note that the order of diagram detectors is important.\n * The first detector to return `true` is the diagram that will be loaded\n * and used, so put more specific detectors at the beginning!\n *\n * @param diagrams - Diagrams to lazy load, and their detectors, in order of importance.\n */\nexport const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {\n for (const { id, detector, loader } of diagrams) {\n addDetector(id, detector, loader);\n }\n};\n\nexport const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {\n if (detectors[key]) {\n log.warn(`Detector with key ${key} already exists. Overwriting.`);\n }\n detectors[key] = { detector, loader };\n log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`);\n};\n\nexport const getDiagramLoader = (key: string) => {\n return detectors[key].loader;\n};\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * assignWithDepth Extends the functionality of {@link Object.assign} with the\n * ability to merge arbitrary-depth objects For each key in src with path `k` (recursively)\n * performs an Object.assign(dst[`k`], src[`k`]) with a slight change from the typical handling of\n * undefined for dst[`k`]: instead of raising an error, dst[`k`] is auto-initialized to `{}` and\n * effectively merged with src[`k`]<p> Additionally, dissimilar types will not clobber unless the\n * config.clobber parameter === true. Example:\n *\n * ```\n * const config_0 = { foo: { bar: 'bar' }, bar: 'foo' };\n * const config_1 = { foo: 'foo', bar: 'bar' };\n * const result = assignWithDepth(config_0, config_1);\n * console.log(result);\n * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }\n * ```\n *\n * Traditional Object.assign would have clobbered foo in config_0 with foo in config_1. If src is a\n * destructured array of objects and dst is not an array, assignWithDepth will apply each element\n * of src to dst in order.\n * @param dst - The destination of the merge\n * @param src - The source object(s) to merge into destination\n * @param config -\n * * depth: depth to traverse within src and dst for merging\n * * clobber: should dissimilar types clobber\n */\nconst assignWithDepth = (\n dst: any,\n src: any,\n { depth = 2, clobber = false }: { depth?: number; clobber?: boolean } = {}\n): any => {\n const config: { depth: number; clobber: boolean } = { depth, clobber };\n if (Array.isArray(src) && !Array.isArray(dst)) {\n src.forEach((s) => assignWithDepth(dst, s, config));\n return dst;\n } else if (Array.isArray(src) && Array.isArray(dst)) {\n src.forEach((s) => {\n if (!dst.includes(s)) {\n dst.push(s);\n }\n });\n return dst;\n }\n if (dst === undefined || depth <= 0) {\n if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {\n return Object.assign(dst, src);\n } else {\n return src;\n }\n }\n if (src !== undefined && typeof dst === 'object' && typeof src === 'object') {\n Object.keys(src).forEach((key) => {\n if (\n typeof src[key] === 'object' &&\n (dst[key] === undefined || typeof dst[key] === 'object')\n ) {\n if (dst[key] === undefined) {\n dst[key] = Array.isArray(src[key]) ? [] : {};\n }\n dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });\n } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {\n dst[key] = src[key];\n }\n });\n }\n return dst;\n};\n\nexport default assignWithDepth;\n", "import { adjust, darken, invert, isDark, lighten } from 'khroma';\nimport {\n oldAttributeBackgroundColorEven,\n oldAttributeBackgroundColorOdd,\n} from './erDiagram-oldHardcodedValues.js';\nimport { mkBorder } from './theme-helpers.js';\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\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.arrowheadColor = this.arrowheadColor || invert(this.background);\n this.textColor = this.textColor || this.primaryTextColor;\n\n // TODO: should this instead default to secondaryBorderColor?\n this.border2 = this.border2 || this.tertiaryBorderColor;\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 || this.actorBorder;\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.vertLineColor = this.vertLineColor || 'navy';\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 /* ER diagram */\n\n if (this.darkMode) {\n this.rowOdd = this.rowOdd || darken(this.mainBkg, 5) || '#ffffff';\n this.rowEven = this.rowEven || darken(this.mainBkg, 10);\n } else {\n this.rowOdd = this.rowOdd || lighten(this.mainBkg, 75) || '#ffffff';\n this.rowEven = this.rowEven || lighten(this.mainBkg, 5);\n }\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 the 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 const multiplier = this.darkMode ? -4 : -1;\n for (let i = 0; i < 5; i++) {\n this['surface' + i] =\n this['surface' + i] ||\n adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });\n this['surfacePeer' + i] =\n this['surfacePeer' + i] ||\n adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });\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.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';\n this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* radar */\n this.radar = {\n axisColor: this.radar?.axisColor || this.lineColor,\n axisStrokeWidth: this.radar?.axisStrokeWidth || 2,\n axisLabelFontSize: this.radar?.axisLabelFontSize || 12,\n curveOpacity: this.radar?.curveOpacity || 0.5,\n curveStrokeWidth: this.radar?.curveStrokeWidth || 2,\n graticuleColor: this.radar?.graticuleColor || '#DEDEDE',\n graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,\n graticuleOpacity: this.radar?.graticuleOpacity || 0.3,\n legendBoxSize: this.radar?.legendBoxSize || 12,\n legendFontSize: this.radar?.legendFontSize || 12,\n };\n\n /* architecture */\n this.archEdgeColor = this.archEdgeColor || '#777';\n this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';\n this.archEdgeWidth = this.archEdgeWidth || '3';\n this.archGroupBorderColor = this.archGroupBorderColor || '#000';\n this.archGroupBorderWidth = this.archGroupBorderWidth || '2px';\n\n /* quadrant-graph */\n this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;\n this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });\n this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });\n this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });\n this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;\n this.quadrant2TextFill =\n this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });\n this.quadrant3TextFill =\n this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });\n this.quadrant4TextFill =\n this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });\n this.quadrantPointFill =\n this.quadrantPointFill || isDark(this.quadrant1Fill)\n ? lighten(this.quadrant1Fill)\n : darken(this.quadrant1Fill);\n this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;\n this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;\n this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;\n this.quadrantInternalBorderStrokeFill =\n this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;\n this.quadrantExternalBorderStrokeFill =\n this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;\n this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;\n\n /* xychart */\n this.xyChart = {\n backgroundColor: this.xyChart?.backgroundColor || this.background,\n titleColor: this.xyChart?.titleColor || this.primaryTextColor,\n xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,\n xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,\n xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,\n xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,\n yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,\n yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,\n yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,\n yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,\n plotColorPalette:\n this.xyChart?.plotColorPalette ||\n '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',\n };\n\n /* requirement-diagram */\n this.requirementBackground = this.requirementBackground || this.primaryColor;\n this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n this.requirementBorderSize = this.requirementBorderSize || '1';\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", "/**\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 { adjust } from 'khroma';\n\nexport const mkBorder = (col, darkMode) =>\n darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });\n", "import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma';\nimport { mkBorder } from './theme-helpers.js';\n\nclass Theme {\n constructor() {\n this.background = '#333';\n this.primaryColor = '#1f2020';\n this.secondaryColor = lighten(this.primaryColor, 16);\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 = '#ccc';\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.excludeBkgColor = darken(this.sectionBkgColor, 10);\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 this.vertLineColor = '#00BFFF';\n\n /* C4 Context Diagram variables */\n this.personBorder = this.primaryBorderColor;\n this.personBkg = this.mainBkg;\n\n /* Architecture Diagram variables */\n this.archEdgeColor = 'calculated';\n this.archEdgeArrowColor = 'calculated';\n this.archEdgeWidth = '3';\n this.archGroupBorderColor = this.primaryBorderColor;\n this.archGroupBorderWidth = '2px';\n\n /* Entity Relationship variables */\n this.rowOdd = this.rowOdd || lighten(this.mainBkg, 5) || '#ffffff';\n this.rowEven = this.rowEven || darken(this.mainBkg, 10);\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.actorBorder;\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 /* Architecture Diagram variables */\n this.archEdgeColor = this.lineColor;\n this.archEdgeArrowColor = this.lineColor;\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 for (let i = 0; i < 5; i++) {\n this['surface' + i] =\n this['surface' + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-10 + i * 4) });\n this['surfacePeer' + i] =\n this['surfacePeer' + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) });\n }\n\n // Setup the 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.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';\n this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';\n this.pieOpacity = this.pieOpacity || '0.7';\n\n /* quadrant-graph */\n this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;\n this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });\n this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });\n this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });\n this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;\n this.quadrant2TextFill =\n this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });\n this.quadrant3TextFill =\n this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });\n this.quadrant4TextFill =\n this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });\n this.quadrantPointFill =\n this.quadrantPointFill || isDark(this.quadrant1Fill)\n ? lighten(this.quadrant1Fill)\n : darken(this.quadrant1Fill);\n this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;\n this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;\n this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;\n this.quadrantInternalBorderStrokeFill =\n this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;\n this.quadrantExternalBorderStrokeFill =\n this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;\n this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;\n\n /* xychart */\n this.xyChart = {\n backgroundColor: this.xyChart?.backgroundColor || this.background,\n titleColor: this.xyChart?.titleColor || this.primaryTextColor,\n xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,\n xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,\n xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,\n xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,\n yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,\n yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,\n yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,\n yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,\n plotColorPalette:\n this.xyChart?.plotColorPalette ||\n '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22',\n };\n\n this.packet = {\n startByteColor: this.primaryTextColor,\n endByteColor: this.primaryTextColor,\n labelColor: this.primaryTextColor,\n titleColor: this.primaryTextColor,\n blockStrokeColor: this.primaryTextColor,\n blockFillColor: this.background,\n };\n\n /* radar */\n this.radar = {\n axisColor: this.radar?.axisColor || this.lineColor,\n axisStrokeWidth: this.radar?.axisStrokeWidth || 2,\n axisLabelFontSize: this.radar?.axisLabelFontSize || 12,\n curveOpacity: this.radar?.curveOpacity || 0.5,\n curveStrokeWidth: this.radar?.curveStrokeWidth || 2,\n graticuleColor: this.radar?.graticuleColor || '#DEDEDE',\n graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,\n graticuleOpacity: this.radar?.graticuleOpacity || 0.3,\n legendBoxSize: this.radar?.legendBoxSize || 12,\n legendFontSize: this.radar?.legendFontSize || 12,\n };\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 || '1';\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 this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);\n this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;\n this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;\n this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);\n this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;\n this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;\n this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;\n this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;\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 this.nodeBorder = this.nodeBorder || '#999';\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, isDark } from 'khroma';\nimport { mkBorder } from './theme-helpers.js';\nimport {\n oldAttributeBackgroundColorEven,\n oldAttributeBackgroundColorOdd,\n} from './erDiagram-oldHardcodedValues.js';\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 = '#3333