143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import { ColorScheme } from "../themes/common/colorScheme"
|
|
import { withOpacity } from "../utils/color"
|
|
import {
|
|
border,
|
|
background,
|
|
foreground,
|
|
text,
|
|
TextProperties,
|
|
} from "./components"
|
|
|
|
export default function welcome(colorScheme: ColorScheme) {
|
|
let layer = colorScheme.highest
|
|
|
|
let checkboxBase = {
|
|
cornerRadius: 4,
|
|
padding: {
|
|
left: 3,
|
|
right: 3,
|
|
top: 3,
|
|
bottom: 3,
|
|
},
|
|
// shadow: colorScheme.popoverShadow,
|
|
border: border(layer),
|
|
margin: {
|
|
right: 8,
|
|
top: 5,
|
|
bottom: 5,
|
|
},
|
|
}
|
|
|
|
let interactive_text_size: TextProperties = { size: "sm" }
|
|
|
|
return {
|
|
pageWidth: 320,
|
|
logo: {
|
|
color: foreground(layer, "default"),
|
|
icon: "icons/logo_96.svg",
|
|
dimensions: {
|
|
width: 64,
|
|
height: 64,
|
|
},
|
|
},
|
|
logoSubheading: {
|
|
...text(layer, "sans", "variant", { size: "md" }),
|
|
margin: {
|
|
top: 10,
|
|
bottom: 7,
|
|
},
|
|
},
|
|
buttonGroup: {
|
|
margin: {
|
|
top: 8,
|
|
bottom: 16,
|
|
},
|
|
},
|
|
headingGroup: {
|
|
margin: {
|
|
top: 8,
|
|
bottom: 12,
|
|
},
|
|
},
|
|
checkboxGroup: {
|
|
border: border(layer, "variant"),
|
|
background: withOpacity(background(layer, "hovered"), 0.25),
|
|
cornerRadius: 4,
|
|
padding: {
|
|
left: 12,
|
|
top: 2,
|
|
bottom: 2,
|
|
},
|
|
},
|
|
button: {
|
|
background: background(layer),
|
|
border: border(layer, "active"),
|
|
cornerRadius: 4,
|
|
margin: {
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 7,
|
|
right: 7,
|
|
},
|
|
...text(layer, "sans", "default", interactive_text_size),
|
|
hover: {
|
|
...text(layer, "sans", "default", interactive_text_size),
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
},
|
|
usageNote: {
|
|
...text(layer, "sans", "variant", { size: "2xs" }),
|
|
padding: {
|
|
top: -4,
|
|
},
|
|
},
|
|
checkboxContainer: {
|
|
margin: {
|
|
top: 4,
|
|
},
|
|
padding: {
|
|
bottom: 8,
|
|
},
|
|
},
|
|
checkbox: {
|
|
label: {
|
|
...text(layer, "sans", interactive_text_size),
|
|
// Also supports margin, container, border, etc.
|
|
},
|
|
icon: {
|
|
color: foreground(layer, "on"),
|
|
icon: "icons/check_12.svg",
|
|
dimensions: {
|
|
width: 12,
|
|
height: 12,
|
|
},
|
|
},
|
|
default: {
|
|
...checkboxBase,
|
|
background: background(layer, "default"),
|
|
border: border(layer, "active"),
|
|
},
|
|
checked: {
|
|
...checkboxBase,
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
hovered: {
|
|
...checkboxBase,
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
hoveredAndChecked: {
|
|
...checkboxBase,
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
},
|
|
}
|
|
}
|