Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Format styles with updated prettier config

Browse source 
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 2023-02-25 11:46:33 -05:00
parent 06a86162bb
commit 10a30cf330
63 changed files with 3773 additions and 3712 deletions
Download patch file Download diff file Expand all files Collapse all files

72
styles/src/buildLicenses.ts
View file

@ -1,19 +1,17 @@
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")
@ -22,52 +20,68 @@ function parseAcceptedToml(file: string): string[] {
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`)
throw Error(
`License for theme ${meta.name} (${meta.license.SPDX}) is not supported`
)
}
}
}
function getLicenseText(schemeMeta: Meta[], callback: (meta: Meta, license_text: string) => void) {
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;
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}`);
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');
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}`)
throw Error(
`Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`
)
}
});
}).on('error', (e) => {
})
})
.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)
});
})

56
styles/src/buildThemes.ts
View file

@ -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 });
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));
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`);
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)

50
styles/src/colorSchemes.ts
View file

@ -1,45 +1,45 @@
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) {
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 (fileName == "template.ts") continue
const filePath = path.join(themesPath, fileName)
if (fs.statSync(filePath).isFile()) {
const colorScheme = require(filePath);
callback(colorScheme, path.basename(filePath));
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);
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) => {
@ -51,4 +51,4 @@ function fillMeta(themesPath: string, meta: Meta[]) {
})
}
fillMeta(themes_directory, schemeMeta);
fillMeta(themes_directory, schemeMeta)

10
styles/src/common.ts
View file

@ -1,7 +1,7 @@
export const fontFamilies = {
sans: "Zed Sans",
mono: "Zed Mono",
};
}
export const fontSizes = {
"3xs": 8,
@ -11,7 +11,7 @@ export const fontSizes = {
md: 16,
lg: 18,
xl: 20,
};
}
export type FontWeight =
| "thin"
@ -22,7 +22,7 @@ export type FontWeight =
| "semibold"
| "bold"
| "extra_bold"
| "black";
| "black"
export const fontWeights: { [key: string]: FontWeight } = {
thin: "thin",
extra_light: "extra_light",
@ -33,7 +33,7 @@ export const fontWeights: { [key: string]: FontWeight } = {
bold: "bold",
extra_bold: "extra_bold",
black: "black",
};
}
export const sizes = {
px: 1,
@ -42,4 +42,4 @@ export const sizes = {
md: 6,
lg: 8,
xl: 12,
};
}

46
styles/src/styleTree/app.ts
View file

@ -1,25 +1,25 @@
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 {
@ -68,5 +68,5 @@ export default function app(colorScheme: ColorScheme): Object {
magenta: colorScheme.ramps.magenta.colors(100, "hex"),
},
},
};
}
}

10
styles/src/styleTree/commandPalette.ts
View file

@ -1,9 +1,9 @@
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;
let layer = colorScheme.highest
return {
keystrokeSpacing: 8,
key: {
@ -26,5 +26,5 @@ export default function commandPalette(colorScheme: ColorScheme) {
background: withOpacity(background(layer, "on"), 0.2),
},
},
};
}
}

118
styles/src/styleTree/components.ts
View file

@ -1,5 +1,5 @@
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 [
@ -10,7 +10,7 @@ function isStyleSet(key: any): key is StyleSets {
"positive",
"warning",
"negative",
].includes(key);
].includes(key)
}
function isStyle(key: any): key is Styles {
@ -21,83 +21,83 @@ function isStyle(key: any): key is Styles {
"hovered",
"pressed",
"inverted",
].includes(key);
].includes(key)
}
function getStyle(
layer: Layer,
possibleStyleSetOrStyle?: any,
possibleStyle?: any
): Style {
let styleSet: StyleSets = "base";
let style: Styles = "default";
let styleSet: StyleSets = "base"
let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle;
styleSet = possibleStyleSetOrStyle
} else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle;
style = possibleStyleSetOrStyle
}
if (isStyle(possibleStyle)) {
style = 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;
): string
export function background(
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;
): string
export function borderColor(
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;
): string
export function foreground(
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(
@ -106,24 +106,24 @@ export function text(
styleSet: StyleSets,
style: Styles,
properties?: TextProperties
): Text;
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets,
properties?: TextProperties
): Text;
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
style: Styles,
properties?: TextProperties
): Text;
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
properties?: TextProperties
): Text;
): Text
export function text(
layer: Layer,
fontFamily: keyof typeof fontFamilies,
@ -131,43 +131,43 @@ export function text(
styleOrProperties?: Styles | TextProperties,
properties?: TextProperties
) {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties;
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties;
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,
};
}
}
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(
@ -175,36 +175,36 @@ export function border(
styleSet: StyleSets,
style: Styles,
properties?: BorderProperties
): Border;
): Border
export function border(
layer: Layer,
styleSet: StyleSets,
properties?: BorderProperties
): Border;
): Border
export function border(
layer: Layer,
style: Styles,
properties?: BorderProperties
): Border;
export function border(layer: Layer, properties?: BorderProperties): Border;
): Border
export function border(layer: Layer, properties?: BorderProperties): Border
export function border(
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;
properties = styleSetStyleOrProperties
}
if (typeof styleOrProperties === "object") {
properties = styleOrProperties;
properties = styleOrProperties
}
return {
color: style.border,
width: 1,
...properties,
};
}
}

22
styles/src/styleTree/contactFinder.ts
View file

@ -1,24 +1,24 @@
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 sideMargin = 6
const contactButton = {
background: background(layer, "variant"),
color: foreground(layer, "variant"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
};
}
const pickerStyle = picker(colorScheme);
const pickerStyle = picker(colorScheme)
const pickerInput = {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono",),
text: text(layer, "mono"),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: colorScheme.players[0],
border: border(layer),
@ -31,8 +31,8 @@ export default function contactFinder(colorScheme: ColorScheme) {
margin: {
left: sideMargin,
right: sideMargin,
},
}
};
return {
picker: {
@ -43,7 +43,7 @@ export default function contactFinder(colorScheme: ColorScheme) {
},
noMatches: pickerStyle.noMatches,
inputEditor: pickerInput,
emptyInputEditor: pickerInput
emptyInputEditor: pickerInput,
},
rowHeight: 28,
contactAvatar: {
@ -66,5 +66,5 @@ export default function contactFinder(colorScheme: ColorScheme) {
background: background(layer, "disabled"),
color: foreground(layer, "disabled"),
},
};
}
}

26
styles/src/styleTree/contactList.ts
View file

@ -1,17 +1,11 @@
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"),
@ -19,7 +13,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
};
}
const projectRow = {
guestAvatarSpacing: 4,
height: 24,
@ -44,7 +38,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
left: sidePadding,
right: sidePadding,
},
};
}
return {
background: background(layer),
@ -53,7 +47,9 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
placeholderText: text(layer, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
padding: {
@ -182,5 +178,5 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
},
},
};
}
}

12
styles/src/styleTree/contactNotification.ts
View file

@ -1,11 +1,11 @@
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;
let layer = colorScheme.lowest
return {
headerAvatar: {
height: avatarSize,
@ -41,5 +41,5 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
color: foreground(layer, "hovered"),
},
},
};
}
}

8
styles/src/styleTree/contactsPopover.ts
View file

@ -1,9 +1,9 @@
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;
let layer = colorScheme.middle
const sidePadding = 12
return {
background: background(layer),
cornerRadius: 6,

13
styles/src/styleTree/contextMenu.ts
View file

@ -1,8 +1,8 @@
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;
let layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
@ -17,7 +17,10 @@ export default function contextMenu(colorScheme: ColorScheme) {
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
hover: {
@ -37,5 +40,5 @@ export default function contextMenu(colorScheme: ColorScheme) {
background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
};
}
}

43
styles/src/styleTree/editor.ts
View file

@ -1,17 +1,11 @@
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,
@ -21,7 +15,7 @@ export default function editor(colorScheme: ColorScheme) {
right: 6,
top: 2,
},
};
}
function diagnostic(layer: Layer, styleSet: StyleSets) {
return {
@ -38,7 +32,7 @@ export default function editor(colorScheme: ColorScheme) {
weight: "bold",
}),
},
};
}
}
const syntax = {
@ -133,7 +127,7 @@ export default function editor(colorScheme: ColorScheme) {
weight: fontWeights.normal,
italic: true,
},
};
}
return {
textColor: syntax.primary.color,
@ -155,7 +149,10 @@ export default function editor(colorScheme: ColorScheme) {
/** Highlights matching occurences of what is under the cursor
* as well as matched brackets
*/
documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1),
documentHighlightReadBackground: withOpacity(
foreground(layer, "accent"),
0.1
),
documentHighlightWriteBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.4)
@ -190,12 +187,20 @@ export default function editor(colorScheme: ColorScheme) {
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
matchHighlight: foreground(
colorScheme.middle,
"accent",
"hovered"
),
background: background(colorScheme.middle, "hovered"),
},
selectedItem: {
...autocompleteItem,
matchHighlight: foreground(colorScheme.middle, "accent", "active"),
matchHighlight: foreground(
colorScheme.middle,
"accent",
"active"
),
background: background(colorScheme.middle, "active"),
},
},
@ -281,5 +286,5 @@ export default function editor(colorScheme: ColorScheme) {
},
},
syntax,
};
}
}

9
styles/src/styleTree/feedback.ts
View file

@ -1,9 +1,8 @@
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: {
@ -33,5 +32,5 @@ export default function feedback(colorScheme: ColorScheme) {
},
button_margin: 8,
info_text: text(layer, "sans", "default", { size: "xs" }),
};
}
}

10
styles/src/styleTree/hoverPopover.ts
View file

@ -1,8 +1,8 @@
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 layer = colorScheme.middle
let baseContainer = {
background: background(layer),
cornerRadius: 8,
@ -17,7 +17,7 @@ export default function HoverPopover(colorScheme: ColorScheme) {
margin: {
left: -8,
},
};
}
return {
container: baseContainer,
@ -41,5 +41,5 @@ export default function HoverPopover(colorScheme: ColorScheme) {
},
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
};
}
}

24
styles/src/styleTree/incomingCallNotification.ts
View file

@ -1,9 +1,11 @@
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;
export default function incomingCallNotification(
colorScheme: ColorScheme
): Object {
let layer = colorScheme.middle
const avatarSize = 48
return {
windowHeight: 74,
windowWidth: 380,
@ -35,11 +37,17 @@ export default function incomingCallNotification(colorScheme: ColorScheme): Obje
acceptButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }),
...text(layer, "sans", "positive", { size: "xs", weight: "extra_bold" })
...text(layer, "sans", "positive", {
size: "xs",
weight: "extra_bold",
}),
},
declineButton: {
border: border(layer, { left: true }),
...text(layer, "sans", "negative", { size: "xs", weight: "extra_bold" })
...text(layer, "sans", "negative", {
size: "xs",
weight: "extra_bold",
}),
},
};
}
}

20
styles/src/styleTree/picker.ts
View file

@ -1,8 +1,8 @@
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;
let layer = colorScheme.lowest
const container = {
background: background(layer),
border: border(layer),
@ -10,8 +10,8 @@ export default function picker(colorScheme: ColorScheme) {
cornerRadius: 12,
padding: {
bottom: 4,
},
}
};
const inputEditor = {
placeholderText: text(layer, "sans", "on", "disabled"),
selection: colorScheme.players[0],
@ -26,16 +26,16 @@ export default function picker(colorScheme: ColorScheme) {
margin: {
bottom: 4,
},
};
const emptyInputEditor = { ...inputEditor };
delete emptyInputEditor.border;
delete emptyInputEditor.margin;
}
const emptyInputEditor = { ...inputEditor }
delete emptyInputEditor.border
delete emptyInputEditor.margin
return {
...container,
emptyContainer: {
...container,
padding: {}
padding: {},
},
item: {
padding: {
@ -74,5 +74,5 @@ export default function picker(colorScheme: ColorScheme) {
top: 8,
},
},
};
}
}

8
styles/src/styleTree/projectDiagnostics.ts
View file

@ -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;
let layer = colorScheme.highest
return {
background: background(layer),
tabIconSpacing: 4,
tabIconWidth: 13,
tabSummarySpacing: 10,
emptyMessage: text(layer, "sans", "variant", { size: "md" }),
};
}
}

12
styles/src/styleTree/projectPanel.ts
View file

@ -1,9 +1,9 @@
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 layer = colorScheme.middle
let baseEntry = {
height: 24,
@ -26,7 +26,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
};
}
return {
background: background(layer),
@ -56,5 +56,5 @@ export default function projectPanel(colorScheme: ColorScheme) {
text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0],
},
};
}
}

26
styles/src/styleTree/projectSharedNotification.ts
View file

@ -1,10 +1,12 @@
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;
const avatarSize = 48
return {
windowHeight: 74,
windowWidth: 380,
@ -35,12 +37,18 @@ export default function projectSharedNotification(colorScheme: ColorScheme): Obj
buttonWidth: 96,
openButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true, }),
...text(layer, "sans", "accent", { size: "xs", weight: "extra_bold" })
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" })
...text(layer, "sans", "variant", {
size: "xs",
weight: "extra_bold",
}),
},
};
}
}

12
styles/src/styleTree/search.ts
View file

@ -1,9 +1,9 @@
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 = {
@ -24,7 +24,7 @@ export default function search(colorScheme: ColorScheme) {
left: 12,
right: 8,
},
};
}
return {
// TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
@ -90,5 +90,5 @@ export default function search(colorScheme: ColorScheme) {
color: foreground(layer, "hovered"),
},
},
};
}
}

8
styles/src/styleTree/sharedScreen.ts
View file

@ -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;
let layer = colorScheme.highest
return {
background: background(layer)
background: background(layer),
}
}

14
styles/src/styleTree/simpleMessageNotification.ts
View file

@ -1,10 +1,12 @@
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;
export default function simpleMessageNotification(
colorScheme: ColorScheme
): Object {
let layer = colorScheme.middle
return {
message: {
...text(layer, "sans", { size: "xs" }),
@ -27,5 +29,5 @@ export default function simpleMessageNotification(colorScheme: ColorScheme): Obj
color: foreground(layer, "hovered"),
},
},
};
}
}

12
styles/src/styleTree/statusBar.ts
View file

@ -1,18 +1,18 @@
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,
@ -114,5 +114,5 @@ export default function statusBar(colorScheme: ColorScheme) {
background: background(layer, "accent"),
},
},
};
}
}

24
styles/src/styleTree/tabBar.ts
View file

@ -1,12 +1,12 @@
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,
@ -37,7 +37,7 @@ export default function tabBar(colorScheme: ColorScheme) {
margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }),
},
};
}
const activePaneActiveTab = {
...tab,
@ -47,13 +47,13 @@ export default function tabBar(colorScheme: ColorScheme) {
...tab.border,
bottom: false,
},
};
}
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }),
};
}
const inactivePaneActiveTab = {
...tab,
@ -63,14 +63,14 @@ export default function tabBar(colorScheme: ColorScheme) {
...tab.border,
bottom: false,
},
};
}
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.9),
border: undefined as any,
shadow: colorScheme.popoverShadow,
};
}
return {
height,
@ -99,5 +99,5 @@ export default function tabBar(colorScheme: ColorScheme) {
right: false,
},
},
};
}
}

4
styles/src/styleTree/terminal.ts
View file

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme";
import { ColorScheme } from "../themes/common/colorScheme"
export default function terminal(colorScheme: ColorScheme) {
/**
@ -48,5 +48,5 @@ export default function terminal(colorScheme: ColorScheme) {
dimWhite: colorScheme.ramps.neutral(0.6).hex(),
brightForeground: colorScheme.ramps.neutral(1).hex(),
dimForeground: colorScheme.ramps.neutral(0).hex(),
};
}
}

8
styles/src/styleTree/tooltip.ts
View file

@ -1,8 +1,8 @@
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;
let layer = colorScheme.middle
return {
background: background(layer),
border: border(layer),
@ -19,5 +19,5 @@ export default function tooltip(colorScheme: ColorScheme) {
...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
},
maxTextWidth: 200,
};
}
}

10
styles/src/styleTree/updateNotification.ts
View file

@ -1,10 +1,10 @@
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;
let layer = colorScheme.middle
return {
message: {
...text(layer, "sans", { size: "xs" }),
@ -27,5 +27,5 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
color: foreground(layer, "hovered"),
},
},
};
}
}

38
styles/src/styleTree/workspace.ts
View file

@ -1,18 +1,12 @@
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 layer = colorScheme.lowest
const itemSpacing = 8
const titlebarButton = {
cornerRadius: 6,
padding: {
@ -39,11 +33,11 @@ export default function workspace(colorScheme: ColorScheme) {
background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"),
},
};
const avatarWidth = 18;
const avatarOuterWidth = avatarWidth + 4;
const followerAvatarWidth = 14;
const followerAvatarOuterWidth = followerAvatarWidth + 4;
}
const avatarWidth = 18
const avatarOuterWidth = avatarWidth + 4
const followerAvatarWidth = 14
const followerAvatarOuterWidth = followerAvatarWidth + 4
return {
background: background(layer),
@ -220,7 +214,11 @@ export default function workspace(colorScheme: ColorScheme) {
cornerRadius: 6,
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
background: background(
colorScheme.highest,
"on",
"hovered"
),
},
disabled: {
color: foreground(colorScheme.highest, "on", "disabled"),
@ -262,5 +260,5 @@ export default function workspace(colorScheme: ColorScheme) {
},
},
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
};
}
}

20
styles/src/themes/andromeda.ts
View file

@ -1,8 +1,8 @@
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
@ -25,17 +25,19 @@ const ramps = {
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"
https_url:
"https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
license_checksum:
"2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89",
},
url: "https://github.com/EliverLara/Andromeda"
url: "https://github.com/EliverLara/Andromeda",
}

18
styles/src/themes/atelier-cave.ts
View file

@ -1,8 +1,8 @@
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
@ -25,7 +25,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
});
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma
@ -48,8 +48,7 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")),
});
})
export const meta: Meta = {
name,
@ -57,7 +56,8 @@ export const meta: Meta = {
license: {
SPDX: "MIT",
https_url: "https://atelierbram.mit-license.org/license.txt",
license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
license_checksum:
"f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
},
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/"
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
}

19
styles/src/themes/atelier-sulphurpool.ts
View file

@ -1,8 +1,8 @@
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
@ -25,10 +25,10 @@ const ramps = {
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,
@ -36,7 +36,8 @@ export const meta: Meta = {
license: {
SPDX: "MIT",
https_url: "https://atelierbram.mit-license.org/license.txt",
license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
license_checksum:
"f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
},
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/"
url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
}

53
styles/src/themes/common/base16.ts
View file

@ -1,16 +1,16 @@
// 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(
@ -18,7 +18,7 @@ export function createTheme(
isLight: boolean,
color_ramps: { [rampName: string]: Scale }
): Theme {
let ramps: typeof color_ramps = {};
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
@ -29,28 +29,28 @@ export function createTheme(
for (var rampName in color_ramps) {
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([1, 0]);
.domain([1, 0])
}
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)())
.domain([7, 0]);
.domain([7, 0])
} else {
for (var rampName in color_ramps) {
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([0, 1]);
.domain([0, 1])
}
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)())
.domain([0, 7]);
.domain([0, 7])
}
let blend = isLight ? 0.12 : 0.24;
let blend = isLight ? 0.12 : 0.24
function sample(ramp: Scale, index: number): string {
return ramp(index).hex();
return ramp(index).hex()
}
const darkest = ramps.neutral(isLight ? 7 : 0).hex();
const darkest = ramps.neutral(isLight ? 7 : 0).hex()
const backgroundColor = {
// Title bar
@ -121,7 +121,7 @@ export function createTheme(
hovered: sample(ramps.green, 0.1),
active: sample(ramps.green, 0.15),
},
};
}
const borderColor = {
primary: sample(ramps.neutral, isLight ? 1.5 : 0),
@ -133,7 +133,7 @@ export function createTheme(
error: sample(ramps.red, 0.3),
warning: sample(ramps.yellow, 0.3),
info: sample(ramps.blue, 0.3),
};
}
const textColor = {
primary: sample(ramps.neutral, 6),
@ -147,7 +147,7 @@ export function createTheme(
warning: sample(ramps.yellow, 0.5),
info: sample(ramps.blue, 0.5),
onMedia: darkest,
};
}
const player = {
1: buildPlayer(sample(ramps.blue, 0.5)),
@ -158,7 +158,7 @@ export function createTheme(
6: buildPlayer(sample(ramps.cyan, 0.5)),
7: buildPlayer(sample(ramps.red, 0.5)),
8: buildPlayer(sample(ramps.yellow, 0.5)),
};
}
const editor = {
background: backgroundColor[500].base,
@ -171,7 +171,10 @@ export function createTheme(
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
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
@ -181,7 +184,7 @@ export function createTheme(
primary: textColor.placeholder,
active: textColor.active,
},
};
}
const syntax: Syntax = {
primary: {
@ -270,7 +273,7 @@ export function createTheme(
weight: fontWeights.normal,
italic: true,
},
};
}
const shadow = withOpacity(
ramps
@ -278,7 +281,7 @@ export function createTheme(
.darken()
.hex(),
blend
);
)
return {
name,
@ -292,5 +295,5 @@ export function createTheme(
player,
shadow,
ramps,
};
}
}

112
styles/src/themes/common/colorScheme.ts
View file

@ -1,32 +1,32 @@
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,
name: string
author: string
url: string
license: License
}
export interface License {
SPDX: SPDXExpression,
SPDX: SPDXExpression
/// A url where we can download the license's text
https_url: string,
https_url: string
license_checksum: string
}
@ -36,65 +36,65 @@ export interface Licenses {
}
// 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
}

58
styles/src/themes/common/ramps.ts
View file

@ -1,4 +1,4 @@
import chroma, { Color, Scale } from "chroma-js";
import chroma, { Color, Scale } from "chroma-js"
import {
ColorScheme,
Layer,
@ -7,12 +7,12 @@ import {
Style,
Styles,
StyleSet,
} from "./colorScheme";
} 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(
@ -21,7 +21,7 @@ export function createColorScheme(
colorRamps: { [rampName: string]: Scale }
): ColorScheme {
// Chromajs scales from 0 to 1 flipped if isLight is true
let ramps: RampSet = {} as any;
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.
@ -31,21 +31,23 @@ export function createColorScheme(
// 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(
;(ramps as any)[rampName] = chroma.scale(
colorRamps[rampName].colors(100).reverse()
);
)
}
ramps.neutral = chroma.scale(colorRamps.neutral.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 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))
}
let lowest = lowestLayer(ramps);
let middle = middleLayer(ramps);
let highest = highestLayer(ramps);
let lowest = lowestLayer(ramps)
let middle = middleLayer(ramps)
let highest = highestLayer(ramps)
let popoverShadow = {
blur: 4,
@ -55,7 +57,7 @@ export function createColorScheme(
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [1, 2],
};
}
let modalShadow = {
blur: 16,
@ -65,7 +67,7 @@ export function createColorScheme(
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [0, 2],
};
}
let players = {
"0": player(ramps.blue),
@ -76,7 +78,7 @@ export function createColorScheme(
"5": player(ramps.cyan),
"6": player(ramps.red),
"7": player(ramps.yellow),
};
}
return {
name,
@ -92,14 +94,14 @@ export function createColorScheme(
modalShadow,
players,
};
}
}
function player(ramp: Scale): Player {
return {
selection: ramp(0.5).alpha(0.24).hex(),
cursor: ramp(0.5).hex(),
};
}
}
function lowestLayer(ramps: RampSet): Layer {
@ -111,7 +113,7 @@ function lowestLayer(ramps: RampSet): Layer {
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 {
@ -123,7 +125,7 @@ function middleLayer(ramps: RampSet): Layer {
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 {
@ -135,7 +137,7 @@ function highestLayer(ramps: RampSet): Layer {
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(
@ -148,13 +150,13 @@ function buildStyleSet(
backgroundBase,
foregroundBase,
step
);
)
function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex();
return ramp(indexOrColor).hex()
} else {
return indexOrColor.hex();
return indexOrColor.hex()
}
}
@ -163,7 +165,7 @@ function buildStyleSet(
background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]),
};
}
}
return {
@ -173,7 +175,7 @@ function buildStyleSet(
active: buildStyle("active"),
disabled: buildStyle("disabled"),
inverted: buildStyle("inverted"),
};
}
}
function buildStyleDefinition(
@ -206,5 +208,5 @@ function buildStyleDefinition(
disabled: bgBase + step * 4,
inverted: bgBase + step * 2,
},
};
}
}

228
styles/src/themes/common/theme.ts
View file

@ -1,19 +1,19 @@
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,
@ -26,140 +26,140 @@ export function buildPlayer(
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;
name: string
isLight: boolean
backgroundColor: {
// Basically just Title Bar
// Lowest background level
100: BackgroundColorSet;
100: BackgroundColorSet
// Tab bars, panels, popovers
// Mid-ground
300: BackgroundColorSet;
300: BackgroundColorSet
// The editor
// Foreground
500: BackgroundColorSet;
500: BackgroundColorSet
// Hacks for elements on top of the midground
// Buttons in a panel, tab bar, or panel
on300: BackgroundColorSet;
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;
};
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;
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;
};
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;
};
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;
};
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;
background: string
indent_guide: string
indent_guide_active: string
line: {
active: string;
highlighted: string;
};
active: string
highlighted: string
}
highlight: {
selection: string;
occurrence: string;
activeOccurrence: string;
matchingBracket: string;
match: string;
activeMatch: string;
related: string;
};
selection: string
occurrence: string
activeOccurrence: string
matchingBracket: string
match: string
activeMatch: string
related: string
}
gutter: {
primary: string;
active: string;
};
};
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 };
1: Player
2: Player
3: Player
4: Player
5: Player
6: Player
7: Player
8: Player
}
shadow: string
ramps: { [rampName: string]: Scale }
}

18
styles/src/themes/one-dark.ts
View file

@ -1,8 +1,8 @@
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
@ -26,15 +26,17 @@ export const dark = createColorScheme(`${name}`, false, {
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"
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"
url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
}

21
styles/src/themes/one-light.ts
View file

@ -1,11 +1,12 @@
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([
neutral: chroma
.scale([
"#090a0b",
"#202227",
"#383a42",
@ -25,15 +26,17 @@ export const light = createColorScheme(`${name}`, true, {
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"
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"
url: "https://github.com/atom/atom/tree/master/packages/one-light-ui",
}

20
styles/src/themes/rose-pine-dawn.ts
View file

@ -1,8 +1,8 @@
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
@ -25,17 +25,19 @@ const ramps = {
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"
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"
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

20
styles/src/themes/rose-pine-moon.ts
View file

@ -1,8 +1,8 @@
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
@ -25,17 +25,19 @@ const ramps = {
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"
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"
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

20
styles/src/themes/rose-pine.ts
View file

@ -1,8 +1,8 @@
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([
@ -23,17 +23,19 @@ const ramps = {
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"
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"
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

21
styles/src/themes/sandcastle.ts
View file

@ -1,8 +1,8 @@
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([
@ -23,18 +23,19 @@ const ramps = {
blue: colorRamp(chroma("#528b8b")),
violet: colorRamp(chroma("#d75f5f")),
magenta: colorRamp(chroma("#a87322")),
};
}
export const dark = createColorScheme(`${name}`, false, ramps);
export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
name,
author: "gessig",
license: {
SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
license_checksum: "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc"
https_url:
"https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
license_checksum:
"8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc",
},
url: "https://github.com/gessig/base16-sandcastle-scheme"
url: "https://github.com/gessig/base16-sandcastle-scheme",
}

23
styles/src/themes/solarized.ts
View file

@ -1,8 +1,8 @@
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
@ -25,19 +25,20 @@ const ramps = {
blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")),
};
}
export const dark = createColorScheme(`${name} Dark`, false, ramps);
export const light = createColorScheme(`${name} Light`, true, ramps);
export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Metadata = {
name,
author: "Ethan Schoonover",
license: {
SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
license_checksum: "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6"
https_url:
"https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
license_checksum:
"494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6",
},
url: "https://github.com/altercation/solarized"
url: "https://github.com/altercation/solarized",
}

14
styles/src/themes/staff/abruzzo.ts
View file

@ -1,12 +1,12 @@
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: ""
url: "",
}
export const dark = createColorScheme(`${name}`, false, {
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#BCD0F5")),
violet: colorRamp(chroma("#dac5eb")),
magenta: colorRamp(chroma("#c1a3ef")),
});
})

19
styles/src/themes/staff/atelier-dune.ts
View file

@ -1,13 +1,14 @@
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",
};
}
const ramps = {
neutral: chroma.scale([
@ -28,7 +29,7 @@ const ramps = {
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)

17
styles/src/themes/staff/atelier-heath.ts
View file

@ -1,13 +1,14 @@
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",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Dark`, false, {
@ -29,7 +30,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#516aec")),
violet: colorRamp(chroma("#7b59c0")),
magenta: colorRamp(chroma("#cc33cc")),
});
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([
@ -50,4 +51,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#257fad")),
violet: colorRamp(chroma("#6b6bb8")),
magenta: colorRamp(chroma("#b72dd2")),
});
})

19
styles/src/themes/staff/atelier-seaside.ts
View file

@ -1,13 +1,14 @@
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",
};
}
const ramps = {
neutral: chroma.scale([
@ -28,7 +29,7 @@ const ramps = {
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)

14
styles/src/themes/staff/ayu-mirage.ts
View file

@ -1,12 +1,12 @@
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"
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Mirage`, false, {
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name} Mirage`, false, {
blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")),
});
})

16
styles/src/themes/staff/ayu.ts
View file

@ -1,12 +1,12 @@
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"
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Dark`, false, {
@ -28,7 +28,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#59C2FF")),
violet: colorRamp(chroma("#D2A6FF")),
magenta: colorRamp(chroma("#E6B673")),
});
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([
@ -49,4 +49,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#36A3D9")),
violet: colorRamp(chroma("#A37ACC")),
magenta: colorRamp(chroma("#E6BA7E")),
});
})

18
styles/src/themes/staff/brushtrees.ts
View file

@ -1,12 +1,12 @@
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"
url: "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme/blob/master/LICENSE",
}
export const dark = createColorScheme(`${name} Dark`, false, {
@ -28,7 +28,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")),
});
})
export const mirage = createColorScheme(`${name} Mirage`, false, {
neutral: chroma.scale([
@ -49,7 +49,7 @@ export const mirage = createColorScheme(`${name} Mirage`, false, {
blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")),
});
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([
@ -70,4 +70,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")),
});
})

14
styles/src/themes/staff/dracula.ts
View file

@ -1,13 +1,13 @@
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",
};
}
export const dark = createColorScheme(`${name}`, false, {
neutral: chroma.scale([
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#6272a4")),
violet: colorRamp(chroma("#bd93f9")),
magenta: colorRamp(chroma("#00f769")),
});
})

16
styles/src/themes/staff/gruvbox-medium.ts
View file

@ -1,13 +1,13 @@
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",
};
}
export const dark = createColorScheme(`${name} Dark Medium`, false, {
neutral: chroma.scale([
@ -111,7 +111,7 @@ export const dark = createColorScheme(`${name} Dark Medium`, false, {
"#D4CCC2",
"#FFFFFF",
]),
});
})
export const light = createColorScheme(`${name} Light Medium`, true, {
neutral: chroma.scale([
@ -135,4 +135,4 @@ export const light = createColorScheme(`${name} Light Medium`, true, {
blue: colorRamp(chroma("#076678")),
violet: colorRamp(chroma("#8f3f71")),
magenta: colorRamp(chroma("#d65d0e")),
});
})

14
styles/src/themes/staff/monokai.ts
View file

@ -1,13 +1,13 @@
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: "?",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#66d9ef")),
violet: colorRamp(chroma("#ae81ff")),
magenta: colorRamp(chroma("#cc6633")),
});
})

14
styles/src/themes/staff/nord.ts
View file

@ -1,13 +1,13 @@
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",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#EBCB8B")),
violet: colorRamp(chroma("#A3BE8C")),
magenta: colorRamp(chroma("#B48EAD")),
});
})

14
styles/src/themes/staff/seti-ui.ts
View file

@ -1,13 +1,13 @@
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",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#55b5db")),
violet: colorRamp(chroma("#a074c4")),
magenta: colorRamp(chroma("#8a553f")),
});
})

14
styles/src/themes/staff/tokyo-night-storm.ts
View file

@ -1,13 +1,13 @@
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",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#2AC3DE")),
violet: colorRamp(chroma("#BB9AF7")),
magenta: colorRamp(chroma("#F7768E")),
});
})

16
styles/src/themes/staff/tokyo-night.ts
View file

@ -1,13 +1,13 @@
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",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Night`, false, {
@ -29,7 +29,7 @@ export const dark = createColorScheme(`${name} Night`, false, {
blue: colorRamp(chroma("#2AC3DE")),
violet: colorRamp(chroma("#BB9AF7")),
magenta: colorRamp(chroma("#F7768E")),
});
})
export const light = createColorScheme(`${name} Day`, true, {
neutral: chroma.scale([
@ -50,4 +50,4 @@ export const light = createColorScheme(`${name} Day`, true, {
blue: colorRamp(chroma("#34548A")),
violet: colorRamp(chroma("#5A4A78")),
magenta: colorRamp(chroma("#8C4351")),
});
})

14
styles/src/themes/staff/zed-pro.ts
View file

@ -1,13 +1,13 @@
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: "?",
};
}
const ramps = {
neutral: chroma
@ -30,7 +30,7 @@ const ramps = {
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)

14
styles/src/themes/staff/zenburn.ts
View file

@ -1,13 +1,13 @@
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: "",
};
}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#7cb8bb")),
violet: colorRamp(chroma("#dc8cc3")),
magenta: colorRamp(chroma("#000000")),
});
})

20
styles/src/themes/summercamp.ts
View file

@ -1,8 +1,8 @@
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
@ -25,16 +25,18 @@ const ramps = {
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"
}
https_url:
"https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
license_checksum:
"fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf",
},
}

4
styles/src/utils/color.ts
View file

@ -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()
}

20
styles/src/utils/snakeCase.ts
View file

@ -1,4 +1,4 @@
import { snakeCase } from "case-anything";
import { snakeCase } from "case-anything"
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
@ -7,29 +7,29 @@ type SnakeCase<S> = S extends string
? 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 = {};
const snakeObject: any = {}
for (const key in object) {
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
snakeCaseValue(object[key]);
snakeCaseValue(object[key])
}
return snakeObject;
return snakeObject
}
function snakeCaseValue(value: any): any {
if (typeof value === "object") {
if (Array.isArray(value)) {
return value.map(snakeCaseValue);
return value.map(snakeCaseValue)
} else {
return snakeCaseTree(value);
return snakeCaseTree(value)
}
} else {
return value;
return value
}
}