Add onMedia border token

styles/src/themes/base16.ts

@@ -82,6 +82,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
     muted: neutral[3],
     focused: neutral[3],
     active: neutral[3],
+    onMedia: withOpacity(neutral[0], 0.1),
     ok: withOpacity(accent.green, 0.15),
     error: withOpacity(accent.red, 0.15),
     warning: withOpacity(accent.yellow, 0.15),

styles/src/themes/dark.ts

@@ -65,6 +65,7 @@ const borderColor = {
   muted: colors.neutral[675],
   focused: colors.indigo[500],
   active: colors.neutral[900],
+  onMedia: withOpacity(colors.neutral[875], 0.1),
   ok: withOpacity(colors.green[600], 0.15),
   error: withOpacity(colors.red[500], 0.15),
   warning: withOpacity(colors.amber[400], 0.15),

styles/src/themes/light.ts

@@ -65,6 +65,7 @@ const borderColor = {
   muted: colors.neutral[100],
   focused: colors.indigo[500],
   active: colors.neutral[250],
+  onMedia: withOpacity(colors.neutral[250], 0.3),
   ok: withOpacity(colors.green[600], 0.15),
   error: withOpacity(colors.red[500], 0.15),
   warning: withOpacity(colors.amber[400], 0.15),

styles/src/themes/theme.ts

@@ -87,6 +87,10 @@ export default interface Theme {
     muted: ColorToken;
     focused: ColorToken;
     active: ColorToken;
+    /**
+    * Used for rendering borders on top of media like avatars, images, video, etc.
+    */
+    onMedia: ColorToken;
     ok: ColorToken;
     error: ColorToken;
     warning: ColorToken;