zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-02 18:51:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Organize misc files into theme, themes and styleTrees

Browse Source
This commit is contained in:
Nate Butler 2023-06-07 12:50:37 -04:00
parent 6269cec4f1
commit 29de420b59
37 changed files with 141 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
styles/src/buildThemes.ts
View File

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

4
styles/src/common.ts
View File

@ -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",

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

@ -18,7 +18,7 @@ import tooltip from "./tooltip"
import terminal from "./terminal"
import contactList from "./contactList"
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"

156
styles/src/styleTree/assistant.ts
View File

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

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

@ -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) {

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

@ -1,5 +1,5 @@
import { fontFamilies, fontSizes, FontWeight } from "../common"
import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
import { Layer, Styles, StyleSets, Style } from "../theme/colorScheme"
function isStyleSet(key: any): key is StyleSets {
return [

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

@ -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 {

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

@ -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) {

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

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { background, foreground, text } from "./components"
const avatarSize = 12

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

@ -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) {

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

@ -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) {

2
styles/src/styleTree/copilot.ts
View File

@ -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) {

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

@ -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: {

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

@ -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) {

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

@ -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) {

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

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

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

@ -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 {

2
styles/src/styleTree/projectDiagnostics.ts
View File

@ -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) {

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

@ -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,

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

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

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

@ -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

2
styles/src/styleTree/sharedScreen.ts
View File

@ -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) {

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

@ -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

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

@ -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) {

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

@ -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,

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

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
export default function terminal(colorScheme: ColorScheme) {
/**

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

@ -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) {

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

@ -1,4 +1,4 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { ColorScheme } from "../theme/colorScheme"
import { foreground, text } from "./components"
const headerPadding = 8

4
styles/src/styleTree/welcome.ts
View File

@ -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,

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

@ -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),

0
styles/src/utils/color.ts → styles/src/theme/color.ts
View File

2
styles/src/themes/common/colorScheme.ts → styles/src/theme/colorScheme.ts
View File

@ -5,7 +5,7 @@ import {
ThemeConfig,
ThemeAppearance,
ThemeConfigInputColors,
} from "../../themeConfig"
} from "./themeConfig"
import { getRamps } from "./ramps"
export interface ColorScheme {

2
styles/src/themes/common/index.ts → styles/src/theme/index.ts
View File

@ -1,4 +1,4 @@
export * from "./colorScheme"
export * from "./ramps"
export * from "./syntax"
export * from "../../themeConfig"
export * from "./themeConfig"

2
styles/src/themes/common/ramps.ts → styles/src/theme/ramps.ts
View File

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

2
styles/src/themes/common/syntax.ts → styles/src/theme/syntax.ts
View File

@ -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"

2
styles/src/themeConfig.ts → styles/src/theme/themeConfig.ts
View File

@ -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 */

2
styles/src/themes/index.ts
View File

@ -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"