fix(ui5-busy-indicator): update busy area opacity (#11237)

s-todorova · web-flow · commit 637cdd011402 · 2025-04-15T14:29:24.000+03:00
fixes: #11224
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -91,8 +91,8 @@
 	border-radius: inherit;
 }
 
-:host(:not(:empty)) .ui5-busy-indicator-busy-area {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([active]) ::slotted(*) {
+	opacity: var(--sapContent_DisabledOpacity);	
 }
 
 :host([desktop]) .ui5-busy-indicator-busy-area:focus,
diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
@@ -54,6 +54,6 @@
     z-index: 2;
 }
 
-#loading[_is-busy] {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
+    opacity: var(--sapContent_DisabledOpacity);
 }
diff --git a/packages/main/src/themes/base/BusyIndicator-parameters.css b/packages/main/src/themes/base/BusyIndicator-parameters.css
@@ -1,5 +1,4 @@
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
-}
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -2,7 +2,6 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "./Bar-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css
@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }
diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -70,7 +70,6 @@
 		<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" class="busyindicator5auto"></ui5-list>
 	</ui5-busy-indicator>
 
-
 	<br>
 	<br>
 	<br>

Original file line number	Diff line number	Diff line change
`@@ -91,8 +91,8 @@`
`91`	`91`	`border-radius: inherit;`
`92`	`92`	`}`
`93`	`93`
`94`		`-:host(:not(:empty)) .ui5-busy-indicator-busy-area {`
`95`		`- background-color: var(--_ui5_busy_indicator_block_layer);`
	`94`	`+:host([active]) ::slotted(*) {`
	`95`	`+ opacity: var(--sapContent_DisabledOpacity);`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`:host([desktop]) .ui5-busy-indicator-busy-area:focus,`
Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,6 @@`
`54`	`54`	`z-index: 2;`
`55`	`55`	`}`
`56`	`56`
`57`		`-#loading[_is-busy] {`
`58`		`- background-color: var(--_ui5_busy_indicator_block_layer);`
	`57`	`+:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {`
	`58`	`+ opacity: var(--sapContent_DisabledOpacity);`
`59`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,4 @@`
`2`	`2`
`3`	`3`	`:root {`
`4`	`4`	`--_ui5_busy_indicator_color: var(--sapContent_BusyColor);`
`5`		`- --_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);`
`6`	`5`	`}`