@likec4/styles 1.32.2 → 1.34.0

package/preset.mjs

@@ -4171,23 +4171,23 @@ const theme$1 = {
       likec4: {
         xs: {
           description: "LikeC4 style text size: xs",
-          value: "0.750rem"
+          value: "0.833rem"
         },
         sm: {
           description: "LikeC4 style text size: sm",
-          value: "0.875rem"
+          value: "1.00rem"
         },
         md: {
           description: "LikeC4 style text size: md",
-          value: "1.19rem"
+          value: "1.20rem"
         },
         lg: {
           description: "LikeC4 style text size: lg",
-          value: "1.50rem"
+          value: "1.44rem"
         },
         xl: {
           description: "LikeC4 style text size: xl",
-          value: "2.00rem"
+          value: "1.73rem"
         }
       }
     },
@@ -6422,10 +6422,247 @@ const likec4tag = defineRecipe({
     conditions: ["hover"]
   }]
 });
+const markdownBlock = defineRecipe({
+  className: "likec4-markdown-block",
+  jsx: ["MarkdownBlock"],
+  base: {
+    pointerEvents: "all",
+    "--text-fz": "1rem",
+    "--typography-spacing": "calc(0.75 * var(--text-fz) * var(--mantine-scale, 1))",
+    "--text-fz-sm": "calc(var(--text-fz) * var(--mantine-scale) / 1.125)",
+    "--text-fz-md": "calc(var(--text-fz) * var(--mantine-scale))",
+    "--text-fw-headings": "600",
+    paddingBottom: "calc(.5 * var(--typography-spacing) + 1px)",
+    fontSize: "var(--text-fz-md)",
+    "& :first-child": {
+      marginTop: 0
+    },
+    "& :last-child": {
+      marginBottom: 0
+    },
+    "& :where(h1, h2, h3, h4, h5, h6)": {
+      lineHeight: "1.5",
+      textWrap: "var(--mantine-heading-text-wrap)",
+      fontFamily: "var(--mantine-font-family-headings)",
+      marginBottom: "var(--typography-spacing)"
+    },
+    "& :is(h1, h2, h3, h4, h5, h6):not(:first-child)": {
+      marginTop: "var(--typography-spacing)"
+    },
+    "& :is(h1)": {
+      fontSize: "calc(1.476 * var(--text-fz) * var(--mantine-scale, 1))",
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :is(h2)": {
+      fontSize: "calc(1.383 * var(--text-fz) * var(--mantine-scale, 1))",
+      // lineHeight: 'var(--mantine-h2-line-height)',
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :is(h3)": {
+      fontSize: "calc(1.296 * var(--text-fz) * var(--mantine-scale, 1))",
+      // lineHeight: 'var(--mantine-h3-line-height)',
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :is(h4)": {
+      fontSize: "calc(1.215 * var(--text-fz) * var(--mantine-scale, 1))",
+      // lineHeight: 'var(--mantine-h4-line-height)',
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :is(h5)": {
+      fontSize: "calc(1.138 * var(--text-fz) * var(--mantine-scale, 1))",
+      // lineHeight: 'var(--mantine-h4-line-height)',
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :is(h6)": {
+      fontSize: "calc(1.067 * var(--text-fz) * var(--mantine-scale, 1))",
+      // lineHeight: 'var(--mantine-h4-line-height)',
+      fontWeight: "var(--text-fw-headings)"
+    },
+    "& :where(img)": {
+      maxWidth: "100%",
+      marginBottom: "var(--typography-spacing)"
+    },
+    "& :where(p)": {
+      fontSize: "var(--text-fz-md)",
+      marginTop: "0",
+      marginBottom: "var(--typography-spacing)",
+      whiteSpace: "preserve-breaks"
+    },
+    "& :where(strong)": {
+      fontWeight: "500"
+    },
+    "& :where(mark)": {
+      fontSize: "var(--text-fz-md)",
+      _light: {
+        backgroundColor: "mantine.colors.yellow[2]",
+        color: "inherit"
+      },
+      _dark: {
+        backgroundColor: "mantine.colors.yellow[5]",
+        color: "mantine.colors.black"
+      }
+    },
+    "& :where(a)": {
+      fontSize: "var(--text-fz-md)",
+      color: "var(--mantine-color-anchor)",
+      textDecoration: "none",
+      fontWeight: "500",
+      _hover: {
+        textDecoration: "underline"
+      }
+    },
+    "& :where(hr)": {
+      margin: "var(--typography-spacing)",
+      border: "none",
+      borderBottom: "1px solid",
+      _light: {
+        borderColor: "mantine.colors.gray[3]"
+      },
+      _dark: {
+        borderColor: "mantine.colors.dark[3]"
+      }
+    },
+    "& :where(pre)": {
+      padding: "var(--mantine-spacing-xs)",
+      lineHeight: "var(--mantine-line-height)",
+      margin: "0",
+      marginTop: "var(--mantine-spacing-md)",
+      marginBottom: "var(--mantine-spacing-md)",
+      overflowX: "auto",
+      fontFamily: "var(--mantine-font-family-monospace)",
+      fontSize: "var(--text-fz-sm)",
+      borderRadius: "var(--mantine-radius-xs)",
+      _light: {
+        backgroundColor: "mantine.colors.gray[0]"
+      },
+      _dark: {
+        backgroundColor: "mantine.colors.dark[8]"
+      },
+      "& :where(code)": {
+        backgroundColor: "transparent",
+        padding: "0",
+        borderRadius: "0",
+        color: "inherit",
+        border: "0"
+      }
+    },
+    "& :where(code)": {
+      lineHeight: "1",
+      padding: "1px 4px",
+      borderRadius: "2px",
+      fontFamily: "var(--mantine-font-family-monospace)",
+      fontSize: "var(--text-fz-sm)",
+      _light: {
+        backgroundColor: "mantine.colors.gray[0]",
+        color: "mantine.colors.black"
+      },
+      _dark: {
+        backgroundColor: "mantine.colors.dark[5]",
+        color: "mantine.colors.white"
+      }
+    },
+    '& :where(ul, ol):not([data-type="taskList"])': {
+      marginBottom: "var(--typography-spacing)",
+      paddingInlineStart: "var(--typography-spacing)",
+      listStylePosition: "outside"
+    },
+    "& :where(table)": {
+      width: "100%",
+      borderCollapse: "collapse",
+      captionSide: "bottom",
+      marginBottom: "var(--mantine-spacing-md)",
+      _light: {
+        ["--table-border-color"]: "var(--mantine-color-gray-3)"
+      },
+      _dark: {
+        ["--table-border-color"]: "var(--mantine-color-dark-4)"
+      },
+      "& :where(caption)": {
+        marginTop: "var(--mantine-spacing-xs)",
+        fontSize: "var(--text-fz-sm)",
+        color: "var(--mantine-color-dimmed)"
+      },
+      "& :where(th)": {
+        textAlign: "left",
+        fontWeight: "bold",
+        fontSize: "var(--text-fz-sm)",
+        padding: "var(--mantine-spacing-xs) var(--mantine-spacing-xs)"
+      },
+      "& :where(thead th)": {
+        borderBottom: "1px solid",
+        borderColor: "var(--table-border-color)"
+      },
+      "& :where(tfoot th)": {
+        borderTop: "1px solid",
+        borderColor: "var(--table-border-color)"
+      },
+      "& :where(td)": {
+        padding: "var(--mantine-spacing-xs) var(--mantine-spacing-xs)",
+        borderBottom: "1px solid",
+        borderColor: "var(--table-border-color)",
+        fontSize: "var(--text-fz-sm)"
+      },
+      "& :where(tr:last-of-type td)": {
+        borderBottom: "0"
+      }
+    },
+    "& :where(blockquote)": {
+      fontSize: "var(--text-fz-md)",
+      lineHeight: "var(--mantine-line-height)",
+      margin: "0",
+      borderRadius: "var(--mantine-radius-sm)",
+      padding: "xs",
+      _light: {
+        backgroundColor: "mantine.colors.gray[1]"
+      },
+      _dark: {
+        backgroundColor: "mantine.colors.dark[5]"
+      },
+      "&:not(:first-child)": {
+        marginTop: "var(--typography-spacing)"
+      }
+    }
+  },
+  variants: {
+    /**
+     * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
+     */
+    uselikec4palette: {
+      true: {
+        "--typography-spacing": "calc(0.25rem * var(--mantine-scale, 1))",
+        "& :where(a)": {
+          color: "likec4.palette.fill/45",
+          mixBlendMode: "difference"
+        },
+        "& :where(code)": {
+          borderColor: "likec4.palette.stroke/85",
+          color: "likec4.palette.hiContrast",
+          backgroundColor: "likec4.palette.stroke/70"
+        },
+        "& :where(strong)": {
+          color: `color-mix(in srgb , {colors.likec4.palette.hiContrast} 50%,  {colors.likec4.palette.loContrast})`
+        },
+        "& :where(blockquote)": {
+          padding: "2xs",
+          backgroundColor: "likec4.palette.stroke/65"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    uselikec4palette: false
+  },
+  staticCss: [{
+    uselikec4palette: ["true"],
+    conditions: ["hover"]
+  }]
+});
 const recipes = {
   __proto__: null,
   actionBtn,
-  likec4tag
+  likec4tag,
+  markdownBlock
 };
 const layerStyles = defineLayerStyles({
   likec4: {
@@ -6503,7 +6740,7 @@ const textStyles = defineTextStyles({
           fontWeight: 500,
           fontSize: "[var(--likec4-text-size)]",
           lineHeight: 1.15,
-          textWrap: "balance",
+          textWrapStyle: "balance",
           whiteSpace: "preserve-breaks"
         }
       },
@@ -6512,10 +6749,10 @@ const textStyles = defineTextStyles({
         value: {
           fontFamily: "var(--likec4-element-font, {fonts.likec4})",
           fontWeight: 400,
-          fontSize: `[calc(var(--likec4-text-size) * 0.74)]`,
-          lineHeight: 1.2,
-          textWrap: "pretty",
-          whiteSpace: "preserve-breaks"
+          fontSize: `[var(--likec4-text-size) * 0.74]`,
+          lineHeight: 1.3,
+          textWrapStyle: "pretty",
+          "--text-fz": `[calc(var(--likec4-text-size) * 0.74)]`
         }
       }
     }
@@ -6761,9 +6998,8 @@ const index = definePreset({
         position: "relative",
         width: "100%",
         height: "100%",
-        padding: 0,
-        margin: 0,
-        boxSizing: "border-box",
+        padding: "0px",
+        margin: "0px",
         border: "0px solid transparent"
       },
       [`${root} .react-flow:is(.not-initialized)`]: {
@@ -6784,8 +7020,8 @@ const index = definePreset({
       [`${rootNotReduced} ${nodeOrEdge}:has([data-likec4-dimmed="true"])`]: {
         transitionProperty: "opacity, filter",
         transitionTimingFunction: "{easings.inOut}",
-        transitionDuration: "800ms",
-        transitionDelay: "200ms"
+        transitionDuration: "600ms"
+        // transitionDelay: '100ms',
       },
       [`[data-mantine-color-scheme="dark"] ${rootNotReduced} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`]: {
         mixBlendMode: "plus-lighter"

package/build.config.ts

@@ -1,32 +0,0 @@
-import spawn from 'nano-spawn'
-import { defineBuildConfig } from 'unbuild'
-
-export default defineBuildConfig({
-  entries: [
-    'preset.ts',
-  ],
-  outDir: '.',
-  clean: false,
-  stub: false,
-  declaration: 'node16',
-  failOnWarn: false,
-  alias: {
-    '@likec4/style-preset/src': '@likec4/style-preset',
-  },
-  rollup: {
-    inlineDependencies: true,
-    dts: {
-      compilerOptions: {
-        baseUrl: '.',
-        paths: {
-          '@likec4/style-preset/src': ['../style-preset/src/index.ts'],
-        },
-      },
-    },
-  },
-  hooks: {
-    async 'build:before'(ctx) {
-      await spawn('pnpm', ['generate'])
-    },
-  },
-})