@metropolle/design-system 1.0.0-beta.2025.9.14.408.fe8ae02 → 1.0.0-beta.2025.9.26.2310.211a282

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/css/mermaid.css +102 -0
  2. package/package.json +4 -2
package/dist/css/mermaid.css ADDED
@@ -0,0 +1,102 @@
1
+ /* Metropolle Design System – Mermaid Diagram Styling */
2
+
3
+ /*
4
+ Provides palette-aware theming for Mermaid diagrams that matches the
5
+ architecture documentation reference. Consumers should pair these styles
6
+ with the class definitions exported in documentation snippets (ex: pastelBlue,
7
+ accentOrange) to ensure consistent fill and typography across projects.
8
+ */
9
+
10
+ :root {
11
+ --mds-mermaid-label-dark: var(--mds-color-neutral-900, #0f172a);
12
+ --mds-mermaid-label-light: var(--mds-color-neutral-50, #f8fafc);
13
+ --mds-mermaid-node-font-weight: 600;
14
+ --mds-mermaid-edge-font-weight: 500;
15
+ }
16
+
17
+ /* Base container styling – glass morphism aligned with platform visuals */
18
+ html[data-theme='dark'] .mermaid {
19
+ background: rgba(255, 255, 255, 0.05) !important;
20
+ border-radius: var(--mds-border-radius-lg, 12px);
21
+ padding: var(--mds-space-4, 1rem);
22
+ backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.1);
24
+ margin: var(--mds-space-4, 1rem) 0;
25
+ }
26
+
27
+ html[data-theme='light'] .mermaid {
28
+ background: rgba(255, 255, 255, 0.7) !important;
29
+ border-radius: var(--mds-border-radius-lg, 12px);
30
+ padding: var(--mds-space-4, 1rem);
31
+ backdrop-filter: blur(10px);
32
+ border: 1px solid rgba(0, 0, 0, 0.1);
33
+ margin: var(--mds-space-4, 1rem) 0;
34
+ box-shadow: var(--mds-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
35
+ }
36
+
37
+ /* Default typography settings for nodes and clusters */
38
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster) {
39
+ --mds-mermaid-node-color: var(--mds-mermaid-label-dark);
40
+ --mds-mermaid-node-weight-current: var(--mds-mermaid-node-font-weight);
41
+ }
42
+
43
+ /* Switch to light foreground when nodes use strong accent fills */
44
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#00bcd4" i]),
45
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1565c0" i]),
46
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#1976d2" i]),
47
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#2196f3" i]),
48
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#34a853" i]),
49
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#388e3c" i]),
50
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3b82f6" i]),
51
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#3f48cc" i]),
52
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4285f4" i]),
53
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#45b7d1" i]),
54
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4b612c" i]),
55
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4caf50" i]),
56
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#4ecdc4" i]),
57
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#607d8b" i]),
58
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#627eea" i]),
59
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#673ab7" i]),
60
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#689f38" i]),
61
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#759c3e" i]),
62
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#795548" i]),
63
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#7b1fa2" i]),
64
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#96ceb4" i]),
65
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#9c27b0" i]),
66
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#c2185b" i]),
67
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#dd344c" i]),
68
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#e91e63" i]),
69
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f44336" i]),
70
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f57c00" i]),
71
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#f7931a" i]),
72
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff5722" i]),
73
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff6b6b" i]),
74
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster):has(> :is(rect, polygon, ellipse, circle, path)[fill="#ff9800" i]) {
75
+ --mds-mermaid-node-color: var(--mds-mermaid-label-light);
76
+ }
77
+
78
+ /* Apply the computed foreground colour to all supported Mermaid label types */
79
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label text,
80
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label tspan {
81
+ fill: var(--mds-mermaid-node-color) !important;
82
+ font-weight: var(--mds-mermaid-node-weight-current);
83
+ }
84
+
85
+ html[data-theme='dark'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
86
+ color: var(--mds-mermaid-node-color) !important;
87
+ font-weight: var(--mds-mermaid-node-weight-current);
88
+ }
89
+
90
+ /* Preserve lighter typography for edge labels so they remain legible */
91
+ html[data-theme='dark'] .mermaid .edgeLabel text,
92
+ html[data-theme='dark'] .mermaid .edgeLabel tspan {
93
+ fill: var(--ifm-font-color-base, #e5e7eb) !important;
94
+ font-weight: var(--mds-mermaid-edge-font-weight);
95
+ }
96
+
97
+ /* Light theme keeps default dark text but enforces consistent weight */
98
+ html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label text,
99
+ html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label tspan,
100
+ html[data-theme='light'] .mermaid :is(g.node, g.cluster) g.label foreignObject * {
101
+ font-weight: var(--mds-mermaid-node-font-weight, 600);
102
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metropolle/design-system",
3
- "version": "1.0.0-beta.2025.09.14.0408.fe8ae02",
3
+ "version": "1.0.0-beta.2025.09.26.2310.211a282",
4
4
  "description": "Sistema de design unificado para a plataforma Metropolle",
5
5
  "type": "module",
6
6
  "main": "dist/react/index.js",
@@ -18,7 +18,9 @@
18
18
  },
19
19
  "./css": "./dist/css/tokens.css",
20
20
  "./css/components": "./dist/css/components.css",
21
- "./css/compat/back.css": "./dist/css/compat/back.css"
21
+ "./css/compat/back.css": "./dist/css/compat/back.css",
22
+ "./css/mermaid": "./dist/css/mermaid.css",
23
+ "./css/mermaid.css": "./dist/css/mermaid.css"
22
24
  },
23
25
  "files": [
24
26
  "dist/**/*",