From 030b945828856ee338bf127561daedfc44979270 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 17 Jul 2020 09:16:39 +0200 Subject: [PATCH] #1542 Theme variables setup --- cypress/platform/current.html | 124 +++++++++++++++++++--------------- src/config.js | 13 ---- src/mermaid.js | 4 +- src/mermaidAPI.js | 4 +- src/theme-dark.js | 83 +++++++++++++++++------ src/theme-default.js | 81 ++++++++++++++++------ src/theme-forest.js | 81 ++++++++++++++++------ src/theme-neutral.js | 86 +++++++++++++++++------ 8 files changed, 326 insertions(+), 150 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index defb053f1..96dfe7ed8 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -24,62 +24,77 @@

info below

-
-
-flowchart BT - subgraph two - b1 - end - subgraph three - c1-->c2 - end - c1 --apa apa apa--> b1 - two --> c2 +
+
+ %%{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
-
-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 -
-
- %%{init: {'securityLevel': 'loose'}}%% +
+ %%{init: {"theme": forest, "logLevel": 1 }}%% graph TD - A[Christmas] -->|Get money| B(Go shopping) - B --> C{{Let me think...
Do I want something for work,
something to spend every free second with,
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; + 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
-
- - flowchart BT - subgraph a - b1 -- ok --> b2 - end - a -- sert --> c - c --> d - b1 --> d - a --asd123 --> d +
+ %%{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
-
-stateDiagram-v2 - state A { - B1 --> B2: ok - } - A --> C: sert - C --> D - B1 --> D - A --> D: asd123 -
-
-
- +
+ %%{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
+
diff --git a/src/config.js b/src/config.js index 999c1af6a..937e6e3b3 100644 --- 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 index d2802f2ea..ca6034c89 100644 --- 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 index 854190581..761aa065d 100644 --- 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 index e71ea9058..ebf555db9 100644 --- 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', +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 */ - nodeBkg: 'mainBkg', - nodeBorder: '#9370DB', - clusterBkg: 'secondBkg', - clusterBorder: 'border2', - defaultLinkColor: 'lineColor', - titleColor: '#333', - edgeLabelBackground: '#e8e8e8' -}; -export default theme; +/* 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 index e71ea9058..68fa40351 100644 --- 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', +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 */ - nodeBkg: 'mainBkg', - nodeBorder: '#9370DB', - clusterBkg: 'secondBkg', - clusterBorder: 'border2', - defaultLinkColor: 'lineColor', - titleColor: '#333', - edgeLabelBackground: '#e8e8e8' -}; -export default theme; +/* 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'; diff --git a/src/theme-forest.js b/src/theme-forest.js index 73654e783..5f3fcaa33 100644 --- a/src/theme-forest.js +++ b/src/theme-forest.js @@ -1,21 +1,62 @@ -const theme = { - mainBkg: 'red', - secondBkg: '#ffffde', - lineColor: '#333333', - border1: '#CCCCFF', - border2: '#aaaa33', - arrowheadColor: '#333333', - labelColor: 'black', - errorBkgColor: '#552222', - errorTextColor: '#552222', +export const mainBkg = '#cde498'; +export const secondBkg = '#cdffb2'; +export const lineColor = 'green'; +export const border1 = '#13540c'; +export const border2 = '#6eaa49'; +export const arrowheadColor = 'green'; - /* Flowchart variables */ - nodeBkg: 'red', - nodeBorder: '#9370DB', - clusterBkg: 'secondBkg', - clusterBorder: 'border2', - defaultLinkColor: 'lineColor', - titleColor: '#333', - edgeLabelBackground: '#e8e8e8' -}; -export default theme; +/* 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 = '#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 = '#326932'; +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 = '#6eaa49'; +export const altSectionBkgColor = 'white'; +export const sectionBkgColor2 = '#6eaa49'; +export const taskBorderColor = border1; +export const taskBkgColor = '#487e3a'; +export const taskTextLightColor = 'white'; +export const taskTextColor = taskTextLightColor; +export const taskTextDarkColor = 'black'; +export const taskTextOutsideColor = taskTextDarkColor; +export const taskTextClickableColor = '#003163'; +export const activeTaskBorderColor = taskBorderColor; +export const activeTaskBkgColor = mainBkg; +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'; diff --git a/src/theme-neutral.js b/src/theme-neutral.js index d9dfff5be..7d1ab81ca 100644 --- a/src/theme-neutral.js +++ b/src/theme-neutral.js @@ -1,21 +1,67 @@ -const theme = { - mainBkg: 'yellow', - secondBkg: '#ffffde', - lineColor: '#333333', - border1: '#CCCCFF', - border2: '#aaaa33', - arrowheadColor: '#333333', - labelColor: 'black', - errorBkgColor: '#552222', - errorTextColor: '#552222', +export const mainBkg = '#eee'; +export const contrast = '#26a'; +export const secondBkg = 'lighten(contrast; 55%)'; +export const lineColor = '#666'; +export const border1 = '#999'; +export const border2 = contrast; +export const note = '#ffa'; +export const text = '#333'; +export const critical = '#d42'; +export const done = '#bbb'; +export const arrowheadColor = '#333333'; - /* Flowchart variables */ - nodeBkg: 'mainBkg', - nodeBorder: '#9370DB', - clusterBkg: 'secondBkg', - clusterBorder: 'border2', - defaultLinkColor: 'lineColor', - titleColor: '#333', - edgeLabelBackground: '#e8e8e8' -}; -export default theme; +/* 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 = text; +export const edgeLabelBackground = 'white'; + +/* Sequence Diagram variables */ + +export const actorBorder = border1; +export const actorBkg = mainBkg; +export const actorTextColor = text; +export const actorLineColor = lineColor; +export const signalColor = text; +export const signalTextColor = text; +export const labelBoxBkgColor = actorBkg; +export const labelBoxBorderColor = actorBorder; +export const labelTextColor = text; +export const loopTextColor = text; +export const noteBorderColor = 'darken(note; 60%)'; +export const noteBkgColor = note; +export const noteTextColor = actorTextColor; +export const activationBorderColor = '#666'; +export const activationBkgColor = '#f4f4f4'; +export const sequenceNumberColor = 'white'; + +/* Gantt chart variables */ + +export const sectionBkgColor = 'lighten(contrast; 30%)'; +export const altSectionBkgColor = 'white'; +export const sectionBkgColor2 = 'lighten(contrast; 30%)'; +export const taskBorderColor = 'darken(contrast; 10%)'; +export const taskBkgColor = contrast; +export const taskTextLightColor = 'white'; +export const taskTextColor = taskTextLightColor; +export const taskTextDarkColor = text; +export const taskTextOutsideColor = taskTextDarkColor; +export const taskTextClickableColor = '#003163'; +export const activeTaskBorderColor = taskBorderColor; +export const activeTaskBkgColor = mainBkg; +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 todayLineColor = critBkgColor; + +/* state colors */ +export const labelColor = 'black'; + +export const errorBkgColor = '#552222'; +export const errorTextColor = '#552222';