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