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