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 * as fs from "fs"
import toml from "toml"; import toml from "toml"
import { import { schemeMeta } from "./colorSchemes"
schemeMeta import { Meta } from "./themes/common/colorScheme"
} from "./colorSchemes"; import https from "https"
import { Meta } from "./themes/common/colorScheme"; import crypto from "crypto"
import https from "https";
import crypto from "crypto";
const accepted_licenses_file = `${__dirname}/../../script/licenses/zed-licenses.toml` const accepted_licenses_file = `${__dirname}/../../script/licenses/zed-licenses.toml`
// Use the cargo-about configuration file as the source of truth for supported licenses. // Use the cargo-about configuration file as the source of truth for supported licenses.
function parseAcceptedToml(file: string): string[] { 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)) { if (!Array.isArray(obj.accepted)) {
throw Error("Accepted license source is malformed") throw Error("Accepted license source is malformed")
@ -22,52 +20,68 @@ function parseAcceptedToml(file: string): string[] {
return obj.accepted return obj.accepted
} }
function checkLicenses(schemeMeta: Meta[], licenses: string[]) { function checkLicenses(schemeMeta: Meta[], licenses: string[]) {
for (let meta of schemeMeta) { for (let meta of schemeMeta) {
// FIXME: Add support for conjuctions and conditions // FIXME: Add support for conjuctions and conditions
if (licenses.indexOf(meta.license.SPDX) < 0) { 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(
function getLicenseText(schemeMeta: Meta[], callback: (meta: Meta, license_text: string) => void) { schemeMeta: Meta[],
callback: (meta: Meta, license_text: string) => void
) {
for (let meta of schemeMeta) { for (let meta of schemeMeta) {
// The following copied from the example code on nodejs.org: // The following copied from the example code on nodejs.org:
// https://nodejs.org/api/http.html#httpgetoptions-callback // https://nodejs.org/api/http.html#httpgetoptions-callback
https.get(meta.license.https_url, (res) => { https
const { statusCode } = res; .get(meta.license.https_url, (res) => {
const { statusCode } = res
if (statusCode < 200 || statusCode >= 300) { 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'); res.setEncoding("utf8")
let rawData = ''; let rawData = ""
res.on('data', (chunk) => { rawData += chunk; }); res.on("data", (chunk) => {
res.on('end', () => { rawData += chunk
const hash = crypto.createHash('sha256').update(rawData).digest('hex'); })
res.on("end", () => {
const hash = crypto
.createHash("sha256")
.update(rawData)
.digest("hex")
if (meta.license.license_checksum == hash) { if (meta.license.license_checksum == hash) {
callback(meta, rawData) callback(meta, rawData)
} else { } 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 throw e
}); })
} }
} }
function writeLicense(schemeMeta: Meta, text: String) { 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) checkLicenses(schemeMeta, accepted_licenses)
getLicenseText(schemeMeta, (meta, text) => { getLicenseText(schemeMeta, (meta, text) => {
writeLicense(meta, text) writeLicense(meta, text)
}); })

56
styles/src/buildThemes.ts
View file

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

50
styles/src/colorSchemes.ts
View file

@ -1,45 +1,45 @@
import fs from "fs"; import fs from "fs"
import path from "path"; import path from "path"
import { ColorScheme, Meta } from "./themes/common/colorScheme"; import { ColorScheme, Meta } from "./themes/common/colorScheme"
const colorSchemes: ColorScheme[] = []; const colorSchemes: ColorScheme[] = []
export default colorSchemes; export default colorSchemes
const schemeMeta: Meta[] = []; const schemeMeta: Meta[] = []
export { schemeMeta }; export { schemeMeta }
const staffColorSchemes: ColorScheme[] = []; const staffColorSchemes: ColorScheme[] = []
export { staffColorSchemes }; export { staffColorSchemes }
const experimentalColorSchemes: ColorScheme[] = []; const experimentalColorSchemes: ColorScheme[] = []
export { experimentalColorSchemes }; 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)) { for (const fileName of fs.readdirSync(themesPath)) {
if (fileName == "template.ts") continue; if (fileName == "template.ts") continue
const filePath = path.join(themesPath, fileName); const filePath = path.join(themesPath, fileName)
if (fs.statSync(filePath).isFile()) { if (fs.statSync(filePath).isFile()) {
const colorScheme = require(filePath); const colorScheme = require(filePath)
callback(colorScheme, path.basename(filePath)); callback(colorScheme, path.basename(filePath))
} }
} }
} }
function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) { function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
for_all_color_schemes_in(themesPath, (colorScheme, _path) => { for_all_color_schemes_in(themesPath, (colorScheme, _path) => {
if (colorScheme.dark) colorSchemes.push(colorScheme.dark); if (colorScheme.dark) colorSchemes.push(colorScheme.dark)
if (colorScheme.light) colorSchemes.push(colorScheme.light); if (colorScheme.light) colorSchemes.push(colorScheme.light)
}) })
} }
fillColorSchemes(themes_directory, colorSchemes); fillColorSchemes(themes_directory, colorSchemes)
fillColorSchemes( fillColorSchemes(path.resolve(`${themes_directory}/staff`), staffColorSchemes)
path.resolve(`${themes_directory}/staff`),
staffColorSchemes
);
function fillMeta(themesPath: string, meta: Meta[]) { function fillMeta(themesPath: string, meta: Meta[]) {
for_all_color_schemes_in(themesPath, (colorScheme, path) => { 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 = { export const fontFamilies = {
sans: "Zed Sans", sans: "Zed Sans",
mono: "Zed Mono", mono: "Zed Mono",
}; }
export const fontSizes = { export const fontSizes = {
"3xs": 8, "3xs": 8,
@ -11,7 +11,7 @@ export const fontSizes = {
md: 16, md: 16,
lg: 18, lg: 18,
xl: 20, xl: 20,
}; }
export type FontWeight = export type FontWeight =
| "thin" | "thin"
@ -22,7 +22,7 @@ export type FontWeight =
| "semibold" | "semibold"
| "bold" | "bold"
| "extra_bold" | "extra_bold"
| "black"; | "black"
export const fontWeights: { [key: string]: FontWeight } = { export const fontWeights: { [key: string]: FontWeight } = {
thin: "thin", thin: "thin",
extra_light: "extra_light", extra_light: "extra_light",
@ -33,7 +33,7 @@ export const fontWeights: { [key: string]: FontWeight } = {
bold: "bold", bold: "bold",
extra_bold: "extra_bold", extra_bold: "extra_bold",
black: "black", black: "black",
}; }
export const sizes = { export const sizes = {
px: 1, px: 1,
@ -42,4 +42,4 @@ export const sizes = {
md: 6, md: 6,
lg: 8, lg: 8,
xl: 12, xl: 12,
}; }

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

@ -1,25 +1,25 @@
import { text } from "./components"; import { text } from "./components"
import contactFinder from "./contactFinder"; import contactFinder from "./contactFinder"
import contactsPopover from "./contactsPopover"; import contactsPopover from "./contactsPopover"
import commandPalette from "./commandPalette"; import commandPalette from "./commandPalette"
import editor from "./editor"; import editor from "./editor"
import projectPanel from "./projectPanel"; import projectPanel from "./projectPanel"
import search from "./search"; import search from "./search"
import picker from "./picker"; import picker from "./picker"
import workspace from "./workspace"; import workspace from "./workspace"
import contextMenu from "./contextMenu"; import contextMenu from "./contextMenu"
import sharedScreen from "./sharedScreen"; import sharedScreen from "./sharedScreen"
import projectDiagnostics from "./projectDiagnostics"; import projectDiagnostics from "./projectDiagnostics"
import contactNotification from "./contactNotification"; import contactNotification from "./contactNotification"
import updateNotification from "./updateNotification"; import updateNotification from "./updateNotification"
import simpleMessageNotification from "./simpleMessageNotification"; import simpleMessageNotification from "./simpleMessageNotification"
import projectSharedNotification from "./projectSharedNotification"; import projectSharedNotification from "./projectSharedNotification"
import tooltip from "./tooltip"; import tooltip from "./tooltip"
import terminal from "./terminal"; import terminal from "./terminal"
import contactList from "./contactList"; import contactList from "./contactList"
import incomingCallNotification from "./incomingCallNotification"; import incomingCallNotification from "./incomingCallNotification"
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import feedback from "./feedback"; import feedback from "./feedback"
export default function app(colorScheme: ColorScheme): Object { export default function app(colorScheme: ColorScheme): Object {
return { return {
@ -68,5 +68,5 @@ export default function app(colorScheme: ColorScheme): Object {
magenta: colorScheme.ramps.magenta.colors(100, "hex"), 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 { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color"
import { text, background } from "./components"; import { text, background } from "./components"
export default function commandPalette(colorScheme: ColorScheme) { export default function commandPalette(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest
return { return {
keystrokeSpacing: 8, keystrokeSpacing: 8,
key: { key: {
@ -26,5 +26,5 @@ export default function commandPalette(colorScheme: ColorScheme) {
background: withOpacity(background(layer, "on"), 0.2), 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 { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"; import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
function isStyleSet(key: any): key is StyleSets { function isStyleSet(key: any): key is StyleSets {
return [ return [
@ -10,7 +10,7 @@ function isStyleSet(key: any): key is StyleSets {
"positive", "positive",
"warning", "warning",
"negative", "negative",
].includes(key); ].includes(key)
} }
function isStyle(key: any): key is Styles { function isStyle(key: any): key is Styles {
@ -21,83 +21,83 @@ function isStyle(key: any): key is Styles {
"hovered", "hovered",
"pressed", "pressed",
"inverted", "inverted",
].includes(key); ].includes(key)
} }
function getStyle( function getStyle(
layer: Layer, layer: Layer,
possibleStyleSetOrStyle?: any, possibleStyleSetOrStyle?: any,
possibleStyle?: any possibleStyle?: any
): Style { ): Style {
let styleSet: StyleSets = "base"; let styleSet: StyleSets = "base"
let style: Styles = "default"; let style: Styles = "default"
if (isStyleSet(possibleStyleSetOrStyle)) { if (isStyleSet(possibleStyleSetOrStyle)) {
styleSet = possibleStyleSetOrStyle; styleSet = possibleStyleSetOrStyle
} else if (isStyle(possibleStyleSetOrStyle)) { } else if (isStyle(possibleStyleSetOrStyle)) {
style = possibleStyleSetOrStyle; style = possibleStyleSetOrStyle
} }
if (isStyle(possibleStyle)) { 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( export function background(
layer: Layer, layer: Layer,
styleSet?: StyleSets, styleSet?: StyleSets,
style?: Styles style?: Styles
): string; ): string
export function background( export function background(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, styleSetOrStyles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): 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( export function borderColor(
layer: Layer, layer: Layer,
styleSet?: StyleSets, styleSet?: StyleSets,
style?: Styles style?: Styles
): string; ): string
export function borderColor( export function borderColor(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, styleSetOrStyles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): 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( export function foreground(
layer: Layer, layer: Layer,
styleSet?: StyleSets, styleSet?: StyleSets,
style?: Styles style?: Styles
): string; ): string
export function foreground( export function foreground(
layer: Layer, layer: Layer,
styleSetOrStyles?: StyleSets | Styles, styleSetOrStyles?: StyleSets | Styles,
style?: Styles style?: Styles
): string { ): string {
return getStyle(layer, styleSetOrStyles, style).foreground; return getStyle(layer, styleSetOrStyles, style).foreground
} }
interface Text { interface Text {
family: keyof typeof fontFamilies; family: keyof typeof fontFamilies
color: string; color: string
size: number; size: number
weight?: FontWeight; weight?: FontWeight
underline?: boolean; underline?: boolean
} }
interface TextProperties { interface TextProperties {
size?: keyof typeof fontSizes; size?: keyof typeof fontSizes
weight?: FontWeight; weight?: FontWeight
underline?: boolean; underline?: boolean
color?: string; color?: string
} }
export function text( export function text(
@ -106,24 +106,24 @@ export function text(
styleSet: StyleSets, styleSet: StyleSets,
style: Styles, style: Styles,
properties?: TextProperties properties?: TextProperties
): Text; ): Text
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
styleSet: StyleSets, styleSet: StyleSets,
properties?: TextProperties properties?: TextProperties
): Text; ): Text
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
style: Styles, style: Styles,
properties?: TextProperties properties?: TextProperties
): Text; ): Text
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
properties?: TextProperties properties?: TextProperties
): Text; ): Text
export function text( export function text(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
@ -131,43 +131,43 @@ export function text(
styleOrProperties?: Styles | TextProperties, styleOrProperties?: Styles | TextProperties,
properties?: TextProperties properties?: TextProperties
) { ) {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties); let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
if (typeof styleSetStyleOrProperties === "object") { if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties; properties = styleSetStyleOrProperties
} }
if (typeof styleOrProperties === "object") { if (typeof styleOrProperties === "object") {
properties = styleOrProperties; properties = styleOrProperties
} }
let size = fontSizes[properties?.size || "sm"]; let size = fontSizes[properties?.size || "sm"]
let color = properties?.color || style.foreground; let color = properties?.color || style.foreground
return { return {
family: fontFamilies[fontFamily], family: fontFamilies[fontFamily],
...properties, ...properties,
color, color,
size, size,
}; }
} }
export interface Border { export interface Border {
color: string; color: string
width: number; width: number
top?: boolean; top?: boolean
bottom?: boolean; bottom?: boolean
left?: boolean; left?: boolean
right?: boolean; right?: boolean
overlay?: boolean; overlay?: boolean
} }
export interface BorderProperties { export interface BorderProperties {
width?: number; width?: number
top?: boolean; top?: boolean
bottom?: boolean; bottom?: boolean
left?: boolean; left?: boolean
right?: boolean; right?: boolean
overlay?: boolean; overlay?: boolean
} }
export function border( export function border(
@ -175,36 +175,36 @@ export function border(
styleSet: StyleSets, styleSet: StyleSets,
style: Styles, style: Styles,
properties?: BorderProperties properties?: BorderProperties
): Border; ): Border
export function border( export function border(
layer: Layer, layer: Layer,
styleSet: StyleSets, styleSet: StyleSets,
properties?: BorderProperties properties?: BorderProperties
): Border; ): Border
export function border( export function border(
layer: Layer, layer: Layer,
style: Styles, style: Styles,
properties?: BorderProperties properties?: BorderProperties
): Border; ): Border
export function border(layer: Layer, properties?: BorderProperties): Border; export function border(layer: Layer, properties?: BorderProperties): Border
export function border( export function border(
layer: Layer, layer: Layer,
styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties, styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
styleOrProperties?: Styles | BorderProperties, styleOrProperties?: Styles | BorderProperties,
properties?: BorderProperties properties?: BorderProperties
): Border { ): Border {
let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties); let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
if (typeof styleSetStyleOrProperties === "object") { if (typeof styleSetStyleOrProperties === "object") {
properties = styleSetStyleOrProperties; properties = styleSetStyleOrProperties
} }
if (typeof styleOrProperties === "object") { if (typeof styleOrProperties === "object") {
properties = styleOrProperties; properties = styleOrProperties
} }
return { return {
color: style.border, color: style.border,
width: 1, width: 1,
...properties, ...properties,
}; }
} }

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

@ -1,24 +1,24 @@
import picker from "./picker"; import picker from "./picker"
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, foreground, text } from "./components"; import { background, border, foreground, text } from "./components"
export default function contactFinder(colorScheme: ColorScheme) { export default function contactFinder(colorScheme: ColorScheme) {
let layer = colorScheme.middle; let layer = colorScheme.middle
const sideMargin = 6; const sideMargin = 6
const contactButton = { const contactButton = {
background: background(layer, "variant"), background: background(layer, "variant"),
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 8, iconWidth: 8,
buttonWidth: 16, buttonWidth: 16,
cornerRadius: 8, cornerRadius: 8,
}; }
const pickerStyle = picker(colorScheme); const pickerStyle = picker(colorScheme)
const pickerInput = { const pickerInput = {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
text: text(layer, "mono",), text: text(layer, "mono"),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }), placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: colorScheme.players[0], selection: colorScheme.players[0],
border: border(layer), border: border(layer),
@ -31,8 +31,8 @@ export default function contactFinder(colorScheme: ColorScheme) {
margin: { margin: {
left: sideMargin, left: sideMargin,
right: sideMargin, right: sideMargin,
},
} }
};
return { return {
picker: { picker: {
@ -43,7 +43,7 @@ export default function contactFinder(colorScheme: ColorScheme) {
}, },
noMatches: pickerStyle.noMatches, noMatches: pickerStyle.noMatches,
inputEditor: pickerInput, inputEditor: pickerInput,
emptyInputEditor: pickerInput emptyInputEditor: pickerInput,
}, },
rowHeight: 28, rowHeight: 28,
contactAvatar: { contactAvatar: {
@ -66,5 +66,5 @@ export default function contactFinder(colorScheme: ColorScheme) {
background: background(layer, "disabled"), background: background(layer, "disabled"),
color: foreground(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 { ColorScheme } from "../themes/common/colorScheme"
import { import { background, border, borderColor, foreground, text } from "./components"
background,
border,
borderColor,
foreground,
text,
} from "./components";
export default function contactsPanel(colorScheme: ColorScheme) { export default function contactsPanel(colorScheme: ColorScheme) {
const nameMargin = 8; const nameMargin = 8
const sidePadding = 12; const sidePadding = 12
let layer = colorScheme.middle; let layer = colorScheme.middle
const contactButton = { const contactButton = {
background: background(layer, "on"), background: background(layer, "on"),
@ -19,7 +13,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
iconWidth: 8, iconWidth: 8,
buttonWidth: 16, buttonWidth: 16,
cornerRadius: 8, cornerRadius: 8,
}; }
const projectRow = { const projectRow = {
guestAvatarSpacing: 4, guestAvatarSpacing: 4,
height: 24, height: 24,
@ -44,7 +38,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
left: sidePadding, left: sidePadding,
right: sidePadding, right: sidePadding,
}, },
}; }
return { return {
background: background(layer), background: background(layer),
@ -53,7 +47,9 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
text: text(layer, "mono", "on"), 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], selection: colorScheme.players[0],
border: border(layer, "on"), border: border(layer, "on"),
padding: { padding: {
@ -182,5 +178,5 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "active"), background: background(layer, "active"),
}, },
}, },
}; }
} }

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

@ -1,11 +1,11 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, foreground, text } from "./components"; import { background, foreground, text } from "./components"
const avatarSize = 12; const avatarSize = 12
const headerPadding = 8; const headerPadding = 8
export default function contactNotification(colorScheme: ColorScheme): Object { export default function contactNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.lowest; let layer = colorScheme.lowest
return { return {
headerAvatar: { headerAvatar: {
height: avatarSize, height: avatarSize,
@ -41,5 +41,5 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

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

@ -1,9 +1,9 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function contactsPopover(colorScheme: ColorScheme) { export default function contactsPopover(colorScheme: ColorScheme) {
let layer = colorScheme.middle; let layer = colorScheme.middle
const sidePadding = 12; const sidePadding = 12
return { return {
background: background(layer), background: background(layer),
cornerRadius: 6, cornerRadius: 6,

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

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

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

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

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

@ -1,9 +1,8 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../themes/common/colorScheme"; import { background, border, text } from "./components"
import { background, border, text } from "./components";
export default function feedback(colorScheme: ColorScheme) { export default function feedback(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest
return { return {
submit_button: { submit_button: {
@ -33,5 +32,5 @@ export default function feedback(colorScheme: ColorScheme) {
}, },
button_margin: 8, button_margin: 8,
info_text: text(layer, "sans", "default", { size: "xs" }), 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 { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function HoverPopover(colorScheme: ColorScheme) { export default function HoverPopover(colorScheme: ColorScheme) {
let layer = colorScheme.middle; let layer = colorScheme.middle
let baseContainer = { let baseContainer = {
background: background(layer), background: background(layer),
cornerRadius: 8, cornerRadius: 8,
@ -17,7 +17,7 @@ export default function HoverPopover(colorScheme: ColorScheme) {
margin: { margin: {
left: -8, left: -8,
}, },
}; }
return { return {
container: baseContainer, container: baseContainer,
@ -41,5 +41,5 @@ export default function HoverPopover(colorScheme: ColorScheme) {
}, },
prose: text(layer, "sans", { size: "sm" }), 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 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 { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function incomingCallNotification(colorScheme: ColorScheme): Object { export default function incomingCallNotification(
let layer = colorScheme.middle; colorScheme: ColorScheme
const avatarSize = 48; ): Object {
let layer = colorScheme.middle
const avatarSize = 48
return { return {
windowHeight: 74, windowHeight: 74,
windowWidth: 380, windowWidth: 380,
@ -35,11 +37,17 @@ export default function incomingCallNotification(colorScheme: ColorScheme): Obje
acceptButton: { acceptButton: {
background: background(layer, "accent"), background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }), 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: { declineButton: {
border: border(layer, { left: true }), 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 { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function picker(colorScheme: ColorScheme) { export default function picker(colorScheme: ColorScheme) {
let layer = colorScheme.lowest; let layer = colorScheme.lowest
const container = { const container = {
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
@ -10,8 +10,8 @@ export default function picker(colorScheme: ColorScheme) {
cornerRadius: 12, cornerRadius: 12,
padding: { padding: {
bottom: 4, bottom: 4,
},
} }
};
const inputEditor = { const inputEditor = {
placeholderText: text(layer, "sans", "on", "disabled"), placeholderText: text(layer, "sans", "on", "disabled"),
selection: colorScheme.players[0], selection: colorScheme.players[0],
@ -26,16 +26,16 @@ export default function picker(colorScheme: ColorScheme) {
margin: { margin: {
bottom: 4, bottom: 4,
}, },
}; }
const emptyInputEditor = { ...inputEditor }; const emptyInputEditor = { ...inputEditor }
delete emptyInputEditor.border; delete emptyInputEditor.border
delete emptyInputEditor.margin; delete emptyInputEditor.margin
return { return {
...container, ...container,
emptyContainer: { emptyContainer: {
...container, ...container,
padding: {} padding: {},
}, },
item: { item: {
padding: { padding: {
@ -74,5 +74,5 @@ export default function picker(colorScheme: ColorScheme) {
top: 8, top: 8,
}, },
}, },
}; }
} }

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

@ -1,13 +1,13 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, text } from "./components"; import { background, text } from "./components"
export default function projectDiagnostics(colorScheme: ColorScheme) { export default function projectDiagnostics(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest
return { return {
background: background(layer), background: background(layer),
tabIconSpacing: 4, tabIconSpacing: 4,
tabIconWidth: 13, tabIconWidth: 13,
tabSummarySpacing: 10, tabSummarySpacing: 10,
emptyMessage: text(layer, "sans", "variant", { size: "md" }), 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 { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color"
import { background, border, foreground, text } from "./components"; import { background, border, foreground, text } from "./components"
export default function projectPanel(colorScheme: ColorScheme) { export default function projectPanel(colorScheme: ColorScheme) {
let layer = colorScheme.middle; let layer = colorScheme.middle
let baseEntry = { let baseEntry = {
height: 24, height: 24,
@ -26,7 +26,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "active"), background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
}; }
return { return {
background: background(layer), background: background(layer),
@ -56,5 +56,5 @@ export default function projectPanel(colorScheme: ColorScheme) {
text: text(layer, "mono", "on", { size: "sm" }), text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0], selection: colorScheme.players[0],
}, },
}; }
} }

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

@ -1,10 +1,12 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function projectSharedNotification(colorScheme: ColorScheme): Object { export default function projectSharedNotification(
let layer = colorScheme.middle; colorScheme: ColorScheme
): Object {
let layer = colorScheme.middle
const avatarSize = 48; const avatarSize = 48
return { return {
windowHeight: 74, windowHeight: 74,
windowWidth: 380, windowWidth: 380,
@ -35,12 +37,18 @@ export default function projectSharedNotification(colorScheme: ColorScheme): Obj
buttonWidth: 96, buttonWidth: 96,
openButton: { openButton: {
background: background(layer, "accent"), background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true, }), border: border(layer, { left: true, bottom: true }),
...text(layer, "sans", "accent", { size: "xs", weight: "extra_bold" }) ...text(layer, "sans", "accent", {
size: "xs",
weight: "extra_bold",
}),
}, },
dismissButton: { dismissButton: {
border: border(layer, { left: true }), 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 { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color"
import { background, border, foreground, text } from "./components"; import { background, border, foreground, text } from "./components"
export default function search(colorScheme: ColorScheme) { export default function search(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest
// Search input // Search input
const editor = { const editor = {
@ -24,7 +24,7 @@ export default function search(colorScheme: ColorScheme) {
left: 12, left: 12,
right: 8, right: 8,
}, },
}; }
return { return {
// TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive // 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"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

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

@ -1,9 +1,9 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background } from "./components"; import { background } from "./components"
export default function sharedScreen(colorScheme: ColorScheme) { export default function sharedScreen(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest
return { 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 { ColorScheme } from "../themes/common/colorScheme"
import { foreground, text } from "./components"; import { foreground, text } from "./components"
const headerPadding = 8; const headerPadding = 8
export default function simpleMessageNotification(colorScheme: ColorScheme): Object { export default function simpleMessageNotification(
let layer = colorScheme.middle; colorScheme: ColorScheme
): Object {
let layer = colorScheme.middle
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
@ -27,5 +29,5 @@ export default function simpleMessageNotification(colorScheme: ColorScheme): Obj
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

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

@ -1,18 +1,18 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, foreground, text } from "./components"; import { background, border, foreground, text } from "./components"
export default function statusBar(colorScheme: ColorScheme) { export default function statusBar(colorScheme: ColorScheme) {
let layer = colorScheme.lowest; let layer = colorScheme.lowest
const statusContainer = { const statusContainer = {
cornerRadius: 6, cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 }, padding: { top: 3, bottom: 3, left: 6, right: 6 },
}; }
const diagnosticStatusContainer = { const diagnosticStatusContainer = {
cornerRadius: 6, cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 }, padding: { top: 1, bottom: 1, left: 6, right: 6 },
}; }
return { return {
height: 30, height: 30,
@ -114,5 +114,5 @@ export default function statusBar(colorScheme: ColorScheme) {
background: background(layer, "accent"), background: background(layer, "accent"),
}, },
}, },
}; }
} }

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

@ -1,12 +1,12 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color"
import { text, border, background, foreground } from "./components"; import { text, border, background, foreground } from "./components"
export default function tabBar(colorScheme: ColorScheme) { export default function tabBar(colorScheme: ColorScheme) {
const height = 32; const height = 32
let activeLayer = colorScheme.highest; let activeLayer = colorScheme.highest
let layer = colorScheme.middle; let layer = colorScheme.middle
const tab = { const tab = {
height, height,
@ -37,7 +37,7 @@ export default function tabBar(colorScheme: ColorScheme) {
margin: { left: 8 }, margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }), ...text(layer, "sans", "disabled", { size: "2xs" }),
}, },
}; }
const activePaneActiveTab = { const activePaneActiveTab = {
...tab, ...tab,
@ -47,13 +47,13 @@ export default function tabBar(colorScheme: ColorScheme) {
...tab.border, ...tab.border,
bottom: false, bottom: false,
}, },
}; }
const inactivePaneInactiveTab = { const inactivePaneInactiveTab = {
...tab, ...tab,
background: background(layer), background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
}; }
const inactivePaneActiveTab = { const inactivePaneActiveTab = {
...tab, ...tab,
@ -63,14 +63,14 @@ export default function tabBar(colorScheme: ColorScheme) {
...tab.border, ...tab.border,
bottom: false, bottom: false,
}, },
}; }
const draggedTab = { const draggedTab = {
...activePaneActiveTab, ...activePaneActiveTab,
background: withOpacity(tab.background, 0.9), background: withOpacity(tab.background, 0.9),
border: undefined as any, border: undefined as any,
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
}; }
return { return {
height, height,
@ -99,5 +99,5 @@ export default function tabBar(colorScheme: ColorScheme) {
right: false, 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) { export default function terminal(colorScheme: ColorScheme) {
/** /**
@ -48,5 +48,5 @@ export default function terminal(colorScheme: ColorScheme) {
dimWhite: colorScheme.ramps.neutral(0.6).hex(), dimWhite: colorScheme.ramps.neutral(0.6).hex(),
brightForeground: colorScheme.ramps.neutral(1).hex(), brightForeground: colorScheme.ramps.neutral(1).hex(),
dimForeground: colorScheme.ramps.neutral(0).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 { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components"; import { background, border, text } from "./components"
export default function tooltip(colorScheme: ColorScheme) { export default function tooltip(colorScheme: ColorScheme) {
let layer = colorScheme.middle; let layer = colorScheme.middle
return { return {
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
@ -19,5 +19,5 @@ export default function tooltip(colorScheme: ColorScheme) {
...text(layer, "mono", "on", { size: "xs", weight: "bold" }), ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
}, },
maxTextWidth: 200, maxTextWidth: 200,
}; }
} }

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

@ -1,10 +1,10 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { foreground, text } from "./components"; import { foreground, text } from "./components"
const headerPadding = 8; const headerPadding = 8
export default function updateNotification(colorScheme: ColorScheme): Object { export default function updateNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle; let layer = colorScheme.middle
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
@ -27,5 +27,5 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

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

@ -1,18 +1,12 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color"
import { import { background, border, borderColor, foreground, text } from "./components"
background, import statusBar from "./statusBar"
border, import tabBar from "./tabBar"
borderColor,
foreground,
text,
} from "./components";
import statusBar from "./statusBar";
import tabBar from "./tabBar";
export default function workspace(colorScheme: ColorScheme) { export default function workspace(colorScheme: ColorScheme) {
const layer = colorScheme.lowest; const layer = colorScheme.lowest
const itemSpacing = 8; const itemSpacing = 8
const titlebarButton = { const titlebarButton = {
cornerRadius: 6, cornerRadius: 6,
padding: { padding: {
@ -39,11 +33,11 @@ export default function workspace(colorScheme: ColorScheme) {
background: background(layer, "variant", "active"), background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"), border: border(layer, "variant", "active"),
}, },
}; }
const avatarWidth = 18; const avatarWidth = 18
const avatarOuterWidth = avatarWidth + 4; const avatarOuterWidth = avatarWidth + 4
const followerAvatarWidth = 14; const followerAvatarWidth = 14
const followerAvatarOuterWidth = followerAvatarWidth + 4; const followerAvatarOuterWidth = followerAvatarWidth + 4
return { return {
background: background(layer), background: background(layer),
@ -220,7 +214,11 @@ export default function workspace(colorScheme: ColorScheme) {
cornerRadius: 6, cornerRadius: 6,
hover: { hover: {
color: foreground(colorScheme.highest, "on", "hovered"), color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"), background: background(
colorScheme.highest,
"on",
"hovered"
),
}, },
disabled: { disabled: {
color: foreground(colorScheme.highest, "on", "disabled"), color: foreground(colorScheme.highest, "on", "disabled"),
@ -262,5 +260,5 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
}, },
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), 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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Andromeda"; const name = "Andromeda"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,17 +25,19 @@ const ramps = {
blue: colorRamp(chroma("#0CA793")), blue: colorRamp(chroma("#0CA793")),
violet: colorRamp(chroma("#8A3FA6")), violet: colorRamp(chroma("#8A3FA6")),
magenta: colorRamp(chroma("#C74DED")), magenta: colorRamp(chroma("#C74DED")),
}; }
export const dark = createColorScheme(`${name}`, false, ramps); export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "EliverLara", author: "EliverLara",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md", https_url:
license_checksum: "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Atelier Cave"; const name = "Atelier Cave"
export const dark = createColorScheme(`${name} Dark`, false, { export const dark = createColorScheme(`${name} Dark`, false, {
neutral: chroma neutral: chroma
@ -25,7 +25,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#576ddb")), blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")), violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")), magenta: colorRamp(chroma("#bf40bf")),
}); })
export const light = createColorScheme(`${name} Light`, true, { export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma neutral: chroma
@ -48,8 +48,7 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#576ddb")), blue: colorRamp(chroma("#576ddb")),
violet: colorRamp(chroma("#955ae7")), violet: colorRamp(chroma("#955ae7")),
magenta: colorRamp(chroma("#bf40bf")), magenta: colorRamp(chroma("#bf40bf")),
}); })
export const meta: Meta = { export const meta: Meta = {
name, name,
@ -57,7 +56,8 @@ export const meta: Meta = {
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://atelierbram.mit-license.org/license.txt", 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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Atelier Sulphurpool"; const name = "Atelier Sulphurpool"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,10 +25,10 @@ const ramps = {
blue: colorRamp(chroma("#3d8fd1")), blue: colorRamp(chroma("#3d8fd1")),
violet: colorRamp(chroma("#6679cc")), violet: colorRamp(chroma("#6679cc")),
magenta: colorRamp(chroma("#9c637a")), magenta: colorRamp(chroma("#9c637a")),
}; }
export const dark = createColorScheme(`${name} Dark`, false, ramps); export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, ramps); export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
@ -36,7 +36,8 @@ export const meta: Meta = {
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://atelierbram.mit-license.org/license.txt", 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 // NOTE – This should be removed
// I (Nate) need to come back and check if we are still using this anywhere // I (Nate) need to come back and check if we are still using this anywhere
import chroma, { Color, Scale } from "chroma-js"; import chroma, { Color, Scale } from "chroma-js"
import { fontWeights } from "../../common"; import { fontWeights } from "../../common"
import { withOpacity } from "../../utils/color"; import { withOpacity } from "../../utils/color"
import Theme, { buildPlayer, Syntax } from "./theme"; import Theme, { buildPlayer, Syntax } from "./theme"
export function colorRamp(color: Color): Scale { export function colorRamp(color: Color): Scale {
let hue = color.hsl()[0]; let hue = color.hsl()[0]
let endColor = chroma.hsl(hue, 0.88, 0.96); let endColor = chroma.hsl(hue, 0.88, 0.96)
let startColor = chroma.hsl(hue, 0.68, 0.12); let startColor = chroma.hsl(hue, 0.68, 0.12)
return chroma.scale([startColor, color, endColor]).mode("hsl"); return chroma.scale([startColor, color, endColor]).mode("hsl")
} }
export function createTheme( export function createTheme(
@ -18,7 +18,7 @@ export function createTheme(
isLight: boolean, isLight: boolean,
color_ramps: { [rampName: string]: Scale } color_ramps: { [rampName: string]: Scale }
): Theme { ): Theme {
let ramps: typeof color_ramps = {}; let ramps: typeof color_ramps = {}
// Chromajs mutates the underlying ramp when you call domain. This causes problems because // 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. // 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 // 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) { for (var rampName in color_ramps) {
ramps[rampName] = chroma ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)()) .scale((color_ramps[rampName].colors as any)())
.domain([1, 0]); .domain([1, 0])
} }
ramps.neutral = chroma ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)()) .scale((color_ramps.neutral.colors as any)())
.domain([7, 0]); .domain([7, 0])
} else { } else {
for (var rampName in color_ramps) { for (var rampName in color_ramps) {
ramps[rampName] = chroma ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)()) .scale((color_ramps[rampName].colors as any)())
.domain([0, 1]); .domain([0, 1])
} }
ramps.neutral = chroma ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)()) .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 { 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 = { const backgroundColor = {
// Title bar // Title bar
@ -121,7 +121,7 @@ export function createTheme(
hovered: sample(ramps.green, 0.1), hovered: sample(ramps.green, 0.1),
active: sample(ramps.green, 0.15), active: sample(ramps.green, 0.15),
}, },
}; }
const borderColor = { const borderColor = {
primary: sample(ramps.neutral, isLight ? 1.5 : 0), primary: sample(ramps.neutral, isLight ? 1.5 : 0),
@ -133,7 +133,7 @@ export function createTheme(
error: sample(ramps.red, 0.3), error: sample(ramps.red, 0.3),
warning: sample(ramps.yellow, 0.3), warning: sample(ramps.yellow, 0.3),
info: sample(ramps.blue, 0.3), info: sample(ramps.blue, 0.3),
}; }
const textColor = { const textColor = {
primary: sample(ramps.neutral, 6), primary: sample(ramps.neutral, 6),
@ -147,7 +147,7 @@ export function createTheme(
warning: sample(ramps.yellow, 0.5), warning: sample(ramps.yellow, 0.5),
info: sample(ramps.blue, 0.5), info: sample(ramps.blue, 0.5),
onMedia: darkest, onMedia: darkest,
}; }
const player = { const player = {
1: buildPlayer(sample(ramps.blue, 0.5)), 1: buildPlayer(sample(ramps.blue, 0.5)),
@ -158,7 +158,7 @@ export function createTheme(
6: buildPlayer(sample(ramps.cyan, 0.5)), 6: buildPlayer(sample(ramps.cyan, 0.5)),
7: buildPlayer(sample(ramps.red, 0.5)), 7: buildPlayer(sample(ramps.red, 0.5)),
8: buildPlayer(sample(ramps.yellow, 0.5)), 8: buildPlayer(sample(ramps.yellow, 0.5)),
}; }
const editor = { const editor = {
background: backgroundColor[500].base, background: backgroundColor[500].base,
@ -171,7 +171,10 @@ export function createTheme(
highlight: { highlight: {
selection: player[1].selectionColor, selection: player[1].selectionColor,
occurrence: withOpacity(sample(ramps.neutral, 3.5), blend), 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 matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
match: sample(ramps.violet, 0.15), 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 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, primary: textColor.placeholder,
active: textColor.active, active: textColor.active,
}, },
}; }
const syntax: Syntax = { const syntax: Syntax = {
primary: { primary: {
@ -270,7 +273,7 @@ export function createTheme(
weight: fontWeights.normal, weight: fontWeights.normal,
italic: true, italic: true,
}, },
}; }
const shadow = withOpacity( const shadow = withOpacity(
ramps ramps
@ -278,7 +281,7 @@ export function createTheme(
.darken() .darken()
.hex(), .hex(),
blend blend
); )
return { return {
name, name,
@ -292,5 +295,5 @@ export function createTheme(
player, player,
shadow, shadow,
ramps, 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 { export interface ColorScheme {
name: string; name: string
isLight: boolean; isLight: boolean
lowest: Layer; lowest: Layer
middle: Layer; middle: Layer
highest: Layer; highest: Layer
ramps: RampSet; ramps: RampSet
popoverShadow: Shadow; popoverShadow: Shadow
modalShadow: Shadow; modalShadow: Shadow
players: Players; players: Players
} }
export interface Meta { export interface Meta {
name: string, name: string
author: string, author: string
url: string, url: string
license: License license: License
} }
export interface License { export interface License {
SPDX: SPDXExpression, SPDX: SPDXExpression
/// A url where we can download the license's text /// A url where we can download the license's text
https_url: string, https_url: string
license_checksum: string license_checksum: string
} }
@ -36,65 +36,65 @@ export interface Licenses {
} }
// FIXME: Add support for the SPDX expression syntax // FIXME: Add support for the SPDX expression syntax
export type SPDXExpression = "MIT"; export type SPDXExpression = "MIT"
export interface Player { export interface Player {
cursor: string; cursor: string
selection: string; selection: string
} }
export interface Players { export interface Players {
"0": Player; "0": Player
"1": Player; "1": Player
"2": Player; "2": Player
"3": Player; "3": Player
"4": Player; "4": Player
"5": Player; "5": Player
"6": Player; "6": Player
"7": Player; "7": Player
} }
export interface Shadow { export interface Shadow {
blur: number; blur: number
color: string; color: string
offset: number[]; offset: number[]
} }
export type StyleSets = keyof Layer; export type StyleSets = keyof Layer
export interface Layer { export interface Layer {
base: StyleSet; base: StyleSet
variant: StyleSet; variant: StyleSet
on: StyleSet; on: StyleSet
accent: StyleSet; accent: StyleSet
positive: StyleSet; positive: StyleSet
warning: StyleSet; warning: StyleSet
negative: StyleSet; negative: StyleSet
} }
export interface RampSet { export interface RampSet {
neutral: Scale; neutral: Scale
red: Scale; red: Scale
orange: Scale; orange: Scale
yellow: Scale; yellow: Scale
green: Scale; green: Scale
cyan: Scale; cyan: Scale
blue: Scale; blue: Scale
violet: Scale; violet: Scale
magenta: Scale; magenta: Scale
} }
export type Styles = keyof StyleSet; export type Styles = keyof StyleSet
export interface StyleSet { export interface StyleSet {
default: Style; default: Style
active: Style; active: Style
disabled: Style; disabled: Style
hovered: Style; hovered: Style
pressed: Style; pressed: Style
inverted: Style; inverted: Style
} }
export interface Style { export interface Style {
background: string; background: string
border: string; border: string
foreground: 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 { import {
ColorScheme, ColorScheme,
Layer, Layer,
@ -7,12 +7,12 @@ import {
Style, Style,
Styles, Styles,
StyleSet, StyleSet,
} from "./colorScheme"; } from "./colorScheme"
export function colorRamp(color: Color): Scale { export function colorRamp(color: Color): Scale {
let endColor = color.desaturate(1).brighten(5); let endColor = color.desaturate(1).brighten(5)
let startColor = color.desaturate(1).darken(4); let startColor = color.desaturate(1).darken(4)
return chroma.scale([startColor, color, endColor]).mode("lab"); return chroma.scale([startColor, color, endColor]).mode("lab")
} }
export function createColorScheme( export function createColorScheme(
@ -21,7 +21,7 @@ export function createColorScheme(
colorRamps: { [rampName: string]: Scale } colorRamps: { [rampName: string]: Scale }
): ColorScheme { ): ColorScheme {
// Chromajs scales from 0 to 1 flipped if isLight is true // 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 // 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. // 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. // function to any in order to get the colors back out from the original ramps.
if (isLight) { if (isLight) {
for (var rampName in colorRamps) { for (var rampName in colorRamps) {
(ramps as any)[rampName] = chroma.scale( ;(ramps as any)[rampName] = chroma.scale(
colorRamps[rampName].colors(100).reverse() colorRamps[rampName].colors(100).reverse()
); )
} }
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()); ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
} else { } else {
for (var rampName in colorRamps) { 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 lowest = lowestLayer(ramps)
let middle = middleLayer(ramps); let middle = middleLayer(ramps)
let highest = highestLayer(ramps); let highest = highestLayer(ramps)
let popoverShadow = { let popoverShadow = {
blur: 4, blur: 4,
@ -55,7 +57,7 @@ export function createColorScheme(
.alpha(0.2) .alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else .hex(), // TODO used blend previously. Replace with something else
offset: [1, 2], offset: [1, 2],
}; }
let modalShadow = { let modalShadow = {
blur: 16, blur: 16,
@ -65,7 +67,7 @@ export function createColorScheme(
.alpha(0.2) .alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else .hex(), // TODO used blend previously. Replace with something else
offset: [0, 2], offset: [0, 2],
}; }
let players = { let players = {
"0": player(ramps.blue), "0": player(ramps.blue),
@ -76,7 +78,7 @@ export function createColorScheme(
"5": player(ramps.cyan), "5": player(ramps.cyan),
"6": player(ramps.red), "6": player(ramps.red),
"7": player(ramps.yellow), "7": player(ramps.yellow),
}; }
return { return {
name, name,
@ -92,14 +94,14 @@ export function createColorScheme(
modalShadow, modalShadow,
players, players,
}; }
} }
function player(ramp: Scale): Player { function player(ramp: Scale): Player {
return { return {
selection: ramp(0.5).alpha(0.24).hex(), selection: ramp(0.5).alpha(0.24).hex(),
cursor: ramp(0.5).hex(), cursor: ramp(0.5).hex(),
}; }
} }
function lowestLayer(ramps: RampSet): Layer { function lowestLayer(ramps: RampSet): Layer {
@ -111,7 +113,7 @@ function lowestLayer(ramps: RampSet): Layer {
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: buildStyleSet(ramps.red, 0.1, 0.5),
}; }
} }
function middleLayer(ramps: RampSet): Layer { function middleLayer(ramps: RampSet): Layer {
@ -123,7 +125,7 @@ function middleLayer(ramps: RampSet): Layer {
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: buildStyleSet(ramps.red, 0.1, 0.5),
}; }
} }
function highestLayer(ramps: RampSet): Layer { function highestLayer(ramps: RampSet): Layer {
@ -135,7 +137,7 @@ function highestLayer(ramps: RampSet): Layer {
positive: buildStyleSet(ramps.green, 0.1, 0.5), positive: buildStyleSet(ramps.green, 0.1, 0.5),
warning: buildStyleSet(ramps.yellow, 0.1, 0.5), warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
negative: buildStyleSet(ramps.red, 0.1, 0.5), negative: buildStyleSet(ramps.red, 0.1, 0.5),
}; }
} }
function buildStyleSet( function buildStyleSet(
@ -148,13 +150,13 @@ function buildStyleSet(
backgroundBase, backgroundBase,
foregroundBase, foregroundBase,
step step
); )
function colorString(indexOrColor: number | Color): string { function colorString(indexOrColor: number | Color): string {
if (typeof indexOrColor === "number") { if (typeof indexOrColor === "number") {
return ramp(indexOrColor).hex(); return ramp(indexOrColor).hex()
} else { } else {
return indexOrColor.hex(); return indexOrColor.hex()
} }
} }
@ -163,7 +165,7 @@ function buildStyleSet(
background: colorString(styleDefinitions.background[style]), background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]), border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]), foreground: colorString(styleDefinitions.foreground[style]),
}; }
} }
return { return {
@ -173,7 +175,7 @@ function buildStyleSet(
active: buildStyle("active"), active: buildStyle("active"),
disabled: buildStyle("disabled"), disabled: buildStyle("disabled"),
inverted: buildStyle("inverted"), inverted: buildStyle("inverted"),
}; }
} }
function buildStyleDefinition( function buildStyleDefinition(
@ -206,5 +208,5 @@ function buildStyleDefinition(
disabled: bgBase + step * 4, disabled: bgBase + step * 4,
inverted: bgBase + step * 2, inverted: bgBase + step * 2,
}, },
}; }
} }

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

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

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

@ -1,8 +1,8 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "One Dark"; const name = "One Dark"
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
neutral: chroma neutral: chroma
@ -26,15 +26,17 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#61afef")), blue: colorRamp(chroma("#61afef")),
violet: colorRamp(chroma("#c678dd")), violet: colorRamp(chroma("#c678dd")),
magenta: colorRamp(chroma("#be5046")), magenta: colorRamp(chroma("#be5046")),
}); })
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "simurai", author: "simurai",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md", https_url:
license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "One Light"; const name = "One Light"
export const light = createColorScheme(`${name}`, true, { export const light = createColorScheme(`${name}`, true, {
neutral: chroma.scale([ neutral: chroma
.scale([
"#090a0b", "#090a0b",
"#202227", "#202227",
"#383a42", "#383a42",
@ -25,15 +26,17 @@ export const light = createColorScheme(`${name}`, true, {
blue: colorRamp(chroma("#4078f2")), blue: colorRamp(chroma("#4078f2")),
violet: colorRamp(chroma("#a626a4")), violet: colorRamp(chroma("#a626a4")),
magenta: colorRamp(chroma("#986801")), magenta: colorRamp(chroma("#986801")),
}); })
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "simurai", author: "simurai",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md", https_url:
license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Rosé Pine Dawn"; const name = "Rosé Pine Dawn"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,17 +25,19 @@ const ramps = {
blue: colorRamp(chroma("#56949F")), blue: colorRamp(chroma("#56949F")),
violet: colorRamp(chroma("#907AA9")), violet: colorRamp(chroma("#907AA9")),
magenta: colorRamp(chroma("#79549F")), magenta: colorRamp(chroma("#79549F")),
}; }
export const light = createColorScheme(`${name}`, true, ramps); export const light = createColorScheme(`${name}`, true, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "edunfelt", author: "edunfelt",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE", https_url:
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Rosé Pine Moon"; const name = "Rosé Pine Moon"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,17 +25,19 @@ const ramps = {
blue: colorRamp(chroma("#9CCFD8")), blue: colorRamp(chroma("#9CCFD8")),
violet: colorRamp(chroma("#C4A7E7")), violet: colorRamp(chroma("#C4A7E7")),
magenta: colorRamp(chroma("#AB6FE9")), magenta: colorRamp(chroma("#AB6FE9")),
}; }
export const dark = createColorScheme(`${name}`, false, ramps); export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "edunfelt", author: "edunfelt",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE", https_url:
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Rosé Pine"; const name = "Rosé Pine"
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma.scale([
@ -23,17 +23,19 @@ const ramps = {
blue: colorRamp(chroma("#9CCFD8")), blue: colorRamp(chroma("#9CCFD8")),
violet: colorRamp(chroma("#C4A7E7")), violet: colorRamp(chroma("#C4A7E7")),
magenta: colorRamp(chroma("#AB6FE9")), magenta: colorRamp(chroma("#AB6FE9")),
}; }
export const dark = createColorScheme(`${name}`, false, ramps); export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "edunfelt", author: "edunfelt",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE", https_url:
license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a" "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 chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Sandcastle"; const name = "Sandcastle"
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma.scale([
@ -23,18 +23,19 @@ const ramps = {
blue: colorRamp(chroma("#528b8b")), blue: colorRamp(chroma("#528b8b")),
violet: colorRamp(chroma("#d75f5f")), violet: colorRamp(chroma("#d75f5f")),
magenta: colorRamp(chroma("#a87322")), magenta: colorRamp(chroma("#a87322")),
}; }
export const dark = createColorScheme(`${name}`, false, ramps); export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "gessig", author: "gessig",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE", https_url:
license_checksum: "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc" "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 chroma from "chroma-js"
import { Meta as Metadata } from "./common/colorScheme"; import { Meta as Metadata } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Solarized"; const name = "Solarized"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,19 +25,20 @@ const ramps = {
blue: colorRamp(chroma("#268bd2")), blue: colorRamp(chroma("#268bd2")),
violet: colorRamp(chroma("#6c71c4")), violet: colorRamp(chroma("#6c71c4")),
magenta: colorRamp(chroma("#d33682")), magenta: colorRamp(chroma("#d33682")),
}; }
export const dark = createColorScheme(`${name} Dark`, false, ramps); export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, ramps); export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Metadata = { export const meta: Metadata = {
name, name,
author: "Ethan Schoonover", author: "Ethan Schoonover",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE", https_url:
license_checksum: "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6" "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 chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Abruzzo"; const name = "Abruzzo"
const author = "slightknack <hey@isaac.sh>"; const author = "slightknack <hey@isaac.sh>"
const url = "https://github.com/slightknack"; const url = "https://github.com/slightknack"
const license = { const license = {
type: "", type: "",
url: "" url: "",
} }
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#BCD0F5")), blue: colorRamp(chroma("#BCD0F5")),
violet: colorRamp(chroma("#dac5eb")), violet: colorRamp(chroma("#dac5eb")),
magenta: colorRamp(chroma("#c1a3ef")), magenta: colorRamp(chroma("#c1a3ef")),
}); })

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

@ -1,13 +1,14 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Atelier Dune"; const name = "Atelier Dune"
const author = "atelierbram"; const author = "atelierbram"
const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/"; const url =
"https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE", url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
}; }
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma.scale([
@ -28,7 +29,7 @@ const ramps = {
blue: colorRamp(chroma("#6684e1")), blue: colorRamp(chroma("#6684e1")),
violet: colorRamp(chroma("#b854d4")), violet: colorRamp(chroma("#b854d4")),
magenta: colorRamp(chroma("#d43552")), magenta: colorRamp(chroma("#d43552")),
}; }
export const dark = createColorScheme(`${name} Dark`, false, ramps); export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, 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 chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Atelier Heath"; const name = "Atelier Heath"
const author = "atelierbram"; const author = "atelierbram"
const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/"; const url =
"https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE", url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Dark`, false, { export const dark = createColorScheme(`${name} Dark`, false, {
@ -29,7 +30,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#516aec")), blue: colorRamp(chroma("#516aec")),
violet: colorRamp(chroma("#7b59c0")), violet: colorRamp(chroma("#7b59c0")),
magenta: colorRamp(chroma("#cc33cc")), magenta: colorRamp(chroma("#cc33cc")),
}); })
export const light = createColorScheme(`${name} Light`, true, { export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -50,4 +51,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#257fad")), blue: colorRamp(chroma("#257fad")),
violet: colorRamp(chroma("#6b6bb8")), violet: colorRamp(chroma("#6b6bb8")),
magenta: colorRamp(chroma("#b72dd2")), magenta: colorRamp(chroma("#b72dd2")),
}); })

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

@ -1,13 +1,14 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Atelier Seaside"; const name = "Atelier Seaside"
const author = "atelierbram"; const author = "atelierbram"
const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/"; const url =
"https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE", url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
}; }
const ramps = { const ramps = {
neutral: chroma.scale([ neutral: chroma.scale([
@ -28,7 +29,7 @@ const ramps = {
blue: colorRamp(chroma("#3d62f5")), blue: colorRamp(chroma("#3d62f5")),
violet: colorRamp(chroma("#ad2bee")), violet: colorRamp(chroma("#ad2bee")),
magenta: colorRamp(chroma("#e619c3")), magenta: colorRamp(chroma("#e619c3")),
}; }
export const dark = createColorScheme(`${name} Dark`, false, ramps); export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, 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 chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"; const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"; const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"; const url = "https://github.com/ayu-theme/ayu-colors"
const license = { const license = {
type: "MIT", 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, { export const dark = createColorScheme(`${name} Mirage`, false, {
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name} Mirage`, false, {
blue: colorRamp(chroma("#5CCFE6")), blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")), violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")), magenta: colorRamp(chroma("#F29E74")),
}); })

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

@ -1,12 +1,12 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"; const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"; const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"; const url = "https://github.com/ayu-theme/ayu-colors"
const license = { const license = {
type: "MIT", 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, { export const dark = createColorScheme(`${name} Dark`, false, {
@ -28,7 +28,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#59C2FF")), blue: colorRamp(chroma("#59C2FF")),
violet: colorRamp(chroma("#D2A6FF")), violet: colorRamp(chroma("#D2A6FF")),
magenta: colorRamp(chroma("#E6B673")), magenta: colorRamp(chroma("#E6B673")),
}); })
export const light = createColorScheme(`${name} Light`, true, { export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -49,4 +49,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#36A3D9")), blue: colorRamp(chroma("#36A3D9")),
violet: colorRamp(chroma("#A37ACC")), violet: colorRamp(chroma("#A37ACC")),
magenta: colorRamp(chroma("#E6BA7E")), magenta: colorRamp(chroma("#E6BA7E")),
}); })

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

@ -1,12 +1,12 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Brush Trees"; const name = "Brush Trees"
const author = "Abraham White <abelincoln.white@gmail.com>"; const author = "Abraham White <abelincoln.white@gmail.com>"
const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme"; const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme"
const license = { const license = {
type: "MIT", 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, { export const dark = createColorScheme(`${name} Dark`, false, {
@ -28,7 +28,7 @@ export const dark = createColorScheme(`${name} Dark`, false, {
blue: colorRamp(chroma("#868cb3")), blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")), violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")), magenta: colorRamp(chroma("#b39f9f")),
}); })
export const mirage = createColorScheme(`${name} Mirage`, false, { export const mirage = createColorScheme(`${name} Mirage`, false, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -49,7 +49,7 @@ export const mirage = createColorScheme(`${name} Mirage`, false, {
blue: colorRamp(chroma("#5CCFE6")), blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")), violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")), magenta: colorRamp(chroma("#F29E74")),
}); })
export const light = createColorScheme(`${name} Light`, true, { export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -70,4 +70,4 @@ export const light = createColorScheme(`${name} Light`, true, {
blue: colorRamp(chroma("#868cb3")), blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")), violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")), magenta: colorRamp(chroma("#b39f9f")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Dracula"; const name = "Dracula"
const author = "zenorocha"; const author = "zenorocha"
const url = "https://github.com/dracula/dracula-theme"; const url = "https://github.com/dracula/dracula-theme"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE", url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
}; }
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -28,4 +28,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#6272a4")), blue: colorRamp(chroma("#6272a4")),
violet: colorRamp(chroma("#bd93f9")), violet: colorRamp(chroma("#bd93f9")),
magenta: colorRamp(chroma("#00f769")), magenta: colorRamp(chroma("#00f769")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Gruvbox"; const name = "Gruvbox"
const author = "Dawid Kurek (dawikur@gmail.com)"; const author = "Dawid Kurek (dawikur@gmail.com)"
const url = "https://github.com/morhetz/gruvbox"; const url = "https://github.com/morhetz/gruvbox"
const license = { const license = {
type: "MIT/X11", type: "MIT/X11",
url: "https://en.wikipedia.org/wiki/MIT_License", url: "https://en.wikipedia.org/wiki/MIT_License",
}; }
export const dark = createColorScheme(`${name} Dark Medium`, false, { export const dark = createColorScheme(`${name} Dark Medium`, false, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -111,7 +111,7 @@ export const dark = createColorScheme(`${name} Dark Medium`, false, {
"#D4CCC2", "#D4CCC2",
"#FFFFFF", "#FFFFFF",
]), ]),
}); })
export const light = createColorScheme(`${name} Light Medium`, true, { export const light = createColorScheme(`${name} Light Medium`, true, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -135,4 +135,4 @@ export const light = createColorScheme(`${name} Light Medium`, true, {
blue: colorRamp(chroma("#076678")), blue: colorRamp(chroma("#076678")),
violet: colorRamp(chroma("#8f3f71")), violet: colorRamp(chroma("#8f3f71")),
magenta: colorRamp(chroma("#d65d0e")), magenta: colorRamp(chroma("#d65d0e")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Monokai"; const name = "Monokai"
const author = "Wimer Hazenberg (http://www.monokai.nl)"; const author = "Wimer Hazenberg (http://www.monokai.nl)"
const url = "https://base16.netlify.app/previews/base16-monokai.html"; const url = "https://base16.netlify.app/previews/base16-monokai.html"
const license = { const license = {
type: "?", type: "?",
url: "?", url: "?",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#66d9ef")), blue: colorRamp(chroma("#66d9ef")),
violet: colorRamp(chroma("#ae81ff")), violet: colorRamp(chroma("#ae81ff")),
magenta: colorRamp(chroma("#cc6633")), magenta: colorRamp(chroma("#cc6633")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Nord"; const name = "Nord"
const author = "arcticicestudio"; const author = "arcticicestudio"
const url = "https://www.nordtheme.com/"; const url = "https://www.nordtheme.com/"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md", url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#EBCB8B")), blue: colorRamp(chroma("#EBCB8B")),
violet: colorRamp(chroma("#A3BE8C")), violet: colorRamp(chroma("#A3BE8C")),
magenta: colorRamp(chroma("#B48EAD")), magenta: colorRamp(chroma("#B48EAD")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Seti UI"; const name = "Seti UI"
const author = "jesseweed"; const author = "jesseweed"
const url = "https://github.com/jesseweed/seti-ui"; const url = "https://github.com/jesseweed/seti-ui"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md", url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#55b5db")), blue: colorRamp(chroma("#55b5db")),
violet: colorRamp(chroma("#a074c4")), violet: colorRamp(chroma("#a074c4")),
magenta: colorRamp(chroma("#8a553f")), 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 chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Tokyo Night Storm"; const name = "Tokyo Night Storm"
const author = "folke"; const author = "folke"
const url = "https://github.com/folke/tokyonight.nvim"; const url = "https://github.com/folke/tokyonight.nvim"
const license = { const license = {
type: "MIT", type: "MIT",
url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE", url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#2AC3DE")), blue: colorRamp(chroma("#2AC3DE")),
violet: colorRamp(chroma("#BB9AF7")), violet: colorRamp(chroma("#BB9AF7")),
magenta: colorRamp(chroma("#F7768E")), magenta: colorRamp(chroma("#F7768E")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Tokyo"; const name = "Tokyo"
const author = "folke"; const author = "folke"
const url = "https://github.com/folke/tokyonight.nvim"; const url = "https://github.com/folke/tokyonight.nvim"
const license = { const license = {
type: "Apache License 2.0", type: "Apache License 2.0",
url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE", url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Night`, false, { export const dark = createColorScheme(`${name} Night`, false, {
@ -29,7 +29,7 @@ export const dark = createColorScheme(`${name} Night`, false, {
blue: colorRamp(chroma("#2AC3DE")), blue: colorRamp(chroma("#2AC3DE")),
violet: colorRamp(chroma("#BB9AF7")), violet: colorRamp(chroma("#BB9AF7")),
magenta: colorRamp(chroma("#F7768E")), magenta: colorRamp(chroma("#F7768E")),
}); })
export const light = createColorScheme(`${name} Day`, true, { export const light = createColorScheme(`${name} Day`, true, {
neutral: chroma.scale([ neutral: chroma.scale([
@ -50,4 +50,4 @@ export const light = createColorScheme(`${name} Day`, true, {
blue: colorRamp(chroma("#34548A")), blue: colorRamp(chroma("#34548A")),
violet: colorRamp(chroma("#5A4A78")), violet: colorRamp(chroma("#5A4A78")),
magenta: colorRamp(chroma("#8C4351")), magenta: colorRamp(chroma("#8C4351")),
}); })

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

@ -1,13 +1,13 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Zed Pro"; const name = "Zed Pro"
const author = "Nate Butler" const author = "Nate Butler"
const url = "https://github.com/iamnbutler" const url = "https://github.com/iamnbutler"
const license = { const license = {
type: "?", type: "?",
url: "?", url: "?",
}; }
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -30,7 +30,7 @@ const ramps = {
blue: colorRamp(chroma("#2F6DB7")), blue: colorRamp(chroma("#2F6DB7")),
violet: colorRamp(chroma("#5874C1")), violet: colorRamp(chroma("#5874C1")),
magenta: colorRamp(chroma("#DE9AB8")), magenta: colorRamp(chroma("#DE9AB8")),
}; }
export const dark = createColorScheme(`${name} Dark`, false, ramps); export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, 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 chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"; import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Zenburn"; const name = "Zenburn"
const author = "elnawe"; const author = "elnawe"
const url = "https://github.com/elnawe/base16-zenburn-scheme"; const url = "https://github.com/elnawe/base16-zenburn-scheme"
const license = { const license = {
type: "None", type: "None",
url: "", url: "",
}; }
// `name-[light|dark]`, isLight, color ramps // `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, { export const dark = createColorScheme(`${name}`, false, {
@ -29,4 +29,4 @@ export const dark = createColorScheme(`${name}`, false, {
blue: colorRamp(chroma("#7cb8bb")), blue: colorRamp(chroma("#7cb8bb")),
violet: colorRamp(chroma("#dc8cc3")), violet: colorRamp(chroma("#dc8cc3")),
magenta: colorRamp(chroma("#000000")), magenta: colorRamp(chroma("#000000")),
}); })

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

@ -1,8 +1,8 @@
import chroma from "chroma-js"; import chroma from "chroma-js"
import { Meta } from "./common/colorScheme"; import { Meta } from "./common/colorScheme"
import { colorRamp, createColorScheme } from "./common/ramps"; import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Summercamp"; const name = "Summercamp"
const ramps = { const ramps = {
neutral: chroma neutral: chroma
@ -25,16 +25,18 @@ const ramps = {
blue: colorRamp(chroma("#489bf0")), blue: colorRamp(chroma("#489bf0")),
violet: colorRamp(chroma("#FF8080")), violet: colorRamp(chroma("#FF8080")),
magenta: colorRamp(chroma("#F69BE7")), magenta: colorRamp(chroma("#F69BE7")),
}; }
export const dark = createColorScheme(`${name}`, false, ramps); export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = { export const meta: Meta = {
name, name,
author: "zoefiri", author: "zoefiri",
url: "https://github.com/zoefiri/base16-sc", url: "https://github.com/zoefiri/base16-sc",
license: { license: {
SPDX: "MIT", SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE", https_url:
license_checksum: "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf" "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 { 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 // 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}` ? S extends `${infer T}${infer U}`
? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
: S : S
: S; : S
type SnakeCased<Type> = { 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> { export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
const snakeObject: any = {}; const snakeObject: any = {}
for (const key in object) { for (const key in object) {
snakeObject[snakeCase(key, { keepSpecialCharacters: true })] = snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
snakeCaseValue(object[key]); snakeCaseValue(object[key])
} }
return snakeObject; return snakeObject
} }
function snakeCaseValue(value: any): any { function snakeCaseValue(value: any): any {
if (typeof value === "object") { if (typeof value === "object") {
if (Array.isArray(value)) { if (Array.isArray(value)) {
return value.map(snakeCaseValue); return value.map(snakeCaseValue)
} else { } else {
return snakeCaseTree(value); return snakeCaseTree(value)
} }
} else { } else {
return value; return value
} }
} }