node-card-style.mjs
32 lines · archify/renderers/shared/node-card-style.mjs at a406594
1// Shared card styling for the architecture and workflow renderers. Every
2// preset gets the cleaner cards and label chips; blueprint keeps its drafting
3// dash patterns and square corners.
4const TONES = ['frontend', 'backend', 'database', 'cloud', 'security', 'messagebus', 'external'];
6export const NODE_CARD_ATTR = 'data-node-ui=""';
8export function nodeCardStyle() {
9 const all = 'svg[data-node-ui]';
10 const solid = `${all}:is([data-preset="classic"], [data-preset="signal-flow"], [data-preset="editorial"])`;
11 const blueprint = `${all}[data-preset="blueprint"]`;
12 const editorial = `${all}[data-preset="editorial"]`;
13 const dark = `:is([data-theme="dark"] ${all}, ${all}[data-theme="dark"])`;
14 const node = '[data-node-id] > rect:not(.c-mask)';
15 const frameLabel = '[data-graph-role="structural-frame-label-mask"]';
16 const edgeLabel = 'g[data-edge-from] > rect.c-mask';
17 return ` <style>
18 ${all} ${node} { stroke-width: 1.25px; }
19${TONES.map((tone) => ` ${dark} ${node}.c-${tone} { fill: color-mix(in srgb, var(--${tone}-stroke) 13%, var(--mask)); stroke: color-mix(in srgb, var(--${tone}-stroke) 72%, var(--mask)); }`).join('\n')}
20 ${solid} .c-region { fill: color-mix(in srgb, var(--cloud-stroke) 3%, transparent); stroke: color-mix(in srgb, var(--cloud-stroke) 42%, var(--lane-stroke)); stroke-dasharray: none; }
21 ${all} .c-security-group { stroke: color-mix(in srgb, var(--security-stroke) 58%, var(--lane-stroke)); }
22 ${solid} .c-security-group { stroke-dasharray: 4 3; }
23 ${solid} .c-lane { stroke: var(--lane-stroke); stroke-dasharray: none; }
24 ${all} ${frameLabel} { rx: 5px; fill: color-mix(in srgb, var(--cloud-stroke) 10%, var(--mask)); stroke: color-mix(in srgb, var(--cloud-stroke) 38%, var(--mask)); stroke-width: .8px; }
25 ${all} [data-composition-frame-kind="security-group"] > ${frameLabel} { fill: color-mix(in srgb, var(--security-stroke) 9%, var(--mask)); stroke: color-mix(in srgb, var(--security-stroke) 36%, var(--mask)); }
26 ${all} .phase-rule { opacity: .5; stroke-dasharray: none; }
27 ${all} .phase-chip { stroke: var(--lane-stroke); stroke-width: .75px; }
28 ${all} ${edgeLabel} { rx: 7px; stroke: var(--lane-stroke); stroke-width: .75px; }
29 ${blueprint} :is(${frameLabel}, ${edgeLabel}, .phase-chip) { rx: 2px; }
30 ${editorial} :is(${frameLabel}, ${edgeLabel}, .phase-chip) { rx: 3px; }
31 </style>`;
32}