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        checkboxContainer: {
 90            margin: {
 91                top: 4,
 92            },
 93        },
 94        checkbox: {
 95            label: {
 96                ...text(layer, "sans", interactive_text_size),
 97                // Also supports margin, container, border, etc.
 98            },
 99            icon: {
100                color: foreground(layer, "on"),
101                icon: "icons/check_12.svg",
102                dimensions: {
103                    width: 12,
104                    height: 12,
105                }
106            },
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}