@likec4/styles 1.32.1 → 1.33.0

package/README.md

@@ -1,6 +1,6 @@
 # `@likec4/styles
 
-Shared utilities for [PandaCSS](https://panda-css.com/)
+Shared preset and generated styles for [PandaCSS](https://panda-css.com/)
 
 ## Usage
 

package/dist/recipes/index.d.ts

@@ -1,3 +1,4 @@
 /* eslint-disable */
 export * from './action-btn';
-export * from './likec4tag';
+export * from './likec4tag';
+export * from './markdown-block';

package/dist/recipes/index.mjs

@@ -1,2 +1,3 @@
 export * from './action-btn.mjs';
-export * from './likec4tag.mjs';
+export * from './likec4tag.mjs';
+export * from './markdown-block.mjs';

package/dist/recipes/markdown-block.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface MarkdownBlockVariant {
+  /**
+ * @default false
+ */
+uselikec4palette: boolean
+}
+
+type MarkdownBlockVariantMap = {
+  [key in keyof MarkdownBlockVariant]: Array<MarkdownBlockVariant[key]>
+}
+
+export type MarkdownBlockVariantProps = {
+  [key in keyof MarkdownBlockVariant]?: ConditionalValue<MarkdownBlockVariant[key]> | undefined
+}
+
+export interface MarkdownBlockRecipe {
+  __type: MarkdownBlockVariantProps
+  (props?: MarkdownBlockVariantProps): string
+  raw: (props?: MarkdownBlockVariantProps) => MarkdownBlockVariantProps
+  variantMap: MarkdownBlockVariantMap
+  variantKeys: Array<keyof MarkdownBlockVariant>
+  splitVariantProps<Props extends MarkdownBlockVariantProps>(props: Props): [MarkdownBlockVariantProps, Pretty<DistributiveOmit<Props, keyof MarkdownBlockVariantProps>>]
+  getVariantProps: (props?: MarkdownBlockVariantProps) => MarkdownBlockVariantProps
+}
+
+
+export declare const markdownBlock: MarkdownBlockRecipe

package/dist/recipes/markdown-block.mjs

@@ -0,0 +1,31 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const markdownBlockFn = /* @__PURE__ */ createRecipe('likec4-markdown-block', {
+  "uselikec4palette": false
+}, [])
+
+const markdownBlockVariantMap = {
+  "uselikec4palette": [
+    "true",
+    "false"
+  ]
+}
+
+const markdownBlockVariantKeys = Object.keys(markdownBlockVariantMap)
+
+export const markdownBlock = /* @__PURE__ */ Object.assign(memo(markdownBlockFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'markdownBlock',
+  __getCompoundVariantCss__: markdownBlockFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: markdownBlockVariantKeys,
+  variantMap: markdownBlockVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, markdownBlockVariantKeys)
+  },
+  getVariantProps: markdownBlockFn.getVariantProps,
+})

package/dist/styles.css

@@ -86,9 +86,8 @@
     transition-property: opacity, filter;
     --transition-easing: var(--easings-in-out);
     transition-timing-function: var(--easings-in-out);
-    --transition-duration: 800ms;
-    transition-duration: 800ms;
-    transition-delay: 200ms;
+    --transition-duration: 600ms;
+    transition-duration: 600ms;
 }
 
   [data-mantine-color-scheme="dark"] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg {
@@ -174,11 +173,11 @@
     --font-sizes-md: calc(1rem * var(--mantine-scale));
     --font-sizes-lg: calc(1.125rem * var(--mantine-scale));
     --font-sizes-xl: calc(1.25rem * var(--mantine-scale));
-    --font-sizes-likec4-xs: 0.750rem;
-    --font-sizes-likec4-sm: 0.875rem;
-    --font-sizes-likec4-md: 1.19rem;
-    --font-sizes-likec4-lg: 1.50rem;
-    --font-sizes-likec4-xl: 2.00rem;
+    --font-sizes-likec4-xs: 0.833rem;
+    --font-sizes-likec4-sm: 1.00rem;
+    --font-sizes-likec4-md: 1.20rem;
+    --font-sizes-likec4-lg: 1.44rem;
+    --font-sizes-likec4-xl: 1.73rem;
     --shadows-xs: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.1);
     --shadows-sm: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale)) calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
     --shadows-md: 0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale)) calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
@@ -3814,6 +3813,242 @@
     .likec4-tag:is(:hover, [data-hover]) {
       background-color: var(--colors-likec4-tag-bg-hover);
 }
+
+    .likec4-markdown-block {
+      pointer-events: 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;
+      padding-bottom: calc(.5 * var(--typography-spacing) + 1px);
+      font-size: var(--text-fz-md);
+}
+
+    .likec4-markdown-block :where(h1, h2, h3, h4, h5, h6) {
+      text-wrap: var(--mantine-heading-text-wrap);
+      line-height: 1.5;
+      font-family: var(--mantine-font-family-headings);
+      margin-bottom: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :where(img) {
+      max-width: 100%;
+      margin-bottom: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :where(p) {
+      white-space: preserve-breaks;
+      font-size: var(--text-fz-md);
+      margin-top: var(--spacing-0);
+      margin-bottom: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :where(a) {
+      color: var(--mantine-color-anchor);
+      text-decoration: none;
+      font-size: var(--text-fz-md);
+      font-weight: 500;
+}
+
+    .likec4-markdown-block :where(a):is(:hover, [data-hover]) {
+      text-decoration: underline;
+}
+
+    .likec4-markdown-block :where(hr) {
+      margin: var(--typography-spacing);
+      border: var(--borders-none);
+      border-bottom: 1px solid;
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(hr) {
+      border-color: var(--colors-mantine-colors-gray\[3\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(hr) {
+      border-color: var(--colors-mantine-colors-dark\[3\]);
+}
+
+    .likec4-markdown-block :where(pre) {
+      padding: var(--mantine-spacing-xs);
+      margin: var(--spacing-0);
+      border-radius: var(--mantine-radius-xs);
+      line-height: var(--mantine-line-height);
+      margin-top: var(--mantine-spacing-md);
+      margin-bottom: var(--mantine-spacing-md);
+      overflow-x: auto;
+      font-family: var(--mantine-font-family-monospace);
+      font-size: var(--text-fz-sm);
+}
+
+    .likec4-markdown-block :where(pre) :where(code) {
+      padding: var(--spacing-0);
+      border-radius: 0;
+      color: inherit;
+      border: 0;
+      background-color: var(--colors-transparent);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(pre) {
+      background-color: var(--colors-mantine-colors-gray\[0\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(pre) {
+      background-color: var(--colors-mantine-colors-dark\[8\]);
+}
+
+    .likec4-markdown-block :where(code) {
+      padding: 1px 4px;
+      border-radius: 2px;
+      line-height: var(--line-heights-1);
+      font-family: var(--mantine-font-family-monospace);
+      font-size: var(--text-fz-sm);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(code) {
+      color: mantine.colors.black;
+      background-color: var(--colors-mantine-colors-gray\[0\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(code) {
+      color: var(--colors-mantine-colors-white);
+      background-color: var(--colors-mantine-colors-dark\[5\]);
+}
+
+    .likec4-markdown-block :where(ul, ol):not([data-type="taskList"]) {
+      padding-inline-start: var(--typography-spacing);
+      margin-bottom: var(--typography-spacing);
+      list-style-position: outside;
+}
+
+    .likec4-markdown-block :where(table) {
+      width: 100%;
+      border-collapse: collapse;
+      caption-side: bottom;
+      margin-bottom: var(--mantine-spacing-md);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(table) {
+      --table-border-color: var(--mantine-color-gray-3);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(table) {
+      --table-border-color: var(--mantine-color-dark-4);
+}
+
+    .likec4-markdown-block :where(table) :where(caption) {
+      color: var(--mantine-color-dimmed);
+      margin-top: var(--mantine-spacing-xs);
+      font-size: var(--text-fz-sm);
+}
+
+    .likec4-markdown-block :where(table) :where(th) {
+      text-align: left;
+      padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+      font-weight: bold;
+      font-size: var(--text-fz-sm);
+}
+
+    .likec4-markdown-block :where(table) :where(thead th) {
+      border-bottom: 1px solid;
+      border-color: var(--table-border-color);
+}
+
+    .likec4-markdown-block :where(table) :where(tfoot th) {
+      border-top: 1px solid;
+      border-color: var(--table-border-color);
+}
+
+    .likec4-markdown-block :where(table) :where(td) {
+      padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+      border-bottom: 1px solid;
+      border-color: var(--table-border-color);
+      font-size: var(--text-fz-sm);
+}
+
+    .likec4-markdown-block :where(table) :where(tr:last-of-type td) {
+      border-bottom: 0;
+}
+
+    .likec4-markdown-block :where(blockquote) {
+      margin: var(--spacing-0);
+      border-radius: var(--mantine-radius-sm);
+      padding: var(--spacing-xs);
+      font-size: var(--text-fz-md);
+      line-height: var(--mantine-line-height);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(blockquote) {
+      background-color: var(--colors-mantine-colors-gray\[1\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(blockquote) {
+      background-color: var(--colors-mantine-colors-dark\[5\]);
+}
+
+    .likec4-markdown-block :where(blockquote):not(:first-child) {
+      margin-top: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :first-child {
+      margin-top: var(--spacing-0);
+}
+
+    .likec4-markdown-block :last-child {
+      margin-bottom: var(--spacing-0);
+}
+
+    .likec4-markdown-block :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+      margin-top: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :is(h1) {
+      font-size: calc(1.476 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :is(h2) {
+      font-size: calc(1.383 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :is(h3) {
+      font-size: calc(1.296 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :is(h4) {
+      font-size: calc(1.215 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :is(h5) {
+      font-size: calc(1.138 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :is(h6) {
+      font-size: calc(1.067 * var(--text-fz) * var(--mantine-scale, 1));
+      font-weight: var(--text-fw-headings);
+}
+
+    .likec4-markdown-block :where(strong) {
+      font-weight: 500;
+}
+
+    .likec4-markdown-block :where(mark) {
+      font-size: var(--text-fz-md);
+}
+
+    [data-mantine-color-scheme="light"] .likec4-markdown-block :where(mark) {
+      color: inherit;
+      background-color: var(--colors-mantine-colors-yellow\[2\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(mark) {
+      color: mantine.colors.black;
+      background-color: var(--colors-mantine-colors-yellow\[5\]);
+}
 }
 
   .action-btn--size_md {
@@ -3913,6 +4148,62 @@
   .hover\:likec4-tag--autoTextColor_false:is(:hover, [data-hover]) > span {
     color: var(--colors-likec4-tag-text);
 }
+
+  .likec4-markdown-block--uselikec4palette_true {
+    --typography-spacing: calc(0.25rem * var(--mantine-scale, 1));
+}
+
+  .likec4-markdown-block--uselikec4palette_true :where(a) {
+    --mix-color: color-mix(in srgb, var(--colors-likec4-palette-fill) 45%, transparent);
+    color: var(--mix-color, var(--colors-likec4-palette-fill));
+    mix-blend-mode: difference;
+}
+
+  .likec4-markdown-block--uselikec4palette_true :where(code) {
+    color: var(--colors-likec4-palette-hi-contrast);
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 85%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-palette-stroke));
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 70%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-palette-stroke));
+}
+
+  .likec4-markdown-block--uselikec4palette_true :where(strong) {
+    color: color-mix(in srgb , var(--colors-likec4-palette-hi-contrast) 50%,  var(--colors-likec4-palette-lo-contrast));
+}
+
+  .likec4-markdown-block--uselikec4palette_true :where(blockquote) {
+    padding: var(--spacing-2xs);
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 65%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-palette-stroke));
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) {
+    --typography-spacing: calc(0.25rem * var(--mantine-scale, 1));
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) :where(a) {
+    --mix-color: color-mix(in srgb, var(--colors-likec4-palette-fill) 45%, transparent);
+    color: var(--mix-color, var(--colors-likec4-palette-fill));
+    mix-blend-mode: difference;
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) :where(code) {
+    color: var(--colors-likec4-palette-hi-contrast);
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 85%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-palette-stroke));
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 70%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-palette-stroke));
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) :where(strong) {
+    color: color-mix(in srgb , var(--colors-likec4-palette-hi-contrast) 50%,  var(--colors-likec4-palette-lo-contrast));
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) :where(blockquote) {
+    padding: var(--spacing-2xs);
+    --mix-backgroundColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 65%, transparent);
+    background-color: var(--mix-backgroundColor, var(--colors-likec4-palette-stroke));
+}
 }
 
 @layer utilities{

package/dist/tokens/index.mjs

@@ -44,23 +44,23 @@ const tokens = {
     "variable": "var(--font-sizes-xl)"
   },
   "fontSizes.likec4.xs": {
-    "value": "0.750rem",
+    "value": "0.833rem",
     "variable": "var(--font-sizes-likec4-xs)"
   },
   "fontSizes.likec4.sm": {
-    "value": "0.875rem",
+    "value": "1.00rem",
     "variable": "var(--font-sizes-likec4-sm)"
   },
   "fontSizes.likec4.md": {
-    "value": "1.19rem",
+    "value": "1.20rem",
     "variable": "var(--font-sizes-likec4-md)"
   },
   "fontSizes.likec4.lg": {
-    "value": "1.50rem",
+    "value": "1.44rem",
     "variable": "var(--font-sizes-likec4-lg)"
   },
   "fontSizes.likec4.xl": {
-    "value": "2.00rem",
+    "value": "1.73rem",
     "variable": "var(--font-sizes-likec4-xl)"
   },
   "shadows.xs": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likec4/styles",
   "license": "MIT",
-  "version": "1.32.1",
+  "version": "1.33.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -11,7 +11,8 @@
     "dist",
     "*.mts",
     "*.mjs",
-    "*.ts"
+    "*.ts",
+    "!build.config.ts"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -53,34 +54,39 @@
         "default": "./preset.mjs"
       }
     },
-    "./vite": {
-      "types": "./vite.d.mts",
-      "default": "./vite.mjs"
-    },
     "./dev": "./dev.ts"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^0.53.6"
+    "@pandacss/dev": "^0.53.7"
+  },
+  "peerDependenciesMeta": {
+    "@pandacss/dev": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@types/node": "~20.19.1",
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
-    "@pandabox/unplugin": "^0.2.1",
-    "@types/react": "^19.1.5",
-    "@types/react-dom": "^19.1.5",
-    "@pandacss/dev": "^0.53.6",
-    "postcss": "^8.5.4",
+    "@pandabox/unplugin": "^0.2.2",
+    "@types/picomatch": "^4.0.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@pandacss/dev": "^0.53.7",
+    "postcss": "8.5.5",
     "nano-spawn": "^1.0.2",
-    "unbuild": "^3.5.0",
-    "typescript": "^5.8.3",
-    "@likec4/style-preset": "1.32.1",
-    "@likec4/tsconfig": "1.32.1"
+    "unbuild": "3.5.0",
+    "typescript": "5.8.3",
+    "@likec4/style-preset": "1.33.0",
+    "@likec4/tsconfig": "1.33.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",
     "build": "unbuild",
     "generate": "panda codegen && panda cssgen",
     "emit-pkg": "panda emit-pkg --base dist",
-    "clean": "pnpm rimraf dist lib"
+    "clean": "pnpm rimraf dist lib",
+    "pack": "pnpm pack",
+    "lint:package": "pnpx publint ./package.tgz"
   }
 }

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)]`
         }
       }
     }
@@ -6784,8 +7021,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'])
-    },
-  },
-})

package/vite.d.mts

@@ -1,5 +0,0 @@
-import pandabox from '@pandabox/unplugin'
-
-const { vite } = pandabox
-
-export { vite as default }

package/vite.mjs

@@ -1,5 +0,0 @@
-import pandabox from '@pandabox/unplugin'
-
-const { vite } = pandabox
-
-export { vite as default }