Skip to content

Commit 9061974

Browse files
authored
fix(ObjectStatus): implement focus deltas for hc theme (#7283)
Fixes #7280
1 parent 16e0f49 commit 9061974

File tree

2 files changed

+14
-3
lines changed

2 files changed

+14
-3
lines changed

packages/main/src/components/ObjectStatus/ObjectStatus.module.css

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
}
44

55
.objectStatus {
6+
--_ui5wcr-ObjectStatus-focs-outline: 0.125rem var(--sapContent_FocusColor);
7+
--_ui5wcr-ObjectStatus-focs-background: var(--sapContent_FocusColor);
8+
69
font-family: var(--sapFontFamily);
710
font-size: var(--sapFontSize);
811
font-weight: normal;
@@ -19,6 +22,14 @@
1922
}
2023
}
2124

25+
/*deltas*/
26+
[data-sap-theme^='sap_'][data-sap-theme$='_hcw'] .objectStatus,
27+
[data-sap-theme^='sap_'][data-sap-theme$='_hcb'] .objectStatus {
28+
--_ui5wcr-ObjectStatus-focs-outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle)
29+
var(--sapContent_FocusWidth);
30+
--_ui5wcr-ObjectStatus-focs-background: transparent;
31+
}
32+
2233
.icon {
2334
width: 1rem;
2435
text-align: center;
@@ -183,11 +194,10 @@
183194

184195
&:focus {
185196
text-shadow: none;
186-
background: var(--sapContent_FocusColor);
197+
background: var(--_ui5wcr-ObjectStatus-focs-background);
187198
color: var(--sapContent_ContrastTextColor);
188199
border-radius: 0.125rem;
189-
outline: 0.125rem var(--sapContent_FocusColor);
190-
200+
outline: var(--_ui5wcr-ObjectStatus-focs-outline);
191201
[ui5-icon] {
192202
color: var(--sapContent_ContrastTextColor);
193203
}

packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export const InvertedObjectStatus: Story = {
8484
interactive={interactive}
8585
inverted={inverted}
8686
state={state}
87+
showDefaultIcon
8788
>
8889
{state}
8990
</ObjectStatus>

0 commit comments

Comments
 (0)