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
  8    let layer = colorScheme.middle
  9
 10    let baseEntry = {
 11        height: 24,
 12        iconColor: foreground(layer, "variant"),
 13        iconSize: 8,
 14        iconSpacing: 8,
 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: 12, right: 12, top: 6, bottom: 6 },
 75        indentWidth: 8,
 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            text: text(layer, "mono", "disabled"),
 87        },
 88        cutEntry: {
 89            ...entry,
 90            text: text(layer, "mono", "disabled"),
 91            active: {
 92                background: background(layer, "active"),
 93                text: text(layer, "mono", "disabled", { size: "sm" }),
 94            },
 95        },
 96        filenameEditor: {
 97            background: background(layer, "on"),
 98            text: text(layer, "mono", "on", { size: "sm" }),
 99            selection: colorScheme.players[0],
100        },
101    }
102}