@likec4/diagram 1.0.1 → 1.1.0

package/dist/ui/index.d.ts

@@ -1,2 +1 @@
-export { KeepAspectRatio } from './KeepAspectRatio';
 export { default as OptionsPanel } from './OptionsPanel';

package/dist/xyflow/{XYFlowWrapper.d.ts → XYFlow.d.ts}

@@ -3,12 +3,12 @@ import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
 import { SetNonNullable, Simplify } from 'type-fest';
 import { CSSProperties, PropsWithChildren } from 'react';
 
-type OnlyExpectedProps = Required<Pick<LikeC4DiagramProperties, 'className' | 'controls' | 'pannable' | 'zoomable' | 'background'>>;
+type OnlyExpectedProps = Required<Pick<LikeC4DiagramProperties, 'className' | 'controls' | 'background'>>;
 type XYFlowWrapperProps = Simplify<PropsWithChildren<SetNonNullable<OnlyExpectedProps> & {
     defaultNodes: XYFlowNode[];
     defaultEdges: XYFlowEdge[];
     style?: CSSProperties | undefined;
 }>>;
-declare function XYFlowWrapper({ className, children, defaultNodes, defaultEdges, pannable, zoomable, controls, background, style }: XYFlowWrapperProps): JSX.Element;
+declare function XYFlowWrapper({ className, children, defaultNodes, defaultEdges, controls, background, style }: XYFlowWrapperProps): JSX.Element;
 export declare const XYFlow: typeof XYFlowWrapper;
 export {};

package/dist/xyflow/XYFlowEvents.d.ts

@@ -1,15 +1,129 @@
-import { XYFlowEdge, XYFlowNode } from './types';
-import { MouseEvent as ReactMouseEvent } from 'react';
-import { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react';
+import { XYFlowNode } from './types';
 
-type XYFlowEventHandlers = {
-    onPaneClick: (event: ReactMouseEvent) => void;
-    onNodeContextMenu: NodeMouseHandler<XYFlowNode>;
-    onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>;
-    onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void;
-    onNodeClick: NodeMouseHandler<XYFlowNode>;
-    onEdgeClick: EdgeMouseHandler<XYFlowEdge>;
-    onMoveEnd: OnMoveEnd;
+export declare function useXYFlowEvents(): {
+    onDoubleClick: import('react').MouseEventHandler<HTMLDivElement> | undefined;
+    onNodeClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
+    onNodeContextMenu: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
+    onEdgeClick: (event: import('react').MouseEvent<Element, MouseEvent>, edge: {
+        source: string;
+        target: string;
+        style?: import('react').CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import('react').CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import('react').CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import('@xyflow/react').EdgeUpdatable;
+        data: import('./types').RelationshipData;
+        type: "relationship";
+    }) => void;
+    onEdgeContextMenu: import('@xyflow/react').EdgeMouseHandler<{
+        source: string;
+        target: string;
+        style?: import("react").CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import("@xyflow/react").EdgeMarkerType;
+        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import("react").CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import("react").CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import("@xyflow/react").EdgeUpdatable;
+        data: import("./types").RelationshipData;
+        type: "relationship";
+    }>;
+    onMoveEnd: import('@xyflow/react').OnMove;
+    onNodeDoubleClick: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
+    onNodeMouseEnter: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
+    onNodeMouseLeave: import('@xyflow/react').NodeMouseHandler<XYFlowNode>;
+    onEdgeMouseEnter: import('@xyflow/react').EdgeMouseHandler<{
+        source: string;
+        target: string;
+        style?: import("react").CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import("@xyflow/react").EdgeMarkerType;
+        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import("react").CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import("react").CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import("@xyflow/react").EdgeUpdatable;
+        data: import("./types").RelationshipData;
+        type: "relationship";
+    }>;
+    onEdgeMouseLeave: import('@xyflow/react').EdgeMouseHandler<{
+        source: string;
+        target: string;
+        style?: import("react").CSSProperties;
+        id: string;
+        zIndex?: number;
+        markerEnd?: import("@xyflow/react").EdgeMarkerType;
+        markerStart?: import("@xyflow/react").EdgeMarkerType;
+        hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        ariaLabel?: string;
+        focusable?: boolean;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        interactionWidth?: number;
+        labelStyle?: import("react").CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: import("react").CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        updatable?: import("@xyflow/react").EdgeUpdatable;
+        data: import("./types").RelationshipData;
+        type: "relationship";
+    }>;
+    onPaneClick: (event: import('react').MouseEvent<Element, MouseEvent>) => void;
+    onPaneContextMenu: (event: MouseEvent | import('react').MouseEvent<Element, MouseEvent>) => void;
 };
-export declare function useXYFlowEvents(): XYFlowEventHandlers;
-export {};

package/dist/xyflow/edges/RelationshipEdge.d.ts

@@ -10,13 +10,13 @@ export declare const RelationshipEdge: import('react').NamedExoticComponent<Edge
     markerEnd?: import("@xyflow/react").EdgeMarkerType;
     markerStart?: import("@xyflow/react").EdgeMarkerType;
     hidden?: boolean;
+    className?: string;
+    label?: import("react").ReactNode;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     ariaLabel?: string;
-    className?: string;
     focusable?: boolean;
-    label?: import("react").ReactNode;
     sourceHandle?: string | null;
     targetHandle?: string | null;
     animated?: boolean;

package/dist/xyflow/hooks/useXYFlow.d.ts

@@ -9,13 +9,13 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     markerEnd?: import("@xyflow/react").EdgeMarkerType;
     markerStart?: import("@xyflow/react").EdgeMarkerType;
     hidden?: boolean;
+    className?: string;
+    label?: import("react").ReactNode;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     ariaLabel?: string;
-    className?: string;
     focusable?: boolean;
-    label?: import("react").ReactNode;
     sourceHandle?: string | null;
     targetHandle?: string | null;
     animated?: boolean;
@@ -30,8 +30,8 @@ export declare const useXYFlow: () => import('@xyflow/react').ReactFlowInstance<
     type: "relationship";
 }>;
 export declare const useXYNodesData: {
-    (nodeId: string): Pick<XYFlowNode, "id" | "type" | "data"> | null;
-    (nodeIds: string[]): Pick<XYFlowNode, "id" | "type" | "data">[];
+    (nodeId: string): Pick<XYFlowNode, "id" | "data" | "type"> | null;
+    (nodeIds: string[]): Pick<XYFlowNode, "id" | "data" | "type">[];
 };
 export declare function useXYStore<StateSlice = unknown>(selector: (state: XYFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
@@ -44,13 +44,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -73,13 +73,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -101,13 +101,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -129,13 +129,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -157,13 +157,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -185,13 +185,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -214,13 +214,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
@@ -242,13 +242,13 @@ export declare const useXYStoreApi: () => {
         markerEnd?: import("@xyflow/react").EdgeMarkerType;
         markerStart?: import("@xyflow/react").EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import("react").ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import("react").ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;

package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts

@@ -1,5 +1,7 @@
-export declare const cssContainer: string;
-export declare const cssCompound: string;
-export declare const cssTitle: string;
-export declare const cssIndicator: string;
-export declare const cssNavigateBtn: string;
+export declare const container: string;
+export declare const varTransparency: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const compoundBody: string;
+export declare const transparent: string;
+export declare const title: string;
+export declare const indicator: string;
+export declare const navigateBtn: string;

package/dist/xyflow/types.d.ts

@@ -48,13 +48,13 @@ export declare namespace XYFlowEdge {
         markerEnd?: import('@xyflow/react').EdgeMarkerType;
         markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
+        className?: string;
+        label?: import('react').ReactNode;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         ariaLabel?: string;
-        className?: string;
         focusable?: boolean;
-        label?: import('react').ReactNode;
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -50,25 +50,25 @@
     "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.0.1",
+    "@likec4/core": "1.1.0",
     "@react-hookz/web": "^24.0.4",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.2",
     "remeda": "^1.61.0",
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
+    "@mantine/core": "^7.9.2",
+    "@mantine/hooks": "^7.9.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@lume/kiwi": "^0.4.3",
-    "@mantine/core": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
-    "@mantine/vanilla-extract": "^7.9.0",
+    "@mantine/core": "^7.9.2",
+    "@mantine/hooks": "^7.9.2",
+    "@mantine/vanilla-extract": "^7.9.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.4",
@@ -78,7 +78,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@xyflow/react": "^12.0.0-next",
     "clsx": "^2.1.1",
-    "execa": "^8.0.1",
+    "execa": "^9.1.0",
     "khroma": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/{ui/KeepAspectRatio.tsx → KeepAspectRatioContainer.tsx}

@@ -1,15 +1,16 @@
 import { Box } from '@mantine/core'
 import clsx from 'clsx'
-import type { HTMLAttributes } from 'react'
-import { wrapper } from './KeepAspectRatio.css'
+import { type HTMLAttributes, useId } from 'react'
+import * as css from './LikeC4Diagram.css'
 
-type KeepAspectRatioProps = HTMLAttributes<HTMLDivElement> & {
+type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
+  // Whether to keep the aspect ratio
   enabled: boolean
   width: number
   height: number
 }
 
-export function KeepAspectRatio({
+export function KeepAspectRatioContainer({
   children,
   width,
   height,
@@ -17,11 +18,11 @@ export function KeepAspectRatio({
   className,
   style,
   ...rest
-}: KeepAspectRatioProps) {
+}: KeepAspectRatioContainerProps) {
   return (
     <Box
       {...rest}
-      className={clsx(wrapper, className)}
+      className={clsx(css.keepAspectRatioContainer, className)}
       style={enabled
         ? {
           ...style,

package/src/LikeC4Diagram.css.ts

@@ -1,6 +1,12 @@
 import { globalStyle, style } from '@vanilla-extract/css'
 import { vars, xyvars } from './theme.css'
 
+export const keepAspectRatioContainer = style({
+  width: '100%',
+  height: '100%',
+  padding: 0
+})
+
 export const cssReactFlow = style({})
 
 globalStyle(`.react-flow${cssReactFlow}`, {

package/src/LikeC4Diagram.tsx

@@ -2,18 +2,18 @@ import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { useRef } from 'react'
 import { rootClassName } from './globals.css'
+import { KeepAspectRatioContainer } from './KeepAspectRatioContainer'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
-import { KeepAspectRatio } from './ui/KeepAspectRatio'
 import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
 import type { XYFlowData } from './xyflow/types'
-import { XYFlow } from './xyflow/XYFlowWrapper'
+import { XYFlow } from './xyflow/XYFlow'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -69,6 +69,8 @@ export function LikeC4Diagram({
         <DiagramContextProvider
           view={view}
           readonly={readonly}
+          pannable={pannable}
+          zoomable={zoomable}
           fitViewEnabled={fitView}
           fitViewPadding={fitViewPadding}
           showElementLinks={showElementLinks}
@@ -84,7 +86,7 @@ export function LikeC4Diagram({
           onNavigateTo={onNavigateTo}
           onCanvasDblClick={onCanvasDblClick}
         >
-          <KeepAspectRatio
+          <KeepAspectRatioContainer
             className={clsx(rootClassName, className)}
             enabled={keepAspectRatio}
             width={view.width}
@@ -102,12 +104,10 @@ export function LikeC4Diagram({
               controls={controls}
               defaultNodes={initialRef.current.defaultNodes}
               defaultEdges={initialRef.current.defaultEdges}
-              pannable={pannable}
-              zoomable={zoomable}
             >
               {readonly !== true && <OptionsPanel />}
             </XYFlow>
-          </KeepAspectRatio>
+          </KeepAspectRatioContainer>
           <WhenInitialized>
             <SyncWithDiagram />
             <FitViewOnDiagramChange />

package/src/globals.css.ts

@@ -1,7 +1,7 @@
-import type { ThemeColor } from '@likec4/core'
 import { defaultTheme } from '@likec4/core'
 import { createGlobalTheme } from '@vanilla-extract/css'
-import { omit } from 'remeda'
+import { scale, toHex } from 'khroma'
+import { keys, omit } from 'remeda'
 import { mantine } from './mantine.css'
 import { vars } from './theme.css'
 
@@ -75,38 +75,7 @@ createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}
   }
 })
 
-// globalStyle(`${scope} *, ${scope} *::before, ${scope} *::after`, {
-//   boxSizing: 'border-box',
-//   outline: 'none',
-//   borderWidth: 0,
-//   borderStyle: 'solid',
-//   borderColor: 'transparent',
-// })
-
-// createGlobalTheme(':where(.likec4-diagram-root)', {
-//   ...omit(vars, ['optionsPanel', 'defaults']),
-// }, {
-//   likec4: {
-//     font: `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
-//     backgroundColor: mantine.colors.body
-//   },
-//   compound: {
-//     font: vars.likec4.font,
-//     titleColor: vars.element.loContrast
-//   },
-//   element: {
-//     font: vars.likec4.font,
-//     ...defaultTheme.elements.primary
-//   },
-//   relation: {
-//     ...defaultTheme.relationships.slate
-//   }
-// })
-
-for (const color of Object.keys(defaultTheme.elements)) {
-  if (!(color in defaultTheme.elements) || !(color in defaultTheme.relationships)) {
-    continue
-  }
+for (const color of keys.strict(defaultTheme.elements)) {
   createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
     element: {
       fill: vars.element.fill,
@@ -119,10 +88,46 @@ for (const color of Object.keys(defaultTheme.elements)) {
     },
     relation: vars.relation
   }, {
-    element: defaultTheme.elements[color as ThemeColor],
+    element: defaultTheme.elements[color],
     compound: {
-      titleColor: defaultTheme.elements[color as ThemeColor].loContrast
+      titleColor: defaultTheme.elements[color].loContrast
     },
-    relation: defaultTheme.relationships[color as ThemeColor]
+    relation: defaultTheme.relationships[color]
   })
+
+  const compoundDarkColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -22 - 5 * depth,
+        s: -10 - 6 * depth
+      })
+    )
+  const compoundLightColor = (color: string, depth: number) =>
+    toHex(
+      scale(color, {
+        l: -20 - 3 * depth,
+        s: -3 - 6 * depth
+      })
+    )
+
+  const compounds = {
+    fill: vars.element.fill,
+    stroke: vars.element.stroke
+  }
+
+  for (let depth = 1; depth <= 6; depth++) {
+    createGlobalTheme(`:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`, compounds, {
+      fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
+      stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth)
+    })
+
+    createGlobalTheme(
+      `:where([data-mantine-color-scheme='light']) :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth)
+      }
+    )
+  }
 }