@genexus/mercury 0.4.22 → 0.5.0

package/dist/mercury.scss

@@ -248,7 +248,6 @@
 /*----------------------
 Focus
 ----------------------*/
-
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -261,8 +260,11 @@ Focus
 /*----------------------
 Scrollbar
 ----------------------*/
-
 @mixin scrollbar-styles() {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb__bg-color)
+    var(--scrollbar-track__bg-color);
+
   //scrollbar
   &::-webkit-scrollbar {
     width: var(--scrollbar__size);
@@ -1653,7 +1655,6 @@ Body Spacing
 /*----------------------
 Focus
 ----------------------*/
-
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -1666,8 +1667,11 @@ Focus
 /*----------------------
 Scrollbar
 ----------------------*/
-
 @mixin scrollbar-styles() {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb__bg-color)
+    var(--scrollbar-track__bg-color);
+
   //scrollbar
   &::-webkit-scrollbar {
     width: var(--scrollbar__size);
@@ -2792,6 +2796,10 @@ Heading
   }
 }
 
+%text-link {
+  text-decoration: underline;
+}
+
 // body
 %text-body {
   @include body-tokens();
@@ -2799,7 +2807,6 @@ Heading
   font-family: var(--text-body__font-family);
   font-weight: var(--text-body__font-weight);
   line-height: var(--text-body__line-height);
-  margin-block: var(--text-body__margin-block);
 }
 
 // tab
@@ -2995,6 +3002,98 @@ Text States e.g.: for the property-grid
 
 
 // Components
+%accordion {
+  --ch-accordion__header-image-size: var(--mer-icon__box--sm);
+  --ch-accordion__chevron-size: var(--mer-icon__box--sm);
+
+  --ch-accordion-expand-collapse-duration: var(--mer-timing--fast);
+  --ch-accordion-expand-collapse-timing-function: ease-in-out;
+
+  gap: var(--mer-spacing--2xs);
+}
+
+%accordion-header {
+  @extend %text-body;
+  padding: var(--mer-spacing--sm);
+  gap: var(--mer-spacing--sm);
+
+  &--focus-visible {
+    outline: 1px solid;
+  }
+}
+
+%accordion-panel {
+  border-radius: var(--mer-border__radius--sm);
+  background-color: var(--mer-color__elevation--01);
+
+  &-outlined {
+    border: 1px solid var(--mer-border-color__on-surface);
+    border-radius: var(--mer-border__radius--sm);
+  }
+}
+
+%accordion-section {
+  // "1px" is used to improve the display of the outline when :focus-visible
+  margin-block: 1px var(--mer-spacing--sm);
+  margin-inline: var(--mer-spacing--sm);
+  border: 1px solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--sm);
+}
+
+@mixin accordion-filled(
+  $accordion-selector: ".accordion-filled",
+  $panel-selector: ".accordion-filled::part(panel)",
+  $header-selector: ".accordion-filled::part(header)",
+  $section-selector: ".accordion-filled::part(section)"
+) {
+  #{$accordion-selector} {
+    @extend %accordion;
+  }
+
+  #{$panel-selector} {
+    @extend %accordion-panel;
+  }
+
+  #{$header-selector} {
+    @extend %accordion-header;
+
+    &:focus-visible {
+      @extend %accordion-header--focus-visible;
+    }
+  }
+
+  #{$section-selector} {
+    @extend %accordion-section;
+  }
+}
+
+@mixin accordion-outlined(
+  $accordion-selector: ".accordion-outlined",
+  $panel-selector: ".accordion-outlined::part(panel)",
+  $header-selector: ".accordion-outlined::part(header)",
+  $section-selector: ".accordion-outlined::part(section)"
+) {
+  #{$accordion-selector} {
+    @extend %accordion;
+  }
+
+  #{$panel-selector} {
+    @extend %accordion-panel-outlined;
+  }
+
+  #{$header-selector} {
+    @extend %accordion-header;
+
+    &:focus-visible {
+      @extend %accordion-header--focus-visible;
+    }
+  }
+
+  #{$section-selector} {
+    @extend %accordion-section;
+  }
+}
+
 %checkbox {
   --ch-checkbox__container-size: var(--control-tiny__size);
   --ch-checkbox__option-size: calc(var(--control-tiny__size) / 2);
@@ -3183,141 +3282,65 @@ Text States e.g.: for the property-grid
   --code__color-green: var(--mer-color__message-green--200);
   --code__bg-color: var(--mer-color__neutral-gray--800);
   --code__border: var(--mer-border__width--sm) solid
-    var(--mer-color__elevation--01);
+    var(--mer-color__elevation--03);
   --code__border-radius: var(--mer-border__radius--sm);
   --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
-}
 
+  --ch-code__doctag: var(--code__color-blue);
+  --ch-code__keyword: var(--code__color-blue);
+  --ch-code__meta__keyword: var(--code__color-blue);
+  --ch-code__template-tag: var(--code__color-blue);
+  --ch-code__template-variable: var(--code__color-blue);
+  --ch-code__type: var(--code__color-blue);
+  --ch-code__variable-language: var(--code__color-blue);
 
-@mixin code($selector: ".code") {
-  #{$selector} {
-    // reset
-    pre {
-      margin: 0;
-      font-size: 13px;
-      line-height: 1.55em;
-    }
-    /* begin of WA */
-    overflow: auto;
-    pre {
-      overflow: auto;
-      padding: var(--code__padding);
-      @include scrollbar-styles();
-    }
-    // prevent text wrap
-    /* end of WA */
+  --ch-code__title: var(--code__color-base);
+  --ch-code__title-class: var(--code__color-base);
+  --ch-code__title-class-inherited: var(--code__color-base);
+  --ch-code__title-function: var(--code__color-base);
 
-    background-color: var(--code__bg-color);
-    border: var(--code__border);
-    border-radius: var(--code__border-radius);
+  --ch-code__attr: var(--code__color-blue);
+  --ch-code__attribute: var(--code__color-blue);
+  --ch-code__literal: var(--code__color-blue);
+  --ch-code__meta: var(--code__color-blue);
+  --ch-code__number: var(--code__color-blue);
+  --ch-code__operator: var(--code__color-blue);
+  --ch-code__variable: var(--code__color-blue);
+  --ch-code__selector-attr: var(--code__color-blue);
+  --ch-code__selector-class: var(--code__color-blue);
+  --ch-code__selector-id: var(--code__color-blue);
 
-    @include code-tokens();
-    .hljs-doctag,
-    .hljs-keyword,
-    .hljs-meta .hljs-keyword,
-    .hljs-template-tag,
-    .hljs-template-variable,
-    .hljs-type,
-    .hljs-variable.language_ {
-      /* prettylights-syntax-keyword */
-      color: var(--code__color-blue);
-    }
+  --ch-code__regexp: var(--code__color-green);
+  --ch-code__string: var(--code__color-green);
+  --ch-code__meta__string: var(--code__color-green);
 
-    .hljs-title,
-    .hljs-title.class_,
-    .hljs-title.class_.inherited__,
-    .hljs-title.function_ {
-      color: var(--code__color-base);
-    }
+  --ch-code__built-in: var(--code__color-green);
+  --ch-code__symbol: #e36209;
 
-    .hljs-attr,
-    .hljs-attribute,
-    .hljs-literal,
-    .hljs-meta,
-    .hljs-number,
-    .hljs-operator,
-    .hljs-variable,
-    .hljs-selector-attr,
-    .hljs-selector-class,
-    .hljs-selector-id {
-      color: var(--code__color-blue);
-    }
+  --ch-code__comment: var(--code__color-green);
+  --ch-code__code: var(--code__color-green);
+  --ch-code__formula: var(--code__color-green);
 
-    .hljs-regexp,
-    .hljs-string,
-    .hljs-meta .hljs-string {
-      color: var(
-        --code__color-green
-      ); /* DARK: color-mix(in srgb, var(--colors-foundation-un-color__red--300) 60%, #000) */
-    }
+  --ch-code__name: var(--code__color-light-blue);
+  --ch-code__quote: var(--code__color-light-blue);
+  --ch-code__selector-tag: var(--code__color-light-blue);
+  --ch-code__selector-pseudo: var(--code__color-light-blue);
 
-    .hljs-built_in,
-    .hljs-symbol {
-      /* prettylights-syntax-variable */
-      color: #e36209;
-    }
-
-    .hljs-comment,
-    .hljs-code,
-    .hljs-formula {
-      color: var(--code__color-green);
-    }
-
-    .hljs-name,
-    .hljs-quote,
-    .hljs-selector-tag,
-    .hljs-selector-pseudo {
-      color: var(--code__color-light-blue);
-    }
-
-    .hljs-subst {
-      /* prettylights-syntax-storage-modifier-import */
-      color: #24292e;
-    }
-
-    .hljs-section {
-      /* prettylights-syntax-markup-heading */
-      color: #005cc5;
-      font-weight: bold;
-    }
-
-    .hljs-bullet {
-      /* prettylights-syntax-markup-list */
-      color: #735c0f;
-    }
-
-    .hljs-emphasis {
-      /* prettylights-syntax-markup-italic */
-      color: #24292e;
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      /* prettylights-syntax-markup-bold */
-      color: #24292e;
-      font-weight: bold;
-    }
+  --ch-code__subst: #24292e;
+}
 
-    .hljs-addition {
-      /* prettylights-syntax-markup-inserted */
-      color: #22863a;
-      background-color: #f0fff4;
-    }
 
-    .hljs-deletion {
-      /* prettylights-syntax-markup-deleted */
-      color: #b31d28;
-      background-color: #ffeef0;
-    }
-
-    .hljs-char.escape_,
-    .hljs-link,
-    .hljs-params,
-    .hljs-property,
-    .hljs-punctuation,
-    .hljs-tag {
-      /* purposely ignored */
-    }
+@mixin code($selector: ".code") {
+  #{$selector} {
+    @include code-tokens();
+    @include scrollbar-styles();
+    padding: var(--code__padding);
+    background-color: var(--code__bg-color);
+    border: var(--code__border);
+    border-radius: var(--code__border-radius);
+    font-size: 13px;
+    line-height: 1.55em;
+    overflow: auto;
   }
 }
 
@@ -3483,7 +3506,6 @@ Text States e.g.: for the property-grid
 /*----------------------
 Focus
 ----------------------*/
-
 @mixin focus-outline($outline: false) {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
@@ -3496,8 +3518,11 @@ Focus
 /*----------------------
 Scrollbar
 ----------------------*/
-
 @mixin scrollbar-styles() {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb__bg-color)
+    var(--scrollbar-track__bg-color);
+
   //scrollbar
   &::-webkit-scrollbar {
     width: var(--scrollbar__size);
@@ -4676,6 +4701,190 @@ Body Spacing
   }
 }
 
+@mixin markdown-viewer() {
+  :host {
+    @extend %text-body;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Heading
+  // - - - - - - - - - - - - - - - - - - - -
+  h1 {
+    @extend %heading-1;
+    margin-block: var(--mer-spacing--md) var(--mer-spacing--xs);
+    padding-block-end: var(--mer-spacing--xs);
+  }
+
+  h2 {
+    @extend %heading-2;
+    margin-block: var(--mer-spacing--sm) 6px; // It does not exists the --spacing--xm value
+    padding-block-end: 6px; // It does not exists the --spacing--xm value
+  }
+
+  h3 {
+    @extend %heading-3;
+    margin-block: var(--mer-spacing--xs) var(--mer-spacing--2xs);
+    padding-block-end: var(--mer-spacing--2xs);
+  }
+
+  h4 {
+    @extend %heading-4;
+    margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs);
+    padding-block-end: var(--mer-spacing--3xs);
+  }
+
+  h5 {
+    @extend %heading-5;
+    margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs);
+    padding-block-end: var(--mer-spacing--3xs);
+  }
+
+  h6 {
+    @extend %heading-6;
+    margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs);
+    padding-block-end: var(--mer-spacing--3xs);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    border-block-end: 1px solid var(--mer-border-color__on-surface);
+  }
+
+  p,
+  ul,
+  ol,
+  table,
+  ch-code {
+    margin-block: var(--mer-spacing--xs);
+  }
+
+  ul,
+  ol {
+    padding-inline-start: var(--mer-spacing--xl);
+  }
+
+  // TODO: Add hyperlink styles
+  a {
+    @extend %text-link;
+  }
+
+  blockquote {
+    margin-block: var(--mer-spacing--xs);
+    padding-block: var(--mer-spacing--xs);
+    padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl);
+    border-inline-start: 4px solid var(--mer-color__primary-blue--400);
+
+    // First <p> don't add margin-block-start, because the <blockquote> adds it
+    & > p:first-of-type {
+      margin-block-start: 0;
+    }
+
+    // Last <p> don't add margin-block-end, because the <blockquote> adds it
+    & > p:last-of-type {
+      margin-block-end: 0;
+    }
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Table
+  // - - - - - - - - - - - - - - - - - - - -
+  // Table
+  table {
+    display: block;
+    inline-size: max-content;
+    border: 1px solid var(--mer-border-color__on-surface);
+    border-spacing: 0;
+
+    & > thead > tr {
+      @extend %heading-4;
+      font-weight: unset;
+    }
+  }
+
+  // Cells
+  td {
+    border-block-start: 1px solid var(--mer-border-color__on-surface);
+  }
+
+  // Header and body cells
+  th,
+  td {
+    padding: var(--mer-spacing--xs);
+    border-inline-start: 1px solid var(--mer-border-color__on-surface);
+  }
+
+  // Remove left border in the first cell of each row
+  tr > td:first-child,
+  tr > th:first-child {
+    border-inline-start: unset;
+  }
+
+  thead > tr,
+  tbody > tr:nth-child(2n) {
+    background-color: var(--mer-color__neutral-gray--700);
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Code
+  // - - - - - - - - - - - - - - - - - - - -
+  // Multiline code
+  ch-code {
+    // Override inline border-radius
+    border: 1px solid var(--mer-border-color__on-surface);
+    border-radius: 4px;
+    padding: var(--mer-spacing--md);
+
+    // & > .code-block__header {
+    //   display: grid;
+    //   grid-template-columns: 1fr max-content;
+    //   align-items: center;
+    //   padding-inline: var(--mer-spacing--md);
+    //   padding-block: var(--mer-spacing--xs);
+    //   background-color: var(--surface--alternative);
+    // }
+
+    // & > .code-block__content {
+    //   // Override inline padding
+    //
+    // }
+  }
+
+  @include code($selector: "ch-code");
+
+  // Inline code
+  code {
+    padding-block: var(--mer-spacing--3xs);
+    padding-inline: var(--mer-spacing--2xs);
+    background-color: var(--mer-elevation__bg-color--01);
+    border-radius: 2px;
+    font-size: calc(1em - 2px);
+  }
+
+  img {
+    display: inline-block;
+    max-inline-size: 25%;
+  }
+
+  // Don't add margin-block-start in the first element of the markdown
+  :host > :first-child,
+  ch-theme + * {
+    margin-block-start: 0px;
+  }
+
+  // Don't add margin-block-end in the last element of the markdown
+  :host > :last-child {
+    margin-block-end: 0px;
+  }
+}
+
 // - - - - - - - - - - - - - - - - - - - -
 //            ch-property-grid
 // - - - - - - - - - - - - - - - - - - - -
@@ -6965,6 +7174,7 @@ Body Spacing
 
   // Components
   $components: true,
+  $accordion: true,
   $checkbox: true,
   $code: true,
   $combo-box: true,
@@ -6972,6 +7182,7 @@ Body Spacing
   $edit: true,
   $icon: true,
   $list-box: true,
+  $markdown-viewer: true,
   $radio-group: true,
   $slider: true,
   $tab: true,
@@ -14949,7 +15160,6 @@ Body Spacing
   // - - - - - - - - - - - - - - - - - - - -
   //        Other Tokens than Colors
   // - - - - - - - - - - - - - - - - - - - -
-  // Primitive
   @if $tokens and
     ($border or $colors or $elevation or $font or $spacing or $timing)
   {
@@ -14995,17 +15205,14 @@ Body Spacing
         }
       }
 
-      // Font
       @if $font {
         @include font();
       }
 
-      // Spacing
       @if $spacing {
         @include spacing();
       }
 
-      // Timing
       @if $timing {
         @include timing();
       }
@@ -15043,7 +15250,6 @@ Body Spacing
   //                 Resets
   // - - - - - - - - - - - - - - - - - - - -
   @if $resets {
-    // box-sizing
     @if $box-sizing-reset {
       @include box-sizing();
     }
@@ -15062,7 +15268,6 @@ Body Spacing
       @include other-reset();
     }
 
-    // Typography reset
     @if $typography-reset {
       @include typography-reset();
     }
@@ -15075,49 +15280,36 @@ Body Spacing
   @if $base-classes {
     // Button classes
     @if $button-classes {
-      // Button primary
       @include button-primary();
-
-      // Button secondary
       @include button-secondary();
-
-      // Button tertiary
       @include button-tertiary();
 
       @if $icon-classes {
-        // Button icon only
         @include button-icon-only();
-
-        // Button icon and text
         @include button-icon-and-text();
       }
     }
 
-    // Form control classes
     @if $form-controls-classes {
       @include field();
       @include label();
     }
 
-    // Icon classes
     @if $icon-classes {
       @include icon-size-sm();
       @include icon-size-md();
       @include icon-and-text();
     }
 
-    // Layout classes
     @if $layout-classes {
       @include layout();
       @include control-footer();
     }
 
-    // Spacing classes
     @if $spacing-classes {
       @include spacing-body();
     }
 
-    // Typography classes
     @if $typography-classes {
       @include typography-classes();
     }
@@ -15126,65 +15318,61 @@ Body Spacing
   // - - - - - - - - - - - - - - - -  - - -
   //               Components
   // - - - - - - - - - - - - - - - - - - -
+  @if $accordion {
+    @include accordion-filled();
+    @include accordion-outlined();
+  }
 
-  // checkbox
   @if $checkbox {
     @include checkbox();
   }
 
-  // code
   @if $code {
     @include code();
   }
 
-  // combo box
   @if $combo-box {
     @include combo-box();
   }
 
-  // dialog
   @if $dialog {
     @include dialog();
   }
 
-  // edit
   @if $edit {
     @include form-input();
   }
 
-  // icon
   @if $icon {
     @include icon();
   }
 
-  // list-box
   @if $list-box {
     @include list-box();
   }
 
-  // radio-group
+  @if $markdown-viewer {
+    @include markdown-viewer();
+  }
+
   @if $radio-group {
     @include radio-group();
   }
 
-  // slider
   @if $slider {
     @include slider();
   }
 
-  // tab
   @if $tab {
     @include tab();
   }
 
-  // tabular grid
   @if $tabular-grid {
     @include tabular-grid();
     @include tabular-grid-cell-layout();
     @include property-grid(); // property-grid extends tabular-grid
   }
 
-  // tree view
   @if $tree-view {
     @include tree-view();
   }
@@ -15236,6 +15424,7 @@ Body Spacing
 
   // Components
   $components: false,
+  $accordion: false,
   $checkbox: false,
   $code: false,
   $combo-box: false,
@@ -15243,6 +15432,7 @@ Body Spacing
   $edit: false,
   $icon: false,
   $list-box: false,
+  $markdown-viewer: false,
   $radio-group: false,
   $slider: false,
   $tab: false,
@@ -15295,12 +15485,15 @@ Body Spacing
 
     // Components
     $components: $components,
+    $accordion: $accordion,
     $checkbox: $checkbox,
     $code: $code,
     $combo-box: $combo-box,
     $dialog: $dialog,
     $edit: $edit,
+    $icon: $icon,
     $list-box: $list-box,
+    $markdown-viewer: $markdown-viewer,
     $radio-group: $radio-group,
     $slider: $slider,
     $tab: $tab,