fix(ui5-button): correct focus outline colors in active/focus state (#…

…8325) fix(ui5-button): correct border colors in active/focus state
SAP · Feb 26, 2024 · 32385a7 · 32385a7
1 parent 8412414
commit 32385a7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -110,7 +110,9 @@
 	pointer-events: none;
 }
 
-:host([focused]) .ui5-button-root:after {
+:host([focused]:not([active])) .ui5-button-root:after,
+:host([focused][active][design="Emphasized"]) .ui5-button-root:after,
+:host([focused][active]) .ui5-button-root:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -122,6 +124,10 @@
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
+:host([focused][active]) .ui5-button-root:before {
+	border-color: var(--_ui5_button_pressed_focused_border_color);
+}
+
 :host([design="Emphasized"][focused]) .ui5-button-root:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 }

diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css
@@ -19,6 +19,6 @@
 	--_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor);
 	--_ui5_button_fontFamily: var(--sapFontFamily);
 	--_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor);
-	--_ui5_button_emphasized_focused_border_before: none;
+	--_ui5_button_emphasized_focused_border_before: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_button_emphasized_focused_active_border_color: transparent;
 }