chore: move the paddings to the root element

TeodorTaushanov · TeodorTaushanov · commit ca5c957ebb18 · 2026-03-30T13:44:52.000+03:00
diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
@@ -14,12 +14,6 @@
 	color: var(--_ui5_radio_button_color);
 	border-radius: var(--_ui5_radio_button_border_radius);
 	font-size: var(--sapFontSize);
-	padding-block: var(--_ui5_radio_button_label_side_padding);
-	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding);
-}
-
-:host([text]) {
-	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding_with_label);
 }
 
 :host(:not([disabled])) .ui5-radio-root {
@@ -55,8 +49,8 @@
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
-	inset-block: calc(-1 * var(--_ui5_radio_button_focus_dist));
-	inset-inline: calc(-1 * var(--_ui5_radio_button_focus_dist)) var(--_ui5_radio_button_focus_dist);
+	inset-block: var(--_ui5_radio_button_focus_dist);
+	inset-inline: var(--_ui5_radio_button_focus_dist);
 	pointer-events: none;
 	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_radio_button_border_radius);
@@ -195,13 +189,13 @@
 	box-sizing: border-box;
 	border: var(--_ui5_radio_button_border);
 	border-radius: var(--_ui5_radio_button_border_radius);
+	padding-block: var(--_ui5_radio_button_label_side_padding);
+	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding);
 }
 
-.ui5-radio-root::after {
-	content: "";
-	position: absolute;
-	inset-inline: 0;
-	inset-block: calc(-1 * var(--_ui5_radio_button_label_side_padding));
+
+:host([text]) .ui5-radio-root {
+	padding-inline-start: var(--_ui5_radio_button_outer_ring_padding_with_label);
 }
 
 /* Inner */
diff --git a/packages/main/src/themes/base/RadioButton-parameters.css b/packages/main/src/themes/base/RadioButton-parameters.css
@@ -23,7 +23,7 @@
 	--_ui5_radio_button_border_radius: 0;
 	--_ui5_radio_button_border: none;
 	--_ui5_radio_button_focus_outline: block;
-	--_ui5_radio_button_focus_dist: 0.1375rem;
+	--_ui5_radio_button_focus_dist: 0.5rem;
 	--_ui5_radio_button_color: var(--sapField_BorderColor);
 	--_ui5_radio_button_label_offset: 1px;
 	--_ui5_radio_button_label_color: var(--sapContent_LabelColor);
@@ -38,7 +38,7 @@
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_min_width: 2rem;
-		--_ui5_radio_button_focus_dist: 0.125rem;
+		--_ui5_radio_button_focus_dist: 0.375rem;
 		--_ui5_radio_button_outer_ring_padding_with_label: 0.5rem;
 	}
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -124,7 +124,7 @@
 	/* Radio Button */
 	--_ui5_radio_button_label_side_padding: .6875rem;
 	--_ui5_radio_button_inner_size: 2.75rem;
-	--_ui5_radio_button_svg_size: 1.5714em;
+	--_ui5_radio_button_svg_size: 1.5714em; /* 1.375rem */
 
 	/* Responsive Popover */
 	--_ui5-responsive_popover_header_height: 2.75rem;
@@ -322,7 +322,7 @@
 		/* Radio Button */
 		--_ui5_radio_button_label_side_padding: 0.5rem;
 		--_ui5_radio_button_inner_size: 2rem;
-		--_ui5_radio_button_svg_size: 1.1429em;
+		--_ui5_radio_button_svg_size: 1.1429em;  /* 1rem */
 
 		/* Responsive Popover */
 		--_ui5-responsive_popover_header_height: 2.5rem;
diff --git a/packages/main/src/themes/sap_horizon/RadioButton-parameters.css b/packages/main/src/themes/sap_horizon/RadioButton-parameters.css
@@ -16,12 +16,12 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_focus_dist: 0.325rem;
+	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.275rem;
+		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/RadioButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/RadioButton-parameters.css
@@ -16,12 +16,12 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_focus_dist: 0.325rem;
+	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.275rem;
+		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/RadioButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/RadioButton-parameters.css
@@ -15,12 +15,12 @@
 	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
-	--_ui5_radio_button_focus_dist: 0.325rem;
+	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.275rem;
+		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/RadioButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/RadioButton-parameters.css
@@ -19,12 +19,12 @@
 	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
-	--_ui5_radio_button_focus_dist: 0.325rem;
+	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
 		--_ui5_radio_button_outer_ring_padding: 0.5rem;
-		--_ui5_radio_button_focus_dist: 0.275rem;
+		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
@@ -176,11 +176,11 @@
 
 	<ui5-title level="H2">Custom font and focus outline</ui5-title>
 	<div>
-		<ui5-radio-button class="customizedRB" text="Item 1"></ui5-radio-button>
+		<ui5-radio-button name="customFont" class="customizedRB" text="Item 1"></ui5-radio-button>
 		<br>
-		<ui5-radio-button class="customizedRB" text="Item 2"></ui5-radio-button>
+		<ui5-radio-button name="customFont" class="customizedRB" text="Item 2"></ui5-radio-button>
 		<br>
-		<ui5-radio-button class="customizedRB" text="Item 3"></ui5-radio-button>
+		<ui5-radio-button name="customFont" class="customizedRB" text="Item 3"></ui5-radio-button>
 	</div>
 
 	<script>
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
@@ -38,12 +38,15 @@ div.customStyling{
     stroke: rgb(12 223 147);
 }
 
-.customizedRB::part(root):focus::before,
-.customizedRB::part(root):focus-visible::before {
-	inset: -2px;
+.customizedRB {
+	font-size: 30px
 }
 
-.customizedRB {
+.customizedRB::part(root) {
 	padding: 3px;
-	font-size: 30px
+}
+
+.customizedRB::part(root):focus::before,
+.customizedRB::part(root):focus-visible::before {
+	inset: -2px;
 }

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,12 @@`
`16`	`16`	`--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);`
`17`	`17`	`--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);`
`18`	`18`	`--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);`
`19`		`- --_ui5_radio_button_focus_dist: 0.325rem;`
	`19`	`+ --_ui5_radio_button_focus_dist: 0.375rem;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`@container style(--ui5_content_density: compact) {`
`23`	`23`	`:host {`
`24`	`24`	`--_ui5_radio_button_outer_ring_padding: 0.5rem;`
`25`		`- --_ui5_radio_button_focus_dist: 0.275rem;`
	`25`	`+ --_ui5_radio_button_focus_dist: 0.1875rem;`
`26`	`26`	`}`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,12 +15,12 @@`
`15`	`15`	`--_ui5_radio_button_outer_ring_padding: 0.6875rem;`
`16`	`16`	`--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);`
`17`	`17`	`--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);`
`18`		`- --_ui5_radio_button_focus_dist: 0.325rem;`
	`18`	`+ --_ui5_radio_button_focus_dist: 0.375rem;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`@container style(--ui5_content_density: compact) {`
`22`	`22`	`:host {`
`23`	`23`	`--_ui5_radio_button_outer_ring_padding: 0.5rem;`
`24`		`- --_ui5_radio_button_focus_dist: 0.275rem;`
	`24`	`+ --_ui5_radio_button_focus_dist: 0.1875rem;`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,12 +19,12 @@`
`19`	`19`	`--_ui5_radio_button_outer_ring_padding: 0.6875rem;`
`20`	`20`	`--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);`
`21`	`21`	`--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);`
`22`		`- --_ui5_radio_button_focus_dist: 0.325rem;`
	`22`	`+ --_ui5_radio_button_focus_dist: 0.375rem;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`@container style(--ui5_content_density: compact) {`
`26`	`26`	`:host {`
`27`	`27`	`--_ui5_radio_button_outer_ring_padding: 0.5rem;`
`28`		`- --_ui5_radio_button_focus_dist: 0.275rem;`
	`28`	`+ --_ui5_radio_button_focus_dist: 0.1875rem;`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,12 +38,15 @@ div.customStyling{`
`38`	`38`	`stroke: rgb(12 223 147);`
`39`	`39`	`}`
`40`	`40`
`41`		`-.customizedRB::part(root):focus::before,`
`42`		`-.customizedRB::part(root):focus-visible::before {`
`43`		`- inset: -2px;`
	`41`	`+.customizedRB {`
	`42`	`+ font-size: 30px`
`44`	`43`	`}`
`45`	`44`
`46`		`-.customizedRB {`
	`45`	`+.customizedRB::part(root) {`
`47`	`46`	`padding: 3px;`
`48`		`- font-size: 30px`
	`47`	`+}`
	`48`	`+`
	`49`	`+.customizedRB::part(root):focus::before,`
	`50`	`+.customizedRB::part(root):focus-visible::before {`
	`51`	`+ inset: -2px;`
`49`	`52`	`}`