@likec4/diagram 1.0.1 → 1.1.0

package/dist/style.css

@@ -625,6 +625,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #172554;
   --likec4-relation-labelColor: #60a5fa;
 }
+:where([data-likec4-color='primary'][data-compound-depth='1']) {
+  --likec4-element-fill: #1a5bc5;
+  --likec4-element-stroke: #1e49a9;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='1']) {
+  --likec4-element-fill: #145ed7;
+  --likec4-element-stroke: #194bb8;
+}
+:where([data-likec4-color='primary'][data-compound-depth='2']) {
+  --likec4-element-fill: #1e56b1;
+  --likec4-element-stroke: #204698;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='2']) {
+  --likec4-element-fill: #195cc8;
+  --likec4-element-stroke: #1d4aac;
+}
+:where([data-likec4-color='primary'][data-compound-depth='3']) {
+  --likec4-element-fill: #21519f;
+  --likec4-element-stroke: #224289;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='3']) {
+  --likec4-element-fill: #1e59ba;
+  --likec4-element-stroke: #2149a0;
+}
+:where([data-likec4-color='primary'][data-compound-depth='4']) {
+  --likec4-element-fill: #234c8e;
+  --likec4-element-stroke: #243f7a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='4']) {
+  --likec4-element-fill: #2357ad;
+  --likec4-element-stroke: #244795;
+}
+:where([data-likec4-color='primary'][data-compound-depth='5']) {
+  --likec4-element-fill: #25467d;
+  --likec4-element-stroke: #243b6c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='5']) {
+  --likec4-element-fill: #2755a0;
+  --likec4-element-stroke: #27468a;
+}
+:where([data-likec4-color='primary'][data-compound-depth='6']) {
+  --likec4-element-fill: #25416d;
+  --likec4-element-stroke: #24365f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='6']) {
+  --likec4-element-fill: #2a5293;
+  --likec4-element-stroke: #2a447f;
+}
 :where([data-likec4-color='blue']) {
   --likec4-element-fill: #3b82f6;
   --likec4-element-stroke: #2563eb;
@@ -635,6 +683,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #172554;
   --likec4-relation-labelColor: #60a5fa;
 }
+:where([data-likec4-color='blue'][data-compound-depth='1']) {
+  --likec4-element-fill: #1a5bc5;
+  --likec4-element-stroke: #1e49a9;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='1']) {
+  --likec4-element-fill: #145ed7;
+  --likec4-element-stroke: #194bb8;
+}
+:where([data-likec4-color='blue'][data-compound-depth='2']) {
+  --likec4-element-fill: #1e56b1;
+  --likec4-element-stroke: #204698;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='2']) {
+  --likec4-element-fill: #195cc8;
+  --likec4-element-stroke: #1d4aac;
+}
+:where([data-likec4-color='blue'][data-compound-depth='3']) {
+  --likec4-element-fill: #21519f;
+  --likec4-element-stroke: #224289;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='3']) {
+  --likec4-element-fill: #1e59ba;
+  --likec4-element-stroke: #2149a0;
+}
+:where([data-likec4-color='blue'][data-compound-depth='4']) {
+  --likec4-element-fill: #234c8e;
+  --likec4-element-stroke: #243f7a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='4']) {
+  --likec4-element-fill: #2357ad;
+  --likec4-element-stroke: #244795;
+}
+:where([data-likec4-color='blue'][data-compound-depth='5']) {
+  --likec4-element-fill: #25467d;
+  --likec4-element-stroke: #243b6c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='5']) {
+  --likec4-element-fill: #2755a0;
+  --likec4-element-stroke: #27468a;
+}
+:where([data-likec4-color='blue'][data-compound-depth='6']) {
+  --likec4-element-fill: #25416d;
+  --likec4-element-stroke: #24365f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='6']) {
+  --likec4-element-fill: #2a5293;
+  --likec4-element-stroke: #2a447f;
+}
 :where([data-likec4-color='secondary']) {
   --likec4-element-fill: #0284c7;
   --likec4-element-stroke: #0369a1;
@@ -645,6 +741,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #082f49;
   --likec4-relation-labelColor: #38bdf8;
 }
+:where([data-likec4-color='secondary'][data-compound-depth='1']) {
+  --likec4-element-fill: #0d5d86;
+  --likec4-element-stroke: #0b4a6c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='1']) {
+  --likec4-element-fill: #086392;
+  --likec4-element-stroke: #084f76;
+}
+:where([data-likec4-color='secondary'][data-compound-depth='2']) {
+  --likec4-element-fill: #105579;
+  --likec4-element-stroke: #0e4462;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='2']) {
+  --likec4-element-fill: #0c5e88;
+  --likec4-element-stroke: #0b4b6e;
+}
+:where([data-likec4-color='secondary'][data-compound-depth='3']) {
+  --likec4-element-fill: #134e6c;
+  --likec4-element-stroke: #103e57;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='3']) {
+  --likec4-element-fill: #10597f;
+  --likec4-element-stroke: #0e4767;
+}
+:where([data-likec4-color='secondary'][data-compound-depth='4']) {
+  --likec4-element-fill: #154660;
+  --likec4-element-stroke: #11384e;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='4']) {
+  --likec4-element-fill: #135475;
+  --likec4-element-stroke: #11435f;
+}
+:where([data-likec4-color='secondary'][data-compound-depth='5']) {
+  --likec4-element-fill: #163f55;
+  --likec4-element-stroke: #123345;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='5']) {
+  --likec4-element-fill: #164f6c;
+  --likec4-element-stroke: #133f58;
+}
+:where([data-likec4-color='secondary'][data-compound-depth='6']) {
+  --likec4-element-fill: #17384a;
+  --likec4-element-stroke: #132d3c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='6']) {
+  --likec4-element-fill: #194a64;
+  --likec4-element-stroke: #153c51;
+}
 :where([data-likec4-color='sky']) {
   --likec4-element-fill: #0284c7;
   --likec4-element-stroke: #0369a1;
@@ -655,6 +799,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #082f49;
   --likec4-relation-labelColor: #38bdf8;
 }
+:where([data-likec4-color='sky'][data-compound-depth='1']) {
+  --likec4-element-fill: #0d5d86;
+  --likec4-element-stroke: #0b4a6c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='1']) {
+  --likec4-element-fill: #086392;
+  --likec4-element-stroke: #084f76;
+}
+:where([data-likec4-color='sky'][data-compound-depth='2']) {
+  --likec4-element-fill: #105579;
+  --likec4-element-stroke: #0e4462;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='2']) {
+  --likec4-element-fill: #0c5e88;
+  --likec4-element-stroke: #0b4b6e;
+}
+:where([data-likec4-color='sky'][data-compound-depth='3']) {
+  --likec4-element-fill: #134e6c;
+  --likec4-element-stroke: #103e57;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='3']) {
+  --likec4-element-fill: #10597f;
+  --likec4-element-stroke: #0e4767;
+}
+:where([data-likec4-color='sky'][data-compound-depth='4']) {
+  --likec4-element-fill: #154660;
+  --likec4-element-stroke: #11384e;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='4']) {
+  --likec4-element-fill: #135475;
+  --likec4-element-stroke: #11435f;
+}
+:where([data-likec4-color='sky'][data-compound-depth='5']) {
+  --likec4-element-fill: #163f55;
+  --likec4-element-stroke: #123345;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='5']) {
+  --likec4-element-fill: #164f6c;
+  --likec4-element-stroke: #133f58;
+}
+:where([data-likec4-color='sky'][data-compound-depth='6']) {
+  --likec4-element-fill: #17384a;
+  --likec4-element-stroke: #132d3c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='6']) {
+  --likec4-element-fill: #194a64;
+  --likec4-element-stroke: #153c51;
+}
 :where([data-likec4-color='muted']) {
   --likec4-element-fill: #64748b;
   --likec4-element-stroke: #475569;
@@ -665,6 +857,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #0f172a;
   --likec4-relation-labelColor: #cbd5e1;
 }
+:where([data-likec4-color='muted'][data-compound-depth='1']) {
+  --likec4-element-fill: #4b5563;
+  --likec4-element-stroke: #363e4b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='1']) {
+  --likec4-element-fill: #4e5a6a;
+  --likec4-element-stroke: #384250;
+}
+:where([data-likec4-color='muted'][data-compound-depth='2']) {
+  --likec4-element-fill: #474f5c;
+  --likec4-element-stroke: #333a45;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='2']) {
+  --likec4-element-fill: #4c5665;
+  --likec4-element-stroke: #363f4c;
+}
+:where([data-likec4-color='muted'][data-compound-depth='3']) {
+  --likec4-element-fill: #424a54;
+  --likec4-element-stroke: #30363f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='3']) {
+  --likec4-element-fill: #4a5360;
+  --likec4-element-stroke: #353d48;
+}
+:where([data-likec4-color='muted'][data-compound-depth='4']) {
+  --likec4-element-fill: #3e444d;
+  --likec4-element-stroke: #2d323a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='4']) {
+  --likec4-element-fill: #48505b;
+  --likec4-element-stroke: #333a44;
+}
+:where([data-likec4-color='muted'][data-compound-depth='5']) {
+  --likec4-element-fill: #393e46;
+  --likec4-element-stroke: #292e34;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='5']) {
+  --likec4-element-fill: #454c56;
+  --likec4-element-stroke: #323841;
+}
+:where([data-likec4-color='muted'][data-compound-depth='6']) {
+  --likec4-element-fill: #34383e;
+  --likec4-element-stroke: #26292f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='6']) {
+  --likec4-element-fill: #434951;
+  --likec4-element-stroke: #30353d;
+}
 :where([data-likec4-color='slate']) {
   --likec4-element-fill: #64748b;
   --likec4-element-stroke: #475569;
@@ -675,6 +915,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #0f172a;
   --likec4-relation-labelColor: #cbd5e1;
 }
+:where([data-likec4-color='slate'][data-compound-depth='1']) {
+  --likec4-element-fill: #4b5563;
+  --likec4-element-stroke: #363e4b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='1']) {
+  --likec4-element-fill: #4e5a6a;
+  --likec4-element-stroke: #384250;
+}
+:where([data-likec4-color='slate'][data-compound-depth='2']) {
+  --likec4-element-fill: #474f5c;
+  --likec4-element-stroke: #333a45;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='2']) {
+  --likec4-element-fill: #4c5665;
+  --likec4-element-stroke: #363f4c;
+}
+:where([data-likec4-color='slate'][data-compound-depth='3']) {
+  --likec4-element-fill: #424a54;
+  --likec4-element-stroke: #30363f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='3']) {
+  --likec4-element-fill: #4a5360;
+  --likec4-element-stroke: #353d48;
+}
+:where([data-likec4-color='slate'][data-compound-depth='4']) {
+  --likec4-element-fill: #3e444d;
+  --likec4-element-stroke: #2d323a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='4']) {
+  --likec4-element-fill: #48505b;
+  --likec4-element-stroke: #333a44;
+}
+:where([data-likec4-color='slate'][data-compound-depth='5']) {
+  --likec4-element-fill: #393e46;
+  --likec4-element-stroke: #292e34;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='5']) {
+  --likec4-element-fill: #454c56;
+  --likec4-element-stroke: #323841;
+}
+:where([data-likec4-color='slate'][data-compound-depth='6']) {
+  --likec4-element-fill: #34383e;
+  --likec4-element-stroke: #26292f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='6']) {
+  --likec4-element-fill: #434951;
+  --likec4-element-stroke: #30353d;
+}
 :where([data-likec4-color='gray']) {
   --likec4-element-fill: #737373;
   --likec4-element-stroke: #525252;
@@ -685,6 +973,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #18191b;
   --likec4-relation-labelColor: #C6C6C6;
 }
+:where([data-likec4-color='gray'][data-compound-depth='1']) {
+  --likec4-element-fill: #545454;
+  --likec4-element-stroke: #3c3c3c;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='1']) {
+  --likec4-element-fill: #595959;
+  --likec4-element-stroke: #3f3f3f;
+}
+:where([data-likec4-color='gray'][data-compound-depth='2']) {
+  --likec4-element-fill: #4e4e4e;
+  --likec4-element-stroke: #383838;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='2']) {
+  --likec4-element-fill: #555555;
+  --likec4-element-stroke: #3d3d3d;
+}
+:where([data-likec4-color='gray'][data-compound-depth='3']) {
+  --likec4-element-fill: #484848;
+  --likec4-element-stroke: #343434;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='3']) {
+  --likec4-element-fill: #525252;
+  --likec4-element-stroke: #3a3a3a;
+}
+:where([data-likec4-color='gray'][data-compound-depth='4']) {
+  --likec4-element-fill: #434343;
+  --likec4-element-stroke: #303030;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='4']) {
+  --likec4-element-fill: #4e4e4e;
+  --likec4-element-stroke: #383838;
+}
+:where([data-likec4-color='gray'][data-compound-depth='5']) {
+  --likec4-element-fill: #3d3d3d;
+  --likec4-element-stroke: #2b2b2b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='5']) {
+  --likec4-element-fill: #4b4b4b;
+  --likec4-element-stroke: #353535;
+}
+:where([data-likec4-color='gray'][data-compound-depth='6']) {
+  --likec4-element-fill: #373737;
+  --likec4-element-stroke: #272727;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='6']) {
+  --likec4-element-fill: #474747;
+  --likec4-element-stroke: #333333;
+}
 :where([data-likec4-color='red']) {
   --likec4-element-fill: #AC4D39;
   --likec4-element-stroke: #853A2D;
@@ -695,6 +1031,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #b91c1c;
   --likec4-relation-labelColor: #FF977D;
 }
+:where([data-likec4-color='red'][data-compound-depth='1']) {
+  --likec4-element-fill: #773d30;
+  --likec4-element-stroke: #5c2e26;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='1']) {
+  --likec4-element-fill: #803e30;
+  --likec4-element-stroke: #632f26;
+}
+:where([data-likec4-color='red'][data-compound-depth='2']) {
+  --likec4-element-fill: #6c3a2f;
+  --likec4-element-stroke: #542c25;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='2']) {
+  --likec4-element-fill: #793d31;
+  --likec4-element-stroke: #5e2e26;
+}
+:where([data-likec4-color='red'][data-compound-depth='3']) {
+  --likec4-element-fill: #62372e;
+  --likec4-element-stroke: #4c2a24;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='3']) {
+  --likec4-element-fill: #723c31;
+  --likec4-element-stroke: #582e27;
+}
+:where([data-likec4-color='red'][data-compound-depth='4']) {
+  --likec4-element-fill: #58342c;
+  --likec4-element-stroke: #442823;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='4']) {
+  --likec4-element-fill: #6a3b31;
+  --likec4-element-stroke: #522d27;
+}
+:where([data-likec4-color='red'][data-compound-depth='5']) {
+  --likec4-element-fill: #4f312a;
+  --likec4-element-stroke: #3d2521;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='5']) {
+  --likec4-element-fill: #633a31;
+  --likec4-element-stroke: #4d2c27;
+}
+:where([data-likec4-color='red'][data-compound-depth='6']) {
+  --likec4-element-fill: #462d28;
+  --likec4-element-stroke: #36231f;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='6']) {
+  --likec4-element-fill: #5d3931;
+  --likec4-element-stroke: #482b27;
+}
 :where([data-likec4-color='green']) {
   --likec4-element-fill: #428a4f;
   --likec4-element-stroke: #2d5d39;
@@ -705,6 +1089,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #052e16;
   --likec4-relation-labelColor: #22c55e;
 }
+:where([data-likec4-color='green'][data-compound-depth='1']) {
+  --likec4-element-fill: #34613c;
+  --likec4-element-stroke: #24412b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='1']) {
+  --likec4-element-fill: #35683e;
+  --likec4-element-stroke: #24462d;
+}
+:where([data-likec4-color='green'][data-compound-depth='2']) {
+  --likec4-element-fill: #325839;
+  --likec4-element-stroke: #223c29;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='2']) {
+  --likec4-element-fill: #35623d;
+  --likec4-element-stroke: #24422c;
+}
+:where([data-likec4-color='green'][data-compound-depth='3']) {
+  --likec4-element-fill: #305136;
+  --likec4-element-stroke: #213626;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='3']) {
+  --likec4-element-fill: #345d3c;
+  --likec4-element-stroke: #243e2a;
+}
+:where([data-likec4-color='green'][data-compound-depth='4']) {
+  --likec4-element-fill: #2d4932;
+  --likec4-element-stroke: #1f3123;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='4']) {
+  --likec4-element-fill: #33573a;
+  --likec4-element-stroke: #233b29;
+}
+:where([data-likec4-color='green'][data-compound-depth='5']) {
+  --likec4-element-fill: #2b422f;
+  --likec4-element-stroke: #1d2c21;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='5']) {
+  --likec4-element-fill: #335238;
+  --likec4-element-stroke: #223728;
+}
+:where([data-likec4-color='green'][data-compound-depth='6']) {
+  --likec4-element-fill: #283a2b;
+  --likec4-element-stroke: #1b271e;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='6']) {
+  --likec4-element-fill: #324d37;
+  --likec4-element-stroke: #223426;
+}
 :where([data-likec4-color='amber']) {
   --likec4-element-fill: #A35829;
   --likec4-element-stroke: #7E451D;
@@ -715,6 +1147,54 @@ svg.react-flow__connectionline {
   --likec4-relation-labelBg: #78350f;
   --likec4-relation-labelColor: #FFE0C2;
 }
+:where([data-likec4-color='amber'][data-compound-depth='1']) {
+  --likec4-element-fill: #704225;
+  --likec4-element-stroke: #56331b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='1']) {
+  --likec4-element-fill: #794524;
+  --likec4-element-stroke: #5e361a;
+}
+:where([data-likec4-color='amber'][data-compound-depth='2']) {
+  --likec4-element-fill: #663e25;
+  --likec4-element-stroke: #4e301b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='2']) {
+  --likec4-element-fill: #724325;
+  --likec4-element-stroke: #58341b;
+}
+:where([data-likec4-color='amber'][data-compound-depth='3']) {
+  --likec4-element-fill: #5c3a25;
+  --likec4-element-stroke: #472d1b;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='3']) {
+  --likec4-element-fill: #6b4126;
+  --likec4-element-stroke: #52321c;
+}
+:where([data-likec4-color='amber'][data-compound-depth='4']) {
+  --likec4-element-fill: #533624;
+  --likec4-element-stroke: #402a1a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='4']) {
+  --likec4-element-fill: #643e27;
+  --likec4-element-stroke: #4d301d;
+}
+:where([data-likec4-color='amber'][data-compound-depth='5']) {
+  --likec4-element-fill: #493223;
+  --likec4-element-stroke: #38261a;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='5']) {
+  --likec4-element-fill: #5d3c28;
+  --likec4-element-stroke: #472f1d;
+}
+:where([data-likec4-color='amber'][data-compound-depth='6']) {
+  --likec4-element-fill: #412d21;
+  --likec4-element-stroke: #322319;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='6']) {
+  --likec4-element-fill: #563a28;
+  --likec4-element-stroke: #422d1e;
+}
 :where([data-likec4-color='indigo']) {
   --likec4-element-fill: #6366f1;
   --likec4-element-stroke: #4f46e5;
@@ -724,24 +1204,73 @@ svg.react-flow__connectionline {
   --likec4-relation-lineColor: #6366f1;
   --likec4-relation-labelBg: #1e1b4b;
   --likec4-relation-labelColor: #818cf8;
-}.react-flow._2h8g8h0 {
+}
+:where([data-likec4-color='indigo'][data-compound-depth='1']) {
+  --likec4-element-fill: #2529d3;
+  --likec4-element-stroke: #3028b2;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='1']) {
+  --likec4-element-fill: #2529e1;
+  --likec4-element-stroke: #2d24c2;
+}
+:where([data-likec4-color='indigo'][data-compound-depth='2']) {
+  --likec4-element-fill: #282bbf;
+  --likec4-element-stroke: #312aa1;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='2']) {
+  --likec4-element-fill: #2428d7;
+  --likec4-element-stroke: #3028b5;
+}
+:where([data-likec4-color='indigo'][data-compound-depth='3']) {
+  --likec4-element-fill: #2b2dac;
+  --likec4-element-stroke: #312b91;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='3']) {
+  --likec4-element-fill: #292cc8;
+  --likec4-element-stroke: #322ba9;
+}
+:where([data-likec4-color='indigo'][data-compound-depth='4']) {
+  --likec4-element-fill: #2c2f99;
+  --likec4-element-stroke: #302c82;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='4']) {
+  --likec4-element-fill: #2d30ba;
+  --likec4-element-stroke: #342e9e;
+}
+:where([data-likec4-color='indigo'][data-compound-depth='5']) {
+  --likec4-element-fill: #2d2f87;
+  --likec4-element-stroke: #2f2b73;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='5']) {
+  --likec4-element-fill: #3133ac;
+  --likec4-element-stroke: #363092;
+}
+:where([data-likec4-color='indigo'][data-compound-depth='6']) {
+  --likec4-element-fill: #2d2e76;
+  --likec4-element-stroke: #2e2b65;
+}
+:where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='6']) {
+  --likec4-element-fill: #34369f;
+  --likec4-element-stroke: #373287;
+}._2h8g8h0 {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+.react-flow._2h8g8h1 {
   --xy-background-color: var(--likec4-background-color);
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
 }
-.react-flow._2h8g8h0 .react-flow__viewport {
+.react-flow._2h8g8h1 .react-flow__viewport {
   will-change: transform;
 }
-.react-flow._2h8g8h0._2h8g8h2 {
+.react-flow._2h8g8h1._2h8g8h3 {
   --likec4-background-color: transparent !important;
   --xy-background-color: transparent !important;
   background-color: transparent !important;
 }
-:where(._2h8g8h3, ._2h8g8h2) .react-flow__attribution {
+:where(._2h8g8h4, ._2h8g8h3) .react-flow__attribution {
   display: none;
-}._14qhjro0 {
-  width: 100%;
-  height: 100%;
-  padding: 0;
 }._1lmzt1h0 {
   top: var(--likec4-options-panel-top, 1rem);
   right: var(--likec4-options-panel-right, 1rem);
@@ -814,7 +1343,7 @@ svg.react-flow__connectionline {
   font-size: calc(0.78125rem * var(--mantine-scale));
   line-height: 1.12;
   transition: color 120ms ease-out;
-}@keyframes lbtzdo5 {
+}@keyframes lbtzdo7 {
   from {
     opacity: 0.6;
   }
@@ -835,9 +1364,9 @@ svg.react-flow__connectionline {
   position: relative;
   border-radius: calc(0.375rem * var(--mantine-scale));
   box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4);
-  padding: calc(0.5rem * var(--mantine-scale));
+  padding: 8px;
   background: var(--likec4-element-fill);
-  transition: all 300ms ease-out;
+  transition: all 200ms ease-out;
 }
 :where(.react-flow__node.selected) .lbtzdo2 {
   box-shadow: none;
@@ -847,50 +1376,54 @@ svg.react-flow__connectionline {
   outline: 3px solid var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   outline-offset: calc(0.09375rem * var(--mantine-scale));
 }
-.lbtzdo3 {
-  --lbtzdo1: 90%;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  border-radius: calc(0.5rem * var(--mantine-scale));
+.lbtzdo5 {
+  --lbtzdo3: calc(var(--lbtzdo1, 80%) - var(--lbtzdo4));
+  --lbtzdo4: 0%;
+  --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
+  border-radius: 8px;
   border-style: dashed;
-  border-width: calc(0.21875rem * var(--mantine-scale));
-  border-color: var(--likec4-element-fill);
-  box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.05) , 0 2px 2px -1px rgba(0,0,0,0.04);
-  padding: calc(0.5rem * var(--mantine-scale));
-  background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo1));
-  transition: all 200ms ease-out;
-}
-:where(.lbtzdo0[data-hovered]) .lbtzdo3 {
-  --lbtzdo1: 65%;
-  transition-delay: 300ms;
-}
-:where(.react-flow__node.selected) .lbtzdo3 {
-  --lbtzdo1: 15%;
+  border-width: 3px;
+  padding: 6px;
+  border-color: color-mix(in srgb , var(--likec4-element-stroke),  transparent min(var(--lbtzdo3), 30%));
+  background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo3));
+  background-clip: padding-box;
+}
+:where(.lbtzdo0[data-hovered]) .lbtzdo5 {
+  --lbtzdo4: 15%;
+  transition-delay: 175ms;
+}
+:where(.react-flow__node.selected) .lbtzdo5 {
+  --lbtzdo4: 25%;
   transition-delay: 50ms;
-  box-shadow: none;
   border-color: transparent;
 }
-.lbtzdo4 {
+.lbtzdo6 {
   font-family: var(--likec4-compound-font-family);
   font-optical-sizing: auto;
   font-style: normal;
   text-align: left;
   display: inline-block;
   font-weight: 600;
-  font-size: 13px;
+  font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.2px;
   line-height: 1;
   opacity: 0.75;
-  color: var(--likec4-compound-title-color);
-  padding-left: calc(0.75rem * var(--mantine-scale));
-  mix-blend-mode: lighten;
+  color: var(--_compound-title-color,var(--likec4-compound-title-color));
+  padding-left: 12px;
 }
-:where([data-likec4-navigable='true']) .lbtzdo4 {
-  padding-left: calc(1.625rem * var(--mantine-scale));
+:where([data-likec4-navigable='true']) .lbtzdo6 {
+  padding-left: 26px;
 }
-.lbtzdo6 {
+:where([data-mantine-color-scheme='light']) .lbtzdo6 {
+  opacity: 1;
+}
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
+  --_compound-title-color: var(--likec4-element-stroke);
+}
+.lbtzdoa {
+  --lbtzdo8: var(--likec4-element-loContrast);
+  --lbtzdo9: 6;
   position: absolute;
   top: 0;
   left: 0;
@@ -900,24 +1433,33 @@ svg.react-flow__connectionline {
   overflow: visible;
   visibility: hidden;
 }
-:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdo6 {
+:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdoa {
   visibility: visible;
 }
-.lbtzdo6 rect {
-  stroke: var(--likec4-element-loContrast);
+:where(.react-flow__node:focus-within:not(.selected)) .lbtzdoa {
+  --lbtzdo8: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
+  --lbtzdo9: 8;
+}
+:where([data-mantine-color-scheme='light']) .lbtzdoa {
+  --lbtzdo8: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
+}
+.lbtzdoa rect {
+  stroke: var(--lbtzdo8);
   transform-origin: center center;
-  stroke-width: 6;
+  stroke-width: var(--lbtzdo9);
   animation-duration: 800ms;
-  animation-name: lbtzdo5;
+  animation-name: lbtzdo7;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   fill: none;
 }
-:where(.react-flow__node:focus-within:not(.selected)) .lbtzdo6 rect {
-  stroke: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
-  stroke-width: 8;
+.lbtzdo0 {
+  --lbtzdob: var(--likec4-element-loContrast);
+}
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
+  --lbtzdob: var(--likec4-element-stroke);
 }
-.lbtzdo7 {
+.lbtzdoc {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -926,32 +1468,37 @@ svg.react-flow__connectionline {
   left: 3px;
   top: 7px;
   cursor: pointer;
-  color: var(--likec4-element-loContrast);
+  color: var(--_compound-title-color,var(--lbtzdob));
   transform-origin: 90% 70%;
   opacity: 0.75;
   transition: all 150ms ease-out;
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-.lbtzdo7:hover {
+.lbtzdoc:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.466);
   opacity: 1;
   transition-delay: 0;
 }
-.lbtzdo7:active {
+.lbtzdoc:active {
   transform: scale(1.1);
   opacity: 1;
   transition-delay: 0;
 }
-:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdo7:not(:hover) {
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdoc {
+  --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 50%);
+  --ai-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 20%);
+  opacity: 0.85;
+}
+:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdoc:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.223);
   opacity: 1;
   transition-delay: 250ms;
 }
-.lbtzdo7 svg.icon {
+.lbtzdoc svg.icon {
   width: 70%;
   height: 70%;
   stroke-width: 1.5;