1import { ColorScheme } from "../themes/common/colorScheme"
2import { withOpacity } from "../utils/color"
3import {
4 border,
5 background,
6 foreground,
7 text,
8 TextProperties,
9} from "./components"
10
11export default function welcome(colorScheme: ColorScheme) {
12 let layer = colorScheme.highest
13
14 let checkboxBase = {
15 cornerRadius: 4,
16 padding: {
17 left: 3,
18 right: 3,
19 top: 3,
20 bottom: 3,
21 },
22 // shadow: colorScheme.popoverShadow,
23 border: border(layer),
24 margin: {
25 right: 8,
26 top: 5,
27 bottom: 5,
28 },
29 }
30
31 let interactive_text_size: TextProperties = { size: "sm" }
32
33 return {
34 pageWidth: 320,
35 logo: {
36 color: foreground(layer, "default"),
37 icon: "icons/logo_96.svg",
38 dimensions: {
39 width: 64,
40 height: 64,
41 },
42 },
43 logoSubheading: {
44 ...text(layer, "sans", "variant", { size: "md" }),
45 margin: {
46 top: 10,
47 bottom: 7,
48 },
49 },
50 buttonGroup: {
51 margin: {
52 top: 8,
53 bottom: 16,
54 },
55 },
56 headingGroup: {
57 margin: {
58 top: 8,
59 bottom: 12,
60 },
61 },
62 checkboxGroup: {
63 border: border(layer, "variant"),
64 background: withOpacity(background(layer, "hovered"), 0.25),
65 cornerRadius: 4,
66 padding: {
67 left: 12,
68 top: 2,
69 bottom: 2,
70 },
71 },
72 button: {
73 background: background(layer),
74 border: border(layer, "active"),
75 cornerRadius: 4,
76 margin: {
77 top: 4,
78 bottom: 4,
79 },
80 padding: {
81 top: 3,
82 bottom: 3,
83 left: 7,
84 right: 7,
85 },
86 ...text(layer, "sans", "default", interactive_text_size),
87 hover: {
88 ...text(layer, "sans", "default", interactive_text_size),
89 background: background(layer, "hovered"),
90 border: border(layer, "active"),
91 },
92 },
93 usageNote: {
94 ...text(layer, "sans", "variant", { size: "2xs" }),
95 padding: {
96 top: -4,
97 },
98 },
99 checkboxContainer: {
100 margin: {
101 top: 4,
102 },
103 padding: {
104 bottom: 8,
105 },
106 },
107 checkbox: {
108 label: {
109 ...text(layer, "sans", interactive_text_size),
110 // Also supports margin, container, border, etc.
111 },
112 icon: {
113 color: foreground(layer, "on"),
114 icon: "icons/check_12.svg",
115 dimensions: {
116 width: 12,
117 height: 12,
118 },
119 },
120 default: {
121 ...checkboxBase,
122 background: background(layer, "default"),
123 border: border(layer, "active"),
124 },
125 checked: {
126 ...checkboxBase,
127 background: background(layer, "hovered"),
128 border: border(layer, "active"),
129 },
130 hovered: {
131 ...checkboxBase,
132 background: background(layer, "hovered"),
133 border: border(layer, "active"),
134 },
135 hoveredAndChecked: {
136 ...checkboxBase,
137 background: background(layer, "hovered"),
138 border: border(layer, "active"),
139 },
140 },
141 }
142}