@likec4/styles 1.34.2 → 1.35.0

package/dist/styles.css

@@ -46,8 +46,8 @@
 }
 
   .likec4-shadow-root {
-    --mantine-font-family: var(--likec4-app-font-default);
-    --mantine-font-family-headings: var(--likec4-app-font-default);
+    --mantine-font-family: var(--likec4-app-font, var(--likec4-app-font-default));
+    --mantine-font-family-headings: var(--likec4-app-font, var(--likec4-app-font-default));
     display: contents;
 }
 
@@ -57,6 +57,8 @@
     border: 0px solid transparent;
     overflow: hidden;
     position: relative;
+    container-name: likec4-root;
+    container-type: size;
     width: 100%;
     height: 100%;
 }
@@ -157,6 +159,13 @@
     inherits: false;
     
   }
+
+  @property --likec4-icon-size {
+    syntax: '<length-percentage>';
+
+    inherits: false;
+    
+  }
 }
 
 @layer tokens{
@@ -2549,8 +2558,6 @@
     --colors-yellow-p3-a-10: var(--colors-yellow-light-p3-a-10);
     --colors-yellow-p3-a-11: var(--colors-yellow-light-p3-a-11);
     --colors-yellow-p3-a-12: var(--colors-yellow-light-p3-a-12);
-    --colors-likec4-background: var(--colors-mantine-colors-body);
-    --colors-likec4-background-pattern: var(--colors-mantine-colors-dark\[5\]);
     --colors-likec4-amber-element-fill: #A35829;
     --colors-likec4-amber-element-stroke: #7E451D;
     --colors-likec4-amber-element-hi-contrast: #FFE0C2;
@@ -2738,6 +2745,8 @@
     --colors-likec4-compound5-secondary-lo-contrast: var(--colors-likec4-secondary-element-lo-contrast);
     --colors-likec4-compound5-sky-hi-contrast: var(--colors-likec4-sky-element-hi-contrast);
     --colors-likec4-compound5-sky-lo-contrast: var(--colors-likec4-sky-element-lo-contrast);
+    --colors-likec4-background: var(--colors-mantine-colors-body);
+    --colors-likec4-background-pattern: var(--colors-mantine-colors-dark\[5\]);
     --colors-likec4-tag-bg: var(--colors-tomato-9);
     --colors-likec4-tag-bg-hover: var(--colors-tomato-10);
     --colors-likec4-tag-border: var(--colors-tomato-8);
@@ -2751,6 +2760,16 @@
     --colors-likec4-relation-stroke-selected: var(--colors-likec4-gray-relation-stroke-selected);
     --colors-likec4-relation-label: var(--colors-likec4-gray-relation-label);
     --colors-likec4-relation-label-bg: var(--colors-likec4-gray-relation-label-bg);
+    --colors-likec4-panel-bg: color-mix(in srgb, var(--colors-mantine-colors-body) 90%, transparent);
+    --colors-likec4-panel-bg-when-panning: var(--colors-mantine-colors-body);
+    --colors-likec4-panel-border: transparent;
+    --colors-likec4-panel-action-icon-text: color-mix(in srgb, var(--colors-mantine-colors-text) 70%, transparent);
+    --colors-likec4-panel-action-icon-text-hover: var(--colors-mantine-colors-text);
+    --colors-likec4-panel-action-icon-text-disabled: var(--colors-mantine-colors-dimmed);
+    --colors-likec4-panel-action-icon-bg: var(--colors-mantine-colors-gray\[1\]);
+    --colors-likec4-panel-action-icon-bg-hover: var(--colors-mantine-colors-gray\[2\]);
+    --colors-likec4-dropdown-bg: #FFF;
+    --colors-likec4-dropdown-border: var(--colors-likec4-panel-border);
 }
 
   [data-mantine-color-scheme="dark"] {
@@ -3595,11 +3614,15 @@
     --colors-likec4-compound5-secondary-stroke: #123345;
     --colors-likec4-compound5-sky-fill: #163f55;
     --colors-likec4-compound5-sky-stroke: #123345;
-    --colors-likec4-mix-color: white
+    --colors-likec4-mix-color: white;
+    --colors-likec4-panel-bg: color-mix(in srgb, var(--colors-mantine-colors-dark\[6\]) 80%, transparent);
+    --colors-likec4-panel-bg-when-panning: var(--colors-mantine-colors-dark\[6\]);
+    --colors-likec4-panel-action-icon-bg: color-mix(in srgb, var(--colors-mantine-colors-dark\[7\]) 70%, transparent);
+    --colors-likec4-panel-action-icon-bg-hover: var(--colors-mantine-colors-dark\[8\]);
+    --colors-likec4-dropdown-bg: var(--colors-mantine-colors-dark\[6\])
 }
 
   [data-mantine-color-scheme="light"] {
-    --colors-likec4-background-pattern: var(--colors-mantine-colors-gray\[4\]);
     --colors-likec4-amber-relation-stroke-selected: rgb(153, 70.55, 7.65);
     --colors-likec4-blue-relation-stroke-selected: rgb(50.15, 110.5, 209.1);
     --colors-likec4-gray-relation-stroke-selected: rgb(93.5, 93.5, 93.5);
@@ -3721,7 +3744,9 @@
     --colors-likec4-compound5-secondary-stroke: #133f58;
     --colors-likec4-compound5-sky-fill: #164f6c;
     --colors-likec4-compound5-sky-stroke: #133f58;
-    --colors-likec4-mix-color: black
+    --colors-likec4-background-pattern: var(--colors-mantine-colors-gray\[4\]);
+    --colors-likec4-mix-color: black;
+    --colors-likec4-panel-border: color-mix(in srgb, var(--colors-mantine-colors-default-border) 30%, transparent)
 }
 
   @keyframes indicatorStrokeOpacity {
@@ -3787,6 +3812,37 @@
       color: var(--actionbtn-color-hovered-btn);
 }
 
+    .likec4-element-node-icon {
+      flex: 0 0 var(--likec4-icon-size);
+      display: flex;
+      align-self: flex-start;
+      align-items: center;
+      justify-content: center;
+      mix-blend-mode: hard-light;
+      height: var(--likec4-icon-size);
+      width: var(--likec4-icon-size);
+}
+
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon {
+      mix-blend-mode: normal;
+}
+
+    .likec4-element-node-icon svg,.likec4-element-node-icon img {
+      pointer-events: none;
+      filter: drop-shadow(0 0 3px rgb(0 0 0 / 12%));
+      width: 100%;
+      height: auto;
+      max-height: 100%;
+}
+
+    .likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon svg,.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) .likec4-element-node-icon img {
+      filter: none;
+}
+
+    .likec4-element-node-icon img {
+      object-fit: contain;
+}
+
     .likec4-tag {
       border: var(--borders-none);
       transition: all var(--durations-fast)  var(--easings-in-out);
@@ -3979,7 +4035,7 @@
 
     .likec4-markdown-block :where(ul, ol):not([data-type="taskList"]) {
       padding-inline-start: var(--typography-spacing);
-      list-style-position: outside;
+      list-style-position: inside;
       margin-bottom: var(--typography-spacing);
 }
 
@@ -4048,78 +4104,55 @@
       max-width: 100%;
       margin-bottom: var(--typography-spacing);
 }
-}
-
-  .action-btn--size_md {
-    --ai-size: var(--ai-size-md);
-}
-
-  .action-btn--radius_md {
-    --ai-radius: var(--mantine-radius-md);
-}
 
-  .action-btn--variant_filled {
-    box-shadow: 1px 1px 3px 0px transparent;
+    .likec4-navigation-panel-icon {
+      color: var(--colors-likec4-panel-action-icon-text);
 }
 
-  :where([data-likec4-hovered="true"]) .action-btn--variant_filled {
-    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
+    .likec4-navigation-panel-icon:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-likec4-panel-action-icon-text-disabled);
+      opacity: 0.5;
 }
 
-  .likec4-root:is([data-likec4-reduced-graphics]) .action-btn--variant_filled {
-    box-shadow: none;
+    .likec4-navigation-panel-icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+      color: var(--colors-likec4-panel-action-icon-text-hover);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--size_md {
-    --ai-size: var(--ai-size-md);
+    @media screen and (min-width: 36rem) {
+      .likec4-element-node-icon svg,.likec4-element-node-icon img {
+        filter: drop-shadow(0 1px 8px rgb(0 0 0 / 8%));
 }
-
-  .hover\:action-btn--size_md:is(:hover, [data-hover]) {
-    --ai-size: var(--ai-size-md);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--radius_md {
-    --ai-radius: var(--mantine-radius-md);
+    @media screen and (min-width: 48rem) {
+      .likec4-element-node-icon svg,.likec4-element-node-icon img {
+        filter: drop-shadow(1px 1px 16px rgb(0 0 0 / 3%));
 }
-
-  .hover\:action-btn--radius_md:is(:hover, [data-hover]) {
-    --ai-radius: var(--mantine-radius-md);
 }
-
-  .action-btn--variant_transparent {
-    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_transparent {
-    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+  .action-btn--size_md {
+    --ai-size: var(--ai-size-md);
 }
 
-  .hover\:action-btn--variant_transparent:is(:hover, [data-hover]) {
-    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
+  .action-btn--radius_md {
+    --ai-radius: var(--mantine-radius-md);
 }
 
-  :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+  .action-btn--variant_filled {
     box-shadow: 1px 1px 3px 0px transparent;
 }
 
-  :where([data-likec4-hovered="true"]) :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+  :where([data-likec4-hovered="true"]) .action-btn--variant_filled {
     box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
-  .likec4-root:is([data-likec4-reduced-graphics]) :where([data-likec4-hovered="true"]) .whenHovered\:action-btn--variant_filled {
+  .likec4-root:is([data-likec4-reduced-graphics]) .action-btn--variant_filled {
     box-shadow: none;
 }
 
-  .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
-    box-shadow: 1px 1px 3px 0px transparent;
-}
-
-  :where([data-likec4-hovered="true"]) .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
-    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
-}
-
-  .likec4-root:is([data-likec4-reduced-graphics]) .hover\:action-btn--variant_filled:is(:hover, [data-hover]) {
-    box-shadow: none;
+  .action-btn--variant_transparent {
+    --actionbtn-bg-hovered: var(--actionbtn-bg-idle);
 }
 
   .likec4-tag--autoTextColor_false > span {
@@ -4176,37 +4209,239 @@
     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));
+  .likec4-navigation-panel-icon--variant_default {
+    background-color: var(--colors-transparent);
 }
 
-  .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));
+  .likec4-navigation-panel-icon--variant_default:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+    background-color: var(--colors-likec4-panel-action-icon-bg-hover);
 }
 
-  .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));
+  .likec4-navigation-panel-icon--variant_filled {
+    background-color: var(--colors-likec4-panel-action-icon-bg);
 }
 
-  .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;
+  .likec4-navigation-panel-icon--variant_filled:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+    background-color: var(--colors-likec4-panel-action-icon-bg-hover);
+}
 }
 
-  .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 recipes.slots{
+  @layer _base{
+
+    .likec4-el-node-data__root {
+      margin: 0 auto;
+      flex: 1 1 0%;
+      overflow: hidden;
+      gap: 12px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: row;
+      pointer-events: none;
+      height: fit-content;
+      width: fit-content;
+      max-height: 100%;
+      max-width: 100%;
+      padding-top: var(--likec4-spacing);
+      padding-bottom: var(--likec4-spacing);
+      padding-left: calc(var(--likec4-spacing) + 8px);
+      padding-right: calc(var(--likec4-spacing) + 8px);
+}
+
+    :where([data-likec4-shape-size='xs']) .likec4-el-node-data__root {
+      --likec4-icon-size: 24px;
+}
+
+    :where([data-likec4-shape-size='sm']) .likec4-el-node-data__root {
+      --likec4-icon-size: 36px;
+}
+
+    :where([data-likec4-shape-size='md']) .likec4-el-node-data__root {
+      --likec4-icon-size: 60px;
+}
+
+    :where([data-likec4-shape-size='lg']) .likec4-el-node-data__root {
+      --likec4-icon-size: 82px;
+      gap: 16px;
+}
+
+    :where([data-likec4-shape-size='xl']) .likec4-el-node-data__root {
+      --likec4-icon-size: 90px;
+      gap: 16px;
+}
+
+    :where([data-likec4-shape='queue']) .likec4-el-node-data__root {
+      padding-left: 46px;
+      padding-right: 16px;
+}
+
+    :where([data-likec4-shape='mobile']) .likec4-el-node-data__root {
+      padding-left: 46px;
+      padding-right: 16px;
+}
+
+    :where([data-likec4-shape='cylinder']) .likec4-el-node-data__root {
+      padding-top: 30px;
+}
+
+    :where([data-likec4-shape='storage']) .likec4-el-node-data__root {
+      padding-top: 30px;
+}
+
+    :where([data-likec4-shape='browser']) .likec4-el-node-data__root {
+      padding-top: 32px;
+      padding-bottom: 28px;
+}
+
+    .likec4-el-node-data__textContainer {
+      flex: 0 1 auto;
+      overflow: hidden;
+      gap: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: center;
+      flex-wrap: nowrap;
+      height: fit-content;
+      width: fit-content;
+      max-height: 100%;
+      max-width: 100%;
+}
+
+    .likec4-el-node-data__title {
+      flex: 0 0 auto;
+      font-weight: 500;
+      font-size: var(--likec4-text-size);
+      line-height: 1.15;
+      text-wrap-style: balance;
+      white-space: preserve-breaks;
+      text-align: center;
+      color: var(--colors-likec4-palette-hi-contrast);
+}
+
+    .likec4-el-node-data__title,.likec4-el-node-data__description {
+      font-family: var(--likec4-element-font, var(--fonts-likec4));
+}
+
+    .likec4-el-node-data__description {
+      overflow: hidden;
+      flex-grow: 0;
+      flex-shrink: 1;
+      --text-fz: calc(var(--likec4-text-size) * 0.74);
+      font-weight: 400;
+      font-size: calc(var(--likec4-text-size) * 0.74);
+      line-height: 1.3;
+      text-wrap-style: pretty;
+      color: var(--colors-likec4-palette-lo-contrast);
+      text-align: center;
+      text-overflow: ellipsis;
+}
+
+    :where([data-likec4-shape-size='xs']) .likec4-el-node-data__description {
+      display: none;
+}
+
+    :where([data-likec4-zoom-small]) .likec4-el-node-data__description {
+      display: none;
+}
+
+    .likec4-el-node-data__technology {
+      flex: 0 0 auto;
+      text-wrap: balance;
+      --text-fz: calc(var(--likec4-text-size) * 0.74);
+      font-family: var(--likec4-element-font, var(--fonts-likec4));
+      font-weight: 400;
+      font-size: calc(var(--likec4-text-size) * 0.635);
+      line-height: 1.125;
+      text-wrap-style: pretty;
+      color: var(--colors-likec4-palette-lo-contrast);
+      text-align: center;
+      opacity: 0.92;
+}
+
+    :where([data-likec4-hovered="true"]) .likec4-el-node-data__technology {
+      opacity: 1;
+}
+
+    :where([data-likec4-shape-size='xs']) .likec4-el-node-data__technology {
+      display: none;
+}
+
+    :where([data-likec4-shape-size='sm']) .likec4-el-node-data__technology {
+      display: none;
+}
+
+    :where([data-likec4-zoom-small]) .likec4-el-node-data__technology {
+      display: none;
+}
+
+    .likec4-navlink__root {
+      border-radius: var(--radii-sm);
+      padding-inline: var(--spacing-xs);
+      padding-block: var(--spacing-2xs);
+}
+
+    .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
+      background-color: var(--colors-mantine-colors-gray\[1\]);
+}
+
+    [data-mantine-color-scheme="dark"] .likec4-navlink__root:is(:hover, [data-hover]):not([data-active]) {
+      background-color: var(--colors-mantine-colors-dark\[5\]);
+}
+
+    .likec4-navlink__body {
+      gap: var(--spacing-2);
+      display: flex;
+      flex-direction: column;
+}
+
+    .likec4-navlink__section:where([data-position="left"]) {
+      margin-inline-end: var(--spacing-2xs);
+}
+
+    .likec4-navlink__label {
+      display: block;
+      font-size: var(--font-sizes-sm);
+      font-weight: 500;
+      line-height: 1.2;
+}
+
+    .likec4-navlink__description {
+      display: block;
+      font-size: var(--font-sizes-xxs);
+      line-height: 1.2;
+}
+}
+
+  .likec4-el-node-data__root--hasIcon_true {
+    gap: 16px;
+}
+
+  .likec4-el-node-data__textContainer--hasIcon_true {
+    align-items: flex-start;
+    min-width: calc(50% + var(--likec4-icon-size));
+}
+
+  .likec4-el-node-data__title--hasIcon_true,.likec4-el-node-data__description--hasIcon_true,.likec4-el-node-data__technology--hasIcon_true {
+    text-align: left;
+}
+
+  .likec4-navlink__label--truncateLabel_true,.likec4-navlink__description--truncateLabel_true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
 }
 }
 
 @layer utilities{
 
+  .gap_6px {
+    gap: 6px;
+}
+
   .c_likec4\.palette\.hiContrast {
     color: var(--colors-likec4-palette-hi-contrast);
 }