1import { ColorScheme } from "../theme/color_scheme"
2import { with_opacity } 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(theme: ColorScheme): any {
14 const checkbox_base = {
15 corner_radius: 4,
16 padding: {
17 left: 3,
18 right: 3,
19 top: 3,
20 bottom: 3,
21 },
22 // shadow: theme.popover_shadow,
23 border: border(theme.highest),
24 margin: {
25 right: 8,
26 top: 5,
27 bottom: 5,
28 },
29 }
30
31 const interactive_text_size: TextProperties = { size: "sm" }
32
33 return {
34 page_width: 320,
35 logo: svg(
36 foreground(theme.highest, "default"),
37 "icons/logo_96.svg",
38 64,
39 64
40 ),
41 logo_subheading: {
42 ...text(theme.highest, "sans", "variant", { size: "md" }),
43 margin: {
44 top: 10,
45 bottom: 7,
46 },
47 },
48 button_group: {
49 margin: {
50 top: 8,
51 bottom: 16,
52 },
53 },
54 heading_group: {
55 margin: {
56 top: 8,
57 bottom: 12,
58 },
59 },
60 checkbox_group: {
61 border: border(theme.highest, "variant"),
62 background: with_opacity(
63 background(theme.highest, "hovered"),
64 0.25
65 ),
66 corner_radius: 4,
67 padding: {
68 left: 12,
69 top: 2,
70 bottom: 2,
71 },
72 },
73 button: interactive({
74 base: {
75 background: background(theme.highest),
76 border: border(theme.highest, "active"),
77 corner_radius: 4,
78 margin: {
79 top: 4,
80 bottom: 4,
81 },
82 padding: {
83 top: 3,
84 bottom: 3,
85 left: 7,
86 right: 7,
87 },
88 ...text(
89 theme.highest,
90 "sans",
91 "default",
92 interactive_text_size
93 ),
94 },
95 state: {
96 hovered: {
97 ...text(
98 theme.highest,
99 "sans",
100 "default",
101 interactive_text_size
102 ),
103 background: background(theme.highest, "hovered"),
104 },
105 },
106 }),
107
108 usage_note: {
109 ...text(theme.highest, "sans", "variant", { size: "2xs" }),
110 padding: {
111 top: -4,
112 },
113 },
114 checkbox_container: {
115 margin: {
116 top: 4,
117 },
118 padding: {
119 bottom: 8,
120 },
121 },
122 checkbox: {
123 label: {
124 ...text(theme.highest, "sans", interactive_text_size),
125 // Also supports margin, container, border, etc.
126 },
127 icon: svg(
128 foreground(theme.highest, "on"),
129 "icons/check_12.svg",
130 12,
131 12
132 ),
133 default: {
134 ...checkbox_base,
135 background: background(theme.highest, "default"),
136 border: border(theme.highest, "active"),
137 },
138 checked: {
139 ...checkbox_base,
140 background: background(theme.highest, "hovered"),
141 border: border(theme.highest, "active"),
142 },
143 hovered: {
144 ...checkbox_base,
145 background: background(theme.highest, "hovered"),
146 border: border(theme.highest, "active"),
147 },
148 hovered_and_checked: {
149 ...checkbox_base,
150 background: background(theme.highest, "hovered"),
151 border: border(theme.highest, "active"),
152 },
153 },
154 }
155}