add outlineColor as a global theme property

src/theme/brave-dark.ts

@@ -11,7 +11,8 @@ const darkTheme: ITheme = {
     contextMenuForeground: colors.white,
     defaultControl: colors.grey400,
     defaultControlInteracting: colors.white,
-    defaultControlActive: colors.grey500
+    defaultControlActive: colors.grey500,
+    outlineColor: 'rgba(255,255,255,0.5)'
   }
 }
 

src/theme/brave-default.ts

@@ -51,7 +51,9 @@ const theme: ITheme = {
     inputBorder: colors.grey500,
     separatorLine: colors.grey100,
     // images
-    lionLogo: colors.grey500
+    lionLogo: colors.grey500,
+    // elements outline
+    outlineColor: 'rgba(255,80,0,0.2)'
   },
   fontFamily: {
     heading: 'Poppins, sans-serif',

src/theme/index.tsx

@@ -1,7 +1,7 @@
 // @ts-ignore: Needed for ThemeProvider
 import * as React from 'react'
 import * as styledComponents from 'styled-components'
-import { BraveThemedStyledProps as ThemedStyledProps } from './theme-interface'
+import IThemeProps, { BraveThemedStyledProps as ThemedStyledProps } from './theme-interface'
 // theme for testing
 import TestTheme from './brave-default'
 
@@ -17,7 +17,7 @@ const {
   //   see: https://github.com/palantir/tslint/issues/3505
   //   It's possibly due to the rule upstream in tslint-config-standard
   // tslint:disable-next-line
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<any>
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeProps>
 
 export default styled
 

src/theme/theme-interface.ts

@@ -36,6 +36,7 @@ export default interface IThemeProps {
     lionLogo: string
     inputBorder: string
     separatorLine: string
+    outlineColor: string
   }
   fontFamily: {
     heading: string