Merge branch 'feature/1542_simplify_theming' into develop
This commit is contained in:
Knut Sveidqvist
commit
8a018aa0f2
|
|
@ -16,4 +16,5 @@ dist/sequenceTest.html
|
|||
|
||||
.vscode/
|
||||
cypress/platform/current.html
|
||||
cypress/platform/experimental.html
|
||||
cypress/platform/experimental.html
|
||||
local/
|
||||
|
|
@ -23,6 +23,7 @@ describe('Pie Chart', () => {
|
|||
it('should render a flowchart diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
|
|
@ -45,6 +46,7 @@ describe('Pie Chart', () => {
|
|||
it('should render a new flowchart diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
|
|
@ -67,6 +69,7 @@ describe('Pie Chart', () => {
|
|||
it('should render a sequence diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
|
|
@ -93,6 +96,7 @@ describe('Pie Chart', () => {
|
|||
it('should render a class diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
classDiagram
|
||||
Animal "*" <|-- "1" Duck
|
||||
Animal "1" <|-- "10" Fish
|
||||
|
|
@ -138,6 +142,7 @@ describe('Pie Chart', () => {
|
|||
it('should render a state diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
|
|
@ -169,6 +174,7 @@ stateDiagram
|
|||
it('should render a state diagram (v2)', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
|
|
@ -200,7 +206,7 @@ stateDiagram-v2
|
|||
it('should render a er diagram', () => {
|
||||
imgSnapshotTest(
|
||||
`
|
||||
erDiagram
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
|
|
|
|||
|
|
@ -25,10 +25,17 @@
|
|||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
|
||||
pie title Sports in Sweden
|
||||
"Bandy" : 40
|
||||
"Ice-Hockey" : 80
|
||||
"Football" : 90
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
|
||||
graph TD
|
||||
A[Default] -->|Get money| B(Go shopping)
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
|
|
@ -42,10 +49,10 @@ graph TD
|
|||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
|
||||
graph TD
|
||||
A[Forest] -->|Get money| B(Go shopping)
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
|
|
@ -63,7 +70,7 @@ graph TD
|
|||
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
|
||||
|
||||
graph TD
|
||||
A[Neutral] -->|Get money| B(Go shopping)
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
|
|
@ -77,11 +84,11 @@ graph TD
|
|||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
|
||||
|
||||
graph TD
|
||||
A[Dark] -->|Get money| B(Go shopping)
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
|
|
@ -95,11 +102,11 @@ graph TD
|
|||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
|
||||
%%{init: { 'logLevel': 1} }%%
|
||||
|
||||
graph TD
|
||||
A[None set] -->|Get money| B(Go shopping)
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
|
|
@ -121,6 +128,7 @@ graph TD
|
|||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// theme: 'dark',
|
||||
// theme: 'dark',
|
||||
// arrowMarkerAbsolute: true,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -50,16 +50,16 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^3.1.0",
|
||||
"crypto-random-string": "^3.0.1",
|
||||
"d3": "^5.7.0",
|
||||
"dagre": "^0.8.4",
|
||||
"dagre-d3": "^0.6.4",
|
||||
"entity-decode": "^2.0.2",
|
||||
"graphlib": "^2.1.7",
|
||||
"he": "^1.2.0",
|
||||
"khroma": "^1.1.0",
|
||||
"minify": "^4.1.1",
|
||||
"moment-mini": "^2.22.1",
|
||||
"scope-css": "^1.2.1"
|
||||
"stylis": "^3.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.2.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
import { assignWithDepth } from './utils';
|
||||
import { logger } from './logger';
|
||||
// import themeVariables from './theme-default';
|
||||
// import themeForestVariables from './theme-forest';
|
||||
// import themeNeutralVariables from './theme-neutral';
|
||||
|
||||
const themes = {};
|
||||
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
|
||||
themes[themeName] = require(`./theme-${themeName}.js`).default;
|
||||
}
|
||||
/**
|
||||
* **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**
|
||||
*
|
||||
|
|
@ -51,6 +59,7 @@ const config = {
|
|||
* </pre>
|
||||
*/
|
||||
theme: 'default',
|
||||
themeVariables: themes.default,
|
||||
themeCSS: undefined,
|
||||
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
|
||||
maxTextSize: 50000,
|
||||
|
|
@ -836,6 +845,8 @@ const config = {
|
|||
useMaxWidth: true
|
||||
}
|
||||
};
|
||||
|
||||
// debugger;
|
||||
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||||
config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||||
export const defaultConfig = Object.freeze(config);
|
||||
|
|
@ -845,24 +856,26 @@ const currentConfig = assignWithDepth({}, defaultConfig);
|
|||
|
||||
/**
|
||||
*## setSiteConfig
|
||||
|
||||
|
||||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
|
||||
|
||||
|
||||
***Notes:**
|
||||
*Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
|
||||
*the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
|
||||
*to the defaultConfig
|
||||
*Note: currentConfig is set in this function
|
||||
|
||||
|
||||
**Default value: At default, will mirror Global Config**
|
||||
* @param conf - the base currentConfig to use as siteConfig
|
||||
* @returns {*} - the siteConfig
|
||||
*/
|
||||
export const setSiteConfig = conf => {
|
||||
assignWithDepth(currentConfig, conf, { clobber: true });
|
||||
// Set theme variables if user has set the theme option
|
||||
assignWithDepth(siteConfig, conf);
|
||||
|
||||
return getSiteConfig();
|
||||
};
|
||||
/**
|
||||
|
|
@ -870,7 +883,7 @@ export const setSiteConfig = conf => {
|
|||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
|
||||
|
||||
|
||||
***Notes**:
|
||||
*Returns **any** values in siteConfig.
|
||||
* @returns {*}
|
||||
|
|
@ -883,8 +896,8 @@ export const getSiteConfig = () => {
|
|||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
|
||||
|
||||
|
||||
|
||||
|
||||
***Notes**:
|
||||
*Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
|
||||
*values found in conf with key found in siteConfig.secure will be replaced with the corresponding
|
||||
|
|
@ -894,6 +907,7 @@ export const getSiteConfig = () => {
|
|||
*/
|
||||
export const setConfig = conf => {
|
||||
sanitize(conf);
|
||||
|
||||
assignWithDepth(currentConfig, conf);
|
||||
return getConfig();
|
||||
};
|
||||
|
|
@ -902,7 +916,7 @@ export const setConfig = conf => {
|
|||
*| Function | Description | Type | Return Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
|
||||
|
||||
|
||||
***Notes**:
|
||||
*Returns **any** the currentConfig
|
||||
* @returns {*} - the currentConfig
|
||||
|
|
@ -915,7 +929,7 @@ export const getConfig = () => {
|
|||
*| Function | Description | Type | Values |
|
||||
*| --------- | ------------------- | ------- | ------------------ |
|
||||
*| sanitize |Sets the siteConfig to desired values. | Put Request |None|
|
||||
|
||||
|
||||
*Ensures options parameter does not attempt to override siteConfig secure keys
|
||||
*Note: modifies options in-place
|
||||
* @param options - the potential setConfig parameter
|
||||
|
|
@ -935,7 +949,7 @@ export const sanitize = options => {
|
|||
};
|
||||
/**
|
||||
*## reset
|
||||
|
||||
|
||||
*| Function | Description | Type | Required | Values |
|
||||
*| --------- | ------------------- | ------- | -------- | ------------------ |
|
||||
*| reset|Resets currentConfig to conf| Put Request | Required | None|
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
const getStyles = options =>
|
||||
`g.classGroup text {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
g.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: ${options.nodeBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: ${options.nodeBkg};
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: ${options.nodeBorder};
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.dashed-line{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
|
||||
#compositionStart, #compositionEnd, #dependencyStart, #dependencyEnd, #extensionStart, #extensionEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart, #aggregationEnd {
|
||||
fill: ${options.nodeBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const getStyles = () =>
|
||||
`
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
const getStyles = options =>
|
||||
`.label {
|
||||
font-family: ${options.fontFamily};
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon,
|
||||
.node path {
|
||||
fill: ${options.mainBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node .label {
|
||||
text-align: center;
|
||||
}
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: ${options.arrowheadColor};
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.flowchart-link {
|
||||
stroke: ${options.lineColor};
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
rect {
|
||||
opacity: 0.5;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: ${options.secondBkg};
|
||||
stroke: ${options.clusterBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: 12px;
|
||||
background: ${options.secondBkg};
|
||||
border: 1px solid ${options.border2};
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
const getStyles = options =>
|
||||
`
|
||||
.mermaid-main-font {
|
||||
font-family: "trebuchet ms", verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: ${options.sectionBkgColor};
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: ${options.sectionBkgColor2};
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: ${options.altSectionBkgColor};
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: ${options.gridColor};
|
||||
opacity: 0.8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Today line */
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: ${options.todayLineColor};
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Task styling */
|
||||
|
||||
/* Default task */
|
||||
|
||||
.task {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.taskText:not([font-size]) {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
.task.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.taskText.clickable {
|
||||
cursor: pointer;
|
||||
fill: ${options.taskTextClickableColor} !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft.clickable {
|
||||
cursor: pointer;
|
||||
fill: ${options.taskTextClickableColor} !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight.clickable {
|
||||
cursor: pointer;
|
||||
fill: ${options.taskTextClickableColor} !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific task settings for the sections*/
|
||||
|
||||
.taskText0,
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: ${options.taskTextColor};
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: ${options.taskBkgColor};
|
||||
stroke: ${options.taskBorderColor};
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2
|
||||
{
|
||||
fill: ${options.taskTextOutsideColor};
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: ${options.taskTextOutsideColor};
|
||||
}
|
||||
|
||||
|
||||
/* Active task */
|
||||
|
||||
.active0,
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: ${options.activeTaskBkgColor};
|
||||
stroke: ${options.activeTaskBorderColor};
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: ${options.taskTextDarkColor} !important;
|
||||
}
|
||||
|
||||
|
||||
/* Completed task */
|
||||
|
||||
.done0,
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: ${options.doneTaskBorderColor};
|
||||
fill: ${options.doneTaskBkgColor};
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: ${options.taskTextDarkColor} !important;
|
||||
}
|
||||
|
||||
|
||||
/* Tasks on the critical line */
|
||||
|
||||
.crit0,
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: ${options.critBorderColor};
|
||||
fill: ${options.critBkgColor};
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.activeCrit0,
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: ${options.critBorderColor};
|
||||
fill: ${options.activeTaskBkgColor};
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.doneCrit0,
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: ${options.critBorderColor};
|
||||
fill: ${options.doneTaskBkgColor};
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
font-style: italic;
|
||||
}
|
||||
.doneCritText0,
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: ${options.taskTextDarkColor} !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: ${options.taskTextDarkColor} !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: ${options.taskTextDarkColor} ;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const getStyles = () =>
|
||||
`
|
||||
.commit-id,
|
||||
.commit-msg,
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
const getStyles = () => ``;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
const getStyles = options =>
|
||||
`.pieTitleText {
|
||||
text-anchor: middle;
|
||||
font-size: 25px;
|
||||
fill: ${options.taskTextDarkColor};
|
||||
font-family: ${options.fontFamily};
|
||||
}
|
||||
.slice {
|
||||
font-family: ${options.fontFamily};
|
||||
}
|
||||
.legend text {
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: 17px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
const getStyles = options =>
|
||||
`.actor {
|
||||
stroke: ${options.actorBorder};
|
||||
fill: ${options.actorBkg};
|
||||
}
|
||||
|
||||
text.actor > tspan {
|
||||
fill: ${options.actorTextColor};
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: ${options.actorLineColor};
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: none;
|
||||
stroke: ${options.signalColor};
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: ${options.signalColor};
|
||||
}
|
||||
|
||||
#arrowhead path {
|
||||
fill: ${options.signalColor};
|
||||
stroke: ${options.signalColor};
|
||||
}
|
||||
|
||||
.sequenceNumber {
|
||||
fill: ${options.sequenceNumberColor};
|
||||
}
|
||||
|
||||
#sequencenumber {
|
||||
fill: ${options.signalColor};
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: ${options.signalColor};
|
||||
stroke: ${options.signalColor};
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: ${options.signalTextColor};
|
||||
stroke: ${options.signalTextColor};
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: ${options.labelBoxBorderColor};
|
||||
fill: ${options.labelBoxBkgColor};
|
||||
}
|
||||
|
||||
.labelText, .labelText > tspan {
|
||||
fill: ${options.labelTextColor};
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText, .loopText > tspan {
|
||||
fill: ${options.loopTextColor};
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopLine {
|
||||
stroke-width: 2px;
|
||||
stroke-dasharray: 2, 2;
|
||||
stroke: ${options.labelBoxBorderColor};
|
||||
fill: ${options.labelBoxBorderColor};
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: ${options.noteBorderColor};
|
||||
fill: ${options.noteBkgColor};
|
||||
}
|
||||
|
||||
.noteText, .noteText > tspan {
|
||||
fill: ${options.noteTextColor};
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
fill: ${options.activationBkgColor};
|
||||
stroke: ${options.activationBorderColor};
|
||||
}
|
||||
|
||||
.activation1 {
|
||||
fill: ${options.activationBkgColor};
|
||||
stroke: ${options.activationBorderColor};
|
||||
}
|
||||
|
||||
.activation2 {
|
||||
fill: ${options.activationBkgColor};
|
||||
stroke: ${options.activationBorderColor};
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
const getStyles = options =>
|
||||
`g.stateGroup text {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
g.stateGroup .state-title {
|
||||
font-weight: bolder;
|
||||
fill: ${options.labelColor};
|
||||
}
|
||||
|
||||
g.stateGroup rect {
|
||||
fill: ${options.nodeBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
g.stateGroup line {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.transition {
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.stateGroup .alt-composit {
|
||||
fill: #e0e0e0;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.state-note {
|
||||
stroke: ${options.noteBorderColor};
|
||||
fill: ${options.noteBkgColor};
|
||||
|
||||
text {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.stateLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: ${options.nodeBkg};
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stateLabel text {
|
||||
fill: ${options.labelColor};
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
.node circle.state-start {
|
||||
fill: black;
|
||||
stroke: black;
|
||||
}
|
||||
.node circle.state-end {
|
||||
fill: black;
|
||||
stroke: white;
|
||||
stroke-width: 1.5
|
||||
}
|
||||
|
||||
.node rect {
|
||||
fill: ${options.mainBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
#statediagram-barbEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.statediagram-cluster rect {
|
||||
fill: ${options.nodeBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.statediagram-cluster rect.outer {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state .divider {
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.statediagram-state .title-state {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster .inner {
|
||||
fill: white;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster-alt .inner {
|
||||
fill: #e0e0e0;
|
||||
}
|
||||
|
||||
.statediagram-cluster .inner {
|
||||
rx:0;
|
||||
ry:0;
|
||||
}
|
||||
|
||||
.statediagram-state rect.basic {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
}
|
||||
.statediagram-state rect.divider {
|
||||
stroke-dasharray: 10,10;
|
||||
fill: #efefef;
|
||||
}
|
||||
|
||||
.note-edge {
|
||||
stroke-dasharray: 5;
|
||||
}
|
||||
|
||||
.statediagram-note rect {
|
||||
fill: ${options.noteBkgColor};
|
||||
stroke: ${options.noteBorderColor};
|
||||
stroke-width: 1px;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
|
||||
#dependencyStart, #dependencyEnd {
|
||||
fill: ${options.nodeBorder};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
const getStyles = options =>
|
||||
`.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon,
|
||||
.node path {
|
||||
fill: ${options.mainBkg};
|
||||
stroke: ${options.nodeBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.node .label {
|
||||
text-align: center;
|
||||
}
|
||||
.node.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: ${options.arrowheadColor};
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: ${options.lineColor};
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.flowchart-link {
|
||||
stroke: ${options.lineColor};
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: ${options.edgeLabelBackground};
|
||||
rect {
|
||||
opacity: 0.5;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: ${options.secondBkg};
|
||||
stroke: ${options.clusterBorder};
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: ${options.titleColor};
|
||||
}
|
||||
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 12px;
|
||||
background: ${options.secondBkg};
|
||||
border: 1px solid ${options.border2};
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -139,6 +139,7 @@ const initialize = function(config) {
|
|||
}
|
||||
}
|
||||
mermaidAPI.initialize(config);
|
||||
// mermaidAPI.reset();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
*
|
||||
* @name mermaidAPI
|
||||
*/
|
||||
import Stylis from 'stylis';
|
||||
import { select } from 'd3';
|
||||
import scope from 'scope-css';
|
||||
import pkg from '../package.json';
|
||||
import { setConfig, getConfig, setSiteConfig, getSiteConfig } from './config';
|
||||
import { logger, setLogLevel } from './logger';
|
||||
|
|
@ -50,11 +50,11 @@ import journeyParser from './diagrams/user-journey/parser/journey';
|
|||
import journeyDb from './diagrams/user-journey/journeyDb';
|
||||
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
|
||||
import configApi from './config';
|
||||
|
||||
import getStyles from './styles';
|
||||
const themes = {};
|
||||
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
|
||||
themes[themeName] = require(`./themes/${themeName}/index.scss`);
|
||||
themes[themeName] = require(`./theme-${themeName}.js`);
|
||||
}
|
||||
|
||||
function parse(text) {
|
||||
|
|
@ -251,42 +251,39 @@ const render = function(id, _txt, cb, container) {
|
|||
const svg = element.firstChild;
|
||||
const firstChild = svg.firstChild;
|
||||
|
||||
// pre-defined theme
|
||||
let style = themes[cnf.theme];
|
||||
if (style === undefined) {
|
||||
style = '';
|
||||
}
|
||||
|
||||
let userStyles = '';
|
||||
// user provided theme CSS
|
||||
if (cnf.themeCSS !== undefined) {
|
||||
style += `\n${cnf.themeCSS}`;
|
||||
userStyles += `\n${cnf.themeCSS}`;
|
||||
}
|
||||
// user provided theme CSS
|
||||
if (cnf.fontFamily !== undefined) {
|
||||
style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
|
||||
userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
|
||||
}
|
||||
// user provided theme CSS
|
||||
if (cnf.altFontFamily !== undefined) {
|
||||
style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
|
||||
userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
|
||||
}
|
||||
|
||||
// classDef
|
||||
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
|
||||
const classes = flowRenderer.getClasses(txt);
|
||||
for (const className in classes) {
|
||||
style += `\n.${className} > * { ${classes[className].styles.join(
|
||||
userStyles += `\n.${className} > * { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
if (classes[className].textStyles) {
|
||||
style += `\n.${className} tspan { ${classes[className].textStyles.join(
|
||||
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
}
|
||||
}
|
||||
}
|
||||
const stylis = new Stylis();
|
||||
const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
|
||||
|
||||
const style1 = document.createElement('style');
|
||||
style1.innerHTML = scope(style, `#${id}`);
|
||||
style1.innerHTML = rules;
|
||||
svg.insertBefore(style1, firstChild);
|
||||
|
||||
// Verify that the generated svgs are ok before removing this
|
||||
|
|
@ -522,7 +519,12 @@ function updateRendererConfigs(conf) {
|
|||
}
|
||||
|
||||
function reinitialize(options) {
|
||||
console.log(`mermaidAPI.reinitialize: v${pkg.version}`, options);
|
||||
console.warn(`mermaidAPI.reinitialize: v${pkg.version}`, options);
|
||||
if (options.theme && themes[options.theme]) {
|
||||
// Todo merge with user options
|
||||
options.themeVariables = themes[options.theme];
|
||||
}
|
||||
|
||||
// Set default options
|
||||
const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
|
||||
updateRendererConfigs(config);
|
||||
|
|
@ -531,9 +533,18 @@ function reinitialize(options) {
|
|||
}
|
||||
|
||||
function initialize(options) {
|
||||
// console.log(`mermaidAPI.initialize: v${pkg.version}`);
|
||||
console.log(`mermaidAPI.initialize: v${pkg.version} ${options}`);
|
||||
// Set default options
|
||||
|
||||
if (options && options.theme && themes[options.theme]) {
|
||||
// Todo merge with user options
|
||||
options.themeVariables = themes[options.theme];
|
||||
} else {
|
||||
if (options) options.themeVariables = themes.default;
|
||||
}
|
||||
|
||||
const config = typeof options === 'object' ? setSiteConfig(options) : getSiteConfig();
|
||||
|
||||
updateRendererConfigs(config);
|
||||
setLogLevel(config.logLevel);
|
||||
logger.debug('mermaidAPI.initialize: ', config);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
import classDiagram from './diagrams/class/styles';
|
||||
import er from './diagrams/flowchart/styles';
|
||||
import flowchart from './diagrams/flowchart/styles';
|
||||
import gantt from './diagrams/gantt/styles';
|
||||
import git from './diagrams/git/styles';
|
||||
import info from './diagrams/info/styles';
|
||||
import pie from './diagrams/pie/styles';
|
||||
import sequence from './diagrams/sequence/styles';
|
||||
import stateDiagram from './diagrams/state/styles';
|
||||
import journey from './diagrams/user-journey/styles';
|
||||
|
||||
const themes = {
|
||||
flowchart,
|
||||
'flowchart-v2': flowchart,
|
||||
sequence,
|
||||
gantt,
|
||||
class: classDiagram,
|
||||
stateDiagram,
|
||||
state: stateDiagram,
|
||||
git,
|
||||
info,
|
||||
pie,
|
||||
er,
|
||||
journey
|
||||
};
|
||||
|
||||
const getStyles = (type, userStyles, options) =>
|
||||
` {
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: ${options.fontSize};
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
|
||||
.error-icon {
|
||||
fill: ${options.errorBkgColor};
|
||||
}
|
||||
.error-text {
|
||||
fill: ${options.errorTextColor};
|
||||
stroke: ${options.errorTextColor};
|
||||
}
|
||||
|
||||
.edge-thickness-normal {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.edge-thickness-thick {
|
||||
stroke-width: 3.5px
|
||||
}
|
||||
.edge-pattern-solid {
|
||||
stroke-dasharray: 0;
|
||||
}
|
||||
|
||||
.edge-pattern-dashed{
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
.edge-pattern-dotted {
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
|
||||
.marker {
|
||||
fill: ${options.lineColor};
|
||||
}
|
||||
.marker.cross {
|
||||
stroke: ${options.lineColor};
|
||||
}
|
||||
|
||||
svg {
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: ${options.fontSize};
|
||||
}
|
||||
|
||||
${themes[type](options)}
|
||||
|
||||
${userStyles}
|
||||
`;
|
||||
|
||||
export default getStyles;
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import { lighten, rgba } from 'khroma';
|
||||
|
||||
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;
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
/* 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';
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
export const mainBkg = '#ECECFF';
|
||||
export const secondBkg = '#ffffde';
|
||||
export const lineColor = '#333333';
|
||||
export const border1 = '#CCCCFF';
|
||||
export const border2 = '#aaaa33';
|
||||
export const arrowheadColor = '#333333';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* 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';
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
export const mainBkg = '#cde498';
|
||||
export const secondBkg = '#cdffb2';
|
||||
export const lineColor = 'green';
|
||||
export const border1 = '#13540c';
|
||||
export const border2 = '#6eaa49';
|
||||
export const arrowheadColor = 'green';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* 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';
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { darken, lighten } from 'khroma';
|
||||
|
||||
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';
|
||||
export const fontFamily = '"trebuchet ms", verdana, arial';
|
||||
export const fontSize = '16px';
|
||||
|
||||
/* 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';
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'flowchart';
|
||||
// @import 'flowchart';
|
||||
@import 'sequence';
|
||||
@import 'gantt';
|
||||
@import 'class';
|
||||
|
|
|
|||
48
yarn.lock
48
yarn.lock
|
|
@ -3188,13 +3188,6 @@ crypto-browserify@^3.11.0:
|
|||
randombytes "^2.0.0"
|
||||
randomfill "^1.0.3"
|
||||
|
||||
crypto-random-string@^3.0.1:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-3.1.0.tgz#0368382de82e914179ad2ca9c7a788e260184bae"
|
||||
integrity sha512-Tip3yGB+bA7B0W8E4K4mNf2rZhu5r2G5Tb89/utEl5tP1QuLjTF/S9a1b8ifDrR4ORc9Utf6tscpSEtBY3YcPQ==
|
||||
dependencies:
|
||||
type-fest "^0.8.1"
|
||||
|
||||
css-b64-images@~0.2.5:
|
||||
version "0.2.5"
|
||||
resolved "https://registry.yarnpkg.com/css-b64-images/-/css-b64-images-0.2.5.tgz#42005d83204b2b4a5d93b6b1a5644133b5927a02"
|
||||
|
|
@ -4125,11 +4118,6 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
|
|||
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
|
||||
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
|
||||
|
||||
escaper@^2.5.3:
|
||||
version "2.5.3"
|
||||
resolved "https://registry.yarnpkg.com/escaper/-/escaper-2.5.3.tgz#8b8fe90ba364054151ab7eff18b4ce43b1e13ab5"
|
||||
integrity sha512-QGb9sFxBVpbzMggrKTX0ry1oiI4CSDAl9vIL702hzl1jGW8VZs7qfqTRX7WDOjoNDoEVGcEtu1ZOQgReSfT2kQ==
|
||||
|
||||
escodegen@1.3.x:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.3.3.tgz#f024016f5a88e046fd12005055e939802e6c5f23"
|
||||
|
|
@ -6039,11 +6027,6 @@ is-regex@^1.0.4, is-regex@^1.0.5:
|
|||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-regexp@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
|
||||
integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
|
||||
|
||||
is-relative@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
|
||||
|
|
@ -6722,6 +6705,11 @@ jssha@^2.1.0:
|
|||
resolved "https://registry.yarnpkg.com/jssha/-/jssha-2.3.1.tgz#147b2125369035ca4b2f7d210dc539f009b3de9a"
|
||||
integrity sha1-FHshJTaQNcpLL30hDcU58Amz3po=
|
||||
|
||||
khroma@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.1.0.tgz#cc17723eb719c5245ea66d23dd577d5695452db5"
|
||||
integrity sha512-aTO+YX22tYOLEQJYFiatAj1lc5QZ+H5sHWFRBWNCiKwc5NWNUJZyeSeiHEPeURJ2a1GEVYcmyMUwGjjLe5ec5A==
|
||||
|
||||
killable@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
|
||||
|
|
@ -9347,15 +9335,6 @@ schema-utils@^2.6.4:
|
|||
ajv "^6.10.2"
|
||||
ajv-keywords "^3.4.1"
|
||||
|
||||
scope-css@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/scope-css/-/scope-css-1.2.1.tgz#c35768bc900cad030a3e0d663a818c0f6a57f40e"
|
||||
integrity sha512-UjLRmyEYaDNiOS673xlVkZFlVCtckJR/dKgr434VMm7Lb+AOOqXKdAcY7PpGlJYErjXXJzKN7HWo4uRPiZZG0Q==
|
||||
dependencies:
|
||||
escaper "^2.5.3"
|
||||
slugify "^1.3.1"
|
||||
strip-css-comments "^3.0.0"
|
||||
|
||||
scss-tokenizer@^0.2.3:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
|
||||
|
|
@ -9563,11 +9542,6 @@ slice-ansi@^2.1.0:
|
|||
astral-regex "^1.0.0"
|
||||
is-fullwidth-code-point "^2.0.0"
|
||||
|
||||
slugify@^1.3.1:
|
||||
version "1.3.6"
|
||||
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.6.tgz#ba5fd6159b570fe4811d02ea9b1f4906677638c3"
|
||||
integrity sha512-wA9XS475ZmGNlEnYYLPReSfuz/c3VQsEMoU43mi6OnKMCdbnFXd4/Yg7J0lBv8jkPolacMpOrWEaoYxuE1+hoQ==
|
||||
|
||||
snapdragon-node@^2.0.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
|
||||
|
|
@ -10019,13 +9993,6 @@ strip-bom@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
|
||||
integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
|
||||
|
||||
strip-css-comments@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/strip-css-comments/-/strip-css-comments-3.0.0.tgz#7a5625eff8a2b226cf8947a11254da96e13dae89"
|
||||
integrity sha1-elYl7/iisibPiUehElTaluE9rok=
|
||||
dependencies:
|
||||
is-regexp "^1.0.0"
|
||||
|
||||
strip-eof@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
|
||||
|
|
@ -10053,6 +10020,11 @@ strip-json-comments@^3.0.1:
|
|||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
|
||||
integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
|
||||
|
||||
stylis@^3.5.2:
|
||||
version "3.5.4"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
|
||||
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
|
||||
|
||||
subarg@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
|
||||
|
|
|
|||
Loading…
Reference in New Issue