#1542 Dark theme fixes for pie and user-journey
This commit is contained in:
parent
70cd0655ed
commit
68aa7fa3a4
|
@ -7,8 +7,11 @@ const getStyles = options =>
|
|||
}
|
||||
.slice {
|
||||
font-family: ${options.fontFamily};
|
||||
fill: ${options.textColor};
|
||||
// fill: white;
|
||||
}
|
||||
.legend text {
|
||||
fill: ${options.taskTextDarkColor};
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: 17px;
|
||||
}
|
||||
|
|
|
@ -2,13 +2,29 @@ const getStyles = options =>
|
|||
`.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
color: #333;
|
||||
color: ${options.textColor};
|
||||
}
|
||||
.mouth {
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
line {
|
||||
stroke: ${options.textColor}
|
||||
}
|
||||
|
||||
.legend {
|
||||
fill: ${options.textColor};
|
||||
}
|
||||
|
||||
.label text {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.face {
|
||||
fill: #FFF8DC;
|
||||
stroke: #999';
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
|
|
|
@ -24,8 +24,7 @@ export const drawFace = function(element, faceData) {
|
|||
.append('circle')
|
||||
.attr('cx', faceData.cx)
|
||||
.attr('cy', faceData.cy)
|
||||
.attr('fill', '#FFF8DC')
|
||||
.attr('stroke', '#999')
|
||||
.attr('class', 'face')
|
||||
.attr('r', radius)
|
||||
.attr('stroke-width', 2)
|
||||
.attr('overflow', 'visible');
|
||||
|
@ -61,6 +60,7 @@ export const drawFace = function(element, faceData) {
|
|||
//mouth
|
||||
face
|
||||
.append('path')
|
||||
.attr('class', 'mouth')
|
||||
.attr('d', arc)
|
||||
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
|
||||
}
|
||||
|
@ -74,6 +74,7 @@ export const drawFace = function(element, faceData) {
|
|||
//mouth
|
||||
face
|
||||
.append('path')
|
||||
.attr('class', 'mouth')
|
||||
.attr('d', arc)
|
||||
.attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
|
||||
}
|
||||
|
@ -81,12 +82,13 @@ export const drawFace = function(element, faceData) {
|
|||
function ambivalent(face) {
|
||||
face
|
||||
.append('line')
|
||||
.attr('class', 'mouth')
|
||||
.attr('stroke', 2)
|
||||
.attr('x1', faceData.cx - 5)
|
||||
.attr('y1', faceData.cy + 7)
|
||||
.attr('x2', faceData.cx + 5)
|
||||
.attr('y2', faceData.cy + 7)
|
||||
.attr('class', 'task-line')
|
||||
.attr('class', 'mouth')
|
||||
.attr('stroke-width', '1px')
|
||||
.attr('stroke', '#666');
|
||||
}
|
||||
|
@ -128,7 +130,8 @@ export const drawText = function(elem, textData) {
|
|||
const textElem = elem.append('text');
|
||||
textElem.attr('x', textData.x);
|
||||
textElem.attr('y', textData.y);
|
||||
textElem.attr('fill', textData.fill);
|
||||
textElem.attr('class', 'legend');
|
||||
|
||||
textElem.style('text-anchor', textData.anchor);
|
||||
|
||||
if (typeof textData.class !== 'undefined') {
|
||||
|
|
|
@ -30,6 +30,7 @@ const getStyles = (type, userStyles, options) => {
|
|||
return ` {
|
||||
font-family: ${options.fontFamily};
|
||||
font-size: ${options.fontSize};
|
||||
fill: ${options.textColor}
|
||||
}
|
||||
|
||||
/* Classes common for multiple diagrams */
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { lighten, rgba } from 'khroma';
|
||||
import { invert, lighten, rgba } from 'khroma';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
|
@ -6,7 +6,7 @@ class Theme {
|
|||
this.mainBkg = '#1f2020';
|
||||
this.secondBkg = 'calculated';
|
||||
this.mainContrastColor = 'lightgrey';
|
||||
this.darkTextColor = '#323D47';
|
||||
this.darkTextColor = lighten(invert('#323D47'), 10);
|
||||
this.lineColor = 'calculated';
|
||||
this.border1 = '#81B1DB';
|
||||
this.border2 = rgba(255, 255, 255, 0.25);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { rgba } from 'khroma';
|
||||
import { lighten, rgba } from 'khroma';
|
||||
|
||||
class Theme {
|
||||
constructor() {
|
||||
|
@ -103,7 +103,8 @@ class Theme {
|
|||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
this.actorBorder = this.border1;
|
||||
// this.actorBorder = lighten(this.border1, 0.5);
|
||||
this.actorBorder = lighten(this.border1, 23);
|
||||
this.actorBkg = this.mainBkg;
|
||||
this.labelBoxBkgColor = this.actorBkg;
|
||||
this.signalColor = this.textColor;
|
||||
|
|
Loading…
Reference in New Issue