picker.ts

 1import { ColorScheme } from "../theme/colorScheme"
 2import { withOpacity } from "../theme/color"
 3import { background, border, text } from "./components"
 4import { toggleable } from "./toggle"
 5import { interactive } from "./interactive"
 6
 7export default function picker(colorScheme: ColorScheme): any {
 8  let layer = colorScheme.lowest
 9  const container = {
10    background: background(layer),
11    border: border(layer),
12    shadow: colorScheme.modalShadow,
13    cornerRadius: 12,
14    padding: {
15      bottom: 4,
16    },
17  }
18  const inputEditor = {
19    placeholderText: text(layer, "sans", "on", "disabled"),
20    selection: colorScheme.players[0],
21    text: text(layer, "mono", "on"),
22    border: border(layer, { bottom: true }),
23    padding: {
24      bottom: 8,
25      left: 16,
26      right: 16,
27      top: 8,
28    },
29    margin: {
30      bottom: 4,
31    },
32  }
33  const emptyInputEditor: any = { ...inputEditor }
34  delete emptyInputEditor.border
35  delete emptyInputEditor.margin
36
37  return {
38    ...container,
39    emptyContainer: {
40      ...container,
41      padding: {},
42    },
43    item: toggleable(interactive({
44      padding: {
45        bottom: 4,
46        left: 12,
47        right: 12,
48        top: 4,
49      },
50      margin: {
51        top: 1,
52        left: 4,
53        right: 4,
54      },
55      cornerRadius: 8,
56      text: text(layer, "sans", "variant"),
57      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
58    }, {
59      hover: {
60        background: withOpacity(background(layer, "hovered"), 0.5),
61      }
62    }),
63      {
64        default: {
65          background: withOpacity(
66            background(layer, "base", "active"),
67            0.5
68          ),
69          //text: text(layer, "sans", "base", "active"),
70        }
71      }),
72
73
74    inputEditor,
75    emptyInputEditor,
76    noMatches: {
77      text: text(layer, "sans", "variant"),
78      padding: {
79        bottom: 8,
80        left: 16,
81        right: 16,
82        top: 8,
83      },
84    },
85  }
86}