@metropolle/design-system 1.0.0-beta.20250821024300.dfbe136 → 1.0.0-beta.2026.1.1.1723.0f6bc6d

package/dist/css/liquid-glass.css

@@ -0,0 +1,468 @@
+/* ============================================
+   Metropolle Design System - Liquid Glass CSS
+   Apple iOS 26 Liquid Glass Style
+   ============================================ */
+
+/* =========================
+   CSS Custom Properties
+   ========================= */
+
+:root {
+  /* =========================
+     Centralized Theme Variables
+     Use these across all repos
+     ========================= */
+
+  /* Typography */
+  --mds-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --mds-font-family-brand: 'Helvetica', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Brand Colors */
+  --mds-color-brand-primary: #0055FF;
+  --mds-color-brand-secondary: #667eea;
+  --mds-color-brand-accent: #764ba2;
+
+  /* Status Colors */
+  --mds-color-success: #10b981;
+  --mds-color-warning: #f59e0b;
+  --mds-color-error: #ef4444;
+  --mds-color-info: #3b82f6;
+  --mds-color-accent: #a855f7;
+}
+
+/* =========================
+   Dark Theme (Default)
+   ========================= */
+:root,
+html[data-theme="dark"] {
+  /* Semantic Colors */
+  --mds-color-text-primary: #ffffff;
+  --mds-color-text-secondary: rgba(255, 255, 255, 0.7);
+  --mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
+  --mds-color-background-primary: #0f0f0f;
+  --mds-color-background-secondary: #1a1a1a;
+  --mds-color-background-tertiary: #2a2a2a;
+  --mds-color-border-default: rgba(255, 255, 255, 0.15);
+  --mds-color-border-light: rgba(255, 255, 255, 0.08);
+
+  /* Scrollbar */
+  --mds-scrollbar-track: rgba(40, 40, 40, 0.8);
+  --mds-scrollbar-thumb: rgba(80, 80, 80, 0.8);
+  --mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.8);
+
+  /* =========================
+     Liquid Glass Tokens - iOS 26 Style
+     ========================= */
+
+  /* Blur tokens - Increased for more glass-like effect */
+  --mds-liquid-blur-xs: 4px;
+  --mds-liquid-blur-sm: 8px;
+  --mds-liquid-blur-md: 12px;
+  --mds-liquid-blur-lg: 16px;
+  --mds-liquid-blur-xl: 24px;
+
+  /* Saturate tokens - Subtle per Apple guidelines */
+  --mds-liquid-saturate-subtle: 105%;
+  --mds-liquid-saturate-default: 120%;
+  --mds-liquid-saturate-vibrant: 140%;
+
+  /* Background tokens - True glass transparency */
+  --mds-liquid-bg-glass: rgba(255, 255, 255, 0.08);
+  --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.12);
+  --mds-liquid-bg-overlay: rgba(0, 0, 0, 0.4);
+  --mds-liquid-bg-sidebar: rgba(0, 0, 0, 0.35);
+  --mds-liquid-bg-navbar: rgba(0, 0, 0, 0.4);
+  --mds-liquid-bg-card: rgba(255, 255, 255, 0.06);
+  --mds-liquid-bg-input: rgba(255, 255, 255, 0.08);
+  --mds-liquid-bg-button: rgba(255, 255, 255, 0.1);
+  --mds-liquid-bg-button-hover: rgba(255, 255, 255, 0.15);
+
+  /* Border tokens - Subtle glass edges */
+  --mds-liquid-border-subtle: rgba(255, 255, 255, 0.12);
+  --mds-liquid-border-default: rgba(255, 255, 255, 0.18);
+  --mds-liquid-border-bright: rgba(255, 255, 255, 0.25);
+
+  /* Shadow tokens - Deeper for lifted effect */
+  --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.25);
+  --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.3);
+  --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.4);
+
+  /* Inner glow - Top edge highlight */
+  --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.08);
+
+  /* Specular highlight - More dramatic top-left shine */
+  --mds-liquid-specular: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0) 50%
+  );
+  --mds-liquid-specular-intense: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.25) 0%,
+    rgba(255, 255, 255, 0.08) 30%,
+    rgba(255, 255, 255, 0) 60%
+  );
+
+  /* Transitions */
+  --mds-liquid-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mds-liquid-transition-fast: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
+  --mds-liquid-transition-slow: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  /* Background gradient */
+  --mds-liquid-gradient: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
+}
+
+/* =========================
+   Light Theme
+   ========================= */
+html[data-theme="light"] {
+  /* Semantic Colors */
+  --mds-color-text-primary: #1a1a1a;
+  --mds-color-text-secondary: rgba(0, 0, 0, 0.6);
+  --mds-color-text-tertiary: rgba(0, 0, 0, 0.4);
+  --mds-color-background-primary: #f8f9fa;
+  --mds-color-background-secondary: #ffffff;
+  --mds-color-background-tertiary: #f0f0f0;
+  --mds-color-border-default: rgba(0, 0, 0, 0.08);
+  --mds-color-border-light: rgba(0, 0, 0, 0.04);
+
+  /* Scrollbar */
+  --mds-scrollbar-track: rgba(0, 0, 0, 0.05);
+  --mds-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+  --mds-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+
+  /* Liquid Glass - Light mode uses darker glass for contrast */
+  --mds-liquid-bg-glass: rgba(255, 255, 255, 0.7);
+  --mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.85);
+  --mds-liquid-bg-overlay: rgba(255, 255, 255, 0.6);
+  --mds-liquid-bg-sidebar: rgba(255, 255, 255, 0.75);
+  --mds-liquid-bg-navbar: rgba(255, 255, 255, 0.8);
+  --mds-liquid-bg-card: rgba(255, 255, 255, 0.6);
+  --mds-liquid-bg-input: rgba(255, 255, 255, 0.9);
+  --mds-liquid-bg-button: rgba(0, 0, 0, 0.04);
+  --mds-liquid-bg-button-hover: rgba(0, 0, 0, 0.08);
+
+  /* Borders - Subtle dark edges */
+  --mds-liquid-border-subtle: rgba(0, 0, 0, 0.06);
+  --mds-liquid-border-default: rgba(0, 0, 0, 0.1);
+  --mds-liquid-border-bright: rgba(0, 0, 0, 0.15);
+
+  /* Shadows - Softer for light mode */
+  --mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.1);
+  --mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
+  --mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.15);
+
+  /* Inner glow - Subtle white edge */
+  --mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.5);
+
+  /* Specular - Brighter for light mode */
+  --mds-liquid-specular: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.6) 0%,
+    rgba(255, 255, 255, 0.2) 25%,
+    rgba(255, 255, 255, 0) 50%
+  );
+  --mds-liquid-specular-intense: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0.3) 30%,
+    rgba(255, 255, 255, 0) 60%
+  );
+
+  /* Background gradient */
+  --mds-liquid-gradient: linear-gradient(180deg, #f0f2f5 0%, #e4e6e9 100%);
+}
+
+
+/* =========================
+   Base Liquid Glass Class
+   ========================= */
+
+.mds-liquid-glass {
+  position: relative;
+  background: var(--mds-liquid-bg-glass);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  border: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 16px;
+  box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
+  transition: var(--mds-liquid-transition);
+  overflow: hidden;
+}
+
+/* Specular highlight via pseudo-element */
+.mds-liquid-glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--mds-liquid-specular);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Content should be above the specular */
+.mds-liquid-glass > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Hover state - subtle brightness increase */
+.mds-liquid-glass:hover {
+  border-color: var(--mds-liquid-border-bright);
+  box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-edge);
+}
+
+/* No-hover variant */
+.mds-liquid-glass--no-hover,
+.mds-liquid-glass--no-hover:hover {
+  border-color: var(--mds-liquid-border-subtle);
+  box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
+}
+
+
+/* =========================
+   Size Variants
+   ========================= */
+
+.mds-liquid-glass--xs {
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 8px;
+}
+
+.mds-liquid-glass--sm {
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 12px;
+}
+
+.mds-liquid-glass--lg {
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 20px;
+}
+
+.mds-liquid-glass--xl {
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 24px;
+}
+
+
+/* =========================
+   Element-Specific Classes
+   ========================= */
+
+/* Navbar */
+.mds-liquid-glass--navbar {
+  background: var(--mds-liquid-bg-navbar);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-bottom: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+.mds-liquid-glass--navbar::before {
+  border-radius: 0;
+}
+
+.mds-liquid-glass--navbar:hover {
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+/* Sidebar */
+.mds-liquid-glass--sidebar {
+  background: var(--mds-liquid-bg-sidebar);
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-right: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+  box-shadow: var(--mds-liquid-shadow-raised);
+}
+
+.mds-liquid-glass--sidebar::before {
+  border-radius: 0;
+}
+
+/* Card */
+.mds-liquid-glass--card {
+  background: var(--mds-liquid-bg-card);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
+  padding: 1.5rem;
+}
+
+/* Modal */
+.mds-liquid-glass--modal {
+  background: var(--mds-liquid-bg-glass-thick);
+  backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
+  border-radius: 20px;
+  box-shadow: var(--mds-liquid-shadow-dramatic), var(--mds-liquid-glow-edge);
+}
+
+.mds-liquid-glass--modal::before {
+  background: var(--mds-liquid-specular-intense);
+}
+
+/* Modal Overlay */
+.mds-liquid-glass--overlay {
+  background: var(--mds-liquid-bg-overlay);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm));
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.mds-liquid-glass--overlay::before {
+  display: none;
+}
+
+/* Input */
+.mds-liquid-glass--input {
+  background: var(--mds-liquid-bg-input);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 10px;
+  box-shadow: var(--mds-liquid-glow-soft);
+  padding: 0.75rem 1rem;
+}
+
+.mds-liquid-glass--input:focus {
+  border-color: var(--mds-color-brand-primary);
+  box-shadow: var(--mds-liquid-glow-soft), 0 0 0 3px rgba(0, 85, 255, 0.2);
+  outline: none;
+}
+
+/* Button */
+.mds-liquid-glass--button {
+  background: var(--mds-liquid-bg-button);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 10px;
+  box-shadow: var(--mds-liquid-shadow-raised), var(--mds-liquid-glow-soft);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: var(--mds-liquid-transition-fast);
+}
+
+.mds-liquid-glass--button:hover {
+  background: var(--mds-liquid-bg-button-hover);
+  border-color: var(--mds-liquid-border-bright);
+}
+
+.mds-liquid-glass--button:active {
+  box-shadow: var(--mds-liquid-glow-soft);
+}
+
+/* Dropdown */
+.mds-liquid-glass--dropdown {
+  background: var(--mds-liquid-bg-glass-thick);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border-radius: 14px;
+  box-shadow: var(--mds-liquid-shadow-elevated);
+  padding: 0.5rem;
+}
+
+/* Table */
+.mds-liquid-glass--table {
+  background: var(--mds-liquid-bg-glass);
+  backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+/* Footer */
+.mds-liquid-glass--footer {
+  background: var(--mds-liquid-bg-navbar);
+  backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
+  border: none;
+  border-top: 1px solid var(--mds-liquid-border-subtle);
+  border-radius: 0;
+}
+
+.mds-liquid-glass--footer::before {
+  border-radius: 0;
+}
+
+/* TOC (Table of Contents) */
+.mds-liquid-glass--toc {
+  background: var(--mds-liquid-bg-card);
+  backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+/* Badge */
+.mds-liquid-glass--badge {
+  background: var(--mds-liquid-bg-button);
+  backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  -webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
+  border-radius: 999px;
+  box-shadow: var(--mds-liquid-shadow-raised);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+
+/* =========================
+   Background Utilities
+   ========================= */
+
+.mds-liquid-bg-gradient {
+  background: var(--mds-liquid-gradient) !important;
+  background-attachment: fixed !important;
+}
+
+
+/* =========================
+   Accessibility
+   ========================= */
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .mds-liquid-glass,
+  .mds-liquid-glass--button,
+  .mds-liquid-glass--input {
+    transition: none !important;
+  }
+}
+
+/* High contrast */
+@media (prefers-contrast: high) {
+  .mds-liquid-glass {
+    background: var(--mds-color-background-secondary) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    border: 2px solid var(--mds-color-text-primary) !important;
+  }
+
+  .mds-liquid-glass::before {
+    display: none !important;
+  }
+}
+
+
+/* =========================
+   Browser Fallback
+   ========================= */
+
+@supports not (backdrop-filter: blur(1px)) {
+  .mds-liquid-glass {
+    background: var(--mds-color-background-secondary);
+  }
+}

package/dist/css/mermaid.css

@@ -0,0 +1,163 @@
+/* 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; }