108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
import { ColorScheme } from "../theme/colorScheme"
|
|
import { withOpacity } from "../theme/color"
|
|
import { background, border, foreground, text } from "./components"
|
|
|
|
export default function projectPanel(colorScheme: ColorScheme) {
|
|
const { isLight } = colorScheme
|
|
|
|
let layer = colorScheme.middle
|
|
|
|
let baseEntry = {
|
|
height: 22,
|
|
iconColor: foreground(layer, "variant"),
|
|
iconSize: 7,
|
|
iconSpacing: 5,
|
|
}
|
|
|
|
let status = {
|
|
git: {
|
|
modified: isLight
|
|
? colorScheme.ramps.yellow(0.6).hex()
|
|
: colorScheme.ramps.yellow(0.5).hex(),
|
|
inserted: isLight
|
|
? colorScheme.ramps.green(0.45).hex()
|
|
: colorScheme.ramps.green(0.5).hex(),
|
|
conflict: isLight
|
|
? colorScheme.ramps.red(0.6).hex()
|
|
: colorScheme.ramps.red(0.5).hex(),
|
|
},
|
|
}
|
|
|
|
let entry = {
|
|
...baseEntry,
|
|
text: text(layer, "mono", "variant", { size: "sm" }),
|
|
hover: {
|
|
background: background(layer, "variant", "hovered"),
|
|
},
|
|
active: {
|
|
background: colorScheme.isLight
|
|
? withOpacity(background(layer, "active"), 0.5)
|
|
: background(layer, "active"),
|
|
text: text(layer, "mono", "active", { size: "sm" }),
|
|
},
|
|
activeHover: {
|
|
background: background(layer, "active"),
|
|
text: text(layer, "mono", "active", { size: "sm" }),
|
|
},
|
|
status,
|
|
}
|
|
|
|
return {
|
|
openProjectButton: {
|
|
background: background(layer),
|
|
border: border(layer, "active"),
|
|
cornerRadius: 4,
|
|
margin: {
|
|
top: 16,
|
|
left: 16,
|
|
right: 16,
|
|
},
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 7,
|
|
right: 7,
|
|
},
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
hover: {
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
},
|
|
background: background(layer),
|
|
padding: { left: 6, right: 6, top: 0, bottom: 6 },
|
|
indentWidth: 12,
|
|
entry,
|
|
draggedEntry: {
|
|
...baseEntry,
|
|
text: text(layer, "mono", "on", { size: "sm" }),
|
|
background: withOpacity(background(layer, "on"), 0.9),
|
|
border: border(layer),
|
|
status,
|
|
},
|
|
ignoredEntry: {
|
|
...entry,
|
|
iconColor: foreground(layer, "disabled"),
|
|
text: text(layer, "mono", "disabled"),
|
|
active: {
|
|
...entry.active,
|
|
iconColor: foreground(layer, "variant"),
|
|
},
|
|
},
|
|
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],
|
|
},
|
|
}
|
|
}
|