Merge branch 'main' into lsp-log-messages
This commit is contained in:
@@ -30,17 +30,19 @@ function generateLicenseFile(themes: ThemeConfig[]) {
|
||||
checkLicenses(themes)
|
||||
for (const theme of themes) {
|
||||
const licenseText = fs.readFileSync(theme.licenseFile).toString()
|
||||
writeLicense(theme.name, theme.licenseUrl, licenseText)
|
||||
writeLicense(theme.name, licenseText, theme.licenseUrl)
|
||||
}
|
||||
}
|
||||
|
||||
function writeLicense(
|
||||
themeName: string,
|
||||
licenseUrl: string,
|
||||
licenseText: String
|
||||
licenseText: string,
|
||||
licenseUrl?: string
|
||||
) {
|
||||
process.stdout.write(
|
||||
`## [${themeName}](${licenseUrl})\n\n${licenseText}\n********************************************************************************\n\n`
|
||||
licenseUrl
|
||||
? `## [${themeName}](${licenseUrl})\n\n${licenseText}\n********************************************************************************\n\n`
|
||||
: `## ${themeName}\n\n${licenseText}\n********************************************************************************\n\n`
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as fs from "fs"
|
||||
import { tmpdir } from "os"
|
||||
import * as path from "path"
|
||||
import app from "./styleTree/app"
|
||||
import { ColorScheme, createColorScheme } from "./themes/common/colorScheme"
|
||||
import { ColorScheme, createColorScheme } from "./theme/colorScheme"
|
||||
import snakeCase from "./utils/snakeCase"
|
||||
import { themes } from "./themes"
|
||||
|
||||
@@ -35,7 +35,9 @@ function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme))
|
||||
const colorSchemes: ColorScheme[] = themes.map((theme) =>
|
||||
createColorScheme(theme)
|
||||
)
|
||||
|
||||
// Write new themes to theme directory
|
||||
writeThemes(colorSchemes, `${assetsDirectory}/themes`)
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import * as fs from "fs"
|
||||
import * as path from "path"
|
||||
import { ColorScheme, createColorScheme } from "./common"
|
||||
import { themes } from "./themes"
|
||||
import { slugify } from "./utils/slugify"
|
||||
import { colorSchemeTokens } from "./theme/tokens/colorScheme"
|
||||
|
||||
const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
|
||||
|
||||
function clearTokens(tokensDirectory: string) {
|
||||
if (!fs.existsSync(tokensDirectory)) {
|
||||
fs.mkdirSync(tokensDirectory, { recursive: true })
|
||||
} else {
|
||||
for (const file of fs.readdirSync(tokensDirectory)) {
|
||||
if (file.endsWith(".json")) {
|
||||
fs.unlinkSync(path.join(tokensDirectory, file))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) {
|
||||
clearTokens(tokensDirectory)
|
||||
|
||||
for (const colorScheme of colorSchemes) {
|
||||
const fileName = slugify(colorScheme.name)
|
||||
const tokens = colorSchemeTokens(colorScheme)
|
||||
const tokensJSON = JSON.stringify(tokens, null, 2)
|
||||
const outPath = path.join(tokensDirectory, `${fileName}.json`)
|
||||
fs.writeFileSync(outPath, tokensJSON)
|
||||
console.log(`- ${outPath} created`)
|
||||
}
|
||||
}
|
||||
|
||||
const colorSchemes: ColorScheme[] = themes.map((theme) =>
|
||||
createColorScheme(theme)
|
||||
)
|
||||
|
||||
writeTokens(colorSchemes, TOKENS_DIRECTORY)
|
||||
@@ -1,5 +1,5 @@
|
||||
import chroma from "chroma-js"
|
||||
export * from "./themes/common"
|
||||
export * from "./theme"
|
||||
export { chroma }
|
||||
|
||||
export const fontFamilies = {
|
||||
@@ -27,7 +27,7 @@ export type FontWeight =
|
||||
| "bold"
|
||||
| "extra_bold"
|
||||
| "black"
|
||||
|
||||
|
||||
export const fontWeights: { [key: string]: FontWeight } = {
|
||||
thin: "thin",
|
||||
extra_light: "extra_light",
|
||||
|
||||
@@ -19,7 +19,7 @@ import terminal from "./terminal"
|
||||
import contactList from "./contactList"
|
||||
import lspLogMenu from "./lspLogMenu"
|
||||
import incomingCallNotification from "./incomingCallNotification"
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import feedback from "./feedback"
|
||||
import welcome from "./welcome"
|
||||
import copilot from "./copilot"
|
||||
|
||||
@@ -1,85 +1,85 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
import editor from "./editor"
|
||||
|
||||
export default function assistant(colorScheme: ColorScheme) {
|
||||
const layer = colorScheme.highest;
|
||||
const layer = colorScheme.highest
|
||||
return {
|
||||
container: {
|
||||
background: editor(colorScheme).background,
|
||||
padding: { left: 12 }
|
||||
},
|
||||
header: {
|
||||
border: border(layer, "default", { bottom: true, top: true }),
|
||||
margin: { bottom: 6, top: 6 },
|
||||
background: editor(colorScheme).background
|
||||
},
|
||||
userSender: {
|
||||
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
assistantSender: {
|
||||
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
systemSender: {
|
||||
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
sentAt: {
|
||||
margin: { top: 2, left: 8 },
|
||||
...text(layer, "sans", "default", { size: "2xs" }),
|
||||
},
|
||||
modelInfoContainer: {
|
||||
margin: { right: 16, top: 4 },
|
||||
},
|
||||
model: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
hover: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
}
|
||||
},
|
||||
remainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
margin: { left: 4 },
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "positive", { size: "xs" }),
|
||||
},
|
||||
noRemainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
margin: { left: 4 },
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "negative", { size: "xs" }),
|
||||
},
|
||||
errorIcon: {
|
||||
margin: { left: 8 },
|
||||
color: foreground(layer, "negative"),
|
||||
width: 12,
|
||||
},
|
||||
apiKeyEditor: {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "mono", "on"),
|
||||
placeholderText: text(layer, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: colorScheme.players[0],
|
||||
border: border(layer, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
},
|
||||
apiKeyPrompt: {
|
||||
padding: 10,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
}
|
||||
container: {
|
||||
background: editor(colorScheme).background,
|
||||
padding: { left: 12 },
|
||||
},
|
||||
header: {
|
||||
border: border(layer, "default", { bottom: true, top: true }),
|
||||
margin: { bottom: 6, top: 6 },
|
||||
background: editor(colorScheme).background,
|
||||
},
|
||||
userSender: {
|
||||
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
assistantSender: {
|
||||
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
systemSender: {
|
||||
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
|
||||
},
|
||||
sentAt: {
|
||||
margin: { top: 2, left: 8 },
|
||||
...text(layer, "sans", "default", { size: "2xs" }),
|
||||
},
|
||||
modelInfoContainer: {
|
||||
margin: { right: 16, top: 4 },
|
||||
},
|
||||
model: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
hover: {
|
||||
background: background(layer, "on", "hovered"),
|
||||
},
|
||||
},
|
||||
remainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
margin: { left: 4 },
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "positive", { size: "xs" }),
|
||||
},
|
||||
noRemainingTokens: {
|
||||
background: background(layer, "on"),
|
||||
border: border(layer, "on", { overlay: true }),
|
||||
padding: 4,
|
||||
margin: { left: 4 },
|
||||
cornerRadius: 4,
|
||||
...text(layer, "sans", "negative", { size: "xs" }),
|
||||
},
|
||||
errorIcon: {
|
||||
margin: { left: 8 },
|
||||
color: foreground(layer, "negative"),
|
||||
width: 12,
|
||||
},
|
||||
apiKeyEditor: {
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
text: text(layer, "mono", "on"),
|
||||
placeholderText: text(layer, "mono", "on", "disabled", {
|
||||
size: "xs",
|
||||
}),
|
||||
selection: colorScheme.players[0],
|
||||
border: border(layer, "on"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 4,
|
||||
},
|
||||
},
|
||||
apiKeyPrompt: {
|
||||
padding: 10,
|
||||
...text(layer, "sans", "default", { size: "xs" }),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, background } from "./components"
|
||||
|
||||
export default function commandPalette(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { fontFamilies, fontSizes, FontWeight } from "../common"
|
||||
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
|
||||
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
|
||||
|
||||
function isStyleSet(key: any): key is StyleSets {
|
||||
return [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import picker from "./picker"
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function contactFinder(colorScheme: ColorScheme): any {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, foreground, text } from "./components"
|
||||
|
||||
export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, foreground, text } from "./components"
|
||||
|
||||
const avatarSize = 12
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function contactsPopover(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, text } from "./components"
|
||||
|
||||
export default function contextMenu(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, svg, text } from "./components"
|
||||
|
||||
export default function copilot(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { ColorScheme, Layer, StyleSets } from "../theme/colorScheme"
|
||||
import { background, border, borderColor, foreground, text } from "./components"
|
||||
import hoverPopover from "./hoverPopover"
|
||||
|
||||
import { buildSyntax } from "../themes/common/syntax"
|
||||
import { buildSyntax } from "../theme/syntax"
|
||||
|
||||
export default function editor(colorScheme: ColorScheme) {
|
||||
const { isLight } = colorScheme
|
||||
@@ -186,7 +186,10 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
},
|
||||
},
|
||||
source: {
|
||||
text: text(colorScheme.middle, "sans", { size: "sm", weight: "bold", }),
|
||||
text: text(colorScheme.middle, "sans", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
highlightText: text(colorScheme.middle, "sans", {
|
||||
@@ -250,7 +253,7 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
right: true,
|
||||
left: true,
|
||||
bottom: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
git: {
|
||||
deleted: isLight
|
||||
@@ -262,7 +265,7 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
inserted: isLight
|
||||
? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8)
|
||||
: withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8),
|
||||
}
|
||||
},
|
||||
},
|
||||
compositionMark: {
|
||||
underline: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function feedback(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function HoverPopover(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function incomingCallNotification(
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function picker(colorScheme: ColorScheme): any {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, text } from "./components"
|
||||
|
||||
export default function projectDiagnostics(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function projectPanel(colorScheme: ColorScheme) {
|
||||
@@ -24,8 +24,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
: colorScheme.ramps.green(0.5).hex(),
|
||||
conflict: isLight
|
||||
? colorScheme.ramps.red(0.6).hex()
|
||||
: colorScheme.ramps.red(0.5).hex()
|
||||
}
|
||||
: colorScheme.ramps.red(0.5).hex(),
|
||||
},
|
||||
}
|
||||
|
||||
let entry = {
|
||||
@@ -44,7 +44,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
background: background(layer, "active"),
|
||||
text: text(layer, "mono", "active", { size: "sm" }),
|
||||
},
|
||||
status
|
||||
status,
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -79,7 +79,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
text: text(layer, "mono", "on", { size: "sm" }),
|
||||
background: withOpacity(background(layer, "on"), 0.9),
|
||||
border: border(layer),
|
||||
status
|
||||
status,
|
||||
},
|
||||
ignoredEntry: {
|
||||
...entry,
|
||||
@@ -88,7 +88,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
active: {
|
||||
...entry.active,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
}
|
||||
},
|
||||
},
|
||||
cutEntry: {
|
||||
...entry,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function projectSharedNotification(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function search(colorScheme: ColorScheme) {
|
||||
@@ -30,7 +30,7 @@ export default function search(colorScheme: ColorScheme) {
|
||||
...editor,
|
||||
minWidth: 100,
|
||||
maxWidth: 250,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background } from "./components"
|
||||
|
||||
export default function sharedScreen(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, foreground, text } from "./components"
|
||||
|
||||
export default function statusBar(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import { text, border, background, foreground } from "./components"
|
||||
|
||||
export default function tabBar(colorScheme: ColorScheme) {
|
||||
@@ -96,7 +96,7 @@ export default function tabBar(colorScheme: ColorScheme) {
|
||||
},
|
||||
active: {
|
||||
color: foreground(layer, "accent"),
|
||||
}
|
||||
},
|
||||
},
|
||||
paneButtonContainer: {
|
||||
background: tab.background,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
|
||||
export default function terminal(colorScheme: ColorScheme) {
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { background, border, text } from "./components"
|
||||
|
||||
export default function tooltip(colorScheme: ColorScheme) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { foreground, text } from "./components"
|
||||
|
||||
const headerPadding = 8
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import {
|
||||
border,
|
||||
background,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { withOpacity } from "../utils/color"
|
||||
import { ColorScheme } from "../theme/colorScheme"
|
||||
import { withOpacity } from "../theme/color"
|
||||
import {
|
||||
background,
|
||||
border,
|
||||
@@ -123,7 +123,7 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
cursor: "Arrow",
|
||||
background: isLight
|
||||
? withOpacity(background(colorScheme.lowest), 0.8)
|
||||
: withOpacity(background(colorScheme.highest), 0.6)
|
||||
: withOpacity(background(colorScheme.highest), 0.6),
|
||||
},
|
||||
zoomedPaneForeground: {
|
||||
margin: 16,
|
||||
@@ -143,7 +143,7 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
right: {
|
||||
border: border(layer, { left: true }),
|
||||
}
|
||||
},
|
||||
},
|
||||
paneDivider: {
|
||||
color: borderColor(layer),
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
ThemeConfig,
|
||||
ThemeAppearance,
|
||||
ThemeConfigInputColors,
|
||||
} from "../../themeConfig"
|
||||
} from "./themeConfig"
|
||||
import { getRamps } from "./ramps"
|
||||
|
||||
export interface ColorScheme {
|
||||
@@ -1,4 +1,4 @@
|
||||
export * from "./colorScheme"
|
||||
export * from "./ramps"
|
||||
export * from "./syntax"
|
||||
export * from "../../themeConfig"
|
||||
export * from "./themeConfig"
|
||||
@@ -3,7 +3,7 @@ import { RampSet } from "./colorScheme"
|
||||
import {
|
||||
ThemeConfigInputColors,
|
||||
ThemeConfigInputColorsKeys,
|
||||
} from "../../themeConfig"
|
||||
} from "./themeConfig"
|
||||
|
||||
export function colorRamp(color: Color): Scale {
|
||||
let endColor = color.desaturate(1).brighten(5)
|
||||
@@ -1,5 +1,5 @@
|
||||
import deepmerge from "deepmerge"
|
||||
import { FontWeight, fontWeights } from "../../common"
|
||||
import { FontWeight, fontWeights } from "../common"
|
||||
import { ColorScheme } from "./colorScheme"
|
||||
import chroma from "chroma-js"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Scale, Color } from "chroma-js"
|
||||
import { Syntax } from "./themes/common/syntax"
|
||||
import { Syntax } from "./syntax"
|
||||
|
||||
interface ThemeMeta {
|
||||
/** The name of the theme */
|
||||
@@ -23,6 +23,11 @@ interface ThemeMeta {
|
||||
themeUrl?: string
|
||||
}
|
||||
|
||||
export type ThemeFamilyMeta = Pick<
|
||||
ThemeMeta,
|
||||
"name" | "author" | "licenseType" | "licenseUrl"
|
||||
>
|
||||
|
||||
export interface ThemeConfigInputColors {
|
||||
neutral: Scale<Color>
|
||||
red: Scale<Color>
|
||||
@@ -0,0 +1,12 @@
|
||||
import { ColorScheme } from "../colorScheme"
|
||||
import { PlayerTokens, players } from "./players"
|
||||
|
||||
interface ColorSchemeTokens {
|
||||
players: PlayerTokens
|
||||
}
|
||||
|
||||
export function colorSchemeTokens(colorScheme: ColorScheme): ColorSchemeTokens {
|
||||
return {
|
||||
players: players(colorScheme),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { SingleColorToken } from "@tokens-studio/types"
|
||||
import { ColorScheme, Players } from "../../common"
|
||||
import { colorToken } from "./token"
|
||||
|
||||
export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
|
||||
|
||||
export type PlayerTokens = Record<keyof Players, PlayerToken>
|
||||
|
||||
function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
|
||||
|
||||
const playerNumber = index.toString() as keyof Players
|
||||
|
||||
return {
|
||||
selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection),
|
||||
cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor),
|
||||
}
|
||||
}
|
||||
|
||||
export const players = (colorScheme: ColorScheme): PlayerTokens => ({
|
||||
"0": buildPlayerToken(colorScheme, 0),
|
||||
"1": buildPlayerToken(colorScheme, 1),
|
||||
"2": buildPlayerToken(colorScheme, 2),
|
||||
"3": buildPlayerToken(colorScheme, 3),
|
||||
"4": buildPlayerToken(colorScheme, 4),
|
||||
"5": buildPlayerToken(colorScheme, 5),
|
||||
"6": buildPlayerToken(colorScheme, 6),
|
||||
"7": buildPlayerToken(colorScheme, 7)
|
||||
})
|
||||
@@ -0,0 +1,14 @@
|
||||
import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
|
||||
|
||||
export function colorToken(name: string, value: string, description?: string): SingleColorToken {
|
||||
const token: SingleColorToken = {
|
||||
name,
|
||||
type: TokenTypes.COLOR,
|
||||
value,
|
||||
description,
|
||||
}
|
||||
|
||||
if (!token.value || token.value === '') throw new Error("Color token must have a value")
|
||||
|
||||
return token
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ThemeLicenseType, ThemeConfig, ThemeSyntax } from "../../common"
|
||||
import { ThemeLicenseType, ThemeSyntax, ThemeFamilyMeta } from "../../common"
|
||||
|
||||
export interface Variant {
|
||||
colors: {
|
||||
@@ -21,7 +21,7 @@ export interface Variant {
|
||||
}
|
||||
}
|
||||
|
||||
export const meta: Partial<ThemeConfig> = {
|
||||
export const meta: ThemeFamilyMeta = {
|
||||
name: "Atelier",
|
||||
author: "Bram de Haan (http://atelierbramdehaan.nl)",
|
||||
licenseType: ThemeLicenseType.MIT,
|
||||
|
||||
@@ -3,8 +3,8 @@ import {
|
||||
chroma,
|
||||
colorRamp,
|
||||
ThemeLicenseType,
|
||||
ThemeConfig,
|
||||
ThemeSyntax,
|
||||
ThemeFamilyMeta,
|
||||
} from "../../common"
|
||||
|
||||
export const ayu = {
|
||||
@@ -77,7 +77,7 @@ export const buildSyntax = (t: typeof dark): ThemeSyntax => {
|
||||
}
|
||||
}
|
||||
|
||||
export const meta: Partial<ThemeConfig> = {
|
||||
export const meta: ThemeFamilyMeta = {
|
||||
name: "Ayu",
|
||||
author: "dempfi",
|
||||
licenseType: ThemeLicenseType.MIT,
|
||||
|
||||
@@ -5,9 +5,10 @@ import {
|
||||
ThemeLicenseType,
|
||||
ThemeConfig,
|
||||
ThemeSyntax,
|
||||
ThemeFamilyMeta,
|
||||
} from "../../common"
|
||||
|
||||
const meta: Partial<ThemeConfig> = {
|
||||
const meta: ThemeFamilyMeta = {
|
||||
name: "Gruvbox",
|
||||
author: "morhetz <morhetz@gmail.com>",
|
||||
licenseType: ThemeLicenseType.MIT,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ThemeConfig } from "./common"
|
||||
import { ThemeConfig } from "../theme"
|
||||
import { darkDefault as gruvboxDark } from "./gruvbox/gruvbox-dark"
|
||||
import { darkHard as gruvboxDarkHard } from "./gruvbox/gruvbox-dark-hard"
|
||||
import { darkSoft as gruvboxDarkSoft } from "./gruvbox/gruvbox-dark-soft"
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') }
|
||||
Reference in New Issue
Block a user