Format `styles` with updated prettier config

Nate Butler created 2 years ago

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.

Change summary

styles/src/buildLicenses.ts                       | 112 +-
styles/src/buildThemes.ts                         |  72 +-
styles/src/colorSchemes.ts                        |  74 +-
styles/src/common.ts                              |  74 +-
styles/src/styleTree/app.ts                       | 138 ++--
styles/src/styleTree/commandPalette.ts            |  54 
styles/src/styleTree/components.ts                | 318 ++++----
styles/src/styleTree/contactFinder.ts             | 126 +-
styles/src/styleTree/contactList.ts               | 356 +++++-----
styles/src/styleTree/contactNotification.ts       |  82 +-
styles/src/styleTree/contactsPopover.ts           |  52 
styles/src/styleTree/contextMenu.ts               |  79 +-
styles/src/styleTree/editor.ts                    | 561 ++++++++--------
styles/src/styleTree/feedback.ts                  |  65 -
styles/src/styleTree/hoverPopover.ts              |  82 +-
styles/src/styleTree/incomingCallNotification.ts  |  94 +-
styles/src/styleTree/picker.ts                    | 146 ++--
styles/src/styleTree/projectDiagnostics.ts        |  20 
styles/src/styleTree/projectPanel.ts              | 110 +-
styles/src/styleTree/projectSharedNotification.ts |  94 +-
styles/src/styleTree/search.ts                    | 178 ++--
styles/src/styleTree/sharedScreen.ts              |  12 
styles/src/styleTree/simpleMessageNotification.ts |  58 
styles/src/styleTree/statusBar.ts                 | 214 +++---
styles/src/styleTree/tabBar.ts                    | 180 ++--
styles/src/styleTree/terminal.ts                  |  94 +-
styles/src/styleTree/tooltip.ts                   |  40 
styles/src/styleTree/updateNotification.ts        |  54 
styles/src/styleTree/workspace.ts                 | 496 +++++++-------
styles/src/themes/andromeda.ts                    |  72 +-
styles/src/themes/atelier-cave.ts                 | 112 +-
styles/src/themes/atelier-sulphurpool.ts          |  73 +-
styles/src/themes/common/base16.ts                | 553 ++++++++--------
styles/src/themes/common/colorScheme.ts           | 120 +-
styles/src/themes/common/ramps.ts                 | 356 +++++-----
styles/src/themes/common/theme.ts                 | 288 ++++----
styles/src/themes/one-dark.ts                     |  68 +-
styles/src/themes/one-light.ts                    |  67 +
styles/src/themes/rose-pine-dawn.ts               |  72 +-
styles/src/themes/rose-pine-moon.ts               |  72 +-
styles/src/themes/rose-pine.ts                    |  68 +-
styles/src/themes/sandcastle.ts                   |  67 +-
styles/src/themes/solarized.ts                    |  73 +-
styles/src/themes/staff/abruzzo.ts                |  52 
styles/src/themes/staff/atelier-dune.ts           |  59 
styles/src/themes/staff/atelier-heath.ts          |  93 +-
styles/src/themes/staff/atelier-seaside.ts        |  59 
styles/src/themes/staff/ayu-mirage.ts             |  52 
styles/src/themes/staff/ayu.ts                    |  90 +-
styles/src/themes/staff/brushtrees.ts             | 128 +-
styles/src/themes/staff/dracula.ts                |  54 
styles/src/themes/staff/gruvbox-medium.ts         | 264 ++++----
styles/src/themes/staff/monokai.ts                |  54 
styles/src/themes/staff/nord.ts                   |  54 
styles/src/themes/staff/seti-ui.ts                |  54 
styles/src/themes/staff/tokyo-night-storm.ts      |  54 
styles/src/themes/staff/tokyo-night.ts            |  92 +-
styles/src/themes/staff/zed-pro.ts                |  58 
styles/src/themes/staff/zenburn.ts                |  54 
styles/src/themes/summercamp.ts                   |  72 +-
styles/src/utils/color.ts                         |   4 
styles/src/utils/snakeCase.ts                     |  38 
styles/tsconfig.json                              |  20 
63 files changed, 3,781 insertions(+), 3,720 deletions(-)

Detailed changes

styles/src/buildLicenses.ts

@@ -1,73 +1,87 @@
-import * as fs from "fs";
-import toml from "toml";
-import {
-  schemeMeta
-} from "./colorSchemes";
-import { Meta } from "./themes/common/colorScheme";
-import https from "https";
-import crypto from "crypto";
+import * as fs from "fs"
+import toml from "toml"
+import { schemeMeta } from "./colorSchemes"
+import { Meta } from "./themes/common/colorScheme"
+import https from "https"
+import crypto from "crypto"
 
 const accepted_licenses_file = `${__dirname}/../../script/licenses/zed-licenses.toml`
 
 // Use the cargo-about configuration file as the source of truth for supported licenses.
 function parseAcceptedToml(file: string): string[] {
-  let buffer = fs.readFileSync(file).toString();
+    let buffer = fs.readFileSync(file).toString()
 
-  let obj = toml.parse(buffer);
+    let obj = toml.parse(buffer)
 
-  if (!Array.isArray(obj.accepted)) {
-    throw Error("Accepted license source is malformed")
-  }
+    if (!Array.isArray(obj.accepted)) {
+        throw Error("Accepted license source is malformed")
+    }
 
-  return obj.accepted
+    return obj.accepted
 }
 
-
 function checkLicenses(schemeMeta: Meta[], licenses: string[]) {
-  for (let meta of schemeMeta) {
-    // FIXME: Add support for conjuctions and conditions
-    if (licenses.indexOf(meta.license.SPDX) < 0) {
-      throw Error(`License for theme ${meta.name} (${meta.license.SPDX}) is not supported`)
+    for (let meta of schemeMeta) {
+        // FIXME: Add support for conjuctions and conditions
+        if (licenses.indexOf(meta.license.SPDX) < 0) {
+            throw Error(
+                `License for theme ${meta.name} (${meta.license.SPDX}) is not supported`
+            )
+        }
     }
-  }
 }
 
+function getLicenseText(
+    schemeMeta: Meta[],
+    callback: (meta: Meta, license_text: string) => void
+) {
+    for (let meta of schemeMeta) {
+        // The following copied from the example code on nodejs.org:
+        // https://nodejs.org/api/http.html#httpgetoptions-callback
+        https
+            .get(meta.license.https_url, (res) => {
+                const { statusCode } = res
 
-function getLicenseText(schemeMeta: Meta[], callback: (meta: Meta, license_text: string) => void) {
-  for (let meta of schemeMeta) {
-    // The following copied from the example code on nodejs.org: 
-    // https://nodejs.org/api/http.html#httpgetoptions-callback
-    https.get(meta.license.https_url, (res) => {
-      const { statusCode } = res;
+                if (statusCode < 200 || statusCode >= 300) {
+                    throw new Error(
+                        `Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`
+                    )
+                }
 
-      if (statusCode < 200 || statusCode >= 300) {
-        throw new Error(`Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`);
-      }
-
-      res.setEncoding('utf8');
-      let rawData = '';
-      res.on('data', (chunk) => { rawData += chunk; });
-      res.on('end', () => {
-        const hash = crypto.createHash('sha256').update(rawData).digest('hex');
-        if (meta.license.license_checksum == hash) {
-          callback(meta, rawData)
-        } else {
-          throw Error(`Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`)
-        }
-      });
-    }).on('error', (e) => {
-      throw e
-    });
-  }
+                res.setEncoding("utf8")
+                let rawData = ""
+                res.on("data", (chunk) => {
+                    rawData += chunk
+                })
+                res.on("end", () => {
+                    const hash = crypto
+                        .createHash("sha256")
+                        .update(rawData)
+                        .digest("hex")
+                    if (meta.license.license_checksum == hash) {
+                        callback(meta, rawData)
+                    } else {
+                        throw Error(
+                            `Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`
+                        )
+                    }
+                })
+            })
+            .on("error", (e) => {
+                throw e
+            })
+    }
 }
 
 function writeLicense(schemeMeta: Meta, text: String) {
-  process.stdout.write(`## [${schemeMeta.name}](${schemeMeta.url})\n\n${text}\n********************************************************************************\n\n`)
+    process.stdout.write(
+        `## [${schemeMeta.name}](${schemeMeta.url})\n\n${text}\n********************************************************************************\n\n`
+    )
 }
 
-const accepted_licenses = parseAcceptedToml(accepted_licenses_file);
+const accepted_licenses = parseAcceptedToml(accepted_licenses_file)
 checkLicenses(schemeMeta, accepted_licenses)
 
 getLicenseText(schemeMeta, (meta, text) => {
-  writeLicense(meta, text)
-});
+    writeLicense(meta, text)
+})

styles/src/buildThemes.ts

@@ -1,50 +1,52 @@
-import * as fs from "fs";
-import { tmpdir } from "os";
-import * as path from "path";
-import colorSchemes, {
-  staffColorSchemes,
-} from "./colorSchemes";
-import app from "./styleTree/app";
-import { ColorScheme } from "./themes/common/colorScheme";
-import snakeCase from "./utils/snakeCase";
+import * as fs from "fs"
+import { tmpdir } from "os"
+import * as path from "path"
+import colorSchemes, { staffColorSchemes } from "./colorSchemes"
+import app from "./styleTree/app"
+import { ColorScheme } from "./themes/common/colorScheme"
+import snakeCase from "./utils/snakeCase"
 
 const assetsDirectory = `${__dirname}/../../assets`
-const themeDirectory = `${assetsDirectory}/themes`;
-const staffDirectory = `${themeDirectory}/staff`;
+const themeDirectory = `${assetsDirectory}/themes`
+const staffDirectory = `${themeDirectory}/staff`
 
-const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"));
+const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
 
 // Clear existing themes
 function clearThemes(themeDirectory: string) {
-  if (!fs.existsSync(themeDirectory)) {
-    fs.mkdirSync(themeDirectory, { recursive: true });
-  } else {
-    for (const file of fs.readdirSync(themeDirectory)) {
-      if (file.endsWith(".json")) {
-        const name = file.replace(/\.json$/, "");
-        if (!colorSchemes.find((colorScheme) => colorScheme.name === name)) {
-          fs.unlinkSync(path.join(themeDirectory, file));
+    if (!fs.existsSync(themeDirectory)) {
+        fs.mkdirSync(themeDirectory, { recursive: true })
+    } else {
+        for (const file of fs.readdirSync(themeDirectory)) {
+            if (file.endsWith(".json")) {
+                const name = file.replace(/\.json$/, "")
+                if (
+                    !colorSchemes.find(
+                        (colorScheme) => colorScheme.name === name
+                    )
+                ) {
+                    fs.unlinkSync(path.join(themeDirectory, file))
+                }
+            }
         }
-      }
     }
-  }
 }
 
-clearThemes(themeDirectory);
-clearThemes(staffDirectory);
+clearThemes(themeDirectory)
+clearThemes(staffDirectory)
 
 function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
-  for (let colorScheme of colorSchemes) {
-    let styleTree = snakeCase(app(colorScheme));
-    let styleTreeJSON = JSON.stringify(styleTree, null, 2);
-    let tempPath = path.join(tempDirectory, `${colorScheme.name}.json`);
-    let outPath = path.join(outputDirectory, `${colorScheme.name}.json`);
-    fs.writeFileSync(tempPath, styleTreeJSON);
-    fs.renameSync(tempPath, outPath);
-    console.log(`- ${outPath} created`);
-  }
+    for (let colorScheme of colorSchemes) {
+        let styleTree = snakeCase(app(colorScheme))
+        let styleTreeJSON = JSON.stringify(styleTree, null, 2)
+        let tempPath = path.join(tempDirectory, `${colorScheme.name}.json`)
+        let outPath = path.join(outputDirectory, `${colorScheme.name}.json`)
+        fs.writeFileSync(tempPath, styleTreeJSON)
+        fs.renameSync(tempPath, outPath)
+        console.log(`- ${outPath} created`)
+    }
 }
 
 // Write new themes to theme directory
-writeThemes(colorSchemes, themeDirectory);
-writeThemes(staffColorSchemes, staffDirectory);
+writeThemes(colorSchemes, themeDirectory)
+writeThemes(staffColorSchemes, staffDirectory)

styles/src/colorSchemes.ts

@@ -1,54 +1,54 @@
-import fs from "fs";
-import path from "path";
-import { ColorScheme, Meta } from "./themes/common/colorScheme";
+import fs from "fs"
+import path from "path"
+import { ColorScheme, Meta } from "./themes/common/colorScheme"
 
-const colorSchemes: ColorScheme[] = [];
-export default colorSchemes;
+const colorSchemes: ColorScheme[] = []
+export default colorSchemes
 
-const schemeMeta: Meta[] = [];
-export { schemeMeta };
+const schemeMeta: Meta[] = []
+export { schemeMeta }
 
-const staffColorSchemes: ColorScheme[] = [];
-export { staffColorSchemes };
+const staffColorSchemes: ColorScheme[] = []
+export { staffColorSchemes }
 
-const experimentalColorSchemes: ColorScheme[] = [];
-export { experimentalColorSchemes };
+const experimentalColorSchemes: ColorScheme[] = []
+export { experimentalColorSchemes }
 
-const themes_directory = path.resolve(`${__dirname}/themes`);
+const themes_directory = path.resolve(`${__dirname}/themes`)
 
-function for_all_color_schemes_in(themesPath: string, callback: (module: any, path: string) => void) {
-  for (const fileName of fs.readdirSync(themesPath)) {
-    if (fileName == "template.ts") continue;
-    const filePath = path.join(themesPath, fileName);
+function for_all_color_schemes_in(
+    themesPath: string,
+    callback: (module: any, path: string) => void
+) {
+    for (const fileName of fs.readdirSync(themesPath)) {
+        if (fileName == "template.ts") continue
+        const filePath = path.join(themesPath, fileName)
 
-    if (fs.statSync(filePath).isFile()) {
-      const colorScheme = require(filePath);
-      callback(colorScheme, path.basename(filePath));
+        if (fs.statSync(filePath).isFile()) {
+            const colorScheme = require(filePath)
+            callback(colorScheme, path.basename(filePath))
+        }
     }
-  }
 }
 
 function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
-  for_all_color_schemes_in(themesPath, (colorScheme, _path) => {
-    if (colorScheme.dark) colorSchemes.push(colorScheme.dark);
-    if (colorScheme.light) colorSchemes.push(colorScheme.light);
-  })
+    for_all_color_schemes_in(themesPath, (colorScheme, _path) => {
+        if (colorScheme.dark) colorSchemes.push(colorScheme.dark)
+        if (colorScheme.light) colorSchemes.push(colorScheme.light)
+    })
 }
 
-fillColorSchemes(themes_directory, colorSchemes);
-fillColorSchemes(
-  path.resolve(`${themes_directory}/staff`),
-  staffColorSchemes
-);
+fillColorSchemes(themes_directory, colorSchemes)
+fillColorSchemes(path.resolve(`${themes_directory}/staff`), staffColorSchemes)
 
 function fillMeta(themesPath: string, meta: Meta[]) {
-  for_all_color_schemes_in(themesPath, (colorScheme, path) => {
-    if (colorScheme.meta) {
-      meta.push(colorScheme.meta)
-    } else {
-      throw Error(`Public theme ${path} must have a meta field`)
-    }
-  })
+    for_all_color_schemes_in(themesPath, (colorScheme, path) => {
+        if (colorScheme.meta) {
+            meta.push(colorScheme.meta)
+        } else {
+            throw Error(`Public theme ${path} must have a meta field`)
+        }
+    })
 }
 
-fillMeta(themes_directory, schemeMeta);
+fillMeta(themes_directory, schemeMeta)

styles/src/common.ts

@@ -1,45 +1,45 @@
 export const fontFamilies = {
-  sans: "Zed Sans",
-  mono: "Zed Mono",
-};
+    sans: "Zed Sans",
+    mono: "Zed Mono",
+}
 
 export const fontSizes = {
-  "3xs": 8,
-  "2xs": 10,
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20,
-};
+    "3xs": 8,
+    "2xs": 10,
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+}
 
 export type FontWeight =
-  | "thin"
-  | "extra_light"
-  | "light"
-  | "normal"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "extra_bold"
-  | "black";
+    | "thin"
+    | "extra_light"
+    | "light"
+    | "normal"
+    | "medium"
+    | "semibold"
+    | "bold"
+    | "extra_bold"
+    | "black"
 export const fontWeights: { [key: string]: FontWeight } = {
-  thin: "thin",
-  extra_light: "extra_light",
-  light: "light",
-  normal: "normal",
-  medium: "medium",
-  semibold: "semibold",
-  bold: "bold",
-  extra_bold: "extra_bold",
-  black: "black",
-};
+    thin: "thin",
+    extra_light: "extra_light",
+    light: "light",
+    normal: "normal",
+    medium: "medium",
+    semibold: "semibold",
+    bold: "bold",
+    extra_bold: "extra_bold",
+    black: "black",
+}
 
 export const sizes = {
-  px: 1,
-  xs: 2,
-  sm: 4,
-  md: 6,
-  lg: 8,
-  xl: 12,
-};
+    px: 1,
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+}

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;
-  }
-
-  if (isStyle(possibleStyle)) {
-    style = possibleStyle;
-  }
-
-  return layer[styleSet][style];
+    let styleSet: StyleSets = "base"
+    let style: Styles = "default"
+    if (isStyleSet(possibleStyleSetOrStyle)) {
+        styleSet = possibleStyleSetOrStyle
+    } else if (isStyle(possibleStyleSetOrStyle)) {
+        style = possibleStyleSetOrStyle
+    }
+
+    if (isStyle(possibleStyle)) {
+        style = possibleStyle
+    }
+
+    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);
-
-  if (typeof styleSetStyleOrProperties === "object") {
-    properties = styleSetStyleOrProperties;
-  }
-  if (typeof styleOrProperties === "object") {
-    properties = styleOrProperties;
-  }
-
-  let size = fontSizes[properties?.size || "sm"];
-  let color = properties?.color || style.foreground;
-
-  return {
-    family: fontFamilies[fontFamily],
-    ...properties,
-    color,
-    size,
-  };
+    let style = getStyle(layer, styleSetStyleOrProperties, 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
+
+    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);
-
-  if (typeof styleSetStyleOrProperties === "object") {
-    properties = styleSetStyleOrProperties;
-  }
-  if (typeof styleOrProperties === "object") {
-    properties = styleOrProperties;
-  }
-
-  return {
-    color: style.border,
-    width: 1,
-    ...properties,
-  };
+    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+
+    if (typeof styleSetStyleOrProperties === "object") {
+        properties = styleSetStyleOrProperties
+    }
+    if (typeof styleOrProperties === "object") {
+        properties = styleOrProperties
+    }
+
+    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 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 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"),
-    },
-  };
+    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",
-        }),
-      },
-    };
-  }
+    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,
-    },
-  };
+    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,
-        },
-      },
-      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,
-  };
+    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,
+                },
+            },
+            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 },
-  };
+    const statusContainer = {
+        cornerRadius: 6,
+        padding: { top: 3, bottom: 3, 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 diagnosticStatusContainer = {
         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: 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),
+            },
         },
-        containerWarning: {
-          ...diagnosticStatusContainer,
-          background: background(layer, "warning", "hovered"),
-          border: border(layer, "warning", "hovered"),
+        diagnosticMessage: {
+            ...text(layer, "sans"),
+            hover: text(layer, "sans", "hovered"),
         },
-        containerError: {
-          ...diagnosticStatusContainer,
-          background: background(layer, "negative", "hovered"),
-          border: border(layer, "negative", "hovered"),
+        feedback: {
+            ...text(layer, "sans", "variant"),
+            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"),
+        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"),
+                },
+            },
         },
-        active: {
-          iconColor: foreground(layer, "active"),
-          background: background(layer, "active"),
+        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"),
+            },
         },
-      },
-      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,
-        },
+    const layer = colorScheme.lowest
+    const itemSpacing = 8
+    const titlebarButton = {
+        cornerRadius: 6,
         padding: {
-          left: 2,
-          right: 2,
-          top: 4,
-          bottom: 4,
+            top: 1,
+            bottom: 1,
+            left: 8,
+            right: 8,
         },
-        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,
+        ...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"),
         },
-        padding: {
-          right: 4,
+        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
 
-      // 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,
+    return {
+        background: background(layer),
+        joiningProjectAvatar: {
+            cornerRadius: 40,
+            width: 80,
         },
-        padding: {
-          left: 8,
-          right: 8,
+        joiningProjectMessage: {
+            padding: 12,
+            ...text(layer, "sans", { size: "lg" }),
         },
-        cornerRadius: 6,
-      },
-      callControl: {
-        cornerRadius: 6,
-        color: foreground(layer, "variant"),
-        iconWidth: 12,
-        buttonWidth: 20,
-        hover: {
-          background: background(layer, "variant", "hovered"),
-          color: foreground(layer, "variant", "hovered"),
+        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" }),
         },
-      },
-      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"),
+        leaderBorderOpacity: 0.7,
+        leaderBorderWidth: 2.0,
+        tabBar: tabBar(colorScheme),
+        modal: {
+            margin: {
+                bottom: 52,
+                top: 52,
+            },
+            cursor: "Arrow",
         },
-        clicked: {
-          background: background(layer, "variant", "pressed"),
-          color: foreground(layer, "variant", "pressed"),
+        sidebar: {
+            initialSize: 240,
+            border: border(layer, { left: true, right: true }),
         },
-        hover: {
-          background: background(layer, "variant", "hovered"),
-          color: foreground(layer, "variant", "hovered"),
+        paneDivider: {
+            color: borderColor(layer),
+            width: 1,
         },
-      },
-      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,
-      },
-    },
+        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,
+            },
 
-    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"),
+            // 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 },
         },
-        disabled: {
-          color: foreground(colorScheme.highest, "on", "disabled"),
+        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,
+            },
         },
-      },
-      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),
-  };
+        dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
+    }
 }

styles/src/themes/andromeda.ts

@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Andromeda";
+const name = "Andromeda"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#1E2025",
-      "#23262E",
-      "#292E38",
-      "#2E323C",
-      "#ACA8AE",
-      "#CBC9CF",
-      "#E1DDE4",
-      "#F7F7F8",
-    ])
-    .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
-  red: colorRamp(chroma("#F92672")),
-  orange: colorRamp(chroma("#F39C12")),
-  yellow: colorRamp(chroma("#FFE66D")),
-  green: colorRamp(chroma("#96E072")),
-  cyan: colorRamp(chroma("#00E8C6")),
-  blue: colorRamp(chroma("#0CA793")),
-  violet: colorRamp(chroma("#8A3FA6")),
-  magenta: colorRamp(chroma("#C74DED")),
-};
+    neutral: chroma
+        .scale([
+            "#1E2025",
+            "#23262E",
+            "#292E38",
+            "#2E323C",
+            "#ACA8AE",
+            "#CBC9CF",
+            "#E1DDE4",
+            "#F7F7F8",
+        ])
+        .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
+    red: colorRamp(chroma("#F92672")),
+    orange: colorRamp(chroma("#F39C12")),
+    yellow: colorRamp(chroma("#FFE66D")),
+    green: colorRamp(chroma("#96E072")),
+    cyan: colorRamp(chroma("#00E8C6")),
+    blue: colorRamp(chroma("#0CA793")),
+    violet: colorRamp(chroma("#8A3FA6")),
+    magenta: colorRamp(chroma("#C74DED")),
+}
 
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "EliverLara",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
-    license_checksum: "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89"
-  },
-  url: "https://github.com/EliverLara/Andromeda"
-}
+    name,
+    author: "EliverLara",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
+        license_checksum:
+            "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89",
+    },
+    url: "https://github.com/EliverLara/Andromeda",
+}

styles/src/themes/atelier-cave.ts

@@ -1,63 +1,63 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Atelier Cave";
+const name = "Atelier Cave"
 
 export const dark = createColorScheme(`${name} Dark`, false, {
-  neutral: chroma
-    .scale([
-      "#19171c",
-      "#26232a",
-      "#585260",
-      "#655f6d",
-      "#7e7887",
-      "#8b8792",
-      "#e2dfe7",
-      "#efecf4",
-    ])
-    .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
-  red: colorRamp(chroma("#be4678")),
-  orange: colorRamp(chroma("#aa573c")),
-  yellow: colorRamp(chroma("#a06e3b")),
-  green: colorRamp(chroma("#2a9292")),
-  cyan: colorRamp(chroma("#398bc6")),
-  blue: colorRamp(chroma("#576ddb")),
-  violet: colorRamp(chroma("#955ae7")),
-  magenta: colorRamp(chroma("#bf40bf")),
-});
+    neutral: chroma
+        .scale([
+            "#19171c",
+            "#26232a",
+            "#585260",
+            "#655f6d",
+            "#7e7887",
+            "#8b8792",
+            "#e2dfe7",
+            "#efecf4",
+        ])
+        .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
+    red: colorRamp(chroma("#be4678")),
+    orange: colorRamp(chroma("#aa573c")),
+    yellow: colorRamp(chroma("#a06e3b")),
+    green: colorRamp(chroma("#2a9292")),
+    cyan: colorRamp(chroma("#398bc6")),
+    blue: colorRamp(chroma("#576ddb")),
+    violet: colorRamp(chroma("#955ae7")),
+    magenta: colorRamp(chroma("#bf40bf")),
+})
 
 export const light = createColorScheme(`${name} Light`, true, {
-  neutral: chroma
-    .scale([
-      "#19171c",
-      "#26232a",
-      "#585260",
-      "#655f6d",
-      "#7e7887",
-      "#8b8792",
-      "#e2dfe7",
-      "#efecf4",
-    ])
-    .correctLightness(),
-  red: colorRamp(chroma("#be4678")),
-  orange: colorRamp(chroma("#aa573c")),
-  yellow: colorRamp(chroma("#a06e3b")),
-  green: colorRamp(chroma("#2a9292")),
-  cyan: colorRamp(chroma("#398bc6")),
-  blue: colorRamp(chroma("#576ddb")),
-  violet: colorRamp(chroma("#955ae7")),
-  magenta: colorRamp(chroma("#bf40bf")),
-});
-
+    neutral: chroma
+        .scale([
+            "#19171c",
+            "#26232a",
+            "#585260",
+            "#655f6d",
+            "#7e7887",
+            "#8b8792",
+            "#e2dfe7",
+            "#efecf4",
+        ])
+        .correctLightness(),
+    red: colorRamp(chroma("#be4678")),
+    orange: colorRamp(chroma("#aa573c")),
+    yellow: colorRamp(chroma("#a06e3b")),
+    green: colorRamp(chroma("#2a9292")),
+    cyan: colorRamp(chroma("#398bc6")),
+    blue: colorRamp(chroma("#576ddb")),
+    violet: colorRamp(chroma("#955ae7")),
+    magenta: colorRamp(chroma("#bf40bf")),
+})
 
 export const meta: Meta = {
-  name,
-  author: "atelierbram",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://atelierbram.mit-license.org/license.txt",
-    license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
-  },
-  url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/"
-}
+    name,
+    author: "atelierbram",
+    license: {
+        SPDX: "MIT",
+        https_url: "https://atelierbram.mit-license.org/license.txt",
+        license_checksum:
+            "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
+    },
+    url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
+}

styles/src/themes/atelier-sulphurpool.ts

@@ -1,42 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Atelier Sulphurpool";
+const name = "Atelier Sulphurpool"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#202746",
-      "#293256",
-      "#5e6687",
-      "#6b7394",
-      "#898ea4",
-      "#979db4",
-      "#dfe2f1",
-      "#f5f7ff",
-    ])
-    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
-  red: colorRamp(chroma("#c94922")),
-  orange: colorRamp(chroma("#c76b29")),
-  yellow: colorRamp(chroma("#c08b30")),
-  green: colorRamp(chroma("#ac9739")),
-  cyan: colorRamp(chroma("#22a2c9")),
-  blue: colorRamp(chroma("#3d8fd1")),
-  violet: colorRamp(chroma("#6679cc")),
-  magenta: colorRamp(chroma("#9c637a")),
-};
+    neutral: chroma
+        .scale([
+            "#202746",
+            "#293256",
+            "#5e6687",
+            "#6b7394",
+            "#898ea4",
+            "#979db4",
+            "#dfe2f1",
+            "#f5f7ff",
+        ])
+        .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
+    red: colorRamp(chroma("#c94922")),
+    orange: colorRamp(chroma("#c76b29")),
+    yellow: colorRamp(chroma("#c08b30")),
+    green: colorRamp(chroma("#ac9739")),
+    cyan: colorRamp(chroma("#22a2c9")),
+    blue: colorRamp(chroma("#3d8fd1")),
+    violet: colorRamp(chroma("#6679cc")),
+    magenta: colorRamp(chroma("#9c637a")),
+}
 
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "atelierbram",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://atelierbram.mit-license.org/license.txt",
-    license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
-  },
-  url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/"
-}
+    name,
+    author: "atelierbram",
+    license: {
+        SPDX: "MIT",
+        https_url: "https://atelierbram.mit-license.org/license.txt",
+        license_checksum:
+            "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
+    },
+    url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
+}

styles/src/themes/common/base16.ts

@@ -1,296 +1,299 @@
 // NOTE – This should be removed
 // I (Nate) need to come back and check if we are still using this anywhere
 
-import chroma, { Color, Scale } from "chroma-js";
-import { fontWeights } from "../../common";
-import { withOpacity } from "../../utils/color";
-import Theme, { buildPlayer, Syntax } from "./theme";
+import chroma, { Color, Scale } from "chroma-js"
+import { fontWeights } from "../../common"
+import { withOpacity } from "../../utils/color"
+import Theme, { buildPlayer, Syntax } from "./theme"
 
 export function colorRamp(color: Color): Scale {
-  let hue = color.hsl()[0];
-  let endColor = chroma.hsl(hue, 0.88, 0.96);
-  let startColor = chroma.hsl(hue, 0.68, 0.12);
-  return chroma.scale([startColor, color, endColor]).mode("hsl");
+    let hue = color.hsl()[0]
+    let endColor = chroma.hsl(hue, 0.88, 0.96)
+    let startColor = chroma.hsl(hue, 0.68, 0.12)
+    return chroma.scale([startColor, color, endColor]).mode("hsl")
 }
 
 export function createTheme(
-  name: string,
-  isLight: boolean,
-  color_ramps: { [rampName: string]: Scale }
+    name: string,
+    isLight: boolean,
+    color_ramps: { [rampName: string]: Scale }
 ): Theme {
-  let ramps: typeof color_ramps = {};
-  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-  // we now store the ramps object in the theme so that we can pull colors out of them.
-  // So instead of calling domain and storing the result, we have to construct new ramps for each
-  // theme so that we don't modify the passed in ramps.
-  // This combined with an error in the type definitions for chroma js means we have to cast the colors
-  // function to any in order to get the colors back out from the original ramps.
-  if (isLight) {
-    for (var rampName in color_ramps) {
-      ramps[rampName] = chroma
-        .scale((color_ramps[rampName].colors as any)())
-        .domain([1, 0]);
+    let ramps: typeof color_ramps = {}
+    // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+    // we now store the ramps object in the theme so that we can pull colors out of them.
+    // So instead of calling domain and storing the result, we have to construct new ramps for each
+    // theme so that we don't modify the passed in ramps.
+    // This combined with an error in the type definitions for chroma js means we have to cast the colors
+    // function to any in order to get the colors back out from the original ramps.
+    if (isLight) {
+        for (var rampName in color_ramps) {
+            ramps[rampName] = chroma
+                .scale((color_ramps[rampName].colors as any)())
+                .domain([1, 0])
+        }
+        ramps.neutral = chroma
+            .scale((color_ramps.neutral.colors as any)())
+            .domain([7, 0])
+    } else {
+        for (var rampName in color_ramps) {
+            ramps[rampName] = chroma
+                .scale((color_ramps[rampName].colors as any)())
+                .domain([0, 1])
+        }
+        ramps.neutral = chroma
+            .scale((color_ramps.neutral.colors as any)())
+            .domain([0, 7])
     }
-    ramps.neutral = chroma
-      .scale((color_ramps.neutral.colors as any)())
-      .domain([7, 0]);
-  } else {
-    for (var rampName in color_ramps) {
-      ramps[rampName] = chroma
-        .scale((color_ramps[rampName].colors as any)())
-        .domain([0, 1]);
-    }
-    ramps.neutral = chroma
-      .scale((color_ramps.neutral.colors as any)())
-      .domain([0, 7]);
-  }
 
-  let blend = isLight ? 0.12 : 0.24;
+    let blend = isLight ? 0.12 : 0.24
 
-  function sample(ramp: Scale, index: number): string {
-    return ramp(index).hex();
-  }
-  const darkest = ramps.neutral(isLight ? 7 : 0).hex();
+    function sample(ramp: Scale, index: number): string {
+        return ramp(index).hex()
+    }
+    const darkest = ramps.neutral(isLight ? 7 : 0).hex()
 
-  const backgroundColor = {
-    // Title bar
-    100: {
-      base: sample(ramps.neutral, 1.25),
-      hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 1.75),
-    },
-    // Midground (panels, etc)
-    300: {
-      base: sample(ramps.neutral, 1),
-      hovered: sample(ramps.neutral, 1.25),
-      active: sample(ramps.neutral, 1.5),
-    },
-    // Editor
-    500: {
-      base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.25),
-      active: sample(ramps.neutral, 0.5),
-    },
-    on300: {
-      base: sample(ramps.neutral, 0),
-      hovered: sample(ramps.neutral, 0.5),
-      active: sample(ramps.neutral, 1),
-    },
-    on500: {
-      base: sample(ramps.neutral, 1),
-      hovered: sample(ramps.neutral, 1.5),
-      active: sample(ramps.neutral, 2),
-    },
-    ok: {
-      base: withOpacity(sample(ramps.green, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
-      active: withOpacity(sample(ramps.green, 0.5), 0.25),
-    },
-    error: {
-      base: withOpacity(sample(ramps.red, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
-      active: withOpacity(sample(ramps.red, 0.5), 0.25),
-    },
-    on500Error: {
-      base: sample(ramps.red, 0.05),
-      hovered: sample(ramps.red, 0.1),
-      active: sample(ramps.red, 0.15),
-    },
-    warning: {
-      base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
-      active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
-    },
-    on500Warning: {
-      base: sample(ramps.yellow, 0.05),
-      hovered: sample(ramps.yellow, 0.1),
-      active: sample(ramps.yellow, 0.15),
-    },
-    info: {
-      base: withOpacity(sample(ramps.blue, 0.5), 0.15),
-      hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
-      active: withOpacity(sample(ramps.blue, 0.5), 0.25),
-    },
-    on500Info: {
-      base: sample(ramps.blue, 0.05),
-      hovered: sample(ramps.blue, 0.1),
-      active: sample(ramps.blue, 0.15),
-    },
-    on500Ok: {
-      base: sample(ramps.green, 0.05),
-      hovered: sample(ramps.green, 0.1),
-      active: sample(ramps.green, 0.15),
-    },
-  };
+    const backgroundColor = {
+        // Title bar
+        100: {
+            base: sample(ramps.neutral, 1.25),
+            hovered: sample(ramps.neutral, 1.5),
+            active: sample(ramps.neutral, 1.75),
+        },
+        // Midground (panels, etc)
+        300: {
+            base: sample(ramps.neutral, 1),
+            hovered: sample(ramps.neutral, 1.25),
+            active: sample(ramps.neutral, 1.5),
+        },
+        // Editor
+        500: {
+            base: sample(ramps.neutral, 0),
+            hovered: sample(ramps.neutral, 0.25),
+            active: sample(ramps.neutral, 0.5),
+        },
+        on300: {
+            base: sample(ramps.neutral, 0),
+            hovered: sample(ramps.neutral, 0.5),
+            active: sample(ramps.neutral, 1),
+        },
+        on500: {
+            base: sample(ramps.neutral, 1),
+            hovered: sample(ramps.neutral, 1.5),
+            active: sample(ramps.neutral, 2),
+        },
+        ok: {
+            base: withOpacity(sample(ramps.green, 0.5), 0.15),
+            hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
+            active: withOpacity(sample(ramps.green, 0.5), 0.25),
+        },
+        error: {
+            base: withOpacity(sample(ramps.red, 0.5), 0.15),
+            hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
+            active: withOpacity(sample(ramps.red, 0.5), 0.25),
+        },
+        on500Error: {
+            base: sample(ramps.red, 0.05),
+            hovered: sample(ramps.red, 0.1),
+            active: sample(ramps.red, 0.15),
+        },
+        warning: {
+            base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
+            hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
+            active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
+        },
+        on500Warning: {
+            base: sample(ramps.yellow, 0.05),
+            hovered: sample(ramps.yellow, 0.1),
+            active: sample(ramps.yellow, 0.15),
+        },
+        info: {
+            base: withOpacity(sample(ramps.blue, 0.5), 0.15),
+            hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
+            active: withOpacity(sample(ramps.blue, 0.5), 0.25),
+        },
+        on500Info: {
+            base: sample(ramps.blue, 0.05),
+            hovered: sample(ramps.blue, 0.1),
+            active: sample(ramps.blue, 0.15),
+        },
+        on500Ok: {
+            base: sample(ramps.green, 0.05),
+            hovered: sample(ramps.green, 0.1),
+            active: sample(ramps.green, 0.15),
+        },
+    }
 
-  const borderColor = {
-    primary: sample(ramps.neutral, isLight ? 1.5 : 0),
-    secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
-    muted: sample(ramps.neutral, isLight ? 1.25 : 3),
-    active: sample(ramps.neutral, isLight ? 4 : 3),
-    onMedia: withOpacity(darkest, 0.1),
-    ok: sample(ramps.green, 0.3),
-    error: sample(ramps.red, 0.3),
-    warning: sample(ramps.yellow, 0.3),
-    info: sample(ramps.blue, 0.3),
-  };
+    const borderColor = {
+        primary: sample(ramps.neutral, isLight ? 1.5 : 0),
+        secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
+        muted: sample(ramps.neutral, isLight ? 1.25 : 3),
+        active: sample(ramps.neutral, isLight ? 4 : 3),
+        onMedia: withOpacity(darkest, 0.1),
+        ok: sample(ramps.green, 0.3),
+        error: sample(ramps.red, 0.3),
+        warning: sample(ramps.yellow, 0.3),
+        info: sample(ramps.blue, 0.3),
+    }
 
-  const textColor = {
-    primary: sample(ramps.neutral, 6),
-    secondary: sample(ramps.neutral, 5),
-    muted: sample(ramps.neutral, 4),
-    placeholder: sample(ramps.neutral, 3),
-    active: sample(ramps.neutral, 7),
-    feature: sample(ramps.blue, 0.5),
-    ok: sample(ramps.green, 0.5),
-    error: sample(ramps.red, 0.5),
-    warning: sample(ramps.yellow, 0.5),
-    info: sample(ramps.blue, 0.5),
-    onMedia: darkest,
-  };
+    const textColor = {
+        primary: sample(ramps.neutral, 6),
+        secondary: sample(ramps.neutral, 5),
+        muted: sample(ramps.neutral, 4),
+        placeholder: sample(ramps.neutral, 3),
+        active: sample(ramps.neutral, 7),
+        feature: sample(ramps.blue, 0.5),
+        ok: sample(ramps.green, 0.5),
+        error: sample(ramps.red, 0.5),
+        warning: sample(ramps.yellow, 0.5),
+        info: sample(ramps.blue, 0.5),
+        onMedia: darkest,
+    }
 
-  const player = {
-    1: buildPlayer(sample(ramps.blue, 0.5)),
-    2: buildPlayer(sample(ramps.green, 0.5)),
-    3: buildPlayer(sample(ramps.magenta, 0.5)),
-    4: buildPlayer(sample(ramps.orange, 0.5)),
-    5: buildPlayer(sample(ramps.violet, 0.5)),
-    6: buildPlayer(sample(ramps.cyan, 0.5)),
-    7: buildPlayer(sample(ramps.red, 0.5)),
-    8: buildPlayer(sample(ramps.yellow, 0.5)),
-  };
+    const player = {
+        1: buildPlayer(sample(ramps.blue, 0.5)),
+        2: buildPlayer(sample(ramps.green, 0.5)),
+        3: buildPlayer(sample(ramps.magenta, 0.5)),
+        4: buildPlayer(sample(ramps.orange, 0.5)),
+        5: buildPlayer(sample(ramps.violet, 0.5)),
+        6: buildPlayer(sample(ramps.cyan, 0.5)),
+        7: buildPlayer(sample(ramps.red, 0.5)),
+        8: buildPlayer(sample(ramps.yellow, 0.5)),
+    }
 
-  const editor = {
-    background: backgroundColor[500].base,
-    indent_guide: borderColor.muted,
-    indent_guide_active: borderColor.secondary,
-    line: {
-      active: sample(ramps.neutral, 1),
-      highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
-    },
-    highlight: {
-      selection: player[1].selectionColor,
-      occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
-      activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
-      matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
-      match: sample(ramps.violet, 0.15),
-      activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
-      related: backgroundColor[500].hovered,
-    },
-    gutter: {
-      primary: textColor.placeholder,
-      active: textColor.active,
-    },
-  };
+    const editor = {
+        background: backgroundColor[500].base,
+        indent_guide: borderColor.muted,
+        indent_guide_active: borderColor.secondary,
+        line: {
+            active: sample(ramps.neutral, 1),
+            highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
+        },
+        highlight: {
+            selection: player[1].selectionColor,
+            occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
+            activeOccurrence: withOpacity(
+                sample(ramps.neutral, 3.5),
+                blend * 2
+            ), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
+            matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
+            match: sample(ramps.violet, 0.15),
+            activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
+            related: backgroundColor[500].hovered,
+        },
+        gutter: {
+            primary: textColor.placeholder,
+            active: textColor.active,
+        },
+    }
 
-  const syntax: Syntax = {
-    primary: {
-      color: sample(ramps.neutral, 7),
-      weight: fontWeights.normal,
-    },
-    "variable.special": {
-      color: sample(ramps.blue, 0.8),
-      weight: fontWeights.normal,
-    },
-    comment: {
-      color: sample(ramps.neutral, 5),
-      weight: fontWeights.normal,
-    },
-    punctuation: {
-      color: sample(ramps.neutral, 6),
-      weight: fontWeights.normal,
-    },
-    constant: {
-      color: sample(ramps.neutral, 4),
-      weight: fontWeights.normal,
-    },
-    keyword: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    function: {
-      color: sample(ramps.yellow, 0.5),
-      weight: fontWeights.normal,
-    },
-    type: {
-      color: sample(ramps.cyan, 0.5),
-      weight: fontWeights.normal,
-    },
-    constructor: {
-      color: sample(ramps.cyan, 0.5),
-      weight: fontWeights.normal,
-    },
-    property: {
-      color: sample(ramps.blue, 0.6),
-      weight: fontWeights.normal,
-    },
-    enum: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    operator: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    string: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-    },
-    number: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-    },
-    boolean: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-    },
-    predictive: {
-      color: textColor.muted,
-      weight: fontWeights.normal,
-    },
-    title: {
-      color: sample(ramps.yellow, 0.5),
-      weight: fontWeights.bold,
-    },
-    emphasis: {
-      color: textColor.feature,
-      weight: fontWeights.normal,
-    },
-    "emphasis.strong": {
-      color: textColor.feature,
-      weight: fontWeights.bold,
-    },
-    linkUri: {
-      color: sample(ramps.green, 0.5),
-      weight: fontWeights.normal,
-      underline: true,
-    },
-    linkText: {
-      color: sample(ramps.orange, 0.5),
-      weight: fontWeights.normal,
-      italic: true,
-    },
-  };
+    const syntax: Syntax = {
+        primary: {
+            color: sample(ramps.neutral, 7),
+            weight: fontWeights.normal,
+        },
+        "variable.special": {
+            color: sample(ramps.blue, 0.8),
+            weight: fontWeights.normal,
+        },
+        comment: {
+            color: sample(ramps.neutral, 5),
+            weight: fontWeights.normal,
+        },
+        punctuation: {
+            color: sample(ramps.neutral, 6),
+            weight: fontWeights.normal,
+        },
+        constant: {
+            color: sample(ramps.neutral, 4),
+            weight: fontWeights.normal,
+        },
+        keyword: {
+            color: sample(ramps.blue, 0.5),
+            weight: fontWeights.normal,
+        },
+        function: {
+            color: sample(ramps.yellow, 0.5),
+            weight: fontWeights.normal,
+        },
+        type: {
+            color: sample(ramps.cyan, 0.5),
+            weight: fontWeights.normal,
+        },
+        constructor: {
+            color: sample(ramps.cyan, 0.5),
+            weight: fontWeights.normal,
+        },
+        property: {
+            color: sample(ramps.blue, 0.6),
+            weight: fontWeights.normal,
+        },
+        enum: {
+            color: sample(ramps.orange, 0.5),
+            weight: fontWeights.normal,
+        },
+        operator: {
+            color: sample(ramps.orange, 0.5),
+            weight: fontWeights.normal,
+        },
+        string: {
+            color: sample(ramps.orange, 0.5),
+            weight: fontWeights.normal,
+        },
+        number: {
+            color: sample(ramps.green, 0.5),
+            weight: fontWeights.normal,
+        },
+        boolean: {
+            color: sample(ramps.green, 0.5),
+            weight: fontWeights.normal,
+        },
+        predictive: {
+            color: textColor.muted,
+            weight: fontWeights.normal,
+        },
+        title: {
+            color: sample(ramps.yellow, 0.5),
+            weight: fontWeights.bold,
+        },
+        emphasis: {
+            color: textColor.feature,
+            weight: fontWeights.normal,
+        },
+        "emphasis.strong": {
+            color: textColor.feature,
+            weight: fontWeights.bold,
+        },
+        linkUri: {
+            color: sample(ramps.green, 0.5),
+            weight: fontWeights.normal,
+            underline: true,
+        },
+        linkText: {
+            color: sample(ramps.orange, 0.5),
+            weight: fontWeights.normal,
+            italic: true,
+        },
+    }
 
-  const shadow = withOpacity(
-    ramps
-      .neutral(isLight ? 7 : 0)
-      .darken()
-      .hex(),
-    blend
-  );
+    const shadow = withOpacity(
+        ramps
+            .neutral(isLight ? 7 : 0)
+            .darken()
+            .hex(),
+        blend
+    )
 
-  return {
-    name,
-    isLight,
-    backgroundColor,
-    borderColor,
-    textColor,
-    iconColor: textColor,
-    editor,
-    syntax,
-    player,
-    shadow,
-    ramps,
-  };
+    return {
+        name,
+        isLight,
+        backgroundColor,
+        borderColor,
+        textColor,
+        iconColor: textColor,
+        editor,
+        syntax,
+        player,
+        shadow,
+        ramps,
+    }
 }

styles/src/themes/common/colorScheme.ts

@@ -1,100 +1,100 @@
-import { Scale } from "chroma-js";
+import { Scale } from "chroma-js"
 
 export interface ColorScheme {
-  name: string;
-  isLight: boolean;
+    name: string
+    isLight: boolean
 
-  lowest: Layer;
-  middle: Layer;
-  highest: Layer;
+    lowest: Layer
+    middle: Layer
+    highest: Layer
 
-  ramps: RampSet;
+    ramps: RampSet
 
-  popoverShadow: Shadow;
-  modalShadow: Shadow;
+    popoverShadow: Shadow
+    modalShadow: Shadow
 
-  players: Players;
+    players: Players
 }
 
 export interface Meta {
-  name: string,
-  author: string,
-  url: string,
-  license: License
+    name: string
+    author: string
+    url: string
+    license: License
 }
 
 export interface License {
-  SPDX: SPDXExpression,
-  /// A url where we can download the license's text
-  https_url: string,
-  license_checksum: string
+    SPDX: SPDXExpression
+    /// A url where we can download the license's text
+    https_url: string
+    license_checksum: string
 }
 
 // License name -> License text
 export interface Licenses {
-  [key: string]: string
+    [key: string]: string
 }
 
 // FIXME: Add support for the SPDX expression syntax
-export type SPDXExpression = "MIT";
+export type SPDXExpression = "MIT"
 
 export interface Player {
-  cursor: string;
-  selection: string;
+    cursor: string
+    selection: string
 }
 
 export interface Players {
-  "0": Player;
-  "1": Player;
-  "2": Player;
-  "3": Player;
-  "4": Player;
-  "5": Player;
-  "6": Player;
-  "7": Player;
+    "0": Player
+    "1": Player
+    "2": Player
+    "3": Player
+    "4": Player
+    "5": Player
+    "6": Player
+    "7": Player
 }
 
 export interface Shadow {
-  blur: number;
-  color: string;
-  offset: number[];
+    blur: number
+    color: string
+    offset: number[]
 }
 
-export type StyleSets = keyof Layer;
+export type StyleSets = keyof Layer
 export interface Layer {
-  base: StyleSet;
-  variant: StyleSet;
-  on: StyleSet;
-  accent: StyleSet;
-  positive: StyleSet;
-  warning: StyleSet;
-  negative: StyleSet;
+    base: StyleSet
+    variant: StyleSet
+    on: StyleSet
+    accent: StyleSet
+    positive: StyleSet
+    warning: StyleSet
+    negative: StyleSet
 }
 
 export interface RampSet {
-  neutral: Scale;
-  red: Scale;
-  orange: Scale;
-  yellow: Scale;
-  green: Scale;
-  cyan: Scale;
-  blue: Scale;
-  violet: Scale;
-  magenta: Scale;
+    neutral: Scale
+    red: Scale
+    orange: Scale
+    yellow: Scale
+    green: Scale
+    cyan: Scale
+    blue: Scale
+    violet: Scale
+    magenta: Scale
 }
 
-export type Styles = keyof StyleSet;
+export type Styles = keyof StyleSet
 export interface StyleSet {
-  default: Style;
-  active: Style;
-  disabled: Style;
-  hovered: Style;
-  pressed: Style;
-  inverted: Style;
+    default: Style
+    active: Style
+    disabled: Style
+    hovered: Style
+    pressed: Style
+    inverted: Style
 }
 
 export interface Style {
-  background: string;
-  border: string;
-  foreground: string;
+    background: string
+    border: string
+    foreground: string
 }

styles/src/themes/common/ramps.ts

@@ -1,210 +1,212 @@
-import chroma, { Color, Scale } from "chroma-js";
+import chroma, { Color, Scale } from "chroma-js"
 import {
-  ColorScheme,
-  Layer,
-  Player,
-  RampSet,
-  Style,
-  Styles,
-  StyleSet,
-} from "./colorScheme";
+    ColorScheme,
+    Layer,
+    Player,
+    RampSet,
+    Style,
+    Styles,
+    StyleSet,
+} from "./colorScheme"
 
 export function colorRamp(color: Color): Scale {
-  let endColor = color.desaturate(1).brighten(5);
-  let startColor = color.desaturate(1).darken(4);
-  return chroma.scale([startColor, color, endColor]).mode("lab");
+    let endColor = color.desaturate(1).brighten(5)
+    let startColor = color.desaturate(1).darken(4)
+    return chroma.scale([startColor, color, endColor]).mode("lab")
 }
 
 export function createColorScheme(
-  name: string,
-  isLight: boolean,
-  colorRamps: { [rampName: string]: Scale }
+    name: string,
+    isLight: boolean,
+    colorRamps: { [rampName: string]: Scale }
 ): ColorScheme {
-  // Chromajs scales from 0 to 1 flipped if isLight is true
-  let ramps: RampSet = {} as any;
-
-  // Chromajs mutates the underlying ramp when you call domain. This causes problems because
-  // we now store the ramps object in the theme so that we can pull colors out of them.
-  // So instead of calling domain and storing the result, we have to construct new ramps for each
-  // theme so that we don't modify the passed in ramps.
-  // This combined with an error in the type definitions for chroma js means we have to cast the colors
-  // function to any in order to get the colors back out from the original ramps.
-  if (isLight) {
-    for (var rampName in colorRamps) {
-      (ramps as any)[rampName] = chroma.scale(
-        colorRamps[rampName].colors(100).reverse()
-      );
+    // Chromajs scales from 0 to 1 flipped if isLight is true
+    let ramps: RampSet = {} as any
+
+    // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+    // we now store the ramps object in the theme so that we can pull colors out of them.
+    // So instead of calling domain and storing the result, we have to construct new ramps for each
+    // theme so that we don't modify the passed in ramps.
+    // This combined with an error in the type definitions for chroma js means we have to cast the colors
+    // function to any in order to get the colors back out from the original ramps.
+    if (isLight) {
+        for (var rampName in colorRamps) {
+            ;(ramps as any)[rampName] = chroma.scale(
+                colorRamps[rampName].colors(100).reverse()
+            )
+        }
+        ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
+    } else {
+        for (var rampName in colorRamps) {
+            ;(ramps as any)[rampName] = chroma.scale(
+                colorRamps[rampName].colors(100)
+            )
+        }
+        ramps.neutral = chroma.scale(colorRamps.neutral.colors(100))
+    }
+
+    let lowest = lowestLayer(ramps)
+    let middle = middleLayer(ramps)
+    let highest = highestLayer(ramps)
+
+    let popoverShadow = {
+        blur: 4,
+        color: ramps
+            .neutral(isLight ? 7 : 0)
+            .darken()
+            .alpha(0.2)
+            .hex(), // TODO used blend previously. Replace with something else
+        offset: [1, 2],
+    }
+
+    let modalShadow = {
+        blur: 16,
+        color: ramps
+            .neutral(isLight ? 7 : 0)
+            .darken()
+            .alpha(0.2)
+            .hex(), // TODO used blend previously. Replace with something else
+        offset: [0, 2],
+    }
+
+    let players = {
+        "0": player(ramps.blue),
+        "1": player(ramps.green),
+        "2": player(ramps.magenta),
+        "3": player(ramps.orange),
+        "4": player(ramps.violet),
+        "5": player(ramps.cyan),
+        "6": player(ramps.red),
+        "7": player(ramps.yellow),
     }
-    ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
-  } else {
-    for (var rampName in colorRamps) {
-      (ramps as any)[rampName] = chroma.scale(colorRamps[rampName].colors(100));
+
+    return {
+        name,
+        isLight,
+
+        ramps,
+
+        lowest,
+        middle,
+        highest,
+
+        popoverShadow,
+        modalShadow,
+
+        players,
     }
-    ramps.neutral = chroma.scale(colorRamps.neutral.colors(100));
-  }
-
-  let lowest = lowestLayer(ramps);
-  let middle = middleLayer(ramps);
-  let highest = highestLayer(ramps);
-
-  let popoverShadow = {
-    blur: 4,
-    color: ramps
-      .neutral(isLight ? 7 : 0)
-      .darken()
-      .alpha(0.2)
-      .hex(), // TODO used blend previously. Replace with something else
-    offset: [1, 2],
-  };
-
-  let modalShadow = {
-    blur: 16,
-    color: ramps
-      .neutral(isLight ? 7 : 0)
-      .darken()
-      .alpha(0.2)
-      .hex(), // TODO used blend previously. Replace with something else
-    offset: [0, 2],
-  };
-
-  let players = {
-    "0": player(ramps.blue),
-    "1": player(ramps.green),
-    "2": player(ramps.magenta),
-    "3": player(ramps.orange),
-    "4": player(ramps.violet),
-    "5": player(ramps.cyan),
-    "6": player(ramps.red),
-    "7": player(ramps.yellow),
-  };
-
-  return {
-    name,
-    isLight,
-
-    ramps,
-
-    lowest,
-    middle,
-    highest,
-
-    popoverShadow,
-    modalShadow,
-
-    players,
-  };
 }
 
 function player(ramp: Scale): Player {
-  return {
-    selection: ramp(0.5).alpha(0.24).hex(),
-    cursor: ramp(0.5).hex(),
-  };
+    return {
+        selection: ramp(0.5).alpha(0.24).hex(),
+        cursor: ramp(0.5).hex(),
+    }
 }
 
 function lowestLayer(ramps: RampSet): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, 0.2, 1),
-    variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
-    on: buildStyleSet(ramps.neutral, 0.1, 1),
-    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
-    positive: buildStyleSet(ramps.green, 0.1, 0.5),
-    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
-    negative: buildStyleSet(ramps.red, 0.1, 0.5),
-  };
+    return {
+        base: buildStyleSet(ramps.neutral, 0.2, 1),
+        variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
+        on: buildStyleSet(ramps.neutral, 0.1, 1),
+        accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+        positive: buildStyleSet(ramps.green, 0.1, 0.5),
+        warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+        negative: buildStyleSet(ramps.red, 0.1, 0.5),
+    }
 }
 
 function middleLayer(ramps: RampSet): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, 0.1, 1),
-    variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
-    on: buildStyleSet(ramps.neutral, 0, 1),
-    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
-    positive: buildStyleSet(ramps.green, 0.1, 0.5),
-    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
-    negative: buildStyleSet(ramps.red, 0.1, 0.5),
-  };
+    return {
+        base: buildStyleSet(ramps.neutral, 0.1, 1),
+        variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
+        on: buildStyleSet(ramps.neutral, 0, 1),
+        accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+        positive: buildStyleSet(ramps.green, 0.1, 0.5),
+        warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+        negative: buildStyleSet(ramps.red, 0.1, 0.5),
+    }
 }
 
 function highestLayer(ramps: RampSet): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, 0, 1),
-    variant: buildStyleSet(ramps.neutral, 0, 0.7),
-    on: buildStyleSet(ramps.neutral, 0.1, 1),
-    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
-    positive: buildStyleSet(ramps.green, 0.1, 0.5),
-    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
-    negative: buildStyleSet(ramps.red, 0.1, 0.5),
-  };
+    return {
+        base: buildStyleSet(ramps.neutral, 0, 1),
+        variant: buildStyleSet(ramps.neutral, 0, 0.7),
+        on: buildStyleSet(ramps.neutral, 0.1, 1),
+        accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+        positive: buildStyleSet(ramps.green, 0.1, 0.5),
+        warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+        negative: buildStyleSet(ramps.red, 0.1, 0.5),
+    }
 }
 
 function buildStyleSet(
-  ramp: Scale,
-  backgroundBase: number,
-  foregroundBase: number,
-  step: number = 0.08
+    ramp: Scale,
+    backgroundBase: number,
+    foregroundBase: number,
+    step: number = 0.08
 ): StyleSet {
-  let styleDefinitions = buildStyleDefinition(
-    backgroundBase,
-    foregroundBase,
-    step
-  );
-
-  function colorString(indexOrColor: number | Color): string {
-    if (typeof indexOrColor === "number") {
-      return ramp(indexOrColor).hex();
-    } else {
-      return indexOrColor.hex();
+    let styleDefinitions = buildStyleDefinition(
+        backgroundBase,
+        foregroundBase,
+        step
+    )
+
+    function colorString(indexOrColor: number | Color): string {
+        if (typeof indexOrColor === "number") {
+            return ramp(indexOrColor).hex()
+        } else {
+            return indexOrColor.hex()
+        }
+    }
+
+    function buildStyle(style: Styles): Style {
+        return {
+            background: colorString(styleDefinitions.background[style]),
+            border: colorString(styleDefinitions.border[style]),
+            foreground: colorString(styleDefinitions.foreground[style]),
+        }
     }
-  }
 
-  function buildStyle(style: Styles): Style {
     return {
-      background: colorString(styleDefinitions.background[style]),
-      border: colorString(styleDefinitions.border[style]),
-      foreground: colorString(styleDefinitions.foreground[style]),
-    };
-  }
-
-  return {
-    default: buildStyle("default"),
-    hovered: buildStyle("hovered"),
-    pressed: buildStyle("pressed"),
-    active: buildStyle("active"),
-    disabled: buildStyle("disabled"),
-    inverted: buildStyle("inverted"),
-  };
+        default: buildStyle("default"),
+        hovered: buildStyle("hovered"),
+        pressed: buildStyle("pressed"),
+        active: buildStyle("active"),
+        disabled: buildStyle("disabled"),
+        inverted: buildStyle("inverted"),
+    }
 }
 
 function buildStyleDefinition(
-  bgBase: number,
-  fgBase: number,
-  step: number = 0.08
+    bgBase: number,
+    fgBase: number,
+    step: number = 0.08
 ) {
-  return {
-    background: {
-      default: bgBase,
-      hovered: bgBase + step,
-      pressed: bgBase + step * 1.5,
-      active: bgBase + step * 2.2,
-      disabled: bgBase,
-      inverted: fgBase + step * 6,
-    },
-    border: {
-      default: bgBase + step * 1,
-      hovered: bgBase + step,
-      pressed: bgBase + step,
-      active: bgBase + step * 3,
-      disabled: bgBase + step * 0.5,
-      inverted: bgBase - step * 3,
-    },
-    foreground: {
-      default: fgBase,
-      hovered: fgBase,
-      pressed: fgBase,
-      active: fgBase + step * 6,
-      disabled: bgBase + step * 4,
-      inverted: bgBase + step * 2,
-    },
-  };
+    return {
+        background: {
+            default: bgBase,
+            hovered: bgBase + step,
+            pressed: bgBase + step * 1.5,
+            active: bgBase + step * 2.2,
+            disabled: bgBase,
+            inverted: fgBase + step * 6,
+        },
+        border: {
+            default: bgBase + step * 1,
+            hovered: bgBase + step,
+            pressed: bgBase + step,
+            active: bgBase + step * 3,
+            disabled: bgBase + step * 0.5,
+            inverted: bgBase - step * 3,
+        },
+        foreground: {
+            default: fgBase,
+            hovered: fgBase,
+            pressed: fgBase,
+            active: fgBase + step * 6,
+            disabled: bgBase + step * 4,
+            inverted: bgBase + step * 2,
+        },
+    }
 }

styles/src/themes/common/theme.ts

@@ -1,165 +1,165 @@
-import { Scale } from "chroma-js";
-import { FontWeight } from "../../common";
-import { withOpacity } from "../../utils/color";
+import { Scale } from "chroma-js"
+import { FontWeight } from "../../common"
+import { withOpacity } from "../../utils/color"
 
 export interface SyntaxHighlightStyle {
-  color: string;
-  weight?: FontWeight;
-  underline?: boolean;
-  italic?: boolean;
+    color: string
+    weight?: FontWeight
+    underline?: boolean
+    italic?: boolean
 }
 
 export interface Player {
-  baseColor: string;
-  cursorColor: string;
-  selectionColor: string;
-  borderColor: string;
+    baseColor: string
+    cursorColor: string
+    selectionColor: string
+    borderColor: string
 }
 export function buildPlayer(
-  color: string,
-  cursorOpacity?: number,
-  selectionOpacity?: number,
-  borderOpacity?: number
+    color: string,
+    cursorOpacity?: number,
+    selectionOpacity?: number,
+    borderOpacity?: number
 ) {
-  return {
-    baseColor: color,
-    cursorColor: withOpacity(color, cursorOpacity || 1.0),
-    selectionColor: withOpacity(color, selectionOpacity || 0.24),
-    borderColor: withOpacity(color, borderOpacity || 0.8),
-  };
+    return {
+        baseColor: color,
+        cursorColor: withOpacity(color, cursorOpacity || 1.0),
+        selectionColor: withOpacity(color, selectionOpacity || 0.24),
+        borderColor: withOpacity(color, borderOpacity || 0.8),
+    }
 }
 
 export interface BackgroundColorSet {
-  base: string;
-  hovered: string;
-  active: string;
+    base: string
+    hovered: string
+    active: string
 }
 
 export interface Syntax {
-  primary: SyntaxHighlightStyle;
-  comment: SyntaxHighlightStyle;
-  punctuation: SyntaxHighlightStyle;
-  constant: SyntaxHighlightStyle;
-  keyword: SyntaxHighlightStyle;
-  function: SyntaxHighlightStyle;
-  type: SyntaxHighlightStyle;
-  constructor: SyntaxHighlightStyle;
-  property: SyntaxHighlightStyle;
-  enum: SyntaxHighlightStyle;
-  operator: SyntaxHighlightStyle;
-  string: SyntaxHighlightStyle;
-  number: SyntaxHighlightStyle;
-  boolean: SyntaxHighlightStyle;
-  predictive: SyntaxHighlightStyle;
-  title: SyntaxHighlightStyle;
-  emphasis: SyntaxHighlightStyle;
-  linkUri: SyntaxHighlightStyle;
-  linkText: SyntaxHighlightStyle;
+    primary: SyntaxHighlightStyle
+    comment: SyntaxHighlightStyle
+    punctuation: SyntaxHighlightStyle
+    constant: SyntaxHighlightStyle
+    keyword: SyntaxHighlightStyle
+    function: SyntaxHighlightStyle
+    type: SyntaxHighlightStyle
+    constructor: SyntaxHighlightStyle
+    property: SyntaxHighlightStyle
+    enum: SyntaxHighlightStyle
+    operator: SyntaxHighlightStyle
+    string: SyntaxHighlightStyle
+    number: SyntaxHighlightStyle
+    boolean: SyntaxHighlightStyle
+    predictive: SyntaxHighlightStyle
+    title: SyntaxHighlightStyle
+    emphasis: SyntaxHighlightStyle
+    linkUri: SyntaxHighlightStyle
+    linkText: SyntaxHighlightStyle
 
-  [key: string]: SyntaxHighlightStyle;
+    [key: string]: SyntaxHighlightStyle
 }
 
 export default interface Theme {
-  name: string;
-  isLight: boolean;
-  backgroundColor: {
-    // Basically just Title Bar
-    // Lowest background level
-    100: BackgroundColorSet;
-    // Tab bars, panels, popovers
-    // Mid-ground
-    300: BackgroundColorSet;
-    // The editor
-    // Foreground
-    500: BackgroundColorSet;
-    // Hacks for elements on top of the midground
-    // Buttons in a panel, tab bar, or panel
-    on300: BackgroundColorSet;
-    // Hacks for elements on top of the editor
-    on500: BackgroundColorSet;
-    ok: BackgroundColorSet;
-    on500Ok: BackgroundColorSet;
-    error: BackgroundColorSet;
-    on500Error: BackgroundColorSet;
-    warning: BackgroundColorSet;
-    on500Warning: BackgroundColorSet;
-    info: BackgroundColorSet;
-    on500Info: BackgroundColorSet;
-  };
-  borderColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    active: string;
-    /**
-     * Used for rendering borders on top of media like avatars, images, video, etc.
-     */
-    onMedia: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-  };
-  textColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    placeholder: string;
-    active: string;
-    feature: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-    onMedia: string;
-  };
-  iconColor: {
-    primary: string;
-    secondary: string;
-    muted: string;
-    placeholder: string;
-    active: string;
-    feature: string;
-    ok: string;
-    error: string;
-    warning: string;
-    info: string;
-  };
-  editor: {
-    background: string;
-    indent_guide: string;
-    indent_guide_active: string;
-    line: {
-      active: string;
-      highlighted: string;
-    };
-    highlight: {
-      selection: string;
-      occurrence: string;
-      activeOccurrence: string;
-      matchingBracket: string;
-      match: string;
-      activeMatch: string;
-      related: string;
-    };
-    gutter: {
-      primary: string;
-      active: string;
-    };
-  };
+    name: string
+    isLight: boolean
+    backgroundColor: {
+        // Basically just Title Bar
+        // Lowest background level
+        100: BackgroundColorSet
+        // Tab bars, panels, popovers
+        // Mid-ground
+        300: BackgroundColorSet
+        // The editor
+        // Foreground
+        500: BackgroundColorSet
+        // Hacks for elements on top of the midground
+        // Buttons in a panel, tab bar, or panel
+        on300: BackgroundColorSet
+        // Hacks for elements on top of the editor
+        on500: BackgroundColorSet
+        ok: BackgroundColorSet
+        on500Ok: BackgroundColorSet
+        error: BackgroundColorSet
+        on500Error: BackgroundColorSet
+        warning: BackgroundColorSet
+        on500Warning: BackgroundColorSet
+        info: BackgroundColorSet
+        on500Info: BackgroundColorSet
+    }
+    borderColor: {
+        primary: string
+        secondary: string
+        muted: string
+        active: string
+        /**
+         * Used for rendering borders on top of media like avatars, images, video, etc.
+         */
+        onMedia: string
+        ok: string
+        error: string
+        warning: string
+        info: string
+    }
+    textColor: {
+        primary: string
+        secondary: string
+        muted: string
+        placeholder: string
+        active: string
+        feature: string
+        ok: string
+        error: string
+        warning: string
+        info: string
+        onMedia: string
+    }
+    iconColor: {
+        primary: string
+        secondary: string
+        muted: string
+        placeholder: string
+        active: string
+        feature: string
+        ok: string
+        error: string
+        warning: string
+        info: string
+    }
+    editor: {
+        background: string
+        indent_guide: string
+        indent_guide_active: string
+        line: {
+            active: string
+            highlighted: string
+        }
+        highlight: {
+            selection: string
+            occurrence: string
+            activeOccurrence: string
+            matchingBracket: string
+            match: string
+            activeMatch: string
+            related: string
+        }
+        gutter: {
+            primary: string
+            active: string
+        }
+    }
 
-  syntax: Syntax;
+    syntax: Syntax
 
-  player: {
-    1: Player;
-    2: Player;
-    3: Player;
-    4: Player;
-    5: Player;
-    6: Player;
-    7: Player;
-    8: Player;
-  };
-  shadow: string;
-  ramps: { [rampName: string]: Scale };
+    player: {
+        1: Player
+        2: Player
+        3: Player
+        4: Player
+        5: Player
+        6: Player
+        7: Player
+        8: Player
+    }
+    shadow: string
+    ramps: { [rampName: string]: Scale }
 }

styles/src/themes/one-dark.ts

@@ -1,40 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "One Dark";
+const name = "One Dark"
 
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma
-    .scale([
-      "#282c34",
-      "#353b45",
-      "#3e4451",
-      "#545862",
-      "#565c64",
-      "#abb2bf",
-      "#b6bdca",
-      "#c8ccd4",
-    ])
-    .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
+    neutral: chroma
+        .scale([
+            "#282c34",
+            "#353b45",
+            "#3e4451",
+            "#545862",
+            "#565c64",
+            "#abb2bf",
+            "#b6bdca",
+            "#c8ccd4",
+        ])
+        .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
 
-  red: colorRamp(chroma("#e06c75")),
-  orange: colorRamp(chroma("#d19a66")),
-  yellow: colorRamp(chroma("#e5c07b")),
-  green: colorRamp(chroma("#98c379")),
-  cyan: colorRamp(chroma("#56b6c2")),
-  blue: colorRamp(chroma("#61afef")),
-  violet: colorRamp(chroma("#c678dd")),
-  magenta: colorRamp(chroma("#be5046")),
-});
+    red: colorRamp(chroma("#e06c75")),
+    orange: colorRamp(chroma("#d19a66")),
+    yellow: colorRamp(chroma("#e5c07b")),
+    green: colorRamp(chroma("#98c379")),
+    cyan: colorRamp(chroma("#56b6c2")),
+    blue: colorRamp(chroma("#61afef")),
+    violet: colorRamp(chroma("#c678dd")),
+    magenta: colorRamp(chroma("#be5046")),
+})
 
 export const meta: Meta = {
-  name,
-  author: "simurai",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
-    license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8"
-  },
-  url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui"
+    name,
+    author: "simurai",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
+        license_checksum:
+            "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
+    },
+    url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
 }

styles/src/themes/one-light.ts

@@ -1,39 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "One Light";
+const name = "One Light"
 
 export const light = createColorScheme(`${name}`, true, {
-  neutral: chroma.scale([
-    "#090a0b",
-    "#202227",
-    "#383a42",
-    "#696c77",
-    "#a0a1a7",
-    "#e5e5e6",
-    "#f0f0f1",
-    "#fafafa",
-  ])
-    .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
+    neutral: chroma
+        .scale([
+            "#090a0b",
+            "#202227",
+            "#383a42",
+            "#696c77",
+            "#a0a1a7",
+            "#e5e5e6",
+            "#f0f0f1",
+            "#fafafa",
+        ])
+        .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
 
-  red: colorRamp(chroma("#ca1243")),
-  orange: colorRamp(chroma("#d75f00")),
-  yellow: colorRamp(chroma("#c18401")),
-  green: colorRamp(chroma("#50a14f")),
-  cyan: colorRamp(chroma("#0184bc")),
-  blue: colorRamp(chroma("#4078f2")),
-  violet: colorRamp(chroma("#a626a4")),
-  magenta: colorRamp(chroma("#986801")),
-});
+    red: colorRamp(chroma("#ca1243")),
+    orange: colorRamp(chroma("#d75f00")),
+    yellow: colorRamp(chroma("#c18401")),
+    green: colorRamp(chroma("#50a14f")),
+    cyan: colorRamp(chroma("#0184bc")),
+    blue: colorRamp(chroma("#4078f2")),
+    violet: colorRamp(chroma("#a626a4")),
+    magenta: colorRamp(chroma("#986801")),
+})
 
 export const meta: Meta = {
-  name,
-  author: "simurai",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
-    license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8"
-  },
-  url: "https://github.com/atom/atom/tree/master/packages/one-light-ui"
+    name,
+    author: "simurai",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
+        license_checksum:
+            "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
+    },
+    url: "https://github.com/atom/atom/tree/master/packages/one-light-ui",
 }

styles/src/themes/rose-pine-dawn.ts

@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Rosé Pine Dawn";
+const name = "Rosé Pine Dawn"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#575279",
-      "#797593",
-      "#9893A5",
-      "#B5AFB8",
-      "#D3CCCC",
-      "#F2E9E1",
-      "#FFFAF3",
-      "#FAF4ED",
-    ])
-    .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
-  red: colorRamp(chroma("#B4637A")),
-  orange: colorRamp(chroma("#D7827E")),
-  yellow: colorRamp(chroma("#EA9D34")),
-  green: colorRamp(chroma("#679967")),
-  cyan: colorRamp(chroma("#286983")),
-  blue: colorRamp(chroma("#56949F")),
-  violet: colorRamp(chroma("#907AA9")),
-  magenta: colorRamp(chroma("#79549F")),
-};
+    neutral: chroma
+        .scale([
+            "#575279",
+            "#797593",
+            "#9893A5",
+            "#B5AFB8",
+            "#D3CCCC",
+            "#F2E9E1",
+            "#FFFAF3",
+            "#FAF4ED",
+        ])
+        .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
+    red: colorRamp(chroma("#B4637A")),
+    orange: colorRamp(chroma("#D7827E")),
+    yellow: colorRamp(chroma("#EA9D34")),
+    green: colorRamp(chroma("#679967")),
+    cyan: colorRamp(chroma("#286983")),
+    blue: colorRamp(chroma("#56949F")),
+    violet: colorRamp(chroma("#907AA9")),
+    magenta: colorRamp(chroma("#79549F")),
+}
 
-export const light = createColorScheme(`${name}`, true, ramps);
+export const light = createColorScheme(`${name}`, true, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "edunfelt",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
-    license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
-  },
-  url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+    name,
+    author: "edunfelt",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+        license_checksum:
+            "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+    },
+    url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}

styles/src/themes/rose-pine-moon.ts

@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Rosé Pine Moon";
+const name = "Rosé Pine Moon"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#232136",
-      "#2A273F",
-      "#393552",
-      "#3E3A53",
-      "#56526C",
-      "#6E6A86",
-      "#908CAA",
-      "#E0DEF4",
-    ])
-    .domain([0, 0.3, 0.55, 1]),
-  red: colorRamp(chroma("#EB6F92")),
-  orange: colorRamp(chroma("#EBBCBA")),
-  yellow: colorRamp(chroma("#F6C177")),
-  green: colorRamp(chroma("#8DBD8D")),
-  cyan: colorRamp(chroma("#409BBE")),
-  blue: colorRamp(chroma("#9CCFD8")),
-  violet: colorRamp(chroma("#C4A7E7")),
-  magenta: colorRamp(chroma("#AB6FE9")),
-};
+    neutral: chroma
+        .scale([
+            "#232136",
+            "#2A273F",
+            "#393552",
+            "#3E3A53",
+            "#56526C",
+            "#6E6A86",
+            "#908CAA",
+            "#E0DEF4",
+        ])
+        .domain([0, 0.3, 0.55, 1]),
+    red: colorRamp(chroma("#EB6F92")),
+    orange: colorRamp(chroma("#EBBCBA")),
+    yellow: colorRamp(chroma("#F6C177")),
+    green: colorRamp(chroma("#8DBD8D")),
+    cyan: colorRamp(chroma("#409BBE")),
+    blue: colorRamp(chroma("#9CCFD8")),
+    violet: colorRamp(chroma("#C4A7E7")),
+    magenta: colorRamp(chroma("#AB6FE9")),
+}
 
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "edunfelt",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
-    license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
-  },
-  url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+    name,
+    author: "edunfelt",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+        license_checksum:
+            "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+    },
+    url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}

styles/src/themes/rose-pine.ts

@@ -1,39 +1,41 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Rosé Pine";
+const name = "Rosé Pine"
 
 const ramps = {
-  neutral: chroma.scale([
-    "#191724",
-    "#1f1d2e",
-    "#26233A",
-    "#3E3A53",
-    "#56526C",
-    "#6E6A86",
-    "#908CAA",
-    "#E0DEF4",
-  ]),
-  red: colorRamp(chroma("#EB6F92")),
-  orange: colorRamp(chroma("#EBBCBA")),
-  yellow: colorRamp(chroma("#F6C177")),
-  green: colorRamp(chroma("#8DBD8D")),
-  cyan: colorRamp(chroma("#409BBE")),
-  blue: colorRamp(chroma("#9CCFD8")),
-  violet: colorRamp(chroma("#C4A7E7")),
-  magenta: colorRamp(chroma("#AB6FE9")),
-};
+    neutral: chroma.scale([
+        "#191724",
+        "#1f1d2e",
+        "#26233A",
+        "#3E3A53",
+        "#56526C",
+        "#6E6A86",
+        "#908CAA",
+        "#E0DEF4",
+    ]),
+    red: colorRamp(chroma("#EB6F92")),
+    orange: colorRamp(chroma("#EBBCBA")),
+    yellow: colorRamp(chroma("#F6C177")),
+    green: colorRamp(chroma("#8DBD8D")),
+    cyan: colorRamp(chroma("#409BBE")),
+    blue: colorRamp(chroma("#9CCFD8")),
+    violet: colorRamp(chroma("#C4A7E7")),
+    magenta: colorRamp(chroma("#AB6FE9")),
+}
 
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "edunfelt",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
-    license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
-  },
-  url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+    name,
+    author: "edunfelt",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+        license_checksum:
+            "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+    },
+    url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}

styles/src/themes/sandcastle.ts

@@ -1,40 +1,41 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Sandcastle";
+const name = "Sandcastle"
 
 const ramps = {
-  neutral: chroma.scale([
-    "#282c34",
-    "#2c323b",
-    "#3e4451",
-    "#665c54",
-    "#928374",
-    "#a89984",
-    "#d5c4a1",
-    "#fdf4c1",
-  ]),
-  red: colorRamp(chroma("#B4637A")),
-  orange: colorRamp(chroma("#a07e3b")),
-  yellow: colorRamp(chroma("#a07e3b")),
-  green: colorRamp(chroma("#83a598")),
-  cyan: colorRamp(chroma("#83a598")),
-  blue: colorRamp(chroma("#528b8b")),
-  violet: colorRamp(chroma("#d75f5f")),
-  magenta: colorRamp(chroma("#a87322")),
-};
+    neutral: chroma.scale([
+        "#282c34",
+        "#2c323b",
+        "#3e4451",
+        "#665c54",
+        "#928374",
+        "#a89984",
+        "#d5c4a1",
+        "#fdf4c1",
+    ]),
+    red: colorRamp(chroma("#B4637A")),
+    orange: colorRamp(chroma("#a07e3b")),
+    yellow: colorRamp(chroma("#a07e3b")),
+    green: colorRamp(chroma("#83a598")),
+    cyan: colorRamp(chroma("#83a598")),
+    blue: colorRamp(chroma("#528b8b")),
+    violet: colorRamp(chroma("#d75f5f")),
+    magenta: colorRamp(chroma("#a87322")),
+}
 
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
 
 export const meta: Meta = {
-  name,
-  author: "gessig",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
-    license_checksum: "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc"
-  },
-  url: "https://github.com/gessig/base16-sandcastle-scheme"
+    name,
+    author: "gessig",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
+        license_checksum:
+            "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc",
+    },
+    url: "https://github.com/gessig/base16-sandcastle-scheme",
 }
-

styles/src/themes/solarized.ts

@@ -1,43 +1,44 @@
-import chroma from "chroma-js";
-import { Meta as Metadata } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta as Metadata } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Solarized";
+const name = "Solarized"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#002b36",
-      "#073642",
-      "#586e75",
-      "#657b83",
-      "#839496",
-      "#93a1a1",
-      "#eee8d5",
-      "#fdf6e3",
-    ])
-    .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
-  red: colorRamp(chroma("#dc322f")),
-  orange: colorRamp(chroma("#cb4b16")),
-  yellow: colorRamp(chroma("#b58900")),
-  green: colorRamp(chroma("#859900")),
-  cyan: colorRamp(chroma("#2aa198")),
-  blue: colorRamp(chroma("#268bd2")),
-  violet: colorRamp(chroma("#6c71c4")),
-  magenta: colorRamp(chroma("#d33682")),
-};
+    neutral: chroma
+        .scale([
+            "#002b36",
+            "#073642",
+            "#586e75",
+            "#657b83",
+            "#839496",
+            "#93a1a1",
+            "#eee8d5",
+            "#fdf6e3",
+        ])
+        .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
+    red: colorRamp(chroma("#dc322f")),
+    orange: colorRamp(chroma("#cb4b16")),
+    yellow: colorRamp(chroma("#b58900")),
+    green: colorRamp(chroma("#859900")),
+    cyan: colorRamp(chroma("#2aa198")),
+    blue: colorRamp(chroma("#268bd2")),
+    violet: colorRamp(chroma("#6c71c4")),
+    magenta: colorRamp(chroma("#d33682")),
+}
 
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
 
 export const meta: Metadata = {
-  name,
-  author: "Ethan Schoonover",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
-    license_checksum: "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6"
-  },
-  url: "https://github.com/altercation/solarized"
+    name,
+    author: "Ethan Schoonover",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
+        license_checksum:
+            "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6",
+    },
+    url: "https://github.com/altercation/solarized",
 }
-

styles/src/themes/staff/abruzzo.ts

@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Abruzzo";
-const author = "slightknack <[e-mail]>";
-const url = "https://github.com/slightknack";
+const name = "Abruzzo"
+const author = "slightknack <[e-mail]>"
+const url = "https://github.com/slightknack"
 const license = {
-  type: "",
-  url: ""
+    type: "",
+    url: "",
 }
 
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#1b0d05",
-    "#2c1e18",
-    "#654035",
-    "#9d5e4a",
-    "#b37354",
-    "#c1825a",
-    "#dda66e",
-    "#fbf3e2",
-  ]),
-  red: colorRamp(chroma("#e594c4")),
-  orange: colorRamp(chroma("#d9e87e")),
-  yellow: colorRamp(chroma("#fd9d83")),
-  green: colorRamp(chroma("#96adf7")),
-  cyan: colorRamp(chroma("#fc798f")),
-  blue: colorRamp(chroma("#BCD0F5")),
-  violet: colorRamp(chroma("#dac5eb")),
-  magenta: colorRamp(chroma("#c1a3ef")),
-});
+    neutral: chroma.scale([
+        "#1b0d05",
+        "#2c1e18",
+        "#654035",
+        "#9d5e4a",
+        "#b37354",
+        "#c1825a",
+        "#dda66e",
+        "#fbf3e2",
+    ]),
+    red: colorRamp(chroma("#e594c4")),
+    orange: colorRamp(chroma("#d9e87e")),
+    yellow: colorRamp(chroma("#fd9d83")),
+    green: colorRamp(chroma("#96adf7")),
+    cyan: colorRamp(chroma("#fc798f")),
+    blue: colorRamp(chroma("#BCD0F5")),
+    violet: colorRamp(chroma("#dac5eb")),
+    magenta: colorRamp(chroma("#c1a3ef")),
+})

styles/src/themes/staff/atelier-dune.ts

@@ -1,34 +1,35 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Atelier Dune";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/";
+const name = "Atelier Dune"
+const author = "atelierbram"
+const url =
+    "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/"
 const license = {
-  type: "MIT",
-  url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+    type: "MIT",
+    url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
 
 const ramps = {
-  neutral: chroma.scale([
-    "#20201d",
-    "#292824",
-    "#6e6b5e",
-    "#7d7a68",
-    "#999580",
-    "#a6a28c",
-    "#e8e4cf",
-    "#fefbec",
-  ]),
-  red: colorRamp(chroma("#d73737")),
-  orange: colorRamp(chroma("#b65611")),
-  yellow: colorRamp(chroma("#ae9513")),
-  green: colorRamp(chroma("#60ac39")),
-  cyan: colorRamp(chroma("#1fad83")),
-  blue: colorRamp(chroma("#6684e1")),
-  violet: colorRamp(chroma("#b854d4")),
-  magenta: colorRamp(chroma("#d43552")),
-};
+    neutral: chroma.scale([
+        "#20201d",
+        "#292824",
+        "#6e6b5e",
+        "#7d7a68",
+        "#999580",
+        "#a6a28c",
+        "#e8e4cf",
+        "#fefbec",
+    ]),
+    red: colorRamp(chroma("#d73737")),
+    orange: colorRamp(chroma("#b65611")),
+    yellow: colorRamp(chroma("#ae9513")),
+    green: colorRamp(chroma("#60ac39")),
+    cyan: colorRamp(chroma("#1fad83")),
+    blue: colorRamp(chroma("#6684e1")),
+    violet: colorRamp(chroma("#b854d4")),
+    magenta: colorRamp(chroma("#d43552")),
+}
 
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)

styles/src/themes/staff/atelier-heath.ts

@@ -1,53 +1,54 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Atelier Heath";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/";
+const name = "Atelier Heath"
+const author = "atelierbram"
+const url =
+    "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/"
 const license = {
-  type: "MIT",
-  url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+    type: "MIT",
+    url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name} Dark`, false, {
-  neutral: chroma.scale([
-    "#1b181b",
-    "#292329",
-    "#695d69",
-    "#776977",
-    "#9e8f9e",
-    "#ab9bab",
-    "#d8cad8",
-    "#f7f3f7",
-  ]),
-  red: colorRamp(chroma("#ca402b")),
-  orange: colorRamp(chroma("#a65926")),
-  yellow: colorRamp(chroma("#bb8a35")),
-  green: colorRamp(chroma("#918b3b")),
-  cyan: colorRamp(chroma("#159393")),
-  blue: colorRamp(chroma("#516aec")),
-  violet: colorRamp(chroma("#7b59c0")),
-  magenta: colorRamp(chroma("#cc33cc")),
-});
+    neutral: chroma.scale([
+        "#1b181b",
+        "#292329",
+        "#695d69",
+        "#776977",
+        "#9e8f9e",
+        "#ab9bab",
+        "#d8cad8",
+        "#f7f3f7",
+    ]),
+    red: colorRamp(chroma("#ca402b")),
+    orange: colorRamp(chroma("#a65926")),
+    yellow: colorRamp(chroma("#bb8a35")),
+    green: colorRamp(chroma("#918b3b")),
+    cyan: colorRamp(chroma("#159393")),
+    blue: colorRamp(chroma("#516aec")),
+    violet: colorRamp(chroma("#7b59c0")),
+    magenta: colorRamp(chroma("#cc33cc")),
+})
 
 export const light = createColorScheme(`${name} Light`, true, {
-  neutral: chroma.scale([
-    "#161b1d",
-    "#1f292e",
-    "#516d7b",
-    "#5a7b8c",
-    "#7195a8",
-    "#7ea2b4",
-    "#c1e4f6",
-    "#ebf8ff",
-  ]),
-  red: colorRamp(chroma("#d22d72")),
-  orange: colorRamp(chroma("#935c25")),
-  yellow: colorRamp(chroma("#8a8a0f")),
-  green: colorRamp(chroma("#568c3b")),
-  cyan: colorRamp(chroma("#2d8f6f")),
-  blue: colorRamp(chroma("#257fad")),
-  violet: colorRamp(chroma("#6b6bb8")),
-  magenta: colorRamp(chroma("#b72dd2")),
-});
+    neutral: chroma.scale([
+        "#161b1d",
+        "#1f292e",
+        "#516d7b",
+        "#5a7b8c",
+        "#7195a8",
+        "#7ea2b4",
+        "#c1e4f6",
+        "#ebf8ff",
+    ]),
+    red: colorRamp(chroma("#d22d72")),
+    orange: colorRamp(chroma("#935c25")),
+    yellow: colorRamp(chroma("#8a8a0f")),
+    green: colorRamp(chroma("#568c3b")),
+    cyan: colorRamp(chroma("#2d8f6f")),
+    blue: colorRamp(chroma("#257fad")),
+    violet: colorRamp(chroma("#6b6bb8")),
+    magenta: colorRamp(chroma("#b72dd2")),
+})

styles/src/themes/staff/atelier-seaside.ts

@@ -1,34 +1,35 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Atelier Seaside";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/";
+const name = "Atelier Seaside"
+const author = "atelierbram"
+const url =
+    "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/"
 const license = {
-  type: "MIT",
-  url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+    type: "MIT",
+    url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
 
 const ramps = {
-  neutral: chroma.scale([
-    "#131513",
-    "#242924",
-    "#5e6e5e",
-    "#687d68",
-    "#809980",
-    "#8ca68c",
-    "#cfe8cf",
-    "#f4fbf4",
-  ]),
-  red: colorRamp(chroma("#e6193c")),
-  orange: colorRamp(chroma("#87711d")),
-  yellow: colorRamp(chroma("#98981b")),
-  green: colorRamp(chroma("#29a329")),
-  cyan: colorRamp(chroma("#1999b3")),
-  blue: colorRamp(chroma("#3d62f5")),
-  violet: colorRamp(chroma("#ad2bee")),
-  magenta: colorRamp(chroma("#e619c3")),
-};
+    neutral: chroma.scale([
+        "#131513",
+        "#242924",
+        "#5e6e5e",
+        "#687d68",
+        "#809980",
+        "#8ca68c",
+        "#cfe8cf",
+        "#f4fbf4",
+    ]),
+    red: colorRamp(chroma("#e6193c")),
+    orange: colorRamp(chroma("#87711d")),
+    yellow: colorRamp(chroma("#98981b")),
+    green: colorRamp(chroma("#29a329")),
+    cyan: colorRamp(chroma("#1999b3")),
+    blue: colorRamp(chroma("#3d62f5")),
+    violet: colorRamp(chroma("#ad2bee")),
+    magenta: colorRamp(chroma("#e619c3")),
+}
 
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)

styles/src/themes/staff/ayu-mirage.ts

@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Ayu";
-const author = "Konstantin Pschera <[e-mail]>";
-const url = "https://github.com/ayu-theme/ayu-colors";
+const name = "Ayu"
+const author = "Konstantin Pschera <[e-mail]>"
+const url = "https://github.com/ayu-theme/ayu-colors"
 const license = {
-  type: "MIT",
-  url: "https://github.com/ayu-theme/ayu-colors/blob/master/license"
+    type: "MIT",
+    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
 }
 
 export const dark = createColorScheme(`${name} Mirage`, false, {
-  neutral: chroma.scale([
-    "#171B24",
-    "#1F2430",
-    "#242936",
-    "#707A8C",
-    "#8A9199",
-    "#CCCAC2",
-    "#D9D7CE",
-    "#F3F4F5",
-  ]),
-  red: colorRamp(chroma("#F28779")),
-  orange: colorRamp(chroma("#FFAD66")),
-  yellow: colorRamp(chroma("#FFD173")),
-  green: colorRamp(chroma("#D5FF80")),
-  cyan: colorRamp(chroma("#95E6CB")),
-  blue: colorRamp(chroma("#5CCFE6")),
-  violet: colorRamp(chroma("#D4BFFF")),
-  magenta: colorRamp(chroma("#F29E74")),
-});
+    neutral: chroma.scale([
+        "#171B24",
+        "#1F2430",
+        "#242936",
+        "#707A8C",
+        "#8A9199",
+        "#CCCAC2",
+        "#D9D7CE",
+        "#F3F4F5",
+    ]),
+    red: colorRamp(chroma("#F28779")),
+    orange: colorRamp(chroma("#FFAD66")),
+    yellow: colorRamp(chroma("#FFD173")),
+    green: colorRamp(chroma("#D5FF80")),
+    cyan: colorRamp(chroma("#95E6CB")),
+    blue: colorRamp(chroma("#5CCFE6")),
+    violet: colorRamp(chroma("#D4BFFF")),
+    magenta: colorRamp(chroma("#F29E74")),
+})

styles/src/themes/staff/ayu.ts

@@ -1,52 +1,52 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Ayu";
-const author = "Konstantin Pschera <[e-mail]>";
-const url = "https://github.com/ayu-theme/ayu-colors";
+const name = "Ayu"
+const author = "Konstantin Pschera <[e-mail]>"
+const url = "https://github.com/ayu-theme/ayu-colors"
 const license = {
-  type: "MIT",
-  url: "https://github.com/ayu-theme/ayu-colors/blob/master/license"
+    type: "MIT",
+    url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
 }
 
 export const dark = createColorScheme(`${name} Dark`, false, {
-  neutral: chroma.scale([
-    "#0F1419",
-    "#131721",
-    "#272D38",
-    "#3E4B59",
-    "#BFBDB6",
-    "#E6E1CF",
-    "#E6E1CF",
-    "#F3F4F5",
-  ]),
-  red: colorRamp(chroma("#F07178")),
-  orange: colorRamp(chroma("#FF8F40")),
-  yellow: colorRamp(chroma("#FFB454")),
-  green: colorRamp(chroma("#B8CC52")),
-  cyan: colorRamp(chroma("#95E6CB")),
-  blue: colorRamp(chroma("#59C2FF")),
-  violet: colorRamp(chroma("#D2A6FF")),
-  magenta: colorRamp(chroma("#E6B673")),
-});
+    neutral: chroma.scale([
+        "#0F1419",
+        "#131721",
+        "#272D38",
+        "#3E4B59",
+        "#BFBDB6",
+        "#E6E1CF",
+        "#E6E1CF",
+        "#F3F4F5",
+    ]),
+    red: colorRamp(chroma("#F07178")),
+    orange: colorRamp(chroma("#FF8F40")),
+    yellow: colorRamp(chroma("#FFB454")),
+    green: colorRamp(chroma("#B8CC52")),
+    cyan: colorRamp(chroma("#95E6CB")),
+    blue: colorRamp(chroma("#59C2FF")),
+    violet: colorRamp(chroma("#D2A6FF")),
+    magenta: colorRamp(chroma("#E6B673")),
+})
 
 export const light = createColorScheme(`${name} Light`, true, {
-  neutral: chroma.scale([
-    "#1A1F29",
-    "#242936",
-    "#5C6773",
-    "#828C99",
-    "#ABB0B6",
-    "#F8F9FA",
-    "#F3F4F5",
-    "#FAFAFA",
-  ]),
-  red: colorRamp(chroma("#F07178")),
-  orange: colorRamp(chroma("#FA8D3E")),
-  yellow: colorRamp(chroma("#F2AE49")),
-  green: colorRamp(chroma("#86B300")),
-  cyan: colorRamp(chroma("#4CBF99")),
-  blue: colorRamp(chroma("#36A3D9")),
-  violet: colorRamp(chroma("#A37ACC")),
-  magenta: colorRamp(chroma("#E6BA7E")),
-});
+    neutral: chroma.scale([
+        "#1A1F29",
+        "#242936",
+        "#5C6773",
+        "#828C99",
+        "#ABB0B6",
+        "#F8F9FA",
+        "#F3F4F5",
+        "#FAFAFA",
+    ]),
+    red: colorRamp(chroma("#F07178")),
+    orange: colorRamp(chroma("#FA8D3E")),
+    yellow: colorRamp(chroma("#F2AE49")),
+    green: colorRamp(chroma("#86B300")),
+    cyan: colorRamp(chroma("#4CBF99")),
+    blue: colorRamp(chroma("#36A3D9")),
+    violet: colorRamp(chroma("#A37ACC")),
+    magenta: colorRamp(chroma("#E6BA7E")),
+})

styles/src/themes/staff/brushtrees.ts

@@ -1,73 +1,73 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Brush Trees";
-const author = "Abraham White <[e-mail]>";
-const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme";
+const name = "Brush Trees"
+const author = "Abraham White <[e-mail]>"
+const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme"
 const license = {
-  type: "MIT",
-  url: "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme/blob/master/LICENSE"
+    type: "MIT",
+    url: "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme/blob/master/LICENSE",
 }
 
 export const dark = createColorScheme(`${name} Dark`, false, {
-  neutral: chroma.scale([
-    "#485867",
-    "#5A6D7A",
-    "#6D828E",
-    "#8299A1",
-    "#98AFB5",
-    "#B0C5C8",
-    "#C9DBDC",
-    "#E3EFEF",
-  ]),
-  red: colorRamp(chroma("#b38686")),
-  orange: colorRamp(chroma("#d8bba2")),
-  yellow: colorRamp(chroma("#aab386")),
-  green: colorRamp(chroma("#87b386")),
-  cyan: colorRamp(chroma("#86b3b3")),
-  blue: colorRamp(chroma("#868cb3")),
-  violet: colorRamp(chroma("#b386b2")),
-  magenta: colorRamp(chroma("#b39f9f")),
-});
+    neutral: chroma.scale([
+        "#485867",
+        "#5A6D7A",
+        "#6D828E",
+        "#8299A1",
+        "#98AFB5",
+        "#B0C5C8",
+        "#C9DBDC",
+        "#E3EFEF",
+    ]),
+    red: colorRamp(chroma("#b38686")),
+    orange: colorRamp(chroma("#d8bba2")),
+    yellow: colorRamp(chroma("#aab386")),
+    green: colorRamp(chroma("#87b386")),
+    cyan: colorRamp(chroma("#86b3b3")),
+    blue: colorRamp(chroma("#868cb3")),
+    violet: colorRamp(chroma("#b386b2")),
+    magenta: colorRamp(chroma("#b39f9f")),
+})
 
 export const mirage = createColorScheme(`${name} Mirage`, false, {
-  neutral: chroma.scale([
-    "#485867",
-    "#5A6D7A",
-    "#6D828E",
-    "#8299A1",
-    "#98AFB5",
-    "#B0C5C8",
-    "#C9DBDC",
-    "#E3EFEF",
-  ]),
-  red: colorRamp(chroma("#F28779")),
-  orange: colorRamp(chroma("#FFAD66")),
-  yellow: colorRamp(chroma("#FFD173")),
-  green: colorRamp(chroma("#D5FF80")),
-  cyan: colorRamp(chroma("#95E6CB")),
-  blue: colorRamp(chroma("#5CCFE6")),
-  violet: colorRamp(chroma("#D4BFFF")),
-  magenta: colorRamp(chroma("#F29E74")),
-});
+    neutral: chroma.scale([
+        "#485867",
+        "#5A6D7A",
+        "#6D828E",
+        "#8299A1",
+        "#98AFB5",
+        "#B0C5C8",
+        "#C9DBDC",
+        "#E3EFEF",
+    ]),
+    red: colorRamp(chroma("#F28779")),
+    orange: colorRamp(chroma("#FFAD66")),
+    yellow: colorRamp(chroma("#FFD173")),
+    green: colorRamp(chroma("#D5FF80")),
+    cyan: colorRamp(chroma("#95E6CB")),
+    blue: colorRamp(chroma("#5CCFE6")),
+    violet: colorRamp(chroma("#D4BFFF")),
+    magenta: colorRamp(chroma("#F29E74")),
+})
 
 export const light = createColorScheme(`${name} Light`, true, {
-  neutral: chroma.scale([
-    "#1A1F29",
-    "#242936",
-    "#5C6773",
-    "#828C99",
-    "#ABB0B6",
-    "#F8F9FA",
-    "#F3F4F5",
-    "#FAFAFA",
-  ]),
-  red: colorRamp(chroma("#b38686")),
-  orange: colorRamp(chroma("#d8bba2")),
-  yellow: colorRamp(chroma("#aab386")),
-  green: colorRamp(chroma("#87b386")),
-  cyan: colorRamp(chroma("#86b3b3")),
-  blue: colorRamp(chroma("#868cb3")),
-  violet: colorRamp(chroma("#b386b2")),
-  magenta: colorRamp(chroma("#b39f9f")),
-});
+    neutral: chroma.scale([
+        "#1A1F29",
+        "#242936",
+        "#5C6773",
+        "#828C99",
+        "#ABB0B6",
+        "#F8F9FA",
+        "#F3F4F5",
+        "#FAFAFA",
+    ]),
+    red: colorRamp(chroma("#b38686")),
+    orange: colorRamp(chroma("#d8bba2")),
+    yellow: colorRamp(chroma("#aab386")),
+    green: colorRamp(chroma("#87b386")),
+    cyan: colorRamp(chroma("#86b3b3")),
+    blue: colorRamp(chroma("#868cb3")),
+    violet: colorRamp(chroma("#b386b2")),
+    magenta: colorRamp(chroma("#b39f9f")),
+})

styles/src/themes/staff/dracula.ts

@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Dracula";
-const author = "zenorocha";
-const url = "https://github.com/dracula/dracula-theme";
+const name = "Dracula"
+const author = "zenorocha"
+const url = "https://github.com/dracula/dracula-theme"
 const license = {
-  type: "MIT",
-  url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
-};
+    type: "MIT",
+    url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
+}
 
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#282A36",
-    "#3a3c4e",
-    "#4d4f68",
-    "#626483",
-    "#62d6e8",
-    "#e9e9f4",
-    "#f1f2f8",
-    "#f8f8f2",
-  ]),
-  red: colorRamp(chroma("#ff5555")),
-  orange: colorRamp(chroma("#ffb86c")),
-  yellow: colorRamp(chroma("#f1fa8c")),
-  green: colorRamp(chroma("#50fa7b")),
-  cyan: colorRamp(chroma("#8be9fd")),
-  blue: colorRamp(chroma("#6272a4")),
-  violet: colorRamp(chroma("#bd93f9")),
-  magenta: colorRamp(chroma("#00f769")),
-});
+    neutral: chroma.scale([
+        "#282A36",
+        "#3a3c4e",
+        "#4d4f68",
+        "#626483",
+        "#62d6e8",
+        "#e9e9f4",
+        "#f1f2f8",
+        "#f8f8f2",
+    ]),
+    red: colorRamp(chroma("#ff5555")),
+    orange: colorRamp(chroma("#ffb86c")),
+    yellow: colorRamp(chroma("#f1fa8c")),
+    green: colorRamp(chroma("#50fa7b")),
+    cyan: colorRamp(chroma("#8be9fd")),
+    blue: colorRamp(chroma("#6272a4")),
+    violet: colorRamp(chroma("#bd93f9")),
+    magenta: colorRamp(chroma("#00f769")),
+})

styles/src/themes/staff/gruvbox-medium.ts

@@ -1,138 +1,138 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Gruvbox";
-const author = "Dawid Kurek ([e-mail])";
-const url = "https://github.com/morhetz/gruvbox";
+const name = "Gruvbox"
+const author = "Dawid Kurek ([e-mail])"
+const url = "https://github.com/morhetz/gruvbox"
 const license = {
-  type: "MIT/X11",
-  url: "https://en.wikipedia.org/wiki/MIT_License",
-};
+    type: "MIT/X11",
+    url: "https://en.wikipedia.org/wiki/MIT_License",
+}
 
 export const dark = createColorScheme(`${name} Dark Medium`, false, {
-  neutral: chroma.scale([
-    "#282828",
-    "#3c3836",
-    "#504945",
-    "#665c54",
-    "#7C6F64",
-    "#928374",
-    "#A89984",
-    "#BDAE93",
-    "#D5C4A1",
-    "#EBDBB2",
-    "#FBF1C7",
-  ]),
-  red: chroma.scale([
-    "#4D150F",
-    "#7D241A",
-    "#A31C17",
-    "#CC241D",
-    "#C83A29",
-    "#FB4934",
-    "#F06D61",
-    "#E6928E",
-    "#FFFFFF",
-  ]),
-  orange: chroma.scale([
-    "#462307",
-    "#7F400C",
-    "#AB4A0B",
-    "#D65D0E",
-    "#CB6614",
-    "#FE8019",
-    "#F49750",
-    "#EBAE87",
-    "#FFFFFF",
-  ]),
-  yellow: chroma.scale([
-    "#3D2C05",
-    "#7D5E17",
-    "#AC7A1A",
-    "#D79921",
-    "#E8AB28",
-    "#FABD2F",
-    "#F2C45F",
-    "#EBCC90",
-    "#FFFFFF",
-  ]),
-  green: chroma.scale([
-    "#32330A",
-    "#5C5D13",
-    "#797814",
-    "#98971A",
-    "#93951E",
-    "#B8BB26",
-    "#C2C359",
-    "#CCCB8D",
-    "#FFFFFF",
-  ]),
-  cyan: chroma.scale([
-    "#283D20",
-    "#47603E",
-    "#537D54",
-    "#689D6A",
-    "#719963",
-    "#8EC07C",
-    "#A1C798",
-    "#B4CEB5",
-    "#FFFFFF",
-  ]),
-  blue: chroma.scale([
-    "#103738",
-    "#214C4D",
-    "#376A6C",
-    "#458588",
-    "#688479",
-    "#83A598",
-    "#92B3AE",
-    "#A2C2C4",
-    "#FFFFFF",
-  ]),
-  violet: chroma.scale([
-    "#392228",
-    "#69434D",
-    "#8D4E6B",
-    "#B16286",
-    "#A86B7C",
-    "#D3869B",
-    "#D59BAF",
-    "#D8B1C3",
-    "#FFFFFF",
-  ]),
-  magenta: chroma.scale([
-    "#48402C",
-    "#756D59",
-    "#867A69",
-    "#A89984",
-    "#BCAF8E",
-    "#EBDBB2",
-    "#DFD3BA",
-    "#D4CCC2",
-    "#FFFFFF",
-  ]),
-});
+    neutral: chroma.scale([
+        "#282828",
+        "#3c3836",
+        "#504945",
+        "#665c54",
+        "#7C6F64",
+        "#928374",
+        "#A89984",
+        "#BDAE93",
+        "#D5C4A1",
+        "#EBDBB2",
+        "#FBF1C7",
+    ]),
+    red: chroma.scale([
+        "#4D150F",
+        "#7D241A",
+        "#A31C17",
+        "#CC241D",
+        "#C83A29",
+        "#FB4934",
+        "#F06D61",
+        "#E6928E",
+        "#FFFFFF",
+    ]),
+    orange: chroma.scale([
+        "#462307",
+        "#7F400C",
+        "#AB4A0B",
+        "#D65D0E",
+        "#CB6614",
+        "#FE8019",
+        "#F49750",
+        "#EBAE87",
+        "#FFFFFF",
+    ]),
+    yellow: chroma.scale([
+        "#3D2C05",
+        "#7D5E17",
+        "#AC7A1A",
+        "#D79921",
+        "#E8AB28",
+        "#FABD2F",
+        "#F2C45F",
+        "#EBCC90",
+        "#FFFFFF",
+    ]),
+    green: chroma.scale([
+        "#32330A",
+        "#5C5D13",
+        "#797814",
+        "#98971A",
+        "#93951E",
+        "#B8BB26",
+        "#C2C359",
+        "#CCCB8D",
+        "#FFFFFF",
+    ]),
+    cyan: chroma.scale([
+        "#283D20",
+        "#47603E",
+        "#537D54",
+        "#689D6A",
+        "#719963",
+        "#8EC07C",
+        "#A1C798",
+        "#B4CEB5",
+        "#FFFFFF",
+    ]),
+    blue: chroma.scale([
+        "#103738",
+        "#214C4D",
+        "#376A6C",
+        "#458588",
+        "#688479",
+        "#83A598",
+        "#92B3AE",
+        "#A2C2C4",
+        "#FFFFFF",
+    ]),
+    violet: chroma.scale([
+        "#392228",
+        "#69434D",
+        "#8D4E6B",
+        "#B16286",
+        "#A86B7C",
+        "#D3869B",
+        "#D59BAF",
+        "#D8B1C3",
+        "#FFFFFF",
+    ]),
+    magenta: chroma.scale([
+        "#48402C",
+        "#756D59",
+        "#867A69",
+        "#A89984",
+        "#BCAF8E",
+        "#EBDBB2",
+        "#DFD3BA",
+        "#D4CCC2",
+        "#FFFFFF",
+    ]),
+})
 
 export const light = createColorScheme(`${name} Light Medium`, true, {
-  neutral: chroma.scale([
-    "#282828",
-    "#3c3836",
-    "#504945",
-    "#665c54",
-    "#7C6F64",
-    "#928374",
-    "#A89984",
-    "#BDAE93",
-    "#D5C4A1",
-    "#EBDBB2",
-    "#FBF1C7",
-  ]),
-  red: colorRamp(chroma("#9d0006")),
-  orange: colorRamp(chroma("#af3a03")),
-  yellow: colorRamp(chroma("#b57614")),
-  green: colorRamp(chroma("#79740e")),
-  cyan: colorRamp(chroma("#427b58")),
-  blue: colorRamp(chroma("#076678")),
-  violet: colorRamp(chroma("#8f3f71")),
-  magenta: colorRamp(chroma("#d65d0e")),
-});
+    neutral: chroma.scale([
+        "#282828",
+        "#3c3836",
+        "#504945",
+        "#665c54",
+        "#7C6F64",
+        "#928374",
+        "#A89984",
+        "#BDAE93",
+        "#D5C4A1",
+        "#EBDBB2",
+        "#FBF1C7",
+    ]),
+    red: colorRamp(chroma("#9d0006")),
+    orange: colorRamp(chroma("#af3a03")),
+    yellow: colorRamp(chroma("#b57614")),
+    green: colorRamp(chroma("#79740e")),
+    cyan: colorRamp(chroma("#427b58")),
+    blue: colorRamp(chroma("#076678")),
+    violet: colorRamp(chroma("#8f3f71")),
+    magenta: colorRamp(chroma("#d65d0e")),
+})

styles/src/themes/staff/monokai.ts

@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Monokai";
-const author = "Wimer Hazenberg (http://www.monokai.nl)";
-const url = "https://base16.netlify.app/previews/base16-monokai.html";
+const name = "Monokai"
+const author = "Wimer Hazenberg (http://www.monokai.nl)"
+const url = "https://base16.netlify.app/previews/base16-monokai.html"
 const license = {
-  type: "?",
-  url: "?",
-};
+    type: "?",
+    url: "?",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#272822",
-    "#383830",
-    "#49483e",
-    "#75715e",
-    "#a59f85",
-    "#f8f8f2",
-    "#f5f4f1",
-    "#f9f8f5",
-  ]),
-  red: colorRamp(chroma("#f92672")),
-  orange: colorRamp(chroma("#fd971f")),
-  yellow: colorRamp(chroma("#f4bf75")),
-  green: colorRamp(chroma("#a6e22e")),
-  cyan: colorRamp(chroma("#a1efe4")),
-  blue: colorRamp(chroma("#66d9ef")),
-  violet: colorRamp(chroma("#ae81ff")),
-  magenta: colorRamp(chroma("#cc6633")),
-});
+    neutral: chroma.scale([
+        "#272822",
+        "#383830",
+        "#49483e",
+        "#75715e",
+        "#a59f85",
+        "#f8f8f2",
+        "#f5f4f1",
+        "#f9f8f5",
+    ]),
+    red: colorRamp(chroma("#f92672")),
+    orange: colorRamp(chroma("#fd971f")),
+    yellow: colorRamp(chroma("#f4bf75")),
+    green: colorRamp(chroma("#a6e22e")),
+    cyan: colorRamp(chroma("#a1efe4")),
+    blue: colorRamp(chroma("#66d9ef")),
+    violet: colorRamp(chroma("#ae81ff")),
+    magenta: colorRamp(chroma("#cc6633")),
+})

styles/src/themes/staff/nord.ts

@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Nord";
-const author = "arcticicestudio";
-const url = "https://www.nordtheme.com/";
+const name = "Nord"
+const author = "arcticicestudio"
+const url = "https://www.nordtheme.com/"
 const license = {
-  type: "MIT",
-  url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md",
-};
+    type: "MIT",
+    url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#2E3440",
-    "#3B4252",
-    "#434C5E",
-    "#4C566A",
-    "#D8DEE9",
-    "#E5E9F0",
-    "#ECEFF4",
-    "#8FBCBB",
-  ]),
-  red: colorRamp(chroma("#88C0D0")),
-  orange: colorRamp(chroma("#81A1C1")),
-  yellow: colorRamp(chroma("#5E81AC")),
-  green: colorRamp(chroma("#BF616A")),
-  cyan: colorRamp(chroma("#D08770")),
-  blue: colorRamp(chroma("#EBCB8B")),
-  violet: colorRamp(chroma("#A3BE8C")),
-  magenta: colorRamp(chroma("#B48EAD")),
-});
+    neutral: chroma.scale([
+        "#2E3440",
+        "#3B4252",
+        "#434C5E",
+        "#4C566A",
+        "#D8DEE9",
+        "#E5E9F0",
+        "#ECEFF4",
+        "#8FBCBB",
+    ]),
+    red: colorRamp(chroma("#88C0D0")),
+    orange: colorRamp(chroma("#81A1C1")),
+    yellow: colorRamp(chroma("#5E81AC")),
+    green: colorRamp(chroma("#BF616A")),
+    cyan: colorRamp(chroma("#D08770")),
+    blue: colorRamp(chroma("#EBCB8B")),
+    violet: colorRamp(chroma("#A3BE8C")),
+    magenta: colorRamp(chroma("#B48EAD")),
+})

styles/src/themes/staff/seti-ui.ts

@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Seti UI";
-const author = "jesseweed";
-const url = "https://github.com/jesseweed/seti-ui";
+const name = "Seti UI"
+const author = "jesseweed"
+const url = "https://github.com/jesseweed/seti-ui"
 const license = {
-  type: "MIT",
-  url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md",
-};
+    type: "MIT",
+    url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#151718",
-    "#262B30",
-    "#1E2326",
-    "#41535B",
-    "#43a5d5",
-    "#d6d6d6",
-    "#eeeeee",
-    "#ffffff",
-  ]),
-  red: colorRamp(chroma("#Cd3f45")),
-  orange: colorRamp(chroma("#db7b55")),
-  yellow: colorRamp(chroma("#e6cd69")),
-  green: colorRamp(chroma("#9fca56")),
-  cyan: colorRamp(chroma("#55dbbe")),
-  blue: colorRamp(chroma("#55b5db")),
-  violet: colorRamp(chroma("#a074c4")),
-  magenta: colorRamp(chroma("#8a553f")),
-});
+    neutral: chroma.scale([
+        "#151718",
+        "#262B30",
+        "#1E2326",
+        "#41535B",
+        "#43a5d5",
+        "#d6d6d6",
+        "#eeeeee",
+        "#ffffff",
+    ]),
+    red: colorRamp(chroma("#Cd3f45")),
+    orange: colorRamp(chroma("#db7b55")),
+    yellow: colorRamp(chroma("#e6cd69")),
+    green: colorRamp(chroma("#9fca56")),
+    cyan: colorRamp(chroma("#55dbbe")),
+    blue: colorRamp(chroma("#55b5db")),
+    violet: colorRamp(chroma("#a074c4")),
+    magenta: colorRamp(chroma("#8a553f")),
+})

styles/src/themes/staff/tokyo-night-storm.ts

@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Tokyo Night Storm";
-const author = "folke";
-const url = "https://github.com/folke/tokyonight.nvim";
+const name = "Tokyo Night Storm"
+const author = "folke"
+const url = "https://github.com/folke/tokyonight.nvim"
 const license = {
-  type: "MIT",
-  url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE",
-};
+    type: "MIT",
+    url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#24283B",
-    "#16161E",
-    "#343A52",
-    "#444B6A",
-    "#787C99",
-    "#A9B1D6",
-    "#CBCCD1",
-    "#D5D6DB",
-  ]),
-  red: colorRamp(chroma("#C0CAF5")),
-  orange: colorRamp(chroma("#A9B1D6")),
-  yellow: colorRamp(chroma("#0DB9D7")),
-  green: colorRamp(chroma("#9ECE6A")),
-  cyan: colorRamp(chroma("#B4F9F8")),
-  blue: colorRamp(chroma("#2AC3DE")),
-  violet: colorRamp(chroma("#BB9AF7")),
-  magenta: colorRamp(chroma("#F7768E")),
-});
+    neutral: chroma.scale([
+        "#24283B",
+        "#16161E",
+        "#343A52",
+        "#444B6A",
+        "#787C99",
+        "#A9B1D6",
+        "#CBCCD1",
+        "#D5D6DB",
+    ]),
+    red: colorRamp(chroma("#C0CAF5")),
+    orange: colorRamp(chroma("#A9B1D6")),
+    yellow: colorRamp(chroma("#0DB9D7")),
+    green: colorRamp(chroma("#9ECE6A")),
+    cyan: colorRamp(chroma("#B4F9F8")),
+    blue: colorRamp(chroma("#2AC3DE")),
+    violet: colorRamp(chroma("#BB9AF7")),
+    magenta: colorRamp(chroma("#F7768E")),
+})

styles/src/themes/staff/tokyo-night.ts

@@ -1,53 +1,53 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Tokyo";
-const author = "folke";
-const url = "https://github.com/folke/tokyonight.nvim";
+const name = "Tokyo"
+const author = "folke"
+const url = "https://github.com/folke/tokyonight.nvim"
 const license = {
-  type: "Apache License 2.0",
-  url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE",
-};
+    type: "Apache License 2.0",
+    url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name} Night`, false, {
-  neutral: chroma.scale([
-    "#1A1B26",
-    "#16161E",
-    "#2F3549",
-    "#444B6A",
-    "#787C99",
-    "#A9B1D6",
-    "#CBCCD1",
-    "#D5D6DB",
-  ]),
-  red: colorRamp(chroma("#C0CAF5")),
-  orange: colorRamp(chroma("#A9B1D6")),
-  yellow: colorRamp(chroma("#0DB9D7")),
-  green: colorRamp(chroma("#9ECE6A")),
-  cyan: colorRamp(chroma("#B4F9F8")),
-  blue: colorRamp(chroma("#2AC3DE")),
-  violet: colorRamp(chroma("#BB9AF7")),
-  magenta: colorRamp(chroma("#F7768E")),
-});
+    neutral: chroma.scale([
+        "#1A1B26",
+        "#16161E",
+        "#2F3549",
+        "#444B6A",
+        "#787C99",
+        "#A9B1D6",
+        "#CBCCD1",
+        "#D5D6DB",
+    ]),
+    red: colorRamp(chroma("#C0CAF5")),
+    orange: colorRamp(chroma("#A9B1D6")),
+    yellow: colorRamp(chroma("#0DB9D7")),
+    green: colorRamp(chroma("#9ECE6A")),
+    cyan: colorRamp(chroma("#B4F9F8")),
+    blue: colorRamp(chroma("#2AC3DE")),
+    violet: colorRamp(chroma("#BB9AF7")),
+    magenta: colorRamp(chroma("#F7768E")),
+})
 
 export const light = createColorScheme(`${name} Day`, true, {
-  neutral: chroma.scale([
-    "#1A1B26",
-    "#1A1B26",
-    "#343B59",
-    "#4C505E",
-    "#9699A3",
-    "#DFE0E5",
-    "#CBCCD1",
-    "#D5D6DB",
-  ]),
-  red: colorRamp(chroma("#343B58")),
-  orange: colorRamp(chroma("#965027")),
-  yellow: colorRamp(chroma("#166775")),
-  green: colorRamp(chroma("#485E30")),
-  cyan: colorRamp(chroma("#3E6968")),
-  blue: colorRamp(chroma("#34548A")),
-  violet: colorRamp(chroma("#5A4A78")),
-  magenta: colorRamp(chroma("#8C4351")),
-});
+    neutral: chroma.scale([
+        "#1A1B26",
+        "#1A1B26",
+        "#343B59",
+        "#4C505E",
+        "#9699A3",
+        "#DFE0E5",
+        "#CBCCD1",
+        "#D5D6DB",
+    ]),
+    red: colorRamp(chroma("#343B58")),
+    orange: colorRamp(chroma("#965027")),
+    yellow: colorRamp(chroma("#166775")),
+    green: colorRamp(chroma("#485E30")),
+    cyan: colorRamp(chroma("#3E6968")),
+    blue: colorRamp(chroma("#34548A")),
+    violet: colorRamp(chroma("#5A4A78")),
+    magenta: colorRamp(chroma("#8C4351")),
+})

styles/src/themes/staff/zed-pro.ts

@@ -1,36 +1,36 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Zed Pro";
+const name = "Zed Pro"
 const author = "Nate Butler"
 const url = "https://github.com/iamnbutler"
 const license = {
-  type: "?",
-  url: "?",
-};
+    type: "?",
+    url: "?",
+}
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#101010",
-      "#1C1C1C",
-      "#212121",
-      "#2D2D2D",
-      "#B9B9B9",
-      "#DADADA",
-      "#E6E6E6",
-      "#FFFFFF",
-    ])
-    .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
-  red: colorRamp(chroma("#DC604F")),
-  orange: colorRamp(chroma("#DE782F")),
-  yellow: colorRamp(chroma("#E0B750")),
-  green: colorRamp(chroma("#2A643D")),
-  cyan: colorRamp(chroma("#215050")),
-  blue: colorRamp(chroma("#2F6DB7")),
-  violet: colorRamp(chroma("#5874C1")),
-  magenta: colorRamp(chroma("#DE9AB8")),
-};
+    neutral: chroma
+        .scale([
+            "#101010",
+            "#1C1C1C",
+            "#212121",
+            "#2D2D2D",
+            "#B9B9B9",
+            "#DADADA",
+            "#E6E6E6",
+            "#FFFFFF",
+        ])
+        .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
+    red: colorRamp(chroma("#DC604F")),
+    orange: colorRamp(chroma("#DE782F")),
+    yellow: colorRamp(chroma("#E0B750")),
+    green: colorRamp(chroma("#2A643D")),
+    cyan: colorRamp(chroma("#215050")),
+    blue: colorRamp(chroma("#2F6DB7")),
+    violet: colorRamp(chroma("#5874C1")),
+    magenta: colorRamp(chroma("#DE9AB8")),
+}
 
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)

styles/src/themes/staff/zenburn.ts

@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
 
-const name = "Zenburn";
-const author = "elnawe";
-const url = "https://github.com/elnawe/base16-zenburn-scheme";
+const name = "Zenburn"
+const author = "elnawe"
+const url = "https://github.com/elnawe/base16-zenburn-scheme"
 const license = {
-  type: "None",
-  url: "",
-};
+    type: "None",
+    url: "",
+}
 
 // `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name}`, false, {
-  neutral: chroma.scale([
-    "#383838",
-    "#404040",
-    "#606060",
-    "#6f6f6f",
-    "#808080",
-    "#dcdccc",
-    "#c0c0c0",
-    "#ffffff",
-  ]),
-  red: colorRamp(chroma("#dca3a3")),
-  orange: colorRamp(chroma("#dfaf8f")),
-  yellow: colorRamp(chroma("#e0cf9f")),
-  green: colorRamp(chroma("#5f7f5f")),
-  cyan: colorRamp(chroma("#93e0e3")),
-  blue: colorRamp(chroma("#7cb8bb")),
-  violet: colorRamp(chroma("#dc8cc3")),
-  magenta: colorRamp(chroma("#000000")),
-});
+    neutral: chroma.scale([
+        "#383838",
+        "#404040",
+        "#606060",
+        "#6f6f6f",
+        "#808080",
+        "#dcdccc",
+        "#c0c0c0",
+        "#ffffff",
+    ]),
+    red: colorRamp(chroma("#dca3a3")),
+    orange: colorRamp(chroma("#dfaf8f")),
+    yellow: colorRamp(chroma("#e0cf9f")),
+    green: colorRamp(chroma("#5f7f5f")),
+    cyan: colorRamp(chroma("#93e0e3")),
+    blue: colorRamp(chroma("#7cb8bb")),
+    violet: colorRamp(chroma("#dc8cc3")),
+    magenta: colorRamp(chroma("#000000")),
+})

styles/src/themes/summercamp.ts

@@ -1,40 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
 
-const name = "Summercamp";
+const name = "Summercamp"
 
 const ramps = {
-  neutral: chroma
-    .scale([
-      "#1c1810",
-      "#2a261c",
-      "#3a3527",
-      "#3a3527",
-      "#5f5b45",
-      "#736e55",
-      "#bab696",
-      "#f8f5de",
-    ])
-    .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
-  red: colorRamp(chroma("#e35142")),
-  orange: colorRamp(chroma("#fba11b")),
-  yellow: colorRamp(chroma("#f2ff27")),
-  green: colorRamp(chroma("#5ceb5a")),
-  cyan: colorRamp(chroma("#5aebbc")),
-  blue: colorRamp(chroma("#489bf0")),
-  violet: colorRamp(chroma("#FF8080")),
-  magenta: colorRamp(chroma("#F69BE7")),
-};
+    neutral: chroma
+        .scale([
+            "#1c1810",
+            "#2a261c",
+            "#3a3527",
+            "#3a3527",
+            "#5f5b45",
+            "#736e55",
+            "#bab696",
+            "#f8f5de",
+        ])
+        .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
+    red: colorRamp(chroma("#e35142")),
+    orange: colorRamp(chroma("#fba11b")),
+    yellow: colorRamp(chroma("#f2ff27")),
+    green: colorRamp(chroma("#5ceb5a")),
+    cyan: colorRamp(chroma("#5aebbc")),
+    blue: colorRamp(chroma("#489bf0")),
+    violet: colorRamp(chroma("#FF8080")),
+    magenta: colorRamp(chroma("#F69BE7")),
+}
 
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
 export const meta: Meta = {
-  name,
-  author: "zoefiri",
-  url: "https://github.com/zoefiri/base16-sc",
-  license: {
-    SPDX: "MIT",
-    https_url: "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
-    license_checksum: "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf"
-  }
-}
+    name,
+    author: "zoefiri",
+    url: "https://github.com/zoefiri/base16-sc",
+    license: {
+        SPDX: "MIT",
+        https_url:
+            "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
+        license_checksum:
+            "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf",
+    },
+}

styles/src/utils/color.ts

@@ -1,5 +1,5 @@
-import chroma from "chroma-js";
+import chroma from "chroma-js"
 
 export function withOpacity(color: string, opacity: number): string {
-  return chroma(color).alpha(opacity).hex();
+    return chroma(color).alpha(opacity).hex()
 }

styles/src/utils/snakeCase.ts

@@ -1,35 +1,35 @@
-import { snakeCase } from "case-anything";
+import { snakeCase } from "case-anything"
 
 // https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
 
 // Typescript magic to convert any string from camelCase to snake_case at compile time
 type SnakeCase<S> = S extends string
-  ? S extends `${infer T}${infer U}`
-    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+    ? S extends `${infer T}${infer U}`
+        ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+        : S
     : S
-  : S;
 
 type SnakeCased<Type> = {
-  [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>;
-};
+    [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
+}
 
 export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
-  const snakeObject: any = {};
-  for (const key in object) {
-    snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
-      snakeCaseValue(object[key]);
-  }
-  return snakeObject;
+    const snakeObject: any = {}
+    for (const key in object) {
+        snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
+            snakeCaseValue(object[key])
+    }
+    return snakeObject
 }
 
 function snakeCaseValue(value: any): any {
-  if (typeof value === "object") {
-    if (Array.isArray(value)) {
-      return value.map(snakeCaseValue);
+    if (typeof value === "object") {
+        if (Array.isArray(value)) {
+            return value.map(snakeCaseValue)
+        } else {
+            return snakeCaseTree(value)
+        }
     } else {
-      return snakeCaseTree(value);
+        return value
     }
-  } else {
-    return value;
-  }
 }

styles/tsconfig.json

@@ -1,12 +1,12 @@
 {
-  "compilerOptions": {
-    "target": "es2015",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "removeComments": true,
-    "preserveConstEnums": true,
-    "sourceMap": true
-  },
-  "exclude": ["node_modules"]
+    "compilerOptions": {
+        "target": "es2015",
+        "module": "commonjs",
+        "esModuleInterop": true,
+        "noImplicitAny": true,
+        "removeComments": true,
+        "preserveConstEnums": true,
+        "sourceMap": true
+    },
+    "exclude": ["node_modules"]
 }