@likec4/diagram 1.26.2 → 1.27.1

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: {

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' : ''}