1import { ColorScheme } from "../themes/common/colorScheme"
2import { withOpacity } from "../utils/color"
3import { background, border, foreground, text } from "./components"
4
5export default function projectPanel(colorScheme: ColorScheme) {
6 const { isLight } = colorScheme
7 let layer = colorScheme.middle
8
9 let baseEntry = {
10 height: 24,
11 iconColor: foreground(layer, "variant"),
12 iconSize: 8,
13 iconSpacing: 8,
14 }
15
16 let status = {
17 git: {
18 modified: isLight
19 ? colorScheme.ramps.yellow(0.6).hex()
20 : colorScheme.ramps.yellow(0.5).hex(),
21 inserted: isLight
22 ? colorScheme.ramps.green(0.4).hex()
23 : colorScheme.ramps.green(0.5).hex(),
24 }
25 }
26
27 let entry = {
28 ...baseEntry,
29 text: text(layer, "mono", "variant", { size: "sm" }),
30 hover: {
31 background: background(layer, "variant", "hovered"),
32 },
33 active: {
34 background: colorScheme.isLight
35 ? withOpacity(background(layer, "active"), 0.5)
36 : background(layer, "active"),
37 text: text(layer, "mono", "active", { size: "sm" }),
38 },
39 activeHover: {
40 background: background(layer, "active"),
41 text: text(layer, "mono", "active", { size: "sm" }),
42 },
43 status
44 }
45
46 return {
47 openProjectButton: {
48 background: background(layer),
49 border: border(layer, "active"),
50 cornerRadius: 4,
51 margin: {
52 top: 16,
53 left: 16,
54 right: 16,
55 },
56 padding: {
57 top: 3,
58 bottom: 3,
59 left: 7,
60 right: 7,
61 },
62 ...text(layer, "sans", "default", { size: "sm" }),
63 hover: {
64 ...text(layer, "sans", "default", { size: "sm" }),
65 background: background(layer, "hovered"),
66 border: border(layer, "active"),
67 },
68 },
69 background: background(layer),
70 padding: { left: 12, right: 12, top: 6, bottom: 6 },
71 indentWidth: 8,
72 entry,
73 draggedEntry: {
74 ...baseEntry,
75 status,
76 text: text(layer, "mono", "on", { size: "sm" }),
77 background: withOpacity(background(layer, "on"), 0.9),
78 border: border(layer),
79 },
80 ignoredEntry: {
81 ...entry,
82 text: text(layer, "mono", "disabled"),
83 },
84 cutEntry: {
85 ...entry,
86 text: text(layer, "mono", "disabled"),
87 active: {
88 background: background(layer, "active"),
89 text: text(layer, "mono", "disabled", { size: "sm" }),
90 },
91 },
92 filenameEditor: {
93 background: background(layer, "on"),
94 text: text(layer, "mono", "on", { size: "sm" }),
95 selection: colorScheme.players[0],
96 }
97 }
98}