Lightning-map/src/theme.ts at main · KlosStepan/Lightning-map · 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
import { createTheme } from '@mui/material/styles';
import PixgamerRegularTtf from './fonts/PixgamerRegular-OVD6A.ttf';

//const ibmPlexSansCondensed = require('@fontsource/ibm-plex-sans-condensed');
import '@fontsource/ibm-plex-sans-condensed';

//FONTS 'IBM Plex Sans Condensed'
//      'PixGamer'
export const theme = createTheme({
    typography: {
        h1: { fontFamily: 'PixGamer', fontSize: '2em' },
        h2: { fontFamily: 'PixGamer', fontSize: '1.5em' },
        h3: { fontFamily: 'PixGamer', fontSize: '1.17em' },
        h4: { fontFamily: 'PixGamer', fontSize: '1em' },
        h5: { fontFamily: 'PixGamer', fontSize: '.83em' },
        h6: { fontFamily: 'PixGamer', fontSize: '.67em' },
    },
    components: {
        MuiCssBaseline: {
            styleOverrides: {
                "@font-face": {
                    fontFamily: "PixGamer",
                    src: `url(${PixgamerRegularTtf}) format("truetype")`,
                },
                p: { fontFamily: "IBM Plex Sans Condensed" },
                body: { fontFamily: "IBM Plex Sans Condensed" },
            },
        },
        MuiTypography: {
            defaultProps: {
                variantMapping: {
                    h1: 'h1',
                    h2: 'h2',
                    h3: 'h3',
                    h4: 'h4',
                    h5: 'h5',
                    h6: 'h6',
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                root: {
                    fontFamily: "PixGamer",
                    fontSize: 18,
                    color: "#000000",
                    paddingLeft: 12,
                    paddingRight: 12,
                },
            },
        },
        MuiOutlinedInput: {
            styleOverrides: {
                root: {
                    backgroundColor: "white", // Set background color to white for input
                    borderRadius: "10px", // Set rounded corners for input border
                    padding: "3px 6px 3px 6px !important",
                    "&:hover .MuiOutlinedInput-notchedOutline": {
                        borderColor: "white",
                    },
                    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                        borderColor: "white",
                    },
                    "& .MuiInputBase-input": {
                        fontFamily: "PixGamer", // Set font for input text
                        fontSize: "18px",
                        padding: "3px 6px 3px 6px !important",
                    },
                },
                notchedOutline: {
                    borderRadius: "10px", // Set rounded corners for input border
                    borderColor: "white",
                },
            },
        },
        MuiModal: {
            styleOverrides: {
                root: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                },
            },
        },
    },
    palette: {
        primary: { main: "#F23CFF" },
        secondary: { main: "#8000FF"},
        background: { default: '#F0F0F0' },
    },
});