diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css index c7f553f3036..9623912ea50 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.module.css +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.module.css @@ -239,7 +239,30 @@ } &.active:focus { - outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth); + outline: none; + &::after { + outline: none; + content: ''; + position: absolute; + box-sizing: border-box; + inset: calc(-1 * var(--sapButton_BorderWidth)); + pointer-events: none; + box-shadow: + inset 0 0 0 0.125rem var(--sapContent_FocusColor), + inset 0 0 0 0.1875rem var(--sapContent_ContrastFocusColor); + border-radius: inherit; + height: calc(100% + 2 * var(--sapButton_BorderWidth)); + } + } +} + +/*deltas*/ +[data-sap-theme^='sap_'][data-sap-theme$='_hcw'] .inverted.active:focus, +[data-sap-theme^='sap_'][data-sap-theme$='_hcb'] .inverted.active:focus { + outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth); + outline-offset: var(--sapButton_BorderWidth); + &::after { + content: none; } } @@ -385,7 +408,7 @@ .objectStatus:is(.inverted):is(.negative, .critical, .positive, .information, .none) { color: var(--_ui5wcr-ObjectStatus-inverted-vs-text-color); background: var(--_ui5wcr-ObjectStatus-inverted-vs-background-color); - border: 0.0625rem solid var(--_ui5wcr-ObjectStatus-inverted-vs-border-color); + border: var(--sapButton_BorderWidth) solid var(--_ui5wcr-ObjectStatus-inverted-vs-border-color); [ui5-icon] { color: var(--_ui5wcr-ObjectStatus-inverted-vs-text-color); @@ -394,7 +417,7 @@ &.active:hover { color: var(--_ui5wcr-ObjectStatus-inverted-vs-hover-text-color); background: var(--_ui5wcr-ObjectStatus-inverted-vs-hover-background-color); - border: 0.0625rem solid var(--_ui5wcr-ObjectStatus-inverted-vs-hover-border-color); + border: var(--sapButton_BorderWidth) solid var(--_ui5wcr-ObjectStatus-inverted-vs-hover-border-color); [ui5-icon] { color: var(--_ui5wcr-ObjectStatus-inverted-vs-hover-text-color); @@ -405,7 +428,7 @@ text-shadow: var(--sapContent_TextShadow); color: var(--_ui5wcr-ObjectStatus-inverted-vs-active-text-color); background: var(--_ui5wcr-ObjectStatus-inverted-vs-active-background-color); - border: 0.0625rem solid var(--_ui5wcr-ObjectStatus-inverted-vs-active-border-color); + border: var(--sapButton_BorderWidth) solid var(--_ui5wcr-ObjectStatus-inverted-vs-active-border-color); [ui5-icon] { color: var(--_ui5wcr-ObjectStatus-inverted-vs-active-text-color); @@ -685,7 +708,7 @@ text-shadow: var(--sapContent_ContrastTextShadow); color: var(--_ui5wcr-ObjectStatus-inverted-indication-text-color); background-color: var(--_ui5wcr-ObjectStatus-inverted-indication-background-color); - border: 0.0625rem solid var(--_ui5wcr-ObjectStatus-inverted-indication-border-color); + border: var(--sapButton_BorderWidth) solid var(--_ui5wcr-ObjectStatus-inverted-indication-border-color); [ui5-icon] { color: var(--_ui5wcr-ObjectStatus-inverted-indication-text-color); @@ -699,7 +722,7 @@ text-shadow: var(--sapContent_TextShadow); color: var(--_ui5wcr-ObjectStatus-inverted-indication-active-text-color); background: var(--_ui5wcr-ObjectStatus-inverted-indication-active-background-color); - border: 0.0625rem solid var(--_ui5wcr-ObjectStatus-inverted-indication-active-border-color); + border: var(--sapButton_BorderWidth) solid var(--_ui5wcr-ObjectStatus-inverted-indication-active-border-color); [ui5-icon] { color: var(--_ui5wcr-ObjectStatus-inverted-indication-active-text-color);