Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133/* diagram svgs (src/assets/diagrams) carry only shapes and class names; colors and type come from here so they follow the theme */.diagram { margin-block: 1.5rem; /* one hue per role, as in the Git Merge 2026 slides */ --d-pds: #0ea5e9; --d-relay: #eab308; --d-index: #22c55e; --d-client: #a855f7; --d-knot: #f59e0b; --d-spindle: #ec4899;}
.diagram svg { display: block; width: 100%; height: auto; max-width: 48rem; margin-inline: auto; font-family: var(--font-sans);}
.diagram figcaption { margin-top: 0.5rem; text-align: center; font-size: var(--sl-text-body-sm); color: var(--color-foreground-muted);}
/* a service or component */.diagram .box { fill: var(--color-background-default); stroke: var(--color-border-strong); stroke-width: 1;}
/* the thing the diagram is about */.diagram .box-accent { fill: var(--color-background-info-subtle); stroke: var(--color-foreground-info); stroke-width: 1;}
/* something outside tangled: a pds, plc, the user's machine */.diagram .box-external { fill: var(--color-background-inset); stroke: var(--color-border-default); stroke-width: 1; stroke-dasharray: 4 3;}
/* a dashed region grouping boxes, e.g. one operator's machines */.diagram .group { fill: none; stroke: var(--color-border-default); stroke-width: 1; stroke-dasharray: 6 4;}
/* role boxes: tinted fill, full-strength stroke */.diagram :is(.box-pds, .box-relay, .box-index, .box-client, .box-knot, .box-spindle) { stroke-width: 1.5; fill: color-mix(in oklab, var(--d-role) 16%, var(--color-background-default)); stroke: var(--d-role);}
.diagram .box-pds { --d-role: var(--d-pds); }.diagram .box-relay { --d-role: var(--d-relay); }.diagram .box-index { --d-role: var(--d-index); }.diagram .box-client { --d-role: var(--d-client); }.diagram .box-knot { --d-role: var(--d-knot); }.diagram .box-spindle { --d-role: var(--d-spindle); }
/* something you could run instead: dashed, untinted */.diagram .yours { fill: var(--color-background-default); stroke-dasharray: 5 4;}
.diagram .box.yours { stroke: var(--color-border-strong);}
/* a small tag naming a supporting service */.diagram .chip { fill: var(--color-background-muted); stroke: none;}
.diagram .chip-label { fill: var(--color-foreground-muted); font-size: 10.5px;}
.diagram .divider { stroke: var(--color-border-default); stroke-width: 1;}
.diagram .label { fill: var(--color-foreground-default); font-size: 13px; font-weight: 590;}
.diagram .sublabel { fill: var(--color-foreground-muted); font-size: 11px;}
.diagram .group-label,.diagram .edge-label { fill: var(--color-foreground-subtle); font-size: 11px;}
.diagram .edge { fill: none; stroke: var(--color-foreground-subtle); stroke-width: 1.25;}
.diagram .edge-dashed { fill: none; stroke: var(--color-foreground-subtle); stroke-width: 1.25; stroke-dasharray: 4 3;}
.diagram .arrowhead { fill: var(--color-foreground-subtle);}