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 entry = {
17 ...baseEntry,
18 text: text(layer, "mono", "variant", { size: "sm" }),
19 hover: {
20 background: background(layer, "variant", "hovered"),
21 },
22 active: {
23 background: colorScheme.isLight
24 ? withOpacity(background(layer, "active"), 0.5)
25 : background(layer, "active"),
26 text: text(layer, "mono", "active", { size: "sm" }),
27 },
28 activeHover: {
29 background: background(layer, "active"),
30 text: text(layer, "mono", "active", { size: "sm" }),
31 },
32 status: {
33 git: {
34 modified: isLight
35 ? colorScheme.ramps.yellow(0.6).hex()
36 : colorScheme.ramps.yellow(0.5).hex(),
37 inserted: isLight
38 ? colorScheme.ramps.green(0.4).hex()
39 : colorScheme.ramps.green(0.5).hex(),
40 }
41 }
42 }
43
44 return {
45 openProjectButton: {
46 background: background(layer),
47 border: border(layer, "active"),
48 cornerRadius: 4,
49 margin: {
50 top: 16,
51 left: 16,
52 right: 16,
53 },
54 padding: {
55 top: 3,
56 bottom: 3,
57 left: 7,
58 right: 7,
59 },
60 ...text(layer, "sans", "default", { size: "sm" }),
61 hover: {
62 ...text(layer, "sans", "default", { size: "sm" }),
63 background: background(layer, "hovered"),
64 border: border(layer, "active"),
65 },
66 },
67 background: background(layer),
68 padding: { left: 12, right: 12, top: 6, bottom: 6 },
69 indentWidth: 8,
70 entry,
71 draggedEntry: {
72 ...baseEntry,
73 text: text(layer, "mono", "on", { size: "sm" }),
74 background: withOpacity(background(layer, "on"), 0.9),
75 border: border(layer),
76 },
77 ignoredEntry: {
78 ...entry,
79 text: text(layer, "mono", "disabled"),
80 },
81 cutEntry: {
82 ...entry,
83 text: text(layer, "mono", "disabled"),
84 active: {
85 background: background(layer, "active"),
86 text: text(layer, "mono", "disabled", { size: "sm" }),
87 },
88 },
89 filenameEditor: {
90 background: background(layer, "on"),
91 text: text(layer, "mono", "on", { size: "sm" }),
92 selection: colorScheme.players[0],
93 }
94 }
95}