demo/index.s.ts at main · fullstackedorg/demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import style, { CSSProperties } from "style";
import { fontFamily } from "@fullstacked/ui/values/typography.s";
import spacing from "@fullstacked/ui/values/spacing.s";
import colors from "@fullstacked/ui/values/colors.s";

const bgDark = "#081233";
const bgLight = "#9cd1ec";

const backgroundColorDarkStyle: CSSProperties = {
    backgroundColor: bgDark
};
const backgroundColorLightStyle: CSSProperties = {
    backgroundColor: bgLight
};

const htmlBodyStyle: CSSProperties = {
    backgroundImage: `linear-gradient(${bgDark}, #1e293b)`,
    fontFamily: fontFamily,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: spacing.l,
    justifyContent: "space-between",
    width: "100%",
    padding: 3,
    margin: 0
};

const lightTheme: CSSProperties = {
    backgroundImage: `linear-gradient(to top, #fafbfb 0%, ${bgLight} 100%)`,
    color: colors.dark,

    "& label": {
        color: colors.dark
    }
};

style.createGlobalStyle({
    "*": {
        boxSizing: "border-box"
    },

    "@media (prefers-color-scheme: light)": {
        html: backgroundColorLightStyle,
        body: backgroundColorLightStyle
    },

    "@media (prefers-color-scheme: dark)": {
        html: backgroundColorDarkStyle,
        body: backgroundColorDarkStyle
    },
    html: {
        ...htmlBodyStyle,
        "&.light": lightTheme,
        "&.light body": lightTheme
    },
    body: {
        ...htmlBodyStyle,
        minHeight: "calc(100vh - 6px)"
    },

    svg: {
        height: 24,
        width: 24
    },

    nav: {
        textAlign: "center",
        "> a": {
            display: "inline-block",
            margin: spacing.m / 2
        },
        paddingBottom: spacing.m
    },

    img: {
        height: 80,
        width: 80
    },

    h1: {
        padding: `${spacing.s}px 0 ${spacing.m}px`
    },

    header: {
        width: "100%",
        display: "flex",
        justifyContent: "flex-start",
        "> .input-switch": {
            width: "auto"
        }
    },

    main: {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center"
    },

    p: {
        paddingBottom: spacing.s
    }
});