projectPanel.ts

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