mirror of
https://github.com/zed-industries/zed.git
synced 2024-09-16 00:47:39 +03:00
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.
This commit is contained in:
Nate Butler
parent
06a86162bb
commit
10a30cf330
@ -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)
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 },
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }),
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }),
|
||||
}
|
||||
}
|
||||
|
||||
@ -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],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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),
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(),
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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),
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Andromeda";
|
||||
const name = "Andromeda"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#1E2025",
|
||||
"#23262E",
|
||||
"#292E38",
|
||||
"#2E323C",
|
||||
"#ACA8AE",
|
||||
"#CBC9CF",
|
||||
"#E1DDE4",
|
||||
"#F7F7F8",
|
||||
])
|
||||
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
|
||||
red: colorRamp(chroma("#F92672")),
|
||||
orange: colorRamp(chroma("#F39C12")),
|
||||
yellow: colorRamp(chroma("#FFE66D")),
|
||||
green: colorRamp(chroma("#96E072")),
|
||||
cyan: colorRamp(chroma("#00E8C6")),
|
||||
blue: colorRamp(chroma("#0CA793")),
|
||||
violet: colorRamp(chroma("#8A3FA6")),
|
||||
magenta: colorRamp(chroma("#C74DED")),
|
||||
};
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#1E2025",
|
||||
"#23262E",
|
||||
"#292E38",
|
||||
"#2E323C",
|
||||
"#ACA8AE",
|
||||
"#CBC9CF",
|
||||
"#E1DDE4",
|
||||
"#F7F7F8",
|
||||
])
|
||||
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
|
||||
red: colorRamp(chroma("#F92672")),
|
||||
orange: colorRamp(chroma("#F39C12")),
|
||||
yellow: colorRamp(chroma("#FFE66D")),
|
||||
green: colorRamp(chroma("#96E072")),
|
||||
cyan: colorRamp(chroma("#00E8C6")),
|
||||
blue: colorRamp(chroma("#0CA793")),
|
||||
violet: colorRamp(chroma("#8A3FA6")),
|
||||
magenta: colorRamp(chroma("#C74DED")),
|
||||
}
|
||||
|
||||
export const dark = createColorScheme(`${name}`, false, ramps);
|
||||
export const dark = createColorScheme(`${name}`, false, ramps)
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "EliverLara",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
|
||||
license_checksum: "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89"
|
||||
},
|
||||
url: "https://github.com/EliverLara/Andromeda"
|
||||
}
|
||||
name,
|
||||
author: "EliverLara",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url:
|
||||
"https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
|
||||
license_checksum:
|
||||
"2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89",
|
||||
},
|
||||
url: "https://github.com/EliverLara/Andromeda",
|
||||
}
|
||||
|
||||
@ -1,63 +1,63 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Atelier Cave";
|
||||
const name = "Atelier Cave"
|
||||
|
||||
export const dark = createColorScheme(`${name} Dark`, false, {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#19171c",
|
||||
"#26232a",
|
||||
"#585260",
|
||||
"#655f6d",
|
||||
"#7e7887",
|
||||
"#8b8792",
|
||||
"#e2dfe7",
|
||||
"#efecf4",
|
||||
])
|
||||
.domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#be4678")),
|
||||
orange: colorRamp(chroma("#aa573c")),
|
||||
yellow: colorRamp(chroma("#a06e3b")),
|
||||
green: colorRamp(chroma("#2a9292")),
|
||||
cyan: colorRamp(chroma("#398bc6")),
|
||||
blue: colorRamp(chroma("#576ddb")),
|
||||
violet: colorRamp(chroma("#955ae7")),
|
||||
magenta: colorRamp(chroma("#bf40bf")),
|
||||
});
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#19171c",
|
||||
"#26232a",
|
||||
"#585260",
|
||||
"#655f6d",
|
||||
"#7e7887",
|
||||
"#8b8792",
|
||||
"#e2dfe7",
|
||||
"#efecf4",
|
||||
])
|
||||
.domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#be4678")),
|
||||
orange: colorRamp(chroma("#aa573c")),
|
||||
yellow: colorRamp(chroma("#a06e3b")),
|
||||
green: colorRamp(chroma("#2a9292")),
|
||||
cyan: colorRamp(chroma("#398bc6")),
|
||||
blue: colorRamp(chroma("#576ddb")),
|
||||
violet: colorRamp(chroma("#955ae7")),
|
||||
magenta: colorRamp(chroma("#bf40bf")),
|
||||
})
|
||||
|
||||
export const light = createColorScheme(`${name} Light`, true, {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#19171c",
|
||||
"#26232a",
|
||||
"#585260",
|
||||
"#655f6d",
|
||||
"#7e7887",
|
||||
"#8b8792",
|
||||
"#e2dfe7",
|
||||
"#efecf4",
|
||||
])
|
||||
.correctLightness(),
|
||||
red: colorRamp(chroma("#be4678")),
|
||||
orange: colorRamp(chroma("#aa573c")),
|
||||
yellow: colorRamp(chroma("#a06e3b")),
|
||||
green: colorRamp(chroma("#2a9292")),
|
||||
cyan: colorRamp(chroma("#398bc6")),
|
||||
blue: colorRamp(chroma("#576ddb")),
|
||||
violet: colorRamp(chroma("#955ae7")),
|
||||
magenta: colorRamp(chroma("#bf40bf")),
|
||||
});
|
||||
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#19171c",
|
||||
"#26232a",
|
||||
"#585260",
|
||||
"#655f6d",
|
||||
"#7e7887",
|
||||
"#8b8792",
|
||||
"#e2dfe7",
|
||||
"#efecf4",
|
||||
])
|
||||
.correctLightness(),
|
||||
red: colorRamp(chroma("#be4678")),
|
||||
orange: colorRamp(chroma("#aa573c")),
|
||||
yellow: colorRamp(chroma("#a06e3b")),
|
||||
green: colorRamp(chroma("#2a9292")),
|
||||
cyan: colorRamp(chroma("#398bc6")),
|
||||
blue: colorRamp(chroma("#576ddb")),
|
||||
violet: colorRamp(chroma("#955ae7")),
|
||||
magenta: colorRamp(chroma("#bf40bf")),
|
||||
})
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "atelierbram",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://atelierbram.mit-license.org/license.txt",
|
||||
license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
|
||||
},
|
||||
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/"
|
||||
}
|
||||
name,
|
||||
author: "atelierbram",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://atelierbram.mit-license.org/license.txt",
|
||||
license_checksum:
|
||||
"f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
|
||||
},
|
||||
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
|
||||
}
|
||||
|
||||
@ -1,42 +1,43 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Atelier Sulphurpool";
|
||||
const name = "Atelier Sulphurpool"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#202746",
|
||||
"#293256",
|
||||
"#5e6687",
|
||||
"#6b7394",
|
||||
"#898ea4",
|
||||
"#979db4",
|
||||
"#dfe2f1",
|
||||
"#f5f7ff",
|
||||
])
|
||||
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#c94922")),
|
||||
orange: colorRamp(chroma("#c76b29")),
|
||||
yellow: colorRamp(chroma("#c08b30")),
|
||||
green: colorRamp(chroma("#ac9739")),
|
||||
cyan: colorRamp(chroma("#22a2c9")),
|
||||
blue: colorRamp(chroma("#3d8fd1")),
|
||||
violet: colorRamp(chroma("#6679cc")),
|
||||
magenta: colorRamp(chroma("#9c637a")),
|
||||
};
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#202746",
|
||||
"#293256",
|
||||
"#5e6687",
|
||||
"#6b7394",
|
||||
"#898ea4",
|
||||
"#979db4",
|
||||
"#dfe2f1",
|
||||
"#f5f7ff",
|
||||
])
|
||||
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#c94922")),
|
||||
orange: colorRamp(chroma("#c76b29")),
|
||||
yellow: colorRamp(chroma("#c08b30")),
|
||||
green: colorRamp(chroma("#ac9739")),
|
||||
cyan: colorRamp(chroma("#22a2c9")),
|
||||
blue: colorRamp(chroma("#3d8fd1")),
|
||||
violet: colorRamp(chroma("#6679cc")),
|
||||
magenta: colorRamp(chroma("#9c637a")),
|
||||
}
|
||||
|
||||
export const dark = createColorScheme(`${name} Dark`, false, ramps);
|
||||
export const light = createColorScheme(`${name} Light`, true, ramps);
|
||||
export const dark = createColorScheme(`${name} Dark`, false, ramps)
|
||||
export const light = createColorScheme(`${name} Light`, true, ramps)
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "atelierbram",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://atelierbram.mit-license.org/license.txt",
|
||||
license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
|
||||
},
|
||||
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/"
|
||||
}
|
||||
name,
|
||||
author: "atelierbram",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://atelierbram.mit-license.org/license.txt",
|
||||
license_checksum:
|
||||
"f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
|
||||
},
|
||||
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 }
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Rosé Pine Dawn";
|
||||
const name = "Rosé Pine Dawn"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#575279",
|
||||
"#797593",
|
||||
"#9893A5",
|
||||
"#B5AFB8",
|
||||
"#D3CCCC",
|
||||
"#F2E9E1",
|
||||
"#FFFAF3",
|
||||
"#FAF4ED",
|
||||
])
|
||||
.domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
|
||||
red: colorRamp(chroma("#B4637A")),
|
||||
orange: colorRamp(chroma("#D7827E")),
|
||||
yellow: colorRamp(chroma("#EA9D34")),
|
||||
green: colorRamp(chroma("#679967")),
|
||||
cyan: colorRamp(chroma("#286983")),
|
||||
blue: colorRamp(chroma("#56949F")),
|
||||
violet: colorRamp(chroma("#907AA9")),
|
||||
magenta: colorRamp(chroma("#79549F")),
|
||||
};
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#575279",
|
||||
"#797593",
|
||||
"#9893A5",
|
||||
"#B5AFB8",
|
||||
"#D3CCCC",
|
||||
"#F2E9E1",
|
||||
"#FFFAF3",
|
||||
"#FAF4ED",
|
||||
])
|
||||
.domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
|
||||
red: colorRamp(chroma("#B4637A")),
|
||||
orange: colorRamp(chroma("#D7827E")),
|
||||
yellow: colorRamp(chroma("#EA9D34")),
|
||||
green: colorRamp(chroma("#679967")),
|
||||
cyan: colorRamp(chroma("#286983")),
|
||||
blue: colorRamp(chroma("#56949F")),
|
||||
violet: colorRamp(chroma("#907AA9")),
|
||||
magenta: colorRamp(chroma("#79549F")),
|
||||
}
|
||||
|
||||
export const light = createColorScheme(`${name}`, true, ramps);
|
||||
export const light = createColorScheme(`${name}`, true, ramps)
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme"
|
||||
}
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url:
|
||||
"https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum:
|
||||
"6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
|
||||
}
|
||||
|
||||
@ -1,41 +1,43 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Rosé Pine Moon";
|
||||
const name = "Rosé Pine Moon"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#232136",
|
||||
"#2A273F",
|
||||
"#393552",
|
||||
"#3E3A53",
|
||||
"#56526C",
|
||||
"#6E6A86",
|
||||
"#908CAA",
|
||||
"#E0DEF4",
|
||||
])
|
||||
.domain([0, 0.3, 0.55, 1]),
|
||||
red: colorRamp(chroma("#EB6F92")),
|
||||
orange: colorRamp(chroma("#EBBCBA")),
|
||||
yellow: colorRamp(chroma("#F6C177")),
|
||||
green: colorRamp(chroma("#8DBD8D")),
|
||||
cyan: colorRamp(chroma("#409BBE")),
|
||||
blue: colorRamp(chroma("#9CCFD8")),
|
||||
violet: colorRamp(chroma("#C4A7E7")),
|
||||
magenta: colorRamp(chroma("#AB6FE9")),
|
||||
};
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#232136",
|
||||
"#2A273F",
|
||||
"#393552",
|
||||
"#3E3A53",
|
||||
"#56526C",
|
||||
"#6E6A86",
|
||||
"#908CAA",
|
||||
"#E0DEF4",
|
||||
])
|
||||
.domain([0, 0.3, 0.55, 1]),
|
||||
red: colorRamp(chroma("#EB6F92")),
|
||||
orange: colorRamp(chroma("#EBBCBA")),
|
||||
yellow: colorRamp(chroma("#F6C177")),
|
||||
green: colorRamp(chroma("#8DBD8D")),
|
||||
cyan: colorRamp(chroma("#409BBE")),
|
||||
blue: colorRamp(chroma("#9CCFD8")),
|
||||
violet: colorRamp(chroma("#C4A7E7")),
|
||||
magenta: colorRamp(chroma("#AB6FE9")),
|
||||
}
|
||||
|
||||
export const dark = createColorScheme(`${name}`, false, ramps);
|
||||
export const dark = createColorScheme(`${name}`, false, ramps)
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme"
|
||||
}
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url:
|
||||
"https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum:
|
||||
"6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
|
||||
}
|
||||
|
||||
@ -1,39 +1,41 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Rosé Pine";
|
||||
const name = "Rosé Pine"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma.scale([
|
||||
"#191724",
|
||||
"#1f1d2e",
|
||||
"#26233A",
|
||||
"#3E3A53",
|
||||
"#56526C",
|
||||
"#6E6A86",
|
||||
"#908CAA",
|
||||
"#E0DEF4",
|
||||
]),
|
||||
red: colorRamp(chroma("#EB6F92")),
|
||||
orange: colorRamp(chroma("#EBBCBA")),
|
||||
yellow: colorRamp(chroma("#F6C177")),
|
||||
green: colorRamp(chroma("#8DBD8D")),
|
||||
cyan: colorRamp(chroma("#409BBE")),
|
||||
blue: colorRamp(chroma("#9CCFD8")),
|
||||
violet: colorRamp(chroma("#C4A7E7")),
|
||||
magenta: colorRamp(chroma("#AB6FE9")),
|
||||
};
|
||||
neutral: chroma.scale([
|
||||
"#191724",
|
||||
"#1f1d2e",
|
||||
"#26233A",
|
||||
"#3E3A53",
|
||||
"#56526C",
|
||||
"#6E6A86",
|
||||
"#908CAA",
|
||||
"#E0DEF4",
|
||||
]),
|
||||
red: colorRamp(chroma("#EB6F92")),
|
||||
orange: colorRamp(chroma("#EBBCBA")),
|
||||
yellow: colorRamp(chroma("#F6C177")),
|
||||
green: colorRamp(chroma("#8DBD8D")),
|
||||
cyan: colorRamp(chroma("#409BBE")),
|
||||
blue: colorRamp(chroma("#9CCFD8")),
|
||||
violet: colorRamp(chroma("#C4A7E7")),
|
||||
magenta: colorRamp(chroma("#AB6FE9")),
|
||||
}
|
||||
|
||||
export const dark = createColorScheme(`${name}`, false, ramps);
|
||||
export const dark = createColorScheme(`${name}`, false, ramps)
|
||||
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme"
|
||||
}
|
||||
name,
|
||||
author: "edunfelt",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url:
|
||||
"https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
|
||||
license_checksum:
|
||||
"6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
|
||||
},
|
||||
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
|
||||
@ -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 <hey@isaac.sh>";
|
||||
const url = "https://github.com/slightknack";
|
||||
const name = "Abruzzo"
|
||||
const author = "slightknack <hey@isaac.sh>"
|
||||
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")),
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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 <me@kons.ch>";
|
||||
const url = "https://github.com/ayu-theme/ayu-colors";
|
||||
const name = "Ayu"
|
||||
const author = "Konstantin Pschera <me@kons.ch>"
|
||||
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")),
|
||||
})
|
||||
|
||||
@ -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 <me@kons.ch>";
|
||||
const url = "https://github.com/ayu-theme/ayu-colors";
|
||||
const name = "Ayu"
|
||||
const author = "Konstantin Pschera <me@kons.ch>"
|
||||
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")),
|
||||
})
|
||||
|
||||
@ -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 <abelincoln.white@gmail.com>";
|
||||
const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme";
|
||||
const name = "Brush Trees"
|
||||
const author = "Abraham White <abelincoln.white@gmail.com>"
|
||||
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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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")),
|
||||
})
|
||||
|
||||
@ -1,40 +1,42 @@
|
||||
import chroma from "chroma-js";
|
||||
import { Meta } from "./common/colorScheme";
|
||||
import { colorRamp, createColorScheme } from "./common/ramps";
|
||||
import chroma from "chroma-js"
|
||||
import { Meta } from "./common/colorScheme"
|
||||
import { colorRamp, createColorScheme } from "./common/ramps"
|
||||
|
||||
const name = "Summercamp";
|
||||
const name = "Summercamp"
|
||||
|
||||
const ramps = {
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#1c1810",
|
||||
"#2a261c",
|
||||
"#3a3527",
|
||||
"#3a3527",
|
||||
"#5f5b45",
|
||||
"#736e55",
|
||||
"#bab696",
|
||||
"#f8f5de",
|
||||
])
|
||||
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#e35142")),
|
||||
orange: colorRamp(chroma("#fba11b")),
|
||||
yellow: colorRamp(chroma("#f2ff27")),
|
||||
green: colorRamp(chroma("#5ceb5a")),
|
||||
cyan: colorRamp(chroma("#5aebbc")),
|
||||
blue: colorRamp(chroma("#489bf0")),
|
||||
violet: colorRamp(chroma("#FF8080")),
|
||||
magenta: colorRamp(chroma("#F69BE7")),
|
||||
};
|
||||
neutral: chroma
|
||||
.scale([
|
||||
"#1c1810",
|
||||
"#2a261c",
|
||||
"#3a3527",
|
||||
"#3a3527",
|
||||
"#5f5b45",
|
||||
"#736e55",
|
||||
"#bab696",
|
||||
"#f8f5de",
|
||||
])
|
||||
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
|
||||
red: colorRamp(chroma("#e35142")),
|
||||
orange: colorRamp(chroma("#fba11b")),
|
||||
yellow: colorRamp(chroma("#f2ff27")),
|
||||
green: colorRamp(chroma("#5ceb5a")),
|
||||
cyan: colorRamp(chroma("#5aebbc")),
|
||||
blue: colorRamp(chroma("#489bf0")),
|
||||
violet: colorRamp(chroma("#FF8080")),
|
||||
magenta: colorRamp(chroma("#F69BE7")),
|
||||
}
|
||||
|
||||
export const dark = createColorScheme(`${name}`, false, ramps);
|
||||
export const dark = createColorScheme(`${name}`, false, ramps)
|
||||
export const meta: Meta = {
|
||||
name,
|
||||
author: "zoefiri",
|
||||
url: "https://github.com/zoefiri/base16-sc",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url: "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
|
||||
license_checksum: "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf"
|
||||
}
|
||||
}
|
||||
name,
|
||||
author: "zoefiri",
|
||||
url: "https://github.com/zoefiri/base16-sc",
|
||||
license: {
|
||||
SPDX: "MIT",
|
||||
https_url:
|
||||
"https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
|
||||
license_checksum:
|
||||
"fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf",
|
||||
},
|
||||
}
|
||||
|
||||
@ -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()
|
||||
}
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
import { snakeCase } from "case-anything";
|
||||
import { snakeCase } from "case-anything"
|
||||
|
||||
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
|
||||
|
||||
// Typescript magic to convert any string from camelCase to snake_case at compile time
|
||||
type SnakeCase<S> = S extends string
|
||||
? S extends `${infer T}${infer U}`
|
||||
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
|
||||
? S extends `${infer T}${infer U}`
|
||||
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
|
||||
: S
|
||||
: S
|
||||
: S;
|
||||
|
||||
type SnakeCased<Type> = {
|
||||
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>;
|
||||
};
|
||||
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
|
||||
}
|
||||
|
||||
export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
|
||||
const snakeObject: any = {};
|
||||
for (const key in object) {
|
||||
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
|
||||
snakeCaseValue(object[key]);
|
||||
}
|
||||
return snakeObject;
|
||||
const snakeObject: any = {}
|
||||
for (const key in object) {
|
||||
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
|
||||
snakeCaseValue(object[key])
|
||||
}
|
||||
return snakeObject
|
||||
}
|
||||
|
||||
function snakeCaseValue(value: any): any {
|
||||
if (typeof value === "object") {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(snakeCaseValue);
|
||||
if (typeof value === "object") {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(snakeCaseValue)
|
||||
} else {
|
||||
return snakeCaseTree(value)
|
||||
}
|
||||
} else {
|
||||
return snakeCaseTree(value);
|
||||
return value
|
||||
}
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user