@likec4/styles 1.45.0 → 1.46.1

package/dist/preset.mjs

@@ -4744,9 +4744,9 @@ const paletteGlobalVars = {
   "--likec4-palette-stroke": "#2563eb",
   "--likec4-palette-hiContrast": "#eff6ff",
   "--likec4-palette-loContrast": "#bfdbfe",
-  "--likec4-palette-relation-stroke": "#6E6E6E",
-  "--likec4-palette-relation-label": "#C6C6C6",
-  "--likec4-palette-relation-label-bg": "#18191b"
+  "--likec4-palette-relation-stroke": "#8D8D8D",
+  "--likec4-palette-relation-label": "#C9C9C9",
+  "--likec4-palette-relation-label-bg": "#18191B"
 };
 const mantine = {
   colors: {
@@ -4754,6 +4754,7 @@ const mantine = {
     black: "var(--mantine-color-black)",
     text: "var(--mantine-color-text)",
     body: "var(--mantine-color-body)",
+    anchor: "var(--mantine-color-anchor)",
     defaultBorder: "var(--mantine-color-default-border)",
     dimmed: "var(--mantine-color-dimmed)",
     dark: {
@@ -4902,7 +4903,6 @@ const globalCss = {
         height: "75%"
       },
       "& .react-flow": {
-        contain: "paint layout",
         "--xy-background-color": "var(--colors-likec4-background)",
         "--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
         "&:is(.not-initialized)": {
@@ -4920,6 +4920,16 @@ const globalCss = {
         },
         "& .react-flow__node.draggable:has(.likec4-compound-node)": {
           cursor: "default"
+        },
+        "& .likec4-node-handle-center": {
+          top: "50%!",
+          left: "50%!",
+          right: "unset!",
+          bottom: "unset!",
+          visibility: "hidden!",
+          width: "5px!",
+          height: "5px!",
+          transform: "translate(-50%, -50%)!"
         }
       },
       "& :where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed])": {
@@ -4938,8 +4948,8 @@ const globalCss = {
           "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 50%, transparent)"
         },
         _light: {
-          "--xy-edge-label-color": "color-mix(in oklab, var(--likec4-palette-relation-label), rgba(255 255 255 / 0.85) 40%)",
-          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 60%, transparent)"
+          "--xy-edge-label-color": "color-mix(in oklab, var(--likec4-palette-relation-label), #FFF 50%)",
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 65%, transparent)"
         },
         '&:is([data-likec4-hovered="true"], [data-edge-active="true"])': {
           "--xy-edge-stroke-width": 4,
@@ -4966,18 +4976,24 @@ const globalCss = {
           transitionTimingFunction: "cubic-bezier(0.50, 0, 0.2, 1)",
           transitionDuration: "400ms"
         },
-        "& :where(.react-flow__edges, .react-flow__edgelabel-renderer) > :where(svg, .likec4-edge-label-container)": {
+        "& :where(.react-flow__edgelabel-renderer) > *": {
+          mixBlendMode: {
+            _dark: "screen",
+            _light: "hard-light",
+            _print: "normal!"
+          }
+        },
+        "& :where(.react-flow__edges) > svg": {
           mixBlendMode: {
             _dark: "plus-lighter",
-            _light: "screen",
+            _light: "multiply",
             _print: "normal!"
           }
         },
         "&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": {
           mixBlendMode: {
             // _dark: 'plus-lighter',
-            _light: "color-burn",
-            _print: "normal!"
+            _light: "color-burn"
           }
         },
         "& .react-flow__node-seq-parallel": {
@@ -5033,29 +5049,59 @@ const layerStyles = defineLayerStyles({
             boxShadow: "lg",
             borderRadius: "md",
             paddingInline: "2"
-          },
-          _whenPanning: {
-            boxShadow: "none",
-            borderRadius: "0"
           }
         }
       },
       action: {
-        description: "LikeC4 panel action layer",
-        value: {
-          color: {
-            base: "likec4.panel.action",
-            _notDisabled: {
-              _hover: "likec4.panel.action.hover"
+        DEFAULT: {
+          description: "LikeC4 panel action layer",
+          value: {
+            color: {
+              base: "likec4.panel.action",
+              _disabled: "likec4.panel.action.disabled",
+              _notDisabled: {
+                _hover: "likec4.panel.action.hover"
+              }
+            },
+            cursor: {
+              base: "pointer",
+              _disabled: "not-allowed"
+            },
+            paddingInline: "xxs",
+            paddingBlock: "xxs",
+            border: "transparent",
+            borderRadius: "sm",
+            backgroundColor: {
+              _notDisabled: {
+                _hover: "likec4.panel.action.bg.hover"
+              }
             }
-          },
-          cursor: "pointer",
-          border: "transparent",
-          borderRadius: "sm",
-          backgroundColor: {
-            base: "likec4.panel.action.bg",
-            _notDisabled: {
-              _hover: "likec4.panel.action.bg.hover"
+          }
+        },
+        filled: {
+          description: "LikeC4 action panel filled layer",
+          value: {
+            color: {
+              base: "likec4.panel.action",
+              _disabled: "likec4.panel.action.disabled",
+              _notDisabled: {
+                _hover: "likec4.panel.action.hover"
+              }
+            },
+            cursor: {
+              base: "pointer",
+              _disabled: "not-allowed"
+            },
+            paddingInline: "xxs",
+            paddingBlock: "xxs",
+            border: "transparent",
+            borderRadius: "sm",
+            backgroundColor: {
+              base: "likec4.panel.action.bg",
+              _disabled: "likec4.panel.action.bg",
+              _notDisabled: {
+                _hover: "likec4.panel.action.bg.hover"
+              }
             }
           }
         }
@@ -5068,12 +5114,7 @@ const layerStyles = defineLayerStyles({
         backgroundColor: "likec4.dropdown.bg",
         border: "1px solid {colors.likec4.dropdown.border}",
         boxShadow: "lg",
-        borderRadius: "md",
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: "0px",
-          borderColor: "transparent"
-        }
+        borderRadius: "md"
       }
     }
   }
@@ -5199,7 +5240,7 @@ const compoundColor = {
   var: "--_compound-color",
   ref: "var(--_compound-color)"
 };
-const parts$3 = defineParts({
+const parts$4 = defineParts({
   root: { selector: "&" },
   titleContainer: { selector: "& .likec4-compound-title-container" },
   title: { selector: "& .likec4-compound-title" },
@@ -5211,7 +5252,7 @@ const parts$3 = defineParts({
 const iconSize = "20px";
 const compoundNode = defineRecipe({
   className: "likec4-compound-node",
-  base: parts$3({
+  base: parts$4({
     root: {
       position: "relative",
       width: "100%",
@@ -5362,7 +5403,7 @@ const compoundNode = defineRecipe({
   }),
   variants: {
     isTransparent: {
-      false: parts$3({
+      false: parts$4({
         root: {
           boxShadow: {
             _noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
@@ -5373,7 +5414,7 @@ const compoundNode = defineRecipe({
           borderColor: "var(--likec4-palette-stroke)"
         }
       }),
-      true: parts$3({
+      true: parts$4({
         root: {
           backgroundColor: `color-mix(in oklab, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)`,
           borderColor: `color-mix(in oklab, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)`
@@ -5382,7 +5423,7 @@ const compoundNode = defineRecipe({
     },
     // When the compound node is too transparent, the text color should be inverted
     inverseColor: {
-      true: parts$3({
+      true: parts$4({
         root: {
           [compoundColor.var]: {
             base: "var(--likec4-palette-stroke)",
@@ -5405,22 +5446,22 @@ const compoundNode = defineRecipe({
       false: {}
     },
     borderStyle: {
-      solid: parts$3({
+      solid: parts$4({
         root: {
           borderStyle: "solid"
         }
       }),
-      dashed: parts$3({
+      dashed: parts$4({
         root: {
           borderStyle: "dashed"
         }
       }),
-      dotted: parts$3({
+      dotted: parts$4({
         root: {
           borderStyle: "dotted"
         }
       }),
-      none: parts$3({
+      none: parts$4({
         root: {
           // We still need to have a border for consistent internal coordinates
           // So we use a transparent border and extend background
@@ -5482,6 +5523,217 @@ const edgeActionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
+const parts$3 = defineParts({
+  root: { selector: "&" },
+  stepNumber: { selector: "& .likec4-edge-label__step-number" },
+  contents: { selector: "& .likec4-edge-label__contents" },
+  label: { selector: "& .likec4-edge-label__text" },
+  technology: { selector: "& .likec4-edge-label__technology" }
+});
+const edgeLabel = defineRecipe({
+  className: "likec4-edge-label",
+  jsx: [],
+  base: parts$3({
+    root: {
+      fontFamily: "likec4.relation",
+      paddingBlock: "1",
+      paddingInline: "1.5",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "max-content",
+      maxWidth: "100%",
+      gap: "0.5",
+      color: "var(--xy-edge-label-color)",
+      background: "var(--xy-edge-label-background-color)",
+      border: "0px solid transparent",
+      borderRadius: "4px"
+    },
+    stepNumber: {
+      alignSelf: "stretch",
+      flex: "0 0 auto",
+      fontWeight: 600,
+      fontSize: "14px",
+      padding: "1",
+      textAlign: "center",
+      minWidth: "22px",
+      borderTopLeftRadius: "4px",
+      borderBottomLeftRadius: "4px",
+      _only: {
+        borderRadius: "4px",
+        minWidth: "24px"
+      },
+      background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
+      fontVariantNumeric: "tabular-nums",
+      // _dark: {
+      [':where([data-likec4-color="gray"]) &']: {
+        _dark: {
+          background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
+        }
+      }
+    },
+    contents: {
+      display: "contents",
+      _empty: {
+        display: "none !important"
+      }
+    },
+    label: {
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "14px",
+      lineHeight: "1.2",
+      margin: "0"
+    },
+    technology: {
+      textAlign: "center",
+      whiteSpaceCollapse: "preserve-breaks",
+      fontSize: "11px",
+      lineHeight: "1",
+      opacity: 0.75
+    }
+  }),
+  variants: {
+    pointerEvents: {
+      none: parts$3({
+        root: {
+          pointerEvents: "none"
+        }
+      }),
+      all: parts$3({
+        root: {
+          pointerEvents: "all"
+        }
+      })
+    },
+    cursor: {
+      pointer: parts$3({
+        root: {
+          cursor: "pointer"
+        }
+      }),
+      default: parts$3({
+        root: {
+          cursor: "default"
+        }
+      })
+    },
+    isStepEdge: {
+      false: {},
+      true: parts$3({
+        root: {
+          flexDirection: "row",
+          gap: "1",
+          padding: "0"
+        },
+        contents: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          paddingTop: "0.5",
+          paddingRight: "1",
+          paddingBottom: "1",
+          gap: "0.5"
+        },
+        label: {
+          py: "0.5",
+          paddingRight: "0.5"
+        }
+      })
+    }
+  },
+  defaultVariants: {
+    pointerEvents: "all",
+    isStepEdge: false,
+    cursor: "default"
+  },
+  staticCss: [{
+    conditions: ["*"],
+    isStepEdge: ["*"],
+    cursor: ["*"],
+    pointerEvents: ["*"]
+  }]
+});
+const edgePath = defineSlotRecipe({
+  description: "Recipe for Edge Path",
+  slots: ["path", "pathBg", "markersCtx", "middlePoint"],
+  className: "likec4-edge",
+  jsx: [],
+  base: {
+    path: {
+      fill: "none",
+      strokeDashoffset: 0,
+      _noReduceGraphics: {
+        animationStyle: "xyedgeAnimated",
+        animationPlayState: "paused",
+        transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"
+      },
+      [`:where([data-edge-dir='back']) &`]: {
+        animationDirection: "reverse"
+      },
+      _whenHovered: {
+        _noReduceGraphics: {
+          animationPlayState: "running",
+          animationDelay: "450ms"
+        }
+      },
+      [`:where(.selected, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+        _noReduceGraphics: {
+          animationPlayState: "running",
+          animationDelay: "0ms"
+        }
+      },
+      _whenDimmed: {
+        animationPlayState: "paused"
+      },
+      _smallZoom: {
+        animationName: "none"
+      },
+      _whenPanning: {
+        strokeDasharray: "none !important",
+        animationPlayState: "paused"
+      }
+    },
+    pathBg: {
+      pointerEvents: "none",
+      fill: "none",
+      strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
+      strokeOpacity: 0.08,
+      _noReduceGraphics: {
+        transitionProperty: "stroke-width, stroke-opacity",
+        transitionDuration: "fast",
+        transitionTimingFunction: "inOut"
+      },
+      _whenHovered: {
+        transitionTimingFunction: "out",
+        strokeWidth: "calc(var(--xy-edge-stroke-width) + 4)",
+        strokeOpacity: 0.2
+      },
+      _whenSelected: {
+        strokeWidth: "calc(var(--xy-edge-stroke-width) + 6)",
+        strokeOpacity: 0.25,
+        _whenHovered: {
+          strokeOpacity: 0.4
+        }
+      }
+    },
+    // To fix issue with marker not inheriting color from path - we need to create container
+    markersCtx: {
+      fill: "[var(--xy-edge-stroke)]",
+      stroke: "[var(--xy-edge-stroke)]"
+    },
+    middlePoint: {
+      visibility: "hidden",
+      offsetDistance: "50%",
+      cx: 0,
+      cy: 0,
+      r: 4,
+      pointerEvents: "none"
+    }
+  },
+  staticCss: [{
+    conditions: ["*"]
+  }]
+});
 const parts$2 = defineParts({
   root: { selector: "&" },
   icon: { selector: "& [data-likec4-icon]" },
@@ -5631,6 +5883,9 @@ const elementNodeData = defineRecipe({
       },
       "& a": {
         pointerEvents: "all"
+      },
+      "& .markdown-alert": {
+        mixBlendMode: "screen"
       }
     },
     technology: {
@@ -5910,6 +6165,32 @@ const markdownBlock = defineRecipe({
       base: mantine.colors.black,
       _dark: mantine.colors.white
     },
+    _dark: {
+      "--color-border-default": "#30363d",
+      "--color-accent-fg": "#58a6ff",
+      "--color-accent-emphasis": "#1f6feb",
+      "--color-danger-fg": "#f85149",
+      "--color-danger-emphasis": "#da3633",
+      "--color-attention-fg": "#d29922",
+      "--color-attention-emphasis": "#9e6a03",
+      "--color-done-fg": "#a371f7",
+      "--color-done-emphasis": "#8957e5",
+      "--color-success-fg": "#3fb950",
+      "--color-success-emphasis": "#238636"
+    },
+    _light: {
+      "--color-border-default": "#d0d7de",
+      "--color-accent-fg": "#0969da",
+      "--color-accent-emphasis": "#0969da",
+      "--color-danger-fg": "#d1242f",
+      "--color-danger-emphasis": "#cf222e",
+      "--color-attention-fg": "#9a6700",
+      "--color-attention-emphasis": "#9a6700",
+      "--color-done-fg": "#8250df",
+      "--color-done-emphasis": "#8250df",
+      "--color-success-fg": "#1a7f37",
+      "--color-success-emphasis": "#1f883d"
+    },
     fontSize: "var(--text-fz-md)",
     lineHeight: "var(--mantine-line-height)",
     "& :first-child": {
@@ -5974,12 +6255,12 @@ const markdownBlock = defineRecipe({
       color: "inherit",
       _dark: {
         backgroundColor: mantine.colors.yellow[5],
-        color: "var(--mantine-color-black)"
+        color: mantine.colors.black
       }
     },
     "& :where(a)": {
       fontSize: "var(--text-fz-md)",
-      color: "var(--mantine-color-anchor)",
+      color: mantine.colors.anchor,
       textDecoration: "none",
       fontWeight: "500",
       _hover: {
@@ -6083,6 +6364,74 @@ const markdownBlock = defineRecipe({
       "&:not(:first-child)": {
         marginTop: "var(--typography-spacing)"
       }
+    },
+    "& .markdown-alert": {
+      borderLeft: ".25em solid var(--borderColor-default, var(--color-border-default))",
+      color: "inherit",
+      marginBottom: "calc(var(--typography-spacing) * 1.5)",
+      paddingLeft: "1em",
+      paddingRight: ".5em",
+      "&:last-child": {
+        marginBottom: "0!important"
+      },
+      "& .markdown-alert-title": {
+        alignItems: "center",
+        display: "flex",
+        fontSize: "var(--text-fz-md)",
+        fontWeight: "500",
+        lineHeight: "1.5",
+        marginBottom: "0.1em",
+        gap: "2"
+      },
+      "& .markdown-alert-title svg": {
+        height: "var(--text-fz-md)",
+        fill: "currentColor"
+      },
+      "&.markdown-alert-note": {
+        borderLeftColor: "var(--borderColor-accent-emphasis,var(--color-accent-emphasis))"
+      },
+      "&.markdown-alert-note .markdown-alert-title": {
+        color: [
+          "var(--color-accent-fg)",
+          "var(--fgColor-accent,var(--color-accent-fg))"
+        ]
+      },
+      "&.markdown-alert-tip": {
+        borderLeftColor: "var(--borderColor-success-emphasis,var(--color-success-emphasis))"
+      },
+      "&.markdown-alert-tip .markdown-alert-title": {
+        color: [
+          "var(--color-success-fg)",
+          "var(--fgColor-success,var(--color-success-fg))"
+        ]
+      },
+      "&.markdown-alert-important": {
+        borderLeftColor: "var(--borderColor-done-emphasis,var(--color-done-emphasis))"
+      },
+      "&.markdown-alert-important .markdown-alert-title": {
+        color: [
+          "var(--color-done-fg)",
+          "var(--fgColor-done,var(--color-done-fg))"
+        ]
+      },
+      "&.markdown-alert-warning": {
+        borderLeftColor: "var(--borderColor-attention-emphasis,var(--color-attention-emphasis))"
+      },
+      "&.markdown-alert-warning .markdown-alert-title": {
+        color: [
+          "var(--color-attention-fg)",
+          "var(--fgColor-attention,var(--color-attention-fg))"
+        ]
+      },
+      "&.markdown-alert-caution": {
+        borderLeftColor: "var(--borderColor-danger-emphasis,var(--color-danger-emphasis))"
+      },
+      "&.markdown-alert-caution .markdown-alert-title": {
+        color: [
+          "var(--color-danger-fg)",
+          "var(--fgColor-danger,var(--color-danger-fg))"
+        ]
+      }
     }
   },
   variants: {
@@ -6320,6 +6669,8 @@ const recipes = {
   actionBtn,
   compoundNode,
   edgeActionBtn,
+  edgeLabel,
+  edgePath,
   elementNodeData,
   elementShapeRecipe,
   likec4tag,
@@ -6332,6 +6683,16 @@ function mixTransparent(color, percentage = 50) {
 }
 const semanticTokens = defineSemanticTokens({
   colors: {
+    text: {
+      DEFAULT: {
+        description: "Default text color",
+        value: mantine.colors.text
+      },
+      dimmed: {
+        description: "Dimmed text color",
+        value: mantine.colors.dimmed
+      }
+    },
     likec4: {
       background: {
         DEFAULT: {
@@ -6379,7 +6740,7 @@ const semanticTokens = defineSemanticTokens({
           description: "LikeC4 panel border color",
           value: {
             base: "transparent",
-            _light: mixTransparent(mantine.colors.defaultBorder, 30)
+            _light: mantine.colors.gray[2]
           }
         },
         text: {
@@ -6500,7 +6861,7 @@ const semanticTokens = defineSemanticTokens({
           outline: {
             value: {
               _light: mantine.colors.orange[8],
-              _dark: mantine.colors.orange[6]
+              _dark: mixTransparent(mantine.colors.orange[6], 80)
             }
           }
         },
@@ -6512,129 +6873,6 @@ const semanticTokens = defineSemanticTokens({
     }
   }
 });
-const edgeLabel = defineSlotRecipe({
-  className: "likec4-edge-label",
-  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
-  base: {
-    root: {
-      fontFamily: "likec4.relation",
-      paddingBlock: "1",
-      paddingInline: "1.5",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "max-content",
-      lineHeight: "[1.2]",
-      maxWidth: "100%",
-      gap: "0.5",
-      color: "var(--xy-edge-label-color)",
-      background: "var(--xy-edge-label-background-color)",
-      border: "0px solid transparent",
-      borderRadius: "4px"
-    },
-    stepNumber: {
-      alignSelf: "stretch",
-      flex: "0 0 auto",
-      fontWeight: 600,
-      fontSize: "14px",
-      padding: "1",
-      textAlign: "center",
-      minWidth: "22px",
-      borderTopLeftRadius: "4px",
-      borderBottomLeftRadius: "4px",
-      _only: {
-        borderRadius: "4px",
-        minWidth: "24px"
-      },
-      background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
-      fontVariantNumeric: "tabular-nums",
-      // _dark: {
-      [':where([data-likec4-color="gray"]) &']: {
-        _dark: {
-          background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
-        }
-      }
-    },
-    labelContents: {
-      display: "contents",
-      _empty: {
-        display: "none !important"
-      }
-    },
-    labelText: {
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "14px",
-      margin: "0"
-    },
-    labelTechnology: {
-      textAlign: "center",
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "11px",
-      lineHeight: "[1]",
-      opacity: 0.75
-    }
-  },
-  variants: {
-    pointerEvents: {
-      none: {
-        root: {
-          pointerEvents: "none"
-        }
-      },
-      all: {
-        root: {
-          pointerEvents: "all"
-        }
-      }
-    },
-    cursor: {
-      pointer: {
-        root: {
-          cursor: "pointer"
-        }
-      },
-      default: {
-        root: {
-          cursor: "default"
-        }
-      }
-    },
-    isStepEdge: {
-      false: {},
-      true: {
-        root: {
-          flexDirection: "row",
-          gap: "1",
-          padding: "0"
-        },
-        labelContents: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          paddingTop: "0.5",
-          paddingRight: "1",
-          paddingBottom: "1",
-          gap: "0.5"
-        },
-        labelText: {
-          py: "0.5",
-          paddingRight: "0.5"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    pointerEvents: "all",
-    isStepEdge: false,
-    cursor: "default"
-  },
-  staticCss: [{
-    conditions: ["*"],
-    isStepEdge: ["*"],
-    cursor: ["*"],
-    pointerEvents: ["*"]
-  }]
-});
 const navigationLink = defineSlotRecipe({
   className: "likec4-navlink",
   description: "Navigation Link (classes for Mantine NavLink)",
@@ -6702,10 +6940,32 @@ const navigationLink = defineSlotRecipe({
 });
 const slotRecipes = {
   __proto__: null,
-  edgeLabel,
   navigationLink
 };
 const textStyles = defineTextStyles({
+  dimmed: {
+    xxs: {
+      value: {
+        fontSize: "0.625rem",
+        lineHeight: "1rem",
+        color: "text.dimmed"
+      }
+    },
+    xs: {
+      value: {
+        fontSize: "0.75rem",
+        lineHeight: "1rem",
+        color: "text.dimmed"
+      }
+    },
+    sm: {
+      value: {
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
+        color: "text.dimmed"
+      }
+    }
+  },
   xxs: {
     value: {
       fontSize: "0.625rem",