fix(ObjectStatus): update inverted focus styles (#7884)

Fixes #7883

Author: Lukas742

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);