From 08e029fafe4ca4591301d032b78aa3ebc6136a40 Mon Sep 17 00:00:00 2001 From: Konstantin Gogov Date: Thu, 28 Nov 2024 13:03:26 +0200 Subject: [PATCH] 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 --- packages/main/src/themes/ListItem.css | 4 ++++ packages/main/src/themes/ListItemBase.css | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index 9d1000921f9b..3b848249f726 100644 --- 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 index e259cf92a626..fd03a490727a 100644 --- 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 */