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 "./interactive"
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 }, state: {
84 hovered: {
85 ...text(layer, "sans", "default", interactive_text_size),
86 background: background(layer, "hovered"),
87 }
88 }
89 }),
90
91 usageNote: {
92 ...text(layer, "sans", "variant", { size: "2xs" }),
93 padding: {
94 top: -4,
95 },
96 },
97 checkboxContainer: {
98 margin: {
99 top: 4,
100 },
101 padding: {
102 bottom: 8,
103 },
104 },
105 checkbox: {
106 label: {
107 ...text(layer, "sans", interactive_text_size),
108 // Also supports margin, container, border, etc.
109 },
110 icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
111 default: {
112 ...checkboxBase,
113 background: background(layer, "default"),
114 border: border(layer, "active"),
115 },
116 checked: {
117 ...checkboxBase,
118 background: background(layer, "hovered"),
119 border: border(layer, "active"),
120 },
121 hovered: {
122 ...checkboxBase,
123 background: background(layer, "hovered"),
124 border: border(layer, "active"),
125 },
126 hoveredAndChecked: {
127 ...checkboxBase,
128 background: background(layer, "hovered"),
129 border: border(layer, "active"),
130 },
131 },
132 }
133}