diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss index 2bebc2813c4..bbea40e0411 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.scss @@ -89,44 +89,41 @@ $bulk-actions-button-stacking-order: ( button { display: flex; + background-color: var(--p-color-bg-strong); + box-shadow: none; - #{$se23} & { - background-color: var(--p-color-bg-strong); + &:hover { + background-color: var(--p-color-bg-strong-hover); box-shadow: none; - /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:hover { - background-color: var(--p-color-bg-strong-hover); - box-shadow: none; - } - /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus-visible, - &:active { - background-color: var(--p-color-bg-strong-active); - } - /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus-visible:not(:active) { - /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ - @include no-focus-ring; - outline: var(--p-border-width-2) solid - var(--p-color-border-interactive-focus); - outline-offset: var(--p-space-05); - } - // stylelint-disable-next-line selector-max-combinators -- se23 - &[aria-disabled='true'] { - background-color: var(--p-color-bg-transparent-disabled-experimental); - } + } + + &:focus-visible, + &:active { + background-color: var(--p-color-bg-strong-active); + } + + // stylelint-disable-next-line selector-max-specificity -- Bulk actions button override + &:focus-visible:not(:active) { + /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- override focus ring */ + @include no-focus-ring; + outline: var(--p-border-width-2) solid + var(--p-color-border-interactive-focus); + outline-offset: var(--p-space-05); + } + + // stylelint-disable-next-line selector-no-qualifying-type -- Bulk actions button override + &[aria-disabled='true'] { + background-color: var(--p-color-bg-transparent-disabled-experimental); } } // Extra specificity - // stylelint-disable-next-line selector-max-class, selector-max-specificity -- se23 + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- Bump specificity to override button styles &.BulkActionButton.BulkActionButton button { - #{$se23} & { - // stylelint-disable-next-line selector-max-class, selector-max-combinators -- se23 - &:focus-visible, - &:active { - box-shadow: var(--p-shadow-inset-md); - } + // stylelint-disable-next-line -- Bulk actions button override + &:focus-visible, + &:active { + box-shadow: var(--p-shadow-inset-md); } } }