From b3a2794f1f9fe936549b88976504eeb69e7be4cf Mon Sep 17 00:00:00 2001 From: omkarht Date: Tue, 28 Jan 2025 17:17:27 +0530 Subject: [PATCH] updated redux-dark theme --- packages/mermaid/src/rendering-util/render.ts | 7 ++++--- .../rendering-elements/shapes/filledCircle.ts | 2 +- .../rendering-elements/shapes/stateEnd.ts | 2 +- .../rendering-elements/shapes/stateStart.ts | 2 +- .../mermaid/src/themes/theme-redux-dark.js | 20 +++++++++---------- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index bdcdcd0ff..374efbb95 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -57,7 +57,8 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any) const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm]; const layoutRenderer = await layoutDefinition.loader(); - const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables; + const { theme, themeVariables } = data4Layout.config; + const { useGradient, gradientStart, gradientStop } = themeVariables; svg .append('defs') @@ -70,7 +71,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any) .attr('dy', '4') .attr('stdDeviation', 0) .attr('flood-opacity', '0.06') - .attr('flood-color', '#000000'); + .attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`); svg .append('defs') @@ -83,7 +84,7 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any) .attr('dy', '2') .attr('stdDeviation', 0) .attr('flood-opacity', '0.06') - .attr('flood-color', '#000000'); + .attr('flood-color', `${theme === 'redux' ? '#000000' : '#FFFFFF'}`); if (useGradient) { const gradient = svg diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts index 7aa331cf9..8a4c946e7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts @@ -61,7 +61,7 @@ export function filledCircle( filledCircle.attr('class', 'outer-path'); } - if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { + if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') { filledCircle.attr('style', 'filter:url(#drop-shadow-small)'); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index a64d47367..8f2b01b6c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -80,7 +80,7 @@ export function stateEnd( circle.selectAll('path').attr('style', nodeStyles); } - if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { + if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') { circle.attr('style', 'filter:url(#drop-shadow-small)'); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index cdc7c7f24..bcffe1d4b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -62,7 +62,7 @@ export function stateStart( .attr('height', node.height ?? 14); } - if (node.width < 25 && theme === 'redux' && node.look !== 'handDrawn') { + if (node.width < 25 && theme?.includes('redux') && node.look !== 'handDrawn') { circle.attr('style', 'filter:url(#drop-shadow-small)'); } diff --git a/packages/mermaid/src/themes/theme-redux-dark.js b/packages/mermaid/src/themes/theme-redux-dark.js index 94a4c2fb0..e3f0010df 100644 --- a/packages/mermaid/src/themes/theme-redux-dark.js +++ b/packages/mermaid/src/themes/theme-redux-dark.js @@ -23,7 +23,7 @@ class Theme { this.secondaryTextColor = invert(this.secondaryColor); this.tertiaryTextColor = invert(this.tertiaryColor); - this.mainBkg = '#2a2020'; + this.mainBkg = '#111113'; this.secondBkg = 'calculated'; this.mainContrastColor = 'lightgrey'; this.darkTextColor = lighten(invert('#323D47'), 10); @@ -32,14 +32,14 @@ class Theme { this.arrowheadColor = invert(this.background); this.fontFamily = '"Recursive Variable", arial, sans-serif'; this.fontSize = '14px'; - this.labelBackground = '#181818'; + this.labelBackground = '#111113'; this.textColor = '#ccc'; this.THEME_COLOR_LIMIT = 12; - this.radius = 3; + this.radius = 12; this.strokeWidth = 2; this.noteBkgColor = '#fff5ad'; - this.noteTextColor = '#333'; + this.noteTextColor = '#FFFFFF'; this.THEME_COLOR_LIMIT = 12; // dark @@ -47,13 +47,13 @@ class Theme { this.fontSize = '14px'; // Neo-specific - // this.nodeBorder = 'none'; - // this.stateBorder = 'none'; + this.nodeBorder = '#FFFFFF'; + this.stateBorder = '#FFFFFF'; - this.useGradient = true; + this.useGradient = false; this.gradientStart = '#0042eb'; this.gradientStop = '#eb0042'; - this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.2))'; + this.dropShadow = 'url(#drop-shadow)'; /* Architecture Diagram variables */ this.archEdgeColor = 'calculated'; @@ -66,7 +66,7 @@ class Theme { // 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.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#FFFFFF'); // invert(this.primaryColor); this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 }); this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 }); @@ -77,7 +77,7 @@ class Theme { 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.noteTextColor = this.noteTextColor || '#FFFFFF'; this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor); this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);