#1542 Adding khroma for color manipulations

mermaid-js · Jul 18, 2020 · 08064c4 · 08064c4
1 parent e8af778
commit 08064c4
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 287 deletions.
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js
@@ -11,7 +11,6 @@ describe('Pie Chart', () => {
       it('should render a pie diagram', () => {
         imgSnapshotTest(
           `
-        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         pie title Sports in Sweden
           "Bandy" : 40
           "Ice-Hockey" : 80

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -25,7 +25,14 @@
   <body>
     <h1>info below</h1>
     <div class="flex flex-wrap">
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+        %%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
+        pie title Sports in Sweden
+          "Bandy" : 40
+          "Ice-Hockey" : 80
+          "Football" : 90
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
 graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -59,7 +66,7 @@ <h1>info below</h1>
             G
           end
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      <div class="mermaid" style="width: 50%; height: 20%;">
       %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
 
       graph TD

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
diff --git a/dist/mermaid.js.map b/dist/mermaid.js.map
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.min.js.map b/dist/mermaid.min.js.map
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "entity-decode": "^2.0.2",
     "graphlib": "^2.1.7",
     "he": "^1.2.0",
+    "khroma": "^1.1.0",
     "minify": "^4.1.1",
     "moment-mini": "^2.22.1",
     "stylis": "^3.5.2"

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -539,10 +539,9 @@ function initialize(options) {
   if (options && options.theme && themes[options.theme]) {
     // Todo merge with user options
     options.themeVariables = themes[options.theme];
+  } else {
+    if (options) options.themeVariables = themes.default;
   }
-  // else {
-  //   if (options) options.themeVariables = themes.default;
-  // }
 
   const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
 

diff --git a/src/theme-neutral.js b/src/theme-neutral.js
@@ -1,6 +1,8 @@
+import { darken, lighten } from 'khroma';
+
 export const mainBkg = '#eee';
 export const contrast = '#26a';
-export const secondBkg = 'lighten(contrast; 55%)';
+export const secondBkg = lighten(contrast, 55);
 export const lineColor = '#666';
 export const border1 = '#999';
 export const border2 = contrast;
@@ -34,7 +36,7 @@ export const labelBoxBkgColor = actorBkg;
 export const labelBoxBorderColor = actorBorder;
 export const labelTextColor = text;
 export const loopTextColor = text;
-export const noteBorderColor = 'darken(note; 60%)';
+export const noteBorderColor = darken(note, 60);
 export const noteBkgColor = note;
 export const noteTextColor = actorTextColor;
 export const activationBorderColor = '#666';
@@ -43,10 +45,10 @@ export const sequenceNumberColor = 'white';
 
 /* Gantt chart variables */
 
-export const sectionBkgColor = 'lighten(contrast; 30%)';
+export const sectionBkgColor = lighten(contrast, 30);
 export const altSectionBkgColor = 'white';
-export const sectionBkgColor2 = 'lighten(contrast; 30%)';
-export const taskBorderColor = 'darken(contrast; 10%)';
+export const sectionBkgColor2 = lighten(contrast, 30);
+export const taskBorderColor = darken(contrast, 10);
 export const taskBkgColor = contrast;
 export const taskTextLightColor = 'white';
 export const taskTextColor = taskTextLightColor;
@@ -55,11 +57,11 @@ export const taskTextOutsideColor = taskTextDarkColor;
 export const taskTextClickableColor = '#003163';
 export const activeTaskBorderColor = taskBorderColor;
 export const activeTaskBkgColor = mainBkg;
-export const gridColor = 'lighten(border1; 30%)';
+export const gridColor = lighten(border1, 30);
 export const doneTaskBkgColor = done;
 export const doneTaskBorderColor = lineColor;
 export const critBkgColor = critical;
-export const critBorderColor = 'darken(critBkgColor; 10%)';
+export const critBorderColor = darken(critBkgColor, 10);
 export const todayLineColor = critBkgColor;
 
 /* state colors */

diff --git a/yarn.lock b/yarn.lock
@@ -6705,6 +6705,11 @@ jssha@^2.1.0:
   resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
   integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
 
+khroma@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.1.0.tgz#cc17723eb719c5245ea66d23dd577d5695452db5"
+  integrity sha512-aTO+YX22tYOLEQJYFiatAj1lc5QZ+H5sHWFRBWNCiKwc5NWNUJZyeSeiHEPeURJ2a1GEVYcmyMUwGjjLe5ec5A==
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"