fix(ui5-button): adjust focus outline (#10068)

Issue: - There was a double focus outline for the Emphasized button with the Quartz theme. Fixes: #9894
SAP · Oct 30, 2024 · 1d1a09b · 1d1a09b
1 parent 342a6d6
commit 1d1a09b
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/packages/main/src/themes/sap_fiori_3/Button-parameters.css b/packages/main/src/themes/sap_fiori_3/Button-parameters.css
@@ -8,7 +8,7 @@
 	--_ui5_button_icon_font_size: 1rem;
 	--_ui5_button_text_shadow: none;
 	--_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
-	--_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor);
+	--_ui5_button_emphasized_focused_border_before: unset;
 	--_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor);
 	--_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor);
 	--_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor);

diff --git a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css
@@ -8,7 +8,7 @@
 	--_ui5_button_icon_font_size: 1rem;
 	--_ui5_button_text_shadow: none;
 	--_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
-	--_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor);
+	--_ui5_button_emphasized_focused_border_before: unset;
 	--_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor);
 	--_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor);
 	--_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor);

diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css
@@ -3,6 +3,7 @@
 :root {
 	--_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_button_focused_border_radius: 0.25rem;
+	--_ui5_button_emphasized_focused_border_before: var(--_ui5_button_focused_border);
 	--_ui5_button_focus_width: 1px;
 	--_ui5_button_text_shadow: none;
 	--_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor);

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css
@@ -3,6 +3,7 @@
 :root {
 	--_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_button_focused_border_radius: 0.25rem;
+	--_ui5_button_emphasized_focused_border_before: var(--_ui5_button_focused_border);
 	--_ui5_button_focus_width: 1px;
 	--_ui5_button_text_shadow: none;
 	--_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor);