joaquinuriel.github.io/stitches.config.js at main · joaquinuriel/joaquinuriel.github.io · 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
import { createStitches } from "@stitches/react";

export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  theme: {
    colors: {
      primary: "#4169e1",
      secondary: "#75aadb",
      accent: "#fcbf49",

      success: "#5fa",
      info: "#5af",
      alert: "#fa5",
      error: "#f55",

      darker: "#111",
      dark: "#333",
      grey: "#555",
      light: "#aaa",
      lighter: "#eee",
    },
    shadows: {
      darker: "#111",
      dark: "#333",
      grey: "#555",
      light: "#aaa",
      lighter: "#eee",
    },
  },
  utils: {
    // size
    size: (value) => ({ width: value, height: value }),
    br: (value) => ({ borderRadius: value }),

    m: (value) => ({ margin: value }),
    mt: (value) => ({ marginTop: value }),
    mr: (value) => ({ marginRight: value }),
    mb: (value) => ({ marginBottom: value }),
    ml: (value) => ({ marginLeft: value }),
    mx: (value) => ({
      marginLeft: value,
      marginRight: value,
    }),
    my: (value) => ({
      marginTop: value,
      marginBottom: value,
    }),

    // display
    align: (value) => ({ alignItems: value }),
    justify: (value) => ({ justifyContent: value }),

    // theme
    bg: (background) => ({ background }),
    shadow: (value) => ({ boxShadow: value }),
    linearGradient: (value) => ({ bg: `linear-gradient(${value})` }),

    // utils
    onhover: (value) => ({ "&:hover": value }),
    onfocus: (value) => ({ "&:focus": value }),
    ondark: (value) => ({ "[data-theme=dark] &": value }),
  },
});