chore: change inline paddings

TeodorTaushanov · TeodorTaushanov · commit 29e4dcb58b8f · 2026-03-26T14:08:23.000+02:00
diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
@@ -15,6 +15,11 @@
 	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 {
@@ -87,11 +92,11 @@
 
 :host([text][desktop]) .ui5-radio-root:focus::before,
 :host([text]) .ui5-radio-root:focus-visible::before {
-	inset-inline-end: 0px;
+	inset-inline-end: 0;
 }
 
 :host([text]) .ui5-radio-inner {
-	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
+	padding-inline-end: var(--_ui5_radio_button_outer_ring_padding_with_label);
 }
 
 /* readonly */
@@ -202,7 +207,7 @@
 .ui5-radio-inner {
 	display: flex;
 	align-items: center;
-	padding: var(--_ui5_radio_button_outer_ring_padding);
+	padding-inline-end: var(--_ui5_radio_button_outer_ring_padding);
 	flex: 1;
 	pointer-events: none;
 }
diff --git a/packages/main/src/themes/base/RadioButton-parameters.css b/packages/main/src/themes/base/RadioButton-parameters.css
@@ -18,8 +18,8 @@
 	--_ui5_radio_button_outer_ring_hover_color: var(--sapField_Hover_BorderColor);
 	--_ui5_radio_button_outer_ring_active_color: var(--sapField_Hover_BorderColor);
 	--_ui5_radio_button_outer_ring_checked_hover_color: var(--sapField_Hover_BorderColor);
-	--_ui5_radio_button_outer_ring_padding: 0 0.625rem;
-	--_ui5_radio_button_outer_ring_padding_with_label: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.625rem;
+	--_ui5_radio_button_outer_ring_padding_with_label: 0.6875rem;
 	--_ui5_radio_button_border_radius: 0;
 	--_ui5_radio_button_border: none;
 	--_ui5_radio_button_focus_outline: block;
@@ -39,6 +39,6 @@
 	:host {
 		--_ui5_radio_button_min_width: 2rem;
 		--_ui5_radio_button_focus_dist: 0.375rem;
-		--_ui5_radio_button_outer_ring_padding_with_label: 0 0.5rem;
+		--_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
@@ -123,7 +123,7 @@
 
 	/* Radio Button */
 	--_ui5_radio_button_height: 2.75rem;
-	--_ui5_radio_button_label_side_padding: .875rem;
+	--_ui5_radio_button_label_side_padding: .6875rem;
 	--_ui5_radio_button_inner_size: 2.75rem;
 	--_ui5_radio_button_svg_size: 1.5714em;
 
diff --git a/packages/main/src/themes/sap_horizon/RadioButton-parameters.css b/packages/main/src/themes/sap_horizon/RadioButton-parameters.css
@@ -10,7 +10,7 @@
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_type: 4, 2;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
@@ -21,7 +21,7 @@
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_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
@@ -10,7 +10,7 @@
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_ui5_radio_button_outer_ring_padding: 0.6875rem;
 	--_ui5_radio_button_read_only_border_type: 4, 2;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
@@ -21,7 +21,7 @@
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_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
@@ -12,15 +12,15 @@
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_outer_ring_width: 2px; /* px used due to bug in Safari on zoom */
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_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.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_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
@@ -16,15 +16,15 @@
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_outer_ring_width: 2px; /* px used due to bug in Safari on zoom */
-	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
+	--_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.375rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_outer_ring_padding: 0.5rem;
 		--_ui5_radio_button_focus_dist: 0.1875rem;
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -12,15 +12,15 @@`
`12`	`12`	`--_ui5_radio_button_inner_ring_radius: 27.5%;`
`13`	`13`	`--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);`
`14`	`14`	`--_ui5_radio_button_outer_ring_width: 2px; /* px used due to bug in Safari on zoom */`
`15`		`- --_ui5_radio_button_outer_ring_padding: 0 0.6875rem;`
	`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`	`18`	`--_ui5_radio_button_focus_dist: 0.375rem;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`@container style(--ui5_content_density: compact) {`
`22`	`22`	`:host {`
`23`		`- --_ui5_radio_button_outer_ring_padding: 0 0.5rem;`
	`23`	`+ --_ui5_radio_button_outer_ring_padding: 0.5rem;`
`24`	`24`	`--_ui5_radio_button_focus_dist: 0.1875rem;`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,15 +16,15 @@`
`16`	`16`	`--_ui5_radio_button_inner_ring_radius: 27.5%;`
`17`	`17`	`--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);`
`18`	`18`	`--_ui5_radio_button_outer_ring_width: 2px; /* px used due to bug in Safari on zoom */`
`19`		`- --_ui5_radio_button_outer_ring_padding: 0 0.6875rem;`
	`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`	`22`	`--_ui5_radio_button_focus_dist: 0.375rem;`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`@container style(--ui5_content_density: compact) {`
`26`	`26`	`:host {`
`27`		`- --_ui5_radio_button_outer_ring_padding: 0 0.5rem;`
	`27`	`+ --_ui5_radio_button_outer_ring_padding: 0.5rem;`
`28`	`28`	`--_ui5_radio_button_focus_dist: 0.1875rem;`
`29`	`29`	`}`
`30`	`30`	`}`