hckrnws/stitches.config.ts at main · iamlambda/hckrnws · 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
import { createStitches } from "@stitches/react";

export const { styled, getCssText, createTheme } = createStitches({
  media: {
    phone: `(width < 720px)`,
    tablet: `(720px <= width < 1024px)`,
    desktop: `(1024px <= width < 1536px)`,
    wide: `(1920 <= width)`,
  },
  theme: {
    fonts: {
      mono: "IBM Plex Mono",
      sans: "IBM Plex Sans",
    },
    colors: {
      primaryText: "#EAEAEA",
      secondaryText: "hsl(206, 6%, 43%)",
      background: "hsl(240, 4%, 9%)",
      link: "#FAA916",
      coloredLink: "#E9C46A",
      codeBlock: "#25292D",
      accent: "#464444",
      hovered: "#232323",
      opBG: "#1D2433",
      opColor: "#4970CB",

      level0: "#F02D3D",
      level1: "#FAA916",
      level2: "#6A994E",
      level3: "#2A9BB7",
      level4: "#E5989B",
      level5: "#94D2BD",
      level6: "#F9844A",
      level7: "#52B788",
    },
    fontSizes: {
      0: "12px",
      1: "14px",
      2: "16px",
      3: "20px",
      4: "24px",
      5: "28px",
      6: "32px",
      7: "36px",
      8: "40px",
      9: "48px",
    },
  },
});

export const lightTheme = createTheme({
  colors: {
    primaryText: "#161618",
    secondaryText: "#6F6F6F",
    background: "#ECEDEE",
    link: "#3c798f",
    coloredLink: "#467599",
    codeBlock: "#D0CCD0",
    accent: "#BABABA",
    hovered: "#E5E5E5",
    opBG: "#b9ccf4",
    opColor: "#1d456c",
  },
});