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