mermaid

Version:

Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.

github.com/mermaid-js/mermaid

mermaid-js/mermaid

4 lines • 387 kB

Source Map (JSON)

View Raw

{ "version": 3, "sources": ["../../../src/diagram-api/regexes.ts", "../../../src/errors.ts", "../../../src/diagram-api/detectType.ts", "../../../src/assignWithDepth.ts", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/utils/channel.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/utils/lang.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/utils/unit.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/utils/index.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/constants.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/channels/type.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/channels/index.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/channels/reusable.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/color/hex.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/color/hsl.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/color/keyword.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/color/rgb.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/color/index.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/change.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/rgba.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/channel.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/luminance.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/is_light.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/is_dark.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/adjust_channel.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/lighten.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/darken.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/adjust.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/mix.js", "../../../../../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/invert.js", "../../../src/themes/erDiagram-oldHardcodedValues.ts", "../../../src/themes/theme-helpers.js", "../../../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/schemas/config.schema.yaml", "../../../src/defaultConfig.ts", "../../../src/utils/sanitizeDirective.ts", "../../../src/config.ts", "../../../../../node_modules/.pnpm/dompurify@3.2.6/node_modules/dompurify/src/utils.ts", "../../../../../node_modules/.pnpm/dompurify@3.2.6/node_modules/dompurify/src/tags.ts", "../../../../../node_modules/.pnpm/dompurify@3.2.6/node_modules/dompurify/src/attrs.ts", "../../../../../node_modules/.pnpm/dompurify@3.2.6/node_modules/dompurify/src/regexp.ts", "../../../../../node_modules/.pnpm/dompurify@3.2.6/node_modules/dompurify/src/purify.ts", "../../../src/diagrams/common/common.ts", "../../../src/setupGraphViewbox.js", "../../../src/styles.ts", "../../../src/diagrams/common/commonDb.ts", "../../../src/diagram-api/diagramAPI.ts"], "sourcesContent": ["// 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 */\n/* MAIN */\nconst Channel = {\n /* CLAMP */\n min: {\n r: 0,\n g: 0,\n b: 0,\n s: 0,\n l: 0,\n a: 0\n },\n max: {\n r: 255,\n g: 255,\n b: 255,\n h: 360,\n s: 100,\n l: 100,\n a: 1\n },\n clamp: {\n r: (r) => r >= 255 ? 255 : (r < 0 ? 0 : r),\n g: (g) => g >= 255 ? 255 : (g < 0 ? 0 : g),\n b: (b) => b >= 255 ? 255 : (b < 0 ? 0 : b),\n h: (h) => h % 360,\n s: (s) => s >= 100 ? 100 : (s < 0 ? 0 : s),\n l: (l) => l >= 100 ? 100 : (l < 0 ? 0 : l),\n a: (a) => a >= 1 ? 1 : (a < 0 ? 0 : a)\n },\n /* CONVERSION */\n //SOURCE: https://planetcalc.com/7779\n toLinear: (c) => {\n const n = c / 255;\n return c > .03928 ? Math.pow(((n + .055) / 1.055), 2.4) : n / 12.92;\n },\n //SOURCE: https://gist.github.com/mjackson/5311256\n hue2rgb: (p, q, t) => {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n },\n hsl2rgb: ({ h, s, l }, channel) => {\n if (!s)\n return l * 2.55; // Achromatic\n h /= 360;\n s /= 100;\n l /= 100;\n const q = (l < .5) ? l * (1 + s) : (l + s) - (l * s);\n const p = 2 * l - q;\n switch (channel) {\n case 'r': return Channel.hue2rgb(p, q, h + 1 / 3) * 255;\n case 'g': return Channel.hue2rgb(p, q, h) * 255;\n case 'b': return Channel.hue2rgb(p, q, h - 1 / 3) * 255;\n }\n },\n rgb2hsl: ({ r, g, b }, channel) => {\n r /= 255;\n g /= 255;\n b /= 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const l = (max + min) / 2;\n if (channel === 'l')\n return l * 100;\n if (max === min)\n return 0; // Achromatic\n const d = max - min;\n const s = (l > .5) ? d / (2 - max - min) : d / (max + min);\n if (channel === 's')\n return s * 100;\n switch (max) {\n case r: return ((g - b) / d + (g < b ? 6 : 0)) * 60;\n case g: return ((b - r) / d + 2) * 60;\n case b: return ((r - g) / d + 4) * 60;\n default: return -1; //TSC: TypeScript is stupid and complains if there isn't this useless default statement\n }\n }\n};\n/* EXPORT */\nexport default Channel;\n", "/* MAIN */\nconst Lang = {\n /* API */\n clamp: (number, lower, upper) => {\n if (lower > upper)\n return Math.min(lower, Math.max(upper, number));\n return Math.min(upper, Math.max(lower, number));\n },\n round: (number) => {\n return Math.round(number * 10000000000) / 10000000000;\n }\n};\n/* EXPORT */\nexport default Lang;\n", "/* MAIN */\nconst Unit = {\n /* API */\n dec2hex: (dec) => {\n const hex = Math.round(dec).toString(16);\n return hex.length > 1 ? hex : `0${hex}`;\n }\n};\n/* EXPORT */\nexport default Unit;\n", "/* IMPORT */\nimport channel from './channel.js';\nimport lang from './lang.js';\nimport unit from './unit.js';\n/* MAIN */\nconst Utils = {\n channel,\n lang,\n unit\n};\n/* EXPORT */\nexport default Utils;\n", "/* IMPORT */\nimport _ from './utils/index.js';\n/* MAIN */\nconst DEC2HEX = {};\nfor (let i = 0; i <= 255; i++)\n DEC2HEX[i] = _.unit.dec2hex(i); // Populating dynamically, striking a balance between code size and performance\nconst TYPE = {\n ALL: 0,\n RGB: 1,\n HSL: 2\n};\n/* EXPORT */\nexport { DEC2HEX, TYPE };\n", "/* IMPORT */\nimport { TYPE } from '../constants.js';\n/* MAIN */\nclass Type {\n constructor() {\n /* VARIABLES */\n this.type = TYPE.ALL;\n }\n /* API */\n get() {\n return this.type;\n }\n set(type) {\n if (this.type && this.type !== type)\n throw new Error('Cannot change both RGB and HSL channels at the same time');\n this.type = type;\n }\n reset() {\n this.type = TYPE.ALL;\n }\n is(type) {\n return this.type === type;\n }\n}\n/* EXPORT */\nexport default Type;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Type from './type.js';\nimport { TYPE } from '../constants.js';\n/* MAIN */\nclass Channels {\n /* CONSTRUCTOR */\n constructor(data, color) {\n this.color = color;\n this.changed = false;\n this.data = data; //TSC\n this.type = new Type();\n }\n /* API */\n set(data, color) {\n this.color = color;\n this.changed = false;\n this.data = data; //TSC\n this.type.type = TYPE.ALL;\n return this;\n }\n /* HELPERS */\n _ensureHSL() {\n const data = this.data;\n const { h, s, l } = data;\n if (h === undefined)\n data.h = _.channel.rgb2hsl(data, 'h');\n if (s === undefined)\n data.s = _.channel.rgb2hsl(data, 's');\n if (l === undefined)\n data.l = _.channel.rgb2hsl(data, 'l');\n }\n _ensureRGB() {\n const data = this.data;\n const { r, g, b } = data;\n if (r === undefined)\n data.r = _.channel.hsl2rgb(data, 'r');\n if (g === undefined)\n data.g = _.channel.hsl2rgb(data, 'g');\n if (b === undefined)\n data.b = _.channel.hsl2rgb(data, 'b');\n }\n /* GETTERS */\n get r() {\n const data = this.data;\n const r = data.r;\n if (!this.type.is(TYPE.HSL) && r !== undefined)\n return r;\n this._ensureHSL();\n return _.channel.hsl2rgb(data, 'r');\n }\n get g() {\n const data = this.data;\n const g = data.g;\n if (!this.type.is(TYPE.HSL) && g !== undefined)\n return g;\n this._ensureHSL();\n return _.channel.hsl2rgb(data, 'g');\n }\n get b() {\n const data = this.data;\n const b = data.b;\n if (!this.type.is(TYPE.HSL) && b !== undefined)\n return b;\n this._ensureHSL();\n return _.channel.hsl2rgb(data, 'b');\n }\n get h() {\n const data = this.data;\n const h = data.h;\n if (!this.type.is(TYPE.RGB) && h !== undefined)\n return h;\n this._ensureRGB();\n return _.channel.rgb2hsl(data, 'h');\n }\n get s() {\n const data = this.data;\n const s = data.s;\n if (!this.type.is(TYPE.RGB) && s !== undefined)\n return s;\n this._ensureRGB();\n return _.channel.rgb2hsl(data, 's');\n }\n get l() {\n const data = this.data;\n const l = data.l;\n if (!this.type.is(TYPE.RGB) && l !== undefined)\n return l;\n this._ensureRGB();\n return _.channel.rgb2hsl(data, 'l');\n }\n get a() {\n return this.data.a;\n }\n /* SETTERS */\n set r(r) {\n this.type.set(TYPE.RGB);\n this.changed = true;\n this.data.r = r;\n }\n set g(g) {\n this.type.set(TYPE.RGB);\n this.changed = true;\n this.data.g = g;\n }\n set b(b) {\n this.type.set(TYPE.RGB);\n this.changed = true;\n this.data.b = b;\n }\n set h(h) {\n this.type.set(TYPE.HSL);\n this.changed = true;\n this.data.h = h;\n }\n set s(s) {\n this.type.set(TYPE.HSL);\n this.changed = true;\n this.data.s = s;\n }\n set l(l) {\n this.type.set(TYPE.HSL);\n this.changed = true;\n this.data.l = l;\n }\n set a(a) {\n this.changed = true;\n this.data.a = a;\n }\n}\n/* EXPORT */\nexport default Channels;\n", "/* IMPORT */\nimport Channels from './/index.js';\n/* MAIN */\nconst channels = new Channels({ r: 0, g: 0, b: 0, a: 0 }, 'transparent');\n/* EXPORT */\nexport default channels;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport ChannelsReusable from '../channels/reusable.js';\nimport { DEC2HEX } from '../constants.js';\n/* MAIN */\nconst Hex = {\n /* VARIABLES */\n re: /^#((?:[a-f0-9]{2}){2,4}|[a-f0-9]{3})$/i,\n /* API */\n parse: (color) => {\n if (color.charCodeAt(0) !== 35)\n return; // '#'\n const match = color.match(Hex.re);\n if (!match)\n return;\n const hex = match[1];\n const dec = parseInt(hex, 16);\n const length = hex.length;\n const hasAlpha = length % 4 === 0;\n const isFullLength = length > 4;\n const multiplier = isFullLength ? 1 : 17;\n const bits = isFullLength ? 8 : 4;\n const bitsOffset = hasAlpha ? 0 : -1;\n const mask = isFullLength ? 255 : 15;\n return ChannelsReusable.set({\n r: ((dec >> (bits * (bitsOffset + 3))) & mask) * multiplier,\n g: ((dec >> (bits * (bitsOffset + 2))) & mask) * multiplier,\n b: ((dec >> (bits * (bitsOffset + 1))) & mask) * multiplier,\n a: hasAlpha ? (dec & mask) * multiplier / 255 : 1\n }, color);\n },\n stringify: (channels) => {\n const { r, g, b, a } = channels;\n if (a < 1) { // #RRGGBBAA\n return `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}${DEC2HEX[Math.round(a * 255)]}`;\n }\n else { // #RRGGBB\n return `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}`;\n }\n }\n};\n/* EXPORT */\nexport default Hex;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport ChannelsReusable from '../channels/reusable.js';\n/* MAIN */\nconst HSL = {\n /* VARIABLES */\n re: /^hsla?\$\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e-?\\d+)?(?:deg|grad|rad|turn)?)\\s*?(?:,|\\s)\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e-?\\d+)?%)\\s*?(?:,|\\s)\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e-?\\d+)?%)(?:\\s*?(?:,|\\/)\\s*?\\+?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e-?\\d+)?(%)?))?\\s*?\$$/i,\n hueRe: /^(.+?)(deg|grad|rad|turn)$/i,\n /* HELPERS */\n _hue2deg: (hue) => {\n const match = hue.match(HSL.hueRe);\n if (match) {\n const [, number, unit] = match;\n switch (unit) {\n case 'grad': return _.channel.clamp.h(parseFloat(number) * .9);\n case 'rad': return _.channel.clamp.h(parseFloat(number) * 180 / Math.PI);\n case 'turn': return _.channel.clamp.h(parseFloat(number) * 360);\n }\n }\n return _.channel.clamp.h(parseFloat(hue));\n },\n /* API */\n parse: (color) => {\n const charCode = color.charCodeAt(0);\n if (charCode !== 104 && charCode !== 72)\n return; // 'h'/'H'\n const match = color.match(HSL.re);\n if (!match)\n return;\n const [, h, s, l, a, isAlphaPercentage] = match;\n return ChannelsReusable.set({\n h: HSL._hue2deg(h),\n s: _.channel.clamp.s(parseFloat(s)),\n l: _.channel.clamp.l(parseFloat(l)),\n a: a ? _.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1\n }, color);\n },\n stringify: (channels) => {\n const { h, s, l, a } = channels;\n if (a < 1) { // HSLA\n return `hsla(${_.lang.round(h)}, ${_.lang.round(s)}%, ${_.lang.round(l)}%, ${a})`;\n }\n else { // HSL\n return `hsl(${_.lang.round(h)}, ${_.lang.round(s)}%, ${_.lang.round(l)}%)`;\n }\n }\n};\n/* EXPORT */\nexport default HSL;\n", "/* IMPORT */\nimport Hex from './hex.js';\n/* MAIN */\nconst Keyword = {\n /* VARIABLES */\n colors: {\n aliceblue: '#f0f8ff',\n antiquewhite: '#faebd7',\n aqua: '#00ffff',\n aquamarine: '#7fffd4',\n azure: '#f0ffff',\n beige: '#f5f5dc',\n bisque: '#ffe4c4',\n black: '#000000',\n blanchedalmond: '#ffebcd',\n blue: '#0000ff',\n blueviolet: '#8a2be2',\n brown: '#a52a2a',\n burlywood: '#deb887',\n cadetblue: '#5f9ea0',\n chartreuse: '#7fff00',\n chocolate: '#d2691e',\n coral: '#ff7f50',\n cornflowerblue: '#6495ed',\n cornsilk: '#fff8dc',\n crimson: '#dc143c',\n cyanaqua: '#00ffff',\n darkblue: '#00008b',\n darkcyan: '#008b8b',\n darkgoldenrod: '#b8860b',\n darkgray: '#a9a9a9',\n darkgreen: '#006400',\n darkgrey: '#a9a9a9',\n darkkhaki: '#bdb76b',\n darkmagenta: '#8b008b',\n darkolivegreen: '#556b2f',\n darkorange: '#ff8c00',\n darkorchid: '#9932cc',\n darkred: '#8b0000',\n darksalmon: '#e9967a',\n darkseagreen: '#8fbc8f',\n darkslateblue: '#483d8b',\n darkslategray: '#2f4f4f',\n darkslategrey: '#2f4f4f',\n darkturquoise: '#00ced1',\n darkviolet: '#9400d3',\n deeppink: '#ff1493',\n deepskyblue: '#00bfff',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1e90ff',\n firebrick: '#b22222',\n floralwhite: '#fffaf0',\n forestgreen: '#228b22',\n fuchsia: '#ff00ff',\n gainsboro: '#dcdcdc',\n ghostwhite: '#f8f8ff',\n gold: '#ffd700',\n goldenrod: '#daa520',\n gray: '#808080',\n green: '#008000',\n greenyellow: '#adff2f',\n grey: '#808080',\n honeydew: '#f0fff0',\n hotpink: '#ff69b4',\n indianred: '#cd5c5c',\n indigo: '#4b0082',\n ivory: '#fffff0',\n khaki: '#f0e68c',\n lavender: '#e6e6fa',\n lavenderblush: '#fff0f5',\n lawngreen: '#7cfc00',\n lemonchiffon: '#fffacd',\n lightblue: '#add8e6',\n lightcoral: '#f08080',\n lightcyan: '#e0ffff',\n lightgoldenrodyellow: '#fafad2',\n lightgray: '#d3d3d3',\n lightgreen: '#90ee90',\n lightgrey: '#d3d3d3',\n lightpink: '#ffb6c1',\n lightsalmon: '#ffa07a',\n lightseagreen: '#20b2aa',\n lightskyblue: '#87cefa',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#b0c4de',\n lightyellow: '#ffffe0',\n lime: '#00ff00',\n limegreen: '#32cd32',\n linen: '#faf0e6',\n magenta: '#ff00ff',\n maroon: '#800000',\n mediumaquamarine: '#66cdaa',\n mediumblue: '#0000cd',\n mediumorchid: '#ba55d3',\n mediumpurple: '#9370db',\n mediumseagreen: '#3cb371',\n mediumslateblue: '#7b68ee',\n mediumspringgreen: '#00fa9a',\n mediumturquoise: '#48d1cc',\n mediumvioletred: '#c71585',\n midnightblue: '#191970',\n mintcream: '#f5fffa',\n mistyrose: '#ffe4e1',\n moccasin: '#ffe4b5',\n navajowhite: '#ffdead',\n navy: '#000080',\n oldlace: '#fdf5e6',\n olive: '#808000',\n olivedrab: '#6b8e23',\n orange: '#ffa500',\n orangered: '#ff4500',\n orchid: '#da70d6',\n palegoldenrod: '#eee8aa',\n palegreen: '#98fb98',\n paleturquoise: '#afeeee',\n palevioletred: '#db7093',\n papayawhip: '#ffefd5',\n peachpuff: '#ffdab9',\n peru: '#cd853f',\n pink: '#ffc0cb',\n plum: '#dda0dd',\n powderblue: '#b0e0e6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#ff0000',\n rosybrown: '#bc8f8f',\n royalblue: '#4169e1',\n saddlebrown: '#8b4513',\n salmon: '#fa8072',\n sandybrown: '#f4a460',\n seagreen: '#2e8b57',\n seashell: '#fff5ee',\n sienna: '#a0522d',\n silver: '#c0c0c0',\n skyblue: '#87ceeb',\n slateblue: '#6a5acd',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#fffafa',\n springgreen: '#00ff7f',\n tan: '#d2b48c',\n teal: '#008080',\n thistle: '#d8bfd8',\n transparent: '#00000000',\n turquoise: '#40e0d0',\n violet: '#ee82ee',\n wheat: '#f5deb3',\n white: '#ffffff',\n whitesmoke: '#f5f5f5',\n yellow: '#ffff00',\n yellowgreen: '#9acd32'\n },\n /* API */\n parse: (color) => {\n color = color.toLowerCase();\n const hex = Keyword.colors[color];\n if (!hex)\n return;\n return Hex.parse(hex);\n },\n stringify: (channels) => {\n const hex = Hex.stringify(channels);\n for (const name in Keyword.colors) {\n if (Keyword.colors[name] === hex)\n return name;\n }\n return;\n }\n};\n/* EXPORT */\nexport default Keyword;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport ChannelsReusable from '../channels/reusable.js';\n/* MAIN */\nconst RGB = {\n /* VARIABLES */\n re: /^rgba?\$\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e\\d+)?(%?))\\s*?(?:,|\\s)\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e\\d+)?(%?))\\s*?(?:,|\\s)\\s*?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e\\d+)?(%?))(?:\\s*?(?:,|\\/)\\s*?\\+?(-?(?:\\d+(?:\\.\\d+)?|(?:\\.\\d+))(?:e\\d+)?(%?)))?\\s*?\$$/i,\n /* API */\n parse: (color) => {\n const charCode = color.charCodeAt(0);\n if (charCode !== 114 && charCode !== 82)\n return; // 'r'/'R'\n const match = color.match(RGB.re);\n if (!match)\n return;\n const [, r, isRedPercentage, g, isGreenPercentage, b, isBluePercentage, a, isAlphaPercentage] = match;\n return ChannelsReusable.set({\n r: _.channel.clamp.r(isRedPercentage ? parseFloat(r) * 2.55 : parseFloat(r)),\n g: _.channel.clamp.g(isGreenPercentage ? parseFloat(g) * 2.55 : parseFloat(g)),\n b: _.channel.clamp.b(isBluePercentage ? parseFloat(b) * 2.55 : parseFloat(b)),\n a: a ? _.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1\n }, color);\n },\n stringify: (channels) => {\n const { r, g, b, a } = channels;\n if (a < 1) { // RGBA\n return `rgba(${_.lang.round(r)}, ${_.lang.round(g)}, ${_.lang.round(b)}, ${_.lang.round(a)})`;\n }\n else { // RGB\n return `rgb(${_.lang.round(r)}, ${_.lang.round(g)}, ${_.lang.round(b)})`;\n }\n }\n};\n/* EXPORT */\nexport default RGB;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Hex from './hex.js';\nimport HSL from './hsl.js';\nimport Keyword from './keyword.js';\nimport RGB from './rgb.js';\nimport { TYPE } from '../constants.js';\n/* MAIN */\nconst Color = {\n /* VARIABLES */\n format: {\n keyword: Keyword,\n hex: Hex,\n rgb: RGB,\n rgba: RGB,\n hsl: HSL,\n hsla: HSL\n },\n /* API */\n parse: (color) => {\n if (typeof color !== 'string')\n return color;\n const channels = Hex.parse(color) || RGB.parse(color) || HSL.parse(color) || Keyword.parse(color); // Color providers ordered with performance in mind\n if (channels)\n return channels;\n throw new Error(`Unsupported color format: \"${color}\"`);\n },\n stringify: (channels) => {\n // SASS returns a keyword if possible, but we avoid doing that as it's slower and doesn't really add any value\n if (!channels.changed && channels.color)\n return channels.color;\n if (channels.type.is(TYPE.HSL) || channels.data.r === undefined) {\n return HSL.stringify(channels);\n }\n else if (channels.a < 1 || !Number.isInteger(channels.r) || !Number.isInteger(channels.g) || !Number.isInteger(channels.b)) {\n return RGB.stringify(channels);\n }\n else {\n return Hex.stringify(channels);\n }\n }\n};\n/* EXPORT */\nexport default Color;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Color from '../color/index.js';\n/* MAIN */\nconst change = (color, channels) => {\n const ch = Color.parse(color);\n for (const c in channels) {\n ch[c] = _.channel.clamp[c](channels[c]);\n }\n return Color.stringify(ch);\n};\n/* EXPORT */\nexport default change;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport ChannelsReusable from '../channels/reusable.js';\nimport Color from '../color/index.js';\nimport change from './change.js';\n/* MAIN */\nconst rgba = (r, g, b = 0, a = 1) => {\n if (typeof r !== 'number')\n return change(r, { a: g });\n const channels = ChannelsReusable.set({\n r: _.channel.clamp.r(r),\n g: _.channel.clamp.g(g),\n b: _.channel.clamp.b(b),\n a: _.channel.clamp.a(a)\n });\n return Color.stringify(channels);\n};\n/* EXPORT */\nexport default rgba;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Color from '../color/index.js';\n/* MAIN */\nconst channel = (color, channel) => {\n return _.lang.round(Color.parse(color)[channel]);\n};\n/* EXPORT */\nexport default channel;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Color from '../color/index.js';\n/* MAIN */\n//SOURCE: https://planetcalc.com/7779\nconst luminance = (color) => {\n const { r, g, b } = Color.parse(color);\n const luminance = .2126 * _.channel.toLinear(r) + .7152 * _.channel.toLinear(g) + .0722 * _.channel.toLinear(b);\n return _.lang.round(luminance);\n};\n/* EXPORT */\nexport default luminance;\n", "/* IMPORT */\nimport luminance from './luminance.js';\n/* MAIN */\nconst isLight = (color) => {\n return luminance(color) >= .5;\n};\n/* EXPORT */\nexport default isLight;\n", "/* IMPORT */\nimport isLight from './is_light.js';\n/* MAIN */\nconst isDark = (color) => {\n return !isLight(color);\n};\n/* EXPORT */\nexport default isDark;\n", "/* IMPORT */\nimport _ from '../utils/index.js';\nimport Color from '../color/index.js';\n/* MAIN */\nconst adjustChannel = (color, channel, amount) => {\n const channels = Color.parse(color);\n const amountCurrent = channels[channel];\n const amountNext = _.channel.clamp[channel](amountCurrent + amount);\n if (amountCurrent !== amountNext)\n channels[channel] = amountNext;\n return Color.stringify(channels);\n};\n/* EXPORT */\nexport default adjustChannel;\n", "/* IMPORT */\nimport adjustChannel from './adjust_channel.js';\n/* MAIN */\nconst lighten = (color, amount) => {\n return adjustChannel(color, 'l', amount);\n};\n/* EXPORT */\nexport default lighten;\n", "/* IMPORT */\nimport adjustChannel from './adjust_channel.js';\n/* MAIN */\nconst darken = (color, amount) => {\n return adjustChannel(color, 'l', -amount);\n};\n/* EXPORT */\nexport default darken;\n", "/* IMPORT */\nimport Color from '../color/index.js';\nimport change from './change.js';\n/* MAIN */\nconst adjust = (color, channels) => {\n const ch = Color.parse(color);\n const changes = {};\n for (const c in channels) {\n if (!channels[c])\n continue;\n changes[c] = ch[c] + channels[c];\n }\n return change(color, changes);\n};\n/* EXPORT */\nexport default adjust;\n", "/* IMPORT */\nimport Color from '../color/index.js';\nimport rgba from './rgba.js';\n/* MAIN */\n//SOURCE: https://github.com/sass/dart-sass/blob/7457d2e9e7e623d9844ffd037a070cf32d39c348/lib/src/functions/color.dart#L718-L756\nconst mix = (color1, color2, weight = 50) => {\n const { r: r1, g: g1, b: b1, a: a1 } = Color.parse(color1);\n const { r: r2, g: g2, b: b2, a: a2 } = Color.parse(color2);\n const weightScale = weight / 100;\n const weightNormalized = (weightScale * 2) - 1;\n const alphaDelta = a1 - a2;\n const weight1combined = ((weightNormalized * alphaDelta) === -1) ? weightNormalized : (weightNormalized + alphaDelta) / (1 + weightNormalized * alphaDelta);\n const weight1 = (weight1combined + 1) / 2;\n const weight2 = 1 - weight1;\n const r = (r1 * weight1) + (r2 * weight2);\n const g = (g1 * weight1) + (g2 * weight2);\n const b = (b1 * weight1) + (b2 * weight2);\n const a = (a1 * weightScale) + (a2 * (1 - weightScale));\n return rgba(r, g, b, a);\n};\n/* EXPORT */\nexport default mix;\n", "/* IMPORT */\nimport Color from '../color/index.js';\nimport mix from './mix.js';\n/* MAIN */\nconst invert = (color, weight = 100) => {\n const inverse = Color.parse(color);\n inverse.r = 255 - inverse.r;\n inverse.g = 255 - inverse.g;\n inverse.b = 255 - inverse.b;\n return mix(inverse, color, weight);\n};\n/* EXPORT */\nexport default invert;\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 } 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?.