fix(ui5-li): address additional text contrast issue

The contrast of the additional text in the list item is not sufficient. This change addresses the issue by increasing the contrast of the additional text by adding a text shadow and aligning the component with the design guidelines. Fixes: #9869
SAP · Nov 28, 2024 · 08e029f · 08e029f
1 parent 3b6cc84
commit 08e029f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css
@@ -22,6 +22,10 @@
 	color: var(--sapList_Active_TextColor);
 }
 
+:host([active][actionable]) .ui5-li-additional-text {
+	text-shadow: none;
+}
+
 /* [ui5-li]: additionalTextState */
 :host([additional-text-state="Critical"]) .ui5-li-additional-text {
 	color: var(--sapCriticalTextColor);

diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
@@ -27,11 +27,19 @@
 :host([selected]) {
 	background-color: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 /* hovered */
 :host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 /* selected and hovered */