fix(ui-tabs,shared-types): color tabs.panel focus outline from the theme and make it overridable by brand overrides

INSTUI-4690

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -1387,6 +1387,7 @@ export type TabsPanelTheme = {
   borderWidth: Border['widthSmall']
   borderStyle: Border['style']
   defaultOverflowY: string
+  focusOutlineColor: Colors['contrasts']['blue4570']
 }
 
 export type TabsTabTheme = {

packages/ui-tabs/src/Tabs/Panel/styles.ts

@@ -59,7 +59,10 @@ const generateStyle = (
       }),
       ...(isHidden && {
         display: 'none'
-      })
+      }),
+      '&:focus': {
+        outlineColor: componentTheme.focusOutlineColor
+      }
     },
     content: {
       label: 'panel__content',

packages/ui-tabs/src/Tabs/Panel/theme.ts

@@ -35,7 +35,8 @@ const generateComponentTheme = (theme: Theme): TabsPanelTheme => {
 
   const themeSpecificStyle: ThemeSpecificStyle<TabsPanelTheme> = {
     canvas: {
-      color: theme['ic-brand-font-color-dark']
+      color: theme['ic-brand-font-color-dark'],
+      focusOutlineColor: theme['ic-brand-primary']
     }
   }
 
@@ -49,7 +50,8 @@ const generateComponentTheme = (theme: Theme): TabsPanelTheme => {
     borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
-    defaultOverflowY: 'auto'
+    defaultOverflowY: 'auto',
+    focusOutlineColor: colors.contrasts.blue4570
   }
 
   return {