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 let layer = colorScheme.middle
7
8 let baseEntry = {
9 height: 24,
10 iconColor: foreground(layer, "variant"),
11 iconSize: 8,
12 iconSpacing: 8,
13 }
14
15 let entry = {
16 ...baseEntry,
17 text: text(layer, "mono", "variant", { size: "sm" }),
18 hover: {
19 background: background(layer, "variant", "hovered"),
20 },
21 active: {
22 background: background(layer, "active"),
23 text: text(layer, "mono", "active", { size: "sm" }),
24 },
25 activeHover: {
26 background: background(layer, "active"),
27 text: text(layer, "mono", "active", { size: "sm" }),
28 },
29 }
30
31 return {
32 openProjectButton: {
33 ...text(layer, "mono", "active", { size: "sm" }),
34 background: background(layer, "on"),
35 cornerRadius: 6,
36 border: border(layer, "on"),
37 margin: {
38 top: 20,
39 left: 10,
40 right: 10
41 },
42 padding: {
43 bottom: 2,
44 left: 10,
45 right: 10,
46 top: 2,
47 },
48 active: {
49 ...text(layer, "mono", "on", "inverted"),
50 background: background(layer, "on", "inverted"),
51 border: border(layer, "on", "inverted"),
52 },
53 clicked: {
54 ...text(layer, "mono", "on", "pressed"),
55 background: background(layer, "on", "pressed"),
56 border: border(layer, "on", "pressed"),
57 },
58 hover: {
59 ...text(layer, "mono", "on", "hovered"),
60 background: background(layer, "on", "hovered"),
61 border: border(layer, "on", "hovered"),
62 },
63
64 },
65 background: background(layer),
66 padding: { left: 12, right: 12, top: 6, bottom: 6 },
67 indentWidth: 8,
68 entry,
69 draggedEntry: {
70 ...baseEntry,
71 text: text(layer, "mono", "on", { size: "sm" }),
72 background: withOpacity(background(layer, "on"), 0.9),
73 border: border(layer),
74 },
75 ignoredEntry: {
76 ...entry,
77 text: text(layer, "mono", "disabled"),
78 },
79 cutEntry: {
80 ...entry,
81 text: text(layer, "mono", "disabled"),
82 active: {
83 background: background(layer, "active"),
84 text: text(layer, "mono", "disabled", { size: "sm" }),
85 },
86 },
87 filenameEditor: {
88 background: background(layer, "on"),
89 text: text(layer, "mono", "on", { size: "sm" }),
90 selection: colorScheme.players[0],
91 },
92 }
93}