zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-18 18:08:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
styles/src/buildLicenses.ts
View File

@ -1,73 +1,87 @@
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")
} }
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(
schemeMeta: Meta[],
callback: (meta: Meta, license_text: string) => void
) {
for (let meta of schemeMeta) {
// The following copied from the example code on nodejs.org:
// https://nodejs.org/api/http.html#httpgetoptions-callback
https
.get(meta.license.https_url, (res) => {
const { statusCode } = res
function getLicenseText(schemeMeta: Meta[], callback: (meta: Meta, license_text: string) => void) { if (statusCode < 200 || statusCode >= 300) {
for (let meta of schemeMeta) { throw new Error(
// The following copied from the example code on nodejs.org: `Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`
// https://nodejs.org/api/http.html#httpgetoptions-callback )
https.get(meta.license.https_url, (res) => { }
const { statusCode } = res;
if (statusCode < 200 || statusCode >= 300) { res.setEncoding("utf8")
throw new Error(`Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`); let rawData = ""
} res.on("data", (chunk) => {
rawData += chunk
res.setEncoding('utf8'); })
let rawData = ''; res.on("end", () => {
res.on('data', (chunk) => { rawData += chunk; }); const hash = crypto
res.on('end', () => { .createHash("sha256")
const hash = crypto.createHash('sha256').update(rawData).digest('hex'); .update(rawData)
if (meta.license.license_checksum == hash) { .digest("hex")
callback(meta, rawData) if (meta.license.license_checksum == hash) {
} else { callback(meta, rawData)
throw Error(`Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`) } else {
} throw Error(
}); `Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`
}).on('error', (e) => { )
throw e }
}); })
} })
.on("error", (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)
}); })

72
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)

74
styles/src/colorSchemes.ts
View File

@ -1,54 +1,54 @@
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(
for (const fileName of fs.readdirSync(themesPath)) { themesPath: string,
if (fileName == "template.ts") continue; callback: (module: any, path: string) => void
const filePath = path.join(themesPath, fileName); ) {
for (const fileName of fs.readdirSync(themesPath)) {
if (fileName == "template.ts") continue
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) => {
if (colorScheme.meta) { if (colorScheme.meta) {
meta.push(colorScheme.meta) meta.push(colorScheme.meta)
} else { } else {
throw Error(`Public theme ${path} must have a meta field`) throw Error(`Public theme ${path} must have a meta field`)
} }
}) })
} }
fillMeta(themes_directory, schemeMeta); fillMeta(themes_directory, schemeMeta)

74
styles/src/common.ts
View File

@ -1,45 +1,45 @@
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,
"2xs": 10, "2xs": 10,
xs: 12, xs: 12,
sm: 14, sm: 14,
md: 16, md: 16,
lg: 18, lg: 18,
xl: 20, xl: 20,
}; }
export type FontWeight = export type FontWeight =
| "thin" | "thin"
| "extra_light" | "extra_light"
| "light" | "light"
| "normal" | "normal"
| "medium" | "medium"
| "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",
light: "light", light: "light",
normal: "normal", normal: "normal",
medium: "medium", medium: "medium",
semibold: "semibold", semibold: "semibold",
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,
xs: 2, xs: 2,
sm: 4, sm: 4,
md: 6, md: 6,
lg: 8, lg: 8,
xl: 12, xl: 12,
}; }

138
styles/src/styleTree/app.ts
View File

@ -1,72 +1,72 @@
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 {
meta: { meta: {
name: colorScheme.name, name: colorScheme.name,
isLight: colorScheme.isLight, isLight: colorScheme.isLight,
}, },
commandPalette: commandPalette(colorScheme), commandPalette: commandPalette(colorScheme),
contactNotification: contactNotification(colorScheme), contactNotification: contactNotification(colorScheme),
projectSharedNotification: projectSharedNotification(colorScheme), projectSharedNotification: projectSharedNotification(colorScheme),
incomingCallNotification: incomingCallNotification(colorScheme), incomingCallNotification: incomingCallNotification(colorScheme),
picker: picker(colorScheme), picker: picker(colorScheme),
workspace: workspace(colorScheme), workspace: workspace(colorScheme),
contextMenu: contextMenu(colorScheme), contextMenu: contextMenu(colorScheme),
editor: editor(colorScheme), editor: editor(colorScheme),
projectDiagnostics: projectDiagnostics(colorScheme), projectDiagnostics: projectDiagnostics(colorScheme),
projectPanel: projectPanel(colorScheme), projectPanel: projectPanel(colorScheme),
contactsPopover: contactsPopover(colorScheme), contactsPopover: contactsPopover(colorScheme),
contactFinder: contactFinder(colorScheme), contactFinder: contactFinder(colorScheme),
contactList: contactList(colorScheme), contactList: contactList(colorScheme),
search: search(colorScheme), search: search(colorScheme),
sharedScreen: sharedScreen(colorScheme), sharedScreen: sharedScreen(colorScheme),
breadcrumbs: { breadcrumbs: {
...text(colorScheme.highest, "sans", "variant"), ...text(colorScheme.highest, "sans", "variant"),
padding: { padding: {
left: 6, left: 6,
}, },
}, },
updateNotification: updateNotification(colorScheme), updateNotification: updateNotification(colorScheme),
simpleMessageNotification: simpleMessageNotification(colorScheme), simpleMessageNotification: simpleMessageNotification(colorScheme),
tooltip: tooltip(colorScheme), tooltip: tooltip(colorScheme),
terminal: terminal(colorScheme), terminal: terminal(colorScheme),
feedback: feedback(colorScheme), feedback: feedback(colorScheme),
colorScheme: { colorScheme: {
...colorScheme, ...colorScheme,
players: Object.values(colorScheme.players), players: Object.values(colorScheme.players),
ramps: { ramps: {
neutral: colorScheme.ramps.neutral.colors(100, "hex"), neutral: colorScheme.ramps.neutral.colors(100, "hex"),
red: colorScheme.ramps.red.colors(100, "hex"), red: colorScheme.ramps.red.colors(100, "hex"),
orange: colorScheme.ramps.orange.colors(100, "hex"), orange: colorScheme.ramps.orange.colors(100, "hex"),
yellow: colorScheme.ramps.yellow.colors(100, "hex"), yellow: colorScheme.ramps.yellow.colors(100, "hex"),
green: colorScheme.ramps.green.colors(100, "hex"), green: colorScheme.ramps.green.colors(100, "hex"),
cyan: colorScheme.ramps.cyan.colors(100, "hex"), cyan: colorScheme.ramps.cyan.colors(100, "hex"),
blue: colorScheme.ramps.blue.colors(100, "hex"), blue: colorScheme.ramps.blue.colors(100, "hex"),
violet: colorScheme.ramps.violet.colors(100, "hex"), violet: colorScheme.ramps.violet.colors(100, "hex"),
magenta: colorScheme.ramps.magenta.colors(100, "hex"), magenta: colorScheme.ramps.magenta.colors(100, "hex"),
}, },
}, },
}; }
} }

54
styles/src/styleTree/commandPalette.ts
View File

@ -1,30 +1,30 @@
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: {
text: text(layer, "mono", "variant", "default", { size: "xs" }), text: text(layer, "mono", "variant", "default", { size: "xs" }),
cornerRadius: 2, cornerRadius: 2,
background: background(layer, "on"), background: background(layer, "on"),
padding: { padding: {
top: 1, top: 1,
bottom: 1, bottom: 1,
left: 6, left: 6,
right: 6, right: 6,
}, },
margin: { margin: {
top: 1, top: 1,
bottom: 1, bottom: 1,
left: 2, left: 2,
}, },
active: { active: {
text: text(layer, "mono", "on", "default", { size: "xs" }), text: text(layer, "mono", "on", "default", { size: "xs" }),
background: withOpacity(background(layer, "on"), 0.2), background: withOpacity(background(layer, "on"), 0.2),
}, },
}, },
}; }
} }

304
styles/src/styleTree/components.ts
View File

@ -1,210 +1,210 @@
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 [
"base", "base",
"variant", "variant",
"on", "on",
"accent", "accent",
"positive", "positive",
"warning", "warning",
"negative", "negative",
].includes(key); ].includes(key)
} }
function isStyle(key: any): key is Styles { function isStyle(key: any): key is Styles {
return [ return [
"default", "default",
"active", "active",
"disabled", "disabled",
"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(
layer: Layer, layer: Layer,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
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,
styleSetStyleOrProperties?: StyleSets | Styles | TextProperties, styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
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(
layer: Layer, layer: Layer,
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,
}; }
} }

128
styles/src/styleTree/contactFinder.ts
View File

@ -1,70 +1,70 @@
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 pickerInput = {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono",),
placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
selection: colorScheme.players[0],
border: border(layer),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: sideMargin,
right: sideMargin,
} }
};
return { const pickerStyle = picker(colorScheme)
picker: { const pickerInput = {
emptyContainer: {}, background: background(layer, "on"),
item: { cornerRadius: 6,
...pickerStyle.item, text: text(layer, "mono"),
margin: { left: sideMargin, right: sideMargin }, placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
}, selection: colorScheme.players[0],
noMatches: pickerStyle.noMatches, border: border(layer),
inputEditor: pickerInput, padding: {
emptyInputEditor: pickerInput bottom: 4,
}, left: 8,
rowHeight: 28, right: 8,
contactAvatar: { top: 4,
cornerRadius: 10, },
width: 18, margin: {
}, left: sideMargin,
contactUsername: { right: sideMargin,
padding: { },
left: 8, }
},
}, return {
contactButton: { picker: {
...contactButton, emptyContainer: {},
hover: { item: {
background: background(layer, "variant", "hovered"), ...pickerStyle.item,
}, margin: { left: sideMargin, right: sideMargin },
}, },
disabledContactButton: { noMatches: pickerStyle.noMatches,
...contactButton, inputEditor: pickerInput,
background: background(layer, "disabled"), emptyInputEditor: pickerInput,
color: foreground(layer, "disabled"), },
}, rowHeight: 28,
}; contactAvatar: {
cornerRadius: 10,
width: 18,
},
contactUsername: {
padding: {
left: 8,
},
},
contactButton: {
...contactButton,
hover: {
background: background(layer, "variant", "hovered"),
},
},
disabledContactButton: {
...contactButton,
background: background(layer, "disabled"),
color: foreground(layer, "disabled"),
},
}
} }

356
styles/src/styleTree/contactList.ts
View File

@ -1,186 +1,182 @@
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"),
color: foreground(layer, "on"), color: foreground(layer, "on"),
iconWidth: 8, iconWidth: 8,
buttonWidth: 16, buttonWidth: 16,
cornerRadius: 8, cornerRadius: 8,
}; }
const projectRow = { const projectRow = {
guestAvatarSpacing: 4, guestAvatarSpacing: 4,
height: 24, height: 24,
guestAvatar: { guestAvatar: {
cornerRadius: 8, cornerRadius: 8,
width: 14, width: 14,
}, },
name: { name: {
...text(layer, "mono", { size: "sm" }), ...text(layer, "mono", { size: "sm" }),
margin: { margin: {
left: nameMargin, left: nameMargin,
right: 6, right: 6,
}, },
}, },
guests: { guests: {
margin: { margin: {
left: nameMargin, left: nameMargin,
right: nameMargin, right: nameMargin,
}, },
}, },
padding: { padding: {
left: sidePadding, left: sidePadding,
right: sidePadding, right: sidePadding,
}, },
}; }
return { return {
background: background(layer), background: background(layer),
padding: { top: 12, bottom: 0 }, padding: { top: 12, bottom: 0 },
userQueryEditor: { userQueryEditor: {
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", {
selection: colorScheme.players[0], size: "xs",
border: border(layer, "on"), }),
padding: { selection: colorScheme.players[0],
bottom: 4, border: border(layer, "on"),
left: 8, padding: {
right: 8, bottom: 4,
top: 4, left: 8,
}, right: 8,
margin: { top: 4,
left: 6, },
}, margin: {
}, left: 6,
userQueryEditorHeight: 33, },
addContactButton: { },
margin: { left: 6, right: 12 }, userQueryEditorHeight: 33,
color: foreground(layer, "on"), addContactButton: {
buttonWidth: 28, margin: { left: 6, right: 12 },
iconWidth: 16, color: foreground(layer, "on"),
}, buttonWidth: 28,
rowHeight: 28, iconWidth: 16,
sectionIconSize: 8, },
headerRow: { rowHeight: 28,
...text(layer, "mono", { size: "sm" }), sectionIconSize: 8,
margin: { top: 14 }, headerRow: {
padding: { ...text(layer, "mono", { size: "sm" }),
left: sidePadding, margin: { top: 14 },
right: sidePadding, padding: {
}, left: sidePadding,
active: { right: sidePadding,
...text(layer, "mono", "active", { size: "sm" }), },
background: background(layer, "active"), active: {
}, ...text(layer, "mono", "active", { size: "sm" }),
}, background: background(layer, "active"),
leaveCall: { },
background: background(layer), },
border: border(layer), leaveCall: {
cornerRadius: 6, background: background(layer),
margin: { border: border(layer),
top: 1, cornerRadius: 6,
}, margin: {
padding: { top: 1,
top: 1, },
bottom: 1, padding: {
left: 7, top: 1,
right: 7, bottom: 1,
}, left: 7,
...text(layer, "sans", "variant", { size: "xs" }), right: 7,
hover: { },
...text(layer, "sans", "hovered", { size: "xs" }), ...text(layer, "sans", "variant", { size: "xs" }),
background: background(layer, "hovered"), hover: {
border: border(layer, "hovered"), ...text(layer, "sans", "hovered", { size: "xs" }),
}, background: background(layer, "hovered"),
}, border: border(layer, "hovered"),
contactRow: { },
padding: { },
left: sidePadding, contactRow: {
right: sidePadding, padding: {
}, left: sidePadding,
active: { right: sidePadding,
background: background(layer, "active"), },
}, active: {
}, background: background(layer, "active"),
contactAvatar: { },
cornerRadius: 10, },
width: 18, contactAvatar: {
}, cornerRadius: 10,
contactStatusFree: { width: 18,
cornerRadius: 4, },
padding: 4, contactStatusFree: {
margin: { top: 12, left: 12 }, cornerRadius: 4,
background: foreground(layer, "positive"), padding: 4,
}, margin: { top: 12, left: 12 },
contactStatusBusy: { background: foreground(layer, "positive"),
cornerRadius: 4, },
padding: 4, contactStatusBusy: {
margin: { top: 12, left: 12 }, cornerRadius: 4,
background: foreground(layer, "negative"), padding: 4,
}, margin: { top: 12, left: 12 },
contactUsername: { background: foreground(layer, "negative"),
...text(layer, "mono", { size: "sm" }), },
margin: { contactUsername: {
left: nameMargin, ...text(layer, "mono", { size: "sm" }),
}, margin: {
}, left: nameMargin,
contactButtonSpacing: nameMargin, },
contactButton: { },
...contactButton, contactButtonSpacing: nameMargin,
hover: { contactButton: {
background: background(layer, "hovered"), ...contactButton,
}, hover: {
}, background: background(layer, "hovered"),
disabledButton: { },
...contactButton, },
background: background(layer, "on"), disabledButton: {
color: foreground(layer, "on"), ...contactButton,
}, background: background(layer, "on"),
callingIndicator: { color: foreground(layer, "on"),
...text(layer, "mono", "variant", { size: "xs" }), },
}, callingIndicator: {
treeBranch: { ...text(layer, "mono", "variant", { size: "xs" }),
color: borderColor(layer), },
width: 1, treeBranch: {
hover: { color: borderColor(layer),
color: borderColor(layer), width: 1,
}, hover: {
active: { color: borderColor(layer),
color: borderColor(layer), },
}, active: {
}, color: borderColor(layer),
projectRow: { },
...projectRow, },
background: background(layer), projectRow: {
icon: { ...projectRow,
margin: { left: nameMargin }, background: background(layer),
color: foreground(layer, "variant"), icon: {
width: 12, margin: { left: nameMargin },
}, color: foreground(layer, "variant"),
name: { width: 12,
...projectRow.name, },
...text(layer, "mono", { size: "sm" }), name: {
}, ...projectRow.name,
hover: { ...text(layer, "mono", { size: "sm" }),
background: background(layer, "hovered"), },
}, hover: {
active: { background: background(layer, "hovered"),
background: background(layer, "active"), },
}, active: {
}, background: background(layer, "active"),
}; },
},
}
} }

82
styles/src/styleTree/contactNotification.ts
View File

@ -1,45 +1,45 @@
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,
width: avatarSize, width: avatarSize,
cornerRadius: 6, cornerRadius: 6,
}, },
headerMessage: { headerMessage: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: headerPadding, right: headerPadding },
}, },
headerHeight: 18, headerHeight: 18,
bodyMessage: { bodyMessage: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 }, margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
}, },
button: { button: {
...text(layer, "sans", "on", { size: "xs" }), ...text(layer, "sans", "on", { size: "xs" }),
background: background(layer, "on"), background: background(layer, "on"),
padding: 4, padding: 4,
cornerRadius: 6, cornerRadius: 6,
margin: { left: 6 }, margin: { left: 6 },
hover: { hover: {
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
}, },
}, },
dismissButton: { dismissButton: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 8, iconWidth: 8,
iconHeight: 8, iconHeight: 8,
buttonWidth: 8, buttonWidth: 8,
buttonHeight: 8, buttonHeight: 8,
hover: { hover: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

52
styles/src/styleTree/contactsPopover.ts
View File

@ -1,29 +1,29 @@
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,
padding: { top: 6 }, padding: { top: 6 },
margin: { top: -6 }, margin: { top: -6 },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
border: border(layer), border: border(layer),
width: 300, width: 300,
height: 400, height: 400,
inviteRowHeight: 28, inviteRowHeight: 28,
inviteRow: { inviteRow: {
padding: { padding: {
left: sidePadding, left: sidePadding,
right: sidePadding, right: sidePadding,
}, },
border: border(layer, { top: true }), border: border(layer, { top: true }),
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
hover: { hover: {
text: text(layer, "sans", "hovered", { size: "sm" }), text: text(layer, "sans", "hovered", { size: "sm" }),
}, },
}, },
} }
} }

79
styles/src/styleTree/contextMenu.ts
View File

@ -1,41 +1,44 @@
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,
padding: 4, padding: 4,
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
border: border(layer), border: border(layer),
keystrokeMargin: 30, keystrokeMargin: 30,
item: { item: {
iconSpacing: 8, iconSpacing: 8,
iconWidth: 14, iconWidth: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 }, padding: { left: 6, right: 6, top: 2, bottom: 2 },
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", {
padding: { left: 3, right: 3 }, size: "sm",
}, weight: "bold",
hover: { }),
background: background(layer, "hovered"), padding: { left: 3, right: 3 },
label: text(layer, "sans", "hovered", { size: "sm" }), },
}, hover: {
active: { background: background(layer, "hovered"),
background: background(layer, "active"), label: text(layer, "sans", "hovered", { size: "sm" }),
label: text(layer, "sans", "active", { size: "sm" }), },
}, active: {
activeHover: { background: background(layer, "active"),
background: background(layer, "active"), label: text(layer, "sans", "active", { size: "sm" }),
label: text(layer, "sans", "active", { size: "sm" }), },
}, activeHover: {
}, background: background(layer, "active"),
separator: { label: text(layer, "sans", "active", { size: "sm" }),
background: borderColor(layer), },
margin: { top: 2, bottom: 2 }, },
}, separator: {
}; background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
}
} }

557
styles/src/styleTree/editor.ts
View File

@ -1,285 +1,290 @@
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,
padding: { padding: {
bottom: 2, bottom: 2,
left: 6, left: 6,
right: 6, right: 6,
top: 2, top: 2,
}, },
}; }
function diagnostic(layer: Layer, styleSet: StyleSets) {
return {
textScaleFactor: 0.857,
header: {
border: border(layer, {
top: true,
}),
},
message: {
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
highlightText: text(layer, "sans", styleSet, "default", {
size: "sm",
weight: "bold",
}),
},
}
}
const syntax = {
primary: {
color: colorScheme.ramps.neutral(1).hex(),
weight: fontWeights.normal,
},
"variable.special": {
// Highlights for self, this, etc
color: colorScheme.ramps.blue(0.7).hex(),
weight: fontWeights.normal,
},
comment: {
color: colorScheme.ramps.neutral(0.71).hex(),
weight: fontWeights.normal,
},
punctuation: {
color: colorScheme.ramps.neutral(0.86).hex(),
weight: fontWeights.normal,
},
constant: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
keyword: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
function: {
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.normal,
},
type: {
color: colorScheme.ramps.cyan(0.5).hex(),
weight: fontWeights.normal,
},
constructor: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
variant: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
property: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
enum: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
operator: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
string: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
number: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
boolean: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
predictive: {
color: colorScheme.ramps.neutral(0.57).hex(),
weight: fontWeights.normal,
},
title: {
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.bold,
},
emphasis: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
"emphasis.strong": {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.bold,
},
linkUri: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
italic: true,
},
}
function diagnostic(layer: Layer, styleSet: StyleSets) {
return { return {
textScaleFactor: 0.857, textColor: syntax.primary.color,
header: { background: background(layer),
border: border(layer, { activeLineBackground: withOpacity(background(layer, "on"), 0.75),
top: true, highlightedLineBackground: background(layer, "on"),
}), codeActions: {
}, indicator: foreground(layer, "variant"),
message: { verticalScale: 0.55,
text: text(layer, "sans", styleSet, "default", { size: "sm" }),
highlightText: text(layer, "sans", styleSet, "default", {
size: "sm",
weight: "bold",
}),
},
};
}
const syntax = {
primary: {
color: colorScheme.ramps.neutral(1).hex(),
weight: fontWeights.normal,
},
"variable.special": {
// Highlights for self, this, etc
color: colorScheme.ramps.blue(0.7).hex(),
weight: fontWeights.normal,
},
comment: {
color: colorScheme.ramps.neutral(0.71).hex(),
weight: fontWeights.normal,
},
punctuation: {
color: colorScheme.ramps.neutral(0.86).hex(),
weight: fontWeights.normal,
},
constant: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
keyword: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
function: {
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.normal,
},
type: {
color: colorScheme.ramps.cyan(0.5).hex(),
weight: fontWeights.normal,
},
constructor: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
variant: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
property: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
enum: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
operator: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
string: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
},
number: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
boolean: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
},
predictive: {
color: colorScheme.ramps.neutral(0.57).hex(),
weight: fontWeights.normal,
},
title: {
color: colorScheme.ramps.yellow(0.5).hex(),
weight: fontWeights.bold,
},
emphasis: {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.normal,
},
"emphasis.strong": {
color: colorScheme.ramps.blue(0.5).hex(),
weight: fontWeights.bold,
},
linkUri: {
color: colorScheme.ramps.green(0.5).hex(),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: colorScheme.ramps.orange(0.5).hex(),
weight: fontWeights.normal,
italic: true,
},
};
return {
textColor: syntax.primary.color,
background: background(layer),
activeLineBackground: withOpacity(background(layer, "on"), 0.75),
highlightedLineBackground: background(layer, "on"),
codeActions: {
indicator: foreground(layer, "variant"),
verticalScale: 0.55,
},
diff: {
deleted: foreground(layer, "negative"),
modified: foreground(layer, "warning"),
inserted: foreground(layer, "positive"),
removedWidthEm: 0.275,
widthEm: 0.16,
cornerRadius: 0.05,
},
/** Highlights matching occurences of what is under the cursor
* as well as matched brackets
*/
documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1),
documentHighlightWriteBackground: colorScheme.ramps
.neutral(0.5)
.alpha(0.4)
.hex(), // TODO: This was blend * 2
errorColor: background(layer, "negative"),
gutterBackground: background(layer),
gutterPaddingFactor: 3.5,
lineNumber: withOpacity(foreground(layer), 0.35),
lineNumberActive: foreground(layer),
renameFade: 0.6,
unnecessaryCodeFade: 0.5,
selection: colorScheme.players[0],
guestSelections: [
colorScheme.players[1],
colorScheme.players[2],
colorScheme.players[3],
colorScheme.players[4],
colorScheme.players[5],
colorScheme.players[6],
colorScheme.players[7],
],
autocomplete: {
background: background(colorScheme.middle),
cornerRadius: 8,
padding: 4,
margin: {
left: -14,
},
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
matchHighlight: foreground(colorScheme.middle, "accent"),
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
background: background(colorScheme.middle, "hovered"),
},
selectedItem: {
...autocompleteItem,
matchHighlight: foreground(colorScheme.middle, "accent", "active"),
background: background(colorScheme.middle, "active"),
},
},
diagnosticHeader: {
background: background(colorScheme.middle),
iconWidthFactor: 1.5,
textScaleFactor: 0.857,
border: border(colorScheme.middle, {
bottom: true,
top: true,
}),
code: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 10,
}, },
}, diff: {
message: { deleted: foreground(layer, "negative"),
highlightText: text(colorScheme.middle, "sans", { modified: foreground(layer, "warning"),
size: "sm", inserted: foreground(layer, "positive"),
weight: "bold", removedWidthEm: 0.275,
}), widthEm: 0.16,
text: text(colorScheme.middle, "sans", { size: "sm" }), cornerRadius: 0.05,
},
},
diagnosticPathHeader: {
background: background(colorScheme.middle),
textScaleFactor: 0.857,
filename: text(colorScheme.middle, "mono", { size: "sm" }),
path: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 12,
}, },
}, /** Highlights matching occurences of what is under the cursor
}, * as well as matched brackets
errorDiagnostic: diagnostic(colorScheme.middle, "negative"), */
warningDiagnostic: diagnostic(colorScheme.middle, "warning"), documentHighlightReadBackground: withOpacity(
informationDiagnostic: diagnostic(colorScheme.middle, "accent"), foreground(layer, "accent"),
hintDiagnostic: diagnostic(colorScheme.middle, "warning"), 0.1
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), ),
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), documentHighlightWriteBackground: colorScheme.ramps
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), .neutral(0.5)
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), .alpha(0.4)
hoverPopover: hoverPopover(colorScheme), .hex(), // TODO: This was blend * 2
linkDefinition: { errorColor: background(layer, "negative"),
color: syntax.linkUri.color, gutterBackground: background(layer),
underline: syntax.linkUri.underline, gutterPaddingFactor: 3.5,
}, lineNumber: withOpacity(foreground(layer), 0.35),
jumpIcon: { lineNumberActive: foreground(layer),
color: foreground(layer, "on"), renameFade: 0.6,
iconWidth: 20, unnecessaryCodeFade: 0.5,
buttonWidth: 20, selection: colorScheme.players[0],
cornerRadius: 6, guestSelections: [
padding: { colorScheme.players[1],
top: 6, colorScheme.players[2],
bottom: 6, colorScheme.players[3],
left: 6, colorScheme.players[4],
right: 6, colorScheme.players[5],
}, colorScheme.players[6],
hover: { colorScheme.players[7],
background: background(layer, "on", "hovered"), ],
}, autocomplete: {
}, background: background(colorScheme.middle),
scrollbar: { cornerRadius: 8,
width: 12, padding: 4,
minHeightFactor: 1.0, margin: {
track: { left: -14,
border: border(layer, "variant", { left: true }), },
}, border: border(colorScheme.middle),
thumb: { shadow: colorScheme.popoverShadow,
background: withOpacity(background(layer, "inverted"), 0.4), matchHighlight: foreground(colorScheme.middle, "accent"),
border: { item: autocompleteItem,
width: 1, hoveredItem: {
color: borderColor(layer, "variant"), ...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"hovered"
),
background: background(colorScheme.middle, "hovered"),
},
selectedItem: {
...autocompleteItem,
matchHighlight: foreground(
colorScheme.middle,
"accent",
"active"
),
background: background(colorScheme.middle, "active"),
},
}, },
}, diagnosticHeader: {
}, background: background(colorScheme.middle),
compositionMark: { iconWidthFactor: 1.5,
underline: { textScaleFactor: 0.857,
thickness: 1.0, border: border(colorScheme.middle, {
color: borderColor(layer), bottom: true,
}, top: true,
}, }),
syntax, code: {
}; ...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 10,
},
},
message: {
highlightText: text(colorScheme.middle, "sans", {
size: "sm",
weight: "bold",
}),
text: text(colorScheme.middle, "sans", { size: "sm" }),
},
},
diagnosticPathHeader: {
background: background(colorScheme.middle),
textScaleFactor: 0.857,
filename: text(colorScheme.middle, "mono", { size: "sm" }),
path: {
...text(colorScheme.middle, "mono", { size: "sm" }),
margin: {
left: 12,
},
},
},
errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
hoverPopover: hoverPopover(colorScheme),
linkDefinition: {
color: syntax.linkUri.color,
underline: syntax.linkUri.underline,
},
jumpIcon: {
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
padding: {
top: 6,
bottom: 6,
left: 6,
right: 6,
},
hover: {
background: background(layer, "on", "hovered"),
},
},
scrollbar: {
width: 12,
minHeightFactor: 1.0,
track: {
border: border(layer, "variant", { left: true }),
},
thumb: {
background: withOpacity(background(layer, "inverted"), 0.4),
border: {
width: 1,
color: borderColor(layer, "variant"),
},
},
},
compositionMark: {
underline: {
thickness: 1.0,
color: borderColor(layer),
},
},
syntax,
}
} }

65
styles/src/styleTree/feedback.ts
View File

@ -1,37 +1,36 @@
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: {
...text(layer, "mono", "on"), ...text(layer, "mono", "on"),
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
border: border(layer, "on"), border: border(layer, "on"),
margin: { margin: {
right: 4, right: 4,
}, },
padding: { padding: {
bottom: 2, bottom: 2,
left: 10, left: 10,
right: 10, right: 10,
top: 2, top: 2,
}, },
clicked: { clicked: {
...text(layer, "mono", "on", "pressed"), ...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"), background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"), border: border(layer, "on", "pressed"),
}, },
hover: { hover: {
...text(layer, "mono", "on", "hovered"), ...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"), border: border(layer, "on", "hovered"),
}, },
}, },
button_margin: 8, button_margin: 8,
info_text: text(layer, "sans", "default", { size: "xs" }), info_text: text(layer, "sans", "default", { size: "xs" }),
}; }
} }

82
styles/src/styleTree/hoverPopover.ts
View File

@ -1,45 +1,45 @@
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,
padding: { padding: {
left: 8, left: 8,
right: 8, right: 8,
top: 4, top: 4,
bottom: 4, bottom: 4,
}, },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
border: border(layer), border: border(layer),
margin: { margin: {
left: -8, left: -8,
}, },
}; }
return { return {
container: baseContainer, container: baseContainer,
infoContainer: { infoContainer: {
...baseContainer, ...baseContainer,
background: background(layer, "accent"), background: background(layer, "accent"),
border: border(layer, "accent"), border: border(layer, "accent"),
}, },
warningContainer: { warningContainer: {
...baseContainer, ...baseContainer,
background: background(layer, "warning"), background: background(layer, "warning"),
border: border(layer, "warning"), border: border(layer, "warning"),
}, },
errorContainer: { errorContainer: {
...baseContainer, ...baseContainer,
background: background(layer, "negative"), background: background(layer, "negative"),
border: border(layer, "negative"), border: border(layer, "negative"),
}, },
block_style: { block_style: {
padding: { top: 4 }, padding: { top: 4 },
}, },
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
}; }
} }

94
styles/src/styleTree/incomingCallNotification.ts
View File

@ -1,45 +1,53 @@
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 {
return { let layer = colorScheme.middle
windowHeight: 74, const avatarSize = 48
windowWidth: 380, return {
background: background(layer), windowHeight: 74,
callerContainer: { windowWidth: 380,
padding: 12, background: background(layer),
}, callerContainer: {
callerAvatar: { padding: 12,
height: avatarSize, },
width: avatarSize, callerAvatar: {
cornerRadius: avatarSize / 2, height: avatarSize,
}, width: avatarSize,
callerMetadata: { cornerRadius: avatarSize / 2,
margin: { left: 10 }, },
}, callerMetadata: {
callerUsername: { margin: { left: 10 },
...text(layer, "sans", { size: "sm", weight: "bold" }), },
margin: { top: -3 }, callerUsername: {
}, ...text(layer, "sans", { size: "sm", weight: "bold" }),
callerMessage: { margin: { top: -3 },
...text(layer, "sans", "variant", { size: "xs" }), },
margin: { top: -3 }, callerMessage: {
}, ...text(layer, "sans", "variant", { size: "xs" }),
worktreeRoots: { margin: { top: -3 },
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), },
margin: { top: -3 }, worktreeRoots: {
}, ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
buttonWidth: 96, margin: { top: -3 },
acceptButton: { },
background: background(layer, "accent"), buttonWidth: 96,
border: border(layer, { left: true, bottom: true }), acceptButton: {
...text(layer, "sans", "positive", { size: "xs", weight: "extra_bold" }) background: background(layer, "accent"),
}, border: border(layer, { left: true, bottom: true }),
declineButton: { ...text(layer, "sans", "positive", {
border: border(layer, { left: true }), size: "xs",
...text(layer, "sans", "negative", { size: "xs", weight: "extra_bold" }) weight: "extra_bold",
}, }),
}; },
declineButton: {
border: border(layer, { left: true }),
...text(layer, "sans", "negative", {
size: "xs",
weight: "extra_bold",
}),
},
}
} }

146
styles/src/styleTree/picker.ts
View File

@ -1,78 +1,78 @@
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),
shadow: colorScheme.modalShadow, shadow: colorScheme.modalShadow,
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], text: text(layer, "mono", "on"),
text: text(layer, "mono", "on"), border: border(layer, { bottom: true }),
border: border(layer, { bottom: true }), padding: {
padding: { bottom: 8,
bottom: 8, left: 16,
left: 16, right: 16,
right: 16, top: 8,
top: 8, },
}, 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: {
bottom: 4, bottom: 4,
left: 12, left: 12,
right: 12, right: 12,
top: 4, top: 4,
}, },
margin: { margin: {
top: 1, top: 1,
left: 4, left: 4,
right: 4, right: 4,
}, },
cornerRadius: 8, cornerRadius: 8,
text: text(layer, "sans", "variant"), text: text(layer, "sans", "variant"),
highlightText: text(layer, "sans", "accent", { weight: "bold" }), highlightText: text(layer, "sans", "accent", { weight: "bold" }),
active: { active: {
background: background(layer, "base", "active"), background: background(layer, "base", "active"),
text: text(layer, "sans", "base", "active"), text: text(layer, "sans", "base", "active"),
highlightText: text(layer, "sans", "accent", { highlightText: text(layer, "sans", "accent", {
weight: "bold", weight: "bold",
}), }),
}, },
hover: { hover: {
background: background(layer, "hovered"), background: background(layer, "hovered"),
}, },
}, },
inputEditor, inputEditor,
emptyInputEditor, emptyInputEditor,
noMatches: { noMatches: {
text: text(layer, "sans", "variant"), text: text(layer, "sans", "variant"),
padding: { padding: {
bottom: 8, bottom: 8,
left: 16, left: 16,
right: 16, right: 16,
top: 8, top: 8,
}, },
}, },
}; }
} }

20
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" }),
}; }
} }

110
styles/src/styleTree/projectPanel.ts
View File

@ -1,60 +1,60 @@
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 = {
height: 24,
iconColor: foreground(layer, "variant"),
iconSize: 8,
iconSpacing: 8,
}
let entry = { let baseEntry = {
...baseEntry, height: 24,
text: text(layer, "mono", "variant", { size: "sm" }), iconColor: foreground(layer, "variant"),
hover: { iconSize: 8,
background: background(layer, "variant", "hovered"), iconSpacing: 8,
}, }
active: {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
activeHover: {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
};
return { let entry = {
background: background(layer), ...baseEntry,
padding: { left: 12, right: 12, top: 6, bottom: 6 }, text: text(layer, "mono", "variant", { size: "sm" }),
indentWidth: 8, hover: {
entry, background: background(layer, "variant", "hovered"),
draggedEntry: { },
...baseEntry, active: {
text: text(layer, "mono", "on", { size: "sm" }), background: background(layer, "active"),
background: withOpacity(background(layer, "on"), 0.9), text: text(layer, "mono", "active", { size: "sm" }),
border: border(layer), },
}, activeHover: {
ignoredEntry: { background: background(layer, "active"),
...entry, text: text(layer, "mono", "active", { size: "sm" }),
text: text(layer, "mono", "disabled"), },
}, }
cutEntry: {
...entry, return {
text: text(layer, "mono", "disabled"), background: background(layer),
active: { padding: { left: 12, right: 12, top: 6, bottom: 6 },
background: background(layer, "active"), indentWidth: 8,
text: text(layer, "mono", "disabled", { size: "sm" }), entry,
}, draggedEntry: {
}, ...baseEntry,
filenameEditor: { text: text(layer, "mono", "on", { size: "sm" }),
background: background(layer, "on"), background: withOpacity(background(layer, "on"), 0.9),
text: text(layer, "mono", "on", { size: "sm" }), border: border(layer),
selection: colorScheme.players[0], },
}, ignoredEntry: {
}; ...entry,
text: text(layer, "mono", "disabled"),
},
cutEntry: {
...entry,
text: text(layer, "mono", "disabled"),
active: {
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
},
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0],
},
}
} }

94
styles/src/styleTree/projectSharedNotification.ts
View File

@ -1,46 +1,54 @@
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,
background: background(layer), background: background(layer),
ownerContainer: { ownerContainer: {
padding: 12, padding: 12,
}, },
ownerAvatar: { ownerAvatar: {
height: avatarSize, height: avatarSize,
width: avatarSize, width: avatarSize,
cornerRadius: avatarSize / 2, cornerRadius: avatarSize / 2,
}, },
ownerMetadata: { ownerMetadata: {
margin: { left: 10 }, margin: { left: 10 },
}, },
ownerUsername: { ownerUsername: {
...text(layer, "sans", { size: "sm", weight: "bold" }), ...text(layer, "sans", { size: "sm", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
message: { message: {
...text(layer, "sans", "variant", { size: "xs" }), ...text(layer, "sans", "variant", { size: "xs" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
worktreeRoots: { worktreeRoots: {
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }), ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 }, margin: { top: -3 },
}, },
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",
dismissButton: { weight: "extra_bold",
border: border(layer, { left: true }), }),
...text(layer, "sans", "variant", { size: "xs", weight: "extra_bold" }) },
}, dismissButton: {
}; border: border(layer, { left: true }),
...text(layer, "sans", "variant", {
size: "xs",
weight: "extra_bold",
}),
},
}
} }

178
styles/src/styleTree/search.ts
View File

@ -1,94 +1,94 @@
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 = {
background: background(layer), background: background(layer),
cornerRadius: 8, cornerRadius: 8,
minWidth: 200, minWidth: 200,
maxWidth: 500, maxWidth: 500,
placeholderText: text(layer, "mono", "disabled"), placeholderText: text(layer, "mono", "disabled"),
selection: colorScheme.players[0], selection: colorScheme.players[0],
text: text(layer, "mono", "default"), text: text(layer, "mono", "default"),
border: border(layer), border: border(layer),
margin: { margin: {
right: 12, right: 12,
}, },
padding: { padding: {
top: 3, top: 3,
bottom: 3, bottom: 3,
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
matchBackground: withOpacity(foreground(layer, "accent"), 0.4), matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
optionButton: { optionButton: {
...text(layer, "mono", "on"), ...text(layer, "mono", "on"),
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 6, cornerRadius: 6,
border: border(layer, "on"), border: border(layer, "on"),
margin: { margin: {
right: 4, right: 4,
}, },
padding: { padding: {
bottom: 2, bottom: 2,
left: 10, left: 10,
right: 10, right: 10,
top: 2, top: 2,
}, },
active: { active: {
...text(layer, "mono", "on", "inverted"), ...text(layer, "mono", "on", "inverted"),
background: background(layer, "on", "inverted"), background: background(layer, "on", "inverted"),
border: border(layer, "on", "inverted"), border: border(layer, "on", "inverted"),
}, },
clicked: { clicked: {
...text(layer, "mono", "on", "pressed"), ...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"), background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"), border: border(layer, "on", "pressed"),
}, },
hover: { hover: {
...text(layer, "mono", "on", "hovered"), ...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"), border: border(layer, "on", "hovered"),
}, },
}, },
editor, editor,
invalidEditor: { invalidEditor: {
...editor, ...editor,
border: border(layer, "negative"), border: border(layer, "negative"),
}, },
matchIndex: { matchIndex: {
...text(layer, "mono", "variant"), ...text(layer, "mono", "variant"),
padding: 6, padding: 6,
}, },
optionButtonGroup: { optionButtonGroup: {
padding: { padding: {
left: 12, left: 12,
right: 12, right: 12,
}, },
}, },
resultsStatus: { resultsStatus: {
...text(layer, "mono", "on"), ...text(layer, "mono", "on"),
size: 18, size: 18,
}, },
dismissButton: { dismissButton: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 12, iconWidth: 12,
buttonWidth: 14, buttonWidth: 14,
padding: { padding: {
left: 10, left: 10,
right: 10, right: 10,
}, },
hover: { hover: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

12
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),
} }
} }

58
styles/src/styleTree/simpleMessageNotification.ts
View File

@ -1,31 +1,33 @@
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
return { ): Object {
message: { let layer = colorScheme.middle
...text(layer, "sans", { size: "xs" }), return {
margin: { left: headerPadding, right: headerPadding }, message: {
}, ...text(layer, "sans", { size: "xs" }),
actionMessage: { margin: { left: headerPadding, right: headerPadding },
...text(layer, "sans", { size: "xs" }), },
margin: { left: headerPadding, top: 6, bottom: 6 }, actionMessage: {
hover: { ...text(layer, "sans", { size: "xs" }),
color: foreground(layer, "hovered"), margin: { left: headerPadding, top: 6, bottom: 6 },
}, hover: {
}, color: foreground(layer, "hovered"),
dismissButton: { },
color: foreground(layer), },
iconWidth: 8, dismissButton: {
iconHeight: 8, color: foreground(layer),
buttonWidth: 8, iconWidth: 8,
buttonHeight: 8, iconHeight: 8,
hover: { buttonWidth: 8,
color: foreground(layer, "hovered"), buttonHeight: 8,
}, hover: {
}, color: foreground(layer, "hovered"),
}; },
},
}
} }

216
styles/src/styleTree/statusBar.ts
View File

@ -1,118 +1,118 @@
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,
padding: { top: 3, bottom: 3, left: 6, right: 6 },
};
const diagnosticStatusContainer = {
cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 },
};
return {
height: 30,
itemSpacing: 8,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"),
autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer),
hover: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer),
},
},
diagnosticMessage: {
...text(layer, "sans"),
hover: text(layer, "sans", "hovered"),
},
feedback: {
...text(layer, "sans", "variant"),
hover: text(layer, "sans", "hovered"),
},
diagnosticSummary: {
height: 20,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
cornerRadius: 6, cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 }, padding: { top: 3, bottom: 3, left: 6, right: 6 },
}, }
containerWarning: {
...diagnosticStatusContainer, const diagnosticStatusContainer = {
background: background(layer, "warning"), cornerRadius: 6,
border: border(layer, "warning"), padding: { top: 1, bottom: 1, left: 6, right: 6 },
}, }
containerError: {
...diagnosticStatusContainer, return {
background: background(layer, "negative"), height: 30,
border: border(layer, "negative"), itemSpacing: 8,
}, padding: {
hover: { top: 1,
iconColorOk: foreground(layer, "on"), bottom: 1,
containerOk: { left: 6,
cornerRadius: 6, right: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
background: background(layer, "on", "hovered"),
}, },
containerWarning: { border: border(layer, { top: true, overlay: true }),
...diagnosticStatusContainer, cursorPosition: text(layer, "sans", "variant"),
background: background(layer, "warning", "hovered"), autoUpdateProgressMessage: text(layer, "sans", "variant"),
border: border(layer, "warning", "hovered"), autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer),
hover: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer),
},
}, },
containerError: { diagnosticMessage: {
...diagnosticStatusContainer, ...text(layer, "sans"),
background: background(layer, "negative", "hovered"), hover: text(layer, "sans", "hovered"),
border: border(layer, "negative", "hovered"),
}, },
}, feedback: {
}, ...text(layer, "sans", "variant"),
sidebarButtons: { hover: text(layer, "sans", "hovered"),
groupLeft: {},
groupRight: {},
item: {
...statusContainer,
iconSize: 16,
iconColor: foreground(layer, "variant"),
hover: {
iconColor: foreground(layer, "hovered"),
background: background(layer, "variant"),
}, },
active: { diagnosticSummary: {
iconColor: foreground(layer, "active"), height: 20,
background: background(layer, "active"), iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning"),
border: border(layer, "warning"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative"),
border: border(layer, "negative"),
},
hover: {
iconColorOk: foreground(layer, "on"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
background: background(layer, "on", "hovered"),
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"),
},
},
}, },
}, sidebarButtons: {
badge: { groupLeft: {},
cornerRadius: 3, groupRight: {},
padding: 2, item: {
margin: { bottom: -1, right: -1 }, ...statusContainer,
border: border(layer), iconSize: 16,
background: background(layer, "accent"), iconColor: foreground(layer, "variant"),
}, hover: {
}, iconColor: foreground(layer, "hovered"),
}; background: background(layer, "variant"),
},
active: {
iconColor: foreground(layer, "active"),
background: background(layer, "active"),
},
},
badge: {
cornerRadius: 3,
padding: 2,
margin: { bottom: -1, right: -1 },
border: border(layer),
background: background(layer, "accent"),
},
},
}
} }

180
styles/src/styleTree/tabBar.ts
View File

@ -1,103 +1,103 @@
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,
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
background: background(layer), background: background(layer),
border: border(layer, { border: border(layer, {
right: true, right: true,
bottom: true, bottom: true,
overlay: true, overlay: true,
}), }),
padding: { padding: {
left: 8, left: 8,
right: 12, right: 12,
}, },
spacing: 8, spacing: 8,
// Close icons // Close icons
iconWidth: 14, iconWidth: 14,
iconClose: foreground(layer, "variant"), iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"), iconCloseActive: foreground(layer, "hovered"),
// Indicators // Indicators
iconConflict: foreground(layer, "warning"), iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "accent"), iconDirty: foreground(layer, "accent"),
// When two tabs of the same name are open, a label appears next to them // When two tabs of the same name are open, a label appears next to them
description: { description: {
margin: { left: 8 }, margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }), ...text(layer, "sans", "disabled", { size: "2xs" }),
}, },
}; }
const activePaneActiveTab = { const activePaneActiveTab = {
...tab, ...tab,
background: background(activeLayer), background: background(activeLayer),
text: text(activeLayer, "sans", "active", { size: "sm" }), text: text(activeLayer, "sans", "active", { size: "sm" }),
border: { border: {
...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,
background: background(activeLayer), background: background(activeLayer),
text: text(layer, "sans", "variant", { size: "sm" }), text: text(layer, "sans", "variant", { size: "sm" }),
border: { border: {
...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,
background: background(layer), background: background(layer),
activePane: { activePane: {
activeTab: activePaneActiveTab, activeTab: activePaneActiveTab,
inactiveTab: tab, inactiveTab: tab,
}, },
inactivePane: { inactivePane: {
activeTab: inactivePaneActiveTab, activeTab: inactivePaneActiveTab,
inactiveTab: inactivePaneInactiveTab, inactiveTab: inactivePaneInactiveTab,
}, },
draggedTab, draggedTab,
paneButton: { paneButton: {
color: foreground(layer, "variant"), color: foreground(layer, "variant"),
iconWidth: 12, iconWidth: 12,
buttonWidth: activePaneActiveTab.height, buttonWidth: activePaneActiveTab.height,
hover: { hover: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
paneButtonContainer: { paneButtonContainer: {
background: tab.background, background: tab.background,
border: { border: {
...tab.border, ...tab.border,
right: false, right: false,
}, },
}, },
}; }
} }

94
styles/src/styleTree/terminal.ts
View File

@ -1,52 +1,52 @@
import { ColorScheme } from "../themes/common/colorScheme"; import { ColorScheme } from "../themes/common/colorScheme"
export default function terminal(colorScheme: ColorScheme) { export default function terminal(colorScheme: ColorScheme) {
/**
* Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
* or can be set directly with RGB values.
* Here are the common interpretations of these names:
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/
return {
black: colorScheme.ramps.neutral(0).hex(),
red: colorScheme.ramps.red(0.5).hex(),
green: colorScheme.ramps.green(0.5).hex(),
yellow: colorScheme.ramps.yellow(0.5).hex(),
blue: colorScheme.ramps.blue(0.5).hex(),
magenta: colorScheme.ramps.magenta(0.5).hex(),
cyan: colorScheme.ramps.cyan(0.5).hex(),
white: colorScheme.ramps.neutral(1).hex(),
brightBlack: colorScheme.ramps.neutral(0.4).hex(),
brightRed: colorScheme.ramps.red(0.25).hex(),
brightGreen: colorScheme.ramps.green(0.25).hex(),
brightYellow: colorScheme.ramps.yellow(0.25).hex(),
brightBlue: colorScheme.ramps.blue(0.25).hex(),
brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
brightCyan: colorScheme.ramps.cyan(0.25).hex(),
brightWhite: colorScheme.ramps.neutral(1).hex(),
/** /**
* Default color for characters * Colors are controlled per-cell in the terminal grid.
* Cells can be set to any of these more 'theme-capable' colors
* or can be set directly with RGB values.
* Here are the common interpretations of these names:
* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/ */
foreground: colorScheme.ramps.neutral(1).hex(), return {
/** black: colorScheme.ramps.neutral(0).hex(),
* Default color for the rectangle background of a cell red: colorScheme.ramps.red(0.5).hex(),
*/ green: colorScheme.ramps.green(0.5).hex(),
background: colorScheme.ramps.neutral(0).hex(), yellow: colorScheme.ramps.yellow(0.5).hex(),
modalBackground: colorScheme.ramps.neutral(0.1).hex(), blue: colorScheme.ramps.blue(0.5).hex(),
/** magenta: colorScheme.ramps.magenta(0.5).hex(),
* Default color for the cursor cyan: colorScheme.ramps.cyan(0.5).hex(),
*/ white: colorScheme.ramps.neutral(1).hex(),
cursor: colorScheme.players[0].cursor, brightBlack: colorScheme.ramps.neutral(0.4).hex(),
dimBlack: colorScheme.ramps.neutral(1).hex(), brightRed: colorScheme.ramps.red(0.25).hex(),
dimRed: colorScheme.ramps.red(0.75).hex(), brightGreen: colorScheme.ramps.green(0.25).hex(),
dimGreen: colorScheme.ramps.green(0.75).hex(), brightYellow: colorScheme.ramps.yellow(0.25).hex(),
dimYellow: colorScheme.ramps.yellow(0.75).hex(), brightBlue: colorScheme.ramps.blue(0.25).hex(),
dimBlue: colorScheme.ramps.blue(0.75).hex(), brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
dimMagenta: colorScheme.ramps.magenta(0.75).hex(), brightCyan: colorScheme.ramps.cyan(0.25).hex(),
dimCyan: colorScheme.ramps.cyan(0.75).hex(), brightWhite: colorScheme.ramps.neutral(1).hex(),
dimWhite: colorScheme.ramps.neutral(0.6).hex(), /**
brightForeground: colorScheme.ramps.neutral(1).hex(), * Default color for characters
dimForeground: colorScheme.ramps.neutral(0).hex(), */
}; foreground: colorScheme.ramps.neutral(1).hex(),
/**
* Default color for the rectangle background of a cell
*/
background: colorScheme.ramps.neutral(0).hex(),
modalBackground: colorScheme.ramps.neutral(0.1).hex(),
/**
* Default color for the cursor
*/
cursor: colorScheme.players[0].cursor,
dimBlack: colorScheme.ramps.neutral(1).hex(),
dimRed: colorScheme.ramps.red(0.75).hex(),
dimGreen: colorScheme.ramps.green(0.75).hex(),
dimYellow: colorScheme.ramps.yellow(0.75).hex(),
dimBlue: colorScheme.ramps.blue(0.75).hex(),
dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
dimCyan: colorScheme.ramps.cyan(0.75).hex(),
dimWhite: colorScheme.ramps.neutral(0.6).hex(),
brightForeground: colorScheme.ramps.neutral(1).hex(),
dimForeground: colorScheme.ramps.neutral(0).hex(),
}
} }

40
styles/src/styleTree/tooltip.ts
View File

@ -1,23 +1,23 @@
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),
padding: { top: 4, bottom: 4, left: 8, right: 8 }, padding: { top: 4, bottom: 4, left: 8, right: 8 },
margin: { top: 6, left: 6 }, margin: { top: 6, left: 6 },
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
cornerRadius: 6, cornerRadius: 6,
text: text(layer, "sans", { size: "xs" }), text: text(layer, "sans", { size: "xs" }),
keystroke: { keystroke: {
background: background(layer, "on"), background: background(layer, "on"),
cornerRadius: 4, cornerRadius: 4,
margin: { left: 6 }, margin: { left: 6 },
padding: { left: 4, right: 4 }, padding: { left: 4, right: 4 },
...text(layer, "mono", "on", { size: "xs", weight: "bold" }), ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
}, },
maxTextWidth: 200, maxTextWidth: 200,
}; }
} }

54
styles/src/styleTree/updateNotification.ts
View File

@ -1,31 +1,31 @@
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" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: headerPadding, right: headerPadding },
}, },
actionMessage: { actionMessage: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 }, margin: { left: headerPadding, top: 6, bottom: 6 },
hover: { hover: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
dismissButton: { dismissButton: {
color: foreground(layer), color: foreground(layer),
iconWidth: 8, iconWidth: 8,
iconHeight: 8, iconHeight: 8,
buttonWidth: 8, buttonWidth: 8,
buttonHeight: 8, buttonHeight: 8,
hover: { hover: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
}, },
}, },
}; }
} }

502
styles/src/styleTree/workspace.ts
View File

@ -1,266 +1,264 @@
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,
padding: {
top: 1,
bottom: 1,
left: 8,
right: 8,
},
...text(layer, "sans", "variant", { size: "xs" }),
background: background(layer, "variant"),
border: border(layer),
hover: {
...text(layer, "sans", "variant", "hovered", { size: "xs" }),
background: background(layer, "variant", "hovered"),
border: border(layer, "variant", "hovered"),
},
clicked: {
...text(layer, "sans", "variant", "pressed", { size: "xs" }),
background: background(layer, "variant", "pressed"),
border: border(layer, "variant", "pressed"),
},
active: {
...text(layer, "sans", "variant", "active", { size: "xs" }),
background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"),
},
};
const avatarWidth = 18;
const avatarOuterWidth = avatarWidth + 4;
const followerAvatarWidth = 14;
const followerAvatarOuterWidth = followerAvatarWidth + 4;
return {
background: background(layer),
joiningProjectAvatar: {
cornerRadius: 40,
width: 80,
},
joiningProjectMessage: {
padding: 12,
...text(layer, "sans", { size: "lg" }),
},
externalLocationMessage: {
background: background(colorScheme.middle, "accent"),
border: border(colorScheme.middle, "accent"),
cornerRadius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tabBar: tabBar(colorScheme),
modal: {
margin: {
bottom: 52,
top: 52,
},
cursor: "Arrow",
},
sidebar: {
initialSize: 240,
border: border(layer, { left: true, right: true }),
},
paneDivider: {
color: borderColor(layer),
width: 1,
},
statusBar: statusBar(colorScheme),
titlebar: {
itemSpacing,
facePileSpacing: 2,
height: 33, // 32px + 1px for overlaid border
background: background(layer),
border: border(layer, { bottom: true, overlay: true }),
padding: {
left: 80,
right: itemSpacing,
},
// Project
title: text(layer, "sans", "variant"),
// Collaborators
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
followerAvatarOverlap: 8,
leaderSelection: {
margin: {
top: 4,
bottom: 4,
},
padding: {
left: 2,
right: 2,
top: 4,
bottom: 4,
},
cornerRadius: 6, cornerRadius: 6,
},
avatarRibbon: {
height: 3,
width: 12,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
},
// Sign in buttom
// FlatButton, Variant
signInPrompt: {
...titlebarButton,
},
// Offline Indicator
offlineIcon: {
color: foreground(layer, "variant"),
width: 16,
margin: {
left: itemSpacing,
},
padding: { padding: {
right: 4, top: 1,
bottom: 1,
left: 8,
right: 8,
}, },
}, ...text(layer, "sans", "variant", { size: "xs" }),
background: background(layer, "variant"),
// Notice that the collaboration server is out of date border: border(layer),
outdatedWarning: {
...text(layer, "sans", "warning", { size: "xs" }),
background: withOpacity(background(layer, "warning"), 0.3),
border: border(layer, "warning"),
margin: {
left: itemSpacing,
},
padding: {
left: 8,
right: 8,
},
cornerRadius: 6,
},
callControl: {
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 20,
hover: { hover: {
background: background(layer, "variant", "hovered"), ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
color: foreground(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
}, border: border(layer, "variant", "hovered"),
},
toggleContactsButton: {
margin: { left: itemSpacing },
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 8,
buttonWidth: 20,
active: {
background: background(layer, "variant", "active"),
color: foreground(layer, "variant", "active"),
}, },
clicked: { clicked: {
background: background(layer, "variant", "pressed"), ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
color: foreground(layer, "variant", "pressed"), background: background(layer, "variant", "pressed"),
border: border(layer, "variant", "pressed"),
}, },
hover: { active: {
background: background(layer, "variant", "hovered"), ...text(layer, "sans", "variant", "active", { size: "xs" }),
color: foreground(layer, "variant", "hovered"), background: background(layer, "variant", "active"),
border: border(layer, "variant", "active"),
}, },
}, }
userMenuButton: { const avatarWidth = 18
buttonWidth: 20, const avatarOuterWidth = avatarWidth + 4
iconWidth: 12, const followerAvatarWidth = 14
...titlebarButton, const followerAvatarOuterWidth = followerAvatarWidth + 4
},
toggleContactsBadge: {
cornerRadius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(layer),
background: foreground(layer, "accent"),
},
shareButton: {
...titlebarButton,
},
},
toolbar: { return {
height: 34, background: background(layer),
background: background(colorScheme.highest), joiningProjectAvatar: {
border: border(colorScheme.highest, { bottom: true }), cornerRadius: 40,
itemSpacing: 8, width: 80,
navButton: {
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
}, },
disabled: { joiningProjectMessage: {
color: foreground(colorScheme.highest, "on", "disabled"), padding: 12,
...text(layer, "sans", { size: "lg" }),
}, },
}, externalLocationMessage: {
padding: { left: 8, right: 8, top: 4, bottom: 4 }, background: background(colorScheme.middle, "accent"),
}, border: border(colorScheme.middle, "accent"),
breadcrumbs: { cornerRadius: 6,
...text(layer, "mono", "variant"), padding: 12,
padding: { left: 6 }, margin: { bottom: 8, right: 8 },
}, ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
disconnectedOverlay: { },
...text(layer, "sans"), leaderBorderOpacity: 0.7,
background: withOpacity(background(layer), 0.8), leaderBorderWidth: 2.0,
}, tabBar: tabBar(colorScheme),
notification: { modal: {
margin: { top: 10 }, margin: {
background: background(colorScheme.middle), bottom: 52,
cornerRadius: 6, top: 52,
padding: 12, },
border: border(colorScheme.middle), cursor: "Arrow",
shadow: colorScheme.popoverShadow, },
}, sidebar: {
notifications: { initialSize: 240,
width: 400, border: border(layer, { left: true, right: true }),
margin: { right: 10, bottom: 10 }, },
}, paneDivider: {
dock: { color: borderColor(layer),
initialSizeRight: 640, width: 1,
initialSizeBottom: 480, },
wash_color: withOpacity(background(colorScheme.highest), 0.5), statusBar: statusBar(colorScheme),
panel: { titlebar: {
border: border(colorScheme.middle), itemSpacing,
}, facePileSpacing: 2,
maximized: { height: 33, // 32px + 1px for overlaid border
margin: 32, background: background(layer),
border: border(colorScheme.highest, { overlay: true }), border: border(layer, { bottom: true, overlay: true }),
shadow: colorScheme.modalShadow, padding: {
}, left: 80,
}, right: itemSpacing,
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), },
};
// Project
title: text(layer, "sans", "variant"),
// Collaborators
leaderAvatar: {
width: avatarWidth,
outerWidth: avatarOuterWidth,
cornerRadius: avatarWidth / 2,
outerCornerRadius: avatarOuterWidth / 2,
},
followerAvatar: {
width: followerAvatarWidth,
outerWidth: followerAvatarOuterWidth,
cornerRadius: followerAvatarWidth / 2,
outerCornerRadius: followerAvatarOuterWidth / 2,
},
inactiveAvatarGrayscale: true,
followerAvatarOverlap: 8,
leaderSelection: {
margin: {
top: 4,
bottom: 4,
},
padding: {
left: 2,
right: 2,
top: 4,
bottom: 4,
},
cornerRadius: 6,
},
avatarRibbon: {
height: 3,
width: 12,
// TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
},
// Sign in buttom
// FlatButton, Variant
signInPrompt: {
...titlebarButton,
},
// Offline Indicator
offlineIcon: {
color: foreground(layer, "variant"),
width: 16,
margin: {
left: itemSpacing,
},
padding: {
right: 4,
},
},
// Notice that the collaboration server is out of date
outdatedWarning: {
...text(layer, "sans", "warning", { size: "xs" }),
background: withOpacity(background(layer, "warning"), 0.3),
border: border(layer, "warning"),
margin: {
left: itemSpacing,
},
padding: {
left: 8,
right: 8,
},
cornerRadius: 6,
},
callControl: {
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 20,
hover: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
},
},
toggleContactsButton: {
margin: { left: itemSpacing },
cornerRadius: 6,
color: foreground(layer, "variant"),
iconWidth: 8,
buttonWidth: 20,
active: {
background: background(layer, "variant", "active"),
color: foreground(layer, "variant", "active"),
},
clicked: {
background: background(layer, "variant", "pressed"),
color: foreground(layer, "variant", "pressed"),
},
hover: {
background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"),
},
},
userMenuButton: {
buttonWidth: 20,
iconWidth: 12,
...titlebarButton,
},
toggleContactsBadge: {
cornerRadius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(layer),
background: foreground(layer, "accent"),
},
shareButton: {
...titlebarButton,
},
},
toolbar: {
height: 34,
background: background(colorScheme.highest),
border: border(colorScheme.highest, { bottom: true }),
itemSpacing: 8,
navButton: {
color: foreground(colorScheme.highest, "on"),
iconWidth: 12,
buttonWidth: 24,
cornerRadius: 6,
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(
colorScheme.highest,
"on",
"hovered"
),
},
disabled: {
color: foreground(colorScheme.highest, "on", "disabled"),
},
},
padding: { left: 8, right: 8, top: 4, bottom: 4 },
},
breadcrumbs: {
...text(layer, "mono", "variant"),
padding: { left: 6 },
},
disconnectedOverlay: {
...text(layer, "sans"),
background: withOpacity(background(layer), 0.8),
},
notification: {
margin: { top: 10 },
background: background(colorScheme.middle),
cornerRadius: 6,
padding: 12,
border: border(colorScheme.middle),
shadow: colorScheme.popoverShadow,
},
notifications: {
width: 400,
margin: { right: 10, bottom: 10 },
},
dock: {
initialSizeRight: 640,
initialSizeBottom: 480,
wash_color: withOpacity(background(colorScheme.highest), 0.5),
panel: {
border: border(colorScheme.middle),
},
maximized: {
margin: 32,
border: border(colorScheme.highest, { overlay: true }),
shadow: colorScheme.modalShadow,
},
},
dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
}
} }

72
styles/src/themes/andromeda.ts
View File

@ -1,41 +1,43 @@
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
.scale([ .scale([
"#1E2025", "#1E2025",
"#23262E", "#23262E",
"#292E38", "#292E38",
"#2E323C", "#2E323C",
"#ACA8AE", "#ACA8AE",
"#CBC9CF", "#CBC9CF",
"#E1DDE4", "#E1DDE4",
"#F7F7F8", "#F7F7F8",
]) ])
.domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]), .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#F92672")), red: colorRamp(chroma("#F92672")),
orange: colorRamp(chroma("#F39C12")), orange: colorRamp(chroma("#F39C12")),
yellow: colorRamp(chroma("#FFE66D")), yellow: colorRamp(chroma("#FFE66D")),
green: colorRamp(chroma("#96E072")), green: colorRamp(chroma("#96E072")),
cyan: colorRamp(chroma("#00E8C6")), cyan: colorRamp(chroma("#00E8C6")),
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:
url: "https://github.com/EliverLara/Andromeda" "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89",
} },
url: "https://github.com/EliverLara/Andromeda",
}

112
styles/src/themes/atelier-cave.ts
View File

@ -1,63 +1,63 @@
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
.scale([ .scale([
"#19171c", "#19171c",
"#26232a", "#26232a",
"#585260", "#585260",
"#655f6d", "#655f6d",
"#7e7887", "#7e7887",
"#8b8792", "#8b8792",
"#e2dfe7", "#e2dfe7",
"#efecf4", "#efecf4",
]) ])
.domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]), .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#be4678")), red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")), orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")), yellow: colorRamp(chroma("#a06e3b")),
green: colorRamp(chroma("#2a9292")), green: colorRamp(chroma("#2a9292")),
cyan: colorRamp(chroma("#398bc6")), cyan: colorRamp(chroma("#398bc6")),
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
.scale([ .scale([
"#19171c", "#19171c",
"#26232a", "#26232a",
"#585260", "#585260",
"#655f6d", "#655f6d",
"#7e7887", "#7e7887",
"#8b8792", "#8b8792",
"#e2dfe7", "#e2dfe7",
"#efecf4", "#efecf4",
]) ])
.correctLightness(), .correctLightness(),
red: colorRamp(chroma("#be4678")), red: colorRamp(chroma("#be4678")),
orange: colorRamp(chroma("#aa573c")), orange: colorRamp(chroma("#aa573c")),
yellow: colorRamp(chroma("#a06e3b")), yellow: colorRamp(chroma("#a06e3b")),
green: colorRamp(chroma("#2a9292")), green: colorRamp(chroma("#2a9292")),
cyan: colorRamp(chroma("#398bc6")), cyan: colorRamp(chroma("#398bc6")),
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,
author: "atelierbram", author: "atelierbram",
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/",
}

73
styles/src/themes/atelier-sulphurpool.ts
View File

@ -1,42 +1,43 @@
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
.scale([ .scale([
"#202746", "#202746",
"#293256", "#293256",
"#5e6687", "#5e6687",
"#6b7394", "#6b7394",
"#898ea4", "#898ea4",
"#979db4", "#979db4",
"#dfe2f1", "#dfe2f1",
"#f5f7ff", "#f5f7ff",
]) ])
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]), .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#c94922")), red: colorRamp(chroma("#c94922")),
orange: colorRamp(chroma("#c76b29")), orange: colorRamp(chroma("#c76b29")),
yellow: colorRamp(chroma("#c08b30")), yellow: colorRamp(chroma("#c08b30")),
green: colorRamp(chroma("#ac9739")), green: colorRamp(chroma("#ac9739")),
cyan: colorRamp(chroma("#22a2c9")), cyan: colorRamp(chroma("#22a2c9")),
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,
author: "atelierbram", author: "atelierbram",
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/",
}

555
styles/src/themes/common/base16.ts
View File

@ -1,296 +1,299 @@
// 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(
name: string, name: string,
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
// theme so that we don't modify the passed in ramps. // theme so that we don't modify the passed in ramps.
// This combined with an error in the type definitions for chroma js means we have to cast the colors // This combined with an error in the type definitions for chroma js means we have to cast the colors
// function to any in order to get the colors back out from the original ramps. // function to any in order to get the colors back out from the original ramps.
if (isLight) { if (isLight) {
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
.scale((color_ramps.neutral.colors as any)())
.domain([7, 0])
} else {
for (var rampName in color_ramps) {
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([0, 1])
}
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)())
.domain([0, 7])
} }
ramps.neutral = chroma
.scale((color_ramps.neutral.colors as any)()) let blend = isLight ? 0.12 : 0.24
.domain([7, 0]);
} else { function sample(ramp: Scale, index: number): string {
for (var rampName in color_ramps) { return ramp(index).hex()
ramps[rampName] = chroma
.scale((color_ramps[rampName].colors as any)())
.domain([0, 1]);
} }
ramps.neutral = chroma const darkest = ramps.neutral(isLight ? 7 : 0).hex()
.scale((color_ramps.neutral.colors as any)())
.domain([0, 7]);
}
let blend = isLight ? 0.12 : 0.24; const backgroundColor = {
// Title bar
100: {
base: sample(ramps.neutral, 1.25),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 1.75),
},
// Midground (panels, etc)
300: {
base: sample(ramps.neutral, 1),
hovered: sample(ramps.neutral, 1.25),
active: sample(ramps.neutral, 1.5),
},
// Editor
500: {
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.25),
active: sample(ramps.neutral, 0.5),
},
on300: {
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.5),
active: sample(ramps.neutral, 1),
},
on500: {
base: sample(ramps.neutral, 1),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 2),
},
ok: {
base: withOpacity(sample(ramps.green, 0.5), 0.15),
hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
active: withOpacity(sample(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(sample(ramps.red, 0.5), 0.15),
hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
active: withOpacity(sample(ramps.red, 0.5), 0.25),
},
on500Error: {
base: sample(ramps.red, 0.05),
hovered: sample(ramps.red, 0.1),
active: sample(ramps.red, 0.15),
},
warning: {
base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
},
on500Warning: {
base: sample(ramps.yellow, 0.05),
hovered: sample(ramps.yellow, 0.1),
active: sample(ramps.yellow, 0.15),
},
info: {
base: withOpacity(sample(ramps.blue, 0.5), 0.15),
hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
active: withOpacity(sample(ramps.blue, 0.5), 0.25),
},
on500Info: {
base: sample(ramps.blue, 0.05),
hovered: sample(ramps.blue, 0.1),
active: sample(ramps.blue, 0.15),
},
on500Ok: {
base: sample(ramps.green, 0.05),
hovered: sample(ramps.green, 0.1),
active: sample(ramps.green, 0.15),
},
}
function sample(ramp: Scale, index: number): string { const borderColor = {
return ramp(index).hex(); primary: sample(ramps.neutral, isLight ? 1.5 : 0),
} secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
const darkest = ramps.neutral(isLight ? 7 : 0).hex(); muted: sample(ramps.neutral, isLight ? 1.25 : 3),
active: sample(ramps.neutral, isLight ? 4 : 3),
onMedia: withOpacity(darkest, 0.1),
ok: sample(ramps.green, 0.3),
error: sample(ramps.red, 0.3),
warning: sample(ramps.yellow, 0.3),
info: sample(ramps.blue, 0.3),
}
const backgroundColor = { const textColor = {
// Title bar primary: sample(ramps.neutral, 6),
100: { secondary: sample(ramps.neutral, 5),
base: sample(ramps.neutral, 1.25), muted: sample(ramps.neutral, 4),
hovered: sample(ramps.neutral, 1.5), placeholder: sample(ramps.neutral, 3),
active: sample(ramps.neutral, 1.75), active: sample(ramps.neutral, 7),
}, feature: sample(ramps.blue, 0.5),
// Midground (panels, etc) ok: sample(ramps.green, 0.5),
300: { error: sample(ramps.red, 0.5),
base: sample(ramps.neutral, 1), warning: sample(ramps.yellow, 0.5),
hovered: sample(ramps.neutral, 1.25), info: sample(ramps.blue, 0.5),
active: sample(ramps.neutral, 1.5), onMedia: darkest,
}, }
// Editor
500: {
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.25),
active: sample(ramps.neutral, 0.5),
},
on300: {
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.5),
active: sample(ramps.neutral, 1),
},
on500: {
base: sample(ramps.neutral, 1),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 2),
},
ok: {
base: withOpacity(sample(ramps.green, 0.5), 0.15),
hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
active: withOpacity(sample(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(sample(ramps.red, 0.5), 0.15),
hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
active: withOpacity(sample(ramps.red, 0.5), 0.25),
},
on500Error: {
base: sample(ramps.red, 0.05),
hovered: sample(ramps.red, 0.1),
active: sample(ramps.red, 0.15),
},
warning: {
base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
},
on500Warning: {
base: sample(ramps.yellow, 0.05),
hovered: sample(ramps.yellow, 0.1),
active: sample(ramps.yellow, 0.15),
},
info: {
base: withOpacity(sample(ramps.blue, 0.5), 0.15),
hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
active: withOpacity(sample(ramps.blue, 0.5), 0.25),
},
on500Info: {
base: sample(ramps.blue, 0.05),
hovered: sample(ramps.blue, 0.1),
active: sample(ramps.blue, 0.15),
},
on500Ok: {
base: sample(ramps.green, 0.05),
hovered: sample(ramps.green, 0.1),
active: sample(ramps.green, 0.15),
},
};
const borderColor = { const player = {
primary: sample(ramps.neutral, isLight ? 1.5 : 0), 1: buildPlayer(sample(ramps.blue, 0.5)),
secondary: sample(ramps.neutral, isLight ? 1.25 : 1), 2: buildPlayer(sample(ramps.green, 0.5)),
muted: sample(ramps.neutral, isLight ? 1.25 : 3), 3: buildPlayer(sample(ramps.magenta, 0.5)),
active: sample(ramps.neutral, isLight ? 4 : 3), 4: buildPlayer(sample(ramps.orange, 0.5)),
onMedia: withOpacity(darkest, 0.1), 5: buildPlayer(sample(ramps.violet, 0.5)),
ok: sample(ramps.green, 0.3), 6: buildPlayer(sample(ramps.cyan, 0.5)),
error: sample(ramps.red, 0.3), 7: buildPlayer(sample(ramps.red, 0.5)),
warning: sample(ramps.yellow, 0.3), 8: buildPlayer(sample(ramps.yellow, 0.5)),
info: sample(ramps.blue, 0.3), }
};
const textColor = { const editor = {
primary: sample(ramps.neutral, 6), background: backgroundColor[500].base,
secondary: sample(ramps.neutral, 5), indent_guide: borderColor.muted,
muted: sample(ramps.neutral, 4), indent_guide_active: borderColor.secondary,
placeholder: sample(ramps.neutral, 3), line: {
active: sample(ramps.neutral, 7), active: sample(ramps.neutral, 1),
feature: sample(ramps.blue, 0.5), highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
ok: sample(ramps.green, 0.5), },
error: sample(ramps.red, 0.5), highlight: {
warning: sample(ramps.yellow, 0.5), selection: player[1].selectionColor,
info: sample(ramps.blue, 0.5), occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
onMedia: darkest, activeOccurrence: withOpacity(
}; sample(ramps.neutral, 3.5),
blend * 2
), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
match: sample(ramps.violet, 0.15),
activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
related: backgroundColor[500].hovered,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
}
const player = { const syntax: Syntax = {
1: buildPlayer(sample(ramps.blue, 0.5)), primary: {
2: buildPlayer(sample(ramps.green, 0.5)), color: sample(ramps.neutral, 7),
3: buildPlayer(sample(ramps.magenta, 0.5)), weight: fontWeights.normal,
4: buildPlayer(sample(ramps.orange, 0.5)), },
5: buildPlayer(sample(ramps.violet, 0.5)), "variable.special": {
6: buildPlayer(sample(ramps.cyan, 0.5)), color: sample(ramps.blue, 0.8),
7: buildPlayer(sample(ramps.red, 0.5)), weight: fontWeights.normal,
8: buildPlayer(sample(ramps.yellow, 0.5)), },
}; comment: {
color: sample(ramps.neutral, 5),
weight: fontWeights.normal,
},
punctuation: {
color: sample(ramps.neutral, 6),
weight: fontWeights.normal,
},
constant: {
color: sample(ramps.neutral, 4),
weight: fontWeights.normal,
},
keyword: {
color: sample(ramps.blue, 0.5),
weight: fontWeights.normal,
},
function: {
color: sample(ramps.yellow, 0.5),
weight: fontWeights.normal,
},
type: {
color: sample(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
constructor: {
color: sample(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
property: {
color: sample(ramps.blue, 0.6),
weight: fontWeights.normal,
},
enum: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
operator: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
string: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
number: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
boolean: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: sample(ramps.yellow, 0.5),
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
italic: true,
},
}
const editor = { const shadow = withOpacity(
background: backgroundColor[500].base, ramps
indent_guide: borderColor.muted, .neutral(isLight ? 7 : 0)
indent_guide_active: borderColor.secondary, .darken()
line: { .hex(),
active: sample(ramps.neutral, 1), blend
highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used? )
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
match: sample(ramps.violet, 0.15),
activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
related: backgroundColor[500].hovered,
},
gutter: {
primary: textColor.placeholder,
active: textColor.active,
},
};
const syntax: Syntax = { return {
primary: { name,
color: sample(ramps.neutral, 7), isLight,
weight: fontWeights.normal, backgroundColor,
}, borderColor,
"variable.special": { textColor,
color: sample(ramps.blue, 0.8), iconColor: textColor,
weight: fontWeights.normal, editor,
}, syntax,
comment: { player,
color: sample(ramps.neutral, 5), shadow,
weight: fontWeights.normal, ramps,
}, }
punctuation: {
color: sample(ramps.neutral, 6),
weight: fontWeights.normal,
},
constant: {
color: sample(ramps.neutral, 4),
weight: fontWeights.normal,
},
keyword: {
color: sample(ramps.blue, 0.5),
weight: fontWeights.normal,
},
function: {
color: sample(ramps.yellow, 0.5),
weight: fontWeights.normal,
},
type: {
color: sample(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
constructor: {
color: sample(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
property: {
color: sample(ramps.blue, 0.6),
weight: fontWeights.normal,
},
enum: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
operator: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
string: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
number: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
boolean: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: sample(ramps.yellow, 0.5),
weight: fontWeights.bold,
},
emphasis: {
color: textColor.feature,
weight: fontWeights.normal,
},
"emphasis.strong": {
color: textColor.feature,
weight: fontWeights.bold,
},
linkUri: {
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
italic: true,
},
};
const shadow = withOpacity(
ramps
.neutral(isLight ? 7 : 0)
.darken()
.hex(),
blend
);
return {
name,
isLight,
backgroundColor,
borderColor,
textColor,
iconColor: textColor,
editor,
syntax,
player,
shadow,
ramps,
};
} }

120
styles/src/themes/common/colorScheme.ts
View File

@ -1,100 +1,100 @@
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
} }
// License name -> License text // License name -> License text
export interface Licenses { export interface Licenses {
[key: string]: string [key: string]: string
} }
// 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
} }

338
styles/src/themes/common/ramps.ts
View File

@ -1,210 +1,212 @@
import chroma, { Color, Scale } from "chroma-js"; import chroma, { Color, Scale } from "chroma-js"
import { import {
ColorScheme, ColorScheme,
Layer, Layer,
Player, Player,
RampSet, RampSet,
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(
name: string, name: string,
isLight: boolean, isLight: boolean,
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.
// 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
// theme so that we don't modify the passed in ramps. // theme so that we don't modify the passed in ramps.
// This combined with an error in the type definitions for chroma js means we have to cast the colors // This combined with an error in the type definitions for chroma js means we have to cast the colors
// function to any in order to get the colors back out from the original ramps. // 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())
} else {
for (var rampName in colorRamps) {
;(ramps as any)[rampName] = chroma.scale(
colorRamps[rampName].colors(100)
)
}
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100))
} }
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
} else { let lowest = lowestLayer(ramps)
for (var rampName in colorRamps) { let middle = middleLayer(ramps)
(ramps as any)[rampName] = chroma.scale(colorRamps[rampName].colors(100)); let highest = highestLayer(ramps)
let popoverShadow = {
blur: 4,
color: ramps
.neutral(isLight ? 7 : 0)
.darken()
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [1, 2],
} }
ramps.neutral = chroma.scale(colorRamps.neutral.colors(100));
}
let lowest = lowestLayer(ramps); let modalShadow = {
let middle = middleLayer(ramps); blur: 16,
let highest = highestLayer(ramps); color: ramps
.neutral(isLight ? 7 : 0)
.darken()
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [0, 2],
}
let popoverShadow = { let players = {
blur: 4, "0": player(ramps.blue),
color: ramps "1": player(ramps.green),
.neutral(isLight ? 7 : 0) "2": player(ramps.magenta),
.darken() "3": player(ramps.orange),
.alpha(0.2) "4": player(ramps.violet),
.hex(), // TODO used blend previously. Replace with something else "5": player(ramps.cyan),
offset: [1, 2], "6": player(ramps.red),
}; "7": player(ramps.yellow),
}
let modalShadow = { return {
blur: 16, name,
color: ramps isLight,
.neutral(isLight ? 7 : 0)
.darken()
.alpha(0.2)
.hex(), // TODO used blend previously. Replace with something else
offset: [0, 2],
};
let players = { ramps,
"0": player(ramps.blue),
"1": player(ramps.green),
"2": player(ramps.magenta),
"3": player(ramps.orange),
"4": player(ramps.violet),
"5": player(ramps.cyan),
"6": player(ramps.red),
"7": player(ramps.yellow),
};
return { lowest,
name, middle,
isLight, highest,
ramps, popoverShadow,
modalShadow,
lowest, players,
middle, }
highest,
popoverShadow,
modalShadow,
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 {
return { return {
base: buildStyleSet(ramps.neutral, 0.2, 1), base: buildStyleSet(ramps.neutral, 0.2, 1),
variant: buildStyleSet(ramps.neutral, 0.2, 0.7), variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1), on: buildStyleSet(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: buildStyleSet(ramps.blue, 0.1, 0.5),
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 {
return { return {
base: buildStyleSet(ramps.neutral, 0.1, 1), base: buildStyleSet(ramps.neutral, 0.1, 1),
variant: buildStyleSet(ramps.neutral, 0.1, 0.7), variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
on: buildStyleSet(ramps.neutral, 0, 1), on: buildStyleSet(ramps.neutral, 0, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: buildStyleSet(ramps.blue, 0.1, 0.5),
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 {
return { return {
base: buildStyleSet(ramps.neutral, 0, 1), base: buildStyleSet(ramps.neutral, 0, 1),
variant: buildStyleSet(ramps.neutral, 0, 0.7), variant: buildStyleSet(ramps.neutral, 0, 0.7),
on: buildStyleSet(ramps.neutral, 0.1, 1), on: buildStyleSet(ramps.neutral, 0.1, 1),
accent: buildStyleSet(ramps.blue, 0.1, 0.5), accent: buildStyleSet(ramps.blue, 0.1, 0.5),
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(
ramp: Scale, ramp: Scale,
backgroundBase: number, backgroundBase: number,
foregroundBase: number, foregroundBase: number,
step: number = 0.08 step: number = 0.08
): StyleSet { ): StyleSet {
let styleDefinitions = buildStyleDefinition( let styleDefinitions = buildStyleDefinition(
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()
}
}
function buildStyle(style: Styles): Style {
return {
background: colorString(styleDefinitions.background[style]),
border: colorString(styleDefinitions.border[style]),
foreground: colorString(styleDefinitions.foreground[style]),
}
} }
}
function buildStyle(style: Styles): Style {
return { return {
background: colorString(styleDefinitions.background[style]), default: buildStyle("default"),
border: colorString(styleDefinitions.border[style]), hovered: buildStyle("hovered"),
foreground: colorString(styleDefinitions.foreground[style]), pressed: buildStyle("pressed"),
}; active: buildStyle("active"),
} disabled: buildStyle("disabled"),
inverted: buildStyle("inverted"),
return { }
default: buildStyle("default"),
hovered: buildStyle("hovered"),
pressed: buildStyle("pressed"),
active: buildStyle("active"),
disabled: buildStyle("disabled"),
inverted: buildStyle("inverted"),
};
} }
function buildStyleDefinition( function buildStyleDefinition(
bgBase: number, bgBase: number,
fgBase: number, fgBase: number,
step: number = 0.08 step: number = 0.08
) { ) {
return { return {
background: { background: {
default: bgBase, default: bgBase,
hovered: bgBase + step, hovered: bgBase + step,
pressed: bgBase + step * 1.5, pressed: bgBase + step * 1.5,
active: bgBase + step * 2.2, active: bgBase + step * 2.2,
disabled: bgBase, disabled: bgBase,
inverted: fgBase + step * 6, inverted: fgBase + step * 6,
}, },
border: { border: {
default: bgBase + step * 1, default: bgBase + step * 1,
hovered: bgBase + step, hovered: bgBase + step,
pressed: bgBase + step, pressed: bgBase + step,
active: bgBase + step * 3, active: bgBase + step * 3,
disabled: bgBase + step * 0.5, disabled: bgBase + step * 0.5,
inverted: bgBase - step * 3, inverted: bgBase - step * 3,
}, },
foreground: { foreground: {
default: fgBase, default: fgBase,
hovered: fgBase, hovered: fgBase,
pressed: fgBase, pressed: fgBase,
active: fgBase + step * 6, active: fgBase + step * 6,
disabled: bgBase + step * 4, disabled: bgBase + step * 4,
inverted: bgBase + step * 2, inverted: bgBase + step * 2,
}, },
}; }
} }

288
styles/src/themes/common/theme.ts
View File

@ -1,165 +1,165 @@
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,
cursorOpacity?: number, cursorOpacity?: number,
selectionOpacity?: number, selectionOpacity?: number,
borderOpacity?: number borderOpacity?: number
) { ) {
return { return {
baseColor: color, baseColor: color,
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 }
} }

68
styles/src/themes/one-dark.ts
View File

@ -1,40 +1,42 @@
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
.scale([ .scale([
"#282c34", "#282c34",
"#353b45", "#353b45",
"#3e4451", "#3e4451",
"#545862", "#545862",
"#565c64", "#565c64",
"#abb2bf", "#abb2bf",
"#b6bdca", "#b6bdca",
"#c8ccd4", "#c8ccd4",
]) ])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma("#e06c75")), red: colorRamp(chroma("#e06c75")),
orange: colorRamp(chroma("#d19a66")), orange: colorRamp(chroma("#d19a66")),
yellow: colorRamp(chroma("#e5c07b")), yellow: colorRamp(chroma("#e5c07b")),
green: colorRamp(chroma("#98c379")), green: colorRamp(chroma("#98c379")),
cyan: colorRamp(chroma("#56b6c2")), cyan: colorRamp(chroma("#56b6c2")),
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:
url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui" "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
},
url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
} }

67
styles/src/themes/one-light.ts
View File

@ -1,39 +1,42 @@
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
"#090a0b", .scale([
"#202227", "#090a0b",
"#383a42", "#202227",
"#696c77", "#383a42",
"#a0a1a7", "#696c77",
"#e5e5e6", "#a0a1a7",
"#f0f0f1", "#e5e5e6",
"#fafafa", "#f0f0f1",
]) "#fafafa",
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), ])
.domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
red: colorRamp(chroma("#ca1243")), red: colorRamp(chroma("#ca1243")),
orange: colorRamp(chroma("#d75f00")), orange: colorRamp(chroma("#d75f00")),
yellow: colorRamp(chroma("#c18401")), yellow: colorRamp(chroma("#c18401")),
green: colorRamp(chroma("#50a14f")), green: colorRamp(chroma("#50a14f")),
cyan: colorRamp(chroma("#0184bc")), cyan: colorRamp(chroma("#0184bc")),
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:
url: "https://github.com/atom/atom/tree/master/packages/one-light-ui" "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
},
url: "https://github.com/atom/atom/tree/master/packages/one-light-ui",
} }

72
styles/src/themes/rose-pine-dawn.ts
View File

@ -1,41 +1,43 @@
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
.scale([ .scale([
"#575279", "#575279",
"#797593", "#797593",
"#9893A5", "#9893A5",
"#B5AFB8", "#B5AFB8",
"#D3CCCC", "#D3CCCC",
"#F2E9E1", "#F2E9E1",
"#FFFAF3", "#FFFAF3",
"#FAF4ED", "#FAF4ED",
]) ])
.domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]), .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#B4637A")), red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#D7827E")), orange: colorRamp(chroma("#D7827E")),
yellow: colorRamp(chroma("#EA9D34")), yellow: colorRamp(chroma("#EA9D34")),
green: colorRamp(chroma("#679967")), green: colorRamp(chroma("#679967")),
cyan: colorRamp(chroma("#286983")), cyan: colorRamp(chroma("#286983")),
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:
url: "https://github.com/edunfelt/base16-rose-pine-scheme" "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
} },
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

72
styles/src/themes/rose-pine-moon.ts
View File

@ -1,41 +1,43 @@
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
.scale([ .scale([
"#232136", "#232136",
"#2A273F", "#2A273F",
"#393552", "#393552",
"#3E3A53", "#3E3A53",
"#56526C", "#56526C",
"#6E6A86", "#6E6A86",
"#908CAA", "#908CAA",
"#E0DEF4", "#E0DEF4",
]) ])
.domain([0, 0.3, 0.55, 1]), .domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma("#EB6F92")), red: colorRamp(chroma("#EB6F92")),
orange: colorRamp(chroma("#EBBCBA")), orange: colorRamp(chroma("#EBBCBA")),
yellow: colorRamp(chroma("#F6C177")), yellow: colorRamp(chroma("#F6C177")),
green: colorRamp(chroma("#8DBD8D")), green: colorRamp(chroma("#8DBD8D")),
cyan: colorRamp(chroma("#409BBE")), cyan: colorRamp(chroma("#409BBE")),
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:
url: "https://github.com/edunfelt/base16-rose-pine-scheme" "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
} },
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

68
styles/src/themes/rose-pine.ts
View File

@ -1,39 +1,41 @@
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([
"#191724", "#191724",
"#1f1d2e", "#1f1d2e",
"#26233A", "#26233A",
"#3E3A53", "#3E3A53",
"#56526C", "#56526C",
"#6E6A86", "#6E6A86",
"#908CAA", "#908CAA",
"#E0DEF4", "#E0DEF4",
]), ]),
red: colorRamp(chroma("#EB6F92")), red: colorRamp(chroma("#EB6F92")),
orange: colorRamp(chroma("#EBBCBA")), orange: colorRamp(chroma("#EBBCBA")),
yellow: colorRamp(chroma("#F6C177")), yellow: colorRamp(chroma("#F6C177")),
green: colorRamp(chroma("#8DBD8D")), green: colorRamp(chroma("#8DBD8D")),
cyan: colorRamp(chroma("#409BBE")), cyan: colorRamp(chroma("#409BBE")),
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:
url: "https://github.com/edunfelt/base16-rose-pine-scheme" "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
} },
url: "https://github.com/edunfelt/base16-rose-pine-scheme",
}

71
styles/src/themes/sandcastle.ts
View File

@ -1,40 +1,41 @@
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([
"#282c34", "#282c34",
"#2c323b", "#2c323b",
"#3e4451", "#3e4451",
"#665c54", "#665c54",
"#928374", "#928374",
"#a89984", "#a89984",
"#d5c4a1", "#d5c4a1",
"#fdf4c1", "#fdf4c1",
]), ]),
red: colorRamp(chroma("#B4637A")), red: colorRamp(chroma("#B4637A")),
orange: colorRamp(chroma("#a07e3b")), orange: colorRamp(chroma("#a07e3b")),
yellow: colorRamp(chroma("#a07e3b")), yellow: colorRamp(chroma("#a07e3b")),
green: colorRamp(chroma("#83a598")), green: colorRamp(chroma("#83a598")),
cyan: colorRamp(chroma("#83a598")), cyan: colorRamp(chroma("#83a598")),
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 meta: Meta = {
name,
author: "gessig",
license: {
SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
license_checksum: "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc"
},
url: "https://github.com/gessig/base16-sandcastle-scheme"
} }
export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
name,
author: "gessig",
license: {
SPDX: "MIT",
https_url:
"https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
license_checksum:
"8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc",
},
url: "https://github.com/gessig/base16-sandcastle-scheme",
}

77
styles/src/themes/solarized.ts
View File

@ -1,43 +1,44 @@
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
.scale([ .scale([
"#002b36", "#002b36",
"#073642", "#073642",
"#586e75", "#586e75",
"#657b83", "#657b83",
"#839496", "#839496",
"#93a1a1", "#93a1a1",
"#eee8d5", "#eee8d5",
"#fdf6e3", "#fdf6e3",
]) ])
.domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]), .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#dc322f")), red: colorRamp(chroma("#dc322f")),
orange: colorRamp(chroma("#cb4b16")), orange: colorRamp(chroma("#cb4b16")),
yellow: colorRamp(chroma("#b58900")), yellow: colorRamp(chroma("#b58900")),
green: colorRamp(chroma("#859900")), green: colorRamp(chroma("#859900")),
cyan: colorRamp(chroma("#2aa198")), cyan: colorRamp(chroma("#2aa198")),
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 light = createColorScheme(`${name} Light`, true, ramps);
export const meta: Metadata = {
name,
author: "Ethan Schoonover",
license: {
SPDX: "MIT",
https_url: "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
license_checksum: "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6"
},
url: "https://github.com/altercation/solarized"
} }
export const dark = createColorScheme(`${name} Dark`, false, ramps)
export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Metadata = {
name,
author: "Ethan Schoonover",
license: {
SPDX: "MIT",
https_url:
"https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
license_checksum:
"494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6",
},
url: "https://github.com/altercation/solarized",
}

52
styles/src/themes/staff/abruzzo.ts
View File

@ -1,31 +1,31 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#1b0d05", "#1b0d05",
"#2c1e18", "#2c1e18",
"#654035", "#654035",
"#9d5e4a", "#9d5e4a",
"#b37354", "#b37354",
"#c1825a", "#c1825a",
"#dda66e", "#dda66e",
"#fbf3e2", "#fbf3e2",
]), ]),
red: colorRamp(chroma("#e594c4")), red: colorRamp(chroma("#e594c4")),
orange: colorRamp(chroma("#d9e87e")), orange: colorRamp(chroma("#d9e87e")),
yellow: colorRamp(chroma("#fd9d83")), yellow: colorRamp(chroma("#fd9d83")),
green: colorRamp(chroma("#96adf7")), green: colorRamp(chroma("#96adf7")),
cyan: colorRamp(chroma("#fc798f")), cyan: colorRamp(chroma("#fc798f")),
blue: colorRamp(chroma("#BCD0F5")), blue: colorRamp(chroma("#BCD0F5")),
violet: colorRamp(chroma("#dac5eb")), violet: colorRamp(chroma("#dac5eb")),
magenta: colorRamp(chroma("#c1a3ef")), magenta: colorRamp(chroma("#c1a3ef")),
}); })

59
styles/src/themes/staff/atelier-dune.ts
View File

@ -1,34 +1,35 @@
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([
"#20201d", "#20201d",
"#292824", "#292824",
"#6e6b5e", "#6e6b5e",
"#7d7a68", "#7d7a68",
"#999580", "#999580",
"#a6a28c", "#a6a28c",
"#e8e4cf", "#e8e4cf",
"#fefbec", "#fefbec",
]), ]),
red: colorRamp(chroma("#d73737")), red: colorRamp(chroma("#d73737")),
orange: colorRamp(chroma("#b65611")), orange: colorRamp(chroma("#b65611")),
yellow: colorRamp(chroma("#ae9513")), yellow: colorRamp(chroma("#ae9513")),
green: colorRamp(chroma("#60ac39")), green: colorRamp(chroma("#60ac39")),
cyan: colorRamp(chroma("#1fad83")), cyan: colorRamp(chroma("#1fad83")),
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)

93
styles/src/themes/staff/atelier-heath.ts
View File

@ -1,53 +1,54 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#1b181b", "#1b181b",
"#292329", "#292329",
"#695d69", "#695d69",
"#776977", "#776977",
"#9e8f9e", "#9e8f9e",
"#ab9bab", "#ab9bab",
"#d8cad8", "#d8cad8",
"#f7f3f7", "#f7f3f7",
]), ]),
red: colorRamp(chroma("#ca402b")), red: colorRamp(chroma("#ca402b")),
orange: colorRamp(chroma("#a65926")), orange: colorRamp(chroma("#a65926")),
yellow: colorRamp(chroma("#bb8a35")), yellow: colorRamp(chroma("#bb8a35")),
green: colorRamp(chroma("#918b3b")), green: colorRamp(chroma("#918b3b")),
cyan: colorRamp(chroma("#159393")), cyan: colorRamp(chroma("#159393")),
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([
"#161b1d", "#161b1d",
"#1f292e", "#1f292e",
"#516d7b", "#516d7b",
"#5a7b8c", "#5a7b8c",
"#7195a8", "#7195a8",
"#7ea2b4", "#7ea2b4",
"#c1e4f6", "#c1e4f6",
"#ebf8ff", "#ebf8ff",
]), ]),
red: colorRamp(chroma("#d22d72")), red: colorRamp(chroma("#d22d72")),
orange: colorRamp(chroma("#935c25")), orange: colorRamp(chroma("#935c25")),
yellow: colorRamp(chroma("#8a8a0f")), yellow: colorRamp(chroma("#8a8a0f")),
green: colorRamp(chroma("#568c3b")), green: colorRamp(chroma("#568c3b")),
cyan: colorRamp(chroma("#2d8f6f")), cyan: colorRamp(chroma("#2d8f6f")),
blue: colorRamp(chroma("#257fad")), blue: colorRamp(chroma("#257fad")),
violet: colorRamp(chroma("#6b6bb8")), violet: colorRamp(chroma("#6b6bb8")),
magenta: colorRamp(chroma("#b72dd2")), magenta: colorRamp(chroma("#b72dd2")),
}); })

59
styles/src/themes/staff/atelier-seaside.ts
View File

@ -1,34 +1,35 @@
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([
"#131513", "#131513",
"#242924", "#242924",
"#5e6e5e", "#5e6e5e",
"#687d68", "#687d68",
"#809980", "#809980",
"#8ca68c", "#8ca68c",
"#cfe8cf", "#cfe8cf",
"#f4fbf4", "#f4fbf4",
]), ]),
red: colorRamp(chroma("#e6193c")), red: colorRamp(chroma("#e6193c")),
orange: colorRamp(chroma("#87711d")), orange: colorRamp(chroma("#87711d")),
yellow: colorRamp(chroma("#98981b")), yellow: colorRamp(chroma("#98981b")),
green: colorRamp(chroma("#29a329")), green: colorRamp(chroma("#29a329")),
cyan: colorRamp(chroma("#1999b3")), cyan: colorRamp(chroma("#1999b3")),
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)

52
styles/src/themes/staff/ayu-mirage.ts
View File

@ -1,31 +1,31 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#171B24", "#171B24",
"#1F2430", "#1F2430",
"#242936", "#242936",
"#707A8C", "#707A8C",
"#8A9199", "#8A9199",
"#CCCAC2", "#CCCAC2",
"#D9D7CE", "#D9D7CE",
"#F3F4F5", "#F3F4F5",
]), ]),
red: colorRamp(chroma("#F28779")), red: colorRamp(chroma("#F28779")),
orange: colorRamp(chroma("#FFAD66")), orange: colorRamp(chroma("#FFAD66")),
yellow: colorRamp(chroma("#FFD173")), yellow: colorRamp(chroma("#FFD173")),
green: colorRamp(chroma("#D5FF80")), green: colorRamp(chroma("#D5FF80")),
cyan: colorRamp(chroma("#95E6CB")), cyan: colorRamp(chroma("#95E6CB")),
blue: colorRamp(chroma("#5CCFE6")), blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")), violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")), magenta: colorRamp(chroma("#F29E74")),
}); })

90
styles/src/themes/staff/ayu.ts
View File

@ -1,52 +1,52 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#0F1419", "#0F1419",
"#131721", "#131721",
"#272D38", "#272D38",
"#3E4B59", "#3E4B59",
"#BFBDB6", "#BFBDB6",
"#E6E1CF", "#E6E1CF",
"#E6E1CF", "#E6E1CF",
"#F3F4F5", "#F3F4F5",
]), ]),
red: colorRamp(chroma("#F07178")), red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FF8F40")), orange: colorRamp(chroma("#FF8F40")),
yellow: colorRamp(chroma("#FFB454")), yellow: colorRamp(chroma("#FFB454")),
green: colorRamp(chroma("#B8CC52")), green: colorRamp(chroma("#B8CC52")),
cyan: colorRamp(chroma("#95E6CB")), cyan: colorRamp(chroma("#95E6CB")),
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([
"#1A1F29", "#1A1F29",
"#242936", "#242936",
"#5C6773", "#5C6773",
"#828C99", "#828C99",
"#ABB0B6", "#ABB0B6",
"#F8F9FA", "#F8F9FA",
"#F3F4F5", "#F3F4F5",
"#FAFAFA", "#FAFAFA",
]), ]),
red: colorRamp(chroma("#F07178")), red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FA8D3E")), orange: colorRamp(chroma("#FA8D3E")),
yellow: colorRamp(chroma("#F2AE49")), yellow: colorRamp(chroma("#F2AE49")),
green: colorRamp(chroma("#86B300")), green: colorRamp(chroma("#86B300")),
cyan: colorRamp(chroma("#4CBF99")), cyan: colorRamp(chroma("#4CBF99")),
blue: colorRamp(chroma("#36A3D9")), blue: colorRamp(chroma("#36A3D9")),
violet: colorRamp(chroma("#A37ACC")), violet: colorRamp(chroma("#A37ACC")),
magenta: colorRamp(chroma("#E6BA7E")), magenta: colorRamp(chroma("#E6BA7E")),
}); })

128
styles/src/themes/staff/brushtrees.ts
View File

@ -1,73 +1,73 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#485867", "#485867",
"#5A6D7A", "#5A6D7A",
"#6D828E", "#6D828E",
"#8299A1", "#8299A1",
"#98AFB5", "#98AFB5",
"#B0C5C8", "#B0C5C8",
"#C9DBDC", "#C9DBDC",
"#E3EFEF", "#E3EFEF",
]), ]),
red: colorRamp(chroma("#b38686")), red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")), orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")), yellow: colorRamp(chroma("#aab386")),
green: colorRamp(chroma("#87b386")), green: colorRamp(chroma("#87b386")),
cyan: colorRamp(chroma("#86b3b3")), cyan: colorRamp(chroma("#86b3b3")),
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([
"#485867", "#485867",
"#5A6D7A", "#5A6D7A",
"#6D828E", "#6D828E",
"#8299A1", "#8299A1",
"#98AFB5", "#98AFB5",
"#B0C5C8", "#B0C5C8",
"#C9DBDC", "#C9DBDC",
"#E3EFEF", "#E3EFEF",
]), ]),
red: colorRamp(chroma("#F28779")), red: colorRamp(chroma("#F28779")),
orange: colorRamp(chroma("#FFAD66")), orange: colorRamp(chroma("#FFAD66")),
yellow: colorRamp(chroma("#FFD173")), yellow: colorRamp(chroma("#FFD173")),
green: colorRamp(chroma("#D5FF80")), green: colorRamp(chroma("#D5FF80")),
cyan: colorRamp(chroma("#95E6CB")), cyan: colorRamp(chroma("#95E6CB")),
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([
"#1A1F29", "#1A1F29",
"#242936", "#242936",
"#5C6773", "#5C6773",
"#828C99", "#828C99",
"#ABB0B6", "#ABB0B6",
"#F8F9FA", "#F8F9FA",
"#F3F4F5", "#F3F4F5",
"#FAFAFA", "#FAFAFA",
]), ]),
red: colorRamp(chroma("#b38686")), red: colorRamp(chroma("#b38686")),
orange: colorRamp(chroma("#d8bba2")), orange: colorRamp(chroma("#d8bba2")),
yellow: colorRamp(chroma("#aab386")), yellow: colorRamp(chroma("#aab386")),
green: colorRamp(chroma("#87b386")), green: colorRamp(chroma("#87b386")),
cyan: colorRamp(chroma("#86b3b3")), cyan: colorRamp(chroma("#86b3b3")),
blue: colorRamp(chroma("#868cb3")), blue: colorRamp(chroma("#868cb3")),
violet: colorRamp(chroma("#b386b2")), violet: colorRamp(chroma("#b386b2")),
magenta: colorRamp(chroma("#b39f9f")), magenta: colorRamp(chroma("#b39f9f")),
}); })

54
styles/src/themes/staff/dracula.ts
View File

@ -1,31 +1,31 @@
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([
"#282A36", "#282A36",
"#3a3c4e", "#3a3c4e",
"#4d4f68", "#4d4f68",
"#626483", "#626483",
"#62d6e8", "#62d6e8",
"#e9e9f4", "#e9e9f4",
"#f1f2f8", "#f1f2f8",
"#f8f8f2", "#f8f8f2",
]), ]),
red: colorRamp(chroma("#ff5555")), red: colorRamp(chroma("#ff5555")),
orange: colorRamp(chroma("#ffb86c")), orange: colorRamp(chroma("#ffb86c")),
yellow: colorRamp(chroma("#f1fa8c")), yellow: colorRamp(chroma("#f1fa8c")),
green: colorRamp(chroma("#50fa7b")), green: colorRamp(chroma("#50fa7b")),
cyan: colorRamp(chroma("#8be9fd")), cyan: colorRamp(chroma("#8be9fd")),
blue: colorRamp(chroma("#6272a4")), blue: colorRamp(chroma("#6272a4")),
violet: colorRamp(chroma("#bd93f9")), violet: colorRamp(chroma("#bd93f9")),
magenta: colorRamp(chroma("#00f769")), magenta: colorRamp(chroma("#00f769")),
}); })

264
styles/src/themes/staff/gruvbox-medium.ts
View File

@ -1,138 +1,138 @@
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([
"#282828", "#282828",
"#3c3836", "#3c3836",
"#504945", "#504945",
"#665c54", "#665c54",
"#7C6F64", "#7C6F64",
"#928374", "#928374",
"#A89984", "#A89984",
"#BDAE93", "#BDAE93",
"#D5C4A1", "#D5C4A1",
"#EBDBB2", "#EBDBB2",
"#FBF1C7", "#FBF1C7",
]), ]),
red: chroma.scale([ red: chroma.scale([
"#4D150F", "#4D150F",
"#7D241A", "#7D241A",
"#A31C17", "#A31C17",
"#CC241D", "#CC241D",
"#C83A29", "#C83A29",
"#FB4934", "#FB4934",
"#F06D61", "#F06D61",
"#E6928E", "#E6928E",
"#FFFFFF", "#FFFFFF",
]), ]),
orange: chroma.scale([ orange: chroma.scale([
"#462307", "#462307",
"#7F400C", "#7F400C",
"#AB4A0B", "#AB4A0B",
"#D65D0E", "#D65D0E",
"#CB6614", "#CB6614",
"#FE8019", "#FE8019",
"#F49750", "#F49750",
"#EBAE87", "#EBAE87",
"#FFFFFF", "#FFFFFF",
]), ]),
yellow: chroma.scale([ yellow: chroma.scale([
"#3D2C05", "#3D2C05",
"#7D5E17", "#7D5E17",
"#AC7A1A", "#AC7A1A",
"#D79921", "#D79921",
"#E8AB28", "#E8AB28",
"#FABD2F", "#FABD2F",
"#F2C45F", "#F2C45F",
"#EBCC90", "#EBCC90",
"#FFFFFF", "#FFFFFF",
]), ]),
green: chroma.scale([ green: chroma.scale([
"#32330A", "#32330A",
"#5C5D13", "#5C5D13",
"#797814", "#797814",
"#98971A", "#98971A",
"#93951E", "#93951E",
"#B8BB26", "#B8BB26",
"#C2C359", "#C2C359",
"#CCCB8D", "#CCCB8D",
"#FFFFFF", "#FFFFFF",
]), ]),
cyan: chroma.scale([ cyan: chroma.scale([
"#283D20", "#283D20",
"#47603E", "#47603E",
"#537D54", "#537D54",
"#689D6A", "#689D6A",
"#719963", "#719963",
"#8EC07C", "#8EC07C",
"#A1C798", "#A1C798",
"#B4CEB5", "#B4CEB5",
"#FFFFFF", "#FFFFFF",
]), ]),
blue: chroma.scale([ blue: chroma.scale([
"#103738", "#103738",
"#214C4D", "#214C4D",
"#376A6C", "#376A6C",
"#458588", "#458588",
"#688479", "#688479",
"#83A598", "#83A598",
"#92B3AE", "#92B3AE",
"#A2C2C4", "#A2C2C4",
"#FFFFFF", "#FFFFFF",
]), ]),
violet: chroma.scale([ violet: chroma.scale([
"#392228", "#392228",
"#69434D", "#69434D",
"#8D4E6B", "#8D4E6B",
"#B16286", "#B16286",
"#A86B7C", "#A86B7C",
"#D3869B", "#D3869B",
"#D59BAF", "#D59BAF",
"#D8B1C3", "#D8B1C3",
"#FFFFFF", "#FFFFFF",
]), ]),
magenta: chroma.scale([ magenta: chroma.scale([
"#48402C", "#48402C",
"#756D59", "#756D59",
"#867A69", "#867A69",
"#A89984", "#A89984",
"#BCAF8E", "#BCAF8E",
"#EBDBB2", "#EBDBB2",
"#DFD3BA", "#DFD3BA",
"#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([
"#282828", "#282828",
"#3c3836", "#3c3836",
"#504945", "#504945",
"#665c54", "#665c54",
"#7C6F64", "#7C6F64",
"#928374", "#928374",
"#A89984", "#A89984",
"#BDAE93", "#BDAE93",
"#D5C4A1", "#D5C4A1",
"#EBDBB2", "#EBDBB2",
"#FBF1C7", "#FBF1C7",
]), ]),
red: colorRamp(chroma("#9d0006")), red: colorRamp(chroma("#9d0006")),
orange: colorRamp(chroma("#af3a03")), orange: colorRamp(chroma("#af3a03")),
yellow: colorRamp(chroma("#b57614")), yellow: colorRamp(chroma("#b57614")),
green: colorRamp(chroma("#79740e")), green: colorRamp(chroma("#79740e")),
cyan: colorRamp(chroma("#427b58")), cyan: colorRamp(chroma("#427b58")),
blue: colorRamp(chroma("#076678")), blue: colorRamp(chroma("#076678")),
violet: colorRamp(chroma("#8f3f71")), violet: colorRamp(chroma("#8f3f71")),
magenta: colorRamp(chroma("#d65d0e")), magenta: colorRamp(chroma("#d65d0e")),
}); })

54
styles/src/themes/staff/monokai.ts
View File

@ -1,32 +1,32 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#272822", "#272822",
"#383830", "#383830",
"#49483e", "#49483e",
"#75715e", "#75715e",
"#a59f85", "#a59f85",
"#f8f8f2", "#f8f8f2",
"#f5f4f1", "#f5f4f1",
"#f9f8f5", "#f9f8f5",
]), ]),
red: colorRamp(chroma("#f92672")), red: colorRamp(chroma("#f92672")),
orange: colorRamp(chroma("#fd971f")), orange: colorRamp(chroma("#fd971f")),
yellow: colorRamp(chroma("#f4bf75")), yellow: colorRamp(chroma("#f4bf75")),
green: colorRamp(chroma("#a6e22e")), green: colorRamp(chroma("#a6e22e")),
cyan: colorRamp(chroma("#a1efe4")), cyan: colorRamp(chroma("#a1efe4")),
blue: colorRamp(chroma("#66d9ef")), blue: colorRamp(chroma("#66d9ef")),
violet: colorRamp(chroma("#ae81ff")), violet: colorRamp(chroma("#ae81ff")),
magenta: colorRamp(chroma("#cc6633")), magenta: colorRamp(chroma("#cc6633")),
}); })

54
styles/src/themes/staff/nord.ts
View File

@ -1,32 +1,32 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#2E3440", "#2E3440",
"#3B4252", "#3B4252",
"#434C5E", "#434C5E",
"#4C566A", "#4C566A",
"#D8DEE9", "#D8DEE9",
"#E5E9F0", "#E5E9F0",
"#ECEFF4", "#ECEFF4",
"#8FBCBB", "#8FBCBB",
]), ]),
red: colorRamp(chroma("#88C0D0")), red: colorRamp(chroma("#88C0D0")),
orange: colorRamp(chroma("#81A1C1")), orange: colorRamp(chroma("#81A1C1")),
yellow: colorRamp(chroma("#5E81AC")), yellow: colorRamp(chroma("#5E81AC")),
green: colorRamp(chroma("#BF616A")), green: colorRamp(chroma("#BF616A")),
cyan: colorRamp(chroma("#D08770")), cyan: colorRamp(chroma("#D08770")),
blue: colorRamp(chroma("#EBCB8B")), blue: colorRamp(chroma("#EBCB8B")),
violet: colorRamp(chroma("#A3BE8C")), violet: colorRamp(chroma("#A3BE8C")),
magenta: colorRamp(chroma("#B48EAD")), magenta: colorRamp(chroma("#B48EAD")),
}); })

54
styles/src/themes/staff/seti-ui.ts
View File

@ -1,32 +1,32 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#151718", "#151718",
"#262B30", "#262B30",
"#1E2326", "#1E2326",
"#41535B", "#41535B",
"#43a5d5", "#43a5d5",
"#d6d6d6", "#d6d6d6",
"#eeeeee", "#eeeeee",
"#ffffff", "#ffffff",
]), ]),
red: colorRamp(chroma("#Cd3f45")), red: colorRamp(chroma("#Cd3f45")),
orange: colorRamp(chroma("#db7b55")), orange: colorRamp(chroma("#db7b55")),
yellow: colorRamp(chroma("#e6cd69")), yellow: colorRamp(chroma("#e6cd69")),
green: colorRamp(chroma("#9fca56")), green: colorRamp(chroma("#9fca56")),
cyan: colorRamp(chroma("#55dbbe")), cyan: colorRamp(chroma("#55dbbe")),
blue: colorRamp(chroma("#55b5db")), blue: colorRamp(chroma("#55b5db")),
violet: colorRamp(chroma("#a074c4")), violet: colorRamp(chroma("#a074c4")),
magenta: colorRamp(chroma("#8a553f")), magenta: colorRamp(chroma("#8a553f")),
}); })

54
styles/src/themes/staff/tokyo-night-storm.ts
View File

@ -1,32 +1,32 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#24283B", "#24283B",
"#16161E", "#16161E",
"#343A52", "#343A52",
"#444B6A", "#444B6A",
"#787C99", "#787C99",
"#A9B1D6", "#A9B1D6",
"#CBCCD1", "#CBCCD1",
"#D5D6DB", "#D5D6DB",
]), ]),
red: colorRamp(chroma("#C0CAF5")), red: colorRamp(chroma("#C0CAF5")),
orange: colorRamp(chroma("#A9B1D6")), orange: colorRamp(chroma("#A9B1D6")),
yellow: colorRamp(chroma("#0DB9D7")), yellow: colorRamp(chroma("#0DB9D7")),
green: colorRamp(chroma("#9ECE6A")), green: colorRamp(chroma("#9ECE6A")),
cyan: colorRamp(chroma("#B4F9F8")), cyan: colorRamp(chroma("#B4F9F8")),
blue: colorRamp(chroma("#2AC3DE")), blue: colorRamp(chroma("#2AC3DE")),
violet: colorRamp(chroma("#BB9AF7")), violet: colorRamp(chroma("#BB9AF7")),
magenta: colorRamp(chroma("#F7768E")), magenta: colorRamp(chroma("#F7768E")),
}); })

92
styles/src/themes/staff/tokyo-night.ts
View File

@ -1,53 +1,53 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#1A1B26", "#1A1B26",
"#16161E", "#16161E",
"#2F3549", "#2F3549",
"#444B6A", "#444B6A",
"#787C99", "#787C99",
"#A9B1D6", "#A9B1D6",
"#CBCCD1", "#CBCCD1",
"#D5D6DB", "#D5D6DB",
]), ]),
red: colorRamp(chroma("#C0CAF5")), red: colorRamp(chroma("#C0CAF5")),
orange: colorRamp(chroma("#A9B1D6")), orange: colorRamp(chroma("#A9B1D6")),
yellow: colorRamp(chroma("#0DB9D7")), yellow: colorRamp(chroma("#0DB9D7")),
green: colorRamp(chroma("#9ECE6A")), green: colorRamp(chroma("#9ECE6A")),
cyan: colorRamp(chroma("#B4F9F8")), cyan: colorRamp(chroma("#B4F9F8")),
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([
"#1A1B26", "#1A1B26",
"#1A1B26", "#1A1B26",
"#343B59", "#343B59",
"#4C505E", "#4C505E",
"#9699A3", "#9699A3",
"#DFE0E5", "#DFE0E5",
"#CBCCD1", "#CBCCD1",
"#D5D6DB", "#D5D6DB",
]), ]),
red: colorRamp(chroma("#343B58")), red: colorRamp(chroma("#343B58")),
orange: colorRamp(chroma("#965027")), orange: colorRamp(chroma("#965027")),
yellow: colorRamp(chroma("#166775")), yellow: colorRamp(chroma("#166775")),
green: colorRamp(chroma("#485E30")), green: colorRamp(chroma("#485E30")),
cyan: colorRamp(chroma("#3E6968")), cyan: colorRamp(chroma("#3E6968")),
blue: colorRamp(chroma("#34548A")), blue: colorRamp(chroma("#34548A")),
violet: colorRamp(chroma("#5A4A78")), violet: colorRamp(chroma("#5A4A78")),
magenta: colorRamp(chroma("#8C4351")), magenta: colorRamp(chroma("#8C4351")),
}); })

58
styles/src/themes/staff/zed-pro.ts
View File

@ -1,36 +1,36 @@
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
.scale([ .scale([
"#101010", "#101010",
"#1C1C1C", "#1C1C1C",
"#212121", "#212121",
"#2D2D2D", "#2D2D2D",
"#B9B9B9", "#B9B9B9",
"#DADADA", "#DADADA",
"#E6E6E6", "#E6E6E6",
"#FFFFFF", "#FFFFFF",
]) ])
.domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]), .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma("#DC604F")), red: colorRamp(chroma("#DC604F")),
orange: colorRamp(chroma("#DE782F")), orange: colorRamp(chroma("#DE782F")),
yellow: colorRamp(chroma("#E0B750")), yellow: colorRamp(chroma("#E0B750")),
green: colorRamp(chroma("#2A643D")), green: colorRamp(chroma("#2A643D")),
cyan: colorRamp(chroma("#215050")), cyan: colorRamp(chroma("#215050")),
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)

54
styles/src/themes/staff/zenburn.ts
View File

@ -1,32 +1,32 @@
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, {
neutral: chroma.scale([ neutral: chroma.scale([
"#383838", "#383838",
"#404040", "#404040",
"#606060", "#606060",
"#6f6f6f", "#6f6f6f",
"#808080", "#808080",
"#dcdccc", "#dcdccc",
"#c0c0c0", "#c0c0c0",
"#ffffff", "#ffffff",
]), ]),
red: colorRamp(chroma("#dca3a3")), red: colorRamp(chroma("#dca3a3")),
orange: colorRamp(chroma("#dfaf8f")), orange: colorRamp(chroma("#dfaf8f")),
yellow: colorRamp(chroma("#e0cf9f")), yellow: colorRamp(chroma("#e0cf9f")),
green: colorRamp(chroma("#5f7f5f")), green: colorRamp(chroma("#5f7f5f")),
cyan: colorRamp(chroma("#93e0e3")), cyan: colorRamp(chroma("#93e0e3")),
blue: colorRamp(chroma("#7cb8bb")), blue: colorRamp(chroma("#7cb8bb")),
violet: colorRamp(chroma("#dc8cc3")), violet: colorRamp(chroma("#dc8cc3")),
magenta: colorRamp(chroma("#000000")), magenta: colorRamp(chroma("#000000")),
}); })

72
styles/src/themes/summercamp.ts
View File

@ -1,40 +1,42 @@
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
.scale([ .scale([
"#1c1810", "#1c1810",
"#2a261c", "#2a261c",
"#3a3527", "#3a3527",
"#3a3527", "#3a3527",
"#5f5b45", "#5f5b45",
"#736e55", "#736e55",
"#bab696", "#bab696",
"#f8f5de", "#f8f5de",
]) ])
.domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]), .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
red: colorRamp(chroma("#e35142")), red: colorRamp(chroma("#e35142")),
orange: colorRamp(chroma("#fba11b")), orange: colorRamp(chroma("#fba11b")),
yellow: colorRamp(chroma("#f2ff27")), yellow: colorRamp(chroma("#f2ff27")),
green: colorRamp(chroma("#5ceb5a")), green: colorRamp(chroma("#5ceb5a")),
cyan: colorRamp(chroma("#5aebbc")), cyan: colorRamp(chroma("#5aebbc")),
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()
} }

38
styles/src/utils/snakeCase.ts
View File

@ -1,35 +1,35 @@
import { snakeCase } from "case-anything"; import { snakeCase } from "case-anything"
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case // https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
// Typescript magic to convert any string from camelCase to snake_case at compile time // Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string 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 {
return snakeCaseTree(value)
}
} else { } else {
return snakeCaseTree(value); return value
} }
} else {
return value;
}
} }

20
styles/tsconfig.json
View File

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