@likec4/styles 1.32.2 → 1.34.0

package/dist/styles.css

@@ -46,20 +46,19 @@
 }
 
   .likec4-shadow-root {
-    display: contents;
     --mantine-font-family: var(--likec4-app-font-default);
     --mantine-font-family-headings: var(--likec4-app-font-default);
+    display: contents;
 }
 
   .likec4-root {
+    padding: 0px;
+    margin: 0px;
+    border: 0px solid transparent;
     overflow: hidden;
     position: relative;
     width: 100%;
     height: 100%;
-    padding: var(--spacing-0);
-    margin: var(--spacing-0);
-    box-sizing: border-box;
-    border: 0px solid transparent;
 }
 
   .likec4-root .react-flow:is(.not-initialized) {
@@ -86,9 +85,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 +172,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));
@@ -3751,10 +3749,6 @@
   @layer _base{
 
     .action-btn {
-      pointer-events: all;
-      cursor: pointer;
-      color: var(--actionbtn-color);
-      opacity: 0.75;
       --actionbtn-color: var(--colors-likec4-palette-lo-contrast);
       --actionbtn-color-hovered: var(--colors-likec4-palette-lo-contrast);
       --actionbtn-color-hovered-btn: var(--colors-likec4-palette-hi-contrast);
@@ -3763,12 +3757,16 @@
       --actionbtn-bg-hovered-btn: color-mix(in srgb , var(--colors-likec4-palette-fill) 50%, var(--colors-likec4-palette-stroke));
       --ai-bg: var(--actionbtn-bg-idle);
       background: var(--ai-bg);
+      pointer-events: all;
+      cursor: pointer;
+      color: var(--actionbtn-color);
+      opacity: 0.75;
 }
 
     :where([data-likec4-hovered="true"]) .action-btn {
+      --ai-bg: var(--actionbtn-bg-hovered);
       opacity: 1;
       color: var(--actionbtn-color-hovered);
-      --ai-bg: var(--actionbtn-bg-hovered);
 }
 
     .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .action-btn {
@@ -3784,27 +3782,27 @@
 }
 
     .action-btn:is(:hover, [data-hover]) {
+      --ai-bg: var(--actionbtn-bg-hovered-btn);
       opacity: 1;
       color: var(--actionbtn-color-hovered-btn);
-      --ai-bg: var(--actionbtn-bg-hovered-btn);
 }
 
     .likec4-tag {
-      pointer-events: all;
-      display: flex;
-      min-width: 40px;
-      width: min-content;
+      border: var(--borders-none);
       transition: all var(--durations-fast)  var(--easings-in-out);
-      white-space: nowrap;
       padding-inline: 5px;
-      border: var(--borders-none);
       border-radius: 3px;
+      pointer-events: all;
+      display: flex;
       align-items: center;
       justify-content: center;
       font-size: var(--font-sizes-xs);
       font-family: var(--likec4-element-font, var(--fonts-likec4));
       font-weight: 500;
+      white-space: nowrap;
       background-color: var(--colors-likec4-tag-bg);
+      min-width: 40px;
+      width: min-content;
 }
 
     .likec4-tag > span {
@@ -3814,6 +3812,242 @@
     .likec4-tag:is(:hover, [data-hover]) {
       background-color: var(--colors-likec4-tag-bg-hover);
 }
+
+    .likec4-markdown-block {
+      --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;
+      pointer-events: all;
+      font-size: var(--text-fz-md);
+      padding-bottom: calc(.5 * var(--typography-spacing) + 1px);
+}
+
+    .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);
+      font-family: var(--mantine-font-family-monospace);
+      font-size: var(--text-fz-sm);
+      margin-top: var(--mantine-spacing-md);
+      margin-bottom: var(--mantine-spacing-md);
+      overflow-x: auto;
+}
+
+    .likec4-markdown-block :where(pre) :where(code) {
+      padding: var(--spacing-0);
+      border: 0;
+      border-radius: 0;
+      background-color: var(--colors-transparent);
+      color: inherit;
+}
+
+    [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) {
+      background-color: var(--colors-mantine-colors-gray\[0\]);
+      color: mantine.colors.black;
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(code) {
+      background-color: var(--colors-mantine-colors-dark\[5\]);
+      color: var(--colors-mantine-colors-white);
+}
+
+    .likec4-markdown-block :where(blockquote) {
+      margin: var(--spacing-0);
+      padding: var(--spacing-xs);
+      border-radius: var(--mantine-radius-sm);
+      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 :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(a) {
+      text-decoration: none;
+      font-size: var(--text-fz-md);
+      color: var(--mantine-color-anchor);
+      font-weight: 500;
+}
+
+    .likec4-markdown-block :where(a):is(:hover, [data-hover]) {
+      text-decoration: underline;
+}
+
+    .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(p) {
+      font-size: var(--text-fz-md);
+      white-space: preserve-breaks;
+      margin-top: var(--spacing-0);
+      margin-bottom: var(--typography-spacing);
+}
+
+    .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) {
+      background-color: var(--colors-mantine-colors-yellow\[2\]);
+      color: inherit;
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-markdown-block :where(mark) {
+      background-color: var(--colors-mantine-colors-yellow\[5\]);
+      color: mantine.colors.black;
+}
+
+    .likec4-markdown-block :where(ul, ol):not([data-type="taskList"]) {
+      padding-inline-start: var(--typography-spacing);
+      list-style-position: outside;
+      margin-bottom: var(--typography-spacing);
+}
+
+    .likec4-markdown-block :where(table) {
+      border-collapse: collapse;
+      caption-side: bottom;
+      width: 100%;
+      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(th) {
+      padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);
+      text-align: left;
+      font-weight: bold;
+      font-size: var(--text-fz-sm);
+}
+
+    .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(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(tr:last-of-type td) {
+      border-bottom: 0;
+}
+
+    .likec4-markdown-block :where(table) :where(caption) {
+      font-size: var(--text-fz-sm);
+      color: var(--mantine-color-dimmed);
+      margin-top: var(--mantine-spacing-xs);
+}
+
+    .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 :where(img) {
+      max-width: 100%;
+      margin-bottom: var(--typography-spacing);
+}
 }
 
   .action-btn--size_md {
@@ -3893,26 +4127,82 @@
 }
 
   .likec4-tag--autoTextColor_true > span {
+    background: inherit;
     color: var(--colors-transparent);
     filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
-    background: inherit;
-    mix-blend-mode: plus-lighter;
     background-clip: text;
     -webkit-background-clip: text;
+    mix-blend-mode: plus-lighter;
 }
 
   .hover\:likec4-tag--autoTextColor_true:is(:hover, [data-hover]) > span {
+    background: inherit;
     color: var(--colors-transparent);
     filter: invert(1) grayscale(1) brightness(1.3) contrast(1000);
-    background: inherit;
-    mix-blend-mode: plus-lighter;
     background-clip: text;
     -webkit-background-clip: text;
+    mix-blend-mode: plus-lighter;
 }
 
   .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(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));
+}
+
+  .likec4-markdown-block--uselikec4palette_true :where(code) {
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 85%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-palette-stroke));
+    color: var(--colors-likec4-palette-hi-contrast);
+    --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(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(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]) {
+    --typography-spacing: calc(0.25rem * var(--mantine-scale, 1));
+}
+
+  .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));
+}
+
+  .hover\:likec4-markdown-block--uselikec4palette_true:is(:hover, [data-hover]) :where(code) {
+    --mix-borderColor: color-mix(in srgb, var(--colors-likec4-palette-stroke) 85%, transparent);
+    border-color: var(--mix-borderColor, var(--colors-likec4-palette-stroke));
+    color: var(--colors-likec4-palette-hi-contrast);
+    --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(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(strong) {
+    color: color-mix(in srgb , var(--colors-likec4-palette-hi-contrast) 50%,  var(--colors-likec4-palette-lo-contrast));
+}
 }
 
 @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": {