From d03d2ccf0cbb046decc4530f2c762e721ce6f755 Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Thu, 12 Mar 2026 17:07:31 +0200
Subject: [PATCH 1/2] feat(ui5-radio-button): enable font-size based scaling

---
 packages/main/src/themes/RadioButton.css      | 26 +++++++++++++++++--
 .../main/src/themes/base/sizes-parameters.css |  3 +--
 packages/main/test/pages/RadioButton.html     |  6 +++++
 .../main/test/pages/styles/RadioButton.css    | 16 ++++++++++++
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
index 2cf1e9379006..acd5f20e5868 100644
--- a/packages/main/src/themes/RadioButton.css
+++ b/packages/main/src/themes/RadioButton.css
@@ -12,6 +12,29 @@
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
 	border-radius: var(--_ui5_radio_button_border_radius);
+	font-size: 1rem;
+
+	/* Enable font-size based scaling - all em values below are relative to font-size */
+	--_ui5_radio_button_inner_size: 2.75em;
+	--_ui5_radio_button_svg_size: 1.375em;
+	--_ui5_radio_button_height: 2.75em;
+	--_ui5_radio_button_outer_ring_padding: 0 0.625em;
+	--_ui5_radio_button_outer_ring_padding_with_label: 0 0.6875em;
+	--_ui5_radio_button_label_offset: 0.125em;
+	--_ui5_radio_button_focus_dist: 0.375em;
+	--_ui5_radio_button_label_font_size: 0.875em;
+}
+
+/* Compact mode - override em values */
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_radio_button_inner_size: 2em;
+		--_ui5_radio_button_svg_size: 1em;
+		--_ui5_radio_button_height: 2em;
+		--_ui5_radio_button_outer_ring_padding: 0 0.5em;
+		--_ui5_radio_button_outer_ring_padding_with_label: 0 0.5em;
+		--_ui5_radio_button_focus_dist: 0.375em;
+	}
 }
 
 :host(:not([disabled])) .ui5-radio-root {
@@ -194,7 +217,6 @@
 	padding: var(--_ui5_radio_button_outer_ring_padding);
 	flex-shrink: 0;
 	height: var(--_ui5_radio_button_inner_size);
-	font-size: 1rem; /* override font size of the message dialog */
 	pointer-events: none;
 	vertical-align: top;
 }
@@ -218,12 +240,12 @@
 	display: flex;
 	align-items: center;
 	padding-inline-end: var(--_ui5_radio_button_label_offset);
-	padding-block: var(--_ui5_radio_button_label_side_padding);
 	vertical-align: top;
 	max-width: 100%;
 	pointer-events: none;
 	color: var(--_ui5_radio_button_label_color);
 	overflow-wrap: break-word;
+	font-size: var(--_ui5_radio_button_label_font_size);
 }
 
 :host([wrapping-type="None"][text]) .ui5-radio-root {
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 839beba0dd2d..5a81788b7613 100644
--- 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_inner_size: 2.75rem;
 	--_ui5_radio_button_svg_size: 1.375rem;
 
@@ -322,7 +322,6 @@
 
 		/* Radio Button */
 		--_ui5_radio_button_height: 2rem;
-		--_ui5_radio_button_label_side_padding: .5rem;
 		--_ui5_radio_button_inner_size: 2rem;
 		--_ui5_radio_button_svg_size: 1rem;
 
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index 11376127dcb4..992ce39f6f0e 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/packages/main/test/pages/RadioButton.html
@@ -172,6 +172,12 @@
 		<ui5-radio-button id="customRb1" checked text="Inner ring on hover"></ui5-radio-button>
 		<ui5-radio-button value-state="Negative" text="Outer ring with Negative State"></ui5-radio-button>
 		<ui5-radio-button value-state="Positive" text="Outer ring with Positive State"></ui5-radio-button>
+		<ui5-radio-button id="customRb2" text="Font-size 32px"></ui5-radio-button>
+		<ui5-radio-button id="customRb3"></ui5-radio-button>
+		<ui5-radio-button id="customRb4" text="Font-size 12px"></ui5-radio-button>
+		<ui5-radio-button id="customRb5"></ui5-radio-button>
+		<ui5-radio-button id="customRb6" text="Padding 0"></ui5-radio-button>
+		<ui5-radio-button id="customRb7"></ui5-radio-button>
 	</div>
 
 	<script>
diff --git a/packages/main/test/pages/styles/RadioButton.css b/packages/main/test/pages/styles/RadioButton.css
index 1c1b5bc4e444..2beb4e64142c 100644
--- a/packages/main/test/pages/styles/RadioButton.css
+++ b/packages/main/test/pages/styles/RadioButton.css
@@ -36,4 +36,20 @@ div.customStyling{
 }
 .customStyling ui5-radio-button[value-state="Positive"]::part(outer-ring) {
     stroke: rgb(12 223 147);
+}
+
+/* Font-size based scaling - the radio button circle and label scale with font-size */
+.customStyling #customRb2,
+.customStyling #customRb3 {
+    font-size: 32px;
+}
+
+.customStyling #customRb4,
+.customStyling #customRb5 {
+    font-size: 12px;
+}
+
+.customStyling #customRb6,
+.customStyling #customRb7 {
+    padding: 0;
 }
\ No newline at end of file

From f39292f5bb10c7fafedd69a218fa4a5126b9b37e Mon Sep 17 00:00:00 2001
From: Lidiya Georgieva <lidiya.georgieva@sap.com>
Date: Fri, 13 Mar 2026 16:36:00 +0200
Subject: [PATCH 2/2] chore: add padding override possibility

---
 packages/main/src/themes/RadioButton.css | 40 ++++++++++++++++--------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
index acd5f20e5868..c54f4d385386 100644
--- a/packages/main/src/themes/RadioButton.css
+++ b/packages/main/src/themes/RadioButton.css
@@ -6,18 +6,27 @@
 }
 
 :host {
-	min-width: var(--_ui5_radio_button_min_width);
+	/* min-width: var(--_ui5_radio_button_min_width); */
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
 	border-radius: var(--_ui5_radio_button_border_radius);
 	font-size: 1rem;
+	/* line-height: 12px; To Do - check if this can be fixed better. Issue - RB is 48px instead 44px height. This causes cutting */
+	box-sizing: border-box;
+	overflow: visible;
+	/* Vertical: (2.75em - 1.375em) / 2 = 0.6875em, Horizontal: 0.625em */
+	padding-block: var(--_ui5_radio_button_padding_block);
+	padding-inline-start: var(--_ui5_radio_button_padding_inline);
 
 	/* Enable font-size based scaling - all em values below are relative to font-size */
 	--_ui5_radio_button_inner_size: 2.75em;
 	--_ui5_radio_button_svg_size: 1.375em;
 	--_ui5_radio_button_height: 2.75em;
+	--_ui5_radio_button_padding_block: 0.6875em;
+	--_ui5_radio_button_padding_inline: 0.625em;
+	--_ui5_radio_button_padding_inline_with_label: 0.6875em;
 	--_ui5_radio_button_outer_ring_padding: 0 0.625em;
 	--_ui5_radio_button_outer_ring_padding_with_label: 0 0.6875em;
 	--_ui5_radio_button_label_offset: 0.125em;
@@ -28,9 +37,13 @@
 /* Compact mode - override em values */
 @container style(--ui5_content_density: compact) {
 	:host {
+		/* Vertical: (2em - 1em) / 2 = 0.5em, Horizontal: 0.5em */
 		--_ui5_radio_button_inner_size: 2em;
 		--_ui5_radio_button_svg_size: 1em;
 		--_ui5_radio_button_height: 2em;
+		--_ui5_radio_button_padding_block: 0.5em;
+		--_ui5_radio_button_padding_inline: 0.5em;
+		--_ui5_radio_button_padding_inline_with_label: 0.5em;
 		--_ui5_radio_button_outer_ring_padding: 0 0.5em;
 		--_ui5_radio_button_outer_ring_padding_with_label: 0 0.5em;
 		--_ui5_radio_button_focus_dist: 0.375em;
@@ -70,7 +83,9 @@
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
-	inset: var(--_ui5_radio_button_focus_dist);
+	/* Extend focus to cover :host padding: -padding + focus_dist */
+	inset-block: calc(-1 * var(--_ui5_radio_button_padding_block) + var(--_ui5_radio_button_focus_dist));
+	inset-inline: calc(-1 * var(--_ui5_radio_button_padding_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);
@@ -101,19 +116,20 @@
 }
 
 /* with label */
+:host([text]) {
+	padding-inline-start: var(--_ui5_radio_button_padding_inline_with_label);
+}
+
 :host([text]) .ui5-radio-root {
 	padding-inline-end: var(--_ui5_radio_button_border_width);
 }
 
 :host([text][desktop]) .ui5-radio-root:focus::before,
 :host([text]) .ui5-radio-root:focus-visible::before {
+	inset-inline-start: calc(-1 * var(--_ui5_radio_button_padding_inline_with_label) + var(--_ui5_radio_button_focus_dist));
 	inset-inline-end: 0px;
 }
 
-:host([text]) .ui5-radio-inner {
-	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
-}
-
 /* readonly */
 :host([checked][readonly]) .ui5-radio-svg-inner {
 	fill: var(--_ui5_radio_button_read_only_inner_ring_color);
@@ -213,14 +229,16 @@
 /* Inner */
 .ui5-radio-inner {
 	display: flex;
-	align-items: center;
-	padding: var(--_ui5_radio_button_outer_ring_padding);
+	align-items: start;
 	flex-shrink: 0;
-	height: var(--_ui5_radio_button_inner_size);
 	pointer-events: none;
 	vertical-align: top;
 }
 
+:host([text]) .ui5-radio-inner {
+	padding-inline-end: 11px; /* To Do add a parameter for this */
+}
+
 .ui5-radio-inner {
 	outline: none;
 }
@@ -248,10 +266,6 @@
 	font-size: var(--_ui5_radio_button_label_font_size);
 }
 
-:host([wrapping-type="None"][text]) .ui5-radio-root {
-	height: var(--_ui5_radio_button_height);
-}
-
 :host([wrapping-type="None"][text]) [ui5-label].ui5-radio-label {
 	text-overflow: ellipsis;
 	overflow: hidden;