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