[mercury][switch][button] Fix focus outline color on button-secondary (updated to primary) and add focus-visible styles to switch. (#626)

* `[mercury][general]` Create a new focus-outline mixin for primary border color

* `[mercury][button]` Fix secondary button focus outline color

* `[mercury][switch]` Apply focus outline style

* Update yarn.lock

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

Author: bsastregx

packages/mercury/src/base/_common.scss

@@ -11,11 +11,18 @@
 // ----------------------
 // Focus
 // ----------------------
-@mixin focus-outline() {
+%focus-outline-base {
   outline: var(--focus__outline-width) var(--focus__outline-style)
     var(--focus__outline-color);
   outline-offset: var(--focus__outline-offset);
 }
+@mixin focus-outline() {
+  @extend %focus-outline-base;
+}
+@mixin focus-outline-primary() {
+  @extend %focus-outline-base;
+  --focus__outline-color: var(--mer-border-color__primary);
+}
 @mixin focus-border() {
   border-color: var(--borders-un-border-color__focused);
 }

packages/mercury/src/base/button/_button-styles.scss

@@ -15,6 +15,9 @@
   &--focus-visible {
     @include focus-outline();
   }
+  &--focus-visible-primary {
+    @include focus-outline-primary();
+  }
 }
 
 %button-primary {
@@ -361,7 +364,7 @@
     @extend %button-secondary;
 
     &:focus-visible {
-      @extend %button-base--focus-visible;
+      @extend %button-base--focus-visible-primary;
     }
 
     &:hover {

packages/mercury/src/components/switch/_switch-styles.scss

@@ -1,3 +1,4 @@
+@use "../../base/common" as *;
 @use "../../base/typography" as *;
 
 %switch-basic {
@@ -34,6 +35,11 @@
       // Font weight shouldn't change, since it causes a subtle inline-size shift, moving surrounding elements.
     }
   }
+
+  &--focus-visible {
+    @include focus-outline();
+    --focus__outline-offset: 1px;
+  }
 }
 
 %switch-small {
@@ -74,6 +80,7 @@
   $switch-selector: ".switch-small",
   $track-selector: ".switch-small::part(track)",
   $track--disabled-selector: ".switch-small::part(track disabled)",
+  $thumb-selector: ".switch-small::part(thumb)",
   $thumb--unchecked-selector: ".switch-small::part(thumb unchecked)",
   $thumb--checked-selector: ".switch-small::part(thumb checked)",
   $caption--checked-selector: ".switch-small::part(caption checked)",
@@ -94,6 +101,12 @@
     }
   }
 
+  #{$thumb-selector} {
+    &:focus-visible {
+      @extend %switch-basic--focus-visible;
+    }
+  }
+
   #{$thumb--unchecked-selector} {
     @extend %switch-small__thumb--unchecked;
   }
@@ -111,6 +124,7 @@
   $switch-selector: ".switch-large",
   $track-selector: ".switch-large::part(track)",
   $track--disabled-selector: ".switch-large::part(track disabled)",
+  $thumb-selector: ".switch-small::part(thumb)",
   $thumb--unchecked-selector: ".switch-large::part(thumb unchecked)",
   $thumb--checked-selector: ".switch-large::part(thumb checked)",
   $caption--checked-selector: ".switch-large::part(caption checked)",
@@ -131,6 +145,12 @@
     }
   }
 
+  #{$thumb-selector} {
+    &:focus-visible {
+      @extend %switch-basic--focus-visible;
+    }
+  }
+
   #{$thumb--unchecked-selector} {
     @extend %switch-large__thumb--unchecked;
   }

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

@@ -13,14 +13,15 @@
   ".button-primary-success:hover { --button-background-color: var(--accent-success-hover); --button-color: var(--mer-text__on-primary); }",
   ".button-primary:active { --button-background-color: var(--mer-accent__primary--active); --button-color: var(--button-color--active); }",
   ".button-primary:disabled, .button-primary-destructive:disabled, .button-primary-success:disabled { --button-background-color: var(--mer-accent__primary--disabled); --button-color: var(--mer-text__on-disabled); }",
-  ".button-primary:focus-visible, .button-primary-destructive:focus-visible, .button-primary-success:focus-visible, .button-secondary:focus-visible, .button-secondary-destructive:focus-visible, .button-tertiary:focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".button-primary:focus-visible, .button-primary-destructive:focus-visible, .button-primary-success:focus-visible, .button-secondary-destructive:focus-visible, .button-tertiary:focus-visible, .button-secondary:focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".button-primary:hover { --button-background-color: var(--mer-accent__primary--hover); --button-color: var(--mer-text__on-primary); }",
   ".button-secondary, .button-secondary-destructive { --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
   ".button-secondary-destructive { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error); }",
   ".button-secondary-destructive:active { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error--active); }",
   ".button-secondary-destructive:hover { --button-color: var(--mer-accent__primary--destructive-hover); --control__border-color: var(--mer-border-color__error--hover); }",
   ".button-secondary:active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }",
   ".button-secondary:disabled, .button-secondary-destructive:disabled { --button-color: var(--mer-text__on-disabled); }",
+  ".button-secondary:focus-visible { --focus__outline-color: var(--mer-border-color__primary); }",
   ".button-secondary:hover { --button-color: var(--mer-text__primary--hover); }",
   ".button-tertiary { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
   ".button-tertiary { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }",

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

@@ -39,7 +39,7 @@
   ".chat::part(send-button):active, .chat::part(stop-generating-answer-button):active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }",
   ".chat::part(send-button):disabled, .chat::part(stop-generating-answer-button):disabled { --button-color: var(--mer-text__on-disabled); }",
   ".chat::part(send-button):focus { --icon-path: var(--icon__system_send_neutral--enabled); }",
-  ".chat::part(send-button):focus-visible, .chat::part(stop-generating-answer-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".chat::part(send-button):focus-visible, .chat::part(stop-generating-answer-button):focus-visible { --focus__outline-color: var(--mer-border-color__primary); }",
   ".chat::part(send-button):hover { --icon-path: var(--icon__system_send_neutral--active); }",
   ".chat::part(send-button):hover, .chat::part(stop-generating-answer-button):hover { --button-color: var(--mer-text__primary--hover); }",
   ".chat::part(send-container) { background-color: var(--mer-surface__elevation--02); border-radius: 4px; gap: var(--mer-spacing--xs); margin: var(--mer-spacing--md); padding: 10px; }",
@@ -49,11 +49,11 @@
   ".chat::part(send-input), .chat::part(send-button), .chat::part(stop-generating-answer-button) { font-size: var(--font-size-body-m); }",
   ".chat::part(send-input), .chat::part(send-button), .chat::part(stop-generating-answer-button) { line-height: var(--line-height-tight); }",
   ".chat::part(send-input):focus { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
-  ".chat::part(send-input):focus { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".chat::part(send-input):focus, .chat::part(send-button):focus-visible, .chat::part(stop-generating-answer-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".chat::part(send-input):hover { --control__border-color: var(--control__border-color--hover); }",
   ".chat::part(send-input):hover { --control__border-color: var(--control__border-color--hover); }",
   ".chat::part(stop-generating-answer-button) { --icon-path: var(--icon__system_cancel-circle_neutral--enabled); transform: translateX(calc(100% + var(--mer-spacing--xs))) translateY(2px); inset-inline-end: 0px; background-color: var(--mer-surface__elevation--02); font-size: 0px !important; }",
   ".chat::part(stop-generating-answer-button):focus { --icon-path: var(--icon__system_cancel-circle_neutral--enabled); }",
   ".chat::part(stop-generating-answer-button):hover { --icon-path: var(--icon__system_cancel-circle_neutral--active); }",
   "@keyframes spin { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"
-]
+]

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

@@ -6,11 +6,11 @@
   ".dropdown.button-primary::part(expandable-button), .dropdown.button-secondary::part(expandable-button) { font-weight: var(--font-weight-semi-bold); }",
   ".dropdown.button-primary::part(expandable-button):active { --button-background-color: var(--mer-accent__primary--active); --button-color: var(--button-color--active); }",
   ".dropdown.button-primary::part(expandable-button):disabled { --button-background-color: var(--mer-accent__primary--disabled); --button-color: var(--mer-text__on-disabled); }",
-  ".dropdown.button-primary::part(expandable-button):focus-visible, .dropdown.button-secondary::part(expandable-button):focus-visible, .dropdown.button-tertiary::part(expandable-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".dropdown.button-primary::part(expandable-button):hover { --button-background-color: var(--mer-accent__primary--hover); --button-color: var(--mer-text__on-primary); }",
   ".dropdown.button-secondary::part(expandable-button) { --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
   ".dropdown.button-secondary::part(expandable-button):active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }",
   ".dropdown.button-secondary::part(expandable-button):disabled { --button-color: var(--mer-text__on-disabled); }",
+  ".dropdown.button-secondary::part(expandable-button):focus-visible { --focus__outline-color: var(--mer-border-color__primary); }",
   ".dropdown.button-secondary::part(expandable-button):hover { --button-color: var(--mer-text__primary--hover); }",
   ".dropdown.button-tertiary::part(expandable-button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
   ".dropdown.button-tertiary::part(expandable-button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }",
@@ -28,9 +28,8 @@
   ".dropdown::part(action), .dropdown.button-primary::part(expandable-button), .dropdown.button-secondary::part(expandable-button) { font-size: var(--font-size-body-m); }",
   ".dropdown::part(action), .dropdown.button-primary::part(expandable-button), .dropdown.button-secondary::part(expandable-button) { line-height: var(--line-height-tight); }",
   ".dropdown::part(action):active { --item__bg-color: var(--item__bg-color--selected); --item__border-color: var(--item__border-color--selected); --item__color: var(--item__color--selected); }",
-  ".dropdown::part(action):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".dropdown::part(action):hover { --item__bg-color: var(--item__bg-color--hover); --item__border-color: var(--item__border-color--hover); --item__color: var(--item__color--hover); }",
-  ".dropdown::part(expandable-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".dropdown::part(expandable-button):focus-visible, .dropdown::part(action):focus-visible, .dropdown.button-primary::part(expandable-button):focus-visible, .dropdown.button-tertiary::part(expandable-button):focus-visible, .dropdown.button-secondary::part(expandable-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".dropdown::part(window) { background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); box-shadow: var(--items-container__box-shadow); border-radius: var(--items-container__border-radius); gap: var(--items-container__gap); }",
   "@keyframes spin { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"
-]
+]

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

@@ -2,7 +2,7 @@
   ".flexible-layout { --flexible-layout--tab-list-block__background-color: var( --mer-surface__elevation--01 ); --flexible-layout--tab-list-inline__background-color: var( --mer-surface__elevation--02 ); --flexible-layout--tab-list-inline__inline-size: 48px; --flexible-layout--tab-button-block-start__background-color: var( --flexible-layout--tab-list-block__background-color ); --flexible-layout--tab-button-block-end__background-color: var( --flexible-layout--tab-list-block__background-color ); --flexible-layout--tab-button-inline-start__background-color: var( --flexible-layout--tab-list-inline__background-color ); --flexible-layout--tab-button-inline-end__background-color: var( --flexible-layout--tab-list-inline__background-color ); --flexible-layout--tab-button-block-start__background-color--selected: var( --mer-surface ); --flexible-layout--tab-button-block-end__background-color--selected: var( --mer-surface ); }",
   ".flexible-layout::part(bar) { color: var(--mer-border-color__on-surface); }",
   ".flexible-layout::part(close-button) { padding: var(--mer-spacing--2xs); border-radius: 4px; margin-inline-start: calc(1px - var(--mer-spacing--2xs)); }",
-  ".flexible-layout::part(close-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
+  ".flexible-layout::part(close-button):focus-visible, .flexible-layout::part(tab block-start):focus-visible, .flexible-layout::part(tab block-end):focus-visible, .flexible-layout::part(tab inline-start):focus-visible, .flexible-layout::part(tab inline-end):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".flexible-layout::part(close-button):hover { background-color: var(--mer-color__tinted-primary--20); }",
   ".flexible-layout::part(droppable-area) { background-color: color-mix(in srgb, var(--mer-accent__primary) 25%, transparent); }",
   ".flexible-layout::part(leaf) { --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); --ch-tab-close-button__image-size: var(--mer-spacing--md); --ch-tab-button__image-size: var(--mer-icon__box--md); --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--md); --spacing-body-inline-end: var(--mer-spacing--md); }",
@@ -22,7 +22,6 @@
   ".flexible-layout::part(tab block-start selected)::before, .flexible-layout::part(tab block-end selected)::before { color: var(--mer-accent__primary); }",
   ".flexible-layout::part(tab block-start) { background-color: var(--flexible-layout--tab-button-block-start__background-color); }",
   ".flexible-layout::part(tab block-start):active { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
-  ".flexible-layout::part(tab block-start):focus-visible, .flexible-layout::part(tab block-end):focus-visible, .flexible-layout::part(tab inline-start):focus-visible, .flexible-layout::part(tab inline-end):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".flexible-layout::part(tab block-start):hover { --tab-caption__bg-color: var(--tab-caption__bg-color--hover); }",
   ".flexible-layout::part(tab inline-end selected) { border-inline-end-color: var(--mer-accent__primary); color: var(--mer-accent__primary); }",
   ".flexible-layout::part(tab inline-end) { background-color: var(--flexible-layout--tab-button-inline-end__background-color); inline-size: var(--flexible-layout--tab-list-inline__inline-size); }",
@@ -36,4 +35,4 @@
   ".flexible-layout::part(tab-list block) { background-color: var(--flexible-layout--tab-list-block__background-color); overflow: auto; }",
   ".flexible-layout::part(tab-list inline) { background-color: var(--flexible-layout--tab-list-inline__background-color); inline-size: var(--flexible-layout--tab-list-inline__inline-size); gap: 4px; }",
   "@keyframes spin { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"
-]
+]