From caf84c6d843f8d9be53102c80474a7f4d2b89c42 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 13 Jul 2025 01:04:28 +0000 Subject: [PATCH 1/3] Initial plan From b41e5024e0c0b6778560e971bf230f8f0cf2f24f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 13 Jul 2025 01:16:07 +0000 Subject: [PATCH 2/3] Fix Mermaid diagrams dark mode visibility issue Co-authored-by: eecavanna <134325062+eecavanna@users.noreply.github.com> --- docs/content/explanation/journeys.md | 3 + docs/content/stylesheets/extra.css | 86 ++++++++++++++++++++++++++++ docs/mkdocs.yml | 1 + 3 files changed, 90 insertions(+) diff --git a/docs/content/explanation/journeys.md b/docs/content/explanation/journeys.md index 98f78c484..ff920f3a7 100644 --- a/docs/content/explanation/journeys.md +++ b/docs/content/explanation/journeys.md @@ -3,6 +3,9 @@ Re: "do workflows need to know NMDC specifics", I've drafted a set of user journey diagrams with "Workflow" and "NMDC" as actors. +!!! tip "Viewing diagrams in dark mode" + If you're having trouble viewing the diagrams below in dark mode, you can switch to light mode using the theme toggle in the top navigation bar. + The first, "Keep NMDC in the know", is the current intended Workflow executioner journey, and is implemented by the NMDC Runtime: diff --git a/docs/content/stylesheets/extra.css b/docs/content/stylesheets/extra.css index d65072466..4d5910ce8 100644 --- a/docs/content/stylesheets/extra.css +++ b/docs/content/stylesheets/extra.css @@ -54,4 +54,90 @@ from the words surrounding them. */ span.term { font-variant: small-caps ; +} + +/* Fix Mermaid diagrams in dark mode */ +[data-md-color-scheme="slate"] .mermaid { + background-color: var(--md-default-bg-color); + border-radius: 0.1rem; + padding: 1rem; +} + +[data-md-color-scheme="slate"] .mermaid svg { + background-color: var(--md-default-bg-color); +} + +/* Ensure Mermaid text is visible in dark mode */ +[data-md-color-scheme="slate"] .mermaid .actor { + fill: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .actor-line { + stroke: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .messageLine0, +[data-md-color-scheme="slate"] .mermaid .messageLine1 { + stroke: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .messageText { + fill: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .labelText { + fill: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .section0, +[data-md-color-scheme="slate"] .mermaid .section1, +[data-md-color-scheme="slate"] .mermaid .section2, +[data-md-color-scheme="slate"] .mermaid .section3 { + fill: var(--md-default-bg-color); + opacity: 0.8; +} + +[data-md-color-scheme="slate"] .mermaid .task0, +[data-md-color-scheme="slate"] .mermaid .task1, +[data-md-color-scheme="slate"] .mermaid .task2, +[data-md-color-scheme="slate"] .mermaid .task3 { + fill: var(--md-accent-fg-color); + opacity: 0.8; +} + +[data-md-color-scheme="slate"] .mermaid .taskText0, +[data-md-color-scheme="slate"] .mermaid .taskText1, +[data-md-color-scheme="slate"] .mermaid .taskText2, +[data-md-color-scheme="slate"] .mermaid .taskText3 { + fill: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .active0, +[data-md-color-scheme="slate"] .mermaid .active1, +[data-md-color-scheme="slate"] .mermaid .active2, +[data-md-color-scheme="slate"] .mermaid .active3 { + fill: var(--md-primary-fg-color); + opacity: 0.8; +} + +[data-md-color-scheme="slate"] .mermaid .activeText0, +[data-md-color-scheme="slate"] .mermaid .activeText1, +[data-md-color-scheme="slate"] .mermaid .activeText2, +[data-md-color-scheme="slate"] .mermaid .activeText3 { + fill: var(--md-primary-bg-color); +} + +[data-md-color-scheme="slate"] .mermaid .done0, +[data-md-color-scheme="slate"] .mermaid .done1, +[data-md-color-scheme="slate"] .mermaid .done2, +[data-md-color-scheme="slate"] .mermaid .done3 { + fill: var(--md-default-fg-color); + opacity: 0.6; +} + +[data-md-color-scheme="slate"] .mermaid .doneText0, +[data-md-color-scheme="slate"] .mermaid .doneText1, +[data-md-color-scheme="slate"] .mermaid .doneText2, +[data-md-color-scheme="slate"] .mermaid .doneText3 { + fill: var(--md-default-bg-color); } \ No newline at end of file diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 980e33b66..536562949 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -122,4 +122,5 @@ plugins: - mermaid2: arguments: securityLevel: 'loose' + theme: neutral - mkdocs-jupyter From acf0f4484f9aac513dc82a29fbb398847a939900 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 13 Jul 2025 01:19:25 +0000 Subject: [PATCH 3/3] Refine Mermaid dark mode CSS fixes and add comprehensive text visibility rules Co-authored-by: eecavanna <134325062+eecavanna@users.noreply.github.com> --- docs/content/stylesheets/extra.css | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/content/stylesheets/extra.css b/docs/content/stylesheets/extra.css index 4d5910ce8..2b3c6ed08 100644 --- a/docs/content/stylesheets/extra.css +++ b/docs/content/stylesheets/extra.css @@ -67,7 +67,11 @@ span.term { background-color: var(--md-default-bg-color); } -/* Ensure Mermaid text is visible in dark mode */ +/* General text visibility fixes for dark mode */ +[data-md-color-scheme="slate"] .mermaid text { + fill: var(--md-default-fg-color) !important; +} + [data-md-color-scheme="slate"] .mermaid .actor { fill: var(--md-default-fg-color); } @@ -89,11 +93,14 @@ span.term { fill: var(--md-default-fg-color); } +/* Journey diagram specific fixes */ [data-md-color-scheme="slate"] .mermaid .section0, [data-md-color-scheme="slate"] .mermaid .section1, [data-md-color-scheme="slate"] .mermaid .section2, [data-md-color-scheme="slate"] .mermaid .section3 { fill: var(--md-default-bg-color); + stroke: var(--md-default-fg-color); + stroke-width: 1px; opacity: 0.8; } @@ -102,6 +109,8 @@ span.term { [data-md-color-scheme="slate"] .mermaid .task2, [data-md-color-scheme="slate"] .mermaid .task3 { fill: var(--md-accent-fg-color); + stroke: var(--md-accent-fg-color); + stroke-width: 1px; opacity: 0.8; } @@ -117,6 +126,8 @@ span.term { [data-md-color-scheme="slate"] .mermaid .active2, [data-md-color-scheme="slate"] .mermaid .active3 { fill: var(--md-primary-fg-color); + stroke: var(--md-primary-fg-color); + stroke-width: 1px; opacity: 0.8; } @@ -132,6 +143,8 @@ span.term { [data-md-color-scheme="slate"] .mermaid .done2, [data-md-color-scheme="slate"] .mermaid .done3 { fill: var(--md-default-fg-color); + stroke: var(--md-default-fg-color); + stroke-width: 1px; opacity: 0.6; } @@ -140,4 +153,13 @@ span.term { [data-md-color-scheme="slate"] .mermaid .doneText2, [data-md-color-scheme="slate"] .mermaid .doneText3 { fill: var(--md-default-bg-color); +} + +/* Additional text elements that might need fixing */ +[data-md-color-scheme="slate"] .mermaid .titleText { + fill: var(--md-default-fg-color); +} + +[data-md-color-scheme="slate"] .mermaid .sectionTitle { + fill: var(--md-default-fg-color); } \ No newline at end of file