Format styles with updated prettier config

In the system color PR I updated the prettier config to match what we use on zed.dev. I didn't want to format all of styles as it would add a lot of unrelated line changes to that PR.

Doing that format now.

styles/src/styleTree/app.ts

@@ -1,72 +1,72 @@
-import { text } from "./components";
-import contactFinder from "./contactFinder";
-import contactsPopover from "./contactsPopover";
-import commandPalette from "./commandPalette";
-import editor from "./editor";
-import projectPanel from "./projectPanel";
-import search from "./search";
-import picker from "./picker";
-import workspace from "./workspace";
-import contextMenu from "./contextMenu";
-import sharedScreen from "./sharedScreen";
-import projectDiagnostics from "./projectDiagnostics";
-import contactNotification from "./contactNotification";
-import updateNotification from "./updateNotification";
-import simpleMessageNotification from "./simpleMessageNotification";
-import projectSharedNotification from "./projectSharedNotification";
-import tooltip from "./tooltip";
-import terminal from "./terminal";
-import contactList from "./contactList";
-import incomingCallNotification from "./incomingCallNotification";
-import { ColorScheme } from "../themes/common/colorScheme";
-import feedback from "./feedback";
+import { text } from "./components"
+import contactFinder from "./contactFinder"
+import contactsPopover from "./contactsPopover"
+import commandPalette from "./commandPalette"
+import editor from "./editor"
+import projectPanel from "./projectPanel"
+import search from "./search"
+import picker from "./picker"
+import workspace from "./workspace"
+import contextMenu from "./contextMenu"
+import sharedScreen from "./sharedScreen"
+import projectDiagnostics from "./projectDiagnostics"
+import contactNotification from "./contactNotification"
+import updateNotification from "./updateNotification"
+import simpleMessageNotification from "./simpleMessageNotification"
+import projectSharedNotification from "./projectSharedNotification"
+import tooltip from "./tooltip"
+import terminal from "./terminal"
+import contactList from "./contactList"
+import incomingCallNotification from "./incomingCallNotification"
+import { ColorScheme } from "../themes/common/colorScheme"
+import feedback from "./feedback"
 
 export default function app(colorScheme: ColorScheme): Object {
-  return {
-    meta: {
-      name: colorScheme.name,
-      isLight: colorScheme.isLight,
-    },
-    commandPalette: commandPalette(colorScheme),
-    contactNotification: contactNotification(colorScheme),
-    projectSharedNotification: projectSharedNotification(colorScheme),
-    incomingCallNotification: incomingCallNotification(colorScheme),
-    picker: picker(colorScheme),
-    workspace: workspace(colorScheme),
-    contextMenu: contextMenu(colorScheme),
-    editor: editor(colorScheme),
-    projectDiagnostics: projectDiagnostics(colorScheme),
-    projectPanel: projectPanel(colorScheme),
-    contactsPopover: contactsPopover(colorScheme),
-    contactFinder: contactFinder(colorScheme),
-    contactList: contactList(colorScheme),
-    search: search(colorScheme),
-    sharedScreen: sharedScreen(colorScheme),
-    breadcrumbs: {
-      ...text(colorScheme.highest, "sans", "variant"),
-      padding: {
-        left: 6,
-      },
-    },
-    updateNotification: updateNotification(colorScheme),
-    simpleMessageNotification: simpleMessageNotification(colorScheme),
-    tooltip: tooltip(colorScheme),
-    terminal: terminal(colorScheme),
-    feedback: feedback(colorScheme),
-    colorScheme: {
-      ...colorScheme,
-      players: Object.values(colorScheme.players),
-      ramps: {
-        neutral: colorScheme.ramps.neutral.colors(100, "hex"),
-        red: colorScheme.ramps.red.colors(100, "hex"),
-        orange: colorScheme.ramps.orange.colors(100, "hex"),
-        yellow: colorScheme.ramps.yellow.colors(100, "hex"),
-        green: colorScheme.ramps.green.colors(100, "hex"),
-        cyan: colorScheme.ramps.cyan.colors(100, "hex"),
-        blue: colorScheme.ramps.blue.colors(100, "hex"),
-        violet: colorScheme.ramps.violet.colors(100, "hex"),
-        magenta: colorScheme.ramps.magenta.colors(100, "hex"),
-      },
-    },
-  };
+    return {
+        meta: {
+            name: colorScheme.name,
+            isLight: colorScheme.isLight,
+        },
+        commandPalette: commandPalette(colorScheme),
+        contactNotification: contactNotification(colorScheme),
+        projectSharedNotification: projectSharedNotification(colorScheme),
+        incomingCallNotification: incomingCallNotification(colorScheme),
+        picker: picker(colorScheme),
+        workspace: workspace(colorScheme),
+        contextMenu: contextMenu(colorScheme),
+        editor: editor(colorScheme),
+        projectDiagnostics: projectDiagnostics(colorScheme),
+        projectPanel: projectPanel(colorScheme),
+        contactsPopover: contactsPopover(colorScheme),
+        contactFinder: contactFinder(colorScheme),
+        contactList: contactList(colorScheme),
+        search: search(colorScheme),
+        sharedScreen: sharedScreen(colorScheme),
+        breadcrumbs: {
+            ...text(colorScheme.highest, "sans", "variant"),
+            padding: {
+                left: 6,
+            },
+        },
+        updateNotification: updateNotification(colorScheme),
+        simpleMessageNotification: simpleMessageNotification(colorScheme),
+        tooltip: tooltip(colorScheme),
+        terminal: terminal(colorScheme),
+        feedback: feedback(colorScheme),
+        colorScheme: {
+            ...colorScheme,
+            players: Object.values(colorScheme.players),
+            ramps: {
+                neutral: colorScheme.ramps.neutral.colors(100, "hex"),
+                red: colorScheme.ramps.red.colors(100, "hex"),
+                orange: colorScheme.ramps.orange.colors(100, "hex"),
+                yellow: colorScheme.ramps.yellow.colors(100, "hex"),
+                green: colorScheme.ramps.green.colors(100, "hex"),
+                cyan: colorScheme.ramps.cyan.colors(100, "hex"),
+                blue: colorScheme.ramps.blue.colors(100, "hex"),
+                violet: colorScheme.ramps.violet.colors(100, "hex"),
+                magenta: colorScheme.ramps.magenta.colors(100, "hex"),
+            },
+        },
+    }
 }

styles/src/styleTree/commandPalette.ts

@@ -1,30 +1,30 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { text, background } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { text, background } from "./components"
 
 export default function commandPalette(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
-  return {
-    keystrokeSpacing: 8,
-    key: {
-      text: text(layer, "mono", "variant", "default", { size: "xs" }),
-      cornerRadius: 2,
-      background: background(layer, "on"),
-      padding: {
-        top: 1,
-        bottom: 1,
-        left: 6,
-        right: 6,
-      },
-      margin: {
-        top: 1,
-        bottom: 1,
-        left: 2,
-      },
-      active: {
-        text: text(layer, "mono", "on", "default", { size: "xs" }),
-        background: withOpacity(background(layer, "on"), 0.2),
-      },
-    },
-  };
+    let layer = colorScheme.highest
+    return {
+        keystrokeSpacing: 8,
+        key: {
+            text: text(layer, "mono", "variant", "default", { size: "xs" }),
+            cornerRadius: 2,
+            background: background(layer, "on"),
+            padding: {
+                top: 1,
+                bottom: 1,
+                left: 6,
+                right: 6,
+            },
+            margin: {
+                top: 1,
+                bottom: 1,
+                left: 2,
+            },
+            active: {
+                text: text(layer, "mono", "on", "default", { size: "xs" }),
+                background: withOpacity(background(layer, "on"), 0.2),
+            },
+        },
+    }
 }

styles/src/styleTree/components.ts

@@ -1,210 +1,210 @@
-import { fontFamilies, fontSizes, FontWeight } from "../common";
-import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
+import { fontFamilies, fontSizes, FontWeight } from "../common"
+import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
 
 function isStyleSet(key: any): key is StyleSets {
-  return [
-    "base",
-    "variant",
-    "on",
-    "accent",
-    "positive",
-    "warning",
-    "negative",
-  ].includes(key);
+    return [
+        "base",
+        "variant",
+        "on",
+        "accent",
+        "positive",
+        "warning",
+        "negative",
+    ].includes(key)
 }
 
 function isStyle(key: any): key is Styles {
-  return [
-    "default",
-    "active",
-    "disabled",
-    "hovered",
-    "pressed",
-    "inverted",
-  ].includes(key);
+    return [
+        "default",
+        "active",
+        "disabled",
+        "hovered",
+        "pressed",
+        "inverted",
+    ].includes(key)
 }
 function getStyle(
-  layer: Layer,
-  possibleStyleSetOrStyle?: any,
-  possibleStyle?: any
+    layer: Layer,
+    possibleStyleSetOrStyle?: any,
+    possibleStyle?: any
 ): Style {
-  let styleSet: StyleSets = "base";
-  let style: Styles = "default";
-  if (isStyleSet(possibleStyleSetOrStyle)) {
-    styleSet = possibleStyleSetOrStyle;
-  } else if (isStyle(possibleStyleSetOrStyle)) {
-    style = possibleStyleSetOrStyle;
-  }
+    let styleSet: StyleSets = "base"
+    let style: Styles = "default"
+    if (isStyleSet(possibleStyleSetOrStyle)) {
+        styleSet = possibleStyleSetOrStyle
+    } else if (isStyle(possibleStyleSetOrStyle)) {
+        style = possibleStyleSetOrStyle
+    }
 
-  if (isStyle(possibleStyle)) {
-    style = possibleStyle;
-  }
+    if (isStyle(possibleStyle)) {
+        style = possibleStyle
+    }
 
-  return layer[styleSet][style];
+    return layer[styleSet][style]
 }
 
-export function background(layer: Layer, style?: Styles): string;
+export function background(layer: Layer, style?: Styles): string
 export function background(
-  layer: Layer,
-  styleSet?: StyleSets,
-  style?: Styles
-): string;
+    layer: Layer,
+    styleSet?: StyleSets,
+    style?: Styles
+): string
 export function background(
-  layer: Layer,
-  styleSetOrStyles?: StyleSets | Styles,
-  style?: Styles
+    layer: Layer,
+    styleSetOrStyles?: StyleSets | Styles,
+    style?: Styles
 ): string {
-  return getStyle(layer, styleSetOrStyles, style).background;
+    return getStyle(layer, styleSetOrStyles, style).background
 }
 
-export function borderColor(layer: Layer, style?: Styles): string;
+export function borderColor(layer: Layer, style?: Styles): string
 export function borderColor(
-  layer: Layer,
-  styleSet?: StyleSets,
-  style?: Styles
-): string;
+    layer: Layer,
+    styleSet?: StyleSets,
+    style?: Styles
+): string
 export function borderColor(
-  layer: Layer,
-  styleSetOrStyles?: StyleSets | Styles,
-  style?: Styles
+    layer: Layer,
+    styleSetOrStyles?: StyleSets | Styles,
+    style?: Styles
 ): string {
-  return getStyle(layer, styleSetOrStyles, style).border;
+    return getStyle(layer, styleSetOrStyles, style).border
 }
 
-export function foreground(layer: Layer, style?: Styles): string;
+export function foreground(layer: Layer, style?: Styles): string
 export function foreground(
-  layer: Layer,
-  styleSet?: StyleSets,
-  style?: Styles
-): string;
+    layer: Layer,
+    styleSet?: StyleSets,
+    style?: Styles
+): string
 export function foreground(
-  layer: Layer,
-  styleSetOrStyles?: StyleSets | Styles,
-  style?: Styles
+    layer: Layer,
+    styleSetOrStyles?: StyleSets | Styles,
+    style?: Styles
 ): string {
-  return getStyle(layer, styleSetOrStyles, style).foreground;
+    return getStyle(layer, styleSetOrStyles, style).foreground
 }
 
 interface Text {
-  family: keyof typeof fontFamilies;
-  color: string;
-  size: number;
-  weight?: FontWeight;
-  underline?: boolean;
+    family: keyof typeof fontFamilies
+    color: string
+    size: number
+    weight?: FontWeight
+    underline?: boolean
 }
 
 interface TextProperties {
-  size?: keyof typeof fontSizes;
-  weight?: FontWeight;
-  underline?: boolean;
-  color?: string;
+    size?: keyof typeof fontSizes
+    weight?: FontWeight
+    underline?: boolean
+    color?: string
 }
 
 export function text(
-  layer: Layer,
-  fontFamily: keyof typeof fontFamilies,
-  styleSet: StyleSets,
-  style: Styles,
-  properties?: TextProperties
-): Text;
+    layer: Layer,
+    fontFamily: keyof typeof fontFamilies,
+    styleSet: StyleSets,
+    style: Styles,
+    properties?: TextProperties
+): Text
 export function text(
-  layer: Layer,
-  fontFamily: keyof typeof fontFamilies,
-  styleSet: StyleSets,
-  properties?: TextProperties
-): Text;
+    layer: Layer,
+    fontFamily: keyof typeof fontFamilies,
+    styleSet: StyleSets,
+    properties?: TextProperties
+): Text
 export function text(
-  layer: Layer,
-  fontFamily: keyof typeof fontFamilies,
-  style: Styles,
-  properties?: TextProperties
-): Text;
+    layer: Layer,
+    fontFamily: keyof typeof fontFamilies,
+    style: Styles,
+    properties?: TextProperties
+): Text
 export function text(
-  layer: Layer,
-  fontFamily: keyof typeof fontFamilies,
-  properties?: TextProperties
-): Text;
+    layer: Layer,
+    fontFamily: keyof typeof fontFamilies,
+    properties?: TextProperties
+): Text
 export function text(
-  layer: Layer,
-  fontFamily: keyof typeof fontFamilies,
-  styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
-  styleOrProperties?: Styles | TextProperties,
-  properties?: TextProperties
+    layer: Layer,
+    fontFamily: keyof typeof fontFamilies,
+    styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
+    styleOrProperties?: Styles | TextProperties,
+    properties?: TextProperties
 ) {
-  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
+    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
 
-  if (typeof styleSetStyleOrProperties === "object") {
-    properties = styleSetStyleOrProperties;
-  }
-  if (typeof styleOrProperties === "object") {
-    properties = styleOrProperties;
-  }
+    if (typeof styleSetStyleOrProperties === "object") {
+        properties = styleSetStyleOrProperties
+    }
+    if (typeof styleOrProperties === "object") {
+        properties = styleOrProperties
+    }
 
-  let size = fontSizes[properties?.size || "sm"];
-  let color = properties?.color || style.foreground;
+    let size = fontSizes[properties?.size || "sm"]
+    let color = properties?.color || style.foreground
 
-  return {
-    family: fontFamilies[fontFamily],
-    ...properties,
-    color,
-    size,
-  };
+    return {
+        family: fontFamilies[fontFamily],
+        ...properties,
+        color,
+        size,
+    }
 }
 
 export interface Border {
-  color: string;
-  width: number;
-  top?: boolean;
-  bottom?: boolean;
-  left?: boolean;
-  right?: boolean;
-  overlay?: boolean;
+    color: string
+    width: number
+    top?: boolean
+    bottom?: boolean
+    left?: boolean
+    right?: boolean
+    overlay?: boolean
 }
 
 export interface BorderProperties {
-  width?: number;
-  top?: boolean;
-  bottom?: boolean;
-  left?: boolean;
-  right?: boolean;
-  overlay?: boolean;
+    width?: number
+    top?: boolean
+    bottom?: boolean
+    left?: boolean
+    right?: boolean
+    overlay?: boolean
 }
 
 export function border(
-  layer: Layer,
-  styleSet: StyleSets,
-  style: Styles,
-  properties?: BorderProperties
-): Border;
+    layer: Layer,
+    styleSet: StyleSets,
+    style: Styles,
+    properties?: BorderProperties
+): Border
 export function border(
-  layer: Layer,
-  styleSet: StyleSets,
-  properties?: BorderProperties
-): Border;
+    layer: Layer,
+    styleSet: StyleSets,
+    properties?: BorderProperties
+): Border
 export function border(
-  layer: Layer,
-  style: Styles,
-  properties?: BorderProperties
-): Border;
-export function border(layer: Layer, properties?: BorderProperties): Border;
+    layer: Layer,
+    style: Styles,
+    properties?: BorderProperties
+): Border
+export function border(layer: Layer, properties?: BorderProperties): Border
 export function border(
-  layer: Layer,
-  styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
-  styleOrProperties?: Styles | BorderProperties,
-  properties?: BorderProperties
+    layer: Layer,
+    styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+    styleOrProperties?: Styles | BorderProperties,
+    properties?: BorderProperties
 ): Border {
-  let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
+    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
 
-  if (typeof styleSetStyleOrProperties === "object") {
-    properties = styleSetStyleOrProperties;
-  }
-  if (typeof styleOrProperties === "object") {
-    properties = styleOrProperties;
-  }
+    if (typeof styleSetStyleOrProperties === "object") {
+        properties = styleSetStyleOrProperties
+    }
+    if (typeof styleOrProperties === "object") {
+        properties = styleOrProperties
+    }
 
-  return {
-    color: style.border,
-    width: 1,
-    ...properties,
-  };
+    return {
+        color: style.border,
+        width: 1,
+        ...properties,
+    }
 }

styles/src/styleTree/contactFinder.ts

@@ -1,70 +1,70 @@
-import picker from "./picker";
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, foreground, text } from "./components";
+import picker from "./picker"
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, foreground, text } from "./components"
 
 export default function contactFinder(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
+    let layer = colorScheme.middle
 
-  const sideMargin = 6;
-  const contactButton = {
-    background: background(layer, "variant"),
-    color: foreground(layer, "variant"),
-    iconWidth: 8,
-    buttonWidth: 16,
-    cornerRadius: 8,
-  };
-
-  const pickerStyle = picker(colorScheme);
-  const pickerInput = {
-    background: background(layer, "on"),
-    cornerRadius: 6,
-    text: text(layer, "mono",),
-    placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
-    selection: colorScheme.players[0],
-    border: border(layer),
-    padding: {
-      bottom: 4,
-      left: 8,
-      right: 8,
-      top: 4,
-    },
-    margin: {
-      left: sideMargin,
-      right: sideMargin,
+    const sideMargin = 6
+    const contactButton = {
+        background: background(layer, "variant"),
+        color: foreground(layer, "variant"),
+        iconWidth: 8,
+        buttonWidth: 16,
+        cornerRadius: 8,
     }
-  };
 
-  return {
-    picker: {
-      emptyContainer: {},
-      item: {
-        ...pickerStyle.item,
-        margin: { left: sideMargin, right: sideMargin },
-      },
-      noMatches: pickerStyle.noMatches,
-      inputEditor: pickerInput,
-      emptyInputEditor: pickerInput
-    },
-    rowHeight: 28,
-    contactAvatar: {
-      cornerRadius: 10,
-      width: 18,
-    },
-    contactUsername: {
-      padding: {
-        left: 8,
-      },
-    },
-    contactButton: {
-      ...contactButton,
-      hover: {
-        background: background(layer, "variant", "hovered"),
-      },
-    },
-    disabledContactButton: {
-      ...contactButton,
-      background: background(layer, "disabled"),
-      color: foreground(layer, "disabled"),
-    },
-  };
+    const pickerStyle = picker(colorScheme)
+    const pickerInput = {
+        background: background(layer, "on"),
+        cornerRadius: 6,
+        text: text(layer, "mono"),
+        placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
+        selection: colorScheme.players[0],
+        border: border(layer),
+        padding: {
+            bottom: 4,
+            left: 8,
+            right: 8,
+            top: 4,
+        },
+        margin: {
+            left: sideMargin,
+            right: sideMargin,
+        },
+    }
+
+    return {
+        picker: {
+            emptyContainer: {},
+            item: {
+                ...pickerStyle.item,
+                margin: { left: sideMargin, right: sideMargin },
+            },
+            noMatches: pickerStyle.noMatches,
+            inputEditor: pickerInput,
+            emptyInputEditor: pickerInput,
+        },
+        rowHeight: 28,
+        contactAvatar: {
+            cornerRadius: 10,
+            width: 18,
+        },
+        contactUsername: {
+            padding: {
+                left: 8,
+            },
+        },
+        contactButton: {
+            ...contactButton,
+            hover: {
+                background: background(layer, "variant", "hovered"),
+            },
+        },
+        disabledContactButton: {
+            ...contactButton,
+            background: background(layer, "disabled"),
+            color: foreground(layer, "disabled"),
+        },
+    }
 }

styles/src/styleTree/contactList.ts

@@ -1,186 +1,182 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  borderColor,
-  foreground,
-  text,
-} from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, borderColor, foreground, text } from "./components"
 
 export default function contactsPanel(colorScheme: ColorScheme) {
-  const nameMargin = 8;
-  const sidePadding = 12;
+    const nameMargin = 8
+    const sidePadding = 12
 
-  let layer = colorScheme.middle;
+    let layer = colorScheme.middle
 
-  const contactButton = {
-    background: background(layer, "on"),
-    color: foreground(layer, "on"),
-    iconWidth: 8,
-    buttonWidth: 16,
-    cornerRadius: 8,
-  };
-  const projectRow = {
-    guestAvatarSpacing: 4,
-    height: 24,
-    guestAvatar: {
-      cornerRadius: 8,
-      width: 14,
-    },
-    name: {
-      ...text(layer, "mono", { size: "sm" }),
-      margin: {
-        left: nameMargin,
-        right: 6,
-      },
-    },
-    guests: {
-      margin: {
-        left: nameMargin,
-        right: nameMargin,
-      },
-    },
-    padding: {
-      left: sidePadding,
-      right: sidePadding,
-    },
-  };
+    const contactButton = {
+        background: background(layer, "on"),
+        color: foreground(layer, "on"),
+        iconWidth: 8,
+        buttonWidth: 16,
+        cornerRadius: 8,
+    }
+    const projectRow = {
+        guestAvatarSpacing: 4,
+        height: 24,
+        guestAvatar: {
+            cornerRadius: 8,
+            width: 14,
+        },
+        name: {
+            ...text(layer, "mono", { size: "sm" }),
+            margin: {
+                left: nameMargin,
+                right: 6,
+            },
+        },
+        guests: {
+            margin: {
+                left: nameMargin,
+                right: nameMargin,
+            },
+        },
+        padding: {
+            left: sidePadding,
+            right: sidePadding,
+        },
+    }
 
-  return {
-    background: background(layer),
-    padding: { top: 12, bottom: 0 },
-    userQueryEditor: {
-      background: background(layer, "on"),
-      cornerRadius: 6,
-      text: text(layer, "mono", "on"),
-      placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
-      selection: colorScheme.players[0],
-      border: border(layer, "on"),
-      padding: {
-        bottom: 4,
-        left: 8,
-        right: 8,
-        top: 4,
-      },
-      margin: {
-        left: 6,
-      },
-    },
-    userQueryEditorHeight: 33,
-    addContactButton: {
-      margin: { left: 6, right: 12 },
-      color: foreground(layer, "on"),
-      buttonWidth: 28,
-      iconWidth: 16,
-    },
-    rowHeight: 28,
-    sectionIconSize: 8,
-    headerRow: {
-      ...text(layer, "mono", { size: "sm" }),
-      margin: { top: 14 },
-      padding: {
-        left: sidePadding,
-        right: sidePadding,
-      },
-      active: {
-        ...text(layer, "mono", "active", { size: "sm" }),
-        background: background(layer, "active"),
-      },
-    },
-    leaveCall: {
-      background: background(layer),
-      border: border(layer),
-      cornerRadius: 6,
-      margin: {
-        top: 1,
-      },
-      padding: {
-        top: 1,
-        bottom: 1,
-        left: 7,
-        right: 7,
-      },
-      ...text(layer, "sans", "variant", { size: "xs" }),
-      hover: {
-        ...text(layer, "sans", "hovered", { size: "xs" }),
-        background: background(layer, "hovered"),
-        border: border(layer, "hovered"),
-      },
-    },
-    contactRow: {
-      padding: {
-        left: sidePadding,
-        right: sidePadding,
-      },
-      active: {
-        background: background(layer, "active"),
-      },
-    },
-    contactAvatar: {
-      cornerRadius: 10,
-      width: 18,
-    },
-    contactStatusFree: {
-      cornerRadius: 4,
-      padding: 4,
-      margin: { top: 12, left: 12 },
-      background: foreground(layer, "positive"),
-    },
-    contactStatusBusy: {
-      cornerRadius: 4,
-      padding: 4,
-      margin: { top: 12, left: 12 },
-      background: foreground(layer, "negative"),
-    },
-    contactUsername: {
-      ...text(layer, "mono", { size: "sm" }),
-      margin: {
-        left: nameMargin,
-      },
-    },
-    contactButtonSpacing: nameMargin,
-    contactButton: {
-      ...contactButton,
-      hover: {
-        background: background(layer, "hovered"),
-      },
-    },
-    disabledButton: {
-      ...contactButton,
-      background: background(layer, "on"),
-      color: foreground(layer, "on"),
-    },
-    callingIndicator: {
-      ...text(layer, "mono", "variant", { size: "xs" }),
-    },
-    treeBranch: {
-      color: borderColor(layer),
-      width: 1,
-      hover: {
-        color: borderColor(layer),
-      },
-      active: {
-        color: borderColor(layer),
-      },
-    },
-    projectRow: {
-      ...projectRow,
-      background: background(layer),
-      icon: {
-        margin: { left: nameMargin },
-        color: foreground(layer, "variant"),
-        width: 12,
-      },
-      name: {
-        ...projectRow.name,
-        ...text(layer, "mono", { size: "sm" }),
-      },
-      hover: {
-        background: background(layer, "hovered"),
-      },
-      active: {
-        background: background(layer, "active"),
-      },
-    },
-  };
+    return {
+        background: background(layer),
+        padding: { top: 12, bottom: 0 },
+        userQueryEditor: {
+            background: background(layer, "on"),
+            cornerRadius: 6,
+            text: text(layer, "mono", "on"),
+            placeholderText: text(layer, "mono", "on", "disabled", {
+                size: "xs",
+            }),
+            selection: colorScheme.players[0],
+            border: border(layer, "on"),
+            padding: {
+                bottom: 4,
+                left: 8,
+                right: 8,
+                top: 4,
+            },
+            margin: {
+                left: 6,
+            },
+        },
+        userQueryEditorHeight: 33,
+        addContactButton: {
+            margin: { left: 6, right: 12 },
+            color: foreground(layer, "on"),
+            buttonWidth: 28,
+            iconWidth: 16,
+        },
+        rowHeight: 28,
+        sectionIconSize: 8,
+        headerRow: {
+            ...text(layer, "mono", { size: "sm" }),
+            margin: { top: 14 },
+            padding: {
+                left: sidePadding,
+                right: sidePadding,
+            },
+            active: {
+                ...text(layer, "mono", "active", { size: "sm" }),
+                background: background(layer, "active"),
+            },
+        },
+        leaveCall: {
+            background: background(layer),
+            border: border(layer),
+            cornerRadius: 6,
+            margin: {
+                top: 1,
+            },
+            padding: {
+                top: 1,
+                bottom: 1,
+                left: 7,
+                right: 7,
+            },
+            ...text(layer, "sans", "variant", { size: "xs" }),
+            hover: {
+                ...text(layer, "sans", "hovered", { size: "xs" }),
+                background: background(layer, "hovered"),
+                border: border(layer, "hovered"),
+            },
+        },
+        contactRow: {
+            padding: {
+                left: sidePadding,
+                right: sidePadding,
+            },
+            active: {
+                background: background(layer, "active"),
+            },
+        },
+        contactAvatar: {
+            cornerRadius: 10,
+            width: 18,
+        },
+        contactStatusFree: {
+            cornerRadius: 4,
+            padding: 4,
+            margin: { top: 12, left: 12 },
+            background: foreground(layer, "positive"),
+        },
+        contactStatusBusy: {
+            cornerRadius: 4,
+            padding: 4,
+            margin: { top: 12, left: 12 },
+            background: foreground(layer, "negative"),
+        },
+        contactUsername: {
+            ...text(layer, "mono", { size: "sm" }),
+            margin: {
+                left: nameMargin,
+            },
+        },
+        contactButtonSpacing: nameMargin,
+        contactButton: {
+            ...contactButton,
+            hover: {
+                background: background(layer, "hovered"),
+            },
+        },
+        disabledButton: {
+            ...contactButton,
+            background: background(layer, "on"),
+            color: foreground(layer, "on"),
+        },
+        callingIndicator: {
+            ...text(layer, "mono", "variant", { size: "xs" }),
+        },
+        treeBranch: {
+            color: borderColor(layer),
+            width: 1,
+            hover: {
+                color: borderColor(layer),
+            },
+            active: {
+                color: borderColor(layer),
+            },
+        },
+        projectRow: {
+            ...projectRow,
+            background: background(layer),
+            icon: {
+                margin: { left: nameMargin },
+                color: foreground(layer, "variant"),
+                width: 12,
+            },
+            name: {
+                ...projectRow.name,
+                ...text(layer, "mono", { size: "sm" }),
+            },
+            hover: {
+                background: background(layer, "hovered"),
+            },
+            active: {
+                background: background(layer, "active"),
+            },
+        },
+    }
 }

styles/src/styleTree/contactNotification.ts

@@ -1,45 +1,45 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, foreground, text } from "./components"
 
-const avatarSize = 12;
-const headerPadding = 8;
+const avatarSize = 12
+const headerPadding = 8
 
 export default function contactNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.lowest;
-  return {
-    headerAvatar: {
-      height: avatarSize,
-      width: avatarSize,
-      cornerRadius: 6,
-    },
-    headerMessage: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding },
-    },
-    headerHeight: 18,
-    bodyMessage: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
-    },
-    button: {
-      ...text(layer, "sans", "on", { size: "xs" }),
-      background: background(layer, "on"),
-      padding: 4,
-      cornerRadius: 6,
-      margin: { left: 6 },
-      hover: {
-        background: background(layer, "on", "hovered"),
-      },
-    },
-    dismissButton: {
-      color: foreground(layer, "variant"),
-      iconWidth: 8,
-      iconHeight: 8,
-      buttonWidth: 8,
-      buttonHeight: 8,
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-  };
+    let layer = colorScheme.lowest
+    return {
+        headerAvatar: {
+            height: avatarSize,
+            width: avatarSize,
+            cornerRadius: 6,
+        },
+        headerMessage: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: headerPadding, right: headerPadding },
+        },
+        headerHeight: 18,
+        bodyMessage: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
+        },
+        button: {
+            ...text(layer, "sans", "on", { size: "xs" }),
+            background: background(layer, "on"),
+            padding: 4,
+            cornerRadius: 6,
+            margin: { left: 6 },
+            hover: {
+                background: background(layer, "on", "hovered"),
+            },
+        },
+        dismissButton: {
+            color: foreground(layer, "variant"),
+            iconWidth: 8,
+            iconHeight: 8,
+            buttonWidth: 8,
+            buttonHeight: 8,
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+    }
 }

styles/src/styleTree/contactsPopover.ts

@@ -1,29 +1,29 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
 export default function contactsPopover(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
-  const sidePadding = 12;
-  return {
-    background: background(layer),
-    cornerRadius: 6,
-    padding: { top: 6 },
-    margin: { top: -6 },
-    shadow: colorScheme.popoverShadow,
-    border: border(layer),
-    width: 300,
-    height: 400,
-    inviteRowHeight: 28,
-    inviteRow: {
-      padding: {
-        left: sidePadding,
-        right: sidePadding,
-      },
-      border: border(layer, { top: true }),
-      text: text(layer, "sans", "variant", { size: "sm" }),
-      hover: {
-        text: text(layer, "sans", "hovered", { size: "sm" }),
-      },
-    },
-  }
+    let layer = colorScheme.middle
+    const sidePadding = 12
+    return {
+        background: background(layer),
+        cornerRadius: 6,
+        padding: { top: 6 },
+        margin: { top: -6 },
+        shadow: colorScheme.popoverShadow,
+        border: border(layer),
+        width: 300,
+        height: 400,
+        inviteRowHeight: 28,
+        inviteRow: {
+            padding: {
+                left: sidePadding,
+                right: sidePadding,
+            },
+            border: border(layer, { top: true }),
+            text: text(layer, "sans", "variant", { size: "sm" }),
+            hover: {
+                text: text(layer, "sans", "hovered", { size: "sm" }),
+            },
+        },
+    }
 }

styles/src/styleTree/contextMenu.ts

@@ -1,41 +1,44 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, borderColor, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, borderColor, text } from "./components"
 
 export default function contextMenu(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
-  return {
-    background: background(layer),
-    cornerRadius: 10,
-    padding: 4,
-    shadow: colorScheme.popoverShadow,
-    border: border(layer),
-    keystrokeMargin: 30,
-    item: {
-      iconSpacing: 8,
-      iconWidth: 14,
-      padding: { left: 6, right: 6, top: 2, bottom: 2 },
-      cornerRadius: 6,
-      label: text(layer, "sans", { size: "sm" }),
-      keystroke: {
-        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
-        padding: { left: 3, right: 3 },
-      },
-      hover: {
-        background: background(layer, "hovered"),
-        label: text(layer, "sans", "hovered", { size: "sm" }),
-      },
-      active: {
-        background: background(layer, "active"),
-        label: text(layer, "sans", "active", { size: "sm" }),
-      },
-      activeHover: {
-        background: background(layer, "active"),
-        label: text(layer, "sans", "active", { size: "sm" }),
-      },
-    },
-    separator: {
-      background: borderColor(layer),
-      margin: { top: 2, bottom: 2 },
-    },
-  };
+    let layer = colorScheme.middle
+    return {
+        background: background(layer),
+        cornerRadius: 10,
+        padding: 4,
+        shadow: colorScheme.popoverShadow,
+        border: border(layer),
+        keystrokeMargin: 30,
+        item: {
+            iconSpacing: 8,
+            iconWidth: 14,
+            padding: { left: 6, right: 6, top: 2, bottom: 2 },
+            cornerRadius: 6,
+            label: text(layer, "sans", { size: "sm" }),
+            keystroke: {
+                ...text(layer, "sans", "variant", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+                padding: { left: 3, right: 3 },
+            },
+            hover: {
+                background: background(layer, "hovered"),
+                label: text(layer, "sans", "hovered", { size: "sm" }),
+            },
+            active: {
+                background: background(layer, "active"),
+                label: text(layer, "sans", "active", { size: "sm" }),
+            },
+            activeHover: {
+                background: background(layer, "active"),
+                label: text(layer, "sans", "active", { size: "sm" }),
+            },
+        },
+        separator: {
+            background: borderColor(layer),
+            margin: { top: 2, bottom: 2 },
+        },
+    }
 }

styles/src/styleTree/editor.ts

@@ -1,285 +1,290 @@
-import { fontWeights } from "../common";
-import { withOpacity } from "../utils/color";
-import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme";
-import {
-  background,
-  border,
-  borderColor,
-  foreground,
-  text,
-} from "./components";
-import hoverPopover from "./hoverPopover";
+import { fontWeights } from "../common"
+import { withOpacity } from "../utils/color"
+import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
+import { background, border, borderColor, foreground, text } from "./components"
+import hoverPopover from "./hoverPopover"
 
 export default function editor(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+    let layer = colorScheme.highest
 
-  const autocompleteItem = {
-    cornerRadius: 6,
-    padding: {
-      bottom: 2,
-      left: 6,
-      right: 6,
-      top: 2,
-    },
-  };
+    const autocompleteItem = {
+        cornerRadius: 6,
+        padding: {
+            bottom: 2,
+            left: 6,
+            right: 6,
+            top: 2,
+        },
+    }
+
+    function diagnostic(layer: Layer, styleSet: StyleSets) {
+        return {
+            textScaleFactor: 0.857,
+            header: {
+                border: border(layer, {
+                    top: true,
+                }),
+            },
+            message: {
+                text: text(layer, "sans", styleSet, "default", { size: "sm" }),
+                highlightText: text(layer, "sans", styleSet, "default", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
+        }
+    }
+
+    const syntax = {
+        primary: {
+            color: colorScheme.ramps.neutral(1).hex(),
+            weight: fontWeights.normal,
+        },
+        "variable.special": {
+            // Highlights for self, this, etc
+            color: colorScheme.ramps.blue(0.7).hex(),
+            weight: fontWeights.normal,
+        },
+        comment: {
+            color: colorScheme.ramps.neutral(0.71).hex(),
+            weight: fontWeights.normal,
+        },
+        punctuation: {
+            color: colorScheme.ramps.neutral(0.86).hex(),
+            weight: fontWeights.normal,
+        },
+        constant: {
+            color: colorScheme.ramps.green(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        keyword: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        function: {
+            color: colorScheme.ramps.yellow(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        type: {
+            color: colorScheme.ramps.cyan(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        constructor: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        variant: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        property: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        enum: {
+            color: colorScheme.ramps.orange(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        operator: {
+            color: colorScheme.ramps.orange(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        string: {
+            color: colorScheme.ramps.orange(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        number: {
+            color: colorScheme.ramps.green(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        boolean: {
+            color: colorScheme.ramps.green(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        predictive: {
+            color: colorScheme.ramps.neutral(0.57).hex(),
+            weight: fontWeights.normal,
+        },
+        title: {
+            color: colorScheme.ramps.yellow(0.5).hex(),
+            weight: fontWeights.bold,
+        },
+        emphasis: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.normal,
+        },
+        "emphasis.strong": {
+            color: colorScheme.ramps.blue(0.5).hex(),
+            weight: fontWeights.bold,
+        },
+        linkUri: {
+            color: colorScheme.ramps.green(0.5).hex(),
+            weight: fontWeights.normal,
+            underline: true,
+        },
+        linkText: {
+            color: colorScheme.ramps.orange(0.5).hex(),
+            weight: fontWeights.normal,
+            italic: true,
+        },
+    }
 
-  function diagnostic(layer: Layer, styleSet: StyleSets) {
     return {
-      textScaleFactor: 0.857,
-      header: {
-        border: border(layer, {
-          top: true,
-        }),
-      },
-      message: {
-        text: text(layer, "sans", styleSet, "default", { size: "sm" }),
-        highlightText: text(layer, "sans", styleSet, "default", {
-          size: "sm",
-          weight: "bold",
-        }),
-      },
-    };
-  }
-
-  const syntax = {
-    primary: {
-      color: colorScheme.ramps.neutral(1).hex(),
-      weight: fontWeights.normal,
-    },
-    "variable.special": {
-      // Highlights for self, this, etc
-      color: colorScheme.ramps.blue(0.7).hex(),
-      weight: fontWeights.normal,
-    },
-    comment: {
-      color: colorScheme.ramps.neutral(0.71).hex(),
-      weight: fontWeights.normal,
-    },
-    punctuation: {
-      color: colorScheme.ramps.neutral(0.86).hex(),
-      weight: fontWeights.normal,
-    },
-    constant: {
-      color: colorScheme.ramps.green(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    keyword: {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    function: {
-      color: colorScheme.ramps.yellow(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    type: {
-      color: colorScheme.ramps.cyan(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    constructor: {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    variant: {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    property: {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    enum: {
-      color: colorScheme.ramps.orange(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    operator: {
-      color: colorScheme.ramps.orange(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    string: {
-      color: colorScheme.ramps.orange(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    number: {
-      color: colorScheme.ramps.green(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    boolean: {
-      color: colorScheme.ramps.green(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    predictive: {
-      color: colorScheme.ramps.neutral(0.57).hex(),
-      weight: fontWeights.normal,
-    },
-    title: {
-      color: colorScheme.ramps.yellow(0.5).hex(),
-      weight: fontWeights.bold,
-    },
-    emphasis: {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.normal,
-    },
-    "emphasis.strong": {
-      color: colorScheme.ramps.blue(0.5).hex(),
-      weight: fontWeights.bold,
-    },
-    linkUri: {
-      color: colorScheme.ramps.green(0.5).hex(),
-      weight: fontWeights.normal,
-      underline: true,
-    },
-    linkText: {
-      color: colorScheme.ramps.orange(0.5).hex(),
-      weight: fontWeights.normal,
-      italic: true,
-    },
-  };
-
-  return {
-    textColor: syntax.primary.color,
-    background: background(layer),
-    activeLineBackground: withOpacity(background(layer, "on"), 0.75),
-    highlightedLineBackground: background(layer, "on"),
-    codeActions: {
-      indicator: foreground(layer, "variant"),
-      verticalScale: 0.55,
-    },
-    diff: {
-      deleted: foreground(layer, "negative"),
-      modified: foreground(layer, "warning"),
-      inserted: foreground(layer, "positive"),
-      removedWidthEm: 0.275,
-      widthEm: 0.16,
-      cornerRadius: 0.05,
-    },
-    /** Highlights matching occurences of what is under the cursor
-     * as well as matched brackets
-     */
-    documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1),
-    documentHighlightWriteBackground: colorScheme.ramps
-      .neutral(0.5)
-      .alpha(0.4)
-      .hex(), // TODO: This was blend * 2
-    errorColor: background(layer, "negative"),
-    gutterBackground: background(layer),
-    gutterPaddingFactor: 3.5,
-    lineNumber: withOpacity(foreground(layer), 0.35),
-    lineNumberActive: foreground(layer),
-    renameFade: 0.6,
-    unnecessaryCodeFade: 0.5,
-    selection: colorScheme.players[0],
-    guestSelections: [
-      colorScheme.players[1],
-      colorScheme.players[2],
-      colorScheme.players[3],
-      colorScheme.players[4],
-      colorScheme.players[5],
-      colorScheme.players[6],
-      colorScheme.players[7],
-    ],
-    autocomplete: {
-      background: background(colorScheme.middle),
-      cornerRadius: 8,
-      padding: 4,
-      margin: {
-        left: -14,
-      },
-      border: border(colorScheme.middle),
-      shadow: colorScheme.popoverShadow,
-      matchHighlight: foreground(colorScheme.middle, "accent"),
-      item: autocompleteItem,
-      hoveredItem: {
-        ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
-        background: background(colorScheme.middle, "hovered"),
-      },
-      selectedItem: {
-        ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.middle, "accent", "active"),
-        background: background(colorScheme.middle, "active"),
-      },
-    },
-    diagnosticHeader: {
-      background: background(colorScheme.middle),
-      iconWidthFactor: 1.5,
-      textScaleFactor: 0.857,
-      border: border(colorScheme.middle, {
-        bottom: true,
-        top: true,
-      }),
-      code: {
-        ...text(colorScheme.middle, "mono", { size: "sm" }),
-        margin: {
-          left: 10,
+        textColor: syntax.primary.color,
+        background: background(layer),
+        activeLineBackground: withOpacity(background(layer, "on"), 0.75),
+        highlightedLineBackground: background(layer, "on"),
+        codeActions: {
+            indicator: foreground(layer, "variant"),
+            verticalScale: 0.55,
         },
-      },
-      message: {
-        highlightText: text(colorScheme.middle, "sans", {
-          size: "sm",
-          weight: "bold",
-        }),
-        text: text(colorScheme.middle, "sans", { size: "sm" }),
-      },
-    },
-    diagnosticPathHeader: {
-      background: background(colorScheme.middle),
-      textScaleFactor: 0.857,
-      filename: text(colorScheme.middle, "mono", { size: "sm" }),
-      path: {
-        ...text(colorScheme.middle, "mono", { size: "sm" }),
-        margin: {
-          left: 12,
+        diff: {
+            deleted: foreground(layer, "negative"),
+            modified: foreground(layer, "warning"),
+            inserted: foreground(layer, "positive"),
+            removedWidthEm: 0.275,
+            widthEm: 0.16,
+            cornerRadius: 0.05,
         },
-      },
-    },
-    errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
-    warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
-    informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
-    hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
-    invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
-    invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
-    invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
-    invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
-    hoverPopover: hoverPopover(colorScheme),
-    linkDefinition: {
-      color: syntax.linkUri.color,
-      underline: syntax.linkUri.underline,
-    },
-    jumpIcon: {
-      color: foreground(layer, "on"),
-      iconWidth: 20,
-      buttonWidth: 20,
-      cornerRadius: 6,
-      padding: {
-        top: 6,
-        bottom: 6,
-        left: 6,
-        right: 6,
-      },
-      hover: {
-        background: background(layer, "on", "hovered"),
-      },
-    },
-    scrollbar: {
-      width: 12,
-      minHeightFactor: 1.0,
-      track: {
-        border: border(layer, "variant", { left: true }),
-      },
-      thumb: {
-        background: withOpacity(background(layer, "inverted"), 0.4),
-        border: {
-          width: 1,
-          color: borderColor(layer, "variant"),
+        /** Highlights matching occurences of what is under the cursor
+         * as well as matched brackets
+         */
+        documentHighlightReadBackground: withOpacity(
+            foreground(layer, "accent"),
+            0.1
+        ),
+        documentHighlightWriteBackground: colorScheme.ramps
+            .neutral(0.5)
+            .alpha(0.4)
+            .hex(), // TODO: This was blend * 2
+        errorColor: background(layer, "negative"),
+        gutterBackground: background(layer),
+        gutterPaddingFactor: 3.5,
+        lineNumber: withOpacity(foreground(layer), 0.35),
+        lineNumberActive: foreground(layer),
+        renameFade: 0.6,
+        unnecessaryCodeFade: 0.5,
+        selection: colorScheme.players[0],
+        guestSelections: [
+            colorScheme.players[1],
+            colorScheme.players[2],
+            colorScheme.players[3],
+            colorScheme.players[4],
+            colorScheme.players[5],
+            colorScheme.players[6],
+            colorScheme.players[7],
+        ],
+        autocomplete: {
+            background: background(colorScheme.middle),
+            cornerRadius: 8,
+            padding: 4,
+            margin: {
+                left: -14,
+            },
+            border: border(colorScheme.middle),
+            shadow: colorScheme.popoverShadow,
+            matchHighlight: foreground(colorScheme.middle, "accent"),
+            item: autocompleteItem,
+            hoveredItem: {
+                ...autocompleteItem,
+                matchHighlight: foreground(
+                    colorScheme.middle,
+                    "accent",
+                    "hovered"
+                ),
+                background: background(colorScheme.middle, "hovered"),
+            },
+            selectedItem: {
+                ...autocompleteItem,
+                matchHighlight: foreground(
+                    colorScheme.middle,
+                    "accent",
+                    "active"
+                ),
+                background: background(colorScheme.middle, "active"),
+            },
         },
-      },
-    },
-    compositionMark: {
-      underline: {
-        thickness: 1.0,
-        color: borderColor(layer),
-      },
-    },
-    syntax,
-  };
+        diagnosticHeader: {
+            background: background(colorScheme.middle),
+            iconWidthFactor: 1.5,
+            textScaleFactor: 0.857,
+            border: border(colorScheme.middle, {
+                bottom: true,
+                top: true,
+            }),
+            code: {
+                ...text(colorScheme.middle, "mono", { size: "sm" }),
+                margin: {
+                    left: 10,
+                },
+            },
+            message: {
+                highlightText: text(colorScheme.middle, "sans", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+                text: text(colorScheme.middle, "sans", { size: "sm" }),
+            },
+        },
+        diagnosticPathHeader: {
+            background: background(colorScheme.middle),
+            textScaleFactor: 0.857,
+            filename: text(colorScheme.middle, "mono", { size: "sm" }),
+            path: {
+                ...text(colorScheme.middle, "mono", { size: "sm" }),
+                margin: {
+                    left: 12,
+                },
+            },
+        },
+        errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
+        warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
+        informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
+        hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
+        invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
+        invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
+        invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
+        invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
+        hoverPopover: hoverPopover(colorScheme),
+        linkDefinition: {
+            color: syntax.linkUri.color,
+            underline: syntax.linkUri.underline,
+        },
+        jumpIcon: {
+            color: foreground(layer, "on"),
+            iconWidth: 20,
+            buttonWidth: 20,
+            cornerRadius: 6,
+            padding: {
+                top: 6,
+                bottom: 6,
+                left: 6,
+                right: 6,
+            },
+            hover: {
+                background: background(layer, "on", "hovered"),
+            },
+        },
+        scrollbar: {
+            width: 12,
+            minHeightFactor: 1.0,
+            track: {
+                border: border(layer, "variant", { left: true }),
+            },
+            thumb: {
+                background: withOpacity(background(layer, "inverted"), 0.4),
+                border: {
+                    width: 1,
+                    color: borderColor(layer, "variant"),
+                },
+            },
+        },
+        compositionMark: {
+            underline: {
+                thickness: 1.0,
+                color: borderColor(layer),
+            },
+        },
+        syntax,
+    }
 }

styles/src/styleTree/feedback.ts

@@ -1,37 +1,36 @@
-
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
 export default function feedback(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+    let layer = colorScheme.highest
 
-  return {
-    submit_button: {
-      ...text(layer, "mono", "on"),
-      background: background(layer, "on"),
-      cornerRadius: 6,
-      border: border(layer, "on"),
-      margin: {
-        right: 4,
-      },
-      padding: {
-        bottom: 2,
-        left: 10,
-        right: 10,
-        top: 2,
-      },
-      clicked: {
-        ...text(layer, "mono", "on", "pressed"),
-        background: background(layer, "on", "pressed"),
-        border: border(layer, "on", "pressed"),
-      },
-      hover: {
-        ...text(layer, "mono", "on", "hovered"),
-        background: background(layer, "on", "hovered"),
-        border: border(layer, "on", "hovered"),
-      },
-    },
-    button_margin: 8,
-    info_text: text(layer, "sans", "default", { size: "xs" }),
-  };
+    return {
+        submit_button: {
+            ...text(layer, "mono", "on"),
+            background: background(layer, "on"),
+            cornerRadius: 6,
+            border: border(layer, "on"),
+            margin: {
+                right: 4,
+            },
+            padding: {
+                bottom: 2,
+                left: 10,
+                right: 10,
+                top: 2,
+            },
+            clicked: {
+                ...text(layer, "mono", "on", "pressed"),
+                background: background(layer, "on", "pressed"),
+                border: border(layer, "on", "pressed"),
+            },
+            hover: {
+                ...text(layer, "mono", "on", "hovered"),
+                background: background(layer, "on", "hovered"),
+                border: border(layer, "on", "hovered"),
+            },
+        },
+        button_margin: 8,
+        info_text: text(layer, "sans", "default", { size: "xs" }),
+    }
 }

styles/src/styleTree/hoverPopover.ts

@@ -1,45 +1,45 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
 export default function HoverPopover(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
-  let baseContainer = {
-    background: background(layer),
-    cornerRadius: 8,
-    padding: {
-      left: 8,
-      right: 8,
-      top: 4,
-      bottom: 4,
-    },
-    shadow: colorScheme.popoverShadow,
-    border: border(layer),
-    margin: {
-      left: -8,
-    },
-  };
+    let layer = colorScheme.middle
+    let baseContainer = {
+        background: background(layer),
+        cornerRadius: 8,
+        padding: {
+            left: 8,
+            right: 8,
+            top: 4,
+            bottom: 4,
+        },
+        shadow: colorScheme.popoverShadow,
+        border: border(layer),
+        margin: {
+            left: -8,
+        },
+    }
 
-  return {
-    container: baseContainer,
-    infoContainer: {
-      ...baseContainer,
-      background: background(layer, "accent"),
-      border: border(layer, "accent"),
-    },
-    warningContainer: {
-      ...baseContainer,
-      background: background(layer, "warning"),
-      border: border(layer, "warning"),
-    },
-    errorContainer: {
-      ...baseContainer,
-      background: background(layer, "negative"),
-      border: border(layer, "negative"),
-    },
-    block_style: {
-      padding: { top: 4 },
-    },
-    prose: text(layer, "sans", { size: "sm" }),
-    highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
-  };
+    return {
+        container: baseContainer,
+        infoContainer: {
+            ...baseContainer,
+            background: background(layer, "accent"),
+            border: border(layer, "accent"),
+        },
+        warningContainer: {
+            ...baseContainer,
+            background: background(layer, "warning"),
+            border: border(layer, "warning"),
+        },
+        errorContainer: {
+            ...baseContainer,
+            background: background(layer, "negative"),
+            border: border(layer, "negative"),
+        },
+        block_style: {
+            padding: { top: 4 },
+        },
+        prose: text(layer, "sans", { size: "sm" }),
+        highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
+    }
 }

styles/src/styleTree/incomingCallNotification.ts

@@ -1,45 +1,53 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
-export default function incomingCallNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle;
-  const avatarSize = 48;
-  return {
-    windowHeight: 74,
-    windowWidth: 380,
-    background: background(layer),
-    callerContainer: {
-      padding: 12,
-    },
-    callerAvatar: {
-      height: avatarSize,
-      width: avatarSize,
-      cornerRadius: avatarSize / 2,
-    },
-    callerMetadata: {
-      margin: { left: 10 },
-    },
-    callerUsername: {
-      ...text(layer, "sans", { size: "sm", weight: "bold" }),
-      margin: { top: -3 },
-    },
-    callerMessage: {
-      ...text(layer, "sans", "variant", { size: "xs" }),
-      margin: { top: -3 },
-    },
-    worktreeRoots: {
-      ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
-      margin: { top: -3 },
-    },
-    buttonWidth: 96,
-    acceptButton: {
-      background: background(layer, "accent"),
-      border: border(layer, { left: true, bottom: true }),
-      ...text(layer, "sans", "positive", { size: "xs", weight: "extra_bold" })
-    },
-    declineButton: {
-      border: border(layer, { left: true }),
-      ...text(layer, "sans", "negative", { size: "xs", weight: "extra_bold" })
-    },
-  };
+export default function incomingCallNotification(
+    colorScheme: ColorScheme
+): Object {
+    let layer = colorScheme.middle
+    const avatarSize = 48
+    return {
+        windowHeight: 74,
+        windowWidth: 380,
+        background: background(layer),
+        callerContainer: {
+            padding: 12,
+        },
+        callerAvatar: {
+            height: avatarSize,
+            width: avatarSize,
+            cornerRadius: avatarSize / 2,
+        },
+        callerMetadata: {
+            margin: { left: 10 },
+        },
+        callerUsername: {
+            ...text(layer, "sans", { size: "sm", weight: "bold" }),
+            margin: { top: -3 },
+        },
+        callerMessage: {
+            ...text(layer, "sans", "variant", { size: "xs" }),
+            margin: { top: -3 },
+        },
+        worktreeRoots: {
+            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+            margin: { top: -3 },
+        },
+        buttonWidth: 96,
+        acceptButton: {
+            background: background(layer, "accent"),
+            border: border(layer, { left: true, bottom: true }),
+            ...text(layer, "sans", "positive", {
+                size: "xs",
+                weight: "extra_bold",
+            }),
+        },
+        declineButton: {
+            border: border(layer, { left: true }),
+            ...text(layer, "sans", "negative", {
+                size: "xs",
+                weight: "extra_bold",
+            }),
+        },
+    }
 }

styles/src/styleTree/picker.ts

@@ -1,78 +1,78 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
 export default function picker(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest;
-  const container = {
-    background: background(layer),
-    border: border(layer),
-    shadow: colorScheme.modalShadow,
-    cornerRadius: 12,
-    padding: {
-      bottom: 4,
+    let layer = colorScheme.lowest
+    const container = {
+        background: background(layer),
+        border: border(layer),
+        shadow: colorScheme.modalShadow,
+        cornerRadius: 12,
+        padding: {
+            bottom: 4,
+        },
     }
-  };
-  const inputEditor = {
-    placeholderText: text(layer, "sans", "on", "disabled"),
-    selection: colorScheme.players[0],
-    text: text(layer, "mono", "on"),
-    border: border(layer, { bottom: true }),
-    padding: {
-      bottom: 8,
-      left: 16,
-      right: 16,
-      top: 8,
-    },
-    margin: {
-      bottom: 4,
-    },
-  };
-  const emptyInputEditor = { ...inputEditor };
-  delete emptyInputEditor.border;
-  delete emptyInputEditor.margin;
+    const inputEditor = {
+        placeholderText: text(layer, "sans", "on", "disabled"),
+        selection: colorScheme.players[0],
+        text: text(layer, "mono", "on"),
+        border: border(layer, { bottom: true }),
+        padding: {
+            bottom: 8,
+            left: 16,
+            right: 16,
+            top: 8,
+        },
+        margin: {
+            bottom: 4,
+        },
+    }
+    const emptyInputEditor = { ...inputEditor }
+    delete emptyInputEditor.border
+    delete emptyInputEditor.margin
 
-  return {
-    ...container,
-    emptyContainer: {
-      ...container,
-      padding: {}
-    },
-    item: {
-      padding: {
-        bottom: 4,
-        left: 12,
-        right: 12,
-        top: 4,
-      },
-      margin: {
-        top: 1,
-        left: 4,
-        right: 4,
-      },
-      cornerRadius: 8,
-      text: text(layer, "sans", "variant"),
-      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
-      active: {
-        background: background(layer, "base", "active"),
-        text: text(layer, "sans", "base", "active"),
-        highlightText: text(layer, "sans", "accent", {
-          weight: "bold",
-        }),
-      },
-      hover: {
-        background: background(layer, "hovered"),
-      },
-    },
-    inputEditor,
-    emptyInputEditor,
-    noMatches: {
-      text: text(layer, "sans", "variant"),
-      padding: {
-        bottom: 8,
-        left: 16,
-        right: 16,
-        top: 8,
-      },
-    },
-  };
+    return {
+        ...container,
+        emptyContainer: {
+            ...container,
+            padding: {},
+        },
+        item: {
+            padding: {
+                bottom: 4,
+                left: 12,
+                right: 12,
+                top: 4,
+            },
+            margin: {
+                top: 1,
+                left: 4,
+                right: 4,
+            },
+            cornerRadius: 8,
+            text: text(layer, "sans", "variant"),
+            highlightText: text(layer, "sans", "accent", { weight: "bold" }),
+            active: {
+                background: background(layer, "base", "active"),
+                text: text(layer, "sans", "base", "active"),
+                highlightText: text(layer, "sans", "accent", {
+                    weight: "bold",
+                }),
+            },
+            hover: {
+                background: background(layer, "hovered"),
+            },
+        },
+        inputEditor,
+        emptyInputEditor,
+        noMatches: {
+            text: text(layer, "sans", "variant"),
+            padding: {
+                bottom: 8,
+                left: 16,
+                right: 16,
+                top: 8,
+            },
+        },
+    }
 }

styles/src/styleTree/projectDiagnostics.ts

@@ -1,13 +1,13 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, text } from "./components"
 
 export default function projectDiagnostics(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
-  return {
-    background: background(layer),
-    tabIconSpacing: 4,
-    tabIconWidth: 13,
-    tabSummarySpacing: 10,
-    emptyMessage: text(layer, "sans", "variant", { size: "md" }),
-  };
+    let layer = colorScheme.highest
+    return {
+        background: background(layer),
+        tabIconSpacing: 4,
+        tabIconWidth: 13,
+        tabSummarySpacing: 10,
+        emptyMessage: text(layer, "sans", "variant", { size: "md" }),
+    }
 }

styles/src/styleTree/projectPanel.ts

@@ -1,60 +1,60 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
-  
-  let baseEntry = {
-    height: 24,
-    iconColor: foreground(layer, "variant"),
-    iconSize: 8,
-    iconSpacing: 8,
-  }
+    let layer = colorScheme.middle
 
-  let entry = {
-    ...baseEntry,
-    text: text(layer, "mono", "variant", { size: "sm" }),
-    hover: {
-      background: background(layer, "variant", "hovered"),
-    },
-    active: {
-      background: background(layer, "active"),
-      text: text(layer, "mono", "active", { size: "sm" }),
-    },
-    activeHover: {
-      background: background(layer, "active"),
-      text: text(layer, "mono", "active", { size: "sm" }),
-    },
-  };
+    let baseEntry = {
+        height: 24,
+        iconColor: foreground(layer, "variant"),
+        iconSize: 8,
+        iconSpacing: 8,
+    }
 
-  return {
-    background: background(layer),
-    padding: { left: 12, right: 12, top: 6, bottom: 6 },
-    indentWidth: 8,
-    entry,
-    draggedEntry: {
-      ...baseEntry,
-      text: text(layer, "mono", "on", { size: "sm" }),
-      background: withOpacity(background(layer, "on"), 0.9),
-      border: border(layer),
-    },
-    ignoredEntry: {
-      ...entry,
-      text: text(layer, "mono", "disabled"),
-    },
-    cutEntry: {
-      ...entry,
-      text: text(layer, "mono", "disabled"),
-      active: {
-        background: background(layer, "active"),
-        text: text(layer, "mono", "disabled", { size: "sm" }),
-      },
-    },
-    filenameEditor: {
-      background: background(layer, "on"),
-      text: text(layer, "mono", "on", { size: "sm" }),
-      selection: colorScheme.players[0],
-    },
-  };
+    let entry = {
+        ...baseEntry,
+        text: text(layer, "mono", "variant", { size: "sm" }),
+        hover: {
+            background: background(layer, "variant", "hovered"),
+        },
+        active: {
+            background: background(layer, "active"),
+            text: text(layer, "mono", "active", { size: "sm" }),
+        },
+        activeHover: {
+            background: background(layer, "active"),
+            text: text(layer, "mono", "active", { size: "sm" }),
+        },
+    }
+
+    return {
+        background: background(layer),
+        padding: { left: 12, right: 12, top: 6, bottom: 6 },
+        indentWidth: 8,
+        entry,
+        draggedEntry: {
+            ...baseEntry,
+            text: text(layer, "mono", "on", { size: "sm" }),
+            background: withOpacity(background(layer, "on"), 0.9),
+            border: border(layer),
+        },
+        ignoredEntry: {
+            ...entry,
+            text: text(layer, "mono", "disabled"),
+        },
+        cutEntry: {
+            ...entry,
+            text: text(layer, "mono", "disabled"),
+            active: {
+                background: background(layer, "active"),
+                text: text(layer, "mono", "disabled", { size: "sm" }),
+            },
+        },
+        filenameEditor: {
+            background: background(layer, "on"),
+            text: text(layer, "mono", "on", { size: "sm" }),
+            selection: colorScheme.players[0],
+        },
+    }
 }

styles/src/styleTree/projectSharedNotification.ts

@@ -1,46 +1,54 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
-export default function projectSharedNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle;
+export default function projectSharedNotification(
+    colorScheme: ColorScheme
+): Object {
+    let layer = colorScheme.middle
 
-  const avatarSize = 48;
-  return {
-    windowHeight: 74,
-    windowWidth: 380,
-    background: background(layer),
-    ownerContainer: {
-      padding: 12,
-    },
-    ownerAvatar: {
-      height: avatarSize,
-      width: avatarSize,
-      cornerRadius: avatarSize / 2,
-    },
-    ownerMetadata: {
-      margin: { left: 10 },
-    },
-    ownerUsername: {
-      ...text(layer, "sans", { size: "sm", weight: "bold" }),
-      margin: { top: -3 },
-    },
-    message: {
-      ...text(layer, "sans", "variant", { size: "xs" }),
-      margin: { top: -3 },
-    },
-    worktreeRoots: {
-      ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
-      margin: { top: -3 },
-    },
-    buttonWidth: 96,
-    openButton: {
-      background: background(layer, "accent"),
-      border: border(layer, { left: true, bottom: true, }),
-      ...text(layer, "sans", "accent", { size: "xs", weight: "extra_bold" })
-    },
-    dismissButton: {
-      border: border(layer, { left: true }),
-      ...text(layer, "sans", "variant", { size: "xs", weight: "extra_bold" })
-    },
-  };
+    const avatarSize = 48
+    return {
+        windowHeight: 74,
+        windowWidth: 380,
+        background: background(layer),
+        ownerContainer: {
+            padding: 12,
+        },
+        ownerAvatar: {
+            height: avatarSize,
+            width: avatarSize,
+            cornerRadius: avatarSize / 2,
+        },
+        ownerMetadata: {
+            margin: { left: 10 },
+        },
+        ownerUsername: {
+            ...text(layer, "sans", { size: "sm", weight: "bold" }),
+            margin: { top: -3 },
+        },
+        message: {
+            ...text(layer, "sans", "variant", { size: "xs" }),
+            margin: { top: -3 },
+        },
+        worktreeRoots: {
+            ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+            margin: { top: -3 },
+        },
+        buttonWidth: 96,
+        openButton: {
+            background: background(layer, "accent"),
+            border: border(layer, { left: true, bottom: true }),
+            ...text(layer, "sans", "accent", {
+                size: "xs",
+                weight: "extra_bold",
+            }),
+        },
+        dismissButton: {
+            border: border(layer, { left: true }),
+            ...text(layer, "sans", "variant", {
+                size: "xs",
+                weight: "extra_bold",
+            }),
+        },
+    }
 }

styles/src/styleTree/search.ts

@@ -1,94 +1,94 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, foreground, text } from "./components"
 
 export default function search(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+    let layer = colorScheme.highest
 
-  // Search input
-  const editor = {
-    background: background(layer),
-    cornerRadius: 8,
-    minWidth: 200,
-    maxWidth: 500,
-    placeholderText: text(layer, "mono", "disabled"),
-    selection: colorScheme.players[0],
-    text: text(layer, "mono", "default"),
-    border: border(layer),
-    margin: {
-      right: 12,
-    },
-    padding: {
-      top: 3,
-      bottom: 3,
-      left: 12,
-      right: 8,
-    },
-  };
+    // Search input
+    const editor = {
+        background: background(layer),
+        cornerRadius: 8,
+        minWidth: 200,
+        maxWidth: 500,
+        placeholderText: text(layer, "mono", "disabled"),
+        selection: colorScheme.players[0],
+        text: text(layer, "mono", "default"),
+        border: border(layer),
+        margin: {
+            right: 12,
+        },
+        padding: {
+            top: 3,
+            bottom: 3,
+            left: 12,
+            right: 8,
+        },
+    }
 
-  return {
-    // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
-    matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-    optionButton: {
-      ...text(layer, "mono", "on"),
-      background: background(layer, "on"),
-      cornerRadius: 6,
-      border: border(layer, "on"),
-      margin: {
-        right: 4,
-      },
-      padding: {
-        bottom: 2,
-        left: 10,
-        right: 10,
-        top: 2,
-      },
-      active: {
-        ...text(layer, "mono", "on", "inverted"),
-        background: background(layer, "on", "inverted"),
-        border: border(layer, "on", "inverted"),
-      },
-      clicked: {
-        ...text(layer, "mono", "on", "pressed"),
-        background: background(layer, "on", "pressed"),
-        border: border(layer, "on", "pressed"),
-      },
-      hover: {
-        ...text(layer, "mono", "on", "hovered"),
-        background: background(layer, "on", "hovered"),
-        border: border(layer, "on", "hovered"),
-      },
-    },
-    editor,
-    invalidEditor: {
-      ...editor,
-      border: border(layer, "negative"),
-    },
-    matchIndex: {
-      ...text(layer, "mono", "variant"),
-      padding: 6,
-    },
-    optionButtonGroup: {
-      padding: {
-        left: 12,
-        right: 12,
-      },
-    },
-    resultsStatus: {
-      ...text(layer, "mono", "on"),
-      size: 18,
-    },
-    dismissButton: {
-      color: foreground(layer, "variant"),
-      iconWidth: 12,
-      buttonWidth: 14,
-      padding: {
-        left: 10,
-        right: 10,
-      },
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-  };
+    return {
+        // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
+        matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
+        optionButton: {
+            ...text(layer, "mono", "on"),
+            background: background(layer, "on"),
+            cornerRadius: 6,
+            border: border(layer, "on"),
+            margin: {
+                right: 4,
+            },
+            padding: {
+                bottom: 2,
+                left: 10,
+                right: 10,
+                top: 2,
+            },
+            active: {
+                ...text(layer, "mono", "on", "inverted"),
+                background: background(layer, "on", "inverted"),
+                border: border(layer, "on", "inverted"),
+            },
+            clicked: {
+                ...text(layer, "mono", "on", "pressed"),
+                background: background(layer, "on", "pressed"),
+                border: border(layer, "on", "pressed"),
+            },
+            hover: {
+                ...text(layer, "mono", "on", "hovered"),
+                background: background(layer, "on", "hovered"),
+                border: border(layer, "on", "hovered"),
+            },
+        },
+        editor,
+        invalidEditor: {
+            ...editor,
+            border: border(layer, "negative"),
+        },
+        matchIndex: {
+            ...text(layer, "mono", "variant"),
+            padding: 6,
+        },
+        optionButtonGroup: {
+            padding: {
+                left: 12,
+                right: 12,
+            },
+        },
+        resultsStatus: {
+            ...text(layer, "mono", "on"),
+            size: 18,
+        },
+        dismissButton: {
+            color: foreground(layer, "variant"),
+            iconWidth: 12,
+            buttonWidth: 14,
+            padding: {
+                left: 10,
+                right: 10,
+            },
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+    }
 }

styles/src/styleTree/sharedScreen.ts

@@ -1,9 +1,9 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background } from "./components"
 
 export default function sharedScreen(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
-  return {
-    background: background(layer)
-  }
+    let layer = colorScheme.highest
+    return {
+        background: background(layer),
+    }
 }

styles/src/styleTree/simpleMessageNotification.ts

@@ -1,31 +1,33 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { foreground, text } from "./components"
 
-const headerPadding = 8;
+const headerPadding = 8
 
-export default function simpleMessageNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle;
-  return {
-    message: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding },
-    },
-    actionMessage: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: headerPadding, top: 6, bottom: 6 },
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-    dismissButton: {
-      color: foreground(layer),
-      iconWidth: 8,
-      iconHeight: 8,
-      buttonWidth: 8,
-      buttonHeight: 8,
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-  };
+export default function simpleMessageNotification(
+    colorScheme: ColorScheme
+): Object {
+    let layer = colorScheme.middle
+    return {
+        message: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: headerPadding, right: headerPadding },
+        },
+        actionMessage: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: headerPadding, top: 6, bottom: 6 },
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+        dismissButton: {
+            color: foreground(layer),
+            iconWidth: 8,
+            iconHeight: 8,
+            buttonWidth: 8,
+            buttonHeight: 8,
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+    }
 }

styles/src/styleTree/statusBar.ts

@@ -1,118 +1,118 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, foreground, text } from "./components"
 
 export default function statusBar(colorScheme: ColorScheme) {
-  let layer = colorScheme.lowest;
+    let layer = colorScheme.lowest
 
-  const statusContainer = {
-    cornerRadius: 6,
-    padding: { top: 3, bottom: 3, left: 6, right: 6 },
-  };
-
-  const diagnosticStatusContainer = {
-    cornerRadius: 6,
-    padding: { top: 1, bottom: 1, left: 6, right: 6 },
-  };
-
-  return {
-    height: 30,
-    itemSpacing: 8,
-    padding: {
-      top: 1,
-      bottom: 1,
-      left: 6,
-      right: 6,
-    },
-    border: border(layer, { top: true, overlay: true }),
-    cursorPosition: text(layer, "sans", "variant"),
-    autoUpdateProgressMessage: text(layer, "sans", "variant"),
-    autoUpdateDoneMessage: text(layer, "sans", "variant"),
-    lspStatus: {
-      ...diagnosticStatusContainer,
-      iconSpacing: 4,
-      iconWidth: 14,
-      height: 18,
-      message: text(layer, "sans"),
-      iconColor: foreground(layer),
-      hover: {
-        message: text(layer, "sans"),
-        iconColor: foreground(layer),
-        background: background(layer),
-      },
-    },
-    diagnosticMessage: {
-      ...text(layer, "sans"),
-      hover: text(layer, "sans", "hovered"),
-    },
-    feedback: {
-      ...text(layer, "sans", "variant"),
-      hover: text(layer, "sans", "hovered"),
-    },
-    diagnosticSummary: {
-      height: 20,
-      iconWidth: 16,
-      iconSpacing: 2,
-      summarySpacing: 6,
-      text: text(layer, "sans", { size: "sm" }),
-      iconColorOk: foreground(layer, "variant"),
-      iconColorWarning: foreground(layer, "warning"),
-      iconColorError: foreground(layer, "negative"),
-      containerOk: {
+    const statusContainer = {
         cornerRadius: 6,
-        padding: { top: 3, bottom: 3, left: 7, right: 7 },
-      },
-      containerWarning: {
-        ...diagnosticStatusContainer,
-        background: background(layer, "warning"),
-        border: border(layer, "warning"),
-      },
-      containerError: {
-        ...diagnosticStatusContainer,
-        background: background(layer, "negative"),
-        border: border(layer, "negative"),
-      },
-      hover: {
-        iconColorOk: foreground(layer, "on"),
-        containerOk: {
-          cornerRadius: 6,
-          padding: { top: 3, bottom: 3, left: 7, right: 7 },
-          background: background(layer, "on", "hovered"),
+        padding: { top: 3, bottom: 3, left: 6, right: 6 },
+    }
+
+    const diagnosticStatusContainer = {
+        cornerRadius: 6,
+        padding: { top: 1, bottom: 1, left: 6, right: 6 },
+    }
+
+    return {
+        height: 30,
+        itemSpacing: 8,
+        padding: {
+            top: 1,
+            bottom: 1,
+            left: 6,
+            right: 6,
         },
-        containerWarning: {
-          ...diagnosticStatusContainer,
-          background: background(layer, "warning", "hovered"),
-          border: border(layer, "warning", "hovered"),
+        border: border(layer, { top: true, overlay: true }),
+        cursorPosition: text(layer, "sans", "variant"),
+        autoUpdateProgressMessage: text(layer, "sans", "variant"),
+        autoUpdateDoneMessage: text(layer, "sans", "variant"),
+        lspStatus: {
+            ...diagnosticStatusContainer,
+            iconSpacing: 4,
+            iconWidth: 14,
+            height: 18,
+            message: text(layer, "sans"),
+            iconColor: foreground(layer),
+            hover: {
+                message: text(layer, "sans"),
+                iconColor: foreground(layer),
+                background: background(layer),
+            },
         },
-        containerError: {
-          ...diagnosticStatusContainer,
-          background: background(layer, "negative", "hovered"),
-          border: border(layer, "negative", "hovered"),
+        diagnosticMessage: {
+            ...text(layer, "sans"),
+            hover: text(layer, "sans", "hovered"),
         },
-      },
-    },
-    sidebarButtons: {
-      groupLeft: {},
-      groupRight: {},
-      item: {
-        ...statusContainer,
-        iconSize: 16,
-        iconColor: foreground(layer, "variant"),
-        hover: {
-          iconColor: foreground(layer, "hovered"),
-          background: background(layer, "variant"),
+        feedback: {
+            ...text(layer, "sans", "variant"),
+            hover: text(layer, "sans", "hovered"),
         },
-        active: {
-          iconColor: foreground(layer, "active"),
-          background: background(layer, "active"),
+        diagnosticSummary: {
+            height: 20,
+            iconWidth: 16,
+            iconSpacing: 2,
+            summarySpacing: 6,
+            text: text(layer, "sans", { size: "sm" }),
+            iconColorOk: foreground(layer, "variant"),
+            iconColorWarning: foreground(layer, "warning"),
+            iconColorError: foreground(layer, "negative"),
+            containerOk: {
+                cornerRadius: 6,
+                padding: { top: 3, bottom: 3, left: 7, right: 7 },
+            },
+            containerWarning: {
+                ...diagnosticStatusContainer,
+                background: background(layer, "warning"),
+                border: border(layer, "warning"),
+            },
+            containerError: {
+                ...diagnosticStatusContainer,
+                background: background(layer, "negative"),
+                border: border(layer, "negative"),
+            },
+            hover: {
+                iconColorOk: foreground(layer, "on"),
+                containerOk: {
+                    cornerRadius: 6,
+                    padding: { top: 3, bottom: 3, left: 7, right: 7 },
+                    background: background(layer, "on", "hovered"),
+                },
+                containerWarning: {
+                    ...diagnosticStatusContainer,
+                    background: background(layer, "warning", "hovered"),
+                    border: border(layer, "warning", "hovered"),
+                },
+                containerError: {
+                    ...diagnosticStatusContainer,
+                    background: background(layer, "negative", "hovered"),
+                    border: border(layer, "negative", "hovered"),
+                },
+            },
         },
-      },
-      badge: {
-        cornerRadius: 3,
-        padding: 2,
-        margin: { bottom: -1, right: -1 },
-        border: border(layer),
-        background: background(layer, "accent"),
-      },
-    },
-  };
+        sidebarButtons: {
+            groupLeft: {},
+            groupRight: {},
+            item: {
+                ...statusContainer,
+                iconSize: 16,
+                iconColor: foreground(layer, "variant"),
+                hover: {
+                    iconColor: foreground(layer, "hovered"),
+                    background: background(layer, "variant"),
+                },
+                active: {
+                    iconColor: foreground(layer, "active"),
+                    background: background(layer, "active"),
+                },
+            },
+            badge: {
+                cornerRadius: 3,
+                padding: 2,
+                margin: { bottom: -1, right: -1 },
+                border: border(layer),
+                background: background(layer, "accent"),
+            },
+        },
+    }
 }

styles/src/styleTree/tabBar.ts

@@ -1,103 +1,103 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { text, border, background, foreground } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { text, border, background, foreground } from "./components"
 
 export default function tabBar(colorScheme: ColorScheme) {
-  const height = 32;
+    const height = 32
 
-  let activeLayer = colorScheme.highest;
-  let layer = colorScheme.middle;
+    let activeLayer = colorScheme.highest
+    let layer = colorScheme.middle
 
-  const tab = {
-    height,
-    text: text(layer, "sans", "variant", { size: "sm" }),
-    background: background(layer),
-    border: border(layer, {
-      right: true,
-      bottom: true,
-      overlay: true,
-    }),
-    padding: {
-      left: 8,
-      right: 12,
-    },
-    spacing: 8,
+    const tab = {
+        height,
+        text: text(layer, "sans", "variant", { size: "sm" }),
+        background: background(layer),
+        border: border(layer, {
+            right: true,
+            bottom: true,
+            overlay: true,
+        }),
+        padding: {
+            left: 8,
+            right: 12,
+        },
+        spacing: 8,
 
-    // Close icons
-    iconWidth: 14,
-    iconClose: foreground(layer, "variant"),
-    iconCloseActive: foreground(layer, "hovered"),
+        // Close icons
+        iconWidth: 14,
+        iconClose: foreground(layer, "variant"),
+        iconCloseActive: foreground(layer, "hovered"),
 
-    // Indicators
-    iconConflict: foreground(layer, "warning"),
-    iconDirty: foreground(layer, "accent"),
+        // Indicators
+        iconConflict: foreground(layer, "warning"),
+        iconDirty: foreground(layer, "accent"),
 
-    // When two tabs of the same name are open, a label appears next to them
-    description: {
-      margin: { left: 8 },
-      ...text(layer, "sans", "disabled", { size: "2xs" }),
-    },
-  };
+        // When two tabs of the same name are open, a label appears next to them
+        description: {
+            margin: { left: 8 },
+            ...text(layer, "sans", "disabled", { size: "2xs" }),
+        },
+    }
 
-  const activePaneActiveTab = {
-    ...tab,
-    background: background(activeLayer),
-    text: text(activeLayer, "sans", "active", { size: "sm" }),
-    border: {
-      ...tab.border,
-      bottom: false,
-    },
-  };
+    const activePaneActiveTab = {
+        ...tab,
+        background: background(activeLayer),
+        text: text(activeLayer, "sans", "active", { size: "sm" }),
+        border: {
+            ...tab.border,
+            bottom: false,
+        },
+    }
 
-  const inactivePaneInactiveTab = {
-    ...tab,
-    background: background(layer),
-    text: text(layer, "sans", "variant", { size: "sm" }),
-  };
+    const inactivePaneInactiveTab = {
+        ...tab,
+        background: background(layer),
+        text: text(layer, "sans", "variant", { size: "sm" }),
+    }
 
-  const inactivePaneActiveTab = {
-    ...tab,
-    background: background(activeLayer),
-    text: text(layer, "sans", "variant", { size: "sm" }),
-    border: {
-      ...tab.border,
-      bottom: false,
-    },
-  };
+    const inactivePaneActiveTab = {
+        ...tab,
+        background: background(activeLayer),
+        text: text(layer, "sans", "variant", { size: "sm" }),
+        border: {
+            ...tab.border,
+            bottom: false,
+        },
+    }
 
-  const draggedTab = {
-    ...activePaneActiveTab,
-    background: withOpacity(tab.background, 0.9),
-    border: undefined as any,
-    shadow: colorScheme.popoverShadow,
-  };
+    const draggedTab = {
+        ...activePaneActiveTab,
+        background: withOpacity(tab.background, 0.9),
+        border: undefined as any,
+        shadow: colorScheme.popoverShadow,
+    }
 
-  return {
-    height,
-    background: background(layer),
-    activePane: {
-      activeTab: activePaneActiveTab,
-      inactiveTab: tab,
-    },
-    inactivePane: {
-      activeTab: inactivePaneActiveTab,
-      inactiveTab: inactivePaneInactiveTab,
-    },
-    draggedTab,
-    paneButton: {
-      color: foreground(layer, "variant"),
-      iconWidth: 12,
-      buttonWidth: activePaneActiveTab.height,
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-    paneButtonContainer: {
-      background: tab.background,
-      border: {
-        ...tab.border,
-        right: false,
-      },
-    },
-  };
+    return {
+        height,
+        background: background(layer),
+        activePane: {
+            activeTab: activePaneActiveTab,
+            inactiveTab: tab,
+        },
+        inactivePane: {
+            activeTab: inactivePaneActiveTab,
+            inactiveTab: inactivePaneInactiveTab,
+        },
+        draggedTab,
+        paneButton: {
+            color: foreground(layer, "variant"),
+            iconWidth: 12,
+            buttonWidth: activePaneActiveTab.height,
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+        paneButtonContainer: {
+            background: tab.background,
+            border: {
+                ...tab.border,
+                right: false,
+            },
+        },
+    }
 }

styles/src/styleTree/terminal.ts

@@ -1,52 +1,52 @@
-import { ColorScheme } from "../themes/common/colorScheme";
+import { ColorScheme } from "../themes/common/colorScheme"
 
 export default function terminal(colorScheme: ColorScheme) {
-  /**
-   * Colors are controlled per-cell in the terminal grid.
-   * Cells can be set to any of these more 'theme-capable' colors
-   * or can be set directly with RGB values.
-   * Here are the common interpretations of these names:
-   * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
-   */
-  return {
-    black: colorScheme.ramps.neutral(0).hex(),
-    red: colorScheme.ramps.red(0.5).hex(),
-    green: colorScheme.ramps.green(0.5).hex(),
-    yellow: colorScheme.ramps.yellow(0.5).hex(),
-    blue: colorScheme.ramps.blue(0.5).hex(),
-    magenta: colorScheme.ramps.magenta(0.5).hex(),
-    cyan: colorScheme.ramps.cyan(0.5).hex(),
-    white: colorScheme.ramps.neutral(1).hex(),
-    brightBlack: colorScheme.ramps.neutral(0.4).hex(),
-    brightRed: colorScheme.ramps.red(0.25).hex(),
-    brightGreen: colorScheme.ramps.green(0.25).hex(),
-    brightYellow: colorScheme.ramps.yellow(0.25).hex(),
-    brightBlue: colorScheme.ramps.blue(0.25).hex(),
-    brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
-    brightCyan: colorScheme.ramps.cyan(0.25).hex(),
-    brightWhite: colorScheme.ramps.neutral(1).hex(),
     /**
-     * Default color for characters
+     * Colors are controlled per-cell in the terminal grid.
+     * Cells can be set to any of these more 'theme-capable' colors
+     * or can be set directly with RGB values.
+     * Here are the common interpretations of these names:
+     * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
      */
-    foreground: colorScheme.ramps.neutral(1).hex(),
-    /**
-     * Default color for the rectangle background of a cell
-     */
-    background: colorScheme.ramps.neutral(0).hex(),
-    modalBackground: colorScheme.ramps.neutral(0.1).hex(),
-    /**
-     * Default color for the cursor
-     */
-    cursor: colorScheme.players[0].cursor,
-    dimBlack: colorScheme.ramps.neutral(1).hex(),
-    dimRed: colorScheme.ramps.red(0.75).hex(),
-    dimGreen: colorScheme.ramps.green(0.75).hex(),
-    dimYellow: colorScheme.ramps.yellow(0.75).hex(),
-    dimBlue: colorScheme.ramps.blue(0.75).hex(),
-    dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
-    dimCyan: colorScheme.ramps.cyan(0.75).hex(),
-    dimWhite: colorScheme.ramps.neutral(0.6).hex(),
-    brightForeground: colorScheme.ramps.neutral(1).hex(),
-    dimForeground: colorScheme.ramps.neutral(0).hex(),
-  };
+    return {
+        black: colorScheme.ramps.neutral(0).hex(),
+        red: colorScheme.ramps.red(0.5).hex(),
+        green: colorScheme.ramps.green(0.5).hex(),
+        yellow: colorScheme.ramps.yellow(0.5).hex(),
+        blue: colorScheme.ramps.blue(0.5).hex(),
+        magenta: colorScheme.ramps.magenta(0.5).hex(),
+        cyan: colorScheme.ramps.cyan(0.5).hex(),
+        white: colorScheme.ramps.neutral(1).hex(),
+        brightBlack: colorScheme.ramps.neutral(0.4).hex(),
+        brightRed: colorScheme.ramps.red(0.25).hex(),
+        brightGreen: colorScheme.ramps.green(0.25).hex(),
+        brightYellow: colorScheme.ramps.yellow(0.25).hex(),
+        brightBlue: colorScheme.ramps.blue(0.25).hex(),
+        brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
+        brightCyan: colorScheme.ramps.cyan(0.25).hex(),
+        brightWhite: colorScheme.ramps.neutral(1).hex(),
+        /**
+         * Default color for characters
+         */
+        foreground: colorScheme.ramps.neutral(1).hex(),
+        /**
+         * Default color for the rectangle background of a cell
+         */
+        background: colorScheme.ramps.neutral(0).hex(),
+        modalBackground: colorScheme.ramps.neutral(0.1).hex(),
+        /**
+         * Default color for the cursor
+         */
+        cursor: colorScheme.players[0].cursor,
+        dimBlack: colorScheme.ramps.neutral(1).hex(),
+        dimRed: colorScheme.ramps.red(0.75).hex(),
+        dimGreen: colorScheme.ramps.green(0.75).hex(),
+        dimYellow: colorScheme.ramps.yellow(0.75).hex(),
+        dimBlue: colorScheme.ramps.blue(0.75).hex(),
+        dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
+        dimCyan: colorScheme.ramps.cyan(0.75).hex(),
+        dimWhite: colorScheme.ramps.neutral(0.6).hex(),
+        brightForeground: colorScheme.ramps.neutral(1).hex(),
+        dimForeground: colorScheme.ramps.neutral(0).hex(),
+    }
 }

styles/src/styleTree/tooltip.ts

@@ -1,23 +1,23 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
 
 export default function tooltip(colorScheme: ColorScheme) {
-  let layer = colorScheme.middle;
-  return {
-    background: background(layer),
-    border: border(layer),
-    padding: { top: 4, bottom: 4, left: 8, right: 8 },
-    margin: { top: 6, left: 6 },
-    shadow: colorScheme.popoverShadow,
-    cornerRadius: 6,
-    text: text(layer, "sans", { size: "xs" }),
-    keystroke: {
-      background: background(layer, "on"),
-      cornerRadius: 4,
-      margin: { left: 6 },
-      padding: { left: 4, right: 4 },
-      ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
-    },
-    maxTextWidth: 200,
-  };
+    let layer = colorScheme.middle
+    return {
+        background: background(layer),
+        border: border(layer),
+        padding: { top: 4, bottom: 4, left: 8, right: 8 },
+        margin: { top: 6, left: 6 },
+        shadow: colorScheme.popoverShadow,
+        cornerRadius: 6,
+        text: text(layer, "sans", { size: "xs" }),
+        keystroke: {
+            background: background(layer, "on"),
+            cornerRadius: 4,
+            margin: { left: 6 },
+            padding: { left: 4, right: 4 },
+            ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
+        },
+        maxTextWidth: 200,
+    }
 }

styles/src/styleTree/updateNotification.ts

@@ -1,31 +1,31 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { foreground, text } from "./components"
 
-const headerPadding = 8;
+const headerPadding = 8
 
 export default function updateNotification(colorScheme: ColorScheme): Object {
-  let layer = colorScheme.middle;
-  return {
-    message: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: headerPadding, right: headerPadding },
-    },
-    actionMessage: {
-      ...text(layer, "sans", { size: "xs" }),
-      margin: { left: headerPadding, top: 6, bottom: 6 },
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-    dismissButton: {
-      color: foreground(layer),
-      iconWidth: 8,
-      iconHeight: 8,
-      buttonWidth: 8,
-      buttonHeight: 8,
-      hover: {
-        color: foreground(layer, "hovered"),
-      },
-    },
-  };
+    let layer = colorScheme.middle
+    return {
+        message: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: headerPadding, right: headerPadding },
+        },
+        actionMessage: {
+            ...text(layer, "sans", { size: "xs" }),
+            margin: { left: headerPadding, top: 6, bottom: 6 },
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+        dismissButton: {
+            color: foreground(layer),
+            iconWidth: 8,
+            iconHeight: 8,
+            buttonWidth: 8,
+            buttonHeight: 8,
+            hover: {
+                color: foreground(layer, "hovered"),
+            },
+        },
+    }
 }

styles/src/styleTree/workspace.ts

@@ -1,266 +1,264 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import {
-  background,
-  border,
-  borderColor,
-  foreground,
-  text,
-} from "./components";
-import statusBar from "./statusBar";
-import tabBar from "./tabBar";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, borderColor, foreground, text } from "./components"
+import statusBar from "./statusBar"
+import tabBar from "./tabBar"
 
 export default function workspace(colorScheme: ColorScheme) {
-  const layer = colorScheme.lowest;
-  const itemSpacing = 8;
-  const titlebarButton = {
-    cornerRadius: 6,
-    padding: {
-      top: 1,
-      bottom: 1,
-      left: 8,
-      right: 8,
-    },
-    ...text(layer, "sans", "variant", { size: "xs" }),
-    background: background(layer, "variant"),
-    border: border(layer),
-    hover: {
-      ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
-      background: background(layer, "variant", "hovered"),
-      border: border(layer, "variant", "hovered"),
-    },
-    clicked: {
-      ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
-      background: background(layer, "variant", "pressed"),
-      border: border(layer, "variant", "pressed"),
-    },
-    active: {
-      ...text(layer, "sans", "variant", "active", { size: "xs" }),
-      background: background(layer, "variant", "active"),
-      border: border(layer, "variant", "active"),
-    },
-  };
-  const avatarWidth = 18;
-  const avatarOuterWidth = avatarWidth + 4;
-  const followerAvatarWidth = 14;
-  const followerAvatarOuterWidth = followerAvatarWidth + 4;
-
-  return {
-    background: background(layer),
-    joiningProjectAvatar: {
-      cornerRadius: 40,
-      width: 80,
-    },
-    joiningProjectMessage: {
-      padding: 12,
-      ...text(layer, "sans", { size: "lg" }),
-    },
-    externalLocationMessage: {
-      background: background(colorScheme.middle, "accent"),
-      border: border(colorScheme.middle, "accent"),
-      cornerRadius: 6,
-      padding: 12,
-      margin: { bottom: 8, right: 8 },
-      ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
-    },
-    leaderBorderOpacity: 0.7,
-    leaderBorderWidth: 2.0,
-    tabBar: tabBar(colorScheme),
-    modal: {
-      margin: {
-        bottom: 52,
-        top: 52,
-      },
-      cursor: "Arrow",
-    },
-    sidebar: {
-      initialSize: 240,
-      border: border(layer, { left: true, right: true }),
-    },
-    paneDivider: {
-      color: borderColor(layer),
-      width: 1,
-    },
-    statusBar: statusBar(colorScheme),
-    titlebar: {
-      itemSpacing,
-      facePileSpacing: 2,
-      height: 33, // 32px + 1px for overlaid border
-      background: background(layer),
-      border: border(layer, { bottom: true, overlay: true }),
-      padding: {
-        left: 80,
-        right: itemSpacing,
-      },
-
-      // Project
-      title: text(layer, "sans", "variant"),
-
-      // Collaborators
-      leaderAvatar: {
-        width: avatarWidth,
-        outerWidth: avatarOuterWidth,
-        cornerRadius: avatarWidth / 2,
-        outerCornerRadius: avatarOuterWidth / 2,
-      },
-      followerAvatar: {
-        width: followerAvatarWidth,
-        outerWidth: followerAvatarOuterWidth,
-        cornerRadius: followerAvatarWidth / 2,
-        outerCornerRadius: followerAvatarOuterWidth / 2,
-      },
-      inactiveAvatarGrayscale: true,
-      followerAvatarOverlap: 8,
-      leaderSelection: {
-        margin: {
-          top: 4,
-          bottom: 4,
-        },
-        padding: {
-          left: 2,
-          right: 2,
-          top: 4,
-          bottom: 4,
-        },
+    const layer = colorScheme.lowest
+    const itemSpacing = 8
+    const titlebarButton = {
         cornerRadius: 6,
-      },
-      avatarRibbon: {
-        height: 3,
-        width: 12,
-        // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
-      },
-
-      // Sign in buttom
-      // FlatButton, Variant
-      signInPrompt: {
-        ...titlebarButton,
-      },
-
-      // Offline Indicator
-      offlineIcon: {
-        color: foreground(layer, "variant"),
-        width: 16,
-        margin: {
-          left: itemSpacing,
-        },
         padding: {
-          right: 4,
+            top: 1,
+            bottom: 1,
+            left: 8,
+            right: 8,
         },
-      },
-
-      // Notice that the collaboration server is out of date
-      outdatedWarning: {
-        ...text(layer, "sans", "warning", { size: "xs" }),
-        background: withOpacity(background(layer, "warning"), 0.3),
-        border: border(layer, "warning"),
-        margin: {
-          left: itemSpacing,
-        },
-        padding: {
-          left: 8,
-          right: 8,
-        },
-        cornerRadius: 6,
-      },
-      callControl: {
-        cornerRadius: 6,
-        color: foreground(layer, "variant"),
-        iconWidth: 12,
-        buttonWidth: 20,
+        ...text(layer, "sans", "variant", { size: "xs" }),
+        background: background(layer, "variant"),
+        border: border(layer),
         hover: {
-          background: background(layer, "variant", "hovered"),
-          color: foreground(layer, "variant", "hovered"),
-        },
-      },
-      toggleContactsButton: {
-        margin: { left: itemSpacing },
-        cornerRadius: 6,
-        color: foreground(layer, "variant"),
-        iconWidth: 8,
-        buttonWidth: 20,
-        active: {
-          background: background(layer, "variant", "active"),
-          color: foreground(layer, "variant", "active"),
+            ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+            background: background(layer, "variant", "hovered"),
+            border: border(layer, "variant", "hovered"),
         },
         clicked: {
-          background: background(layer, "variant", "pressed"),
-          color: foreground(layer, "variant", "pressed"),
+            ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
+            background: background(layer, "variant", "pressed"),
+            border: border(layer, "variant", "pressed"),
         },
-        hover: {
-          background: background(layer, "variant", "hovered"),
-          color: foreground(layer, "variant", "hovered"),
+        active: {
+            ...text(layer, "sans", "variant", "active", { size: "xs" }),
+            background: background(layer, "variant", "active"),
+            border: border(layer, "variant", "active"),
         },
-      },
-      userMenuButton: {
-        buttonWidth: 20,
-        iconWidth: 12,
-        ...titlebarButton,
-      },
-      toggleContactsBadge: {
-        cornerRadius: 3,
-        padding: 2,
-        margin: { top: 3, left: 3 },
-        border: border(layer),
-        background: foreground(layer, "accent"),
-      },
-      shareButton: {
-        ...titlebarButton,
-      },
-    },
+    }
+    const avatarWidth = 18
+    const avatarOuterWidth = avatarWidth + 4
+    const followerAvatarWidth = 14
+    const followerAvatarOuterWidth = followerAvatarWidth + 4
 
-    toolbar: {
-      height: 34,
-      background: background(colorScheme.highest),
-      border: border(colorScheme.highest, { bottom: true }),
-      itemSpacing: 8,
-      navButton: {
-        color: foreground(colorScheme.highest, "on"),
-        iconWidth: 12,
-        buttonWidth: 24,
-        cornerRadius: 6,
-        hover: {
-          color: foreground(colorScheme.highest, "on", "hovered"),
-          background: background(colorScheme.highest, "on", "hovered"),
+    return {
+        background: background(layer),
+        joiningProjectAvatar: {
+            cornerRadius: 40,
+            width: 80,
         },
-        disabled: {
-          color: foreground(colorScheme.highest, "on", "disabled"),
+        joiningProjectMessage: {
+            padding: 12,
+            ...text(layer, "sans", { size: "lg" }),
         },
-      },
-      padding: { left: 8, right: 8, top: 4, bottom: 4 },
-    },
-    breadcrumbs: {
-      ...text(layer, "mono", "variant"),
-      padding: { left: 6 },
-    },
-    disconnectedOverlay: {
-      ...text(layer, "sans"),
-      background: withOpacity(background(layer), 0.8),
-    },
-    notification: {
-      margin: { top: 10 },
-      background: background(colorScheme.middle),
-      cornerRadius: 6,
-      padding: 12,
-      border: border(colorScheme.middle),
-      shadow: colorScheme.popoverShadow,
-    },
-    notifications: {
-      width: 400,
-      margin: { right: 10, bottom: 10 },
-    },
-    dock: {
-      initialSizeRight: 640,
-      initialSizeBottom: 480,
-      wash_color: withOpacity(background(colorScheme.highest), 0.5),
-      panel: {
-        border: border(colorScheme.middle),
-      },
-      maximized: {
-        margin: 32,
-        border: border(colorScheme.highest, { overlay: true }),
-        shadow: colorScheme.modalShadow,
-      },
-    },
-    dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
-  };
+        externalLocationMessage: {
+            background: background(colorScheme.middle, "accent"),
+            border: border(colorScheme.middle, "accent"),
+            cornerRadius: 6,
+            padding: 12,
+            margin: { bottom: 8, right: 8 },
+            ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
+        },
+        leaderBorderOpacity: 0.7,
+        leaderBorderWidth: 2.0,
+        tabBar: tabBar(colorScheme),
+        modal: {
+            margin: {
+                bottom: 52,
+                top: 52,
+            },
+            cursor: "Arrow",
+        },
+        sidebar: {
+            initialSize: 240,
+            border: border(layer, { left: true, right: true }),
+        },
+        paneDivider: {
+            color: borderColor(layer),
+            width: 1,
+        },
+        statusBar: statusBar(colorScheme),
+        titlebar: {
+            itemSpacing,
+            facePileSpacing: 2,
+            height: 33, // 32px + 1px for overlaid border
+            background: background(layer),
+            border: border(layer, { bottom: true, overlay: true }),
+            padding: {
+                left: 80,
+                right: itemSpacing,
+            },
+
+            // Project
+            title: text(layer, "sans", "variant"),
+
+            // Collaborators
+            leaderAvatar: {
+                width: avatarWidth,
+                outerWidth: avatarOuterWidth,
+                cornerRadius: avatarWidth / 2,
+                outerCornerRadius: avatarOuterWidth / 2,
+            },
+            followerAvatar: {
+                width: followerAvatarWidth,
+                outerWidth: followerAvatarOuterWidth,
+                cornerRadius: followerAvatarWidth / 2,
+                outerCornerRadius: followerAvatarOuterWidth / 2,
+            },
+            inactiveAvatarGrayscale: true,
+            followerAvatarOverlap: 8,
+            leaderSelection: {
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                },
+                padding: {
+                    left: 2,
+                    right: 2,
+                    top: 4,
+                    bottom: 4,
+                },
+                cornerRadius: 6,
+            },
+            avatarRibbon: {
+                height: 3,
+                width: 12,
+                // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
+            },
+
+            // Sign in buttom
+            // FlatButton, Variant
+            signInPrompt: {
+                ...titlebarButton,
+            },
+
+            // Offline Indicator
+            offlineIcon: {
+                color: foreground(layer, "variant"),
+                width: 16,
+                margin: {
+                    left: itemSpacing,
+                },
+                padding: {
+                    right: 4,
+                },
+            },
+
+            // Notice that the collaboration server is out of date
+            outdatedWarning: {
+                ...text(layer, "sans", "warning", { size: "xs" }),
+                background: withOpacity(background(layer, "warning"), 0.3),
+                border: border(layer, "warning"),
+                margin: {
+                    left: itemSpacing,
+                },
+                padding: {
+                    left: 8,
+                    right: 8,
+                },
+                cornerRadius: 6,
+            },
+            callControl: {
+                cornerRadius: 6,
+                color: foreground(layer, "variant"),
+                iconWidth: 12,
+                buttonWidth: 20,
+                hover: {
+                    background: background(layer, "variant", "hovered"),
+                    color: foreground(layer, "variant", "hovered"),
+                },
+            },
+            toggleContactsButton: {
+                margin: { left: itemSpacing },
+                cornerRadius: 6,
+                color: foreground(layer, "variant"),
+                iconWidth: 8,
+                buttonWidth: 20,
+                active: {
+                    background: background(layer, "variant", "active"),
+                    color: foreground(layer, "variant", "active"),
+                },
+                clicked: {
+                    background: background(layer, "variant", "pressed"),
+                    color: foreground(layer, "variant", "pressed"),
+                },
+                hover: {
+                    background: background(layer, "variant", "hovered"),
+                    color: foreground(layer, "variant", "hovered"),
+                },
+            },
+            userMenuButton: {
+                buttonWidth: 20,
+                iconWidth: 12,
+                ...titlebarButton,
+            },
+            toggleContactsBadge: {
+                cornerRadius: 3,
+                padding: 2,
+                margin: { top: 3, left: 3 },
+                border: border(layer),
+                background: foreground(layer, "accent"),
+            },
+            shareButton: {
+                ...titlebarButton,
+            },
+        },
+
+        toolbar: {
+            height: 34,
+            background: background(colorScheme.highest),
+            border: border(colorScheme.highest, { bottom: true }),
+            itemSpacing: 8,
+            navButton: {
+                color: foreground(colorScheme.highest, "on"),
+                iconWidth: 12,
+                buttonWidth: 24,
+                cornerRadius: 6,
+                hover: {
+                    color: foreground(colorScheme.highest, "on", "hovered"),
+                    background: background(
+                        colorScheme.highest,
+                        "on",
+                        "hovered"
+                    ),
+                },
+                disabled: {
+                    color: foreground(colorScheme.highest, "on", "disabled"),
+                },
+            },
+            padding: { left: 8, right: 8, top: 4, bottom: 4 },
+        },
+        breadcrumbs: {
+            ...text(layer, "mono", "variant"),
+            padding: { left: 6 },
+        },
+        disconnectedOverlay: {
+            ...text(layer, "sans"),
+            background: withOpacity(background(layer), 0.8),
+        },
+        notification: {
+            margin: { top: 10 },
+            background: background(colorScheme.middle),
+            cornerRadius: 6,
+            padding: 12,
+            border: border(colorScheme.middle),
+            shadow: colorScheme.popoverShadow,
+        },
+        notifications: {
+            width: 400,
+            margin: { right: 10, bottom: 10 },
+        },
+        dock: {
+            initialSizeRight: 640,
+            initialSizeBottom: 480,
+            wash_color: withOpacity(background(colorScheme.highest), 0.5),
+            panel: {
+                border: border(colorScheme.middle),
+            },
+            maximized: {
+                margin: 32,
+                border: border(colorScheme.highest, { overlay: true }),
+                shadow: colorScheme.modalShadow,
+            },
+        },
+        dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
+    }
 }