diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css index 80302e3f907..143b4a2c501 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css @@ -3,6 +3,9 @@ } .objectStatus { + --_ui5wcr-ObjectStatus-focs-outline: 0.125rem var(--sapContent_FocusColor); + --_ui5wcr-ObjectStatus-focs-background: var(--sapContent_FocusColor); + font-family: var(--sapFontFamily); font-size: var(--sapFontSize); font-weight: normal; @@ -19,6 +22,14 @@ } } +/*deltas*/ +[data-sap-theme^='sap_'][data-sap-theme$='_hcw'] .objectStatus, +[data-sap-theme^='sap_'][data-sap-theme$='_hcb'] .objectStatus { + --_ui5wcr-ObjectStatus-focs-outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) + var(--sapContent_FocusWidth); + --_ui5wcr-ObjectStatus-focs-background: transparent; +} + .icon { width: 1rem; text-align: center; @@ -183,11 +194,10 @@ &:focus { text-shadow: none; - background: var(--sapContent_FocusColor); + background: var(--_ui5wcr-ObjectStatus-focs-background); color: var(--sapContent_ContrastTextColor); border-radius: 0.125rem; - outline: 0.125rem var(--sapContent_FocusColor); - + outline: var(--_ui5wcr-ObjectStatus-focs-outline); [ui5-icon] { color: var(--sapContent_ContrastTextColor); } diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx index 13bc62e0749..2a84495ad5d 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx @@ -84,6 +84,7 @@ export const InvertedObjectStatus: Story = { interactive={interactive} inverted={inverted} state={state} + showDefaultIcon > {state}