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    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}