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.top;
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", "info", { weight: "bold" }),
25      active: {
26        background: background(layer, "active"),
27        text: text(layer, "sans", "active"),
28        highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
29      },
30      hover: {
31        background: background(layer, "hovered"),
32      },
33    },
34    border: border(layer),
35    empty: {
36      text: text(layer, "sans", "variant"),
37      padding: {
38        bottom: 4,
39        left: 12,
40        right: 12,
41        top: 8,
42      },
43    },
44    inputEditor: {
45      background: background(layer, "on"),
46      cornerRadius: 8,
47      placeholderText: text(layer, "sans", "on", "disabled"),
48      selection: colorScheme.players[0],
49      text: text(layer, "mono", "on"),
50      border: border(layer, "on"),
51      padding: {
52        bottom: 7,
53        left: 16,
54        right: 16,
55        top: 7,
56      },
57    },
58    shadow: elevation.shadow,
59  };
60}