{"id":3366,"date":"2022-09-19T04:08:13","date_gmt":"2022-09-18T23:08:13","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3366"},"modified":"2022-09-19T04:08:16","modified_gmt":"2022-09-18T23:08:16","slug":"mermaid-js-themes-in-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/","title":{"rendered":"Mermaid JS Themes in JavaScript"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Mermaid JS Themes<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">index.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { getThemeVariables as baseThemeVariables } from '.\/theme-base';\nimport { getThemeVariables as darkThemeVariables } from '.\/theme-dark';\nimport { getThemeVariables as defaultThemeVariables } from '.\/theme-default';\nimport { getThemeVariables as forestThemeVariables } from '.\/theme-forest';\nimport { getThemeVariables as neutralThemeVariables } from '.\/theme-neutral';\n\nexport default {\n  base: {\n    getThemeVariables: baseThemeVariables,\n  },\n  dark: {\n    getThemeVariables: darkThemeVariables,\n  },\n  default: {\n    getThemeVariables: defaultThemeVariables,\n  },\n  forest: {\n    getThemeVariables: forestThemeVariables,\n  },\n  neutral: {\n    getThemeVariables: neutralThemeVariables,\n  },\n};<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-base.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from '.\/theme-helpers';\nclass Theme {\n  constructor() {\n    \/** # Base variables *\/\n    \/**\n     * - Background - used to know what the background color is of the diagram. This is used for\n     *   deducing colors for instance line color. Default value is #f4f4f4.\n     *\/\n    this.background = '#f4f4f4';\n    this.darkMode = false;\n\n    this.primaryColor = '#fff4dd';\n\n    this.noteBkgColor = '#fff5ad';\n    this.noteTextColor = '#333';\n\n    \/\/ dark\n\n    this.fontFamily = '&quot;trebuchet ms&quot;, verdana, arial, sans-serif';\n    this.fontSize = '16px';\n  }\n  updateColors() {\n    \/\/ The || is to make sure that if the variable has been defined by a user override that value is to be used\n\n    \/* Main *\/\n    this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); \/\/ invert(this.primaryColor);\n    this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });\n    this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });\n\n    this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);\n    this.secondaryBorderColor =\n      this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);\n    this.tertiaryBorderColor =\n      this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);\n    this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);\n    this.noteBkgColor = this.noteBkgColor || '#fff5ad';\n    this.noteTextColor = this.noteTextColor || '#333';\n\n    this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);\n    this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);\n    this.lineColor = this.lineColor || invert(this.background);\n    this.textColor = this.textColor || this.primaryTextColor;\n\n    \/* Flowchart variables *\/\n    this.nodeBkg = this.nodeBkg || this.primaryColor;\n    this.mainBkg = this.mainBkg || this.primaryColor;\n    this.nodeBorder = this.nodeBorder || this.primaryBorderColor;\n    this.clusterBkg = this.clusterBkg || this.tertiaryColor;\n    this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;\n    this.defaultLinkColor = this.defaultLinkColor || this.lineColor;\n    this.titleColor = this.titleColor || this.tertiaryTextColor;\n    this.edgeLabelBackground =\n      this.edgeLabelBackground ||\n      (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n    this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;\n    \/* Sequence Diagram variables *\/\n\n    \/\/ this.actorBorder = lighten(this.border1, 0.5);\n    this.actorBorder = this.actorBorder || this.primaryBorderColor;\n    this.actorBkg = this.actorBkg || this.mainBkg;\n    this.actorTextColor = this.actorTextColor || this.primaryTextColor;\n    this.actorLineColor = this.actorLineColor || 'grey';\n    this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;\n    this.signalColor = this.signalColor || this.textColor;\n    this.signalTextColor = this.signalTextColor || this.textColor;\n    this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;\n    this.labelTextColor = this.labelTextColor || this.actorTextColor;\n    this.loopTextColor = this.loopTextColor || this.actorTextColor;\n    this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);\n    this.activationBkgColor = this.activationBkgColor || this.secondaryColor;\n    this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;\n    this.altSectionBkgColor = this.altSectionBkgColor || 'white';\n    this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;\n    this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;\n    this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';\n    this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;\n    this.taskBkgColor = this.taskBkgColor || this.primaryColor;\n    this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;\n    this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);\n    this.gridColor = this.gridColor || 'lightgrey';\n    this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';\n    this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';\n    this.critBorderColor = this.critBorderColor || '#ff8888';\n    this.critBkgColor = this.critBkgColor || 'red';\n    this.todayLineColor = this.todayLineColor || 'red';\n    this.taskTextColor = this.taskTextColor || this.textColor;\n    this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;\n    this.taskTextLightColor = this.taskTextLightColor || this.textColor;\n    this.taskTextColor = this.taskTextColor || this.primaryTextColor;\n    this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;\n    this.taskTextClickableColor = this.taskTextClickableColor || '#003163';\n\n    \/* Sequence Diagram variables *\/\n\n    this.personBorder = this.personBorder || this.primaryBorderColor;\n    this.personBkg = this.personBkg || this.mainBkg;\n\n    \/* state colors *\/\n    this.transitionColor = this.transitionColor || this.lineColor;\n    this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n    \/* The color of the text tables of the states*\/\n    this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n    this.stateBkg = this.stateBkg || this.mainBkg;\n    this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n    this.altBackground = this.altBackground || this.tertiaryColor;\n    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n    this.compositeBorder = this.compositeBorder || this.nodeBorder;\n    this.innerEndBackground = this.nodeBorder;\n    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n    this.transitionColor = this.transitionColor || this.lineColor;\n    this.specialStateColor = this.lineColor;\n\n    \/* class *\/\n    this.classText = this.classText || this.textColor;\n\n    \/* user-journey *\/\n    this.fillType0 = this.fillType0 || this.primaryColor;\n    this.fillType1 = this.fillType1 || this.secondaryColor;\n    this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });\n    this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });\n    this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });\n    this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });\n    this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });\n    this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });\n\n    \/* pie *\/\n    this.pie1 = this.pie1 || this.primaryColor;\n    this.pie2 = this.pie2 || this.secondaryColor;\n    this.pie3 = this.pie3 || this.tertiaryColor;\n    this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });\n    this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });\n    this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });\n    this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });\n    this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });\n    this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });\n    this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });\n    this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });\n    this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });\n    this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n    this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n    this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n    this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n    this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n    this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n    this.pieStrokeColor = this.pieStrokeColor || 'black';\n    this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n    this.pieOpacity = this.pieOpacity || '0.7';\n\n    \/* requirement-diagram *\/\n    this.requirementBackground = this.requirementBackground || this.primaryColor;\n    this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n    this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n    this.relationColor = this.relationColor || this.lineColor;\n    this.relationLabelBackground =\n      this.relationLabelBackground ||\n      (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n    this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n    \/* git *\/\n    this.git0 = this.git0 || this.primaryColor;\n    this.git1 = this.git1 || this.secondaryColor;\n    this.git2 = this.git2 || this.tertiaryColor;\n    this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });\n    this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });\n    this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });\n    this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });\n    this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });\n    if (this.darkMode) {\n      this.git0 = lighten(this.git0, 25);\n      this.git1 = lighten(this.git1, 25);\n      this.git2 = lighten(this.git2, 25);\n      this.git3 = lighten(this.git3, 25);\n      this.git4 = lighten(this.git4, 25);\n      this.git5 = lighten(this.git5, 25);\n      this.git6 = lighten(this.git6, 25);\n      this.git7 = lighten(this.git7, 25);\n    } else {\n      this.git0 = darken(this.git0, 25);\n      this.git1 = darken(this.git1, 25);\n      this.git2 = darken(this.git2, 25);\n      this.git3 = darken(this.git3, 25);\n      this.git4 = darken(this.git4, 25);\n      this.git5 = darken(this.git5, 25);\n      this.git6 = darken(this.git6, 25);\n      this.git7 = darken(this.git7, 25);\n    }\n    this.gitInv0 = this.gitInv0 || invert(this.git0);\n    this.gitInv1 = this.gitInv1 || invert(this.git1);\n    this.gitInv2 = this.gitInv2 || invert(this.git2);\n    this.gitInv3 = this.gitInv3 || invert(this.git3);\n    this.gitInv4 = this.gitInv4 || invert(this.git4);\n    this.gitInv5 = this.gitInv5 || invert(this.git5);\n    this.gitInv6 = this.gitInv6 || invert(this.git6);\n    this.gitInv7 = this.gitInv7 || invert(this.git7);\n    this.branchLabelColor =\n      this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);\n    this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;\n    this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;\n    this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;\n    this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;\n    this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;\n    this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;\n    this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;\n    this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;\n\n    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n    this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n    this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n  }\n  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) =&gt; {\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) =&gt; {\n      this[k] = overrides[k];\n    });\n  }\n}\n\nexport const getThemeVariables = (userOverrides) =&gt; {\n  const theme = new Theme();\n  theme.calculate(userOverrides);\n  return theme;\n};<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-dark.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { invert, lighten, darken, rgba, adjust } from 'khroma';\nimport { mkBorder } from '.\/theme-helpers';\nclass Theme {\n  constructor() {\n    this.background = '#333';\n    this.primaryColor = '#1f2020';\n    this.secondaryColor = lighten(this.primaryColor, 16);\n\n    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n    this.primaryBorderColor = invert(this.background);\n    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n    this.primaryTextColor = invert(this.primaryColor);\n    this.secondaryTextColor = invert(this.secondaryColor);\n    this.tertiaryTextColor = invert(this.tertiaryColor);\n    this.lineColor = invert(this.background);\n    this.textColor = invert(this.background);\n\n    this.mainBkg = '#1f2020';\n    this.secondBkg = 'calculated';\n    this.mainContrastColor = 'lightgrey';\n    this.darkTextColor = lighten(invert('#323D47'), 10);\n    this.lineColor = 'calculated';\n    this.border1 = '#81B1DB';\n    this.border2 = rgba(255, 255, 255, 0.25);\n    this.arrowheadColor = 'calculated';\n    this.fontFamily = '&quot;trebuchet ms&quot;, verdana, arial, sans-serif';\n    this.fontSize = '16px';\n    this.labelBackground = '#181818';\n    this.textColor = '#ccc';\n    \/* Flowchart variables *\/\n\n    this.nodeBkg = 'calculated';\n    this.nodeBorder = 'calculated';\n    this.clusterBkg = 'calculated';\n    this.clusterBorder = 'calculated';\n    this.defaultLinkColor = 'calculated';\n    this.titleColor = '#F9FFFE';\n    this.edgeLabelBackground = 'calculated';\n\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = 'calculated';\n    this.actorBkg = 'calculated';\n    this.actorTextColor = 'calculated';\n    this.actorLineColor = 'calculated';\n    this.signalColor = 'calculated';\n    this.signalTextColor = 'calculated';\n    this.labelBoxBkgColor = 'calculated';\n    this.labelBoxBorderColor = 'calculated';\n    this.labelTextColor = 'calculated';\n    this.loopTextColor = 'calculated';\n    this.noteBorderColor = 'calculated';\n    this.noteBkgColor = '#fff5ad';\n    this.noteTextColor = 'calculated';\n    this.activationBorderColor = 'calculated';\n    this.activationBkgColor = 'calculated';\n    this.sequenceNumberColor = 'black';\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = darken('#EAE8D9', 30);\n    this.altSectionBkgColor = 'calculated';\n    this.sectionBkgColor2 = '#EAE8D9';\n    this.taskBorderColor = rgba(255, 255, 255, 70);\n    this.taskBkgColor = 'calculated';\n    this.taskTextColor = 'calculated';\n    this.taskTextLightColor = 'calculated';\n    this.taskTextOutsideColor = 'calculated';\n    this.taskTextClickableColor = '#003163';\n    this.activeTaskBorderColor = rgba(255, 255, 255, 50);\n    this.activeTaskBkgColor = '#81B1DB';\n    this.gridColor = 'calculated';\n    this.doneTaskBkgColor = 'calculated';\n    this.doneTaskBorderColor = 'grey';\n    this.critBorderColor = '#E83737';\n    this.critBkgColor = '#E83737';\n    this.taskTextDarkColor = 'calculated';\n    this.todayLineColor = '#DB5757';\n\n    \/* C4 Context Diagram variables *\/\n\n    this.personBorder = 'calculated';\n    this.personBkg = 'calculated';\n\n    \/* state colors *\/\n    this.labelColor = 'calculated';\n\n    this.errorBkgColor = '#a44141';\n    this.errorTextColor = '#ddd';\n  }\n  updateColors() {\n    this.secondBkg = lighten(this.mainBkg, 16);\n    this.lineColor = this.mainContrastColor;\n    this.arrowheadColor = this.mainContrastColor;\n    \/* Flowchart variables *\/\n\n    this.nodeBkg = this.mainBkg;\n    this.nodeBorder = this.border1;\n    this.clusterBkg = this.secondBkg;\n    this.clusterBorder = this.border2;\n    this.defaultLinkColor = this.lineColor;\n    this.edgeLabelBackground = lighten(this.labelBackground, 25);\n\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = this.border1;\n    this.actorBkg = this.mainBkg;\n    this.actorTextColor = this.mainContrastColor;\n    this.actorLineColor = this.mainContrastColor;\n    this.signalColor = this.mainContrastColor;\n    this.signalTextColor = this.mainContrastColor;\n    this.labelBoxBkgColor = this.actorBkg;\n    this.labelBoxBorderColor = this.actorBorder;\n    this.labelTextColor = this.mainContrastColor;\n    this.loopTextColor = this.mainContrastColor;\n    this.noteBorderColor = this.secondaryBorderColor;\n    this.noteBkgColor = this.secondBkg;\n    this.noteTextColor = this.secondaryTextColor;\n    this.activationBorderColor = this.border1;\n    this.activationBkgColor = this.secondBkg;\n\n    \/* Gantt chart variables *\/\n\n    this.altSectionBkgColor = this.background;\n    this.taskBkgColor = lighten(this.mainBkg, 23);\n    this.taskTextColor = this.darkTextColor;\n    this.taskTextLightColor = this.mainContrastColor;\n    this.taskTextOutsideColor = this.taskTextLightColor;\n    this.gridColor = this.mainContrastColor;\n    this.doneTaskBkgColor = this.mainContrastColor;\n    this.taskTextDarkColor = this.darkTextColor;\n\n    \/* state colors *\/\n    this.transitionColor = this.transitionColor || this.lineColor;\n    this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n    this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n    this.stateBkg = this.stateBkg || this.mainBkg;\n    this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n    this.altBackground = this.altBackground || '#555';\n    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n    this.compositeBorder = this.compositeBorder || this.nodeBorder;\n    this.innerEndBackground = this.primaryBorderColor;\n    this.specialStateColor = '#f4f4f4'; \/\/ this.lineColor;\n\n    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n    this.fillType0 = this.primaryColor;\n    this.fillType1 = this.secondaryColor;\n    this.fillType2 = adjust(this.primaryColor, { h: 64 });\n    this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n    this.fillType4 = adjust(this.primaryColor, { h: -64 });\n    this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n    this.fillType6 = adjust(this.primaryColor, { h: 128 });\n    this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n\n    \/* pie *\/\n    this.pie1 = this.pie1 || '#0b0000';\n    this.pie2 = this.pie2 || '#4d1037';\n    this.pie3 = this.pie3 || '#3f5258';\n    this.pie4 = this.pie4 || '#4f2f1b';\n    this.pie5 = this.pie5 || '#6e0a0a';\n    this.pie6 = this.pie6 || '#3b0048';\n    this.pie7 = this.pie7 || '#995a01';\n    this.pie8 = this.pie8 || '#154706';\n    this.pie9 = this.pie9 || '#161722';\n    this.pie10 = this.pie10 || '#00296f';\n    this.pie11 = this.pie11 || '#01629c';\n    this.pie12 = this.pie12 || '#010029';\n    this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n    this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n    this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n    this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n    this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n    this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n    this.pieStrokeColor = this.pieStrokeColor || 'black';\n    this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n    this.pieOpacity = this.pieOpacity || '0.7';\n\n    \/* class *\/\n    this.classText = this.primaryTextColor;\n\n    \/* requirement-diagram *\/\n    this.requirementBackground = this.requirementBackground || this.primaryColor;\n    this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n    this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n    this.relationColor = this.relationColor || this.lineColor;\n    this.relationLabelBackground =\n      this.relationLabelBackground ||\n      (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n    this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n    \/* git *\/\n    this.git0 = lighten(this.secondaryColor, 20);\n    this.git1 = lighten(this.pie2 || this.secondaryColor, 20);\n    this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);\n    this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);\n    this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);\n    this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);\n    this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);\n    this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);\n    this.gitInv0 = this.gitInv0 || invert(this.git0);\n    this.gitInv1 = this.gitInv1 || invert(this.git1);\n    this.gitInv2 = this.gitInv2 || invert(this.git2);\n    this.gitInv3 = this.gitInv3 || invert(this.git3);\n    this.gitInv4 = this.gitInv4 || invert(this.git4);\n    this.gitInv5 = this.gitInv5 || invert(this.git5);\n    this.gitInv6 = this.gitInv6 || invert(this.git6);\n    this.gitInv7 = this.gitInv7 || invert(this.git7);\n\n    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;\n    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;\n    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;\n    this.tagLabelFontSize = this.tagLabelFontSize || '10px';\n    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;\n    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;\n    this.commitLabelFontSize = this.commitLabelFontSize || '10px';\n  }\n  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) =&gt; {\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) =&gt; {\n      this[k] = overrides[k];\n    });\n  }\n}\n\nexport const getThemeVariables = (userOverrides) =&gt; {\n  const theme = new Theme();\n  theme.calculate(userOverrides);\n  return theme;\n};<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-default.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { invert, lighten, rgba, adjust, darken } from 'khroma';\nimport { mkBorder } from '.\/theme-helpers';\n\nclass Theme {\n  constructor() {\n    \/* Base variables *\/\n    this.background = '#f4f4f4';\n    this.primaryColor = '#ECECFF';\n\n    this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n    this.secondaryColor = '#ffffde';\n    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n    \/\/ this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n    this.primaryTextColor = invert(this.primaryColor);\n    this.secondaryTextColor = invert(this.secondaryColor);\n    this.tertiaryTextColor = invert(this.tertiaryColor);\n    this.lineColor = invert(this.background);\n    this.textColor = invert(this.background);\n\n    this.background = 'white';\n    this.mainBkg = '#ECECFF';\n    this.secondBkg = '#ffffde';\n    this.lineColor = '#333333';\n    this.border1 = '#9370DB';\n    this.border2 = '#aaaa33';\n    this.arrowheadColor = '#333333';\n    this.fontFamily = '&quot;trebuchet ms&quot;, verdana, arial, sans-serif';\n    this.fontSize = '16px';\n    this.labelBackground = '#e8e8e8';\n    this.textColor = '#333';\n\n    \/* Flowchart variables *\/\n\n    this.nodeBkg = 'calculated';\n    this.nodeBorder = 'calculated';\n    this.clusterBkg = 'calculated';\n    this.clusterBorder = 'calculated';\n    this.defaultLinkColor = 'calculated';\n    this.titleColor = 'calculated';\n    this.edgeLabelBackground = 'calculated';\n\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = 'calculated';\n    this.actorBkg = 'calculated';\n    this.actorTextColor = 'black';\n    this.actorLineColor = 'grey';\n    this.signalColor = 'calculated';\n    this.signalTextColor = 'calculated';\n    this.labelBoxBkgColor = 'calculated';\n    this.labelBoxBorderColor = 'calculated';\n    this.labelTextColor = 'calculated';\n    this.loopTextColor = 'calculated';\n    this.noteBorderColor = 'calculated';\n    this.noteBkgColor = '#fff5ad';\n    this.noteTextColor = 'calculated';\n    this.activationBorderColor = '#666';\n    this.activationBkgColor = '#f4f4f4';\n    this.sequenceNumberColor = 'white';\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = 'calculated';\n    this.altSectionBkgColor = 'calculated';\n    this.sectionBkgColor2 = 'calculated';\n    this.excludeBkgColor = '#eeeeee';\n    this.taskBorderColor = 'calculated';\n    this.taskBkgColor = 'calculated';\n    this.taskTextLightColor = 'calculated';\n    this.taskTextColor = this.taskTextLightColor;\n    this.taskTextDarkColor = 'calculated';\n    this.taskTextOutsideColor = this.taskTextDarkColor;\n    this.taskTextClickableColor = 'calculated';\n    this.activeTaskBorderColor = 'calculated';\n    this.activeTaskBkgColor = 'calculated';\n    this.gridColor = 'calculated';\n    this.doneTaskBkgColor = 'calculated';\n    this.doneTaskBorderColor = 'calculated';\n    this.critBorderColor = 'calculated';\n    this.critBkgColor = 'calculated';\n    this.todayLineColor = 'calculated';\n\n    this.sectionBkgColor = rgba(102, 102, 255, 0.49);\n    this.altSectionBkgColor = 'white';\n    this.sectionBkgColor2 = '#fff400';\n    this.taskBorderColor = '#534fbc';\n    this.taskBkgColor = '#8a90dd';\n    this.taskTextLightColor = 'white';\n    this.taskTextColor = 'calculated';\n    this.taskTextDarkColor = 'black';\n    this.taskTextOutsideColor = 'calculated';\n    this.taskTextClickableColor = '#003163';\n    this.activeTaskBorderColor = '#534fbc';\n    this.activeTaskBkgColor = '#bfc7ff';\n    this.gridColor = 'lightgrey';\n    this.doneTaskBkgColor = 'lightgrey';\n    this.doneTaskBorderColor = 'grey';\n    this.critBorderColor = '#ff8888';\n    this.critBkgColor = 'red';\n    this.todayLineColor = 'red';\n\n    \/* C4 Context Diagram variables *\/\n\n    this.personBorder = 'calculated';\n    this.personBkg = 'calculated';\n\n    \/* state colors *\/\n    this.labelColor = 'black';\n    this.errorBkgColor = '#552222';\n    this.errorTextColor = '#552222';\n    this.updateColors();\n  }\n  updateColors() {\n    \/* Flowchart variables *\/\n\n    this.nodeBkg = this.mainBkg;\n    this.nodeBorder = this.border1; \/\/ border 1\n    this.clusterBkg = this.secondBkg;\n    this.clusterBorder = this.border2;\n    this.defaultLinkColor = this.lineColor;\n    this.titleColor = this.textColor;\n    this.edgeLabelBackground = this.labelBackground;\n\n    \/* Sequence Diagram variables *\/\n\n    \/\/ this.actorBorder = lighten(this.border1, 0.5);\n    this.actorBorder = lighten(this.border1, 23);\n    this.actorBkg = this.mainBkg;\n    this.labelBoxBkgColor = this.actorBkg;\n    this.signalColor = this.textColor;\n    this.signalTextColor = this.textColor;\n    this.labelBoxBorderColor = this.actorBorder;\n    this.labelTextColor = this.actorTextColor;\n    this.loopTextColor = this.actorTextColor;\n    this.noteBorderColor = this.border2;\n    this.noteTextColor = this.actorTextColor;\n\n    \/* Gantt chart variables *\/\n\n    this.taskTextColor = this.taskTextLightColor;\n    this.taskTextOutsideColor = this.taskTextDarkColor;\n\n    \/* state colors *\/\n    this.transitionColor = this.transitionColor || this.lineColor;\n    this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n    this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n    this.stateBkg = this.stateBkg || this.mainBkg;\n    this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n    this.altBackground = this.altBackground || '#f0f0f0';\n    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n    this.compositeBorder = this.compositeBorder || this.nodeBorder;\n    this.innerEndBackground = this.nodeBorder;\n    this.specialStateColor = this.lineColor;\n\n    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n    this.transitionColor = this.transitionColor || this.lineColor;\n    \/* class *\/\n    this.classText = this.primaryTextColor;\n    \/* journey *\/\n    this.fillType0 = this.primaryColor;\n    this.fillType1 = this.secondaryColor;\n    this.fillType2 = adjust(this.primaryColor, { h: 64 });\n    this.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    \/* pie *\/\n    this.pie1 = this.pie1 || this.primaryColor;\n    this.pie2 = this.pie2 || this.secondaryColor;\n    this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 });\n    this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });\n    this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });\n    this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 });\n    this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -20 });\n    this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 });\n    this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 });\n    this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -40 });\n    this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });\n    this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });\n    this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n    this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n    this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n    this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n    this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n    this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n    this.pieStrokeColor = this.pieStrokeColor || 'black';\n    this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n    this.pieOpacity = this.pieOpacity || '0.7';\n\n    \/* requirement-diagram *\/\n    this.requirementBackground = this.requirementBackground || this.primaryColor;\n    this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n    this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n    this.relationColor = this.relationColor || this.lineColor;\n    this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;\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 || darken(invert(this.git0), 25);\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  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) =&gt; {\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) =&gt; {\n      this[k] = overrides[k];\n    });\n  }\n}\n\nexport const getThemeVariables = (userOverrides) =&gt; {\n  const theme = new Theme();\n  theme.calculate(userOverrides);\n  return theme;\n};<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-forest.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from '.\/theme-helpers';\nclass Theme {\n  constructor() {\n    \/* Base vales *\/\n    this.background = '#f4f4f4';\n    this.primaryColor = '#cde498';\n    this.secondaryColor = '#cdffb2';\n    this.background = 'white';\n    this.mainBkg = '#cde498';\n    this.secondBkg = '#cdffb2';\n    this.lineColor = 'green';\n    this.border1 = '#13540c';\n    this.border2 = '#6eaa49';\n    this.arrowheadColor = 'green';\n    this.fontFamily = '&quot;trebuchet ms&quot;, verdana, arial, sans-serif';\n    this.fontSize = '16px';\n\n    this.tertiaryColor = lighten('#cde498', 10);\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.primaryTextColor = invert(this.primaryColor);\n    this.secondaryTextColor = invert(this.secondaryColor);\n    this.tertiaryTextColor = invert(this.primaryColor);\n    this.lineColor = invert(this.background);\n    this.textColor = invert(this.background);\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 = '#333';\n    this.edgeLabelBackground = '#e8e8e8';\n\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = 'calculated';\n    this.actorBkg = 'calculated';\n    this.actorTextColor = 'black';\n    this.actorLineColor = 'grey';\n    this.signalColor = '#333';\n    this.signalTextColor = '#333';\n    this.labelBoxBkgColor = 'calculated';\n    this.labelBoxBorderColor = '#326932';\n    this.labelTextColor = 'calculated';\n    this.loopTextColor = 'calculated';\n    this.noteBorderColor = 'calculated';\n    this.noteBkgColor = '#fff5ad';\n    this.noteTextColor = 'calculated';\n    this.activationBorderColor = '#666';\n    this.activationBkgColor = '#f4f4f4';\n    this.sequenceNumberColor = 'white';\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = '#6eaa49';\n    this.altSectionBkgColor = 'white';\n    this.sectionBkgColor2 = '#6eaa49';\n    this.excludeBkgColor = '#eeeeee';\n    this.taskBorderColor = 'calculated';\n    this.taskBkgColor = '#487e3a';\n    this.taskTextLightColor = 'white';\n    this.taskTextColor = 'calculated';\n    this.taskTextDarkColor = 'black';\n    this.taskTextOutsideColor = 'calculated';\n    this.taskTextClickableColor = '#003163';\n    this.activeTaskBorderColor = 'calculated';\n    this.activeTaskBkgColor = 'calculated';\n    this.gridColor = 'lightgrey';\n    this.doneTaskBkgColor = 'lightgrey';\n    this.doneTaskBorderColor = 'grey';\n    this.critBorderColor = '#ff8888';\n    this.critBkgColor = 'red';\n    this.todayLineColor = 'red';\n\n    \/* C4 Context Diagram variables *\/\n\n    this.personBorder = 'calculated';\n    this.personBkg = 'calculated';\n\n    \/* state colors *\/\n    this.labelColor = 'black';\n\n    this.errorBkgColor = '#552222';\n    this.errorTextColor = '#552222';\n  }\n  updateColors() {\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\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = darken(this.mainBkg, 20);\n    this.actorBkg = this.mainBkg;\n    this.labelBoxBkgColor = this.actorBkg;\n    this.labelTextColor = this.actorTextColor;\n    this.loopTextColor = this.actorTextColor;\n    this.noteBorderColor = this.border2;\n    this.noteTextColor = this.actorTextColor;\n\n    \/* Gantt chart variables *\/\n\n    this.taskBorderColor = this.border1;\n    this.taskTextColor = this.taskTextLightColor;\n    this.taskTextOutsideColor = this.taskTextDarkColor;\n    this.activeTaskBorderColor = this.taskBorderColor;\n    this.activeTaskBkgColor = this.mainBkg;\n\n    \/* state colors *\/\n    this.transitionColor = this.transitionColor || this.lineColor;\n    this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n    this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n    this.stateBkg = this.stateBkg || this.mainBkg;\n    this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n    this.altBackground = this.altBackground || '#f0f0f0';\n    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n    this.compositeBorder = this.compositeBorder || this.nodeBorder;\n    this.innerEndBackground = this.primaryBorderColor;\n    this.specialStateColor = this.lineColor;\n\n    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n    this.transitionColor = this.transitionColor || this.lineColor;\n    \/* class *\/\n    this.classText = this.primaryTextColor;\n    \/* journey *\/\n    this.fillType0 = this.primaryColor;\n    this.fillType1 = this.secondaryColor;\n    this.fillType2 = adjust(this.primaryColor, { h: 64 });\n    this.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    \/* 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: -30 });\n    this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });\n    this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: +40, l: -40 });\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: -50 });\n    this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });\n    this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });\n    this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n    this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n    this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n    this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n    this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n    this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n    this.pieStrokeColor = this.pieStrokeColor || 'black';\n    this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n    this.pieOpacity = this.pieOpacity || '0.7';\n\n    \/* requirement-diagram *\/\n    this.requirementBackground = this.requirementBackground || this.primaryColor;\n    this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n    this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n    this.relationColor = this.relationColor || this.lineColor;\n    this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;\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\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  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) =&gt; {\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) =&gt; {\n      this[k] = overrides[k];\n    });\n  }\n}\n\nexport const getThemeVariables = (userOverrides) =&gt; {\n  const theme = new Theme();\n  theme.calculate(userOverrides);\n  return theme;\n};<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-helpers.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { adjust } from 'khroma';\n\nexport const mkBorder = (col, darkMode) =&gt;\n  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">theme-neutral.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">import { invert, darken, lighten, adjust } from 'khroma';\nimport { mkBorder } from '.\/theme-helpers';\n\n\/\/ const Color = require ( 'khroma\/dist\/color' ).default\n\/\/ Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); \/\/ =&gt; &quot;#EAF2FB&quot;\n\nclass Theme {\n  constructor() {\n    this.primaryColor = '#eee';\n    this.contrast = '#707070';\n    this.secondaryColor = lighten(this.contrast, 55);\n    this.background = '#ffffff';\n\n    \/\/ this.secondaryColor = adjust(this.primaryColor, { h: 120 });\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.altBackground = lighten(this.contrast, 55);\n    this.mainBkg = '#eee';\n    this.secondBkg = 'calculated';\n    this.lineColor = '#666';\n    this.border1 = '#999';\n    this.border2 = 'calculated';\n    this.note = '#ffa';\n    this.text = '#333';\n    this.critical = '#d42';\n    this.done = '#bbb';\n    this.arrowheadColor = '#333333';\n    this.fontFamily = '&quot;trebuchet ms&quot;, verdana, arial, sans-serif';\n    this.fontSize = '16px';\n\n    \/* Flowchart variables *\/\n\n    this.nodeBkg = 'calculated';\n    this.nodeBorder = 'calculated';\n    this.clusterBkg = 'calculated';\n    this.clusterBorder = 'calculated';\n    this.defaultLinkColor = 'calculated';\n    this.titleColor = 'calculated';\n    this.edgeLabelBackground = 'white';\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 = 'calculated';\n    this.noteTextColor = 'calculated';\n    this.activationBorderColor = '#666';\n    this.activationBkgColor = '#f4f4f4';\n    this.sequenceNumberColor = 'white';\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = 'calculated';\n    this.altSectionBkgColor = 'white';\n    this.sectionBkgColor2 = 'calculated';\n    this.excludeBkgColor = '#eeeeee';\n    this.taskBorderColor = 'calculated';\n    this.taskBkgColor = 'calculated';\n    this.taskTextLightColor = 'white';\n    this.taskTextColor = 'calculated';\n    this.taskTextDarkColor = 'calculated';\n    this.taskTextOutsideColor = 'calculated';\n    this.taskTextClickableColor = '#003163';\n    this.activeTaskBorderColor = 'calculated';\n    this.activeTaskBkgColor = 'calculated';\n    this.gridColor = 'calculated';\n    this.doneTaskBkgColor = 'calculated';\n    this.doneTaskBorderColor = 'calculated';\n    this.critBkgColor = 'calculated';\n    this.critBorderColor = 'calculated';\n    this.todayLineColor = 'calculated';\n\n    \/* C4 Context Diagram variables *\/\n\n    this.personBorder = 'calculated';\n    this.personBkg = 'calculated';\n\n    \/* state colors *\/\n    this.labelColor = 'black';\n\n    this.errorBkgColor = '#552222';\n    this.errorTextColor = '#552222';\n  }\n  updateColors() {\n    this.secondBkg = lighten(this.contrast, 55);\n    this.border2 = this.contrast;\n\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.titleColor = this.text;\n\n    \/* Sequence Diagram variables *\/\n\n    this.actorBorder = lighten(this.border1, 23);\n    this.actorBkg = this.mainBkg;\n    this.actorTextColor = this.text;\n    this.actorLineColor = this.lineColor;\n    this.signalColor = this.text;\n    this.signalTextColor = this.text;\n    this.labelBoxBkgColor = this.actorBkg;\n    this.labelBoxBorderColor = this.actorBorder;\n    this.labelTextColor = this.text;\n    this.loopTextColor = this.text;\n    this.noteBorderColor = '#999';\n    this.noteBkgColor = '#666';\n    this.noteTextColor = '#fff';\n\n    \/* Gantt chart variables *\/\n\n    this.sectionBkgColor = lighten(this.contrast, 30);\n    this.sectionBkgColor2 = lighten(this.contrast, 30);\n\n    this.taskBorderColor = darken(this.contrast, 10);\n\n    this.taskBkgColor = this.contrast;\n    this.taskTextColor = this.taskTextLightColor;\n    this.taskTextDarkColor = this.text;\n    this.taskTextOutsideColor = this.taskTextDarkColor;\n    this.activeTaskBorderColor = this.taskBorderColor;\n    this.activeTaskBkgColor = this.mainBkg;\n    this.gridColor = lighten(this.border1, 30);\n\n    this.doneTaskBkgColor = this.done;\n    this.doneTaskBorderColor = this.lineColor;\n    this.critBkgColor = this.critical;\n    this.critBorderColor = darken(this.critBkgColor, 10);\n\n    this.todayLineColor = this.critBkgColor;\n\n    \/* state colors *\/\n    this.transitionColor = this.transitionColor || '#000';\n    this.transitionLabelColor = this.transitionLabelColor || this.textColor;\n    this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;\n\n    this.stateBkg = this.stateBkg || this.mainBkg;\n    this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;\n    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;\n    this.altBackground = this.altBackground || '#f4f4f4';\n    this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;\n    this.stateBorder = this.stateBorder || '#000';\n    this.innerEndBackground = this.primaryBorderColor;\n    this.specialStateColor = '#222';\n\n    this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n    this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n    \/* class *\/\n    this.classText = this.primaryTextColor;\n    \/* journey *\/\n    this.fillType0 = this.primaryColor;\n    this.fillType1 = this.secondaryColor;\n    this.fillType2 = adjust(this.primaryColor, { h: 64 });\n    this.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    \/\/ \/* pie *\/\n    this.pie1 = this.pie1 || '#F4F4F4';\n    this.pie2 = this.pie2 || '#555';\n    this.pie3 = this.pie3 || '#BBB';\n    this.pie4 = this.pie4 || '#777';\n    this.pie5 = this.pie5 || '#999';\n    this.pie6 = this.pie6 || '#DDD';\n    this.pie7 = this.pie7 || '#FFF';\n    this.pie8 = this.pie8 || '#DDD';\n    this.pie9 = this.pie9 || '#BBB';\n    this.pie10 = this.pie10 || '#999';\n    this.pie11 = this.pie11 || '#777';\n    this.pie12 = this.pie12 || '#555';\n    this.pieTitleTextSize = this.pieTitleTextSize || '25px';\n    this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;\n    this.pieSectionTextSize = this.pieSectionTextSize || '17px';\n    this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;\n    this.pieLegendTextSize = this.pieLegendTextSize || '17px';\n    this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;\n    this.pieStrokeColor = this.pieStrokeColor || 'black';\n    this.pieStrokeWidth = this.pieStrokeWidth || '2px';\n    this.pieOpacity = this.pieOpacity || '0.7';\n\n    \/\/ this.pie1 = this.pie1 || '#212529';\n    \/\/ this.pie2 = this.pie2 || '#343A40';\n    \/\/ this.pie3 = this.pie3 || '#495057';\n    \/\/ this.pie4 = this.pie4 || '#6C757D';\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\n    \/* requirement-diagram *\/\n    this.requirementBackground = this.requirementBackground || this.primaryColor;\n    this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;\n    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;\n    this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;\n    this.relationColor = this.relationColor || this.lineColor;\n    this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;\n    this.relationLabelColor = this.relationLabelColor || this.actorTextColor;\n\n    \/* git *\/\n    this.git0 = darken(this.pie1, 25) || this.primaryColor;\n    this.git1 = this.pie2 || this.secondaryColor;\n    this.git2 = this.pie3 || this.tertiaryColor;\n    this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });\n    this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });\n    this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });\n    this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });\n    this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });\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\n    this.branchLabelColor = this.branchLabelColor || this.labelTextColor;\n    this.gitBranchLabel0 = this.branchLabelColor;\n    this.gitBranchLabel1 = 'white';\n    this.gitBranchLabel2 = this.branchLabelColor;\n    this.gitBranchLabel3 = 'white';\n    this.gitBranchLabel4 = this.branchLabelColor;\n    this.gitBranchLabel5 = this.branchLabelColor;\n    this.gitBranchLabel6 = this.branchLabelColor;\n    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  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) =&gt; {\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) =&gt; {\n      this[k] = overrides[k];\n    });\n  }\n}\n\nexport const getThemeVariables = (userOverrides) =&gt; {\n  const theme = new Theme();\n  theme.calculate(userOverrides);\n  return theme;\n};<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mermaid JS Themes index.js theme-base.js theme-dark.js theme-default.js theme-forest.js theme-helpers.js theme-neutral.js<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid JS Themes in JavaScript<\/title>\n<meta name=\"description\" content=\"Mermaid JS Themes index.js import { getThemeVariables as baseThemeVariables } from &#039;.\/theme-base&#039;; import { getThemeVariables as darkThemeVariables } from\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid JS Themes in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Mermaid JS Themes index.js import { getThemeVariables as baseThemeVariables } from &#039;.\/theme-base&#039;; import { getThemeVariables as darkThemeVariables } from\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-18T23:08:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-18T23:08:16+00:00\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid JS Themes in JavaScript","description":"Mermaid JS Themes index.js import { getThemeVariables as baseThemeVariables } from '.\/theme-base'; import { getThemeVariables as darkThemeVariables } from","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Mermaid JS Themes in JavaScript","og_description":"Mermaid JS Themes index.js import { getThemeVariables as baseThemeVariables } from '.\/theme-base'; import { getThemeVariables as darkThemeVariables } from","og_url":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-18T23:08:13+00:00","article_modified_time":"2022-09-18T23:08:16+00:00","author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Mermaid JS Themes in JavaScript","datePublished":"2022-09-18T23:08:13+00:00","dateModified":"2022-09-18T23:08:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/"},"wordCount":22,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/","name":"Mermaid JS Themes in JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-18T23:08:13+00:00","dateModified":"2022-09-18T23:08:16+00:00","description":"Mermaid JS Themes index.js import { getThemeVariables as baseThemeVariables } from '.\/theme-base'; import { getThemeVariables as darkThemeVariables } from","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/mermaid-js-themes-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mermaid JS Themes in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3366"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3366\/revisions"}],"predecessor-version":[{"id":3367,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3366\/revisions\/3367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}