@likec4/diagram 1.35.0 → 1.36.1

package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx

@@ -23,6 +23,9 @@ const TriggerWalkthroughButton = Button.withProps({
   variant: 'filled',
   size: 'xs',
   fw: '500',
+  className: css({
+    flexShrink: 0,
+  }),
 })
 
 export const StartWalkthroughButton = () => {
@@ -59,10 +62,10 @@ const ParallelFrame = () => {
       <Box
         css={{
           position: 'absolute',
-          margin: 0,
-          padding: 0,
-          top: 0,
-          left: 0,
+          margin: '0',
+          padding: '0',
+          top: '0',
+          left: '0',
           width: '100%',
           height: '100%',
           border: `2px solid`,
@@ -100,6 +103,7 @@ export const ActiveWalkthroughControls = () => {
   return (
     <AnimatePresence propagate>
       <TriggerWalkthroughButton
+        key="trigger-dynamic-walkthrough"
         variant="light"
         color="orange"
         mr={'sm'}
@@ -122,6 +126,7 @@ export const ActiveWalkthroughControls = () => {
       </PrevNextButton>
 
       <Badge
+        key="step-badge"
         component={m.div}
         size="md"
         radius="sm"

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -5,10 +5,10 @@ export const backdropOpacity = '--_opacity'
 
 export const dialog = css({
   boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
+  margin: '0',
+  padding: '0',
   position: 'fixed',
-  inset: 0,
+  inset: '0',
   width: '100vw',
   height: '100vh',
   maxWidth: '100vw',
@@ -34,12 +34,12 @@ export const card = css({
   border: `none`,
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
-      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
-      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
+      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
+      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
       transparent 80px
     ),
-    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
   `,
   '& .react-flow__attribution': {
     display: 'none',
@@ -99,7 +99,7 @@ export const viewButton = css({
   width: '100%',
   background: 'mantine.colors.body',
   borderRadius: 'sm',
-  padding: `10px 8px`,
+  padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: 'fast',
@@ -163,8 +163,8 @@ export const tabsList = css({
   background: 'mantine.colors.gray[1]',
   borderRadius: 'sm',
   flexWrap: 'nowrap',
-  gap: '6px',
-  padding: '4px',
+  gap: '1.5', // 6px
+  padding: '1',
   _dark: {
     background: 'mantine.colors.dark[7]',
   },
@@ -174,7 +174,7 @@ export const tabsTab = css({
   fontSize: 'xs',
   fontWeight: 500,
   flexGrow: 1,
-  padding: '6px 8px',
+  padding: '[6px 8px]',
   transition: 'fast',
   borderRadius: 'sm',
   color: 'mantine.colors.gray[7]',
@@ -208,15 +208,15 @@ export const tabsPanel = css({
   overflow: 'hidden',
   position: 'relative',
   '&:not(:has(.mantine-ScrollArea-root))': {
-    paddingLeft: '4px',
-    paddingRight: '4px',
+    paddingLeft: '1',
+    paddingRight: '1',
   },
   '& .mantine-ScrollArea-root': {
     width: '100%',
     height: '100%',
     '& > div': {
-      paddingLeft: '4px',
-      paddingRight: '4px',
+      paddingLeft: '1',
+      paddingRight: '1',
     },
   },
 })
@@ -246,8 +246,8 @@ export const resizeHandle = css({
   borderTop: 'none',
   borderLeft: 'none',
   borderRadius: '2px',
-  bottom: '2px',
-  right: '2px',
+  bottom: '0.5',
+  right: '0.5',
   transition: 'fast',
   cursor: 'se-resize',
   _hover: {

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -9,6 +9,7 @@ import {
   type ViewId,
 } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
+import { HStack } from '@likec4/styles/jsx'
 import {
   type TextProps,
   ActionIcon,
@@ -266,12 +267,8 @@ export function ElementDetailsCard({
           dragElastic={0}
           dragMomentum={false}
           dragListener={false}
-          className={cx(
-            css({
-              likec4Palette: nodeModel?.color ?? elementModel.color,
-            }),
-            styles.card,
-          )}
+          data-likec4-color={nodeModel?.color ?? elementModel.color}
+          className={styles.card}
           initial={{
             top,
             left,
@@ -349,9 +346,7 @@ export function ElementDetailsCard({
                     <ElementTag
                       key={tag}
                       tag={tag}
-                      css={{
-                        cursor: 'pointer',
-                      }}
+                      cursor="pointer"
                       onClick={e => {
                         e.stopPropagation()
                         diagram.openSearch(`#${tag}`)
@@ -446,9 +441,9 @@ export function ElementDetailsCard({
                   {elementModel.links.length > 0 && (
                     <>
                       <PropertyLabel>links</PropertyLabel>
-                      <Stack gap={'xs'} align="flex-start">
+                      <HStack gap={'xs'} flexWrap="wrap">
                         {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
-                      </Stack>
+                      </HStack>
                     </>
                   )}
                   {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
@@ -609,7 +604,7 @@ function ElementMetata({
           gap: `[4px 4px]`,
           alignItems: 'baseline',
           justifyItems: 'stretch',
-          paddingRight: '2xs',
+          paddingRight: 'xxs',
         })}>
         {entries(metadata).map(([key, value]) => (
           <div
@@ -654,7 +649,7 @@ function ElementMetata({
                 <div
                   className={css({
                     fontSize: 'sm',
-                    padding: '2xs',
+                    padding: 'xxs',
                     whiteSpace: 'pre',
                     fontFamily: '[var(--mantine-font-family-monospace)]',
                     userSelect: 'all',

package/src/overlays/element-details/TabPanelDeployments.css.ts

@@ -8,8 +8,8 @@ export const treeNode = css({
 
 export const treeNodeLabel = css({
   cursor: 'default',
-  marginTop: 0,
-  marginBottom: 0,
+  marginTop: '0',
+  marginBottom: '0',
 })
 
 const label = css({
@@ -44,8 +44,8 @@ export const instanceLabel = cx(
     justifyContent: 'stretch',
     flexWrap: 'nowrap',
     height: '36px',
-    paddingInlineStart: '16px',
-    paddingInlineEnd: '10px',
+    paddingInlineStart: '[16px]',
+    paddingInlineEnd: '2.5', // 10px
     borderRadius: 'sm',
     alignItems: 'center',
     color: 'mantine.colors.gray[7]',

package/src/overlays/element-details/TabPanelRelationships.css.ts

@@ -5,11 +5,11 @@ export const fqn = css({
   fontSize: 'sm',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '3px 6px',
+  padding: '[3px 6px]',
   borderRadius: 3,
-  background: `likec4.palette.fill/75`,
+  background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
-  color: 'likec4.palette.hiContrast',
+  color: 'var(--likec4-palette-hiContrast)',
   // selectors: {
   //   [`${whereDark} &`]: {
   //   }
@@ -55,9 +55,9 @@ export const panelScope = css({
   _before: {
     content: '"scope:"',
     position: 'absolute',
-    top: 0,
-    left: 8,
-    fontSize: '2xs',
+    top: '0',
+    left: '2',
+    fontSize: 'xxs',
     fontWeight: 500,
     lineHeight: '1',
     color: 'mantine.colors.dimmed',
@@ -75,7 +75,7 @@ export const edgeNum = css({
   display: 'inline-block',
   fontSize: 'xl',
   fontWeight: 600,
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   minWidth: 24,
   textAlign: 'center',
   borderRadius: 'sm',

package/src/overlays/overlay/Overlay.css.ts

@@ -10,7 +10,7 @@ const inset = '--_inset'
 const borderRadius = '--_border-radius'
 const dialog = css.raw({
   boxSizing: 'border-box',
-  margin: 0,
+  margin: '0',
   position: 'fixed',
   width: '100vw',
   height: '100vh',
@@ -30,13 +30,13 @@ const dialog = css.raw({
   _backdrop: {
     cursor: 'zoom-out',
   },
-  inset: 0,
-  padding: 0,
+  inset: '0',
+  padding: '0',
 })
 
 const body = css.raw({
   position: 'relative',
-  containerName: 'overlay-dialog',
+  containerName: 'likec4-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
   overflow: 'hidden',
@@ -60,7 +60,7 @@ export const overlay = sva({
             width: 'calc(100vw - 2 * var(--_inset))',
             height: 'calc(100vh - var(--_offset) - var(--_inset))',
             [borderRadius]: '6px',
-            padding: '6px',
+            padding: '1.5', // 6px
             [offset]: '1rem',
           },
           md: {
@@ -81,8 +81,8 @@ export const overlay = sva({
       },
       true: {
         dialog: {
-          inset: 0,
-          padding: 0,
+          inset: '0',
+          padding: '0',
         },
       },
     },

package/src/overlays/relationship-details/SelectEdge.css.ts

@@ -3,7 +3,7 @@ import { css, cx } from '@likec4/styles/css'
 const edgeEnpoint = css.raw({
   display: 'inline-flex',
   alignItems: 'center',
-  padding: '6px 2px 0 2px',
+  padding: '[6px 2px 0 2px]',
   '& .mantine-Text-root': {
     color: 'mantine.colors.text/90',
     fontSize: 'xs',
@@ -13,7 +13,7 @@ const edgeEnpoint = css.raw({
 })
 
 export const edgeSource = css({
-  paddingLeft: 4,
+  paddingLeft: '1',
   gridColumn: 1,
 }, edgeEnpoint)
 
@@ -23,7 +23,7 @@ export const edgeArrow = css({
 
 export const edgeTarget = css({
   gridColumn: 3,
-  paddingRight: 4,
+  paddingRight: '1',
 }, edgeEnpoint)
 
 const edgeLabelclass = 'likec4-edge-label'
@@ -35,8 +35,8 @@ export const edgeLabel = cx(
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
     borderBottomColor: 'mantine.colors.defaultBorder',
-    marginBottom: '0px',
-    padding: '0 4px 5px 4px',
+    marginBottom: '0',
+    padding: '[0 4px 5px 4px]',
     width: '100%',
     '& .mantine-Text-root': {
       fontSize: 'xxs',
@@ -51,7 +51,7 @@ export const edgeRow = css({
   display: 'contents',
   [`&:last-child .${edgeLabelclass}`]: {
     borderBottom: 'none',
-    marginBottom: 0,
+    marginBottom: '0',
   },
   '& > *': {
     transition: 'all 0.15s ease-in',
@@ -67,7 +67,7 @@ export const edgeGrid = css({
   display: 'grid',
   gridTemplateColumns: '1fr 30px 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: 0,
+  gap: '0',
   alignItems: 'stretch',
 })
 
@@ -75,7 +75,7 @@ export const edgeDataGrid = css({
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: '10px 12px',
+  gap: '[10px 12px]',
   alignItems: 'baseline',
   justifyItems: 'start',
 })

package/src/overlays/relationships-browser/SelectElement.css.ts

@@ -1,7 +1,7 @@
 import { css } from '@likec4/styles/css'
 
 export const node = css({
-  margin: 0,
+  margin: '0',
 })
 
 export const label = css({

package/src/search/Search.tsx

@@ -40,8 +40,8 @@ const body = css({
   // containerType: 'size',
   // position: 'fixed',
   // zIndex: 901,
-  // top: 0,
-  // left: 0,
+  // top: '0',
+  // left: '0',
   width: '100%',
   height: '100%',
   maxHeight: '100vh',
@@ -50,10 +50,10 @@ const body = css({
   flexDirection: 'column',
   justifyContent: 'stretch',
   gap: 'sm',
-  paddingTop: 20,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 8,
+  paddingTop: '[20px]',
+  paddingLeft: 'md',
+  paddingRight: 'md',
+  paddingBottom: 'sm',
   background: '[transparent]',
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,

package/src/search/components/ElementsColumn.css.ts

@@ -7,7 +7,7 @@ const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`
 
 export const treeNode = css({
   outline: 'none',
-  marginBottom: '8px',
+  marginBottom: '2',
 })
 export const treeRoot = css(
   container.raw({
@@ -22,10 +22,10 @@ export const treeLabel = css({
   display: 'flex',
   alignItems: 'baseline',
   outline: 'none !important',
-  gap: '4px',
+  gap: '1',
 })
 export const treeSubtree = css({
-  marginTop: '8px',
+  marginTop: '2',
 })
 
 // const iconSize = '--likec4-icon-size'
@@ -44,7 +44,7 @@ export const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
     flexDirection: 'column-reverse',
     alignItems: 'flex-start',
-    gap: 2,
+    gap: '0.5',
   },
 })
 
@@ -56,7 +56,7 @@ export const elementId = css({
   display: 'block',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  padding: '1px 5px',
+  padding: '[1px 5px]',
   borderRadius: '4px',
   background: `mantine.colors.dark[9]/30`,
   _light: {

package/src/search/components/SearchByTags.tsx

@@ -29,13 +29,13 @@ export function SearchByTags() {
       ref={ref}
       css={{
         gap: 'md',
-        paddingLeft: 48,
+        paddingLeft: '[48px]',
         flexWrap: 'nowrap',
       }}
     >
       <HStack
         css={{
-          gap: 6,
+          gap: '1.5', // 6px
           flexWrap: 'wrap',
           opacity: isFiltered ? 1 : .3,
           grayscale: isFiltered ? 0 : .9,

package/src/search/components/ViewsColum.tsx

@@ -43,7 +43,7 @@ export const ViewsColumn = memo(() => {
         if (search.startsWith('#')) {
           return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
         }
-        return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
+        return `${view.title} ${view.$view.description}`.toLocaleLowerCase().includes(search)
       })
     }
   }

package/src/search/components/ViewsColumn.css.ts

@@ -23,7 +23,7 @@ export const viewButton = cx(
 // export const viewDescription = css(description)
 
 export const viewButtonDescription = css({
-  marginTop: '4px',
+  marginTop: '1',
   // transition: transitions.fast,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: '13px',

package/src/search/components/_shared.css.ts

@@ -17,9 +17,9 @@ const button = css.raw({
   width: '100%',
   background: 'mantine.colors.body',
   rounded: 'sm',
-  padding: `12px 8px 12px 14px`,
+  padding: `[12px 8px 12px 14px]`,
   minHeight: '60px',
-  gap: 8,
+  gap: '2',
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -139,7 +139,7 @@ const descriptionColor = css.raw({
 })
 
 const description = css.raw(descriptionColor, {
-  marginTop: '4px',
+  marginTop: '1',
   fontSize: '12px',
   lineHeight: '1.4',
 

package/src/search/components/styles.css.ts

@@ -18,7 +18,7 @@ export const input = css({
 
 export const pickviewBackdrop = css({
   position: 'absolute',
-  inset: 0,
+  inset: '0',
   width: '100%',
   height: '100%',
   backgroundColor: '[rgb(34 34 34 / 0.7)]',
@@ -31,8 +31,8 @@ export const pickviewBackdrop = css({
 })
 export const pickview = css({
   position: 'absolute',
-  top: '2rem',
-  left: '50%',
+  top: '[2rem]',
+  left: '[50%]',
   width: '100%',
   maxWidth: '600px',
   minWidth: '200px',
@@ -41,9 +41,9 @@ export const pickview = css({
 })
 
 export const pickviewGroup = css({
-  marginTop: '8px',
+  marginTop: '2',
   '& + &': {
-    marginTop: '32px',
+    marginTop: '[32px]',
   },
 })