|
| 1 | +/** |
| 2 | + * SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. |
| 3 | + * SPDX-License-Identifier: Apache-2.0 |
| 4 | + */ |
| 5 | + |
| 6 | +const mermaidCss = ` |
| 7 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) { |
| 8 | + --surface: #ffffff; |
| 9 | + --border: #e0e0e0; |
| 10 | + --line: #757575; |
| 11 | + --text: #000000; |
| 12 | + --edge-label-background: #ffffff; |
| 13 | + background-color: var(--surface); |
| 14 | + border: 1px solid var(--border); |
| 15 | + border-radius: 8px; |
| 16 | + margin: 1.25rem 0; |
| 17 | + overflow: auto; |
| 18 | + padding: 1rem; |
| 19 | +} |
| 20 | +
|
| 21 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg { |
| 22 | + background-color: var(--surface) !important; |
| 23 | + color: var(--text); |
| 24 | + display: block; |
| 25 | + height: auto; |
| 26 | + margin: 0 auto; |
| 27 | + max-width: 100%; |
| 28 | +} |
| 29 | +
|
| 30 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .node :is(rect, polygon, circle, ellipse, path), |
| 31 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .cluster rect { |
| 32 | + stroke-width: 2px !important; |
| 33 | +} |
| 34 | +
|
| 35 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgePath .path, |
| 36 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .flowchart-link { |
| 37 | + stroke: var(--line) !important; |
| 38 | +} |
| 39 | +
|
| 40 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .marker, |
| 41 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .marker.cross, |
| 42 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .arrowheadPath { |
| 43 | + fill: var(--line) !important; |
| 44 | + stroke: var(--line) !important; |
| 45 | +} |
| 46 | +
|
| 47 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel rect, |
| 48 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .labelBkg { |
| 49 | + background-color: var(--edge-label-background) !important; |
| 50 | + fill: var(--edge-label-background) !important; |
| 51 | +} |
| 52 | +
|
| 53 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel p { |
| 54 | + background-color: var(--edge-label-background) !important; |
| 55 | + color: var(--text) !important; |
| 56 | +} |
| 57 | +
|
| 58 | +.mermaid-container svg .edgeLabel p, |
| 59 | +.mermaid-container svg .edgeLabel span.edgeLabel, |
| 60 | +.mermaid-container svg .edgeLabel .labelBkg, |
| 61 | +.mermaid-container-expanded svg .edgeLabel p, |
| 62 | +.mermaid-container-expanded svg .edgeLabel span.edgeLabel, |
| 63 | +.mermaid-container-expanded svg .edgeLabel .labelBkg, |
| 64 | +.mermaid svg .edgeLabel p { |
| 65 | + background-color: var(--edge-label-background) !important; |
| 66 | + color: var(--text) !important; |
| 67 | +} |
| 68 | +
|
| 69 | +.mermaid svg .edgeLabel span.edgeLabel, |
| 70 | +.mermaid svg .edgeLabel .labelBkg { |
| 71 | + background-color: var(--edge-label-background) !important; |
| 72 | + color: var(--text) !important; |
| 73 | +} |
| 74 | +
|
| 75 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .label text, |
| 76 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .label span, |
| 77 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .label tspan, |
| 78 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .nodeLabel, |
| 79 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .nodeLabel p, |
| 80 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .cluster-label text, |
| 81 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .cluster-label span, |
| 82 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .cluster-label tspan, |
| 83 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel text, |
| 84 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel span, |
| 85 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel tspan, |
| 86 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .edgeLabel p { |
| 87 | + color: var(--text) !important; |
| 88 | + fill: var(--text) !important; |
| 89 | +} |
| 90 | +
|
| 91 | +.mermaid-container svg .edgeLabel :is(text, span, tspan, p), |
| 92 | +.mermaid-container-expanded svg .edgeLabel :is(text, span, tspan, p), |
| 93 | +.mermaid svg .edgeLabel :is(text, span, tspan, p) { |
| 94 | + color: var(--text) !important; |
| 95 | + fill: var(--text) !important; |
| 96 | +} |
| 97 | +
|
| 98 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .grey-lightest, |
| 99 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .grey-hint { |
| 100 | + --mermaid-fill: #e0e0e0; |
| 101 | + --mermaid-stroke: #a7a7a7; |
| 102 | + --mermaid-text: #000000; |
| 103 | +} |
| 104 | +
|
| 105 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .green-lightest { |
| 106 | + --mermaid-fill: #cfff40; |
| 107 | + --mermaid-stroke: #76b900; |
| 108 | + --mermaid-text: #000000; |
| 109 | +} |
| 110 | +
|
| 111 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .yellow-lightest { |
| 112 | + --mermaid-fill: #feeeb2; |
| 113 | + --mermaid-stroke: #fcde7b; |
| 114 | + --mermaid-text: #000000; |
| 115 | +} |
| 116 | +
|
| 117 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .red-lightest { |
| 118 | + --mermaid-fill: #ffd7d7; |
| 119 | + --mermaid-stroke: #ff8181; |
| 120 | + --mermaid-text: #000000; |
| 121 | +} |
| 122 | +
|
| 123 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .magenta-lightest { |
| 124 | + --mermaid-fill: #ffd3f2; |
| 125 | + --mermaid-stroke: #fc79ca; |
| 126 | + --mermaid-text: #000000; |
| 127 | +} |
| 128 | +
|
| 129 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .teal-lightest { |
| 130 | + --mermaid-fill: #adfcf8; |
| 131 | + --mermaid-stroke: #9aefe5; |
| 132 | + --mermaid-text: #000000; |
| 133 | +} |
| 134 | +
|
| 135 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg :is( |
| 136 | + .grey-lightest, .grey-hint, .green-lightest, .yellow-lightest, |
| 137 | + .red-lightest, .magenta-lightest, .teal-lightest |
| 138 | +) > * { |
| 139 | + color: var(--mermaid-text) !important; |
| 140 | + fill: var(--mermaid-fill) !important; |
| 141 | + stroke: var(--mermaid-stroke) !important; |
| 142 | +} |
| 143 | +
|
| 144 | +:where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg :is( |
| 145 | + .grey-lightest, .grey-hint, .green-lightest, .yellow-lightest, |
| 146 | + .red-lightest, .magenta-lightest, .teal-lightest |
| 147 | +) :is(text, tspan, span, p, div, foreignObject) { |
| 148 | + color: var(--mermaid-text) !important; |
| 149 | + fill: var(--mermaid-text) !important; |
| 150 | +} |
| 151 | +
|
| 152 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) { |
| 153 | + --surface: #000000; |
| 154 | + --border: #5f5f5f; |
| 155 | + --line: #a7a7a7; |
| 156 | + --text: #f7f7f7; |
| 157 | + --edge-label-background: #000000; |
| 158 | + background-color: var(--surface) !important; |
| 159 | +} |
| 160 | +
|
| 161 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .grey-lightest, |
| 162 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .grey-hint { |
| 163 | + --mermaid-fill: #1f1f1f; |
| 164 | + --mermaid-stroke: #5f5f5f; |
| 165 | + --mermaid-text: #f7f7f7; |
| 166 | +} |
| 167 | +
|
| 168 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .green-lightest { |
| 169 | + --mermaid-fill: #265600; |
| 170 | + --mermaid-stroke: #76b900; |
| 171 | + --mermaid-text: #ffffff; |
| 172 | +} |
| 173 | +
|
| 174 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .yellow-lightest { |
| 175 | + --mermaid-fill: #4b2d00; |
| 176 | + --mermaid-stroke: #ef9100; |
| 177 | + --mermaid-text: #ffffff; |
| 178 | +} |
| 179 | +
|
| 180 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .red-lightest { |
| 181 | + --mermaid-fill: #650b0b; |
| 182 | + --mermaid-stroke: #ff8181; |
| 183 | + --mermaid-text: #ffffff; |
| 184 | +} |
| 185 | +
|
| 186 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .magenta-lightest { |
| 187 | + --mermaid-fill: #5d1337; |
| 188 | + --mermaid-stroke: #fc79ca; |
| 189 | + --mermaid-text: #ffffff; |
| 190 | +} |
| 191 | +
|
| 192 | +:where(.dark, html[data-theme="dark"], html[data-mode="dark"]) :where(.mermaid-container, .mermaid-container-expanded, .mermaid) svg .teal-lightest { |
| 193 | + --mermaid-fill: #04554b; |
| 194 | + --mermaid-stroke: #1dbba4; |
| 195 | + --mermaid-text: #ffffff; |
| 196 | +} |
| 197 | +`; |
| 198 | + |
| 199 | +export function MermaidStyles() { |
| 200 | + return <style dangerouslySetInnerHTML={{ __html: mermaidCss }} />; |
| 201 | +} |
0 commit comments