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