Add onMedia border token

styles/dist/dark.json

@@ -332,6 +332,11 @@
       "description": "Step: 900",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#0707071a",
+      "description": "Step: 875",
+      "type": "color"
+    },
     "ok": {
       "value": "#1b944726",
       "description": "Step: 600",

styles/dist/light.json

@@ -332,6 +332,11 @@
       "description": "Step: 250",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#b8b8b84d",
+      "description": "Step: 250",
+      "type": "color"
+    },
     "ok": {
       "value": "#1b944726",
       "description": "Step: 600",

styles/dist/solarized-dark.json

@@ -271,6 +271,10 @@
       "value": "#657b83",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#002b361a",
+      "type": "color"
+    },
     "ok": {
       "value": "#85990026",
       "type": "color"

styles/dist/solarized-light.json

@@ -271,6 +271,10 @@
       "value": "#839496",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#fdf6e31a",
+      "type": "color"
+    },
     "ok": {
       "value": "#85990026",
       "type": "color"

styles/dist/tokens.json

@@ -1514,6 +1514,11 @@
         "description": "Step: 900",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#0707071a",
+        "description": "Step: 875",
+        "type": "color"
+      },
       "ok": {
         "value": "#1b944726",
         "description": "Step: 600",
@@ -2207,6 +2212,11 @@
         "description": "Step: 250",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#b8b8b84d",
+        "description": "Step: 250",
+        "type": "color"
+      },
       "ok": {
         "value": "#1b944726",
         "description": "Step: 600",
@@ -2839,6 +2849,10 @@
         "value": "#657b83",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#002b361a",
+        "type": "color"
+      },
       "ok": {
         "value": "#85990026",
         "type": "color"
@@ -3406,6 +3420,10 @@
         "value": "#839496",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#fdf6e31a",
+        "type": "color"
+      },
       "ok": {
         "value": "#85990026",
         "type": "color"

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;