@likec4/diagram 1.26.2 → 1.27.1

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

@@ -1,10 +1,7 @@
-import { defaultTheme } from '@likec4/core'
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
-import { iconSize, paddingSize, textSize } from './vars.css'
-
-export const stokeFillMix = createVar('stroke-fill-mix')
+import { css as style } from '@likec4/styles/css'
+// import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+// import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
+// import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const container = style({
   position: 'relative',
@@ -15,81 +12,58 @@ export const container = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  vars: {
-    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`,
-  },
-  ':after': {
-    content: ' ',
+  pointerEvents: 'none',
+  _after: {
+    content: '" "',
     position: 'absolute',
     top: '100%',
     left: 0,
     right: 0,
-    height: 24,
-    background: 'transparent',
+    height: '24px',
+    background: '[transparent]',
     pointerEvents: 'all',
   },
+  _focusVisible: {
+    outline: 'none',
+  },
 
-  selectors: {
-    [`&:is([data-likec4-dimmed="true"])`]: {
-      opacity: 0.25,
-      transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
-      transitionDelay: '50ms',
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-    },
-    [`&:is([data-likec4-dimmed="immediate"])`]: {
-      opacity: 0.25,
-      transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-    },
-    [`${whereReducedGraphics}  &:after`]: {
+  // _whenDimmed: {
+  //   opacity: 0.25,
+  //   transition: `opacity 400ms {easings.inOut}, filter 500ms {easings.inOut}`,
+  //   transitionDelay: '50ms',
+  //   grayscale: 0.85,
+  //   blur: '2px',
+  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  // },
+  // _whenDimmedImmediate: {
+  //   opacity: 0.25,
+  //   grayscale: 0.85,
+  //   blur: '2px',
+  //   // transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
+  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  // },
+  _reduceGraphicsOnPan: {
+    _after: {
       display: 'none',
     },
-    [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
-      cursor: 'pointer',
-    },
   },
-})
 
-globalStyle(`${container}`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.md),
-    [paddingSize]: rem(defaultTheme.spacing.md),
-    [iconSize]: '60px',
+  [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+    cursor: 'pointer',
   },
 })
 
-globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
-  vars: {
-    [iconSize]: '24px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
-  vars: {
-    [iconSize]: '36px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
-  vars: {
-    [iconSize]: '82px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
-  vars: {
-    [iconSize]: '90px',
-  },
-})
+// const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+// sizes.forEach((size) => {
+//   globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+//     vars: {
+//       [textSize]: rem(defaultTheme.textSizes[size]),
+//     },
+//   })
 
-const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-sizes.forEach((size) => {
-  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-    vars: {
-      [textSize]: rem(defaultTheme.textSizes[size]),
-    },
-  })
-
-  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-    vars: {
-      [paddingSize]: rem(defaultTheme.spacing[size]),
-    },
-  })
-})
+//   globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+//     vars: {
+//       [paddingSize]: rem(defaultTheme.spacing[size]),
+//     },
+//   })
+// })

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

@@ -5,12 +5,12 @@ import {
   DefaultShapeSize,
   DefaultTextSize,
 } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
-import * as css from './ElementNodeContainer.css'
+import * as styles from './ElementNodeContainer.css'
 
 type RequiredData = Pick<
   DiagramNode,
@@ -60,6 +60,7 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         ...data
       },
     },
+    style,
     children,
     ...rest
   }, ref) => {
@@ -83,10 +84,14 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
       <Box
         component={m.div}
         ref={ref}
-        className={clsx([
-          css.container,
+        className={cx(
+          css({
+            likec4Palette: data.color,
+          }),
+          styles.container,
+          'group',
           'likec4-element-node',
-        ])}
+        )}
         initial={false}
         {...selectable && {
           animate: {
@@ -94,13 +99,18 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
           },
           whileTap: { scale: 0.98 },
         }}
-        data-hovered={isHovered}
+        data-likec4-hovered={isHovered}
         data-likec4-color={data.color}
         data-likec4-shape={data.shape}
         data-likec4-shape-size={size}
-        data-likec4-padding={padding}
+        data-likec4-spacing={padding}
         data-likec4-text-size={textSize}
-        data-likec4-dimmed={isDimmed}
+        {...(isDimmed !== false && {
+          'data-likec4-dimmed': isDimmed,
+        })}
+        style={{
+          ...style,
+        }}
         {...rest}
       >
         {children}

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

@@ -1,156 +1,112 @@
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall, reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { easings, mantine, vars, whereNotReducedGraphics } from '../../../theme-vars'
-import { container, stokeFillMix } from './ElementNodeContainer.css'
+import { css, cx } from '@likec4/styles/css'
 
-const indicatorKeyframes = keyframes({
-  'from': {
-    strokeOpacity: 0.8,
+export const indicator = css({
+  _smallZoom: {
+    visibility: 'hidden',
   },
-  'to': {
-    strokeOpacity: 0.5,
-  },
-})
-
-const outlineColor = fallbackVar(
-  mantine.colors.primaryColors.outline,
-  mantine.colors.primaryColors.filled,
-  vars.element.stroke,
-)
+  stroke: 'likec4.palette.loContrast',
+  fill: '[none]',
 
-const indicatorStroke = createVar('indicator-stroke')
-
-export const indicator = style([hiddenIfZoomTooSmall, {
-  stroke: indicatorStroke,
-  fill: 'none',
-  transformOrigin: 'center center',
-  strokeWidth: 6,
-  animationDuration: '1s',
-  animationIterationCount: 'infinite',
-  animationDirection: 'alternate',
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: 'hidden',
   pointerEvents: 'none',
-  vars: {
-    [indicatorStroke]: vars.element.loContrast,
+  _light: {
+    stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`,
   },
-  selectors: {
-    ':where(.react-flow__node.selected) &': {
-      visibility: 'visible',
-    },
-    [`${whereNotReducedGraphics} :where(.react-flow__node.selected)  &`]: {
-      animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes),
-    },
-    [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      strokeWidth: 10,
-      stroke: outlineColor,
-      visibility: 'visible',
-    },
-    ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      strokeWidth: 10,
-    },
-    [`:where([data-mantine-color-scheme='light']) &`]: {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`,
-      },
-    },
+  _whenFocused: {
+    visibility: 'visible',
+  },
+  _groupFocusVisible: {
+    visibility: 'visible',
+  },
+  _whenSelected: {
+    animationStyle: 'indicator',
+    visibility: 'visible',
   },
-}])
-
-export const fillElementFill = style({
-  fill: vars.element.fill,
 })
 
-export const fillElementStroke = style({
-  fill: vars.element.stroke,
+export const fillElementFill = css({
+  fill: 'likec4.palette.fill',
 })
 
-export const fillMixStroke = style({
-  fill: fallbackVar(stokeFillMix, `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`),
+export const fillElementStroke = css({
+  fill: 'likec4.palette.stroke',
 })
 
-const filterShadow = createVar('filter-shadow')
+export const fillMixStroke = css({
+  fill: '[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]',
+  '.shape-svg-multiple &': {
+    fill: 'likec4.palette.fill',
+  },
+})
 
-const shapeBase = style({
+const shapeBase = css.raw({
   top: 0,
   left: 0,
   position: 'absolute',
   width: '100%',
   height: '100%',
   pointerEvents: 'none',
-  fill: vars.element.fill,
-  stroke: vars.element.stroke,
+  fill: 'likec4.palette.fill',
+  stroke: 'likec4.palette.stroke',
   overflow: 'visible',
   // zIndex is removed to improve rendering performance
   // this forces to keep shape in the same layer as the node
   // zIndex: -1,
 })
 
-export const shapeSvgMultiple = style([shapeBase, hiddenIfZoomTooSmall, {
-  transformOrigin: '50% 25%',
-  transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
-  filter: ' brightness(0.65) saturate(0.8)',
-  stroke: 'none',
-  selectors: {
-    // [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-    //   visibility: 'hidden',
-    // },
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      transformOrigin: '50% 100%',
+export const shapeSvgMultiple = cx(
+  'shape-svg-multiple',
+  css(shapeBase, {
+    transformOrigin: {
+      base: '50% 50%',
+      _shapeQueue: '75% 25%',
+      _shapeCylinder: '50% 100%',
+      _shapeStorage: '50% 100%',
     },
-    ':where([data-likec4-shape="queue"]) &': {
-      transformOrigin: '75% 25%',
-      // transform: 'translate(14px,15px) perspective(200px) translateZ(-2px)',
+    transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
+    filter: 'brightness(0.65) saturate(0.8)',
+    stroke: '[none]',
+    display: {
+      _smallZoom: 'none',
+      _reduceGraphicsOnPan: 'none',
+      _whenSelected: 'none',
+      _whenFocused: 'none',
     },
-  },
-  // filter: 'brightness(0.5)'
-}])
-globalStyle(`.${shapeSvgMultiple} ${fillMixStroke}`, {
-  fill: vars.element.fill,
-})
-export const shapeSvg = style([shapeBase, {
-  filter: filterShadow,
-  transition: `fill 120ms linear, filter 130ms ${easings.inOut}`,
+  }),
+)
+
+export const shapeSvg = css(shapeBase, {
+  transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
   transitionDelay: '0ms',
-  vars: {
-    [filterShadow]: `
+  filter: `
       drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, ${vars.element.stroke} 40%, transparent))
+      drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent))
       drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
     `,
-  },
-  selectors: {
-    [`:where([data-hovered='true']) &`]: {
-      vars: {
-        [filterShadow]: `
+  _whenHovered: {
+    filter: `
         drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
         drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
         drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-
         `,
-      },
-    },
-    [`:where([data-likec4-level='true']) &`]: {
-      vars: {
-        [filterShadow]: `
+  },
+  [`:where([data-likec4-level='true']) &`]: {
+    filter: `
         drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
         drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
         drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-
         `,
-      },
-    },
-    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      vars: {
-        [filterShadow]: `none`,
-      },
-    },
-    [`:where([data-likec4-zoom-small="true"]) &`]: {
-      filter: 'none',
-    },
-    [`${reactFlowReducedGraphics} &`]: {
-      transition: 'none',
-      filter: 'none',
-    },
   },
-}])
+  _whenSelected: {
+    filter: 'none',
+  },
+  _smallZoom: {
+    filter: 'none',
+  },
+  _whenPanning: {
+    transition: 'none',
+    filter: 'none',
+  },
+})

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

@@ -1,6 +1,5 @@
 import { type DiagramNode, type ElementShape, nonexhaustive } from '@likec4/core'
 import clsx from 'clsx'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { toDomPrecision } from '../../../utils/xyflow'
 import * as css from './ElementShape.css'