@likec4/diagram 1.26.2 → 1.27.1

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,
   },
 })

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

@@ -1,103 +1,187 @@
-import { type StyleRule, createVar, fallbackVar, style } from '@vanilla-extract/css'
-import { mantine, whereDark, whereLight } from '../../../theme-vars'
+import { css, sva } from '@likec4/styles/css'
+import type { ColorToken } from '@likec4/styles/tokens'
 
-export const titleColor = createVar('title-color')
-export const descriptionColor = createVar('description-color')
-export const iconColor = createVar('icon-color')
+// export const titleColor = '--title-color'
+// export const descriptionColor = '---description-color'
+// export const iconColor = '--icon-color'
 
-export const buttonFocused = {
+const buttonFocused = css.raw({
   outline: 'none',
-  backgroundColor: mantine.colors.primaryColors[8],
-  borderColor: mantine.colors.primaryColors[9],
-  vars: {
-    [iconColor]: mantine.colors.primaryColors[2],
-    [titleColor]: mantine.colors.primaryColors[0],
-    [descriptionColor]: mantine.colors.primaryColors[1],
-  },
-} satisfies StyleRule
+  background: 'mantine.colors.primary[8]',
+  borderColor: 'mantine.colors.primary[9]',
+})
+
+const _treenodefocus = '.mantine-Tree-node:focus > .mantine-Tree-label &'
 
-export const button = style({
+function colors(color: ColorToken, hover: ColorToken) {
+  return {
+    color,
+    _groupHover: {
+      color: hover,
+    },
+    _groupFocus: {
+      color: hover,
+    },
+    [_treenodefocus]: {
+      color: hover,
+    },
+  }
+}
+
+const button = css.raw({
   display: 'flex',
   width: '100%',
-  background: mantine.colors.body,
-  borderRadius: mantine.radius.sm,
+  background: 'mantine.colors.body',
+  rounded: 'sm',
   padding: `12px 8px 12px 14px`,
-  minHeight: 60,
-  gap: 10,
+  minHeight: '60px',
+  gap: '8',
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
-  border: `1px solid ${mantine.colors.defaultBorder}`,
-  vars: {
-    [titleColor]: mantine.colors.dark[1],
-    [iconColor]: mantine.colors.dimmed,
-    [descriptionColor]: mantine.colors.dimmed,
-  },
-  ':hover': {
+  border: `1px solid`,
+  borderColor: 'mantine.colors.defaultBorder',
+  // [titleColor]: '{colors.mantine.colors.dark[1]}',
+  // [iconColor]: '{colors.mantine.colors.dimmed}',
+  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
+  _hover: {
     ...buttonFocused,
-    borderColor: mantine.colors.primaryColors[9],
-    backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+    borderColor: 'mantine.colors.primary[9]',
+    background: `mantine.colors.primary[8]/60`,
   },
-  ':focus': buttonFocused,
-  selectors: {
-    [`${whereDark} &`]: {
-      borderColor: 'transparent',
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
-      // background: mantine.colors.dark[6],
-    },
-    [`${whereLight} &`]: {
-      backgroundColor: `color-mix(in srgb, ${mantine.colors.white}, transparent 10%)`,
-      vars: {
-        [iconColor]: mantine.colors.gray[6],
-        [titleColor]: mantine.colors.gray[7],
-      },
-    },
-    [`${whereLight} &:hover`]: {
-      borderColor: mantine.colors.primaryColors[6],
-      backgroundColor: mantine.colors.primaryColors[5],
-      vars: {
-        [iconColor]: mantine.colors.primaryColors[3],
-        [titleColor]: mantine.colors.primaryColors[0],
-        [descriptionColor]: mantine.colors.primaryColors[1],
-      },
+  _focus: buttonFocused,
+  [_treenodefocus]: buttonFocused,
+  _dark: {
+    borderColor: 'transparent',
+    background: `mantine.colors.dark[6]/80`,
+    // background: 'mantine.colors.dark[6]',
+  },
+  _light: {
+    background: `mantine.colors.white/80`,
+    // [iconColor]: '{colors.mantine.colors.gray[6]}',
+    // [titleColor]: '{colors.mantine.colors.gray[7]}',
+    _hover: {
+      borderColor: 'mantine.colors.primary[6]',
+      backgroundColor: 'mantine.colors.primary[5]',
+      // [iconColor]: '{colors.mantine.colors.primary[3])',
+      // [titleColor]: '{colors.mantine.colors.primary[0])',
+      // [descriptionColor]: '{colors.mantine.colors.primary[1]}',
     },
   },
 })
 
-export const focusable = style({})
+export const focusable = 'likec4-focusable'
+
+const iconSize = {
+  ref: 'var(--likec4-icon-size, 24px)',
+}
+
+const icon = css.raw({
+  ...colors('mantine.colors.dimmed', 'mantine.colors.primary[0]'),
+  _light: {
+    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+  },
+  flex: `0 0 ${iconSize.ref}`,
+  height: iconSize.ref,
+  width: iconSize.ref,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
 
-export const title = style({
-  color: fallbackVar(titleColor, mantine.colors.gray[7]),
-  fontSize: 16,
+  ['--ti-size']: iconSize.ref,
+  [`& svg, & img`]: {
+    width: '100%',
+    height: 'auto',
+    maxHeight: '100%',
+    pointerEvents: 'none',
+  },
+  [`& img`]: {
+    objectFit: 'contain',
+  },
+  '&.likec4-shape-icon svg': {
+    // color: `[var(${iconColor})]`,
+    strokeWidth: 1.5,
+  },
+  // [iconSize]: '24px',
+  // [whenContainerIsNarrow]: {
+  //   [iconSize]: '18px',
+  // },
+})
+
+const title = css.raw({
+  fontSize: '16px',
   fontWeight: 500,
-  lineHeight: 1.1,
-  selectors: {
-    [`:where([data-disabled]) &`]: {
-      opacity: 0.4,
-    },
+  lineHeight: '1.1',
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.4,
+  },
+
+  // color: 'mantine.colors.dark[1]',
+  // _groupHover: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  // _groupFocus: {
+  //   color: 'mantine.colors.primary[1]',
+  // },
+  ...colors('mantine.colors.dark[1]', 'mantine.colors.primary[1]'),
+  _light: {
+    ...colors('mantine.colors.gray[6]', 'mantine.colors.primary[3]'),
+    // color: `mantine.colors.gray[6]`,
+    // _groupHover: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
+    // _groupFocus: {
+    //   color: 'mantine.colors.primary[3]',
+    // },
   },
 })
-export const description = style({
-  marginTop: 4,
-  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
-  fontSize: 12,
-  lineHeight: 1.4,
-  selectors: {
-    [`:where([data-disabled]) &`]: {
-      opacity: 0.85,
+const descriptionColor = css.raw({
+  color: {
+    base: 'mantine.colors.dimmed',
+    _groupHover: {
+      base: 'mantine.colors.primary[1]',
+      _light: 'mantine.colors.primary[0]',
     },
+    _groupFocus: 'mantine.colors.primary[0]',
+  },
+  [_treenodefocus]: {
+    color: 'mantine.colors.primary[0]',
+  },
+})
+
+const description = css.raw(descriptionColor, {
+  marginTop: '4px',
+  fontSize: '12px',
+  lineHeight: '1.4',
+
+  [`:where([data-disabled]) &`]: {
+    opacity: 0.85,
   },
 })
 
-export const emptyBoX = style({
+export const emptyBoX = css({
   width: '100%',
   height: '100%',
-  border: `2px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.md,
+  border: `2px dashed`,
+  borderColor: 'mantine.colors.defaultBorder',
+  rounded: 'md',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: mantine.fontSizes.md,
-  color: mantine.colors.dimmed,
-  padding: mantine.spacing.md,
-  paddingBlock: mantine.spacing.xl,
+  fontSize: 'md',
+  color: 'mantine.colors.dimmed',
+  padding: 'md',
+  paddingBlock: 'xl',
+})
+
+export const buttonsva = sva({
+  slots: ['root', 'icon', 'title', 'description', 'descriptionColor'],
+  className: 'search-button',
+  base: {
+    root: button,
+    icon,
+    title,
+    description,
+    descriptionColor,
+  },
 })