fix(ui5-checkbox): fix focus spacing (#12100)

IlianaB · web-flow · commit a8e8dd1bf9b2 · 2025-08-15T15:42:46.000+03:00
According to the updated VD spec for checkbox, its focus needs to be
0.25rem outside of the component in both compact and cozy mode.

Addtionally:
- focus border radius on HC themes is fixed, there is not rounding.

JIRA: BGSOFUIPIRIN-6883
diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css
@@ -39,5 +39,5 @@
 	/* focus */
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_focus_border_radius: 0.5rem;
-	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
+	--_ui5_checkbox_right_focus_distance: 0.3125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css
@@ -28,7 +28,7 @@
 .sapUiSizeCompact {
 	--_ui5_textarea_padding_top: 0.1875rem;
 	--_ui5_textarea_padding_bottom: 0.125rem;
-	--_ui5_checkbox_focus_position: 0.25rem;
+	--_ui5_checkbox_focus_position: 0.125rem;
 
 	/* SplitButton */
 	--_ui5_split_button_middle_separator_top: 0.3125rem;
diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css
@@ -39,5 +39,5 @@
 	/* focus */
 	--_ui5_checkbox_focus_position: 0.3125rem;
 	--_ui5_checkbox_focus_border_radius: 0.5rem;
-	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
+	--_ui5_checkbox_right_focus_distance: 0.3125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css b/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css
@@ -27,7 +27,7 @@
 	--_ui5_textarea_padding_top: 0.1875rem;
 	--_ui5_textarea_padding_bottom: 0.125rem;
 
-	--_ui5_checkbox_focus_position: 0.25rem;
+	--_ui5_checkbox_focus_position: 0.125rem;
 
 	/* SplitButton */
 	--_ui5_split_button_middle_separator_top: 0.3125rem;
diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css
@@ -40,7 +40,6 @@
 	--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
 	/* focus */
 	--_ui5_checkbox_focus_position: 0.3125rem;
-	--_ui5_checkbox_focus_border_radius: 0.5rem;
-	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.4375rem;
+	--_ui5_checkbox_focus_border_radius: 0;
+	--_ui5_checkbox_right_focus_distance: 0.3125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css
@@ -7,8 +7,8 @@
 	--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
 
 	/* CheckBox */
-	--_ui5_checkbox_focus_position: 0.25rem;
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
+	--_ui5_checkbox_focus_position: 0.125rem;
+	--_ui5_checkbox_wrapped_focus_inset_block: 0.125rem;
 
 	/* DayPicker */
 	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css
@@ -40,7 +40,6 @@
 	--_ui5_checkbox_disabled_opacity: var(--sapContent_DisabledOpacity);
 	/* focus */
 	--_ui5_checkbox_focus_position: 0.3125rem;
-	--_ui5_checkbox_focus_border_radius: 0.5rem;
-	--_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.4375rem;
+	--_ui5_checkbox_focus_border_radius: 0;
+	--_ui5_checkbox_right_focus_distance: 0.3125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css
@@ -7,8 +7,8 @@
 	--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
 
 	/* CheckBox */
-	--_ui5_checkbox_focus_position: 0.25rem;
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
+	--_ui5_checkbox_focus_position: 0.125rem;
+	--_ui5_checkbox_wrapped_focus_inset_block: 0.125rem;
 
 	/* DayPicker */
 	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;

Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,5 @@`
`39`	`39`	`/* focus */`
`40`	`40`	`--_ui5_checkbox_focus_position: 0.3125rem;`
`41`	`41`	`--_ui5_checkbox_focus_border_radius: 0.5rem;`
`42`		`- --_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position);`
	`42`	`+ --_ui5_checkbox_right_focus_distance: 0.3125rem;`
`43`	`43`	`}`