@genexus/mercury 0.10.0 → 0.11.0

package/dist/mercury.scss

@@ -5131,11 +5131,68 @@
   @include control-font-size-regular();
   @include control-padding-inline-block();
 
-  &:hover {
+  &--hover {
     @include control-colors-hover();
   }
 
+  &--focus {
+    @include focus-border();
+  }
+
+  &--disabled {
+    @include control-colors-disabled();
+  }
+
+  &--error {
+    @include control-colors-error();
+  }
+
+  &__window {
+    @include items-container-border();
+    @include items-container-border-radius();
+    @include items-container-colors();
+    @include items-container-padding();
+    @include items-container-gap();
+    @include items-container-max-height();
+    @include items-container-dropdown();
+  }
+
+  &-group__header {
+    @include item-colors-enabled();
+    @include item-font-header();
+    @include item-padding();
+
+    &--expandable {
+      @include item-colors-enabled();
+      @include item-font-header();
+      @include item-padding();
+      @include item-border-radius();
+
+      &-hover {
+        @include item-colors-hover();
+      }
+    }
+
+    &--disabled {
+      @include item-colors-disabled();
+    }
+  }
+
+  &-group {
+    @include items-container-gap();
+
+    &__content {
+      @include items-container-gap();
+    }
+  }
+
   &__item {
+    @include item-colors-enabled();
+    @include item-border();
+    @include item-border-radius();
+    @include item-font();
+    @include item-padding();
+
     &--nested {
       padding-inline-start: calc(
         var(--ch-combo-box-item-gap) +
@@ -5143,6 +5200,14 @@
           var(--mer-spacing--2xs)
       );
     }
+
+    &--selected {
+      @include item-colors-selected();
+    }
+
+    &--disabled {
+      @include item-colors-disabled();
+    }
   }
 }
 
@@ -5163,13 +5228,13 @@
 /// @param {String} $item--selected-selector [".combo-box::part(item selected)"] -
 /// @param {Boolean} $add--disabled [true] -
 /// @param {Boolean} $add--placeholder [true] -
-/// @param {Boolean} $add--placeholder-var [true] -
 /// @param {Boolean} $add--error [true] -
 @mixin combo-box(
   $combo-box-selector: ".combo-box",
   $combo-box--disabled-selector: ".combo-box[disabled]",
   $combo-box--error-selector: ".combo-box-error",
-  $combo-box__placeholder-selector: ".combo-box::part(placeholder)",
+  $combo-box__placeholder-selector:
+    ".combo-box[part='ch-combo-box--empty-value']",
   $window-selector: ".combo-box::part(window)",
   $group-selector: ".combo-box::part(group)",
   $group__content-selector: ".combo-box::part(group__content)",
@@ -5183,17 +5248,17 @@
   $item--selected-selector: ".combo-box::part(item selected)",
   $add--disabled: true,
   $add--placeholder: true,
-  $add--placeholder-var: true,
   $add--error: true
 ) {
   #{$combo-box-selector} {
     @extend %combo-box;
 
-    &:focus {
-      @include focus-border();
+    &:hover {
+      @extend %combo-box--hover;
     }
 
-    @if $add--placeholder-var {
+    &:focus {
+      @extend %combo-box--focus;
     }
   }
 
@@ -5203,74 +5268,41 @@
     }
   }
 
-  @if $add--disabled {
-    #{$combo-box--disabled-selector} {
-      @include control-colors-disabled();
-    }
-
-    #{$group__header--disabled-selector} {
-      @include item-colors-disabled();
-    }
-
-    #{$item--disabled-selector} {
-      @include item-colors-disabled();
-    }
-  }
-
-  @if $add--error {
-    #{$combo-box--error-selector} {
-      @include control-colors-error();
-    }
-  }
-
   // - - - - - - - - - - - - - - - - - - - -
   //                 Window
   // - - - - - - - - - - - - - - - - - - - -
   #{$window-selector} {
-    @include items-container-border();
-    @include items-container-border-radius();
-    @include items-container-colors();
-    @include items-container-padding();
-    @include items-container-gap();
-    @include items-container-max-height();
-    @include items-container-dropdown();
+    @extend %combo-box__window;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                  Group
   // - - - - - - - - - - - - - - - - - - - -
   #{$group__header-selector} {
-    @include item-colors-enabled();
-    @include item-font-header();
-    @include item-padding();
+    @extend %combo-box-group__header;
   }
 
   #{$group__header--expandable-selector} {
-    @include item-colors-enabled();
-    @include item-font-header();
-    @include item-padding();
-    @include item-border-radius();
+    @extend %combo-box-group__header--expandable;
 
     &:hover {
-      @include item-colors-hover();
+      @extend %combo-box-group__header--expandable-hover;
     }
   }
+
   #{$group-selector} {
-    @include items-container-gap();
+    @extend %combo-box-group;
   }
+
   #{$group__content-selector} {
-    @include items-container-gap();
+    @extend %combo-box-group__content;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                  Item
   // - - - - - - - - - - - - - - - - - - - -
   #{$item-selector} {
-    @include item-colors-enabled();
-    @include item-border();
-    @include item-border-radius();
-    @include item-font();
-    @include item-padding();
+    @extend %combo-box__item;
   }
 
   #{$item--nested-selector} {
@@ -5278,7 +5310,30 @@
   }
 
   #{$item--selected-selector} {
-    @include item-colors-selected();
+    @extend %combo-box__item--selected;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                Disabled
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--disabled {
+    #{$combo-box--disabled-selector} {
+      @extend %combo-box--disabled;
+    }
+
+    #{$group__header--disabled-selector} {
+      @extend %combo-box-group__header--disabled;
+    }
+
+    #{$item--disabled-selector} {
+      @extend %combo-box__item--disabled;
+    }
+  }
+
+  @if $add--error {
+    #{$combo-box--error-selector} {
+      @extend %combo-box--error;
+    }
   }
 }
 
@@ -5493,7 +5548,8 @@
 
   &-tab {
     --ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
-    --ch-tab-close-button__image-size: 16px; // TODO: Use a token
+    --ch-tab-close-button__image-size: var(--mer-spacing--md);
+    --ch-tab-image-size: var(--mer-icon__box--md);
 
     --spacing-body-block-start: var(--mer-spacing--md);
     --spacing-body-block-end: var(--mer-spacing--md);
@@ -5527,6 +5583,11 @@
     border-inline: 1px solid transparent;
   }
 
+  // Style for the button of the selected tab
+  &-tab-button--selected-before {
+    color: var(--mer-accent__primary);
+  }
+
   // Block Start
   &-tab-button-block-start {
     background-color: var(
@@ -5734,6 +5795,10 @@
 
     #{$tab-button-block-start--selected-selector} {
       @extend %flexible-layout-tab-button-block-start--selected;
+
+      &::before {
+        @extend %flexible-layout-tab-button--selected-before;
+      }
     }
 
     @if $add--disabled {
@@ -5766,6 +5831,10 @@
 
     #{$tab-button-block-end--selected-selector} {
       @extend %flexible-layout-tab-button-block-end--selected;
+
+      &::before {
+        @extend %flexible-layout-tab-button--selected-before;
+      }
     }
 
     @if $add--disabled {
@@ -5953,6 +6022,18 @@
   }
 }
 
+%layout-splitter {
+  &-bar {
+    color: var(--mer-border-color__on-surface);
+  }
+}
+
+@mixin layout-splitter($bar-selector: ".layout-splitter::part(bar)") {
+  #{$bar-selector} {
+    @extend %layout-splitter-bar;
+  }
+}
+
 %list-box {
   --ch-action-list-group__expandable-button-image-size: var(
     --mer-icon__box--md
@@ -6418,18 +6499,20 @@
   --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs);
 
   --ch-navigation-list-item-custom-padding-inline-start: calc(
-    var(--mer-spacing--xs) + var(--mer-spacing--3xs)
+    var(--mer-spacing--xs) - 1px
   );
   --ch-navigation-list-item-gap: var(--mer-spacing--xs);
   --ch-navigation-list-item-expand-collapse-duration: 200ms;
 
-  --ch-navigation-list-item__image-size: 20px;
+  --ch-navigation-list-item__image-size: var(--mer-spacing--md);
   --ch-navigation-list-item__expandable-button-size: 20px;
   --ch-navigation-list-item__expandable-button-image-size: calc(
     var(--mer-spacing--md) - var(--mer-spacing--3xs)
   );
 
   color: var(--item__color);
+  line-height: var(--mer-spacing--md);
+  gap: var(--mer-spacing--sm);
 
   &-item-action {
     padding-block: var(--mer-spacing--xs);
@@ -6439,8 +6522,9 @@
   &-item-tooltip {
     padding-block: var(--mer-spacing--2xs);
     padding-inline: var(--mer-spacing--xs);
-    background-color: var(--mer-color__neutral-gray--800);
+    background-color: var(--mer-color__neutral-gray--1000);
     border-radius: var(--mer-border__radius--sm);
+    box-shadow: 4px 4px 12px 0px #00000033;
     color: var(--mer-color__neutral-gray--300);
     font-size: var(--mer-font__size--xs);
   }
@@ -6459,12 +6543,19 @@
   }
 
   &-item-link {
+    padding-inline-end: calc(var(--mer-spacing--xs) - 1px);
+    padding-block: calc(var(--mer-spacing--xs) - 1px);
+    border: 1px solid transparent;
+    border-radius: 4px;
+
     &--selected {
-      background-color: var(--item__bg-color--selected-hover);
+      background-color: var(--item__bg-color--selected);
+      border-color: var(--item__border-color--selected);
+      color: var(--mer-accent__primary);
     }
 
     &--hover-not-selected {
-      background-color: var(--item__bg-color--hover);
+      color: var(--mer-accent__primary);
     }
   }
 }
@@ -6473,6 +6564,7 @@
   $navigation-list-selector: ".navigation-list",
   $item-action-selector: ".navigation-list::part(item__action)",
   $item-button-selector: ".navigation-list::part(item__button)",
+  $item-link-selector: ".navigation-list::part(item__link)",
   $item-link-not-selected-selector:
     ".navigation-list::part(item__link not-selected)",
   $item-link-selected-selector: ".navigation-list::part(item__link selected)",
@@ -6498,6 +6590,10 @@
     @extend %navigation-list-item-link--selected;
   }
 
+  #{$item-link-selector} {
+    @extend %navigation-list-item-link;
+  }
+
   #{$item-link-not-selected-selector}:hover {
     @extend %navigation-list-item-link--hover-not-selected;
   }
@@ -8461,6 +8557,7 @@
       ) / 2
   );
 
+  // TODO: Remove this background-color. The elevation must determine the color
   background-color: var(--mer-color__neutral-gray--800);
   overflow: hidden;
 
@@ -8634,6 +8731,14 @@
 }
 
 %slider__thumb {
+  &--hover {
+    --ch-slider-thumb-background-color: var(--mer-color__primary--600);
+  }
+
+  &--active-focus {
+    --ch-slider-thumb-background-color: var(--mer-color__primary--600);
+    @include focus-outline();
+  }
 }
 
 /// @group Slider
@@ -8671,12 +8776,18 @@
 @mixin slider(
   $slider-selector: ".slider",
   $track-selector: ".slider::part(track)",
-  $thumb-selector: ".slider::part(thumb)",
-  $thumb-focus-selector: ".slider:focus-visible::part(thumb focus)"
+  $thumb-active-selector: ".slider:active::part(thumb)",
+  $thumb-focus-selector: ".slider:focus::part(thumb)"
 ) {
   #{$slider-selector} {
     @extend %slider__slider;
+
+    &:hover {
+      @extend %slider__thumb--hover;
+    }
   }
+
+  // TODO: TEST THIS
   #{$slider-selector}:disabled {
     @extend %slider__slider--disabled;
   }
@@ -8685,18 +8796,19 @@
     @extend %slider__track;
   }
 
-  #{$thumb-selector} {
-    @extend %slider__thumb;
+  #{$thumb-active-selector} {
+    @extend %slider__thumb--active-focus;
   }
 
   #{$thumb-focus-selector} {
-    @include focus-outline();
+    @extend %slider__thumb--active-focus;
   }
 }
 
 %tab {
   --ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
-  --ch-tab-close-button__image-size: 16px; // TODO: Use a token
+  --ch-tab-close-button__image-size: var(--mer-spacing--md);
+  --ch-tab-image-size: var(--mer-icon__box--md);
 
   --spacing-body-block-start: var(--mer-spacing--md);
   --spacing-body-block-end: var(--mer-spacing--md);
@@ -10283,6 +10395,148 @@
   }
 }
 
+%toggle-basic {
+  --ch-switch-track__unchecked-background-color: var(
+    --mer-color__neutral-gray--650
+  );
+  --ch-switch-track__checked-background-color: var(
+    --mer-color__tinted-primary--50
+  );
+  --ch-switch-thumb__unchecked-background-color: var(--mer-icon__neutral);
+  --ch-switch-thumb__checked-background-color: var(--mer-icon__neutral);
+  --ch-switch-thumb__state-transition-duration: 150ms;
+
+  &__track {
+    border-radius: var(--ch-switch-track-block-size);
+    margin-inline-end: var(--mer-spacing--xs);
+
+    &--disabled {
+      --ch-switch-track__unchecked-background-color: var(
+        --mer-accent__primary--disabled
+      );
+      --ch-switch-track__checked-background-color: var(
+        --mer-accent__primary--disabled
+      );
+      --ch-switch-thumb__unchecked-background-color: var(
+        --mer-icon__on-disabled
+      );
+      --ch-switch-thumb__checked-background-color: var(--mer-icon__on-disabled);
+    }
+  }
+
+  &__caption {
+    &--checked {
+      font-weight: 600;
+    }
+  }
+}
+
+%toggle-small {
+  --ch-switch-track-block-size: 16px;
+  --ch-switch-track-inline-size: 31px;
+  --ch-switch-thumb-size: 9px;
+
+  &__thumb {
+    &--unchecked {
+      inset-inline-start: 4px;
+    }
+
+    &--checked {
+      inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 4px);
+    }
+  }
+}
+
+%toggle-large {
+  --ch-switch-track-block-size: 26px;
+  --ch-switch-track-inline-size: 50px;
+  --ch-switch-thumb-size: 16px;
+
+  &__thumb {
+    &--unchecked {
+      inset-inline-start: 6px;
+    }
+
+    &--checked {
+      inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 6px);
+    }
+  }
+}
+
+@mixin toggle-small(
+  $toggle-selector: ".toggle-small",
+  $track-selector: ".toggle-small::part(track)",
+  $track--disabled-selector: ".toggle-small::part(track disabled)",
+  $thumb--unchecked-selector: ".toggle-small::part(thumb unchecked)",
+  $thumb--checked-selector: ".toggle-small::part(thumb checked)",
+  $caption--checked-selector: ".toggle-small::part(caption checked)",
+  $add--disabled: true
+) {
+  #{$toggle-selector} {
+    @extend %toggle-basic;
+    @extend %toggle-small;
+  }
+
+  #{$track-selector} {
+    @extend %toggle-basic__track;
+  }
+
+  @if $add--disabled {
+    #{$track--disabled-selector} {
+      @extend %toggle-basic__track--disabled;
+    }
+  }
+
+  #{$thumb--unchecked-selector} {
+    @extend %toggle-small__thumb--unchecked;
+  }
+
+  #{$thumb--checked-selector} {
+    @extend %toggle-small__thumb--checked;
+  }
+
+  #{$caption--checked-selector} {
+    @extend %toggle-basic__caption--checked;
+  }
+}
+
+@mixin toggle-large(
+  $toggle-selector: ".toggle-large",
+  $track-selector: ".toggle-large::part(track)",
+  $track--disabled-selector: ".toggle-large::part(track disabled)",
+  $thumb--unchecked-selector: ".toggle-large::part(thumb unchecked)",
+  $thumb--checked-selector: ".toggle-large::part(thumb checked)",
+  $caption--checked-selector: ".toggle-large::part(caption checked)",
+  $add--disabled: true
+) {
+  #{$toggle-selector} {
+    @extend %toggle-basic;
+    @extend %toggle-large;
+  }
+
+  #{$track-selector} {
+    @extend %toggle-basic__track;
+  }
+
+  @if $add--disabled {
+    #{$track--disabled-selector} {
+      @extend %toggle-basic__track--disabled;
+    }
+  }
+
+  #{$thumb--unchecked-selector} {
+    @extend %toggle-large__thumb--unchecked;
+  }
+
+  #{$thumb--checked-selector} {
+    @extend %toggle-large__thumb--checked;
+  }
+
+  #{$caption--checked-selector} {
+    @extend %toggle-basic__caption--checked;
+  }
+}
+
 @mixin tooltip-tokens() {
   --tooltip__background-color: var(--mer-color__neutral-gray--1000);
   --tooltip__border-radius: var(--mer-border__radius--sm);
@@ -10710,6 +10964,7 @@
   $edit: true,
   $flexible-layout: true,
   $icon: true,
+  $layout-splitter: true,
   $list-box: true,
   $markdown-viewer: true,
   $navigation-list: true,
@@ -10721,6 +10976,7 @@
   $tab: true,
   $tabular-grid: true,
   $ticket-list: true,
+  $toggle: true,
   $tooltip: true,
   $tree-view: true,
   $widget: true
@@ -19037,6 +19293,10 @@
     @include icon();
   }
 
+  @if $layout-splitter {
+    @include layout-splitter();
+  }
+
   @if $list-box {
     @include list-box();
   }
@@ -19083,6 +19343,11 @@
     @include ticket-list();
   }
 
+  @if $toggle {
+    @include toggle-small();
+    @include toggle-large();
+  }
+
   @if $tooltip {
     @include tooltip();
   }
@@ -19153,6 +19418,7 @@
   $edit: false,
   $flexible-layout: false,
   $icon: false,
+  $layout-splitter: false,
   $list-box: false,
   $markdown-viewer: false,
   $navigation-list: false,
@@ -19164,6 +19430,7 @@
   $tab: false,
   $tabular-grid: false,
   $ticket-list: false,
+  $toggle: false,
   $tooltip: false,
   $tree-view: false,
   $widget: false
@@ -19225,6 +19492,7 @@
     $edit: $edit,
     $flexible-layout: $flexible-layout,
     $icon: $icon,
+    $layout-splitter: $layout-splitter,
     $list-box: $list-box,
     $markdown-viewer: $markdown-viewer,
     $navigation-list: $navigation-list,
@@ -19236,6 +19504,7 @@
     $tab: $tab,
     $tabular-grid: $tabular-grid,
     $ticket-list: $ticket-list,
+    $toggle: $toggle,
     $tooltip: $tooltip,
     $tree-view: $tree-view,
     $widget: $widget

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",