@metropolle/design-system/dist/css/mermaid.css

Sistema de design unificado para a plataforma Metropolle

/* Metropolle Design System – Mermaid Diagram Styling */

/*
   Provides palette-aware theming for Mermaid diagrams that matches the
   architecture documentation reference. Consumers should pair these styles
   with the class definitions exported in documentation snippets (ex: pastelBlue,
   accentOrange) to ensure consistent fill and typography across projects.
*/

:root {
  --mds-mermaid-label-dark: var(--mds-color-neutral-900, #0f172a);
  --mds-mermaid-label-light: var(--mds-color-neutral-50, #f8fafc);
  --mds-mermaid-node-font-weight: 600;
  --mds-mermaid-edge-font-weight: 500;
}

/* Base container styling – glass morphism aligned with platform visuals */
html[data-theme='dark'] .mermaid {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--mds-border-radius-lg, 12px);
  padding: var(--mds-space-4, 1rem);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: var(--mds-space-4, 1rem) 0;
}

html[data-theme='light'] .mermaid {
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--mds-border-radius-lg, 12px);
  padding: var(--mds-space-4, 1rem);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: var(--mds-space-4, 1rem) 0;
  box-shadow: var(--mds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Default typography settings for nodes and clusters */
html[data-theme='dark'] .mermaid :is(g.node, g.cluster) {
  --mds-mermaid-node-color: var(--mds-mermaid-label-dark);
  --mds-mermaid-node-weight-current: var(--mds-mermaid-node-font-weight);
}

/* Switch to light foreground when nodes use strong accent fills */
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#00bcd4" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1565c0" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1976d2" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#2196f3" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#34a853" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#388e3c" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3b82f6" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3f48cc" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4285f4" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#45b7d1" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4b612c" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4caf50" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4ecdc4" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#607d8b" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#627eea" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#673ab7" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#689f38" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#759c3e" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#795548" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#7b1fa2" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#96ceb4" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#9c27b0" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#c2185b" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#dd344c" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#e91e63" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f44336" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f57c00" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f7931a" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff5722" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff6b6b" i]),
html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff9800" i]) {
  --mds-mermaid-node-color: var(--mds-mermaid-label-light);
}

/* Apply the computed foreground colour to all supported Mermaid label types */
html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label text,
html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label tspan {
  fill: var(--mds-mermaid-node-color) !important;
  font-weight: var(--mds-mermaid-node-weight-current);
}

html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
  color: var(--mds-mermaid-node-color) !important;
  font-weight: var(--mds-mermaid-node-weight-current);
}

/* Preserve lighter typography for edge labels so they remain legible */
html[data-theme='dark'] .mermaid .edgeLabel text,
html[data-theme='dark'] .mermaid .edgeLabel tspan {
  fill: var(--ifm-font-color-base, #e5e7eb) !important;
  font-weight: var(--mds-mermaid-edge-font-weight);
}

/* Light theme keeps default dark text but enforces consistent weight */
html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label text,
html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label tspan,
html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
  font-weight: var(--mds-mermaid-node-font-weight, 600);
}

/*
 * Metropolle Official Mermaid Diagram Classes
 * Based on Arquitetura.md color standards - compatible with light/dark themes
 */

/* Frontend/UI Components */
.mds-frontend {
  fill: #e3f2fd;
  stroke: #1976d2;
  stroke-width: 2px;
  color: #000;
}

/* AWS/Infrastructure Components */
.mds-aws {
  fill: #fff3e0;
  stroke: #f57c00;
  stroke-width: 2px;
  color: #000;
}

/* Runtime/Process Components */
.mds-runtime {
  fill: #f3e5f5;
  stroke: #8e24aa;
  stroke-width: 2px;
  color: #000;
}

/* Storage/Data Components */
.mds-storage {
  fill: #e8f5e8;
  stroke: #388e3c;
  stroke-width: 2px;
  color: #000;
}

/* Security/Authentication Components */
.mds-security {
  fill: #ffebee;
  stroke: #d32f2f;
  stroke-width: 2px;
  color: #000;
}

/* Results/Output Components */
.mds-result {
  fill: #fce4ec;
  stroke: #c2185b;
  stroke-width: 2px;
  color: #000;
}

/* Legacy compatibility aliases */
.pastelBlue { fill: #e3f2fd; stroke: #1976d2; stroke-width: 2px; color: #000; }
.accentOrange { fill: #fff3e0; stroke: #f57c00; stroke-width: 2px; color: #000; }
.pastelPurple { fill: #f3e5f5; stroke: #8e24aa; stroke-width: 2px; color: #000; }
.pastelGreen { fill: #e8f5e8; stroke: #388e3c; stroke-width: 2px; color: #000; }
.accentRed { fill: #ffebee; stroke: #d32f2f; stroke-width: 2px; color: #000; }
.pastelPink { fill: #fce4ec; stroke: #c2185b; stroke-width: 2px; color: #000; }