@likec4/diagram 1.26.1 → 1.27.0

package/src/likec4diagram/ui/search/ElementsColumn.css.ts

@@ -1,118 +1,113 @@
-import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, whereLight } from '../../../theme-vars'
-import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
+import { css } from '@likec4/styles/css'
+import { container } from '@likec4/styles/patterns'
 
 export { focusable } from './_shared.css'
 
-export const treeContainer = createContainer('likec4-elements-tree')
+const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`
 
-const whenContainerIsNarrow = `${treeContainer} (width < 450px)`
-
-export const treeNode = style({
+export const treeNode = css({
   outline: 'none',
-  marginBottom: 8,
-})
-export const treeRoot = style({
-  overflow: 'hidden',
-  containerName: treeContainer,
-  containerType: 'inline-size',
-  height: '100%',
+  marginBottom: '8px',
 })
-export const treeLabel = style({
+export const treeRoot = css(
+  container.raw({
+    containerName: 'likec4-tree',
+  }),
+  {
+    overflow: 'hidden',
+    containerType: 'inline-size',
+    height: '100%',
+  },
+)
+export const treeLabel = css({
   display: 'flex',
   alignItems: 'baseline',
   outline: 'none !important',
-  gap: 4,
+  gap: '4px',
 })
-export const treeSubtree = style({
-  marginTop: 8,
+export const treeSubtree = css({
+  marginTop: '8px',
 })
 
-export const iconSize = createGlobalVar('likec4-icon-size')
-export const elementExpandIcon = style({
-  color: mantine.colors.dimmed,
+// const iconSize = '--likec4-icon-size'
+export const elementExpandIcon = css({
+  color: 'mantine.colors.dimmed',
 })
 
-export const elementButton = style([button, {
-  flexGrow: 1,
-  vars: {
-    [iconSize]: '24px',
-  },
-  '@container': {
-    [`${whenContainerIsNarrow}`]: {
-      vars: {
-        [iconSize]: '18px',
-      },
-    },
-  },
-}])
+// export const elementButton = css(button, {
+//   flexGrow: 1,
+// })
 
-globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
+// TODO
+// globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
 
-export const elementTitleAndId = style({
-  '@container': {
-    [`${whenContainerIsNarrow}`]: {
-      flexDirection: 'column-reverse',
-      alignItems: 'flex-start',
-      gap: 2,
-    },
+export const elementTitleAndId = css({
+  [whenContainerIsNarrow]: {
+    flexDirection: 'column-reverse',
+    alignItems: 'flex-start',
+    gap: 2,
   },
 })
 
-export const elementTitle = style([title])
-export const elementId = style({
-  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
-  fontSize: 10,
-  lineHeight: 1.3,
+// export const elementTitle = css(title)
+export const elementId = css({
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: '10px',
+  lineHeight: '1.3',
   display: 'block',
   fontWeight: 500,
   whiteSpace: 'nowrap',
   padding: '1px 5px',
-  borderRadius: 4,
-  background: `color-mix(in srgb, ${mantine.colors.dark[9]}, transparent 70%)`,
-  selectors: {
-    [`${whereLight} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 80%)`,
-    },
+  borderRadius: '4px',
+  background: `mantine.colors.dark[9]/30`,
+  _light: {
+    background: `mantine.colors.gray[3]/20`,
   },
 })
-export const elementDescription = style([description])
 
-export const elementIcon = style({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'flex-start',
-  marginTop: 4,
-})
-globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-})
-globalStyle(`${elementIcon} img`, {
-  objectFit: 'contain',
-})
-globalStyle(`${elementIcon}.likec4-shape-icon svg`, {
-  color: iconColor,
-  width: '90%',
-  strokeWidth: 1.5,
+// const iconSizeVar = `var(${iconSize}, 32px)`
+export const elementIcon = css({
+  ['--likec4-icon-size']: '24px',
+  [whenContainerIsNarrow]: {
+    ['--likec4-icon-size']: '18px',
+  },
 })
+//   flex: `0 0 ${iconSizeVar}`,
+//   height: iconSizeVar,
+//   width: iconSizeVar,
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+//   alignSelf: 'flex-start',
+//   marginTop: 4,
+//   [`& svg, & img`]: {
+//     width: '100%',
+//     height: 'auto',
+//     maxHeight: '100%',
+//     pointerEvents: 'none',
+//   },
+//   [`& img`]: {
+//     objectFit: 'contain',
+//   },
+//   '&.likec4-shape-icon svg': {
+//     color: `[var(${iconColor})]`,
+//     width: '90%',
+//     strokeWidth: 1.5,
+//   },
+//   [iconSize]: '24px',
+//   [whenContainerIsNarrow]: {
+//     [iconSize]: '18px',
+//   },
+// })
 
-export const elementViewsCount = style({
+export const elementViewsCount = css({
   flex: 0,
-  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
-  fontSize: 10,
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: '10px',
   fontWeight: 500,
   whiteSpace: 'nowrap',
-  lineHeight: 1.1,
-  '@container': {
-    [`${whenContainerIsNarrow}`]: {
-      display: 'none',
-    },
+  lineHeight: '1.1',
+  [whenContainerIsNarrow]: {
+    display: 'none',
   },
 })

package/src/likec4diagram/ui/search/ElementsColumn.tsx

@@ -7,6 +7,7 @@ import {
   sortParentsFirst,
   toArray,
 } from '@likec4/core'
+import { cx } from '@likec4/styles/css'
 import {
   type RenderTreeNodePayload,
   ActionIcon,
@@ -28,7 +29,8 @@ import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 're
 import { IconOrShapeRenderer } from '../../../context/IconRenderer'
 import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
-import * as css from './ElementsColumn.css'
+import { buttonsva } from './_shared.css'
+import * as styles from './ElementsColumn.css'
 import { setPickView, useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput, stopAndPrevent } from './utils'
 import { NothingFound } from './ViewsColum'
@@ -54,6 +56,8 @@ function buildNode(
   }
 }
 
+const btn = buttonsva()
+
 export function ElementsColumn() {
   const search = useNormalizedSearch()
   const model = useLikeC4Model(true)
@@ -139,10 +143,10 @@ export function ElementsColumn() {
         data={data}
         levelOffset={'lg'}
         classNames={{
-          root: css.treeRoot,
-          node: clsx(css.focusable, css.treeNode),
-          label: css.treeLabel,
-          subtree: css.treeSubtree,
+          root: styles.treeRoot,
+          node: cx(styles.focusable, styles.treeNode),
+          label: styles.treeLabel,
+          subtree: styles.treeSubtree,
         }}
         onKeyDownCapture={(e) => {
           const target = e.target as HTMLElement
@@ -164,7 +168,7 @@ export function ElementsColumn() {
             const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
             const maxY = label.getBoundingClientRect().y
             const viewButtons = [...document.querySelectorAll<HTMLButtonElement>(
-              `[data-likec4-search-views] .${css.focusable}`,
+              `[data-likec4-search-views] .${styles.focusable}`,
             )]
             let view = viewButtons.length > 1
               ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
@@ -199,7 +203,7 @@ function ElementTreeNode(
       shape: element.shape,
       icon: element.icon,
     },
-    className: css.elementIcon,
+    className: cx(btn.icon, styles.elementIcon),
   })
   const views = [...element.views()]
 
@@ -213,7 +217,7 @@ function ElementTreeNode(
         variant="transparent"
         size={16}
         tabIndex={-1}
-        className={clsx(css.elementExpandIcon)}
+        className={clsx(styles.elementExpandIcon)}
         style={{
           visibility: hasChildren ? 'visible' : 'hidden',
         }}>
@@ -229,7 +233,7 @@ function ElementTreeNode(
         component={m.button}
         layout
         tabIndex={-1}
-        className={clsx(css.elementButton, 'likec4-element-button')}
+        className={clsx(btn.root, 'group', 'likec4-element-button')}
         {...views.length > 0 && {
           onClick: (e) => {
             if (!hasChildren || expanded) {
@@ -241,22 +245,25 @@ function ElementTreeNode(
       >
         {elementIcon}
         <Box style={{ flexGrow: 1 }}>
-          <Group gap={'xs'} wrap="nowrap" align="center" className={css.elementTitleAndId}>
-            <Highlight component="div" highlight={searchTerms} className={css.elementTitle}>
+          <Group gap={'xs'} wrap="nowrap" align="center" className={styles.elementTitleAndId}>
+            <Highlight component="div" highlight={searchTerms} className={btn.title!}>
               {node.label as any}
             </Highlight>
             <Tooltip label={element.id} withinPortal={false} fz={'xs'} disabled={!element.id.includes('.')}>
-              <Highlight component="div" highlight={searchTerms} className={css.elementId}>
+              <Highlight
+                component="div"
+                highlight={searchTerms}
+                className={cx(styles.elementId, btn.descriptionColor)}>
                 {nameFromFqn(element.id)}
               </Highlight>
             </Tooltip>
           </Group>
-          <Highlight component="div" highlight={searchTerms} className={css.elementDescription} lineClamp={1}>
+          <Highlight component="div" highlight={searchTerms} className={btn.description!} lineClamp={1}>
             {element.description || 'No description'}
           </Highlight>
         </Box>
 
-        <Text component="div" className={css.elementViewsCount}>
+        <Text component="div" className={cx(styles.elementViewsCount, btn.descriptionColor)} fz={'xs'}>
           {views.length === 0 ? 'No views' : (
             <>
               {views.length} view{views.length > 1 ? 's' : ''}

package/src/likec4diagram/ui/search/LikeC4Search.css.ts

@@ -1,24 +1,18 @@
-import { rem } from '@mantine/core'
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, whereLight } from '../../../theme-vars'
-import { button, buttonFocused } from './_shared.css'
+import { css } from '@likec4/styles/css'
 export { focusable } from './_shared.css'
 
-export const backdrop = style({
+export const backdrop = css({
   position: 'fixed',
   zIndex: 900,
-  inset: 0,
-  backgroundColor: 'rgb(34 34 34 / 0.95)',
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-
-  selectors: {
-    [`${whereLight} &`]: {
-      backgroundColor: 'rgb(255 255 255 / 0.92  )',
-    },
+  inset: '0px',
+  backgroundColor: '[rgb(34 34 34 / 0.95)]',
+  backdropFilter: 'auto',
+  backdropBlur: '10px',
+  _light: {
+    backgroundColor: '[rgb(255 255 255 / 0.92 )]',
   },
 })
-export const root = style({
+export const root = css({
   containerName: 'likec4-search',
   containerType: 'size',
   position: 'fixed',
@@ -32,85 +26,74 @@ export const root = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'stretch',
-  gap: mantine.spacing.md,
-  paddingTop: rem(32),
-  paddingLeft: rem(16),
-  paddingRight: rem(16),
+  gap: 'md',
+  paddingTop: '32px',
+  paddingLeft: '16px',
+  paddingRight: '16px',
   paddingBottom: 0,
 })
-export const input = style({
-  borderColor: 'transparent',
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-  backgroundColor: 'transparent',
-  ':focus-within': {
-    backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 45%)`,
-  },
-  selectors: {
-    [`${whereDark} &`]: {},
-    [`${whereDark} &:focus-within`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[4]}, transparent 45%)`,
+export const input = css({
+  border: 'transparent',
+  background: 'transparent',
+  _focusWithin: {
+    background: `mantine.colors.gray[3]/55`,
+    _dark: {
+      background: `mantine.colors.dark[4]/55`,
     },
   },
 })
 
-export const pickviewBackdrop = style({
+export const pickviewBackdrop = css({
   position: 'absolute',
   inset: 0,
   width: '100%',
   height: '100%',
-  backgroundColor: 'rgb(34 34 34 / 0.5)',
+  backgroundColor: '[rgb(34 34 34 / 0.7)]',
   zIndex: 902,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
-  selectors: {
-    [`${whereLight} &`]: {
-      backgroundColor: 'rgb(255 255 255 / 0.6  )',
-    },
+  backdropFilter: 'auto',
+  backdropBlur: '10px',
+  _light: {
+    backgroundColor: '[rgb(255 255 255 / 0.6)]',
   },
 })
-export const pickview = style({
+export const pickview = css({
   position: 'absolute',
   top: '2rem',
   left: '50%',
   width: '100%',
-  maxWidth: 600,
-  minWidth: 200,
+  maxWidth: '600px',
+  minWidth: '200px',
   transform: 'translateX(-50%)',
   zIndex: 903,
 })
 
-export const pickviewGroup = style({
-  marginTop: rem(8),
-  selectors: {
-    '& + &': {
-      marginTop: rem(32),
-    },
+export const pickviewGroup = css({
+  marginTop: '8px',
+  '& + &': {
+    marginTop: '32px',
   },
 })
 
-globalStyle(`${whereDark} ${pickview} ${button}`, {
-  borderColor: mantine.colors.dark[5],
-  backgroundColor: mantine.colors.dark[6],
-})
-globalStyle(`${whereDark} ${pickview} ${button}:hover`, {
-  ...buttonFocused,
-  backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
-})
-globalStyle(`${whereDark} ${pickview} ${button}:focus`, buttonFocused)
+// globalStyle(`${whereDark} ${pickview} ${button}`, {
+//   borderColor: mantine.colors.dark[5],
+//   backgroundColor: mantine.colors.dark[6],
+// })
+// globalStyle(`${whereDark} ${pickview} ${button}:hover`, {
+//   ...buttonFocused,
+//   backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+// })
+// globalStyle(`${whereDark} ${pickview} ${button}:focus`, buttonFocused)
 
-export const scrollArea = style({
+export const scrollArea = css({
   height: [
     '100%',
     '100cqh',
   ],
-})
-
-globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport`, {
-  minHeight: '100%',
-})
-
-globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport > div`, {
-  minHeight: '100%',
-  height: '100%',
+  '& .mantine-ScrollArea-viewport': {
+    minHeight: '100%',
+    '& > div': {
+      minHeight: '100%',
+      height: '100%',
+    },
+  },
 })

package/src/likec4diagram/ui/search/LikeC4Search.tsx

@@ -16,9 +16,7 @@ import {
   useDisclosure,
   useFocusReturn,
   useFocusTrap,
-  useFocusWithin,
   useHotkeys,
-  useMergedRef,
   useWindowEvent,
 } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
@@ -124,6 +122,7 @@ function LikeC4SearchOverlay() {
     <m.div
       ref={ref}
       className={css.root}
+      data-likec4-search
       // initial={{
       //   opacity: 0,
       //   // scale: 0.9,

package/src/likec4diagram/ui/search/SearchInput.tsx

@@ -130,7 +130,7 @@ export function LikeC4SearchInput() {
           combobox.closeDropdown()
           // Let react to display filtered elements
           setTimeout(() => {
-            document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+            document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
           }, 50)
         }
       }}
@@ -217,7 +217,7 @@ export function LikeC4SearchInput() {
             ) {
               combobox.closeDropdown()
               stopAndPrevent(e)
-              document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+              document.querySelector<HTMLButtonElement>(`[data-likec4-search] .${css.focusable}`)?.focus()
               return
             }
           }} />

package/src/likec4diagram/ui/search/ViewsColum.tsx

@@ -3,6 +3,7 @@ import {
   type Tag,
   isDeploymentView,
 } from '@likec4/core'
+import { cx } from '@likec4/styles/css'
 import {
   type ElementProps,
   type UnstyledButtonProps,
@@ -17,17 +18,17 @@ import {
   VisuallyHidden,
 } from '@mantine/core'
 import { IconStack2, IconZoomScan } from '@tabler/icons-react'
-import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { first } from 'remeda'
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { buttonsva } from './_shared.css'
 import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
 import { centerY, moveFocusToSearchInput } from './utils'
-import * as css from './ViewsColumn.css'
+import * as styles from './ViewsColumn.css'
 
 export const NothingFound = () => (
-  <Box className={css.emptyBoX}>
+  <Box className={styles.emptyBoX}>
     Nothing found
   </Box>
 )
@@ -96,6 +97,8 @@ export function ViewsColumn() {
   )
 }
 
+const btn = buttonsva()
+
 export function ViewButton(
   { className, view, loop = false, search, ...props }:
     & {
@@ -112,7 +115,7 @@ export function ViewButton(
   return (
     <UnstyledButton
       {...props}
-      className={clsx(css.focusable, css.viewButton, className)}
+      className={cx(btn.root, 'group', styles.focusable, styles.viewButton, className)}
       data-likec4-view={view.id}
       {...isCurrentView && { 'data-disabled': true }}
       onClick={(e) => {
@@ -132,14 +135,14 @@ export function ViewButton(
           }
         },
       })}>
-      <ThemeIcon variant="transparent">
+      <ThemeIcon variant="transparent" className={btn.icon!}>
         {isDeploymentView(view)
           ? <IconStack2 stroke={1.8} />
           : <IconZoomScan stroke={1.8} />}
       </ThemeIcon>
       <Box style={{ flexGrow: 1 }}>
         <Group gap={'xs'} wrap="nowrap" align="center">
-          <Highlight component="div" highlight={search} className={css.viewTitle}>
+          <Highlight component="div" highlight={search} className={btn.title!}>
             {view.title || 'untitled'}
           </Highlight>
           {isCurrentView && <Badge size="xs" fz={9} radius={'sm'}>current</Badge>}
@@ -147,7 +150,7 @@ export function ViewButton(
         <Highlight
           highlight={view.$view.description ? search : ''}
           component="div"
-          className={css.viewDescription}
+          className={btn.description!}
           lineClamp={1}>
           {view.$view.description || 'No description'}
         </Highlight>

package/src/likec4diagram/ui/search/ViewsColumn.css.ts

@@ -1,37 +1,38 @@
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
-import { button, description, descriptionColor, iconColor, title } from './_shared.css'
+import { css, cx } from '@likec4/styles/css'
+
+// import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+// import { mantine } from '../../../theme-vars'
+// import { button, description, descriptionColor, iconColor, title } from './_shared.css'
 
 export { emptyBoX, focusable } from './_shared.css'
 
-export const viewButton = style([button, {
-  flexWrap: 'nowrap',
-  display: 'flex',
-}])
+const _viewBtn = 'likec4-view-btn'
 
-globalStyle(`${viewButton} .mantine-ThemeIcon-root`, {
-  // transition: transitions.fast,
-  color: fallbackVar(iconColor, mantine.colors.dark[2]),
-  vars: {
-    '--ti-size': '24px',
-  },
-})
-globalStyle(`${viewButton}[data-disabled] .mantine-ThemeIcon-root`, {
-  opacity: 0.45,
-})
+export const viewButton = cx(
+  css({
+    flexWrap: 'nowrap',
+    display: 'flex',
+    // '& .mantine-ThemeIcon-root': {
+    //   color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+    //   '--ti-size': '24px',
+    // },
+    '&[data-disabled] .mantine-ThemeIcon-root': {
+      opacity: 0.45,
+    },
+  }),
+  _viewBtn,
+)
 
-export const viewTitle = style([title])
-export const viewDescription = style([description])
+// export const viewTitle = css(title)
+// export const viewDescription = css(description)
 
-export const viewButtonDescription = style({
-  marginTop: 4,
+export const viewButtonDescription = css({
+  marginTop: '4px',
   // transition: transitions.fast,
-  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
-  fontSize: 13,
-  lineHeight: 1.4,
-  selectors: {
-    [`:where(${viewButton}[data-disabled]) &`]: {
-      opacity: 0.85,
-    },
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: '13px',
+  lineHeight: '1.4',
+  [`:where(.likec4-view-btn[data-disabled]) &`]: {
+    opacity: 0.85,
   },
 })