@genexus/mercury 0.8.8 → 0.8.9

package/dist/bundles/css/components/accordion.css

@@ -1 +1 @@
-.button-primary-destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color: var( --button-primary__bg-color--destructive-hover );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color: var( --button-primary__bg-color--destructive-active );background-color:var(--button-primary__bg-color--destructive-active);color:var(--button-primary__color--destructive)}.button-secondary-destructive{--control__border-color: var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color: var( --button-secondary__bg-color--destructive-hover );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color: var( --button-secondary__bg-color--destructive-active );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}.accordion-outlined::part(header),.accordion-filled::part(header){--text-body__font-size--l: var(--mer-font__size--sm);--text-body__font-size--m: var(--mer-font__size--xs);--text-body__font-size--s: var(--mer-font__size--3xs);--text-body__font-size--xs: var(--mer-font__size--4xs);--text-body__line-height: var(--mer-line-height--spaced);--text-body-regular__font-weight: var(--mer-font__weight--regular);--text-body-highlighted__font-weight: var(--mer-font__weight--semi-bold);--text-body-italic__font-weight: var(--mer-font__weight--regular)}.accordion-outlined::part(header),.accordion-filled::part(header){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-highlighted__font-weight);line-height:var(--text-body__line-height)}.accordion-outlined,.accordion-filled{--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;--spacing-body-block-start: var(--mer-spacing--xs);--spacing-body-block-end: var(--mer-spacing--xs);--spacing-body-inline-start: var(--mer-spacing--sm);--spacing-body-inline-end: var(--mer-spacing--sm);--accordion__gap: var(--mer-spacing--2xs);--accordion-header__padding: var(--mer-spacing--sm);--accordion-header__gap: var(--mer-spacing--sm);--accordion-header__color: var(--mer-text__highlighted);--accordion-header__color--disabled: var(--mer-accent__primary--disabled);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__bg-color: var(--mer-surface__elevation--01);--accordion-panel-outlined__border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);--accordion-panel-outlined__border-radius: var(--mer-border__radius--sm);--accordion-section__margin-block: 1px var(--mer-spacing--sm);--accordion-section__margin-inline: var(--mer-spacing--sm);--accordion-section__border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);--accordion-section__border-radius: var(--mer-border__radius--sm);gap:var(--accordion__gap)}.accordion-outlined::part(header),.accordion-filled::part(header){padding:var(--accordion-header__padding);gap:var(--accordion-header__gap);color:var(--accordion-header__color)}.accordion-outlined::part(header):focus-visible,.accordion-filled::part(header):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.accordion-filled::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-filled::part(panel){border-radius:var(--mer-border__radius--sm);background-color:var(--mer-surface__elevation--01)}.accordion-outlined::part(panel){border:var(--accordion-panel-outlined__border);border-radius:var(--accordion-panel-outlined__border-radius)}.accordion-outlined::part(section){margin-block:var(--accordion-section__margin-block);margin-inline:var(--accordion-section__margin-inline);padding-block:var(--accordion-section__padding-block);padding-inline:var(--accordion-section__padding-inline);border:var(--accordion-section__border);border-radius:var(--accordion-section__border-radius)}
+.button-primary-destructive{--control__border-color: var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color: var( --button-primary__bg-color--destructive-hover );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color: var( --button-primary__bg-color--destructive-active );background-color:var(--button-primary__bg-color--destructive-active);color:var(--button-primary__color--destructive)}.button-secondary-destructive{--control__border-color: var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color: var( --button-secondary__bg-color--destructive-hover );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color: var( --button-secondary__bg-color--destructive-active );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}.accordion-outlined::part(header),.accordion-filled::part(header){--text-body__font-size--l: var(--mer-font__size--sm);--text-body__font-size--m: var(--mer-font__size--xs);--text-body__font-size--s: var(--mer-font__size--3xs);--text-body__font-size--xs: var(--mer-font__size--4xs);--text-body__line-height: var(--mer-line-height--spaced);--text-body-regular__font-weight: var(--mer-font__weight--regular);--text-body-highlighted__font-weight: var(--mer-font__weight--semi-bold);--text-body-italic__font-weight: var(--mer-font__weight--regular)}.accordion-outlined::part(header),.accordion-filled::part(header){font-size:var(--text-body__font-size--m);font-weight:var(--text-body-highlighted__font-weight);line-height:var(--text-body__line-height)}.accordion-outlined,.accordion-filled{--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;--spacing-body-block-start: var(--mer-spacing--xs);--spacing-body-block-end: var(--mer-spacing--xs);--spacing-body-inline-start: var(--mer-spacing--sm);--spacing-body-inline-end: var(--mer-spacing--sm);--accordion__gap: var(--mer-spacing--2xs);--accordion-panel__border-radius: var(--mer-border__radius--sm);--accordion-panel__bg-color: var(--mer-surface__elevation--01);--accordion-panel__bg-color--disabled: var(--mer-surface__elevation--02);--accordion-panel-outlined__border-color: var(--mer-border-color__on-surface);--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );--accordion-panel-outlined__border: var(--mer-border__width--sm) solid var(--accordion-panel-outlined__border-color);--accordion-panel-outlined__border-radius: var(--mer-border__radius--sm);--accordion-header__padding: var(--mer-spacing--sm);--accordion-header__gap: var(--mer-spacing--sm);--accordion-header__color: var(--mer-text__highlighted);--accordion-header__color--disabled: var(--mer-accent__primary--disabled);--accordion-header__border-width: var(--mer-border__width--sm);--accordion-header__border-color: transparent;--accordion-header__border-radius: var(--accordion-panel__border-radius);--accordion-header__border: var(--accordion-header__border-width) solid var(--accordion-header__border-color);--accordion-header__border-color--hover: var( --mer-border-color__primary--hover );--accordion-header__border--hover: var(--accordion-header__border-width) solid var(--accordion-header__border-color--hover);--accordion-header__border-color--active: var( --mer-border-color__primary--active );--accordion-header__border--active: var(--accordion-header__border-width) solid var(--accordion-header__border-color--active);--accordion-section__border-color: var(--mer-border-color__on-elevation--01);--accordion-section__margin-block: 1px var(--mer-spacing--sm);--accordion-section__margin-inline: var(--mer-spacing--sm);--accordion-section__bg-color: var(--mer-surface__elevation--01);--accordion-section__border: var(--mer-border__width--sm) solid var(--accordion-section__border-color);--accordion-section__border-radius: var(--mer-border__radius--sm);--accordion-section-outlined__border-color: var( --mer-border-color__on-surface );--accordion-section-outlined__border-color--disabled: var( --mer-border-color__primary--disabled );gap:var(--accordion__gap)}.accordion-outlined{--accordion-section__border-color: var( --accordion-section-outlined__border-color );--accordion-section__bg-color: transparent}.accordion-outlined::part(header),.accordion-filled::part(header){padding:var(--accordion-header__padding);gap:var(--accordion-header__gap);color:var(--accordion-header__color);outline:var(--accordion-header__border);border-radius:var(--accordion-header__border-radius)}.accordion-outlined::part(header):hover,.accordion-filled::part(header):hover{--accordion-header__border: var(--accordion-header__border--hover)}.accordion-outlined::part(header):active,.accordion-filled::part(header):active{--accordion-header__border: var(--accordion-header__border--active)}.accordion-outlined::part(header):focus-visible,.accordion-filled::part(header):focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.accordion-filled::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-outlined::part(header disabled){color:var(--mer-accent__primary--disabled)}.accordion-filled::part(panel){border-radius:var(--mer-border__radius--sm);background-color:var(--accordion-panel__bg-color)}.accordion-filled::part(panel disabled){--accordion-panel__bg-color: var(--accordion-panel__bg-color--disabled)}.accordion-outlined::part(panel){border:var(--accordion-panel-outlined__border);border-radius:var(--accordion-panel-outlined__border-radius)}.accordion-outlined::part(panel disabled){border-color:var(--accordion-panel-outlined__border-color--disabled)}.accordion-outlined::part(section),.accordion-filled::part(section){margin-block:var(--accordion-section__margin-block);margin-inline:var(--accordion-section__margin-inline);padding-block:var(--accordion-section__padding-block);padding-inline:var(--accordion-section__padding-inline);background-color:var(--accordion-section__bg-color);border:var(--accordion-section__border);border-radius:var(--accordion-section__border-radius)}.accordion-outlined::part(section disabled){border-color:var(--accordion-section-outlined__border-color--disabled)}

package/dist/mercury.scss

@@ -3420,7 +3420,7 @@
 
 // Components
 @mixin accordion-tokens() {
-  // chameleon tokens
+  // chameleon tokens (do not modify names)
   --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);
@@ -3435,33 +3435,74 @@
   // accordion
   --accordion__gap: var(--mer-spacing--2xs);
 
-  // header
-  --accordion-header__padding: var(--mer-spacing--sm);
-  --accordion-header__gap: var(--mer-spacing--sm);
-  --accordion-header__color: var(--mer-text__highlighted);
-  --accordion-header__color--disabled: var(--mer-accent__primary--disabled);
-
   // panel
   --accordion-panel__border-radius: var(--mer-border__radius--sm);
   --accordion-panel__bg-color: var(--mer-surface__elevation--01);
-
-  // panel outlined
+  --accordion-panel__bg-color--disabled: var(--mer-surface__elevation--02);
+  // panel (outlined)
+  --accordion-panel-outlined__border-color: var(--mer-border-color__on-surface);
+  --accordion-panel-outlined__border-color--disabled: var(
+    --mer-border-color__primary--disabled
+  );
+  --accordion-panel-outlined__border-color--disabled: var(
+    --mer-border-color__primary--disabled
+  );
   --accordion-panel-outlined__border: var(--mer-border__width--sm) solid
-    var(--mer-border-color__on-surface);
+    var(--accordion-panel-outlined__border-color);
   --accordion-panel-outlined__border-radius: var(--mer-border__radius--sm);
 
+  // header
+  --accordion-header__padding: var(--mer-spacing--sm);
+  --accordion-header__gap: var(--mer-spacing--sm);
+  --accordion-header__color: var(--mer-text__highlighted);
+  --accordion-header__color--disabled: var(--mer-accent__primary--disabled);
+  --accordion-header__border-width: var(--mer-border__width--sm);
+  --accordion-header__border-color: transparent;
+  --accordion-header__border-radius: var(--accordion-panel__border-radius);
+  --accordion-header__border: var(--accordion-header__border-width) solid
+    var(--accordion-header__border-color);
+  // note: just overriding "--accordion-header__border-color" doesn't seem to work.
+  // header:hover
+  --accordion-header__border-color--hover: var(
+    --mer-border-color__primary--hover
+  );
+  --accordion-header__border--hover: var(--accordion-header__border-width) solid
+    var(--accordion-header__border-color--hover);
+  // header:active
+  --accordion-header__border-color--active: var(
+    --mer-border-color__primary--active
+  );
+  --accordion-header__border--active: var(--accordion-header__border-width)
+    solid var(--accordion-header__border-color--active);
+
   // section
+  --accordion-section__border-color: var(--mer-border-color__on-elevation--01);
   --accordion-section__margin-block: 1px var(--mer-spacing--sm);
   --accordion-section__margin-inline: var(--mer-spacing--sm);
+  --accordion-section__bg-color: var(--mer-surface__elevation--01);
   --accordion-section__border: var(--mer-border__width--sm) solid
-    var(--mer-border-color__on-elevation--01);
+    var(--accordion-section__border-color);
   --accordion-section__border-radius: var(--mer-border__radius--sm);
+  // section (outlined)
+  --accordion-section-outlined__border-color: var(
+    --mer-border-color__on-surface
+  );
+  --accordion-section-outlined__border-color--disabled: var(
+    --mer-border-color__primary--disabled
+  );
 }
 
 
 %accordion {
   @include accordion-tokens();
   gap: var(--accordion__gap);
+
+  &-outlined {
+    --accordion-section__border-color: var(
+      --accordion-section-outlined__border-color
+    );
+    --accordion-section__bg-color: transparent;
+  }
 }
 
 %accordion-header {
@@ -3469,6 +3510,15 @@
   padding: var(--accordion-header__padding);
   gap: var(--accordion-header__gap);
   color: var(--accordion-header__color);
+  outline: var(--accordion-header__border);
+  border-radius: var(--accordion-header__border-radius);
+
+  &--hover {
+    --accordion-header__border: var(--accordion-header__border--hover);
+  }
+  &--active {
+    --accordion-header__border: var(--accordion-header__border--active);
+  }
 
   &--focus-visible {
     @include focus-outline();
@@ -3487,11 +3537,19 @@
 
 %accordion-panel {
   border-radius: var(--mer-border__radius--sm);
-  background-color: var(--mer-surface__elevation--01);
+  background-color: var(--accordion-panel__bg-color);
+
+  &--disabled {
+    --accordion-panel__bg-color: var(--accordion-panel__bg-color--disabled);
+  }
 
   &-outlined {
     border: var(--accordion-panel-outlined__border);
     border-radius: var(--accordion-panel-outlined__border-radius);
+
+    &--disabled {
+      border-color: var(--accordion-panel-outlined__border-color--disabled);
+    }
   }
 }
 
@@ -3501,13 +3559,21 @@
   margin-inline: var(--accordion-section__margin-inline);
   padding-block: var(--accordion-section__padding-block);
   padding-inline: var(--accordion-section__padding-inline);
+  background-color: var(--accordion-section__bg-color);
   border: var(--accordion-section__border);
   border-radius: var(--accordion-section__border-radius);
+
+  &-outlined {
+    &--disabled {
+      border-color: var(--accordion-section-outlined__border-color--disabled);
+    }
+  }
 }
 
 @mixin accordion-filled(
   $accordion-selector: ".accordion-filled",
   $panel-selector: ".accordion-filled::part(panel)",
+  $panel-disabled-selector: ".accordion-filled::part(panel disabled)",
   $header-selector: ".accordion-filled::part(header)",
   $header-disabled-selector: ".accordion-filled::part(header disabled)",
   $section-selector: ".accordion-filled::part(section)"
@@ -3519,15 +3585,29 @@
   #{$panel-selector} {
     @extend %accordion-panel;
   }
+  #{$panel-disabled-selector} {
+    @extend %accordion-panel--disabled;
+  }
 
   #{$header-selector} {
     @extend %accordion-header;
 
+    &:hover {
+      @extend %accordion-header--hover;
+    }
+    &:active {
+      @extend %accordion-header--active;
+    }
+
     &:focus-visible {
       @extend %accordion-header--focus-visible;
     }
   }
 
+  #{$section-selector} {
+    @extend %accordion-section;
+  }
+
   #{$header-disabled-selector} {
     @extend %accordion-header--disabled;
   }
@@ -3536,21 +3616,34 @@
 @mixin accordion-outlined(
   $accordion-selector: ".accordion-outlined",
   $panel-selector: ".accordion-outlined::part(panel)",
+  $panel-disabled-selector: ".accordion-outlined::part(panel disabled)",
   $header-selector: ".accordion-outlined::part(header)",
   $header-disabled-selector: ".accordion-outlined::part(header disabled)",
-  $section-selector: ".accordion-outlined::part(section)"
+  $section-selector: ".accordion-outlined::part(section)",
+  $section-disabled-selector: ".accordion-outlined::part(section disabled)"
 ) {
   #{$accordion-selector} {
     @extend %accordion;
+    @extend %accordion-outlined;
   }
 
   #{$panel-selector} {
     @extend %accordion-panel-outlined;
   }
+  #{$panel-disabled-selector} {
+    @extend %accordion-panel-outlined--disabled;
+  }
 
   #{$header-selector} {
     @extend %accordion-header;
 
+    &:hover {
+      @extend %accordion-header--hover;
+    }
+    &:active {
+      @extend %accordion-header--active;
+    }
+
     &:focus-visible {
       @extend %accordion-header--focus-visible;
     }
@@ -3559,6 +3652,9 @@
   #{$section-selector} {
     @extend %accordion-section;
   }
+  #{$section-disabled-selector} {
+    @extend %accordion-section-outlined--disabled;
+  }
 
   #{$header-disabled-selector} {
     @extend %accordion-header-outlined--disabled;

package/package.json

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