#1542 Theme variables setup

mermaid-js · Jul 17, 2020 · 030b945 · 030b945
1 parent fd4240b
commit 030b945
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 154 deletions.
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -24,62 +24,77 @@
   </head>
   <body>
     <h1>info below</h1>
-    <div class="flex">
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-flowchart BT
-    subgraph two
-    b1
-    end
-    subgraph three
-    c1-->c2
-    end
-    c1 --apa apa apa--> b1
-    two --> c2
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
-sequenceDiagram
-   Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
-   Bob->>Alice: I'm short though
-      </div>
-      <div class="mermaid" style="width: 50%; height: 200px;">
-        %%{init: {'securityLevel': 'loose'}}%%
-      graph TD
-        A[Christmas] -->|Get money| B(Go shopping)
-        B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
-        C -->|One| D[Laptop]
-        C -->|Two| E[iPhone]
-        C -->|Three| F[Car]
-        click A "index.html#link-clicked" "link test"
-        click B callback "click test"
-        classDef someclass fill:#f96;
-        class A someclass;
-        class C someclass;
-      </div>
-      <div class="mermaid2" style="width: 50%; height: 200px;">
+    <div class="flex flex-wrap">
+      <div class="mermaid" style="width: 50%; height: 20%;">
+              %%{init: {"theme": forest, "logLevel": 1 }}%%
 
-      flowchart BT
-      subgraph a
-        b1 -- ok --> b2
-      end
-      a -- sert --> c
-      c --> d
-      b1 --> d
-      a --asd123 --> d
+graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-stateDiagram-v2
-  state A {
-    B1 --> B2: ok
-  }
-  A --> C: sert
-  C --> D
-  B1 --> D
-  A --> D: asd123
+      <div class="mermaid" style="width: 50%; height: 20%;">
+      %%{init: {"theme": forest, "logLevel": 1 }}%%
+      graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
       </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+      %%{init: {"theme": neutral, "logLevel": 1 }}%%
+      graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-
+      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
+      %%{init: {"theme": dark, "logLevel": 1 }}%%
+      graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
       </div>
+    </div>
 
   <script src="./mermaid.js"></script>
     <script>
@@ -88,17 +103,18 @@ <h1>info below</h1>
         };
       mermaid.initialize({
         // theme: 'dark',
-        theme: 'forest',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        flowchart: { useMaxWidth: true },
+        graph: { curve: 'cardinal', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
-        securityLevel: 'strict'
+        securityLevel: 'strict',
       });
       function callback(){alert('It worked');}
     </script>

diff --git a/src/config.js b/src/config.js
@@ -874,10 +874,6 @@ const currentConfig = assignWithDepth({}, defaultConfig);
 export const setSiteConfig = conf => {
   assignWithDepth(currentConfig, conf, { clobber: true });
   // Set theme variables if user has set the theme option
-  // if (conf.theme && themes[conf.theme]) {
-  //   conf.themeVariables = themes[conf.theme];
-  // }
-  // debugger;
   assignWithDepth(siteConfig, conf);
 
   return getSiteConfig();
@@ -912,9 +908,6 @@ export const getSiteConfig = () => {
 export const setConfig = conf => {
   sanitize(conf);
 
-  // if (conf.theme && themes[conf.theme]) {
-  //   conf.themeVariables = themes[conf.theme];
-  // }
   assignWithDepth(currentConfig, conf);
   return getConfig();
 };
@@ -972,12 +965,6 @@ export const sanitize = options => {
 export const reset = (conf = getSiteConfig()) => {
   Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
   Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
-  // Set theme variables if user has set the theme option
-  // if (conf.theme && themes[conf.theme]) {
-  //   conf.themeVariables = themes[conf.theme];
-  // }
-  // debugger;
-
   assignWithDepth(siteConfig, conf, { clobber: true });
   assignWithDepth(currentConfig, conf, { clobber: true });
 };

diff --git a/src/mermaid.js b/src/mermaid.js
@@ -129,7 +129,7 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  // mermaidAPI.reset();
+  mermaidAPI.reset();
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -139,7 +139,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
-  mermaidAPI.reset();
+  // mermaidAPI.reset();
 };
 
 /**

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -55,7 +55,8 @@ import getStyles from './styles';
 const themes = {};
 
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
-  themes[themeName] = require(`./theme-${themeName}.js`).default;
+  themes[themeName] = require(`./theme-${themeName}.js`);
+  console.warn(themeName, themes[themeName]);
 }
 
 function parse(text) {
@@ -540,6 +541,7 @@ function initialize(options) {
   // Set default options
 
   if (options.theme && themes[options.theme]) {
+    // Todo merge with user options
     options.themeVariables = themes[options.theme];
   }
 

diff --git a/src/theme-dark.js b/src/theme-dark.js
@@ -1,21 +1,64 @@
-const theme = {
-  mainBkg: '#ECECFF',
-  secondBkg: '#ffffde',
-  lineColor: '#333333',
-  border1: '#CCCCFF',
-  border2: '#aaaa33',
-  arrowheadColor: '#333333',
-  labelColor: 'black',
-  errorBkgColor: '#552222',
-  errorTextColor: '#552222',
-
-  /* Flowchart variables */
-  nodeBkg: 'mainBkg',
-  nodeBorder: '#9370DB',
-  clusterBkg: 'secondBkg',
-  clusterBorder: 'border2',
-  defaultLinkColor: 'lineColor',
-  titleColor: '#333',
-  edgeLabelBackground: '#e8e8e8'
-};
-export default theme;
+export const mainBkg = '#1f2020';
+export const secondBkg = 'lighten(#1f2020; 16)';
+export const mainContrastColor = 'lightgrey';
+export const darkTextColor = '#323D47';
+export const lineColor = mainContrastColor;
+export const border1 = '#81B1DB';
+export const border2 = 'rgba(255; 255; 255; 0.25)';
+export const arrowheadColor = mainContrastColor;
+
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = border1;
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = '#F9FFFE';
+export const edgeLabelBackground = '#e8e8e8';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = mainContrastColor;
+export const actorLineColor = mainContrastColor;
+export const signalColor = mainContrastColor;
+export const signalTextColor = mainContrastColor;
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = actorBorder;
+export const labelTextColor = mainContrastColor;
+export const loopTextColor = mainContrastColor;
+export const noteBorderColor = border2;
+export const noteBkgColor = '#fff5ad';
+export const noteTextColor = mainBkg;
+export const activationBorderColor = border1;
+export const activationBkgColor = secondBkg;
+export const sequenceNumberColor = 'black';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = 'rgba(255; 255; 255; 0.3)';
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = '#EAE8B9';
+export const taskBorderColor = 'rgba(255; 255; 255; 0.5)';
+export const taskBkgColor = mainBkg;
+export const taskTextColor = darkTextColor;
+export const taskTextLightColor = mainContrastColor;
+export const taskTextOutsideColor = taskTextLightColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = 'rgba(255; 255; 255; 0.5)';
+export const activeTaskBkgColor = '#81B1DB';
+export const gridColor = mainContrastColor;
+export const doneTaskBkgColor = mainContrastColor;
+export const doneTaskBorderColor = 'grey';
+export const critBorderColor = '#E83737';
+export const critBkgColor = '#E83737';
+export const taskTextDarkColor = darkTextColor;
+export const todayLineColor = '#DB5757';
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#a44141';
+export const errorTextColor = '#ddd';
diff --git a/src/theme-default.js b/src/theme-default.js
@@ -1,21 +1,62 @@
-const theme = {
-  mainBkg: '#ECECFF',
-  secondBkg: '#ffffde',
-  lineColor: '#333333',
-  border1: '#CCCCFF',
-  border2: '#aaaa33',
-  arrowheadColor: '#333333',
-  labelColor: 'black',
-  errorBkgColor: '#552222',
-  errorTextColor: '#552222',
-
-  /* Flowchart variables */
-  nodeBkg: 'mainBkg',
-  nodeBorder: '#9370DB',
-  clusterBkg: 'secondBkg',
-  clusterBorder: 'border2',
-  defaultLinkColor: 'lineColor',
-  titleColor: '#333',
-  edgeLabelBackground: '#e8e8e8'
-};
-export default theme;
+export const mainBkg = '#ECECFF';
+export const secondBkg = '#ffffde';
+export const lineColor = '#333333';
+export const border1 = '#CCCCFF';
+export const border2 = '#aaaa33';
+export const arrowheadColor = '#333333';
+
+/* Flowchart variables */
+
+export const nodeBkg = mainBkg;
+export const nodeBorder = '#9370DB';
+export const clusterBkg = secondBkg;
+export const clusterBorder = border2;
+export const defaultLinkColor = lineColor;
+export const titleColor = '#333';
+export const edgeLabelBackground = '#e8e8e8';
+
+/* Sequence Diagram variables */
+
+export const actorBorder = border1;
+export const actorBkg = mainBkg;
+export const actorTextColor = 'black';
+export const actorLineColor = 'grey';
+export const signalColor = '#333';
+export const signalTextColor = '#333';
+export const labelBoxBkgColor = actorBkg;
+export const labelBoxBorderColor = actorBorder;
+export const labelTextColor = actorTextColor;
+export const loopTextColor = actorTextColor;
+export const noteBorderColor = border2;
+export const noteBkgColor = '#fff5ad';
+export const noteTextColor = actorTextColor;
+export const activationBorderColor = '#666';
+export const activationBkgColor = '#f4f4f4';
+export const sequenceNumberColor = 'white';
+
+/* Gantt chart variables */
+
+export const sectionBkgColor = 'rgba(102; 102; 255; 0.49)';
+export const altSectionBkgColor = 'white';
+export const sectionBkgColor2 = '#fff400';
+export const taskBorderColor = '#534fbc';
+export const taskBkgColor = '#8a90dd';
+export const taskTextLightColor = 'white';
+export const taskTextColor = taskTextLightColor;
+export const taskTextDarkColor = 'black';
+export const taskTextOutsideColor = taskTextDarkColor;
+export const taskTextClickableColor = '#003163';
+export const activeTaskBorderColor = '#534fbc';
+export const activeTaskBkgColor = '#bfc7ff';
+export const gridColor = 'lightgrey';
+export const doneTaskBkgColor = 'lightgrey';
+export const doneTaskBorderColor = 'grey';
+export const critBorderColor = '#ff8888';
+export const critBkgColor = 'red';
+export const todayLineColor = 'red';
+
+/* state colors */
+export const labelColor = 'black';
+
+export const errorBkgColor = '#552222';
+export const errorTextColor = '#552222';