picker.ts

 1import { ColorScheme } from "../themes/common/colorScheme";
 2import {
 3  background,
 4  border,
 5  text,
 6} from "./components";
 7
 8export default function picker(colorScheme: ColorScheme) {
 9  let elevation = colorScheme.highest;
10  let layer = elevation.middle;
11  return {
12    background: background(layer),
13    cornerRadius: 8,
14    padding: 8,
15    item: {
16      padding: {
17        bottom: 4,
18        left: 12,
19        right: 12,
20        top: 4,
21      },
22      cornerRadius: 8,
23      text: text(layer, "sans"),
24      highlightText: text(layer, "sans", { weight: "bold" }),
25      active: {
26        background: background(layer, "active"),
27        text: text(layer, "sans", "active"),
28      },
29      hover: {
30        background: background(layer, "hovered"),
31      },
32    },
33    border: border(layer),
34    empty: {
35      text: text(layer, "sans"),
36      padding: {
37        bottom: 4,
38        left: 12,
39        right: 12,
40        top: 8,
41      },
42    },
43    inputEditor: {
44      background: background(layer, "on"),
45      cornerRadius: 8,
46      placeholderText: text(layer, "sans", "on", "disabled"),
47      selection: colorScheme.players[0],
48      text: text(layer, "mono", "on"),
49      border: border(layer, "on"),
50      padding: {
51        bottom: 7,
52        left: 16,
53        right: 16,
54        top: 7,
55      },
56    },
57    shadow: elevation.shadow,
58  };
59}