1import { ColorScheme } from "../theme/colorScheme"
  2import { withOpacity } from "../theme/color"
  3import { background, border, foreground, text } from "./components"
  4
  5export default function projectPanel(colorScheme: ColorScheme) {
  6    const { isLight } = colorScheme
  7
  8    let layer = colorScheme.middle
  9
 10    let baseEntry = {
 11        height: 22,
 12        iconColor: foreground(layer, "variant"),
 13        iconSize: 7,
 14        iconSpacing: 5,
 15    }
 16
 17    let status = {
 18        git: {
 19            modified: isLight
 20                ? colorScheme.ramps.yellow(0.6).hex()
 21                : colorScheme.ramps.yellow(0.5).hex(),
 22            inserted: isLight
 23                ? colorScheme.ramps.green(0.45).hex()
 24                : colorScheme.ramps.green(0.5).hex(),
 25            conflict: isLight
 26                ? colorScheme.ramps.red(0.6).hex()
 27                : colorScheme.ramps.red(0.5).hex(),
 28        },
 29    }
 30
 31    let entry = {
 32        ...baseEntry,
 33        text: text(layer, "mono", "variant", { size: "sm" }),
 34        hover: {
 35            background: background(layer, "variant", "hovered"),
 36        },
 37        active: {
 38            background: colorScheme.isLight
 39                ? withOpacity(background(layer, "active"), 0.5)
 40                : background(layer, "active"),
 41            text: text(layer, "mono", "active", { size: "sm" }),
 42        },
 43        activeHover: {
 44            background: background(layer, "active"),
 45            text: text(layer, "mono", "active", { size: "sm" }),
 46        },
 47        status,
 48    }
 49
 50    return {
 51        openProjectButton: {
 52            background: background(layer),
 53            border: border(layer, "active"),
 54            cornerRadius: 4,
 55            margin: {
 56                top: 16,
 57                left: 16,
 58                right: 16,
 59            },
 60            padding: {
 61                top: 3,
 62                bottom: 3,
 63                left: 7,
 64                right: 7,
 65            },
 66            ...text(layer, "sans", "default", { size: "sm" }),
 67            hover: {
 68                ...text(layer, "sans", "default", { size: "sm" }),
 69                background: background(layer, "hovered"),
 70                border: border(layer, "active"),
 71            },
 72        },
 73        background: background(layer),
 74        padding: { left: 6, right: 6, top: 0, bottom: 6 },
 75        indentWidth: 12,
 76        entry,
 77        draggedEntry: {
 78            ...baseEntry,
 79            text: text(layer, "mono", "on", { size: "sm" }),
 80            background: withOpacity(background(layer, "on"), 0.9),
 81            border: border(layer),
 82            status,
 83        },
 84        ignoredEntry: {
 85            ...entry,
 86            iconColor: foreground(layer, "disabled"),
 87            text: text(layer, "mono", "disabled"),
 88            active: {
 89                ...entry.active,
 90                iconColor: foreground(layer, "variant"),
 91            },
 92        },
 93        cutEntry: {
 94            ...entry,
 95            text: text(layer, "mono", "disabled"),
 96            active: {
 97                background: background(layer, "active"),
 98                text: text(layer, "mono", "disabled", { size: "sm" }),
 99            },
100        },
101        filenameEditor: {
102            background: background(layer, "on"),
103            text: text(layer, "mono", "on", { size: "sm" }),
104            selection: colorScheme.players[0],
105        },
106    }
107}