@likec4/diagram 1.26.2 → 1.27.1

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

@@ -1,14 +1,9 @@
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { easings, mantine, transitions, vars, whereDark, whereLight } from '../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const cardBg = createVar('card-bg')
-const cardBgImage = createVar('card-bg-top')
+export const backdropBlur = '--_blur'
+export const backdropOpacity = '--_opacity'
 
-export const backdropBlur = createVar('backdrop-blur')
-export const backdropOpacity = createVar('backdrop-opacity')
-
-export const dialog = style({
+export const dialog = css({
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,
@@ -18,68 +13,55 @@ export const dialog = style({
   height: '100vh',
   maxWidth: '100vw',
   maxHeight: '100vh',
-  background: 'transparent',
-  border: '0 solid transparent',
-  vars: {
-    [backdropOpacity]: '0%',
-    [backdropBlur]: '0px',
-  },
-  selectors: {
-    [`&::backdrop`]: {
-      WebkitBackdropFilter: `blur(${backdropBlur})`,
-      backdropFilter: `blur(${backdropBlur})`,
-      backgroundColor: `rgb(36 36 36 / ${backdropOpacity})`,
-    },
+  background: '[transparent]',
+  border: 'transparent',
+  _backdrop: {
+    // WebkitBackdropFilter: `blur(${backdropBlur})`,
+    backdropFilter: 'auto',
+    backdropBlur: `var(${backdropBlur})`,
+    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`,
   },
 })
-export const card = style({
+export const card = css({
   position: 'absolute',
   pointerEvents: 'all',
-  gap: mantine.spacing.lg,
+  gap: 'lg',
   justifyContent: 'stretch',
-  vars: {
-    [cardBg]: mantine.colors.body,
-    [cardBgImage]: `linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)`,
-  },
-  backgroundColor: cardBg,
-  backgroundImage: cardBgImage,
-  borderTopColor: vars.element.fill,
-  selectors: {
-    [`${whereDark} &`]: {
-      vars: {
-        [cardBg]: mantine.colors.dark[6],
-        [cardBgImage]: `
-          linear-gradient(180deg, color-mix(in srgb, ${vars.element.fill} 15%, transparent), transparent 80px),
-          linear-gradient(180deg, ${vars.element.fill}, ${vars.element.fill} 4px, transparent 4px)
+  backgroundColor: 'mantine.colors.body',
+  backgroundImage:
+    `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
+  borderTopColor: 'likec4.palette.fill',
+  _dark: {
+    backgroundColor: `mantine.colors.dark[6]`,
+    backgroundImage: `
+          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
+          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
         `,
-      },
-    },
+  },
+  '& .react-flow__attribution': {
+    display: 'none',
   },
 })
 
-export const cardHeader = style({
+export const cardHeader = css({
   flex: 0,
   cursor: 'move',
 })
 
-globalStyle(`:where(${card}) .react-flow__attribution`, {
-  display: 'none',
-})
-
-export const title = style({
+export const title = css({
   display: 'block',
-  fontFamily: vars.element.font,
+  fontFamily: 'likec4.element',
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 600,
-  fontSize: 24,
+  fontSize: '24px',
   // lineHeight: 1.15,
-  lineHeight: mantine.lineHeights.xs,
+  lineHeight: 'xs',
   // color: vars.element.hiContrast
 })
 
 const iconSize = '40px'
-export const elementIcon = style({
+export const elementIcon = css({
   flex: `0 0 ${iconSize}`,
   height: iconSize,
   width: iconSize,
@@ -88,93 +70,80 @@ export const elementIcon = style({
   justifyContent: 'center',
   alignSelf: 'flex-start',
   cursor: 'move',
-  selectors: {
-    [`${whereDark} &`]: {
-      mixBlendMode: 'hard-light',
-    },
+  _dark: {
+    mixBlendMode: 'hard-light',
   },
-})
-globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-  filter: `
+  '& :where(svg, img)': {
+    width: '100%',
+    height: 'auto',
+    maxHeight: '100%',
+    pointerEvents: 'none',
+    filter: `
     drop-shadow(0 0 3px rgb(0 0 0 / 10%))
     drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
     drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
   `,
-})
-globalStyle(`${elementIcon} img`, {
-  objectFit: 'contain',
+  },
+  '& img': {
+    objectFit: 'contain',
+  },
 })
 
-const viewTitleColor = createVar('view-title-color')
-const iconColor = createVar('icon-color')
-export const viewButton = style({
+const viewTitleColor = '--view-title-color'
+const iconColor = '--icon-color'
+export const viewButton = css({
   // display: 'flex',
   width: '100%',
-  background: mantine.colors.body,
-  borderRadius: mantine.radius.sm,
+  background: 'mantine.colors.body',
+  borderRadius: 'sm',
   padding: `10px 8px`,
   // gap: 6,
   // alignItems: 'flex-start',
-  transition: transitions.fast,
-  border: `1px solid ${mantine.colors.defaultBorder}`,
-  vars: {
-    [viewTitleColor]: mantine.colors.dark[1],
+  transition: 'fast',
+  border: `1px dashed`,
+  borderColor: 'mantine.colors.defaultBorder',
+  [viewTitleColor]: '{colors.mantine.colors.dark[1]}',
+  _hover: {
+    background: 'mantine.colors.defaultHover',
+    [iconColor]: '{colors.mantine.colors.dark[1]}',
+    [viewTitleColor]: '{colors.mantine.colors.defaultColor}',
   },
-  ':hover': {
-    background: mantine.colors.defaultHover,
-    vars: {
-      [iconColor]: mantine.colors.dark[1],
-      [viewTitleColor]: mantine.colors.defaultColor,
-    },
+  _dark: {
+    background: 'mantine.colors.dark[6]',
   },
-  selectors: {
-    [`${whereDark} &`]: {
-      background: mantine.colors.dark[6],
-    },
-    [`${whereLight} &`]: {
-      vars: {
-        [iconColor]: mantine.colors.gray[6],
-        [viewTitleColor]: mantine.colors.gray[7],
-      },
-    },
-    [`${whereLight} &:hover`]: {
-      vars: {
-        [iconColor]: mantine.colors.gray[7],
-      },
+  _light: {
+    [iconColor]: '{colors.mantine.colors.gray[6]}',
+    [viewTitleColor]: '{colors.mantine.colors.gray[7]}',
+    _hover: {
+      [iconColor]: '{colors.mantine.colors.gray[7]}',
     },
   },
-})
 
-globalStyle(`${viewButton} .mantine-ThemeIcon-root`, {
-  transition: transitions.fast,
-  color: fallbackVar(iconColor, mantine.colors.dark[2]),
-  vars: {
+  '& .mantine-ThemeIcon-root': {
+    transition: 'fast',
+    // color: fallbackVar(iconColor, 'mantine.colors.dark[2])',
+    color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
     '--ti-size': '22px',
+    _hover: {
+      color: 'mantine.colors.defaultColor',
+    },
   },
-})
-
-globalStyle(`${viewButton} .mantine-ThemeIcon-root:hover`, {
-  color: mantine.colors.defaultColor,
-})
 
-globalStyle(`${viewButton} > *`, {
-  transition: `all 130ms ${easings.inOut}`,
-})
-globalStyle(`${viewButton}:hover > *`, {
-  transitionTimingFunction: easings.out,
-  transform: 'translateX(1.6px)',
+  '& > *': {
+    transition: `all 130ms {easings.inOut}`,
+  },
+  '&:hover > *': {
+    transitionTimingFunction: 'out',
+    transform: 'translateX(1.6px)',
+  },
 })
 
-export const viewButtonTitle = style({
-  transition: transitions.fast,
-  color: fallbackVar(viewTitleColor, mantine.colors.gray[7]),
-  fontSize: 15,
+export const viewButtonTitle = css({
+  transition: 'fast',
+  color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+  fontSize: '15px',
   fontWeight: 500,
-  lineHeight: 1.4,
+  lineHeight: '1.4',
 })
 // globalStyle(`${viewButton} .tabler-icon`, {
 //   width: '85%',
@@ -188,110 +157,107 @@ export const viewButtonTitle = style({
 //   color: mantine.colors.dark[3]
 // })
 
-export const tabsRoot = style({
+export const tabsRoot = css({
   flex: 1,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'stretch',
   overflow: 'hidden',
-  gap: mantine.spacing.sm,
+  gap: 'sm',
 })
 
-export const tabsList = style({
+export const tabsList = css({
   // flex: '0',
-  background: mantine.colors.gray[1],
-  borderRadius: mantine.radius.sm,
+  background: 'mantine.colors.gray[1]',
+  borderRadius: 'sm',
   flexWrap: 'nowrap',
-  gap: 6,
-  padding: 4,
-  selectors: {
-    [`${whereDark} &`]: {
-      background: mantine.colors.dark[7],
-    },
+  gap: '6px',
+  padding: '4px',
+  _dark: {
+    background: 'mantine.colors.dark[7]',
   },
 })
 
-export const tabsTab = style({
-  fontSize: mantine.fontSizes.xs,
+export const tabsTab = css({
+  fontSize: 'xs',
   fontWeight: 500,
   flexGrow: 1,
   padding: '6px 8px',
-  transition: transitions.fast,
-  borderRadius: mantine.radius.sm,
-  color: mantine.colors.gray[7],
-  ':hover': {
-    transitionTimingFunction: easings.out,
-    color: mantine.colors.defaultColor,
-    background: mantine.colors.gray[3],
+  transition: 'fast',
+  borderRadius: 'sm',
+  color: 'mantine.colors.gray[7]',
+  _hover: {
+    transitionTimingFunction: 'out',
+    color: 'mantine.colors.defaultColor',
+    background: 'mantine.colors.gray[3]',
   },
-  selectors: {
-    ['&[data-active]']: {
-      transition: 'none',
-      background: mantine.colors.white,
-      boxShadow: mantine.shadows.xs,
-      color: mantine.colors.defaultColor,
-    },
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[1],
-    },
-    [`${whereDark} &:hover`]: {
-      color: mantine.colors.white,
-      background: mantine.colors.dark[6],
+  ['&[data-active]']: {
+    transition: 'none',
+    background: 'mantine.colors.white',
+    shadow: 'xs',
+    color: 'mantine.colors.defaultColor',
+  },
+  _dark: {
+    color: 'mantine.colors.dark[1]',
+    _hover: {
+      color: 'mantine.colors.white',
+      background: 'mantine.colors.dark[6]',
     },
-    [`${whereDark} &:is([data-active])`]: {
-      color: mantine.colors.white,
-      background: mantine.colors.dark[5],
+
+    [`&:is([data-active])`]: {
+      color: 'mantine.colors.white',
+      background: 'mantine.colors.dark[5]',
     },
   },
 })
 
-export const tabsPanel = style({
+export const tabsPanel = css({
   flex: 1,
   overflow: 'hidden',
   position: 'relative',
+  '&:not(:has(.mantine-ScrollArea-root))': {
+    paddingLeft: '4px',
+    paddingRight: '4px',
+  },
+  '& .mantine-ScrollArea-root': {
+    width: '100%',
+    height: '100%',
+    '& > div': {
+      paddingLeft: '4px',
+      paddingRight: '4px',
+    },
+  },
 })
 
-globalStyle(`${tabsPanel}:not(:has(.mantine-ScrollArea-root))`, {
-  paddingLeft: 4,
-  paddingRight: 4,
-})
-globalStyle(`${tabsPanel} .mantine-ScrollArea-root`, {
-  width: '100%',
-  height: '100%',
-})
-globalStyle(`${tabsPanel} .mantine-ScrollArea-viewport > div`, {
-  paddingLeft: 4,
-  paddingRight: 4,
-})
-
-export const propertiesGrid = style({
+export const propertiesGrid = css({
   flex: 1,
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
-  gap: `${rem(20)} ${rem(16)}`,
+  gap: `[20px 16px]`,
   alignItems: 'baseline',
   justifyItems: 'stretch',
 })
 
-export const propertyLabel = style({
+export const propertyLabel = css({
   justifySelf: 'end',
 })
 
-export const resizeHandle = style({
+export const resizeHandle = css({
   position: 'absolute',
-  width: 14,
-  height: 14,
-  border: `3.5px solid ${mantine.colors.dark[3]}`,
+  width: '14px',
+  height: '14px',
+  border: `3.5px solid`,
+  borderColor: 'mantine.colors.dark[3]',
   borderTop: 'none',
   borderLeft: 'none',
-  borderRadius: 2,
-  bottom: 2,
-  right: 2,
-  transition: transitions.fast,
+  borderRadius: '2px',
+  bottom: '2px',
+  right: '2px',
+  transition: 'fast',
   cursor: 'se-resize',
-  ':hover': {
-    borderWidth: 4,
-    borderColor: mantine.colors.dark[1],
+  _hover: {
+    borderWidth: '4px',
+    borderColor: 'mantine.colors.dark[1]',
   },
 })

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

@@ -9,6 +9,7 @@ import {
   isDeploymentView,
   isScopedElementView,
 } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
 import {
   type TextProps,
   ActionIcon,
@@ -37,7 +38,6 @@ import { useSessionStorage, useViewportSize } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
 import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
 import type { Rect } from '@xyflow/system'
-import clsx from 'clsx'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'framer-motion'
 import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
@@ -48,15 +48,11 @@ import { useDiagram } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
 import { useLikeC4Model } from '../../likec4model'
 import { stopPropagation } from '../../utils'
-import { getVarName } from '../../utils/css'
-import * as css from './ElementDetailsCard.css'
+import * as styles from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
 import { TabPanelRelationships } from './TabPanelRelationships'
 import { TabPanelStructure } from './TabPanelStructure'
 
-const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
-const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
-
 const Divider = MantineDivider.withProps({
   mb: 8,
   labelPosition: 'left',
@@ -84,7 +80,7 @@ const PropertyLabel = Text.withProps({
   component: 'div',
   fz: 'xs',
   c: 'dimmed',
-  className: css.propertyLabel,
+  className: styles.propertyLabel,
 })
 
 type ElementDetailsCardProps = {
@@ -210,7 +206,7 @@ export function ElementDetailsCard({
       title: elementModel.title,
       icon: nodeModel?.icon ?? elementModel.icon,
     },
-    className: css.elementIcon,
+    className: styles.elementIcon,
   })
 
   useTimeoutEffect(() => {
@@ -226,20 +222,20 @@ export function ElementDetailsCard({
   return (
     <m.dialog
       ref={ref}
-      className={clsx(css.dialog, RemoveScroll.classNames.fullWidth)}
+      className={cx(styles.dialog, RemoveScroll.classNames.fullWidth)}
       layout
       layoutRoot
       initial={{
-        [backdropBlur]: '0px',
-        [backdropOpacity]: '10%',
+        [styles.backdropBlur]: '0px',
+        [styles.backdropOpacity]: '5%',
       }}
       animate={{
-        [backdropBlur]: '3px',
-        [backdropOpacity]: '60%',
+        [styles.backdropBlur]: '3px',
+        [styles.backdropOpacity]: '60%',
       }}
       exit={{
-        [backdropBlur]: '0px',
-        [backdropOpacity]: '0%',
+        [styles.backdropBlur]: '0px',
+        [styles.backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },
@@ -267,7 +263,12 @@ export function ElementDetailsCard({
           withBorder
           shadow="md"
           component={m.div}
-          className={css.card}
+          className={cx(
+            css({
+              likec4Palette: nodeModel?.color ?? elementModel.color,
+            }),
+            styles.card,
+          )}
           initial={{
             top,
             left,
@@ -276,7 +277,7 @@ export function ElementDetailsCard({
             opacity: 0,
             originX,
             originY,
-            scale: Math.max(fromScale, 0.7),
+            scale: Math.max(fromScale, 0.65),
           }}
           animate={{
             opacity: 1,
@@ -294,10 +295,9 @@ export function ElementDetailsCard({
             // `style` prop in Mantine doesn't accept motion values
             width: width as any,
             height: height as any,
-          }}
-          data-likec4-color={nodeModel?.color ?? elementModel.color}>
+          }}>
           <Box
-            className={css.cardHeader}
+            className={styles.cardHeader}
             onPointerDown={e => controls.start(e)}>
             <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
               <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
@@ -305,7 +305,7 @@ export function ElementDetailsCard({
                 <Box>
                   <Text
                     component={'div'}
-                    className={css.title}>
+                    className={styles.title}>
                     {elementModel.title}
                   </Text>
                   {notation && (
@@ -390,10 +390,10 @@ export function ElementDetailsCard({
             onChange={v => setActiveTab(v as any)}
             variant="none"
             classNames={{
-              root: css.tabsRoot,
-              list: css.tabsList,
-              tab: css.tabsTab,
-              panel: css.tabsPanel,
+              root: styles.tabsRoot,
+              list: styles.tabsList,
+              tab: styles.tabsTab,
+              panel: styles.tabsPanel,
             }}>
             <TabsList>
               {TABS.map(tab => (
@@ -405,7 +405,7 @@ export function ElementDetailsCard({
 
             <TabsPanel value="Properties">
               <ScrollArea scrollbars="y" type="auto">
-                <Box className={css.propertiesGrid} pt={'xs'}>
+                <Box className={styles.propertiesGrid} pt={'xs'}>
                   <ElementProperty title="description" emptyValue="no description">
                     {elementModel.description}
                   </ElementProperty>
@@ -487,7 +487,7 @@ export function ElementDetailsCard({
             </TabsPanel>
           </Tabs>
           <m.div
-            className={css.resizeHandle}
+            className={styles.resizeHandle}
             drag
             dragElastic={0}
             dragMomentum={false}
@@ -507,7 +507,7 @@ const ViewButton = ({
   onNavigateTo: OnNavigateTo
 }) => {
   return (
-    <UnstyledButton className={css.viewButton} onClick={e => onNavigateTo(view.id, e)}>
+    <UnstyledButton className={styles.viewButton} onClick={e => onNavigateTo(view.id, e)}>
       <Group gap={6} align="start" wrap="nowrap">
         <ThemeIcon size={'sm'} variant="transparent">
           {isDeploymentView(view)
@@ -515,7 +515,7 @@ const ViewButton = ({
             : <IconZoomScan stroke={1.8} />}
         </ThemeIcon>
         <Box>
-          <Text component="div" className={css.viewButtonTitle} lineClamp={1}>
+          <Text component="div" className={styles.viewButtonTitle} lineClamp={1}>
             {view.title || 'untitled'}
           </Text>
           {view.description && (