dk4/stitches.config.ts at main · derkonzert/dk4 · 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 {
  blackA,
  indigo,
  indigoDark,
  red,
  redDark,
  slate,
  slateDark,
  whiteA,
} from "@radix-ui/colors";
import { createStitches } from "@stitches/react";

export const {
  styled,
  keyframes,
  css,
  config,
  getCssText,
  globalCss,
  theme,
  createTheme,
} = createStitches({
  media: {
    bp1: "(min-width: 640px)",
    bp2: "(min-width: 768px)",
    bp3: "(min-width: 1024px)",
  },
  theme: {
    colors: {
      ...indigo,
      ...slate,
      ...red,
      ...blackA,
      ...whiteA,

      secondary: "$indigo8",
      primary: "$indigo9",

      bg1: "$indigo1",
      bg2: "$indigo2",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      5: "25px",
      6: "35px",
      7: "45px",
      8: "60px",
    },
    fontSizes: {
      1: "12px",
      2: "14px",
      3: "16px",
      4: "18px",
      5: "22px",
      6: "26px",
      7: "30px",
      8: "38px",
      10: "56px",
      11: "68px",
      12: "78px",
    },
    fonts: {
      body: "IBM Plex Sans",
      heading: "IBM Plex Serif",
      untitled: "Untitled Sans, apple-system, sans-serif",
      mono: "Söhne Mono, menlo, monospace",
    },
    fontWeights: {},
    lineHeights: {},
    letterSpacings: {},
    sizes: {},
    borderWidths: {},
    borderStyles: {},
    radii: {
      1: "2px",
      2: "4px",
      3: "8px",
      round: "50%",
    },
    shadows: {
      middle:
        "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
    },
    zIndices: {
      dialog: 4,
      dialogOverlay: 3,
      skipNav: 2,
      header: 1,
    },
    transitions: {},
  },
});

export const darkTheme = createTheme("dark-theme", {
  colors: {
    ...indigoDark,
    ...slateDark,
    ...redDark,

    primary: "$indigo11",
  },
});