mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-02 10:34:22 +01:00
Redux themes
This commit is contained in:
Knut Sveidqvist
234
cypress/platform/knsv-recursive.html
Normal file
234
cypress/platform/knsv-recursive.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<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://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.recursive-500 {
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
/* font-family: 'Arial'; */
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
/* color: white; */
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
.gridify.tiny {
|
||||
background-image: linear-gradient(
|
||||
transparent 11px,
|
||||
rgba(220, 220, 200, 0.8) 12px,
|
||||
transparent 12px
|
||||
),
|
||||
linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
|
||||
background-size:
|
||||
100% 12px,
|
||||
12px 100%;
|
||||
}
|
||||
|
||||
.gridify.dots {
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
rgba(220, 220, 200, 0.8) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
/* font-size: 18px !important; */
|
||||
font-family: 'Recursive', serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
width: 100%;
|
||||
/*box-shadow: 4px 4px 0px 0px #0000000F;*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="gridify dots">
|
||||
<p class="mb-20">Test Diagram</p>
|
||||
<div class="w-full h-64">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
---
|
||||
config:
|
||||
look: neo
|
||||
theme: redux
|
||||
layout: dagre
|
||||
---
|
||||
flowchart TD
|
||||
A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
|
||||
n1 --x n4["Diamond"]
|
||||
n2 --o n5["Hexagon"]
|
||||
n3 --> n6["Lean Left"]
|
||||
n5 o--o n7["Trapezoid"]
|
||||
n4 x--x n8["Lean Right"]
|
||||
n6 <--> n9["Lined Doc"]
|
||||
n8 --> n10["Rose"]
|
||||
n7 --> n11["Pine"]
|
||||
n9 --> n12["Peach"]
|
||||
n2@{ shape: rounded}
|
||||
n4@{ shape: diam}
|
||||
n5@{ shape: hex}
|
||||
n6@{ shape: lean-l}
|
||||
n7@{ shape: trap-b}
|
||||
n8@{ shape: lean-r}
|
||||
n9@{ shape: lin-doc}
|
||||
n10:::Rose
|
||||
n11:::Pine
|
||||
n12:::Peach
|
||||
classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
|
||||
classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
|
||||
classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
const staticBellIconPack = {
|
||||
prefix: 'fa6-regular',
|
||||
icons: {
|
||||
bell: {
|
||||
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
|
||||
width: 448,
|
||||
},
|
||||
},
|
||||
width: 512,
|
||||
height: 512,
|
||||
};
|
||||
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () => staticBellIconPack,
|
||||
},
|
||||
]);
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'redux',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
look: 'neo',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'Recursive',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
kanban: {
|
||||
htmlLabels: false,
|
||||
},
|
||||
fontSize: 12,
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
callback,
|
||||
});
|
||||
// setTimeout(() => {
|
||||
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
|
||||
// }, 1000);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -61,7 +61,18 @@ export interface MermaidConfig {
|
||||
* You may also use `themeCSS` to override this value.
|
||||
*
|
||||
*/
|
||||
theme?: 'default' | 'base' | 'dark' | 'forest' | 'neutral' | 'neo' | 'neo-dark' | 'mc' | 'null';
|
||||
theme?:
|
||||
| 'default'
|
||||
| 'base'
|
||||
| 'dark'
|
||||
| 'forest'
|
||||
| 'neutral'
|
||||
| 'neo'
|
||||
| 'neo-dark'
|
||||
| 'redux'
|
||||
| 'redux-dark'
|
||||
| 'mc'
|
||||
| 'null';
|
||||
themeVariables?: any;
|
||||
themeCSS?: string;
|
||||
/**
|
||||
|
||||
@@ -16,6 +16,7 @@ export interface FlowChartStyleOptions {
|
||||
tertiaryColor: string;
|
||||
textColor: string;
|
||||
titleColor: string;
|
||||
strokeWidth: string;
|
||||
}
|
||||
|
||||
const fade = (color: string, opacity: number) => {
|
||||
@@ -57,17 +58,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
||||
.node path {
|
||||
fill: ${options.mainBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
stroke-width: ${options.strokeWidth}px;
|
||||
}
|
||||
.rough-node .label text , .node .label text, .image-shape .label, .icon-shape .label {
|
||||
text-anchor: middle;
|
||||
}
|
||||
// .flowchart-label .text-outer-tspan {
|
||||
// text-anchor: middle;
|
||||
// }
|
||||
// .flowchart-label .text-inner-tspan {
|
||||
// text-anchor: start;
|
||||
// }
|
||||
|
||||
.node .katex path {
|
||||
fill: #000;
|
||||
@@ -95,7 +90,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
||||
|
||||
.edgePath .path {
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 2.0px;
|
||||
stroke-width: ${options.strokeWidth}px;
|
||||
}
|
||||
|
||||
.flowchart-link {
|
||||
@@ -125,7 +120,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
|
||||
.cluster rect {
|
||||
fill: ${options.clusterBkg};
|
||||
stroke: ${options.clusterBorder};
|
||||
stroke-width: 1px;
|
||||
stroke-width: ${options.strokeWidth}px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
|
||||
@@ -59,7 +59,18 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
|
||||
|
||||
const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
|
||||
|
||||
// console.log('IPI data4Layout', svg.attr('id'));
|
||||
svg
|
||||
.append('defs')
|
||||
.append('filter')
|
||||
.attr('id', 'drop-shadow')
|
||||
.attr('height', '130%')
|
||||
.attr('width', '130%')
|
||||
.append('feDropShadow')
|
||||
.attr('dx', '4')
|
||||
.attr('dy', '4')
|
||||
.attr('stdDeviation', 0)
|
||||
.attr('flood-opacity', '0.06')
|
||||
.attr('flood-color', '#000000');
|
||||
|
||||
if (useGradient) {
|
||||
const gradient = svg
|
||||
|
||||
@@ -7,12 +7,29 @@ export async function roundedRect<T extends SVGGraphicsElement>(
|
||||
node: Node
|
||||
) {
|
||||
const nodePadding = node.padding ?? 0;
|
||||
const options = {
|
||||
rx: node.look === 'neo' ? 3 : 5,
|
||||
ry: node.look === 'neo' ? 3 : 5,
|
||||
let labelPaddingX = 0;
|
||||
let labelPaddingY = 0;
|
||||
let rx = 0;
|
||||
let ry = 0;
|
||||
|
||||
labelPaddingX: node.look === 'neo' ? nodePadding * 2 : nodePadding,
|
||||
labelPaddingY: node.look === 'neo' ? nodePadding : nodePadding,
|
||||
switch (node.look) {
|
||||
case 'neo':
|
||||
labelPaddingX = 16;
|
||||
labelPaddingY = 12;
|
||||
rx = ry = 12;
|
||||
break;
|
||||
default:
|
||||
labelPaddingX = nodePadding * 2;
|
||||
labelPaddingY = nodePadding;
|
||||
rx = ry = 5;
|
||||
}
|
||||
|
||||
const options = {
|
||||
rx,
|
||||
ry,
|
||||
|
||||
labelPaddingX,
|
||||
labelPaddingY,
|
||||
classes: '',
|
||||
} as RectOptions;
|
||||
|
||||
|
||||
@@ -3,12 +3,16 @@ import type { D3Selection } from '../../../types.js';
|
||||
import { drawRect } from './drawRect.js';
|
||||
|
||||
export async function squareRect<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
|
||||
const nodePadding = node.padding ?? 0;
|
||||
const labelPaddingX = node.look === 'neo' ? 16 : nodePadding * 2;
|
||||
const labelPaddingY = node.look === 'neo' ? 12 : nodePadding;
|
||||
|
||||
const options = {
|
||||
rx: 0,
|
||||
ry: 0,
|
||||
classes: '',
|
||||
labelPaddingX: (node?.padding || 0) * 2,
|
||||
labelPaddingY: (node?.padding || 0) * 1,
|
||||
labelPaddingX,
|
||||
labelPaddingY,
|
||||
} as RectOptions;
|
||||
return drawRect(parent, node, options);
|
||||
}
|
||||
|
||||
@@ -69,6 +69,8 @@ properties:
|
||||
- neutral
|
||||
- neo
|
||||
- neo-dark
|
||||
- redux
|
||||
- redux-dark
|
||||
- mc
|
||||
- 'null' # should this be a `null`-type?
|
||||
meta:enum:
|
||||
|
||||
@@ -44,7 +44,7 @@ const getStyles = (
|
||||
}
|
||||
|
||||
& .edge-thickness-normal {
|
||||
stroke-width: 1px;
|
||||
stroke-width: ${options.strokeWidth}px;
|
||||
}
|
||||
& .edge-thickness-thick {
|
||||
stroke-width: 3.5px
|
||||
@@ -90,8 +90,8 @@ const getStyles = (
|
||||
}
|
||||
|
||||
|
||||
[data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path {
|
||||
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : 'none'};
|
||||
[data-look="neo"].node path {
|
||||
stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
|
||||
filter: ${options.dropShadow};
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,8 @@ import { getThemeVariables as defaultThemeVariables } from './theme-default.js';
|
||||
import { getThemeVariables as forestThemeVariables } from './theme-forest.js';
|
||||
import { getThemeVariables as neutralThemeVariables } from './theme-neutral.js';
|
||||
import { getThemeVariables as neoThemeVariables } from './theme-neo.js';
|
||||
import { getThemeVariables as reduxThemeVariables } from './theme-redux.js';
|
||||
import { getThemeVariables as reduxDarkThemeVariables } from './theme-redux-dark.js';
|
||||
import { getThemeVariables as neoDarkThemeVariables } from './theme-neo-dark.js';
|
||||
import { getThemeVariables as mcThemeVariables } from './theme-mc.js';
|
||||
|
||||
@@ -29,6 +31,12 @@ export default {
|
||||
'neo-dark': {
|
||||
getThemeVariables: neoDarkThemeVariables,
|
||||
},
|
||||
redux: {
|
||||
getThemeVariables: reduxThemeVariables,
|
||||
},
|
||||
'redux-dark': {
|
||||
getThemeVariables: reduxDarkThemeVariables,
|
||||
},
|
||||
mc: {
|
||||
getThemeVariables: mcThemeVariables,
|
||||
},
|
||||
|
||||
@@ -21,6 +21,7 @@ class Theme {
|
||||
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
this.strokeWidth = 1;
|
||||
// dark
|
||||
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
|
||||
@@ -30,6 +30,7 @@ class Theme {
|
||||
this.textColor = '#ccc';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
this.strokeWidth = 1;
|
||||
|
||||
/* Flowchart variables */
|
||||
this.nodeBkg = 'calculated';
|
||||
|
||||
@@ -39,7 +39,7 @@ class Theme {
|
||||
this.textColor = '#333';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
|
||||
this.strokeWidth = 1;
|
||||
/* Flowchart variables */
|
||||
|
||||
this.nodeBkg = 'calculated';
|
||||
|
||||
@@ -32,6 +32,7 @@ class Theme {
|
||||
this.textColor = invert(this.background);
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
this.strokeWidth = 1;
|
||||
|
||||
/* Flowchart variables */
|
||||
this.nodeBkg = 'calculated';
|
||||
|
||||
@@ -23,6 +23,7 @@ class Theme {
|
||||
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 3;
|
||||
this.strokeWidth = 1;
|
||||
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||||
// dark
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@ class Theme {
|
||||
this.textColor = '#ccc';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 3;
|
||||
this.strokeWidth = 1;
|
||||
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = '#333';
|
||||
|
||||
@@ -22,6 +22,7 @@ class Theme {
|
||||
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 3;
|
||||
this.strokeWidth = 2;
|
||||
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||||
// dark
|
||||
|
||||
|
||||
@@ -43,6 +43,7 @@ class Theme {
|
||||
this.fontSize = '14px';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 5;
|
||||
this.strokeWidth = 1;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
|
||||
407
packages/mermaid/src/themes/theme-redux-dark.js
Normal file
407
packages/mermaid/src/themes/theme-redux-dark.js
Normal file
@@ -0,0 +1,407 @@
|
||||
import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma';
|
||||
import { mkBorder } from './theme-helpers.js';
|
||||
import {
|
||||
oldAttributeBackgroundColorEven,
|
||||
oldAttributeBackgroundColorOdd,
|
||||
} from './erDiagram-oldHardcodedValues.js';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
/** # Base variables */
|
||||
/**
|
||||
* - Background - used to know what the background color is of the diagram. This is used for
|
||||
* deducing colors for instance line color. Default value is #f4f4f4.
|
||||
*/
|
||||
this.background = '#333';
|
||||
this.primaryColor = '#1f2020';
|
||||
this.secondaryColor = lighten(this.primaryColor, 16);
|
||||
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
||||
this.primaryBorderColor = invert(this.background);
|
||||
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.mainBkg = '#2a2020';
|
||||
this.secondBkg = 'calculated';
|
||||
this.mainContrastColor = 'lightgrey';
|
||||
this.darkTextColor = lighten(invert('#323D47'), 10);
|
||||
this.border1 = '#ccc';
|
||||
this.border2 = rgba(255, 255, 255, 0.25);
|
||||
this.arrowheadColor = invert(this.background);
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '14px';
|
||||
this.labelBackground = '#181818';
|
||||
this.textColor = '#ccc';
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 3;
|
||||
this.strokeWidth = 2;
|
||||
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = '#333';
|
||||
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
// dark
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '14px';
|
||||
|
||||
// Neo-specific
|
||||
// this.nodeBorder = 'none';
|
||||
// this.stateBorder = 'none';
|
||||
|
||||
this.useGradient = true;
|
||||
this.gradientStart = '#0042eb';
|
||||
this.gradientStop = '#eb0042';
|
||||
this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.2))';
|
||||
|
||||
/* Architecture Diagram variables */
|
||||
this.archEdgeColor = 'calculated';
|
||||
this.archEdgeArrowColor = 'calculated';
|
||||
this.archEdgeWidth = '3';
|
||||
this.archGroupBorderColor = this.primaryBorderColor;
|
||||
this.archGroupBorderWidth = '2px';
|
||||
}
|
||||
updateColors() {
|
||||
// The || is to make sure that if the variable has been defined by a user override that value is to be used
|
||||
|
||||
/* Main */
|
||||
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
|
||||
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
|
||||
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
|
||||
|
||||
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
|
||||
this.secondaryBorderColor =
|
||||
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
|
||||
this.tertiaryBorderColor =
|
||||
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
|
||||
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
|
||||
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
|
||||
this.noteTextColor = this.noteTextColor || '#333';
|
||||
|
||||
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
|
||||
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
|
||||
this.lineColor = this.lineColor || invert(this.background);
|
||||
this.arrowheadColor = this.arrowheadColor || invert(this.background);
|
||||
this.textColor = this.textColor || this.primaryTextColor;
|
||||
|
||||
// TODO: should this instead default to secondaryBorderColor?
|
||||
this.border2 = this.border2 || this.tertiaryBorderColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
this.nodeBkg = this.nodeBkg || this.primaryColor;
|
||||
this.mainBkg = this.mainBkg || this.primaryColor;
|
||||
this.nodeBorder = this.nodeBorder || this.border1;
|
||||
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
|
||||
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
|
||||
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
|
||||
this.titleColor = this.titleColor || this.tertiaryTextColor;
|
||||
this.edgeLabelBackground =
|
||||
this.edgeLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
this.actorBorder = this.actorBorder || this.primaryBorderColor;
|
||||
this.actorBkg = this.actorBkg || this.mainBkg;
|
||||
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
|
||||
this.actorLineColor = this.actorLineColor || this.actorBorder;
|
||||
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
|
||||
this.signalColor = this.signalColor || this.textColor;
|
||||
this.signalTextColor = this.signalTextColor || this.textColor;
|
||||
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
|
||||
this.labelTextColor = this.labelTextColor || this.actorTextColor;
|
||||
this.loopTextColor = this.loopTextColor || this.actorTextColor;
|
||||
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
|
||||
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
|
||||
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
|
||||
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
|
||||
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
|
||||
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
|
||||
this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
|
||||
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
|
||||
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
|
||||
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
|
||||
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
|
||||
this.gridColor = this.gridColor || 'lightgrey';
|
||||
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
|
||||
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
|
||||
this.critBorderColor = this.critBorderColor || '#ff8888';
|
||||
this.critBkgColor = this.critBkgColor || 'red';
|
||||
this.todayLineColor = this.todayLineColor || 'red';
|
||||
this.taskTextColor = this.taskTextColor || this.textColor;
|
||||
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
|
||||
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
|
||||
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
|
||||
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
|
||||
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
|
||||
|
||||
/* Architecture Diagram variables */
|
||||
this.archEdgeColor = this.lineColor;
|
||||
this.archEdgeArrowColor = this.lineColor;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.personBorder = this.personBorder || this.primaryBorderColor;
|
||||
this.personBkg = this.personBkg || this.mainBkg;
|
||||
|
||||
/* state colors */
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
/* The color of the text tables of the states*/
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.specialStateColor = this.lineColor;
|
||||
|
||||
/* Color Scale */
|
||||
/* Each color-set will have a background, a foreground and a border color */
|
||||
this.cScale0 = this.cScale0 || this.primaryColor;
|
||||
this.cScale1 = this.cScale1 || this.secondaryColor;
|
||||
this.cScale2 = this.cScale2 || this.tertiaryColor;
|
||||
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
|
||||
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
|
||||
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
|
||||
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
|
||||
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
|
||||
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
|
||||
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
|
||||
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
|
||||
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
|
||||
if (this.darkMode) {
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScale' + i] = darken(this['cScale' + i], 75);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScale' + i] = darken(this['cScale' + i], 25);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup the inverted color for the set
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
|
||||
}
|
||||
// Setup the peer color for the set, useful for borders
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
if (this.darkMode) {
|
||||
this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
|
||||
} else {
|
||||
this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup the label color for the set
|
||||
this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
|
||||
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
|
||||
}
|
||||
|
||||
const multiplier = this.darkMode ? -4 : -1;
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this['surface' + i] =
|
||||
this['surface' + i] ||
|
||||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });
|
||||
this['surfacePeer' + i] =
|
||||
this['surfacePeer' + i] ||
|
||||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });
|
||||
}
|
||||
|
||||
/* class */
|
||||
this.classText = this.classText || this.textColor;
|
||||
|
||||
/* user-journey */
|
||||
this.fillType0 = this.fillType0 || this.primaryColor;
|
||||
this.fillType1 = this.fillType1 || this.secondaryColor;
|
||||
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
|
||||
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
|
||||
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
|
||||
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
|
||||
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
|
||||
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || this.primaryColor;
|
||||
this.pie2 = this.pie2 || this.secondaryColor;
|
||||
this.pie3 = this.pie3 || this.tertiaryColor;
|
||||
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
|
||||
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
|
||||
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
|
||||
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
|
||||
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||||
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||||
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
|
||||
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
|
||||
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
|
||||
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* quadrant-graph */
|
||||
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
|
||||
this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
|
||||
this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
|
||||
this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
|
||||
this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
|
||||
this.quadrant2TextFill =
|
||||
this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
|
||||
this.quadrant3TextFill =
|
||||
this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
|
||||
this.quadrant4TextFill =
|
||||
this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
|
||||
this.quadrantPointFill =
|
||||
this.quadrantPointFill || isDark(this.quadrant1Fill)
|
||||
? lighten(this.quadrant1Fill)
|
||||
: darken(this.quadrant1Fill);
|
||||
this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
|
||||
this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
|
||||
this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
|
||||
this.quadrantInternalBorderStrokeFill =
|
||||
this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantExternalBorderStrokeFill =
|
||||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
|
||||
plotColorPalette:
|
||||
this.xyChart?.plotColorPalette ||
|
||||
'#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || '1';
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground =
|
||||
this.relationLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
|
||||
/* git */
|
||||
this.git0 = this.git0 || this.primaryColor;
|
||||
this.git1 = this.git1 || this.secondaryColor;
|
||||
this.git2 = this.git2 || this.tertiaryColor;
|
||||
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
|
||||
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
|
||||
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
|
||||
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
|
||||
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
|
||||
if (this.darkMode) {
|
||||
this.git0 = lighten(this.git0, 25);
|
||||
this.git1 = lighten(this.git1, 25);
|
||||
this.git2 = lighten(this.git2, 25);
|
||||
this.git3 = lighten(this.git3, 25);
|
||||
this.git4 = lighten(this.git4, 25);
|
||||
this.git5 = lighten(this.git5, 25);
|
||||
this.git6 = lighten(this.git6, 25);
|
||||
this.git7 = lighten(this.git7, 25);
|
||||
} else {
|
||||
this.git0 = darken(this.git0, 25);
|
||||
this.git1 = darken(this.git1, 25);
|
||||
this.git2 = darken(this.git2, 25);
|
||||
this.git3 = darken(this.git3, 25);
|
||||
this.git4 = darken(this.git4, 25);
|
||||
this.git5 = darken(this.git5, 25);
|
||||
this.git6 = darken(this.git6, 25);
|
||||
this.git7 = darken(this.git7, 25);
|
||||
}
|
||||
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||||
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||||
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||||
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||||
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||||
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||||
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||||
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||||
this.branchLabelColor =
|
||||
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
|
||||
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
|
||||
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
|
||||
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
|
||||
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
|
||||
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
|
||||
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
|
||||
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
|
||||
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
|
||||
|
||||
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||||
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||||
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||||
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
|
||||
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||||
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||||
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* EntityRelationship diagrams */
|
||||
|
||||
this.attributeBackgroundColorOdd =
|
||||
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||||
this.attributeBackgroundColorEven =
|
||||
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||||
/* -------------------------------------------------- */
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
394
packages/mermaid/src/themes/theme-redux.js
Normal file
394
packages/mermaid/src/themes/theme-redux.js
Normal file
@@ -0,0 +1,394 @@
|
||||
import { darken, lighten, adjust, invert, isDark } from 'khroma';
|
||||
import { mkBorder } from './theme-helpers.js';
|
||||
import {
|
||||
oldAttributeBackgroundColorEven,
|
||||
oldAttributeBackgroundColorOdd,
|
||||
} from './erDiagram-oldHardcodedValues.js';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
/** # Base variables */
|
||||
/**
|
||||
* - Background - used to know what the background color is of the diagram. This is used for
|
||||
* deducing colors for instance line color. Default value is #f4f4f4.
|
||||
*/
|
||||
this.background = '#ffffff';
|
||||
|
||||
this.primaryColor = '#cccccc';
|
||||
this.mainBkg = '#ffffff';
|
||||
|
||||
this.noteBkgColor = '#fff5ad';
|
||||
this.noteTextColor = '#333';
|
||||
|
||||
this.THEME_COLOR_LIMIT = 12;
|
||||
this.radius = 3;
|
||||
this.strokeWidth = 2;
|
||||
|
||||
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||||
// dark
|
||||
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '14px';
|
||||
|
||||
// Neo-specific
|
||||
this.nodeBorder = '#000000';
|
||||
this.stateBorder = '#000000';
|
||||
this.useGradient = false;
|
||||
this.gradientStart = '#0042eb';
|
||||
this.gradientStop = '#eb0042';
|
||||
this.dropShadow = 'url(#drop-shadow)';
|
||||
this.tertiaryColor = '#ffffff';
|
||||
|
||||
/* Architecture Diagram variables */
|
||||
this.archEdgeColor = 'calculated';
|
||||
this.archEdgeArrowColor = 'calculated';
|
||||
this.archEdgeWidth = '3';
|
||||
this.archGroupBorderColor = this.primaryBorderColor;
|
||||
this.archGroupBorderWidth = '2px';
|
||||
}
|
||||
updateColors() {
|
||||
// The || is to make sure that if the variable has been defined by a user override that value is to be used
|
||||
|
||||
/* Main */
|
||||
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
|
||||
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
|
||||
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
|
||||
|
||||
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
|
||||
this.secondaryBorderColor =
|
||||
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
|
||||
this.tertiaryBorderColor =
|
||||
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
|
||||
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
|
||||
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
|
||||
this.noteTextColor = this.noteTextColor || '#333';
|
||||
|
||||
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
|
||||
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
|
||||
this.lineColor = this.lineColor || invert(this.background);
|
||||
this.arrowheadColor = this.arrowheadColor || invert(this.background);
|
||||
this.textColor = this.textColor || this.primaryTextColor;
|
||||
|
||||
// TODO: should this instead default to secondaryBorderColor?
|
||||
this.border2 = this.border2 || this.tertiaryBorderColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
this.nodeBkg = this.nodeBkg || this.primaryColor;
|
||||
this.mainBkg = this.mainBkg || this.primaryColor;
|
||||
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
|
||||
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
|
||||
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
|
||||
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
|
||||
this.titleColor = this.titleColor || this.tertiaryTextColor;
|
||||
this.edgeLabelBackground =
|
||||
this.edgeLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
this.actorBorder = this.actorBorder || this.primaryBorderColor;
|
||||
this.actorBkg = this.actorBkg || this.mainBkg;
|
||||
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
|
||||
this.actorLineColor = this.actorLineColor || this.actorBorder;
|
||||
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
|
||||
this.signalColor = this.signalColor || this.textColor;
|
||||
this.signalTextColor = this.signalTextColor || this.textColor;
|
||||
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
|
||||
this.labelTextColor = this.labelTextColor || this.actorTextColor;
|
||||
this.loopTextColor = this.loopTextColor || this.actorTextColor;
|
||||
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
|
||||
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
|
||||
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
|
||||
|
||||
/* Gantt chart variables */
|
||||
const primaryColor = '#ECECFE';
|
||||
const secondaryColor = '#E9E9F1';
|
||||
const tertiaryColor = adjust(primaryColor, { h: 180, l: 5 });
|
||||
this.sectionBkgColor = this.sectionBkgColor || tertiaryColor;
|
||||
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
|
||||
this.sectionBkgColor = this.sectionBkgColor || secondaryColor;
|
||||
this.sectionBkgColor2 = this.sectionBkgColor2 || primaryColor;
|
||||
this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
|
||||
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
|
||||
this.taskBkgColor = this.taskBkgColor || primaryColor;
|
||||
this.activeTaskBorderColor = this.activeTaskBorderColor || primaryColor;
|
||||
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(primaryColor, 23);
|
||||
this.gridColor = this.gridColor || 'lightgrey';
|
||||
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
|
||||
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
|
||||
this.critBorderColor = this.critBorderColor || '#ff8888';
|
||||
this.critBkgColor = this.critBkgColor || 'red';
|
||||
this.todayLineColor = this.todayLineColor || 'red';
|
||||
this.taskTextColor = this.taskTextColor || this.textColor;
|
||||
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
|
||||
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
|
||||
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
|
||||
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
|
||||
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
|
||||
|
||||
/* Architecture Diagram variables */
|
||||
this.archEdgeColor = this.lineColor;
|
||||
this.archEdgeArrowColor = this.lineColor;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.personBorder = this.personBorder || this.primaryBorderColor;
|
||||
this.personBkg = this.personBkg || this.mainBkg;
|
||||
|
||||
/* state colors */
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
/* The color of the text tables of the states*/
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.innerEndBackground = this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.specialStateColor = this.lineColor;
|
||||
|
||||
/* Color Scale */
|
||||
/* Each color-set will have a background, a foreground and a border color */
|
||||
|
||||
this.cScale0 = this.cScale0 || primaryColor;
|
||||
this.cScale1 = this.cScale1 || secondaryColor;
|
||||
this.cScale2 = this.cScale2 || tertiaryColor;
|
||||
this.cScale3 = this.cScale3 || adjust(primaryColor, { h: 30 });
|
||||
this.cScale4 = this.cScale4 || adjust(primaryColor, { h: 60 });
|
||||
this.cScale5 = this.cScale5 || adjust(primaryColor, { h: 90 });
|
||||
this.cScale6 = this.cScale6 || adjust(primaryColor, { h: 120 });
|
||||
this.cScale7 = this.cScale7 || adjust(primaryColor, { h: 150 });
|
||||
this.cScale8 = this.cScale8 || adjust(primaryColor, { h: 210, l: 150 });
|
||||
this.cScale9 = this.cScale9 || adjust(primaryColor, { h: 270 });
|
||||
this.cScale10 = this.cScale10 || adjust(primaryColor, { h: 300 });
|
||||
this.cScale11 = this.cScale11 || adjust(primaryColor, { h: 330 });
|
||||
if (this.darkMode) {
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScale' + i] = darken(this['cScale' + i], 75);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScale' + i] = darken(this['cScale' + i], 25);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup the inverted color for the set
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScaleInv' + i] = this['cScaleInv' + i] || invert(this['cScale' + i]);
|
||||
}
|
||||
// Setup the peer color for the set, useful for borders
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
if (this.darkMode) {
|
||||
this['cScalePeer' + i] = this['cScalePeer' + i] || lighten(this['cScale' + i], 10);
|
||||
} else {
|
||||
this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 10);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup the label color for the set
|
||||
this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
|
||||
|
||||
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||||
this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
|
||||
}
|
||||
|
||||
const multiplier = this.darkMode ? -4 : -1;
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this['surface' + i] =
|
||||
this['surface' + i] ||
|
||||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });
|
||||
this['surfacePeer' + i] =
|
||||
this['surfacePeer' + i] ||
|
||||
adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });
|
||||
}
|
||||
|
||||
/* class */
|
||||
this.classText = this.classText || this.textColor;
|
||||
|
||||
/* user-journey */
|
||||
this.fillType0 = this.fillType0 || primaryColor;
|
||||
this.fillType1 = this.fillType1 || secondaryColor;
|
||||
this.fillType2 = this.fillType2 || adjust(primaryColor, { h: 64 });
|
||||
this.fillType3 = this.fillType3 || adjust(secondaryColor, { h: 64 });
|
||||
this.fillType4 = this.fillType4 || adjust(primaryColor, { h: -64 });
|
||||
this.fillType5 = this.fillType5 || adjust(secondaryColor, { h: -64 });
|
||||
this.fillType6 = this.fillType6 || adjust(primaryColor, { h: 128 });
|
||||
this.fillType7 = this.fillType7 || adjust(secondaryColor, { h: 128 });
|
||||
|
||||
/* pie */
|
||||
this.pie1 = this.pie1 || primaryColor;
|
||||
this.pie2 = this.pie2 || secondaryColor;
|
||||
this.pie3 = this.pie3 || tertiaryColor;
|
||||
this.pie4 = this.pie4 || adjust(primaryColor, { l: -10 });
|
||||
this.pie5 = this.pie5 || adjust(secondaryColor, { l: -10 });
|
||||
this.pie6 = this.pie6 || adjust(tertiaryColor, { l: -10 });
|
||||
this.pie7 = this.pie7 || adjust(primaryColor, { h: +60, l: -10 });
|
||||
this.pie8 = this.pie8 || adjust(primaryColor, { h: -60, l: -10 });
|
||||
this.pie9 = this.pie9 || adjust(primaryColor, { h: 120, l: 0 });
|
||||
this.pie10 = this.pie10 || adjust(primaryColor, { h: +60, l: -20 });
|
||||
this.pie11 = this.pie11 || adjust(primaryColor, { h: -60, l: -20 });
|
||||
this.pie12 = this.pie12 || adjust(primaryColor, { h: 120, l: -10 });
|
||||
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
|
||||
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||||
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
|
||||
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||||
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
|
||||
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||||
this.pieStrokeColor = this.pieStrokeColor || 'black';
|
||||
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
|
||||
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
|
||||
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
|
||||
this.pieOpacity = this.pieOpacity || '0.7';
|
||||
|
||||
/* quadrant-graph */
|
||||
this.quadrant1Fill = this.quadrant1Fill || primaryColor;
|
||||
this.quadrant2Fill = this.quadrant2Fill || adjust(primaryColor, { r: 5, g: 5, b: 5 });
|
||||
this.quadrant3Fill = this.quadrant3Fill || adjust(primaryColor, { r: 10, g: 10, b: 10 });
|
||||
this.quadrant4Fill = this.quadrant4Fill || adjust(primaryColor, { r: 15, g: 15, b: 15 });
|
||||
this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
|
||||
this.quadrant2TextFill =
|
||||
this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
|
||||
this.quadrant3TextFill =
|
||||
this.quadrant3TextFill || adjust(this.primaryTextColor, { r: -10, g: -10, b: -10 });
|
||||
this.quadrant4TextFill =
|
||||
this.quadrant4TextFill || adjust(this.primaryTextColor, { r: -15, g: -15, b: -15 });
|
||||
this.quadrantPointFill =
|
||||
this.quadrantPointFill || isDark(this.quadrant1Fill)
|
||||
? lighten(this.quadrant1Fill)
|
||||
: darken(this.quadrant1Fill);
|
||||
this.quadrantPointTextFill = this.quadrantPointTextFill || this.primaryTextColor;
|
||||
this.quadrantXAxisTextFill = this.quadrantXAxisTextFill || this.primaryTextColor;
|
||||
this.quadrantYAxisTextFill = this.quadrantYAxisTextFill || this.primaryTextColor;
|
||||
this.quadrantInternalBorderStrokeFill =
|
||||
this.quadrantInternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantExternalBorderStrokeFill =
|
||||
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
|
||||
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
|
||||
|
||||
/* xychart */
|
||||
this.xyChart = {
|
||||
backgroundColor: this.xyChart?.backgroundColor || this.background,
|
||||
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
|
||||
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
|
||||
xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
|
||||
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
|
||||
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
|
||||
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
|
||||
yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
|
||||
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
|
||||
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
|
||||
plotColorPalette:
|
||||
this.xyChart?.plotColorPalette ||
|
||||
'#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
|
||||
};
|
||||
|
||||
/* requirement-diagram */
|
||||
this.requirementBackground = this.requirementBackground || primaryColor;
|
||||
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||||
this.requirementBorderSize = this.requirementBorderSize || '1';
|
||||
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||||
this.relationColor = this.relationColor || this.lineColor;
|
||||
this.relationLabelBackground =
|
||||
this.relationLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||||
|
||||
/* git */
|
||||
this.git0 = this.git0 || primaryColor;
|
||||
this.git1 = this.git1 || secondaryColor;
|
||||
this.git2 = this.git2 || tertiaryColor;
|
||||
this.git3 = this.git3 || adjust(primaryColor, { h: -30 });
|
||||
this.git4 = this.git4 || adjust(primaryColor, { h: -60 });
|
||||
this.git5 = this.git5 || adjust(primaryColor, { h: -90 });
|
||||
this.git6 = this.git6 || adjust(primaryColor, { h: +60 });
|
||||
this.git7 = this.git7 || adjust(primaryColor, { h: +120 });
|
||||
if (this.darkMode) {
|
||||
this.git0 = lighten(this.git0, 25);
|
||||
this.git1 = lighten(this.git1, 25);
|
||||
this.git2 = lighten(this.git2, 25);
|
||||
this.git3 = lighten(this.git3, 25);
|
||||
this.git4 = lighten(this.git4, 25);
|
||||
this.git5 = lighten(this.git5, 25);
|
||||
this.git6 = lighten(this.git6, 25);
|
||||
this.git7 = lighten(this.git7, 25);
|
||||
} else {
|
||||
this.git0 = darken(this.git0, 25);
|
||||
this.git1 = darken(this.git1, 25);
|
||||
this.git2 = darken(this.git2, 25);
|
||||
this.git3 = darken(this.git3, 25);
|
||||
this.git4 = darken(this.git4, 25);
|
||||
this.git5 = darken(this.git5, 25);
|
||||
this.git6 = darken(this.git6, 25);
|
||||
this.git7 = darken(this.git7, 25);
|
||||
}
|
||||
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||||
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||||
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||||
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||||
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||||
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||||
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||||
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||||
this.branchLabelColor =
|
||||
this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
|
||||
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
|
||||
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
|
||||
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
|
||||
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
|
||||
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
|
||||
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
|
||||
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
|
||||
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
|
||||
|
||||
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||||
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||||
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||||
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
|
||||
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||||
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||||
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
/* EntityRelationship diagrams */
|
||||
|
||||
this.attributeBackgroundColorOdd =
|
||||
this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||||
this.attributeBackgroundColorEven =
|
||||
this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||||
/* -------------------------------------------------- */
|
||||
}
|
||||
calculate(overrides) {
|
||||
if (typeof overrides !== 'object') {
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
return;
|
||||
}
|
||||
|
||||
const keys = Object.keys(overrides);
|
||||
|
||||
// Copy values from overrides, this is mainly for base colors
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
|
||||
// Calculate colors form base colors
|
||||
this.updateColors();
|
||||
// Copy values from overrides again in case of an override of derived value
|
||||
keys.forEach((k) => {
|
||||
this[k] = overrides[k];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const getThemeVariables = (userOverrides) => {
|
||||
const theme = new Theme();
|
||||
theme.calculate(userOverrides);
|
||||
return theme;
|
||||
};
|
||||
Reference in New Issue
Block a user