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 margin: {
92 top: -4
93 }
94 },
95 checkboxContainer: {
96 margin: {
97 top: 4,
98 },
99 padding: {
100 bottom: 8,
101 }
102 },
103 checkbox: {
104 label: {
105 ...text(layer, "sans", interactive_text_size),
106 // Also supports margin, container, border, etc.
107 },
108 icon: {
109 color: foreground(layer, "on"),
110 icon: "icons/check_12.svg",
111 dimensions: {
112 width: 12,
113 height: 12,
114 }
115 },
116 default: {
117 ...checkboxBase,
118 background: background(layer, "default"),
119 border: border(layer, "active")
120 },
121 checked: {
122 ...checkboxBase,
123 background: background(layer, "hovered"),
124 border: border(layer, "active")
125 },
126 hovered: {
127 ...checkboxBase,
128 background: background(layer, "hovered"),
129 border: border(layer, "active")
130 },
131 hoveredAndChecked: {
132 ...checkboxBase,
133 background: background(layer, "hovered"),
134 border: border(layer, "active")
135 }
136 }
137 }
138}