#1542 Theme variables setup

This commit is contained in:
Knut Sveidqvist 2020-07-17 09:16:39 +02:00
parent fd4240b774
commit 030b945828
8 changed files with 326 additions and 150 deletions

View File

@ -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 class="flex flex-wrap">
<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="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'}}%%
<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...<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;
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: 200px;">
flowchart BT
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
<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%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</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 @@ stateDiagram-v2
};
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>

View File

@ -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 });
};

View File

@ -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();
};
/**

View File

@ -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];
}

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';