@likec4/diagram 1.55.0 → 1.56.0

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -1,39 +1,38 @@
-import { css } from '@likec4/styles/css';
-
-const backdropBlur = "--_blur";
-const backdropOpacity = "--_opacity";
-const dialog = css({
-  boxSizing: "border-box",
-  margin: "0",
-  padding: "0",
-  position: "fixed",
-  inset: "0",
-  width: "100vw",
-  height: "100vh",
-  maxWidth: "100vw",
-  maxHeight: "100vh",
-  background: "transparent",
-  border: "transparent",
-  _backdrop: {
-    // WebkitBackdropFilter: `blur(${backdropBlur})`,
-    backdropFilter: "auto",
-    backdropBlur: `var(${backdropBlur})`,
-    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
-  }
+import { css } from "@likec4/styles/css";
+//#region src/overlays/element-details/ElementDetailsCard.css.ts
+var backdropBlur = "--_blur";
+var backdropOpacity = "--_opacity";
+var dialog = css({
+	boxSizing: "border-box",
+	margin: "0",
+	padding: "0",
+	position: "fixed",
+	inset: "0",
+	width: "100vw",
+	height: "100vh",
+	maxWidth: "100vw",
+	maxHeight: "100vh",
+	background: "transparent",
+	border: "transparent",
+	_backdrop: {
+		backdropFilter: "auto",
+		backdropBlur: `var(${backdropBlur})`,
+		backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`
+	}
 });
-const card = css({
-  position: "absolute",
-  pointerEvents: "all",
-  display: "flex",
-  flexDirection: "column",
-  padding: "4",
-  gap: "lg",
-  justifyContent: "stretch",
-  color: "text",
-  boxShadow: "md",
-  overflow: "hidden",
-  border: "none",
-  background: `[
+var card = css({
+	position: "absolute",
+	pointerEvents: "all",
+	display: "flex",
+	flexDirection: "column",
+	padding: "4",
+	gap: "lg",
+	justifyContent: "stretch",
+	color: "text",
+	boxShadow: "md",
+	overflow: "hidden",
+	border: "none",
+	background: `[
     linear-gradient(180deg,
     color-mix(in oklab, var(--likec4-palette-fill) 60%, transparent),
     color-mix(in oklab, var(--likec4-palette-fill) 20%, transparent) 8px,
@@ -43,205 +42,185 @@ const card = css({
     linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px),
     {colors.likec4.overlay.body}
   ]`,
-  "& .react-flow__attribution": {
-    display: "none"
-  }
+	"& .react-flow__attribution": { display: "none" }
 });
-const cardHeader = css({
-  flex: 0,
-  cursor: "move"
+var cardHeader = css({
+	flex: 0,
+	cursor: "move"
 });
-const title = css({
-  display: "block",
-  fontFamily: "likec4.element",
-  fontOpticalSizing: "auto",
-  fontStyle: "normal",
-  fontWeight: "bold",
-  fontSize: "24px",
-  // lineHeight: 1.15,
-  lineHeight: "xs"
-  // color: vars.element.hiContrast
+var title = css({
+	display: "block",
+	fontFamily: "likec4.element",
+	fontOpticalSizing: "auto",
+	fontStyle: "normal",
+	fontWeight: "bold",
+	fontSize: "24px",
+	lineHeight: "xs",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	wordBreak: "break-word",
+	lineClamp: 2
 });
-const iconSize = "40px";
-const elementIcon = css({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  alignSelf: "flex-start",
-  cursor: "move",
-  _dark: {
-    mixBlendMode: "hard-light"
-  },
-  "& :where(svg, img)": {
-    width: "100%",
-    height: "auto",
-    maxHeight: "100%",
-    pointerEvents: "none",
-    filter: `
+var iconSize = "40px";
+var elementIcon = css({
+	flex: `0 0 ${iconSize}`,
+	height: iconSize,
+	width: iconSize,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	alignSelf: "flex-start",
+	cursor: "move",
+	_dark: { mixBlendMode: "hard-light" },
+	"& :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%))
   `
-  },
-  "& img": {
-    objectFit: "contain"
-  }
+	},
+	"& img": { objectFit: "contain" }
 });
-const viewTitleColor = "--view-title-color";
-const iconColor = "--icon-color";
-const viewButton = css({
-  // display: 'flex',
-  width: "100%",
-  background: "body",
-  borderRadius: "sm",
-  padding: `[10px 8px]`,
-  // gap: 6,
-  // alignItems: 'flex-start',
-  transition: "fast",
-  border: `1px dashed`,
-  borderColor: "default.border",
-  [viewTitleColor]: "{colors.mantine.colors.dark[1]}",
-  _hover: {
-    background: "default.hover",
-    [iconColor]: "{colors.mantine.colors.dark[1]}",
-    [viewTitleColor]: "{colors.default.color}"
-  },
-  _dark: {
-    background: "mantine.colors.dark[6]"
-  },
-  _light: {
-    [iconColor]: "{colors.mantine.colors.gray[6]}",
-    [viewTitleColor]: "{colors.mantine.colors.gray[7]}",
-    _hover: {
-      [iconColor]: "{colors.mantine.colors.gray[7]}"
-    }
-  },
-  "& .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: "default.color"
-    }
-  },
-  "& > *": {
-    transition: `all 130ms {easings.inOut}`
-  },
-  "&:hover > *": {
-    transitionTimingFunction: "out",
-    transform: "translateX(1.6px)"
-  }
+var viewTitleColor = "--view-title-color";
+var iconColor = "--icon-color";
+var viewButton = css({
+	width: "100%",
+	background: "body",
+	borderRadius: "sm",
+	padding: `[10px 8px]`,
+	transition: "fast",
+	border: `1px dashed`,
+	borderColor: "default.border",
+	[viewTitleColor]: "{colors.mantine.colors.dark[1]}",
+	_hover: {
+		background: "default.hover",
+		[iconColor]: "{colors.mantine.colors.dark[1]}",
+		[viewTitleColor]: "{colors.default.color}"
+	},
+	_dark: { background: "mantine.colors.dark[6]" },
+	_light: {
+		[iconColor]: "{colors.mantine.colors.gray[6]}",
+		[viewTitleColor]: "{colors.mantine.colors.gray[7]}",
+		_hover: { [iconColor]: "{colors.mantine.colors.gray[7]}" }
+	},
+	"& .mantine-ThemeIcon-root": {
+		transition: "fast",
+		color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+		"--ti-size": "22px",
+		_hover: { color: "default.color" }
+	},
+	"& > *": { transition: `all 130ms {easings.inOut}` },
+	"&:hover > *": {
+		transitionTimingFunction: "out",
+		transform: "translateX(1.6px)"
+	}
 });
-const viewButtonTitle = css({
-  transition: "fast",
-  color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
-  fontSize: "15px",
-  fontWeight: "medium",
-  lineHeight: "1.4"
+var viewButtonTitle = css({
+	transition: "fast",
+	color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+	fontSize: "15px",
+	fontWeight: "medium",
+	lineHeight: "1.4"
 });
-const tabsRoot = css({
-  flex: 1,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "stretch",
-  overflow: "hidden",
-  gap: "sm"
+var tabsRoot = css({
+	flex: 1,
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "stretch",
+	overflow: "hidden",
+	gap: "sm"
 });
-const tabsList = css({
-  // flex: '0',
-  background: "mantine.colors.gray[1]",
-  borderRadius: "sm",
-  flexWrap: "nowrap",
-  gap: "1.5",
-  // 6px
-  padding: "1",
-  _dark: {
-    background: "mantine.colors.dark[7]"
-  }
+var tabsList = css({
+	background: "mantine.colors.gray[1]",
+	borderRadius: "sm",
+	flexWrap: "nowrap",
+	gap: "1.5",
+	padding: "1",
+	_dark: { background: "mantine.colors.dark[7]" }
 });
-const tabsTab = css({
-  fontSize: "xs",
-  fontWeight: "medium",
-  flexGrow: 1,
-  padding: "[6px 8px]",
-  transition: "fast",
-  borderRadius: "sm",
-  color: "mantine.colors.gray[7]",
-  _hover: {
-    transitionTimingFunction: "out",
-    color: "default.color",
-    background: "mantine.colors.gray[3]"
-  },
-  ["&[data-active]"]: {
-    transition: "none",
-    background: "white",
-    shadow: "xs",
-    color: "default.color"
-  },
-  _dark: {
-    color: "mantine.colors.dark[1]",
-    _hover: {
-      color: "white",
-      background: "mantine.colors.dark[6]"
-    },
-    [`&:is([data-active])`]: {
-      color: "white",
-      background: "mantine.colors.dark[5]"
-    }
-  }
+var tabsTab = css({
+	fontSize: "xs",
+	fontWeight: "medium",
+	flexGrow: 1,
+	padding: "[6px 8px]",
+	transition: "fast",
+	borderRadius: "sm",
+	color: "mantine.colors.gray[7]",
+	_hover: {
+		transitionTimingFunction: "out",
+		color: "default.color",
+		background: "mantine.colors.gray[3]"
+	},
+	["&[data-active]"]: {
+		transition: "none",
+		background: "white",
+		shadow: "xs",
+		color: "default.color"
+	},
+	_dark: {
+		color: "mantine.colors.dark[1]",
+		_hover: {
+			color: "white",
+			background: "mantine.colors.dark[6]"
+		},
+		[`&:is([data-active])`]: {
+			color: "white",
+			background: "mantine.colors.dark[5]"
+		}
+	}
 });
-const tabsPanel = css({
-  flex: 1,
-  overflow: "hidden",
-  position: "relative",
-  "&:not(:has(.mantine-ScrollArea-root))": {
-    paddingLeft: "1",
-    paddingRight: "1"
-  },
-  "& .mantine-ScrollArea-root": {
-    width: "100%",
-    height: "100%",
-    "& > div": {
-      paddingLeft: "1",
-      paddingRight: "1"
-    }
-  }
+var tabsPanel = css({
+	flex: 1,
+	overflow: "hidden",
+	position: "relative",
+	"&:not(:has(.mantine-ScrollArea-root))": {
+		paddingLeft: "1",
+		paddingRight: "1"
+	},
+	"& .mantine-ScrollArea-root": {
+		width: "100%",
+		height: "100%",
+		"& > div": {
+			paddingLeft: "1",
+			paddingRight: "1"
+		}
+	}
 });
-const propertiesGrid = css({
-  flex: 1,
-  display: "grid",
-  gridTemplateColumns: "min-content 1fr",
-  gridAutoRows: "min-content max-content",
-  gap: `[24px 20px]`,
-  alignItems: "baseline",
-  justifyItems: "stretch"
+var propertiesGrid = css({
+	flex: 1,
+	display: "grid",
+	gridTemplateColumns: "min-content 1fr",
+	gridAutoRows: "min-content max-content",
+	gap: `[24px 20px]`,
+	alignItems: "baseline",
+	justifyItems: "stretch"
 });
-const propertyLabel = css({
-  justifySelf: "end",
-  textAlign: "right",
-  userSelect: "none"
+var propertyLabel = css({
+	justifySelf: "end",
+	textAlign: "right",
+	userSelect: "none"
 });
-const resizeHandle = css({
-  position: "absolute",
-  width: "14px",
-  height: "14px",
-  border: `3.5px solid`,
-  borderColor: "mantine.colors.dark[3]",
-  borderTop: "none",
-  borderLeft: "none",
-  borderRadius: "xs",
-  bottom: "0.5",
-  right: "0.5",
-  transition: "fast",
-  cursor: "se-resize",
-  _hover: {
-    borderWidth: "4px",
-    borderColor: "mantine.colors.dark[1]"
-  }
+var resizeHandle = css({
+	position: "absolute",
+	width: "14px",
+	height: "14px",
+	border: `3.5px solid`,
+	borderColor: "mantine.colors.dark[3]",
+	borderTop: "none",
+	borderLeft: "none",
+	borderRadius: "xs",
+	bottom: "0.5",
+	right: "0.5",
+	transition: "fast",
+	cursor: "se-resize",
+	_hover: {
+		borderWidth: "4px",
+		borderColor: "mantine.colors.dark[1]"
+	}
 });
-
+//#endregion
 export { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, viewButton, viewButtonTitle };