marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1593 from mermaid-js/1590_theme_finalizations

Browse Source 
1590 theme finalizations
This commit is contained in:
Knut Sveidqvist
2020-07-30 19:57:33 +02:00
committed by GitHub
parent 116c616561 5565aab488
commit f87c56af5c
22 changed files with 392 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/platform/current.html
View File

@@ -76,7 +76,7 @@ stateDiagram-v2
</div> </div>
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base'}}%% %%{init: {'theme': 'dark'}}%%
flowchart TB flowchart TB
subgraph apa subgraph apa
@@ -106,8 +106,8 @@ Note over Bob,Alice: Looks back
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'base', theme: 'forest',
// themeVariables:{primaryColor: '#0000ff'}, // themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,

5
cypress/platform/showcase_base.html
View File

@@ -11,7 +11,6 @@
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
background: #f4f4f4; background: #f4f4f4;
/* background: #0c0c0c; */
font-family: 'Arial'; font-family: 'Arial';
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -177,7 +176,7 @@ gantt
</div> </div>
<div class="mermaid width height2"> <div class="mermaid width height2">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -234,7 +233,7 @@ journey
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'base', theme: 'base',
themeVariables: { primaryColor: '#ff0000'}, themeVariables:
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,

245
cypress/platform/showcase_base_dark.html Normal file
View File

@@ -0,0 +1,245 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
background: #f4f4f4;
background: #222;
font-family: 'Arial';
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
.height {
min-height: 600px;
height: 600px;
}
.height2 {
min-height: 600px;
height: 1300px;
}
.width {
width: 33%;
border: 1px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h1>Showcases of diagrams</h1>
<div class="flex flex-wrap">
<div class="mermaid width height">
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 width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid width height" >
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
<div class="mermaid width height2">
stateDiagram
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
</div>
<div class="mermaid width height2">
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
state SomethingElse {
A --> B
B --> A
}
Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
</div>
<div class="mermaid width height2">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid width height">
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { 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'
});
function callback(){alert('It worked');}
</script>
</body>
</html>

2
cypress/platform/showcase_dark.html
View File

@@ -166,6 +166,7 @@ gantt
} }
Active --> SomethingElse Active --> SomethingElse
SomethingElse --> [*]
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </div>
<div class="mermaid width height2"> <div class="mermaid width height2">
@@ -191,6 +192,7 @@ gantt
} }
Active --> SomethingElse2 Active --> SomethingElse2
SomethingElse2 --> [*]
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </div>
<div class="mermaid width height2"> <div class="mermaid width height2">

1
cypress/platform/showcase_forest.html
View File

@@ -167,6 +167,7 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
</div> </div>
<div class="mermaid width height2"> <div class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2

46
src/config.js
View File

@@ -20,22 +20,18 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
const d = _directives[i]; const d = _directives[i];
sanitize(d); sanitize(d);
cfg = assignWithDepth(cfg, d); cfg = assignWithDepth(cfg, d);
if (d.themeVariables) { if (d.theme) {
themeVariables = d.themeVariables; cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables);
} }
} }
if (cfg.theme && theme[cfg.theme]) { if (cfg.theme && theme[cfg.theme]) {
// console.warn('cfg beeing updated main bkg', themeVariables, cfg.theme); let tVars = assignWithDepth({}, cfg.themeVariables);
const variables = theme[cfg.theme].getThemeVariables(themeVariables); tVars = assignWithDepth(tVars, themeVariables);
// console.warn('cfg beeing updated 2 main bkg', variables.mainBkg); const variables = theme[cfg.theme].getThemeVariables(tVars);
cfg.themeVariables = variables; cfg.themeVariables = variables;
} }
// else {
// console.warn('cfg not beeing updated main bkg', themeVariables, cfg.theme);
// }
currentConfig = cfg; currentConfig = cfg;
// console.warn('cfg updated main bkg', cfg.sequence);
return cfg; return cfg;
}; };
/** /**
@@ -53,23 +49,20 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
* @returns {*} - the siteConfig * @returns {*} - the siteConfig
*/ */
export const setSiteConfig = conf => { export const setSiteConfig = conf => {
// siteConfig = { ...defaultConfig, ...conf }; console.warn('Setting site config');
siteConfig = assignWithDepth({}, defaultConfig); siteConfig = assignWithDepth({}, defaultConfig);
siteConfig = assignWithDepth(siteConfig, conf); siteConfig = assignWithDepth(siteConfig, conf);
if (conf.theme) {
siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
}
currentConfig = updateCurrentConfig(siteConfig, directives); currentConfig = updateCurrentConfig(siteConfig, directives);
return siteConfig; return siteConfig;
}; };
export const updateSiteConfig = conf => { export const updateSiteConfig = conf => {
// Object.keys(conf).forEach(key => {
// const manipulator = manipulators[key];
// conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
// });
siteConfig = assignWithDepth(siteConfig, conf); siteConfig = assignWithDepth(siteConfig, conf);
console.log('updateSiteConfig', siteConfig);
updateCurrentConfig(siteConfig, directives); updateCurrentConfig(siteConfig, directives);
// assignWithDesetpth(currentConfig, conf, { clobber: true });
// // Set theme variables if user has set the theme option
// assignWithDepth(siteConfig, conf);
return siteConfig; return siteConfig;
}; };
@@ -164,24 +157,7 @@ export const addDirective = directive => {
* @param conf - the base currentConfig to reset to (default: current siteConfig ) * @param conf - the base currentConfig to reset to (default: current siteConfig )
*/ */
export const reset = () => { export const reset = () => {
// Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
// Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
// assignWithDepth(siteConfig, conf, { clobber: true });
// assignWithDepth(currentConfig, conf, { clobber: true });
// Replace current config with siteConfig // Replace current config with siteConfig
directives = []; directives = [];
// console.warn(siteConfig.sequence);
updateCurrentConfig(siteConfig, directives); updateCurrentConfig(siteConfig, directives);
}; };
// const configApi = Object.freeze({
// sanitize,
// setSiteConfig,
// getSiteConfig,
// setConfig,
// getConfig,
// reset,
// defaultConfig
// });
// export default configApi;

2
src/dagre-wrapper/intersect/intersect-node.js
View File

@@ -1,6 +1,6 @@
module.exports = intersectNode; module.exports = intersectNode;
function intersectNode(node, point) { function intersectNode(node, point) {
console.info('Intersect Node'); // console.info('Intersect Node');
return node.intersect(point); return node.intersect(point);
} }

2
src/dagre-wrapper/intersect/intersect-polygon.js
View File

@@ -44,7 +44,7 @@ function intersectPolygon(node, polyPoints, point) {
} }
if (!intersections.length) { if (!intersections.length) {
console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node); // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
return node; return node;
} }

2
src/diagrams/er/styles.js
View File

@@ -7,7 +7,7 @@ const getStyles = options =>
.relationshipLabelBox { .relationshipLabelBox {
fill: ${options.tertiaryColor}; fill: ${options.tertiaryColor};
opacity: 0.3; opacity: 0.7;
background-color: ${options.tertiaryColor}; background-color: ${options.tertiaryColor};
rect { rect {
opacity: 0.5; opacity: 0.5;

2
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -468,7 +468,7 @@ export const draw = function(text, id) {
rect.setAttribute('ry', 0); rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width); rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height); rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;'); // rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild); label.insertBefore(rect, label.firstChild);
} }

2
src/diagrams/flowchart/flowRenderer.js
View File

@@ -451,7 +451,7 @@ export const draw = function(text, id) {
rect.setAttribute('ry', 0); rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width); rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height); rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;'); // rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild); label.insertBefore(rect, label.firstChild);
} }

2
src/diagrams/flowchart/styles.js
View File

@@ -43,6 +43,8 @@ const getStyles = options =>
background-color: ${options.edgeLabelBackground}; background-color: ${options.edgeLabelBackground};
rect { rect {
opacity: 0.5; opacity: 0.5;
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
} }
text-align: center; text-align: center;
} }

27
src/diagrams/state/shapes.js
View File

@@ -14,8 +14,9 @@ import { logger } from '../../logger';
export const drawStartState = g => export const drawStartState = g =>
g g
.append('circle') .append('circle')
.style('stroke', 'black') // .style('stroke', 'black')
.style('fill', 'black') // .style('fill', 'black')
.attr('class', 'start-state')
.attr('r', getConfig().state.sizeUnit) .attr('r', getConfig().state.sizeUnit)
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit) .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit); .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);
@@ -241,8 +242,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
const drawEndState = g => { const drawEndState = g => {
g.append('circle') g.append('circle')
.style('stroke', 'black') // .style('stroke', 'black')
.style('fill', 'white') // .style('fill', 'white')
.attr('class', 'end-state-outer')
.attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding) .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
.attr( .attr(
'cx', 'cx',
@@ -253,13 +255,16 @@ const drawEndState = g => {
getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
); );
return g return (
.append('circle') g
.style('stroke', 'black') .append('circle')
.style('fill', 'black') // .style('stroke', 'black')
.attr('r', getConfig().state.sizeUnit) // .style('fill', 'black')
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2) .attr('class', 'end-state-inner')
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2); .attr('r', getConfig().state.sizeUnit)
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2)
);
}; };
const drawForkJoinState = (g, stateDef) => { const drawForkJoinState = (g, stateDef) => {
let width = getConfig().state.forkWidth; let width = getConfig().state.forkWidth;

12
src/diagrams/state/styles.js
View File

@@ -63,11 +63,14 @@ g.stateGroup line {
.edgeLabel .label rect { .edgeLabel .label rect {
fill: ${options.tertiaryColor}; fill: ${options.tertiaryColor};
opacity: 0.2; opacity: 0.5;
} }
.edgeLabel .label text { .edgeLabel .label text {
fill: ${options.tertiaryTextColor}; fill: ${options.tertiaryTextColor};
} }
.label div .edgeLabel {
color: ${options.tertiaryTextColor};
}
.stateLabel text { .stateLabel text {
fill: ${options.labelColor}; fill: ${options.labelColor};
@@ -78,7 +81,7 @@ g.stateGroup line {
} }
.node circle.state-start { .node circle.state-start {
fill: ${options.primaryBorderColor}; fill: ${options.lineColor};
stroke: black; stroke: black;
} }
.node circle.state-end { .node circle.state-end {
@@ -86,6 +89,11 @@ g.stateGroup line {
stroke: ${options.background}; stroke: ${options.background};
stroke-width: 1.5 stroke-width: 1.5
} }
.end-state-inner {
fill: ${options.background};
// stroke: ${options.background};
stroke-width: 1.5
}
.node rect { .node rect {
fill: ${options.mainBkg}; fill: ${options.mainBkg};

4
src/mermaid.js
View File

@@ -31,7 +31,7 @@ import utils from './utils';
*/ */
const init = function() { const init = function() {
const conf = mermaidAPI.getConfig(); const conf = mermaidAPI.getConfig();
console.log('Starting rendering diagrams (init) - mermaid.init', conf); // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
let nodes; let nodes;
if (arguments.length >= 2) { if (arguments.length >= 2) {
/*! sequence config was passed as #1 */ /*! sequence config was passed as #1 */
@@ -129,7 +129,7 @@ const init = function() {
}; };
const initialize = function(config) { const initialize = function(config) {
mermaidAPI.reset(); // mermaidAPI.reset();
if (typeof config.mermaid !== 'undefined') { if (typeof config.mermaid !== 'undefined') {
if (typeof config.mermaid.startOnLoad !== 'undefined') { if (typeof config.mermaid.startOnLoad !== 'undefined') {
mermaid.startOnLoad = config.mermaid.startOnLoad; mermaid.startOnLoad = config.mermaid.startOnLoad;

6
src/mermaidAPI.js
View File

@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
// console.warn('Render fetching config'); // console.warn('Render fetching config');
const cnf = configApi.getConfig(); const cnf = configApi.getConfig();
// console.warn('Render with config after adding new directives', cnf.themeVariables.mainBkg); console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor);
// Check the maximum allowed text size // Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) { if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -552,7 +552,7 @@ function reinitialize() {
} }
function initialize(options) { function initialize(options) {
logger.debug(`mermaidAPI.initialize: v${pkg.version} ${options}`); console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
// Set default options // Set default options
if (options && options.theme && theme[options.theme]) { if (options && options.theme && theme[options.theme]) {
@@ -581,7 +581,7 @@ const mermaidAPI = Object.freeze({
getSiteConfig: configApi.getSiteConfig, getSiteConfig: configApi.getSiteConfig,
updateSiteConfig: configApi.updateSiteConfig, updateSiteConfig: configApi.updateSiteConfig,
reset: () => { reset: () => {
console.warn('reset'); // console.warn('reset');
configApi.reset(); configApi.reset();
// const siteConfig = configApi.getSiteConfig(); // const siteConfig = configApi.getSiteConfig();
// updateRendererConfigs(siteConfig); // updateRendererConfigs(siteConfig);

36
src/themes/theme-base.js
View File

@@ -1,36 +1,40 @@
import { darken, lighten, adjust, invert } from 'khroma'; import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers';
const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
class Theme { class Theme {
constructor() { constructor() {
/** # Base variables */ /** # Base variables */
/** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */ /** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
this.background = '#f4f4f4'; this.background = '#f4f4f4';
// this.background = '#0c0c0c'; // this.background = '#0c0c0c';
// this.darkMode = true;
this.primaryColor = '#fff4dd';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */ /** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false; this.darkMode = false;
// this.darkMode = true;
// this.primaryColor = '#1f1f00'; // this.primaryColor = '#1f1f00';
this.noteBkgColor = '#fff5ad'; this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333'; this.noteTextColor = '#333';
// dark
// this.primaryColor = '#034694';
// this.primaryColor = '#f2ee7e';
// this.primaryColor = '#9f33be'; // this.primaryColor = '#9f33be';
this.primaryColor = '#f0fff0'; // this.primaryColor = '#f0fff0';
// this.primaryColor = '#fa255e'; // this.primaryColor = '#fa255e';
// this.primaryColor = '#ECECFF'; // this.primaryColor = '#ECECFF';
// this.secondaryColor = '#c39ea0'; // this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5'; // this.tertiaryColor = '#f8e5e5';
this.secondaryColor = '#dfdfde'; // this.secondaryColor = '#dfdfde';
this.tertiaryColor = '#CCCCFF'; // this.tertiaryColor = '#CCCCFF';
this.border1 = '#9370DB'; this.border1 = '#9370DB';
this.arrowheadColor = '#333333'; this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial'; this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px'; this.fontSize = '16px';
this.textColor = '#333';
this.updateColors(); this.updateColors();
this.relationColor = '#000'; this.relationColor = '#000';
} }
@@ -38,19 +42,19 @@ class Theme {
this.secondBkg = this.tertiaryColor; this.secondBkg = this.tertiaryColor;
/* Main */ /* Main */
this.secondaryColor = adjust(this.primaryColor, { h: 120 }); this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
this.tertiaryColor = adjust(this.primaryColor, { h: -160 }); this.secondaryColor = adjust(this.primaryColor, { h: -120 });
console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor); this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode); this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode); this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode); this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor); this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor); this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background); this.lineColor = invert(this.background);
this.textColor = invert(this.background); this.textColor = this.primaryTextColor;
/* Flowchart variables */ /* Flowchart variables */
@@ -62,7 +66,9 @@ class Theme {
this.clusterBorder = this.tertiaryBorderColor; this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor; this.defaultLinkColor = this.lineColor;
this.titleColor = this.tertiaryTextColor; this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.labelBackground; this.edgeLabelBackground = this.darkMode
? darken(this.secondaryColor, 30)
: this.secondaryColor;
/* Sequence Diagram variables */ /* Sequence Diagram variables */
@@ -80,7 +86,7 @@ class Theme {
// this.noteTextColor = this.actorTextColor; // this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10); this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor; this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white'; this.sequenceNumberColor = invert(this.lineColor);
/* Gantt chart variables */ /* Gantt chart variables */

15
src/themes/theme-dark.js
View File

@@ -1,10 +1,21 @@
import { invert, lighten, darken, rgba, adjust } from 'khroma'; import { invert, lighten, darken, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme { class Theme {
constructor() { constructor() {
this.background = '#333'; this.background = '#333';
this.primaryColor = '#1f2020'; this.primaryColor = '#1f2020';
this.secondaryColor = lighten(this.primaryColor, 16); this.secondaryColor = lighten(this.primaryColor, 16);
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.mainBkg = '#1f2020'; this.mainBkg = '#1f2020';
this.secondBkg = 'calculated'; this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey'; this.mainContrastColor = 'lightgrey';
@@ -127,7 +138,7 @@ class Theme {
this.fillType6 = adjust(this.primaryColor, { h: 128 }); this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 }); this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* class */ /* class */
this.classText = this.nodeBorder; this.classText = this.primaryTextColor;
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {

20
src/themes/theme-default.js
View File

@@ -1,10 +1,26 @@
import { lighten, rgba, adjust } from 'khroma'; import { invert, lighten, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme { class Theme {
constructor() { constructor() {
/* Base variables */ /* Base variables */
this.background = '#f4f4f4';
this.primaryColor = '#ECECFF'; this.primaryColor = '#ECECFF';
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.secondaryColor = '#ffffde'; this.secondaryColor = '#ffffde';
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
// this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.background = 'white'; this.background = 'white';
this.mainBkg = '#ECECFF'; this.mainBkg = '#ECECFF';
this.secondBkg = '#ffffde'; this.secondBkg = '#ffffde';
@@ -124,7 +140,7 @@ class Theme {
/* state colors */ /* state colors */
/* class */ /* class */
this.classText = this.nodeBorder; this.classText = this.primaryTextColor;
/* journey */ /* journey */
this.fillType0 = this.primaryColor; this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor; this.fillType1 = this.secondaryColor;

17
src/themes/theme-forest.js
View File

@@ -1,7 +1,9 @@
import { darken, adjust } from 'khroma'; import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme { class Theme {
constructor() { constructor() {
/* Base vales */ /* Base vales */
this.background = '#f4f4f4';
this.primaryColor = '#cde498'; this.primaryColor = '#cde498';
this.secondaryColor = '#cdffb2'; this.secondaryColor = '#cdffb2';
this.background = 'white'; this.background = 'white';
@@ -14,8 +16,17 @@ class Theme {
this.fontFamily = '"trebuchet ms", verdana, arial'; this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px'; this.fontSize = '16px';
/* Flowchart variables */ this.tertiaryColor = lighten('#cde498', 10);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.primaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
/* Flowchart variables */
this.nodeBkg = 'calculated'; this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated'; this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated'; this.clusterBkg = 'calculated';
@@ -99,7 +110,7 @@ class Theme {
/* state colors */ /* state colors */
/* class */ /* class */
this.classText = this.nodeBorder; this.classText = this.primaryTextColor;
/* journey */ /* journey */
this.fillType0 = this.primaryColor; this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor; this.fillType1 = this.secondaryColor;

4
src/themes/theme-helpers.js Normal file
View File

@@ -0,0 +1,4 @@
import { adjust } from 'khroma';
export const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });

23
src/themes/theme-neutral.js
View File

@@ -1,4 +1,5 @@
import { darken, lighten, adjust } from 'khroma'; import { invert, darken, lighten, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
// const Color = require ( 'khroma/dist/color' ).default // const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB" // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -8,7 +9,23 @@ class Theme {
this.primaryColor = '#eee'; this.primaryColor = '#eee';
this.contrast = '#26a'; this.contrast = '#26a';
this.secondaryColor = lighten(this.contrast, 55); this.secondaryColor = lighten(this.contrast, 55);
this.background = 'white'; this.background = '#ffffff';
// this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
// this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.altBackground = lighten(this.contrast, 55);
this.mainBkg = '#eee'; this.mainBkg = '#eee';
this.secondBkg = 'calculated'; this.secondBkg = 'calculated';
this.lineColor = '#666'; this.lineColor = '#666';
@@ -131,7 +148,7 @@ class Theme {
/* state colors */ /* state colors */
/* class */ /* class */
this.classText = this.nodeBorder; this.classText = this.primaryTextColor;
/* journey */ /* journey */
this.fillType0 = this.primaryColor; this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor; this.fillType1 = this.secondaryColor;