@likec4/diagram 1.26.2 → 1.27.0

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -6,7 +6,7 @@ import type { ReactNode } from 'react'
 import type { Base } from '../../../../base'
 import { useDiagramContext } from '../../../../hooks/useDiagram'
 import { stopPropagation } from '../../../../utils/xyflow'
-import * as css from './styles.css'
+import * as styles from './styles.css'
 
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
   nodeProps: Base.NodeProps
@@ -45,9 +45,13 @@ export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps)
   }
   // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
   const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay)
+  if (!isToolbarVisible) {
+    return null
+  }
+
   return (
     <NodeToolbar
-      isVisible={!dragging && isToolbarVisible}
+      isVisible={!dragging}
       offset={4}
       {...props}>
       <Paper
@@ -63,9 +67,9 @@ export function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps)
         onClick={stopPropagation}
         onDoubleClick={stopPropagation}
         withBorder>
-        <Stack gap={6}>
-          <Box pl={2}>
-            <Text c="dimmed" className={css.toolbarTitle}>{title}</Text>
+        <Stack gap={'6px'}>
+          <Box px={'4px'}>
+            <Text c="dimmed" className={styles.toolbarTitle}>{title}</Text>
           </Box>
           <Group gap={4}>
             {children}

package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts

@@ -1,8 +1,7 @@
-import { rem } from '@mantine/core'
-import { style } from '@vanilla-extract/css'
+import { css } from '@likec4/styles/css'
 
-export const toolbarTitle = style({
-  fontSize: rem(10),
+export const toolbarTitle = css({
+  fontSize: '10px',
   fontWeight: 600,
   cursor: 'default',
   userSelect: 'all',

package/src/likec4diagram/ui/controls/LayoutDriftNotification.tsx

@@ -12,7 +12,7 @@ import {
   IconAlertTriangle,
 } from '@tabler/icons-react'
 
-import { mantine } from '../../../theme-vars'
+// import { mantine } from '../../../theme-vars'
 import { ActionIcon } from './_shared'
 
 export const LayoutDriftNotification = (props: PopoverProps) => (
@@ -23,7 +23,7 @@ export const LayoutDriftNotification = (props: PopoverProps) => (
     {...props}>
     <HoverCardTarget>
       <ActionIcon c="orange">
-        <Overlay color={mantine.colors.orange.lightHover} backgroundOpacity={1} />
+        <Overlay color={'orange.lightHover'} backgroundOpacity={1} />
         <IconAlertTriangle />
       </ActionIcon>
     </HoverCardTarget>

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -1,95 +1,84 @@
-import { rem } from '@mantine/core'
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereNotReducedGraphics, whereReducedGraphics } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const navigationButtons = style({
-  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
-  ':empty': {
+export const navigationButtons = css({
+  gap: 'micro',
+  _empty: {
     display: 'none',
   },
 })
 
-export const panel = style({
-  top: fallbackVar(vars.navigationPanel.top, '1rem'),
-  left: fallbackVar(vars.navigationPanel.left, '1rem'),
+export const panel = css({
+  top: '1rem',
+  left: '1rem',
   margin: 0,
   pointerEvents: 'none',
-})
-
-globalStyle(`${panel} :where(button, .action-icon, [role="dialog"])`, {
-  pointerEvents: 'all',
-})
-
-globalStyle(`${whereReducedGraphics} ${panel} .action-icon`, {
-  vars: {
-    '--ai-radius': '0px',
+  '& :where(button, .action-icon, [role=\'dialog\'])': {
+    pointerEvents: 'all',
   },
-})
-
-globalStyle(`.likec4-top-left-panel .action-icon`, {
-  vars: {
+  ['& .action-icon']: {
     ['--ai-size']: '2rem',
   },
-})
-globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
-  width: '65%',
-  height: '65%',
-})
-
-export const actionIconGroup = style({
-  selectors: {
-    [`${whereNotReducedGraphics} &`]: {
-      boxShadow: mantine.shadows.md,
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
+  _reduceGraphics: {
+    '& .action-icon': {
+      '--ai-radius': '0px',
     },
   },
 })
 
-export const autolayoutIcon = style({})
+export const actionIconGroup = css({
+  shadow: {
+    base: 'md',
+    _whenPanning: 'none',
+  },
+})
 
-globalStyle(`${autolayoutIcon} .tabler-icon`, {
-  width: '65%',
-  height: '65%',
+export const autolayoutIcon = css({
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
 })
 
-export const autolayoutButton = style({
+export const autolayoutButton = css({
   flex: '1 1 40%',
   textAlign: 'center',
   fontWeight: 500,
   padding: '4px 6px',
-  fontSize: rem(11),
+  fontSize: '11px',
   zIndex: 1,
 })
 
-export const autolayoutIndicator = style({
-  background: mantine.colors.gray[2],
-  borderRadius: mantine.radius.sm,
-  border: `1px solid ${mantine.colors.gray[3]}`,
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      background: mantine.colors.dark[5],
-      borderColor: mantine.colors.dark[4],
-    },
+export const autolayoutIndicator = css({
+  background: 'mantine.colors.gray[2]',
+  borderRadius: 'sm',
+  border: `1px solid`,
+  borderColor: 'mantine.colors.gray[4]',
+  _dark: {
+    background: 'mantine.colors.dark[5]',
+    borderColor: 'mantine.colors.dark[4]',
   },
 })
 
-export const spacingSliderBody = style({
+export const spacingSliderBody = css({
   position: 'relative',
-  borderRadius: mantine.radius.sm,
-  background: mantine.colors.gray[3],
+  borderRadius: 'sm',
+  background: 'mantine.colors.gray[3]',
   boxShadow: 'inset 1px 1px 3px 0px #00000024',
-  selectors: {
-    [`:where([data-mantine-color-scheme="dark"]) &`]: {
-      background: mantine.colors.dark[7],
-    },
+  _dark: {
+    background: 'mantine.colors.dark[7]',
   },
 })
 
-export const spacingSliderThumb = style({
+export const spacingSliderThumb = css({
   position: 'absolute',
   width: 8,
   height: 8,
-  border: `2px solid ${mantine.colors.gray[5]}`,
+  border: `2px solid`,
+  borderColor: 'mantine.colors.gray[5]',
   borderRadius: 3,
   transform: 'translate(-50%, -50%)',
 })

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts

@@ -1,47 +1,51 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const card = style({
+export const card = css({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
   width: 'auto',
-  backgroundColor: mantine.colors.body,
-  borderRadius: '0px',
-  '@media': {
-    [mantine.largerThan('sm')]: {
-      minWidth: 250,
-      maxWidth: '90vw',
-    },
-    [mantine.largerThan('md')]: {
-      minWidth: 350,
-      maxWidth: '70vw',
-    },
+  // backgroundColor: 'mantine.colors.body',
+  borderRadius: 'sm',
+  sm: {
+    minWidth: 250,
+    maxWidth: '90vw',
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      backgroundColor: mantine.colors.dark[6],
-    },
-    [`${whereNotReducedGraphics} &`]: {
-      borderRadius: mantine.radius.sm,
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-      WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-      backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-    },
-    [`${whereDark} ${whereNotReducedGraphics} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
-    },
+  md: {
+    minWidth: 350,
+    maxWidth: '70vw',
   },
+
+  shadow: {
+    base: 'xs',
+    _whenPanning: 'none',
+  },
+
+  backgroundColor: {
+    base: 'mantine.colors.body/80',
+    _dark: 'mantine.colors.dark[6]/80',
+    _whenPanning: 'mantine.colors.body',
+  },
+  // _dark: {
+  //   backgroundColor: 'mantine.colors.dark[6]',
+  // },
+  // _noReduceGraphics: {
+  //   borderRadius: 'sm',
+  //   backgroundColor: `mantine.colors.body/80`,
+  //   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  //   _dark: {
+  //     backgroundColor: `mantine.colors.dark[6]/80`,
+  //   },
+  // },
 })
 
-export const title = style({})
+export const title = css({})
 
-export const description = style({
+export const description = css({
   whiteSpaceCollapse: 'preserve-breaks',
-  color: mantine.colors.gray[7],
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.gray[5],
-    },
+  color: 'mantine.colors.gray[7]',
+  _dark: {
+    color: 'mantine.colors.gray[5]',
   },
 })

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagram'
-import * as css from './DiagramTitlePanel.css'
+import * as styles from './DiagramTitlePanel.css'
 
 export function DiagramTitlePanel() {
   const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(s => ({
@@ -53,7 +53,7 @@ export function DiagramTitlePanel() {
           }}
         >
           <Card
-            className={css.card}
+            className={styles.card}
             withBorder={!isCollapsed}
             p={isCollapsed ? 'sm' : 'md'}
             onDoubleClick={e => e.stopPropagation()}>
@@ -100,7 +100,7 @@ export function DiagramTitlePanel() {
                     size={'md'}
                     fw={500}
                     lh={1.1}
-                    className={css.title}
+                    className={styles.title}
                   >
                     {title}
                   </Text>
@@ -136,7 +136,7 @@ export function DiagramTitlePanel() {
                     <Text
                       component={'div'}
                       size="sm"
-                      className={css.description}>
+                      className={styles.description}>
                       {description || 'no description'}
                     </Text>
                   </Spoiler>

package/src/likec4diagram/ui/notation/NotationPanel.css.ts

@@ -1,58 +1,48 @@
-import { fallbackVar, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+// import { fallbackVar, style } from '@vanilla-extract/css'
+// import { calc } from '@vanilla-extract/css-utils'
+// import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 // import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
-export const container = style({
+export const container = css({
   bottom: 0,
   right: 0,
   padding: 8,
   margin: 0,
 })
 
-export const icon = style({
-  vars: {
-    ['--ai-radius']: '0px',
-  },
-  selectors: {
-    [`${whereNotReducedGraphics} &`]: {
-      vars: {
-        ['--ai-radius']: mantine.radius.md,
-      },
-    },
+export const icon = css({
+  ['--ai-radius']: '0px',
+  _noReduceGraphics: {
+    ['--ai-radius']: '{radii.md}',
   },
 })
 
-export const card = style({
+export const card = css({
   cursor: 'default',
   userSelect: 'none',
   minWidth: 200,
   maxWidth: 'calc(100vw - 20px)',
-  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  '@media': {
-    [mantine.largerThan('sm')]: {
-      minWidth: 300,
-      maxWidth: `65vw`,
-    },
-    [mantine.largerThan('md')]: {
-      // minWidth: 350,
-      maxWidth: `40vw`,
-    },
+  backgroundColor: `mantine.colors.body/80`,
+  // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  sm: {
+    minWidth: 300,
+    maxWidth: `65vw`,
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
-    },
+  md: {
+    maxWidth: `40vw`,
+  },
+  _dark: {
+    backgroundColor: `mantine.colors.dark[6]/80`,
   },
 })
 
-export const tabPanel = style({
-  padding: calc(mantine.spacing.xs).divide(2).toString(),
+export const tabPanel = css({
+  padding: '2xs',
 })
 
-// export const description = style({
+// export const description = css({
 //   whiteSpaceCollapse: 'preserve-breaks',
 //   color: mantine.colors.gray[7],
 //   selectors: {
@@ -62,29 +52,29 @@ export const tabPanel = style({
 //   }
 // })
 
-export const elementNotation = style({
+export const elementNotation = css({
   backgroundColor: 'transparent',
   transition: 'all 100ms ease-in',
   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  vars: {
-    // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
-  },
-  ':hover': {
+  // vars: {
+  //   // [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  // },
+  _hover: {
     transition: 'all 120ms ease-out',
     // backgroundColor:
-    backgroundColor: `color-mix(in srgb, ${mantine.colors.primaryColors[2]}, transparent 50%)`,
+    backgroundColor: `mantine.colors.primary[2]/50`,
   },
-  selectors: {
-    [`${whereDark} &:hover`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[3]}, transparent 60%)`,
+  _dark: {
+    _hover: {
+      backgroundColor: `mantine.colors.dark[3]/40`,
     },
   },
 })
 
-export const shapeSvg = style({
-  fill: vars.element.fill,
-  stroke: vars.element.stroke,
+export const shapeSvg = css({
+  fill: 'likec4.palette.fill',
+  stroke: 'likec4.palette.stroke',
   strokeWidth: 1,
   overflow: 'visible',
   width: '100%',
@@ -95,7 +85,7 @@ export const shapeSvg = style({
   `,
 })
 
-export const shapeBadge = style({
+export const shapeBadge = css({
   fontWeight: 500,
   letterSpacing: '0.2px',
   paddingTop: 0,
@@ -103,13 +93,11 @@ export const shapeBadge = style({
   textTransform: 'lowercase',
   transition: 'all 150ms ease-in-out',
   cursor: 'pointer',
-  vars: {
-    ['--badge-radius']: '2px',
-    ['--badge-fz']: '9.5px',
-    ['--badge-padding-x']: '3px',
-    ['--badge-height']: '13.5px',
-    ['--badge-lh']: '1',
-    // ['--badge-bg']: vars.element.fill,
-    // ['--badge-color']: vars.element.hiContrast
-  },
+  ['--badge-radius']: '2px',
+  ['--badge-fz']: '9.5px',
+  ['--badge-padding-x']: '3px',
+  ['--badge-height']: '13.5px',
+  ['--badge-lh']: '1',
+  // ['--badge-bg']: vars.element.fill,
+  // ['--badge-color']: vars.element.hiContrast
 })

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,4 +1,6 @@
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
+import { token } from '@likec4/styles/tokens'
 import {
   ActionIcon,
   Badge,
@@ -27,8 +29,7 @@ import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useXYStore } from '../../../hooks/useXYFlow'
 import type { DiagramContext } from '../../../state/types'
-import { vars } from '../../../theme-vars'
-import * as css from './NotationPanel.css'
+import * as styles from './NotationPanel.css'
 
 type NodeKind = ComputedNode['kind']
 
@@ -47,10 +48,12 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
       shadow="none"
       px={'xs'}
       py={'sm'}
-      className={css.elementNotation}
-      mod={{
-        'likec4-color': color,
-      }}
+      className={cx(
+        styles.elementNotation,
+        css({
+          likec4Palette: color,
+        }),
+      )}
       onMouseEnter={() => {
         setOnlyKind(null)
         // diagramStore.getState().highlightByElementNotation(value)
@@ -85,7 +88,7 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
             {value.kinds.map((kind) => (
               <Badge
                 key={kind}
-                className={css.shapeBadge}
+                className={styles.shapeBadge}
                 onMouseEnter={() => {
                   setOnlyKind(kind)
                   // diagramStore.getState().highlightByElementNotation(value, kind)
@@ -95,7 +98,7 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
                   // diagramStore.getState().highlightByElementNotation(value)
                 }}
                 opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
-                color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : vars.element.fill}
+                color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : token('colors.likec4.palette.fill')}
               >
                 {kind}
               </Badge>
@@ -149,7 +152,7 @@ export const NotationPanel = memo(() => {
             translateX: '100%',
             opacity: 0.6,
           }}
-          className={clsx('react-flow__panel', css.container)}>
+          className={clsx('react-flow__panel', styles.container)}>
           <Tooltip label="View has no notations" color="orange" {...portalProps}>
             <ThemeIcon
               size={'lg'}
@@ -171,14 +174,14 @@ export const NotationPanel = memo(() => {
             translateX: '100%',
             opacity: 0.6,
           }}
-          className={clsx('react-flow__panel', css.container)}
+          className={clsx('react-flow__panel', styles.container)}
         >
           <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
             <ActionIcon
               size={'lg'}
               variant="default"
               color="gray"
-              className={css.icon}
+              className={styles.icon}
               onClick={() => setCollapsed(false)}
             >
               <IconHelpCircle stroke={1.5} />
@@ -200,7 +203,7 @@ export const NotationPanel = memo(() => {
             opacity: 0,
             scale: 0.25,
           }}
-          className={clsx('react-flow__panel', css.container)}
+          className={clsx('react-flow__panel', styles.container)}
           style={{
             transformOrigin: 'bottom right',
           }}
@@ -209,7 +212,7 @@ export const NotationPanel = memo(() => {
             radius="sm"
             withBorder
             shadow="lg"
-            className={css.card}>
+            className={styles.card}>
             {/* <Text fz={'sm'} fw={500} c={'dimmed'} ml={'md'}>diagram notation</Text> */}
             <Tabs defaultValue="first" radius={'xs'}>
               <TabsList>
@@ -231,7 +234,7 @@ export const NotationPanel = memo(() => {
                 </TabsTab>
               </TabsList>
 
-              <TabsPanel value="first" className={css.tabPanel} hidden={isCollapsed}>
+              <TabsPanel value="first" className={styles.tabPanel} hidden={isCollapsed}>
                 <ScrollAreaAutosize
                   viewportProps={{
                     style: {