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