1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, foreground, text } from "./components"
 3import { interactive } from "./interactive"
 4
 5const headerPadding = 8
 6
 7export default function simpleMessageNotification(
 8  colorScheme: ColorScheme
 9): Object {
10  let layer = colorScheme.middle
11  return {
12    message: {
13      ...text(layer, "sans", { size: "xs" }),
14      margin: { left: headerPadding, right: headerPadding },
15    },
16    actionMessage: interactive({
17      base: {
18        ...text(layer, "sans", { size: "xs" }),
19        border: border(layer, "active"),
20        cornerRadius: 4,
21        padding: {
22          top: 3,
23          bottom: 3,
24          left: 7,
25          right: 7,
26        },
27
28        margin: { left: headerPadding, top: 6, bottom: 6 },
29      }, state: {
30        hovered: {
31          ...text(layer, "sans", "default", { size: "xs" }),
32          background: background(layer, "hovered"),
33          border: border(layer, "active"),
34        },
35      }
36    }),
37    dismissButton: interactive({
38      base: {
39        color: foreground(layer),
40        iconWidth: 8,
41        iconHeight: 8,
42        buttonWidth: 8,
43        buttonHeight: 8,
44      }, state: {
45        hovered: {
46          color: foreground(layer, "hovered"),
47        },
48      }
49    })
50  }
51}