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