From eb45c69240a7c721a091f6029d350b59d838eddb Mon Sep 17 00:00:00 2001
From: Nikola Anachkov <nikola.anachkov@sap.com>
Date: Wed, 4 Feb 2026 16:50:49 +0200
Subject: [PATCH] feat(ui5-checkbox): enable font-size based scaling for
 standalone checkboxes

---
 packages/main/src/themes/CheckBox.css | 62 ++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
index 17a8b03cdba0..f51d6a0ed2d0 100644
--- a/packages/main/src/themes/CheckBox.css
+++ b/packages/main/src/themes/CheckBox.css
@@ -6,6 +6,17 @@
 	display: inline-block;
 }
 
+:host(:not([text])) {
+	padding: 0.6875rem;
+	width: fit-content;
+	height: fit-content;
+	overflow: visible;
+	line-height: 0;
+	--_ui5_checkbox_inner_width_height: 1em;
+	--_ui5_checkbox_icon_size: 1em;
+	--_ui5_checkbox_partially_icon_size: .55em;
+}
+
 :host([required]) {
 	vertical-align: middle;
 }
@@ -121,15 +132,24 @@
 	display: inline-flex;
 	align-items: center;
 	max-width: 100%;
-	min-height: var(--_ui5_checkbox_width_height);
-	min-width: var(--_ui5_checkbox_width_height);
-	padding: 0 var(--_ui5_checkbox_wrapper_padding);
 	box-sizing: border-box;
 	outline: none;
 	transition: var(--_ui5_checkbox_transition);
 	border: var(--_ui5_checkbox_default_focus_border);
 	border-radius: var(--_ui5_checkbox_border_radius);
-	box-sizing: border-box;
+}
+
+:host(:not([text])) .ui5-checkbox-root {
+	width: 1em;
+	height: 1em;
+	padding: 0;
+}
+
+:host([text]) .ui5-checkbox-root {
+	min-height: var(--_ui5_checkbox_width_height);
+	min-width: var(--_ui5_checkbox_width_height);
+	padding: 0.6875rem;
+	padding: 0 var(--_ui5_checkbox_wrapper_padding);
 }
 
 /* focused */
@@ -144,6 +164,12 @@
 	border-radius: var(--_ui5_checkbox_focus_border_radius);
 }
 
+:host(:not([text])[desktop]) .ui5-checkbox-root:focus::before,
+:host(:not([text])) .ui5-checkbox-root:focus-visible::before {
+	inset-inline: -0.425rem;
+	inset-block: -0.425rem;
+}
+
 :host([text]) .ui5-checkbox-root {
 	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
 }
@@ -242,6 +268,7 @@
 .ui5-checkbox-icon {
 	width: var(--_ui5_checkbox_icon_size);
 	height: var(--_ui5_checkbox_icon_size);
+	font-size: var(--_ui5_checkbox_icon_size);
 	color: currentColor;
 	cursor: inherit;
 	position: absolute;
@@ -250,13 +277,36 @@
 	transform: translate(-50%, -50%);
 }
 
+/* Override icon size for checkboxes without text to enable font-size scaling */
+:host(:not([text])) .ui5-checkbox-icon {
+	width: 1em;
+	height: 1em;
+	font-size: 1em;
+}
+
 /* Display only mode */
 :host([display-only]) {
 	cursor: default;
 }
 
-:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] {
-	color: var(--sapTextColor);
+:host([display-only]:not([text])) {
+	width: var(--_ui5_checkbox_icon_size);
+	height: var(--_ui5_checkbox_icon_size);
+	padding: 0.6875rem;
+	overflow: visible;
+	line-height: 0;
+	font-size: 1rem;
+	--_ui5_checkbox_inner_width_height: 1em;
+	--_ui5_checkbox_icon_size: 1em;
+	--_ui5_checkbox_partially_icon_size: .55em;
+}
+
+
+/* Override icon size for display-only checkboxes without text to enable font-size scaling */
+:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] {
+	width: 1em;
+	height: 1em;
+	font-size: 1em;
 }
 
 :host([display-only]) .ui5-checkbox-display-only-icon-inner {