1
 2import { ColorScheme } from "../themes/common/colorScheme";
 3import { border, background, foreground, text, TextProperties } from "./components";
 4
 5
 6export default function welcome(colorScheme: ColorScheme) {
 7  let layer = colorScheme.highest;
 8
 9  let checkboxBase = {
10    cornerRadius: 4,
11    padding: {
12      left: 3,
13      right: 3,
14      top: 3,
15      bottom: 3,
16    },
17    shadow: colorScheme.popoverShadow,
18    border: border(layer),
19    margin: {
20      right: 8,
21      top: 5,
22      bottom: 5
23    },
24  };
25  
26  let interactive_text_size: TextProperties = { size: "md" }
27
28  return {
29    pageWidth: 450,
30    logoSubheading: {
31      ...text(layer, "sans", { size: "lg" }),
32      margin: {
33        top: 10,
34        bottom: 7,
35      },
36    },
37    button: {
38      background: background(layer),
39      border: border(layer, "active"),
40      cornerRadius: 4,
41      margin: {
42        top: 8,
43        bottom: 7
44      },
45      padding: {
46        top: 1,
47        bottom: 1,
48        left: 7,
49        right: 7,
50      },
51      ...text(layer, "sans", "hovered", interactive_text_size),
52      hover: {
53        ...text(layer, "sans", "hovered", interactive_text_size),
54        background: background(layer, "hovered"),
55        border: border(layer, "hovered"),
56      },
57    },
58    checkbox: {
59      label: {
60          ...text(layer, "sans", interactive_text_size),
61          // Also supports margin, container, border, etc.
62      },
63      container: {
64        margin: {
65          top: 5,
66        },
67      },
68      width: 12,
69      height: 12,
70      checkIcon: "icons/check_12.svg",
71      checkIconColor: foreground(layer, "on"),
72      default: {
73        ...checkboxBase,
74        background: background(layer, "default"),
75        border: border(layer, "active")
76      },
77      checked: {
78        ...checkboxBase,
79        background: background(layer, "hovered"),
80        border: border(layer, "active")
81      },
82      hovered: {
83        ...checkboxBase,
84        background: background(layer, "hovered"),
85        border: border(layer, "hovered")
86      },
87      hoveredAndChecked: {
88        ...checkboxBase,
89        background: background(layer, "hovered"),
90        border: border(layer, "active")
91      }
92    }
93  }
94}