diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
index 8e517c983e0..23ee617ee6a 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
@@ -166,6 +166,40 @@ const statesWithCSSVars: {
iconColor: ThemingParameters.sapIndicationColor_8_TextColor
},
hiddenText: `${INDICATION_COLOR.defaultText} 8`
+ },
+ {
+ state: 'Indication09',
+ color: ThemingParameters.sapIndicationColor_9,
+ iconColor: ThemingParameters.sapIndicationColor_9,
+ inverted: {
+ color: ThemingParameters.sapIndicationColor_9_TextColor,
+ backgroundColor: ThemingParameters.sapIndicationColor_9_Background,
+ iconColor: ThemingParameters.sapIndicationColor_9_TextColor
+ },
+ hiddenText: `${INDICATION_COLOR.defaultText} 9`
+ },
+ {
+ state: 'Indication10',
+ color: ThemingParameters.sapIndicationColor_10,
+ iconColor: ThemingParameters.sapIndicationColor_10,
+ inverted: {
+ color: ThemingParameters.sapIndicationColor_10_TextColor,
+ backgroundColor: ThemingParameters.sapIndicationColor_10_Background,
+ iconColor: ThemingParameters.sapIndicationColor_10_TextColor
+ },
+ hiddenText: `${INDICATION_COLOR.defaultText} 10`
+ },
+ {
+ state: 'Indication11',
+ // fallback to "None" colors for non-inverted indication colors > 10
+ color: ThemingParameters.sapNeutralTextColor,
+ iconColor: ThemingParameters.sapNeutralElementColor,
+ inverted: {
+ color: ThemingParameters.sapIndicationColor_1b_TextColor,
+ backgroundColor: ThemingParameters.sapIndicationColor_1b_Background,
+ iconColor: ThemingParameters.sapIndicationColor_1b_TextColor
+ },
+ hiddenText: `${INDICATION_COLOR.defaultText} 11`
}
];
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
index f667cc715f6..e8b6e582aab 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.mdx
@@ -34,9 +34,9 @@ import * as ComponentStories from './ObjectStatus.stories';
-## Inverted Object Status
+## All ObjectStatus states
-The Object Status has an inverted visualisation, which is used in cases when the information is crucial for the user’s actions and needs to stand out visually.
+**Note:** Only the `inverted` `ObjectStatus` supports `IndicationColor`s 11-20. For non-inverted `ObjectStatus`, these colors default to the `"None"` `state` color and should **not** be used.
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
index 744e4538ba2..80302e3f907 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css
@@ -11,6 +11,12 @@
vertical-align: top;
width: fit-content;
text-shadow: var(--sapContent_TextShadow);
+
+ color: var(--sapNeutralTextColor);
+
+ [ui5-icon] {
+ color: var(--sapNeutralElementColor);
+ }
}
.icon {
@@ -80,14 +86,6 @@
}
}
-.none {
- color: var(--sapNeutralTextColor);
-
- [ui5-icon] {
- color: var(--sapNeutralElementColor);
- }
-}
-
.indication01 {
color: var(--sapIndicationColor_1);
@@ -152,6 +150,22 @@
}
}
+.indication09 {
+ color: var(--sapIndicationColor_9);
+
+ [ui5-icon] {
+ color: var(--sapIndicationColor_9);
+ }
+}
+
+.indication10 {
+ color: var(--sapIndicationColor_10);
+
+ [ui5-icon] {
+ color: var(--sapIndicationColor_10);
+ }
+}
+
.active {
cursor: pointer;
@@ -476,6 +490,149 @@
--_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_8_Active_BorderColor);
}
+.objectStatus:is(.inverted.indication09) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication10) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
+}
+.objectStatus:is(.inverted.indication11) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_1b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_1b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_1b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_1b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_1_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_1_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_1_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication12) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_2b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_2b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_2b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_2b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_2_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_2_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_2_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication13) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_3b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_3b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_3b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_3b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_3_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_3_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_3_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication14) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_4b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_4b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_4b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_4b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_4_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_4_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_4_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication15) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_5b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_5b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_5b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_5b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_5_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_5_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_5_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication16) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_6b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_6b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_6b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_6b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_6_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_6_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_6_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication17) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_7b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_7b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_7b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_7b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_7_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_7_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_7_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication18) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_8b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_8b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_8b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_8b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_8_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_8_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_8_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication19) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_9b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_9b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_9b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_9b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_9_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_9_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_9_Active_BorderColor);
+}
+
+.objectStatus:is(.inverted.indication20) {
+ --_ui5wcr-ObjectStatus-inverted-indication-text-color: var(--sapIndicationColor_10b_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-background-color: var(--sapIndicationColor_10b_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-border-color: var(--sapIndicationColor_10b_BorderColor);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-hover-background-color: var(--sapIndicationColor_10b_Hover_Background);
+
+ --_ui5wcr-ObjectStatus-inverted-indication-active-text-color: var(--sapIndicationColor_10_Active_TextColor);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-background-color: var(--sapIndicationColor_10_Active_Background);
+ --_ui5wcr-ObjectStatus-inverted-indication-active-border-color: var(--sapIndicationColor_10_Active_BorderColor);
+}
+
.objectStatus:is(.inverted):is(
.indication01,
.indication02,
@@ -484,7 +641,19 @@
.indication05,
.indication06,
.indication07,
- .indication08
+ .indication08,
+ .indication09,
+ .indication10,
+ .indication11,
+ .indication12,
+ .indication13,
+ .indication14,
+ .indication15,
+ .indication16,
+ .indication17,
+ .indication18,
+ .indication19,
+ .indication20
) {
text-shadow: var(--sapContent_ContrastTextShadow);
color: var(--_ui5wcr-ObjectStatus-inverted-indication-text-color);
@@ -510,3 +679,19 @@
}
}
}
+
+.objectStatus:is(.inverted):is(
+ .indication11,
+ .indication12,
+ .indication13,
+ .indication14,
+ .indication15,
+ .indication16,
+ .indication17,
+ .indication18,
+ .indication19,
+ .indication20
+ /* increase specificity */
+ ):not(#noop) {
+ text-shadow: var(--sapContent_TextShadow);
+}
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index 224145f0baa..13bc62e0749 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react';
import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js';
-import { Icon, IndicationColor, Label } from '../..';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { IndicationColor } from '../../enums/IndicationColor.js';
+import { Icon } from '../../webComponents/Icon/index.js';
+import { Label } from '../../webComponents/Label/index.js';
+import { Text } from '../../webComponents/Text/index.js';
+import type { ObjectStatusPropTypes } from './index.js';
import { ObjectStatus } from './index.js';
const meta = {
@@ -63,9 +68,28 @@ export const WithIconOnly: Story = {
args: { icon: