Merge branch 'main' into contact-panel-keyboard-nav

styles/src/styleTree/app.ts

@@ -10,6 +10,7 @@ import search from "./search";
 import picker from "./picker";
 import workspace from "./workspace";
 import projectDiagnostics from "./projectDiagnostics";
+import contactNotification from "./contactNotification";
 
 export const panel = {
   padding: { top: 12, bottom: 12 },
@@ -32,6 +33,7 @@ export default function app(theme: Theme): Object {
       padding: {
         left: 6,
       },
-    }
+    },
+    contactNotification: contactNotification(theme),
   };
 }

styles/src/styleTree/contactNotification.ts

@@ -0,0 +1,44 @@
+import Theme from "../themes/theme";
+import { backgroundColor, iconColor, text } from "./components";
+
+const avatarSize = 12;
+const headerPadding = 8;
+
+export default function contactNotification(theme: Theme): Object {
+  return {
+    headerAvatar: {
+      height: avatarSize,
+      width: avatarSize,
+      cornerRadius: 6,
+    },
+    headerMessage: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+      margin: { left: headerPadding, right: headerPadding }
+    },
+    headerHeight: 18,
+    bodyMessage: {
+      ...text(theme, "sans", "secondary", { size: "xs" }),
+      margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
+    },
+    button: {
+      ...text(theme, "sans", "primary", { size: "xs" }),
+      background: backgroundColor(theme, "on300"),
+      padding: 4,
+      cornerRadius: 6,
+      margin: { left: 6 },
+      hover: {
+        background: backgroundColor(theme, "on300", "hovered")
+      }
+    },
+    dismissButton: {
+      color: iconColor(theme, "secondary"),
+      iconWidth: 8,
+      iconHeight: 8,
+      buttonWidth: 8,
+      buttonHeight: 8,
+      hover: {
+        color: iconColor(theme, "primary")
+      }
+    }
+  }
+}

styles/src/styleTree/statusBar.ts

@@ -1,8 +1,8 @@
 import Theme from "../themes/theme";
 import { backgroundColor, border, iconColor, text } from "./components";
+import { workspaceBackground } from "./workspace";
 
 export default function statusBar(theme: Theme) {
-
   const statusContainer = {
     cornerRadius: 6,
     padding: { top: 3, bottom: 3, left: 6, right: 6 }
@@ -100,6 +100,13 @@ export default function statusBar(theme: Theme) {
           iconColor: iconColor(theme, "active"),
           background: backgroundColor(theme, 300, "active"),
         }
+      },
+      badge: {
+        cornerRadius: 3,
+        padding: 2,
+        margin: { bottom: -1, right: -1 },
+        border: { width: 1, color: workspaceBackground(theme) },
+        background: iconColor(theme, "feature"),
       }
     }
   }

styles/src/styleTree/workspace.ts

@@ -1,12 +1,16 @@
 import Theme from "../themes/theme";
-import { backgroundColor, border, iconColor, text } from "./components";
+import { backgroundColor, border, iconColor, shadow, text } from "./components";
 import statusBar from "./statusBar";
 
+export function workspaceBackground(theme: Theme) {
+  return backgroundColor(theme, 300)
+}
+
 export default function workspace(theme: Theme) {
 
   const tab = {
     height: 32,
-    background: backgroundColor(theme, 300),
+    background: workspaceBackground(theme),
     iconClose: iconColor(theme, "muted"),
     iconCloseActive: iconColor(theme, "active"),
     iconConflict: iconColor(theme, "warning"),
@@ -146,5 +150,17 @@ export default function workspace(theme: Theme) {
       ...text(theme, "sans", "active"),
       background: "#000000aa",
     },
+    notification: {
+      margin: { top: 10 },
+      background: backgroundColor(theme, 300),
+      cornerRadius: 6,
+      padding: 12,
+      border: border(theme, "primary"),
+      shadow: shadow(theme),
+    },
+    notifications: {
+      width: 380,
+      margin: { right: 10, bottom: 10 },
+    }
   };
 }

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;