1
 2import { ColorScheme } from "../themes/common/colorScheme";
 3import { border, background, text } from "./components";
 4
 5
 6export default function welcome(colorScheme: ColorScheme) {
 7  let layer = colorScheme.highest;
 8
 9  // TODO
10  let checkboxBase = {
11    cornerRadius: 4,
12    padding: {
13      left: 8,
14      right: 8,
15      top: 4,
16      bottom: 4,
17    },
18    shadow: colorScheme.popoverShadow,
19    border: border(layer),
20    margin: {
21      left: -8,
22    },
23  };
24
25  return {
26    button: {
27      background: background(layer),
28      border: border(layer),
29      cornerRadius: 6,
30      margin: {
31        top: 1,
32      },
33      padding: {
34        top: 1,
35        bottom: 1,
36        left: 7,
37        right: 7,
38      },
39      ...text(layer, "sans", "variant", { size: "xs" }),
40      hover: {
41        ...text(layer, "sans", "hovered", { size: "xs" }),
42        background: background(layer, "hovered"),
43        border: border(layer, "hovered"),
44      },
45    },
46    checkbox: {
47      width: 9,
48      height: 9,
49      default: {
50        ...checkboxBase,
51        background: colorScheme.ramps.blue(0.5).hex(),
52      },
53      checked: {
54        ...checkboxBase,
55        background: colorScheme.ramps.red(0.5).hex(),
56      },
57      hovered: {
58        ...checkboxBase,
59        background: colorScheme.ramps.blue(0.5).hex(),
60
61        border: {
62          color: colorScheme.ramps.green(0.5).hex(),
63          width: 1,
64        }
65      },
66      hoveredAndChecked: {
67        ...checkboxBase,
68        background: colorScheme.ramps.red(0.5).hex(),
69        border: {
70          color: colorScheme.ramps.green(0.5).hex(),
71          width: 1,
72        }
73      }
74    }
75  }
76}