[mercury][dialog] Use mixins for the header close button (reusulting in having focus style now), move padding-block from the header to the header caption, to avoid excesive height. (#624)

* `[mercury][dialog]` Updates on header styles

- Include mixins for the header button (a mixin for tertiary button, and a mixin for icon-only)
- Set a min-block-size on the header and remove the header padding (to prevent excesive height due to header padding + close button padding).
- Set padding-block on the header caption (to prevent text overlap with header block borders on excesive large heading captions).

* `[mercury][general]` Update focus outline color

* `[mercury][dialog]` Update dialog bundles tests

Author: bsastregx

packages/mercury/src/components/dialog/_dialog-styles.scss

@@ -1,3 +1,5 @@
+@use "../../base/button/button-styles" as *;
+@use "../../icons/button" as *;
 @use "../../base/common" as *;
 @use "../../base/icons" as *;
 @use "../../base/typography" as *;
@@ -42,26 +44,35 @@
   }
 
   &__header {
+    /* In the following min-block-size calculation,
+   var(--font-size-subtitle-xs) and var(--font-size-subtitle-xs)
+   represent the ::part(caption) font size and line-height, respectively. */
+    min-block-size: calc(
+      var(--mer-spacing--md) * 2 + var(--font-size-subtitle-xs) *
+        var(--line-height-tight)
+    );
     gap: var(--mer-spacing--sm);
-    padding-block: var(--mer-spacing--md);
     padding-inline: var(--mer-spacing--sm);
     border-block-end: var(--mer-border__width--sm) solid
       var(--dialog-border-color);
   }
 
   &__caption {
     @include subtitle-semi-bold-xs();
+    padding: var(--mer-spacing--md) 0;
     word-break: break-word;
   }
 
   &__close {
-    @include icon-size--md();
-    --icon-path: var(--icon__system_close_primary--enabled);
+    --icon-path: var(--icon__system_close_neutral--enabled);
+    &--before {
+      @include icon-size--md();
+    }
     &--hover {
-      --icon-path: var(--icon__system_close_primary--hover);
+      --icon-path: var(--icon__system_close_neutral--hover);
     }
     &--active {
-      --icon-path: var(--icon__system_close_primary--active);
+      --icon-path: var(--icon__system_close_neutral--active);
     }
   }
 
@@ -162,13 +173,18 @@
 
   #{$close-selector} {
     @extend %dialog__close;
+    &::before {
+      @extend %dialog__close--before;
+    }
     &:hover {
       @extend %dialog__close--hover;
     }
     &:active {
       @extend %dialog__close--active;
     }
   }
+  @include button-tertiary($selector: $close-selector, $add--disabled: true);
+  @include button-icon-only($selector: $close-selector);
 
   #{$content-selector} {
     @extend %dialog__content;

packages/mercury/src/tests/bundles/expected-bundle-content/all.json

@@ -8,10 +8,19 @@
   ".dialog::part(caption) { font-family: var(--font-family-header); }",
   ".dialog::part(caption) { font-size: var(--font-size-subtitle-xs); line-height: var(--line-height-tight); }",
   ".dialog::part(caption) { font-weight: var(--font-weight-semi-bold); }",
-  ".dialog::part(caption) { word-break: break-word; }",
-  ".dialog::part(close-button) { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); --icon-path: var(--icon__system_close_primary--enabled); }",
-  ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_primary--active); }",
-  ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_primary--hover); }",
+  ".dialog::part(caption) { padding: var(--mer-spacing--md) 0; word-break: break-word; }",
+  ".dialog::part(close-button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
+  ".dialog::part(close-button) { --icon-path: var(--icon__system_close_neutral--enabled); }",
+  ".dialog::part(close-button) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }",
+  ".dialog::part(close-button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }",
+  ".dialog::part(close-button) { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }",
+  ".dialog::part(close-button)::before { content: \"\"; display: block; inline-size: var(--mer-icon__box--md); block-size: var(--mer-icon__box--md); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); }",
+  ".dialog::part(close-button):active { --button-color: var(--mer-text__primary--active); }",
+  ".dialog::part(close-button):active { --icon-path: var(--icon__system_close_neutral--active); }",
+  ".dialog::part(close-button):disabled { --button-color: var(--mer-text__on-disabled); }",
+  ".dialog::part(close-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".dialog::part(close-button):hover { --button-color: var(--mer-text__primary--hover); }",
+  ".dialog::part(close-button):hover { --icon-path: var(--icon__system_close_neutral--hover); }",
   ".dialog::part(content) { overflow: auto; }",
   ".dialog::part(dialog) { --dialog-border-radius: var(--mer-border__width--lg); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--sm); --spacing-body-inline-end: var(--mer-spacing--sm); border-radius: var(--dialog-border-radius); border: var(--mer-border__width--sm) solid var(--dialog-border-color); background-color: var(--dialog-background-color); box-shadow: var(--mer-box-shadow--01); }",
   ".dialog::part(edge) { border-color: rgba(0, 0, 0, 0); transition: var(--mer-timing--fast) border-color; }",
@@ -22,6 +31,6 @@
   ".dialog::part(edge-inline-start) { border-inline-start-width: var(--mer-border__width--lg); border-inline-start-style: solid; }",
   ".dialog::part(footer) { border-block-start: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01); }",
   ".dialog::part(footer) { padding-block: var(--mer-spacing--xs); padding-inline: var(--mer-spacing--sm); }",
-  ".dialog::part(header) { gap: var(--mer-spacing--sm); padding-block: var(--mer-spacing--md); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }",
+  ".dialog::part(header) { min-block-size: calc(var(--mer-spacing--md)*2 + var(--font-size-subtitle-xs)*var(--line-height-tight)); gap: var(--mer-spacing--sm); padding-inline: var(--mer-spacing--sm); border-block-end: var(--mer-border__width--sm) solid var(--dialog-border-color); }",
   "@keyframes spin { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"
 ]

packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json

@@ -81,7 +81,7 @@
   // ----------------------
   --focus__outline-width: var(--mer-border__width--sm);
   --focus__outline-style: solid;
-  --focus__outline-color: var(--mer-border-color__primary);
+  --focus__outline-color: var(--mer-border-color__primary--focused);
   --focus__outline-offset: calc(var(--mer-system__border-width) * -1);
   --borders-un-border-color__focused: var(--focus__outline-color);
 }