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