From 10a30cf330da842d79bb075a4abff55688b34a5c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sat, 25 Feb 2023 11:46:33 -0500 Subject: [PATCH] Format `styles` with updated prettier config In the system color PR I updated the prettier config to match what we use on zed.dev. I didn't want to format all of styles as it would add a lot of unrelated line changes to that PR. Doing that format now. --- styles/src/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 | 304 +++++----- styles/src/styleTree/contactFinder.ts | 128 ++-- 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 | 557 +++++++++--------- styles/src/styleTree/feedback.ts | 65 +- styles/src/styleTree/hoverPopover.ts | 82 +-- .../src/styleTree/incomingCallNotification.ts | 94 +-- styles/src/styleTree/picker.ts | 146 ++--- styles/src/styleTree/projectDiagnostics.ts | 20 +- styles/src/styleTree/projectPanel.ts | 110 ++-- .../styleTree/projectSharedNotification.ts | 94 +-- styles/src/styleTree/search.ts | 178 +++--- styles/src/styleTree/sharedScreen.ts | 12 +- .../styleTree/simpleMessageNotification.ts | 58 +- styles/src/styleTree/statusBar.ts | 216 +++---- 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 | 502 ++++++++-------- 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 | 555 ++++++++--------- styles/src/themes/common/colorScheme.ts | 120 ++-- styles/src/themes/common/ramps.ts | 338 +++++------ 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 | 71 +-- styles/src/themes/solarized.ts | 77 +-- 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, 3773 insertions(+), 3712 deletions(-) diff --git a/styles/src/buildLicenses.ts b/styles/src/buildLicenses.ts index 5026faef4e..b1e130e800 100644 --- a/styles/src/buildLicenses.ts +++ b/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) +}) diff --git a/styles/src/buildThemes.ts b/styles/src/buildThemes.ts index 4bb7b8fc09..2a63a407cc 100644 --- a/styles/src/buildThemes.ts +++ b/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) diff --git a/styles/src/colorSchemes.ts b/styles/src/colorSchemes.ts index c7e1d4ead7..4d2d7f6e02 100644 --- a/styles/src/colorSchemes.ts +++ b/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) diff --git a/styles/src/common.ts b/styles/src/common.ts index e936fb51be..1b4fb6b37b 100644 --- a/styles/src/common.ts +++ b/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, +} diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index 5d04050fe1..dc57468df6 100644 --- a/styles/src/styleTree/app.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 0e0c10bed0..038a009007 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/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), + }, + }, + } } diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index 847b937416..edbced8323 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -1,210 +1,210 @@ -import { fontFamilies, fontSizes, FontWeight } from "../common"; -import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"; +import { fontFamilies, fontSizes, FontWeight } from "../common" +import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme" function isStyleSet(key: any): key is StyleSets { - return [ - "base", - "variant", - "on", - "accent", - "positive", - "warning", - "negative", - ].includes(key); + return [ + "base", + "variant", + "on", + "accent", + "positive", + "warning", + "negative", + ].includes(key) } function isStyle(key: any): key is Styles { - return [ - "default", - "active", - "disabled", - "hovered", - "pressed", - "inverted", - ].includes(key); + return [ + "default", + "active", + "disabled", + "hovered", + "pressed", + "inverted", + ].includes(key) } function getStyle( - layer: Layer, - possibleStyleSetOrStyle?: any, - possibleStyle?: any + layer: Layer, + possibleStyleSetOrStyle?: any, + possibleStyle?: any ): Style { - let styleSet: StyleSets = "base"; - let style: Styles = "default"; - if (isStyleSet(possibleStyleSetOrStyle)) { - styleSet = possibleStyleSetOrStyle; - } else if (isStyle(possibleStyleSetOrStyle)) { - style = possibleStyleSetOrStyle; - } + let styleSet: StyleSets = "base" + let style: Styles = "default" + if (isStyleSet(possibleStyleSetOrStyle)) { + styleSet = possibleStyleSetOrStyle + } else if (isStyle(possibleStyleSetOrStyle)) { + style = possibleStyleSetOrStyle + } - if (isStyle(possibleStyle)) { - style = possibleStyle; - } + if (isStyle(possibleStyle)) { + style = possibleStyle + } - return layer[styleSet][style]; + return layer[styleSet][style] } -export function background(layer: Layer, style?: Styles): string; +export function background(layer: Layer, style?: Styles): string export function background( - layer: Layer, - styleSet?: StyleSets, - style?: Styles -): string; + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string export function background( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).background; + return getStyle(layer, styleSetOrStyles, style).background } -export function borderColor(layer: Layer, style?: Styles): string; +export function borderColor(layer: Layer, style?: Styles): string export function borderColor( - layer: Layer, - styleSet?: StyleSets, - style?: Styles -): string; + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string export function borderColor( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).border; + return getStyle(layer, styleSetOrStyles, style).border } -export function foreground(layer: Layer, style?: Styles): string; +export function foreground(layer: Layer, style?: Styles): string export function foreground( - layer: Layer, - styleSet?: StyleSets, - style?: Styles -): string; + layer: Layer, + styleSet?: StyleSets, + style?: Styles +): string export function foreground( - layer: Layer, - styleSetOrStyles?: StyleSets | Styles, - style?: Styles + layer: Layer, + styleSetOrStyles?: StyleSets | Styles, + style?: Styles ): string { - return getStyle(layer, styleSetOrStyles, style).foreground; + return getStyle(layer, styleSetOrStyles, style).foreground } interface Text { - family: keyof typeof fontFamilies; - color: string; - size: number; - weight?: FontWeight; - underline?: boolean; + family: keyof typeof fontFamilies + color: string + size: number + weight?: FontWeight + underline?: boolean } interface TextProperties { - size?: keyof typeof fontSizes; - weight?: FontWeight; - underline?: boolean; - color?: string; + size?: keyof typeof fontSizes + weight?: FontWeight + underline?: boolean + color?: string } export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - style: Styles, - properties?: TextProperties -): Text; + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + style: Styles, + properties?: TextProperties +): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSet: StyleSets, - properties?: TextProperties -): Text; + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSet: StyleSets, + properties?: TextProperties +): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - style: Styles, - properties?: TextProperties -): Text; + layer: Layer, + fontFamily: keyof typeof fontFamilies, + style: Styles, + properties?: TextProperties +): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - properties?: TextProperties -): Text; + layer: Layer, + fontFamily: keyof typeof fontFamilies, + properties?: TextProperties +): Text export function text( - layer: Layer, - fontFamily: keyof typeof fontFamilies, - styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, - styleOrProperties?: Styles | TextProperties, - properties?: TextProperties + layer: Layer, + fontFamily: keyof typeof fontFamilies, + styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, + styleOrProperties?: Styles | TextProperties, + properties?: TextProperties ) { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties); + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties; - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties; - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - let size = fontSizes[properties?.size || "sm"]; - let color = properties?.color || style.foreground; + let size = fontSizes[properties?.size || "sm"] + let color = properties?.color || style.foreground - return { - family: fontFamilies[fontFamily], - ...properties, - color, - size, - }; + return { + family: fontFamilies[fontFamily], + ...properties, + color, + size, + } } export interface Border { - color: string; - width: number; - top?: boolean; - bottom?: boolean; - left?: boolean; - right?: boolean; - overlay?: boolean; + color: string + width: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export interface BorderProperties { - width?: number; - top?: boolean; - bottom?: boolean; - left?: boolean; - right?: boolean; - overlay?: boolean; + width?: number + top?: boolean + bottom?: boolean + left?: boolean + right?: boolean + overlay?: boolean } export function border( - layer: Layer, - styleSet: StyleSets, - style: Styles, - properties?: BorderProperties -): Border; + layer: Layer, + styleSet: StyleSets, + style: Styles, + properties?: BorderProperties +): Border export function border( - layer: Layer, - styleSet: StyleSets, - properties?: BorderProperties -): Border; + layer: Layer, + styleSet: StyleSets, + properties?: BorderProperties +): Border export function border( - layer: Layer, - style: Styles, - properties?: BorderProperties -): Border; -export function border(layer: Layer, properties?: BorderProperties): Border; + layer: Layer, + style: Styles, + properties?: BorderProperties +): Border +export function border(layer: Layer, properties?: BorderProperties): Border export function border( - layer: Layer, - styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, - styleOrProperties?: Styles | BorderProperties, - properties?: BorderProperties + layer: Layer, + styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, + styleOrProperties?: Styles | BorderProperties, + properties?: BorderProperties ): Border { - let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties); + let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties) - if (typeof styleSetStyleOrProperties === "object") { - properties = styleSetStyleOrProperties; - } - if (typeof styleOrProperties === "object") { - properties = styleOrProperties; - } + if (typeof styleSetStyleOrProperties === "object") { + properties = styleSetStyleOrProperties + } + if (typeof styleOrProperties === "object") { + properties = styleOrProperties + } - return { - color: style.border, - width: 1, - ...properties, - }; + return { + color: style.border, + width: 1, + ...properties, + } } diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts index d696f2c4b8..42eb3b9949 100644 --- a/styles/src/styleTree/contactFinder.ts +++ b/styles/src/styleTree/contactFinder.ts @@ -1,70 +1,70 @@ -import picker from "./picker"; -import { ColorScheme } from "../themes/common/colorScheme"; -import { background, border, foreground, text } from "./components"; +import picker from "./picker" +import { ColorScheme } from "../themes/common/colorScheme" +import { background, border, foreground, text } from "./components" export default function contactFinder(colorScheme: ColorScheme) { - let layer = colorScheme.middle; + let layer = colorScheme.middle - const sideMargin = 6; - const contactButton = { - background: background(layer, "variant"), - color: foreground(layer, "variant"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - }; - - const pickerStyle = picker(colorScheme); - const pickerInput = { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono",), - placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }), - selection: colorScheme.players[0], - border: border(layer), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: sideMargin, - right: sideMargin, + const sideMargin = 6 + const contactButton = { + background: background(layer, "variant"), + color: foreground(layer, "variant"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, } - }; - return { - picker: { - emptyContainer: {}, - item: { - ...pickerStyle.item, - margin: { left: sideMargin, right: sideMargin }, - }, - noMatches: pickerStyle.noMatches, - inputEditor: pickerInput, - emptyInputEditor: pickerInput - }, - rowHeight: 28, - contactAvatar: { - cornerRadius: 10, - width: 18, - }, - contactUsername: { - padding: { - left: 8, - }, - }, - contactButton: { - ...contactButton, - hover: { - background: background(layer, "variant", "hovered"), - }, - }, - disabledContactButton: { - ...contactButton, - background: background(layer, "disabled"), - color: foreground(layer, "disabled"), - }, - }; + const pickerStyle = picker(colorScheme) + const pickerInput = { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono"), + placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }), + selection: colorScheme.players[0], + border: border(layer), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: sideMargin, + right: sideMargin, + }, + } + + return { + picker: { + emptyContainer: {}, + item: { + ...pickerStyle.item, + margin: { left: sideMargin, right: sideMargin }, + }, + noMatches: pickerStyle.noMatches, + inputEditor: pickerInput, + emptyInputEditor: pickerInput, + }, + rowHeight: 28, + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactUsername: { + padding: { + left: 8, + }, + }, + contactButton: { + ...contactButton, + hover: { + background: background(layer, "variant", "hovered"), + }, + }, + disabledContactButton: { + ...contactButton, + background: background(layer, "disabled"), + color: foreground(layer, "disabled"), + }, + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 456786c4be..65dd1c8654 100644 --- a/styles/src/styleTree/contactList.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/contactNotification.ts b/styles/src/styleTree/contactNotification.ts index e3f15baa32..186f7e8685 100644 --- a/styles/src/styleTree/contactNotification.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/contactsPopover.ts b/styles/src/styleTree/contactsPopover.ts index 50a8251737..9a299d20d6 100644 --- a/styles/src/styleTree/contactsPopover.ts +++ b/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" }), + }, + }, + } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 49f3a3b472..30f44a6314 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/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 }, + }, + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index e96cab0316..15818ad7f9 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -1,285 +1,290 @@ -import { fontWeights } from "../common"; -import { withOpacity } from "../utils/color"; -import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"; -import { - background, - border, - borderColor, - foreground, - text, -} from "./components"; -import hoverPopover from "./hoverPopover"; +import { fontWeights } from "../common" +import { withOpacity } from "../utils/color" +import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme" +import { background, border, borderColor, foreground, text } from "./components" +import hoverPopover from "./hoverPopover" export default function editor(colorScheme: ColorScheme) { - let layer = colorScheme.highest; + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - }; + const autocompleteItem = { + cornerRadius: 6, + padding: { + bottom: 2, + left: 6, + right: 6, + top: 2, + }, + } + + function diagnostic(layer: Layer, styleSet: StyleSets) { + return { + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), + }, + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), + }, + } + } + + const syntax = { + primary: { + color: colorScheme.ramps.neutral(1).hex(), + weight: fontWeights.normal, + }, + "variable.special": { + // Highlights for self, this, etc + color: colorScheme.ramps.blue(0.7).hex(), + weight: fontWeights.normal, + }, + comment: { + color: colorScheme.ramps.neutral(0.71).hex(), + weight: fontWeights.normal, + }, + punctuation: { + color: colorScheme.ramps.neutral(0.86).hex(), + weight: fontWeights.normal, + }, + constant: { + color: colorScheme.ramps.green(0.5).hex(), + weight: fontWeights.normal, + }, + keyword: { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.normal, + }, + function: { + color: colorScheme.ramps.yellow(0.5).hex(), + weight: fontWeights.normal, + }, + type: { + color: colorScheme.ramps.cyan(0.5).hex(), + weight: fontWeights.normal, + }, + constructor: { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.normal, + }, + variant: { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.normal, + }, + property: { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.normal, + }, + enum: { + color: colorScheme.ramps.orange(0.5).hex(), + weight: fontWeights.normal, + }, + operator: { + color: colorScheme.ramps.orange(0.5).hex(), + weight: fontWeights.normal, + }, + string: { + color: colorScheme.ramps.orange(0.5).hex(), + weight: fontWeights.normal, + }, + number: { + color: colorScheme.ramps.green(0.5).hex(), + weight: fontWeights.normal, + }, + boolean: { + color: colorScheme.ramps.green(0.5).hex(), + weight: fontWeights.normal, + }, + predictive: { + color: colorScheme.ramps.neutral(0.57).hex(), + weight: fontWeights.normal, + }, + title: { + color: colorScheme.ramps.yellow(0.5).hex(), + weight: fontWeights.bold, + }, + emphasis: { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.normal, + }, + "emphasis.strong": { + color: colorScheme.ramps.blue(0.5).hex(), + weight: fontWeights.bold, + }, + linkUri: { + color: colorScheme.ramps.green(0.5).hex(), + weight: fontWeights.normal, + underline: true, + }, + linkText: { + color: colorScheme.ramps.orange(0.5).hex(), + weight: fontWeights.normal, + italic: true, + }, + } - function diagnostic(layer: Layer, styleSet: StyleSets) { return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, - }; - } - - const syntax = { - primary: { - color: colorScheme.ramps.neutral(1).hex(), - weight: fontWeights.normal, - }, - "variable.special": { - // Highlights for self, this, etc - color: colorScheme.ramps.blue(0.7).hex(), - weight: fontWeights.normal, - }, - comment: { - color: colorScheme.ramps.neutral(0.71).hex(), - weight: fontWeights.normal, - }, - punctuation: { - color: colorScheme.ramps.neutral(0.86).hex(), - weight: fontWeights.normal, - }, - constant: { - color: colorScheme.ramps.green(0.5).hex(), - weight: fontWeights.normal, - }, - keyword: { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.normal, - }, - function: { - color: colorScheme.ramps.yellow(0.5).hex(), - weight: fontWeights.normal, - }, - type: { - color: colorScheme.ramps.cyan(0.5).hex(), - weight: fontWeights.normal, - }, - constructor: { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.normal, - }, - variant: { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.normal, - }, - property: { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.normal, - }, - enum: { - color: colorScheme.ramps.orange(0.5).hex(), - weight: fontWeights.normal, - }, - operator: { - color: colorScheme.ramps.orange(0.5).hex(), - weight: fontWeights.normal, - }, - string: { - color: colorScheme.ramps.orange(0.5).hex(), - weight: fontWeights.normal, - }, - number: { - color: colorScheme.ramps.green(0.5).hex(), - weight: fontWeights.normal, - }, - boolean: { - color: colorScheme.ramps.green(0.5).hex(), - weight: fontWeights.normal, - }, - predictive: { - color: colorScheme.ramps.neutral(0.57).hex(), - weight: fontWeights.normal, - }, - title: { - color: colorScheme.ramps.yellow(0.5).hex(), - weight: fontWeights.bold, - }, - emphasis: { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.normal, - }, - "emphasis.strong": { - color: colorScheme.ramps.blue(0.5).hex(), - weight: fontWeights.bold, - }, - linkUri: { - color: colorScheme.ramps.green(0.5).hex(), - weight: fontWeights.normal, - underline: true, - }, - linkText: { - color: colorScheme.ramps.orange(0.5).hex(), - weight: fontWeights.normal, - italic: true, - }, - }; - - return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - codeActions: { - indicator: foreground(layer, "variant"), - verticalScale: 0.55, - }, - diff: { - deleted: foreground(layer, "negative"), - modified: foreground(layer, "warning"), - inserted: foreground(layer, "positive"), - removedWidthEm: 0.275, - widthEm: 0.16, - cornerRadius: 0.05, - }, - /** Highlights matching occurences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground(colorScheme.middle, "accent", "hovered"), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground(colorScheme.middle, "accent", "active"), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + codeActions: { + indicator: foreground(layer, "variant"), + verticalScale: 0.55, }, - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, + diff: { + deleted: foreground(layer, "negative"), + modified: foreground(layer, "warning"), + inserted: foreground(layer, "positive"), + removedWidthEm: 0.275, + widthEm: 0.16, + cornerRadius: 0.05, }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, - cornerRadius: 6, - padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, - }, - hover: { - background: background(layer, "on", "hovered"), - }, - }, - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), - }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.4), - border: { - width: 1, - color: borderColor(layer, "variant"), + /** Highlights matching occurences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 + ), + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, }, - }, - }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, - }, - syntax, - }; + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, + }, + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, + }, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, + }, + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, + }, + jumpIcon: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + }, + hover: { + background: background(layer, "on", "hovered"), + }, + }, + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.4), + border: { + width: 1, + color: borderColor(layer, "variant"), + }, + }, + }, + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 46cb867ad9..9d09058842 100644 --- a/styles/src/styleTree/feedback.ts +++ b/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" }), + } } diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts index ab4beee11b..032c53112b 100644 --- a/styles/src/styleTree/hoverPopover.ts +++ b/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 + } } diff --git a/styles/src/styleTree/incomingCallNotification.ts b/styles/src/styleTree/incomingCallNotification.ts index 2540e5e78a..8a57554fce 100644 --- a/styles/src/styleTree/incomingCallNotification.ts +++ b/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", + }), + }, + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index d124ea180e..2a6c3a0caf 100644 --- a/styles/src/styleTree/picker.ts +++ b/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, + }, + }, + } } diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts index c80a5e1052..127cbdb353 100644 --- a/styles/src/styleTree/projectDiagnostics.ts +++ b/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" }), + } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 357070e674..90e0c82f5b 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/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], + }, + } } diff --git a/styles/src/styleTree/projectSharedNotification.ts b/styles/src/styleTree/projectSharedNotification.ts index 05542ca20c..af731f8850 100644 --- a/styles/src/styleTree/projectSharedNotification.ts +++ b/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", + }), + }, + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 5d5f2111dc..7a00b93278 100644 --- a/styles/src/styleTree/search.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/sharedScreen.ts b/styles/src/styleTree/sharedScreen.ts index 8444df7418..cd0d44236e 100644 --- a/styles/src/styleTree/sharedScreen.ts +++ b/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), + } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 2697bedc77..36b295c640 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index bd9a9e2f00..a60a55df1e 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,118 +1,118 @@ -import { ColorScheme } from "../themes/common/colorScheme"; -import { background, border, foreground, text } from "./components"; +import { ColorScheme } from "../themes/common/colorScheme" +import { background, border, foreground, text } from "./components" export default function statusBar(colorScheme: ColorScheme) { - let layer = colorScheme.lowest; + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - }; - - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - }; - - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer), - hover: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer), - }, - }, - diagnosticMessage: { - ...text(layer, "sans"), - hover: text(layer, "sans", "hovered"), - }, - feedback: { - ...text(layer, "sans", "variant"), - hover: text(layer, "sans", "hovered"), - }, - diagnosticSummary: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { + const statusContainer = { cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - }, - hover: { - iconColorOk: foreground(layer, "on"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - background: background(layer, "on", "hovered"), + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } + + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } + + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer), + hover: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer), + }, }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), + diagnosticMessage: { + ...text(layer, "sans"), + hover: text(layer, "sans", "hovered"), }, - }, - }, - sidebarButtons: { - groupLeft: {}, - groupRight: {}, - item: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - hover: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), + feedback: { + ...text(layer, "sans", "variant"), + hover: text(layer, "sans", "hovered"), }, - active: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), + diagnosticSummary: { + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + }, + hover: { + iconColorOk: foreground(layer, "on"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + background: background(layer, "on", "hovered"), + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + }, + }, }, - }, - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, - }, - }; + sidebarButtons: { + groupLeft: {}, + groupRight: {}, + item: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + hover: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), + }, + active: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + }, + }, + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), + }, + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index d874b86b1d..c06195f481 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/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, + }, + }, + } } diff --git a/styles/src/styleTree/terminal.ts b/styles/src/styleTree/terminal.ts index 2f5c34e5b8..4158ace300 100644 --- a/styles/src/styleTree/terminal.ts +++ b/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(), + } } diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts index 5a43b1ef4c..bb66cd413c 100644 --- a/styles/src/styleTree/tooltip.ts +++ b/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, + } } diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index 08c0b08430..44472a7662 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/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"), + }, + }, + } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index e6603ec7e9..f9f49e3c7d 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,266 +1,264 @@ -import { ColorScheme } from "../themes/common/colorScheme"; -import { withOpacity } from "../utils/color"; -import { - background, - border, - borderColor, - foreground, - text, -} from "./components"; -import statusBar from "./statusBar"; -import tabBar from "./tabBar"; +import { ColorScheme } from "../themes/common/colorScheme" +import { withOpacity } from "../utils/color" +import { background, border, borderColor, foreground, text } from "./components" +import statusBar from "./statusBar" +import tabBar from "./tabBar" export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest; - const itemSpacing = 8; - const titlebarButton = { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - hover: { - ...text(layer, "sans", "variant", "hovered", { size: "xs" }), - background: background(layer, "variant", "hovered"), - border: border(layer, "variant", "hovered"), - }, - clicked: { - ...text(layer, "sans", "variant", "pressed", { size: "xs" }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, - active: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), - background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), - }, - }; - const avatarWidth = 18; - const avatarOuterWidth = avatarWidth + 4; - const followerAvatarWidth = 14; - const followerAvatarOuterWidth = followerAvatarWidth + 4; - - return { - background: background(layer), - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - sidebar: { - initialSize: 240, - border: border(layer, { left: true, right: true }), - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px for overlaid border - background: background(layer), - border: border(layer, { bottom: true, overlay: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 4, - bottom: 4, - }, + const layer = colorScheme.lowest + const itemSpacing = 8 + const titlebarButton = { cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: { - ...titlebarButton, - }, - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, - }, padding: { - right: 4, + top: 1, + bottom: 1, + left: 8, + right: 8, }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, - }, - cornerRadius: 6, - }, - callControl: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, - }, - toggleContactsButton: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 8, - buttonWidth: 20, - active: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), + ...text(layer, "sans", "variant", "hovered", { size: "xs" }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), }, clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), + ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), }, - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), + active: { + ...text(layer, "sans", "variant", "active", { size: "xs" }), + background: background(layer, "variant", "active"), + border: border(layer, "variant", "active"), }, - }, - userMenuButton: { - buttonWidth: 20, - iconWidth: 12, - ...titlebarButton, - }, - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, - }, + } + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background(colorScheme.highest, "on", "hovered"), + return { + background: background(layer), + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), }, - }, - padding: { left: 8, right: 8, top: 4, bottom: 4 }, - }, - breadcrumbs: { - ...text(layer, "mono", "variant"), - padding: { left: 6 }, - }, - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dock: { - initialSizeRight: 640, - initialSizeBottom: 480, - wash_color: withOpacity(background(colorScheme.highest), 0.5), - panel: { - border: border(colorScheme.middle), - }, - maximized: { - margin: 32, - border: border(colorScheme.highest, { overlay: true }), - shadow: colorScheme.modalShadow, - }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - }; + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), + }, + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", + }, + sidebar: { + initialSize: 240, + border: border(layer, { left: true, right: true }), + }, + paneDivider: { + color: borderColor(layer), + width: 1, + }, + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px for overlaid border + background: background(layer), + border: border(layer, { bottom: true, overlay: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, + }, + padding: { + left: 2, + right: 2, + top: 4, + bottom: 4, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: { + ...titlebarButton, + }, + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + toggleContactsButton: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 8, + buttonWidth: 20, + active: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + userMenuButton: { + buttonWidth: 20, + iconWidth: 12, + ...titlebarButton, + }, + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, + + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + hover: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground(colorScheme.highest, "on", "disabled"), + }, + }, + padding: { left: 8, right: 8, top: 4, bottom: 4 }, + }, + breadcrumbs: { + ...text(layer, "mono", "variant"), + padding: { left: 6 }, + }, + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), + }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + }, + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, + }, + dock: { + initialSizeRight: 640, + initialSizeBottom: 480, + wash_color: withOpacity(background(colorScheme.highest), 0.5), + panel: { + border: border(colorScheme.middle), + }, + maximized: { + margin: 32, + border: border(colorScheme.highest, { overlay: true }), + shadow: colorScheme.modalShadow, + }, + }, + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } } diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts index b76179b3c5..7e715f61ac 100644 --- a/styles/src/themes/andromeda.ts +++ b/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" -} \ No newline at end of file + 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", +} diff --git a/styles/src/themes/atelier-cave.ts b/styles/src/themes/atelier-cave.ts index 0959cabace..7a85db97e9 100644 --- a/styles/src/themes/atelier-cave.ts +++ b/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/" -} \ No newline at end of file + 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/", +} diff --git a/styles/src/themes/atelier-sulphurpool.ts b/styles/src/themes/atelier-sulphurpool.ts index fa51b1ec80..bfd105172a 100644 --- a/styles/src/themes/atelier-sulphurpool.ts +++ b/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/" -} \ No newline at end of file + 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/", +} diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts index 23ccc57fd4..8ea3a09f43 100644 --- a/styles/src/themes/common/base16.ts +++ b/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]); + + let blend = isLight ? 0.12 : 0.24 + + function sample(ramp: Scale, index: number): string { + return ramp(index).hex() } - ramps.neutral = chroma - .scale((color_ramps.neutral.colors as any)()) - .domain([0, 7]); - } + const darkest = ramps.neutral(isLight ? 7 : 0).hex() - let blend = isLight ? 0.12 : 0.24; + 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), + }, + } - function sample(ramp: Scale, index: number): string { - return ramp(index).hex(); - } - const darkest = ramps.neutral(isLight ? 7 : 0).hex(); + 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 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 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 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 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 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 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 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 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 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 shadow = withOpacity( + ramps + .neutral(isLight ? 7 : 0) + .darken() + .hex(), + blend + ) - 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 - ); - - 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, + } } diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index ee858627d7..f07a44d6cb 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/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 } diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index 971830ed07..1090345d30 100644 --- a/styles/src/themes/common/ramps.ts +++ b/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 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 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)) } - 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)); + + 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], } - ramps.neutral = chroma.scale(colorRamps.neutral.colors(100)); - } - let lowest = lowestLayer(ramps); - let middle = middleLayer(ramps); - let highest = highestLayer(ramps); + 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 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 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), + } - 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], - }; + return { + name, + isLight, - 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, - return { - name, - isLight, + lowest, + middle, + highest, - ramps, + popoverShadow, + modalShadow, - lowest, - middle, - highest, - - popoverShadow, - modalShadow, - - players, - }; + 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 - ); + 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 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, + }, + } } diff --git a/styles/src/themes/common/theme.ts b/styles/src/themes/common/theme.ts index a787443f31..56127add6b 100644 --- a/styles/src/themes/common/theme.ts +++ b/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 } } diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts index 42a765e3e3..7c30bb7823 100644 --- a/styles/src/themes/one-dark.ts +++ b/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", } diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts index 50f99becdc..8b4cdded8a 100644 --- a/styles/src/themes/one-light.ts +++ b/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", } diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts index b1744f9c20..8ba105395e 100644 --- a/styles/src/themes/rose-pine-dawn.ts +++ b/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" -} \ No newline at end of file + 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", +} diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts index a4c1737c2b..e13352a58a 100644 --- a/styles/src/themes/rose-pine-moon.ts +++ b/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" -} \ No newline at end of file + 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", +} diff --git a/styles/src/themes/rose-pine.ts b/styles/src/themes/rose-pine.ts index e3c115213b..bcbe94ce52 100644 --- a/styles/src/themes/rose-pine.ts +++ b/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" -} \ No newline at end of file + 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", +} diff --git a/styles/src/themes/sandcastle.ts b/styles/src/themes/sandcastle.ts index 0e1328feab..47b81f29df 100644 --- a/styles/src/themes/sandcastle.ts +++ b/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")), -}; - -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" + 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 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", +} diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts index 98f9339d6e..51baeed564 100644 --- a/styles/src/themes/solarized.ts +++ b/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")), -}; - -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" + 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 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", +} diff --git a/styles/src/themes/staff/abruzzo.ts b/styles/src/themes/staff/abruzzo.ts index f3c08f1426..7a1f0f956a 100644 --- a/styles/src/themes/staff/abruzzo.ts +++ b/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 "; -const url = "https://github.com/slightknack"; +const name = "Abruzzo" +const author = "slightknack " +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")), +}) diff --git a/styles/src/themes/staff/atelier-dune.ts b/styles/src/themes/staff/atelier-dune.ts index 9879fe4b58..bd39098dc3 100644 --- a/styles/src/themes/staff/atelier-dune.ts +++ b/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) diff --git a/styles/src/themes/staff/atelier-heath.ts b/styles/src/themes/staff/atelier-heath.ts index e73e919dad..cd4eb2a1ac 100644 --- a/styles/src/themes/staff/atelier-heath.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/atelier-seaside.ts b/styles/src/themes/staff/atelier-seaside.ts index 74c8112f77..13286e77f9 100644 --- a/styles/src/themes/staff/atelier-seaside.ts +++ b/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) diff --git a/styles/src/themes/staff/ayu-mirage.ts b/styles/src/themes/staff/ayu-mirage.ts index 9294a9af64..5b832699b4 100644 --- a/styles/src/themes/staff/ayu-mirage.ts +++ b/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 "; -const url = "https://github.com/ayu-theme/ayu-colors"; +const name = "Ayu" +const author = "Konstantin Pschera " +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")), +}) diff --git a/styles/src/themes/staff/ayu.ts b/styles/src/themes/staff/ayu.ts index c5a526d8ce..24fcdb951b 100644 --- a/styles/src/themes/staff/ayu.ts +++ b/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 "; -const url = "https://github.com/ayu-theme/ayu-colors"; +const name = "Ayu" +const author = "Konstantin Pschera " +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")), +}) diff --git a/styles/src/themes/staff/brushtrees.ts b/styles/src/themes/staff/brushtrees.ts index f14f1abe8c..a17cf92acb 100644 --- a/styles/src/themes/staff/brushtrees.ts +++ b/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 "; -const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme"; +const name = "Brush Trees" +const author = "Abraham White " +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")), +}) diff --git a/styles/src/themes/staff/dracula.ts b/styles/src/themes/staff/dracula.ts index 0571574049..855fc20724 100644 --- a/styles/src/themes/staff/dracula.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/gruvbox-medium.ts b/styles/src/themes/staff/gruvbox-medium.ts index 26707f627f..9e259bebc6 100644 --- a/styles/src/themes/staff/gruvbox-medium.ts +++ b/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 (dawikur@gmail.com)"; -const url = "https://github.com/morhetz/gruvbox"; +const name = "Gruvbox" +const author = "Dawid Kurek (dawikur@gmail.com)" +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")), +}) diff --git a/styles/src/themes/staff/monokai.ts b/styles/src/themes/staff/monokai.ts index 0a7ee275bb..25ae88a269 100644 --- a/styles/src/themes/staff/monokai.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/nord.ts b/styles/src/themes/staff/nord.ts index 5e303fcd47..50a47700d9 100644 --- a/styles/src/themes/staff/nord.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/seti-ui.ts b/styles/src/themes/staff/seti-ui.ts index d1c809f6d9..7a675829fb 100644 --- a/styles/src/themes/staff/seti-ui.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/tokyo-night-storm.ts b/styles/src/themes/staff/tokyo-night-storm.ts index c7b52c159f..ae375485e8 100644 --- a/styles/src/themes/staff/tokyo-night-storm.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/tokyo-night.ts b/styles/src/themes/staff/tokyo-night.ts index 783c45d50e..267b1fc031 100644 --- a/styles/src/themes/staff/tokyo-night.ts +++ b/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")), +}) diff --git a/styles/src/themes/staff/zed-pro.ts b/styles/src/themes/staff/zed-pro.ts index 38f3268930..9b748be299 100644 --- a/styles/src/themes/staff/zed-pro.ts +++ b/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) diff --git a/styles/src/themes/staff/zenburn.ts b/styles/src/themes/staff/zenburn.ts index e1ac041543..648d918a42 100644 --- a/styles/src/themes/staff/zenburn.ts +++ b/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")), +}) diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts index 60e0b1834d..42d4b1a2e4 100644 --- a/styles/src/themes/summercamp.ts +++ b/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" - } -} \ No newline at end of file + 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", + }, +} diff --git a/styles/src/utils/color.ts b/styles/src/utils/color.ts index 7d2d1dd535..58ee4ccc7c 100644 --- a/styles/src/utils/color.ts +++ b/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() } diff --git a/styles/src/utils/snakeCase.ts b/styles/src/utils/snakeCase.ts index b95c28d89f..5191064707 100644 --- a/styles/src/utils/snakeCase.ts +++ b/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 extends string - ? S extends `${infer T}${infer U}` - ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` + ? S extends `${infer T}${infer U}` + ? `${T extends Capitalize ? "_" : ""}${Lowercase}${SnakeCase}` + : S : S - : S; type SnakeCased = { - [Property in keyof Type as SnakeCase]: SnakeCased; -}; + [Property in keyof Type as SnakeCase]: SnakeCased +} export default function snakeCaseTree(object: T): SnakeCased { - 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; - } } diff --git a/styles/tsconfig.json b/styles/tsconfig.json index fc09fdb0a4..13a5faf32b 100644 --- a/styles/tsconfig.json +++ b/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"] }