@likec4/diagram 1.23.1 → 1.24.1

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,7 +1,7 @@
-import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { easings, mantine, vars, whereLight } from '../../../theme-vars'
+import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
+import { easings, vars, whereLight } from '../../../theme-vars'
 
 export const varCompoundOpacity = createVar('opacity')
 export const varBorderRadius = createVar('borderRadius')
@@ -10,75 +10,55 @@ export const varBorderColor = createVar('border-color')
 const varBorderWidth = createVar('border-width')
 
 export const container = style({
+  vars: {
+    [varBorderRadius]: '6px',
+    [varBorderWidth]: '3px',
+  },
   position: 'relative',
   width: '100%',
   height: '100%',
   padding: 0,
   margin: 0,
   border: '0px solid transparent',
-  vars: {
-    [varBorderRadius]: '6px',
-    [varBorderWidth]: '3px',
-  },
-})
-
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
-  opacity: 0.25,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
-  opacity: 0.25,
-  transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
-const outlineColor = fallbackVar(
-  mantine.colors.primaryColors.outline,
-  mantine.colors.primaryColors.filled,
-  vars.element.stroke,
-)
-
-export const compoundBg = style({
-  borderRadius: varBorderRadius,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  padding: 0,
-  margin: 0,
-  transition: `all 250ms ${easings.inOut}`,
-  // backgroundClip: 'padding-box',
-  // overflow: 'hidden',
-  cursor: 'default',
+  ':before': {
+    borderRadius: varBorderRadius,
+    content: ' ',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    border: '0px solid transparent',
+    background: vars.element.fill,
+    backgroundClip: 'padding-box',
+  },
   selectors: {
-    [`:where(.react-flow__node.dragging) &`]: {
+    [`&:is([data-compound-transparent="true"])`]: {
       boxShadow: 'none',
     },
-    ':where(.react-flow__node:focus-visible) &': {
-      transitionDuration: '0ms',
-      outline: `3px solid ${outlineColor}`,
-      outlineOffset: rem(1.5),
-    },
-    [`:where([data-compound-transparent="true"]) &`]: {
+    [`&:is([data-compound-transparent="true"]):before`]: {
       opacity: varCompoundOpacity,
       borderWidth: calc(varBorderWidth).subtract('1px').toString(),
     },
-    [`:where([data-compound-transparent="true"]:is([data-hovered="true"])) &`]: {
-      transitionDelay: '0.15s',
-      transitionDuration: '0.4s',
+    [`${whereNotReducedGraphics} &:is([data-compound-transparent="true"]):before`]: {
+      transition: `all 200ms ${easings.inOut}`,
+    },
+    [`:where(.react-flow__node.dragging) &`]: {
+      boxShadow: 'none',
+    },
+    [`&:is([data-likec4-dimmed="true"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+      transitionDelay: '200ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+    [`&:is([data-likec4-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
     },
   },
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  border: '0px solid transparent',
-  background: vars.element.fill,
-  backgroundClip: 'padding-box',
 })
 
 globalStyle(`:where([data-mantine-color-scheme='dark'] [data-compound-transparent="true"])`, {
@@ -157,11 +137,13 @@ export const indicator = style({
 
 globalStyle(`${indicator} rect`, {
   stroke: indicatorStroke,
-  transformOrigin: 'center center',
   strokeWidth: indicatorStrokeWidth,
+  fill: 'none',
+})
+globalStyle(`${whereNotReducedGraphics}  ${indicator} rect`, {
+  transformOrigin: 'center center',
   animationDuration: '800ms',
-  animationName: indicatorKeyframes,
   animationIterationCount: 'infinite',
   animationDirection: 'alternate',
-  fill: 'none',
+  animationName: indicatorKeyframes,
 })

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -1,10 +1,11 @@
 import type { DiagramNode } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
+import { useDebouncedValue } from '@mantine/hooks'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
 import { clamp, isNumber } from 'remeda'
+import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as css from './CompoundNodeContainer.css'
 
@@ -22,32 +23,49 @@ type CompoundNodeContainerProps =
     nodeProps: NodeProps<RequiredData>
   }>
 
+function getVarName(variable: string): string {
+  var matches = variable.match(/^var\((.*)\)$/)
+  if (matches) {
+    return matches[1]!
+  }
+  return variable
+}
+
+const opacityVar = getVarName(css.varCompoundOpacity)
+const borderTransparencyVar = getVarName(css.varBorderTransparency)
+
 export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundNodeContainerProps>(
   forwardRef<HTMLDivElement, CompoundNodeContainerProps>(({
     nodeProps: {
+      selected: isSelected = false,
       data: {
         hovered: isHovered = false,
         dimmed: isDimmed = false,
-        style,
         ...data
       },
     },
     children,
+    style,
     ...rest
   }, ref) => {
-    const isTransparent = isNumber(style.opacity) && style.opacity < 100
-    let opacity = clamp((style.opacity ?? 100) / 100, {
+    const isReducedGraphics = useIsReducedGraphics()
+    const isTransparent = isNumber(data.style.opacity) && data.style.opacity < 100
+    let _opacity = clamp((data.style.opacity ?? 100) / 100, {
       min: 0,
       max: 1,
     })
-    if (isTransparent && isHovered) {
-      opacity = Math.min(opacity + 0.11, 1)
+    if (isTransparent && isHovered && !isReducedGraphics) {
+      _opacity = Math.min(_opacity + 0.11, 1)
     }
+
+    const [opacity] = useDebouncedValue(Math.round(_opacity * 100) / 100, isHovered ? 200 : 50)
+
     const MAX_TRANSPARENCY = 40
     const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
       min: 0,
       max: MAX_TRANSPARENCY,
     })
+
     return (
       <Box
         ref={ref}
@@ -63,30 +81,32 @@ export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundN
         data-compound-transparent={isTransparent}
         data-likec4-dimmed={isDimmed}
         data-likec4-shape={data.shape}
-        style={assignInlineVars({
-          [css.varCompoundOpacity]: opacity.toFixed(2),
-          [css.varBorderTransparency]: `${borderTransparency}%`,
-        })}
+        style={{
+          ...style,
+          [opacityVar]: opacity,
+          [borderTransparencyVar]: `${borderTransparency}%`,
+        }}
         {...rest}
       >
-        <svg className={css.indicator}>
-          <rect
-            x={0}
-            y={0}
-            width={'100%'}
-            height={'100%'}
-            rx={6}
-          />
-        </svg>
-        <div className={css.compoundBg} />
-        {isTransparent && style.border !== 'none' && (
+        {isTransparent && !isSelected && data.style.border !== 'none' && (
           <div
             className={css.compoundBorder}
             style={{
-              borderStyle: style.border ?? 'dashed',
+              borderStyle: data.style.border ?? 'dashed',
             }}
           />
         )}
+        {isSelected && (
+          <svg className={css.indicator}>
+            <rect
+              x={0}
+              y={0}
+              width={'100%'}
+              height={'100%'}
+              rx={6}
+            />
+          </svg>
+        )}
         {children}
       </Box>
     )

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -1,15 +1,18 @@
 import { rem } from '@mantine/core'
 import { globalStyle, style } from '@vanilla-extract/css'
-import { vars, whereLight } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall, whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
+import { vars } from '../../../theme-vars'
 
-export const compoundTitle = style({
+export const compoundTitle = style([hiddenIfZoomTooSmall, {
+  position: 'absolute',
   display: 'flex',
   alignItems: 'center',
   gap: 6,
-  paddingLeft: 14,
-  paddingTop: 6,
+  left: 14,
+  top: 6,
+  right: 30,
+  width: 'auto',
   minHeight: 30,
-  paddingRight: 2,
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {
       cursor: 'grab',
@@ -18,7 +21,7 @@ export const compoundTitle = style({
       paddingLeft: 30,
     },
   },
-})
+}])
 
 export const title = style({
   flex: 1,
@@ -27,14 +30,12 @@ export const title = style({
   fontSize: rem(15),
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
-  // lineHeight: 1,
-  //
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  // paddingLeft: 0,
-  // paddingTop: 13,
-  // paddingBottom: 6,
-  // minHeight: 20,
-  mixBlendMode: 'screen',
+  selectors: {
+    [`${whereNotReducedGraphics} &`]: {
+      mixBlendMode: 'screen',
+    },
+  },
 })
 
 const iconSize = '20px'

package/src/base/primitives/customNode.ts

@@ -12,8 +12,9 @@ export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
   && eq(prev.zIndex, next.zIndex)
-  && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
-  && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
+  // we can ignore position, as custom nodes positioned relative to it's NodeRenderer
+  // && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
+  // && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
   && eq(prev.data, next.data)
 )
 

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -32,8 +32,7 @@ export function EdgeContainer({
   return (
     <g
       className={clsx(
-        css.edgeVars,
-        isDimmed && css.dimmed,
+        css.edgeContainer,
         className,
       )}
       data-likec4-color={data.color ?? 'gray'}
@@ -41,7 +40,9 @@ export function EdgeContainer({
       data-edge-active={isActive}
       data-edge-animated={isActive}
       data-edge-hovered={isHovered}
-      data-edge-dimmed={isDimmed}>
+      {...isDimmed !== false && {
+        'data-edge-dimmed': isDimmed,
+      }}>
       {children}
     </g>
   )

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -1,9 +1,8 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
 import { easings, mantine, transitions, vars, whereDark, whereLight, xyvars } from '../../../theme-vars'
-import { mixColor } from './edge.css'
-
-export { dimmed, edgeVars } from './edge.css'
+import { edgeVars, mixColor } from './edge.css'
 
 const labelBorderRadius = 4
 export const stepEdgeNumber = style({
@@ -24,6 +23,7 @@ export const stepEdgeNumber = style({
       backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
     },
     [`:where([data-edge-active='true'], [data-edge-hovered="true"]) &`]: {
+      transition: transitions.fast,
       backgroundColor: 'transparent',
     },
   },
@@ -34,7 +34,7 @@ export const varLabelY = createVar('label-y')
 
 export const varTranslate = createVar('translate')
 
-export const edgeLabelContainer = style({
+export const edgeLabelContainer = style([edgeVars, {
   top: 0,
   left: 0,
   position: 'absolute',
@@ -45,7 +45,6 @@ export const edgeLabelContainer = style({
   backgroundColor: xyvars.edge.labelBgColor,
   borderRadius: labelBorderRadius,
   border: '0px solid transparent',
-  mixBlendMode: 'plus-lighter',
   transform: varTranslate,
   transition: transitions.fast,
   vars: {
@@ -54,21 +53,28 @@ export const edgeLabelContainer = style({
   selectors: {
     '&[data-edge-hovered="true"]': {
       mixBlendMode: 'normal',
-      transition: `all 140ms ${easings.inOut}`,
+      transition: `all 190ms ${easings.inOut}`,
       transform: `${varTranslate} scale(1.12)`,
     },
-    '&:is([data-edge-dimmed="true"])': {
-      opacity: 0.3,
+    [`&:is([data-edge-dimmed="true"])`]: {
+      opacity: 0.2,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
       filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-      willChange: 'opacity, filter',
     },
-    [`${whereLight} &`]: {
+    [`&:is([data-edge-dimmed="immediate"])`]: {
+      opacity: 0.1,
+      transition: 'opacity 75ms ease-in-out, filter 100ms ease-in-out',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+    [`${whereNotReducedGraphics} &`]: {
+      mixBlendMode: 'plus-lighter',
+    },
+    [`${whereLight} ${whereNotReducedGraphics} &`]: {
       mixBlendMode: 'screen',
     },
   },
-})
+}])
 
 export const edgeLabel = style({
   fontFamily: vars.likec4.font,

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -49,7 +49,7 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
         technology,
         hovered: isHovered = false,
         active: isActive = false,
-        dimmed = false,
+        dimmed: isDimmed = false,
         labelBBox,
         ...data
       },
@@ -83,16 +83,16 @@ export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
         <Box
           className={clsx(
             'nodrag nopan',
-            css.edgeVars,
             css.edgeLabelContainer,
-            !!dimmed && css.dimmed,
             className,
           )}
           data-likec4-color={data.color ?? 'gray'}
           data-edge-active={isActive}
           data-edge-animated={isActive}
           data-edge-hovered={isHovered}
-          data-edge-dimmed={dimmed}
+          {...isDimmed !== false && {
+            'data-edge-dimmed': isDimmed,
+          }}
           style={{
             top: toCssVarValue(labelY),
             left: toCssVarValue(labelX),

package/src/base/primitives/edge/edge.css.ts

@@ -1,5 +1,10 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { cssReactFlow } from '../../../LikeC4Diagram.css'
+import {
+  hiddenIfReducedGraphics,
+  hiddenIfZoomTooSmall,
+  reactFlow,
+  whereNotReducedGraphics,
+} from '../../../LikeC4Diagram.css'
 import { vars, xyvars } from '../../../theme-vars'
 import { whereDark, whereLight } from '../../../theme-vars.css'
 
@@ -11,19 +16,44 @@ export const edgeVars = style({
     [xyvars.edge.stroke]: vars.relation.lineColor,
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
     [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+    [xyvars.edge.labelBgColor]: vars.relation.labelBgColor,
     [xyvars.edge.strokeWidth]: '3',
   },
-})
-
-globalStyle(`${whereDark} ${edgeVars}`, {
-  vars: {
-    [mixColor]: `white`,
-    [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+  selectors: {
+    [`${whereDark} &`]: {
+      vars: {
+        [mixColor]: `white`,
+        [xyvars.edge.labelColor]: vars.relation.labelColor,
+      },
+    },
+    [`${whereNotReducedGraphics} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+      },
+    },
+    [`${whereDark} ${whereNotReducedGraphics} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+      },
+    },
   },
 })
 
+export const edgeContainer = style([edgeVars, {
+  selectors: {
+    [`&:is([data-edge-dimmed="true"])`]: {
+      opacity: 0.6,
+      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+      transitionDelay: '200ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+    [`&:is([data-edge-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+  },
+}])
 const isSelected = '.react-flow__edge.selected'
 
 globalStyle(`:where(${isSelected}) ${edgeVars}`, {
@@ -47,24 +77,14 @@ globalStyle(`:where(${isSelected}) ${edgeVars}[data-edge-hovered='true']`, {
   },
 })
 
-globalStyle(`${cssReactFlow} .react-flow__edges > svg`, {
+globalStyle(`${reactFlow} .react-flow__edges > svg`, {
   mixBlendMode: 'plus-lighter',
 })
-globalStyle(`${whereLight} ${cssReactFlow} .react-flow__edges > svg`, {
+globalStyle(`${whereLight} ${reactFlow} .react-flow__edges > svg`, {
   mixBlendMode: 'screen',
 })
 
-export const dimmed = style({})
-
-globalStyle(`${cssReactFlow} .react-flow__edges > svg:has(${dimmed})`, {
-  opacity: 0.6,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
-export const edgePathBg = style({
+export const edgePathBg = style([hiddenIfZoomTooSmall, hiddenIfReducedGraphics, {
   // strokeWidth: xyvars.edge.strokeWidth,
   strokeOpacity: 0.08,
   // transition: 'stroke-width 175ms ease-in-out',
@@ -78,7 +98,7 @@ export const edgePathBg = style({
       strokeOpacity: 0.15,
     },
   },
-})
+}])
 
 // To fix issue with marker not inheriting color from path - we need to create container
 export const markerContext = style({
@@ -102,20 +122,20 @@ export const cssEdgePath = style({
   animationFillMode: 'both',
   strokeDashoffset: 10,
   selectors: {
-    [`:where([data-edge-hovered='true']) &`]: {
+    [`${reactFlow} :where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    [`${reactFlow} :where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`:where([data-edge-dir='back']) &`]: {
+    [`${reactFlow} :where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse',
     },
-    [`${dimmed} &`]: {
+    [`:where([data-edge-dimmed]) &`]: {
       animationPlayState: 'paused',
     },
   },

package/src/base/primitives/element/ElementActionButtons.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { transitions, vars } from '../../../theme-vars'
 
 export const container = style({
@@ -41,6 +42,9 @@ export const actionIcon = style({
         '--ai-bg': `var(--ai-bg-hover)`,
       },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })
 // globalStyle(`${actionIcon} > *`, {

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Box } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
@@ -18,11 +19,12 @@ export function ElementActionButtons({
   },
   buttons,
 }: ElementActionButtonsProps) {
-  if (!buttons.length) {
+  const zoomTooSmall = useIsZoomTooSmall()
+  if (!buttons.length || zoomTooSmall) {
     return null
   }
   return (
-    <Box className={clsx(css.container, hiddenIfZoomTooSmall)}>
+    <Box className={clsx(css.container)}>
       <Box
         component={m.div}
         layoutRoot

package/src/base/primitives/element/ElementDetailsButton.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { vars } from '../../../theme-vars'
 
 export const container = style({
@@ -43,12 +44,9 @@ export const actionIcon = style({
   ':hover': {
     boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
   },
-  // selectors: {
-  //   [`:where([data-hovered='true']) &`]: {
-  //     // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
-  //     // vars: {
-  //     //   '--ai-bg': `var(--ai-bg-hover)`,
-  //     // },
-  //   },
-  // },
+  selectors: {
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
+  },
 })