jamcommerce/theme.ts at main · devkindhq/jamcommerce · 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
import { extendTheme, ThemeConfig } from '@chakra-ui/react'
import { mode } from '@chakra-ui/theme-tools'
import { withProse } from '@nikolovlazar/chakra-ui-prose'
import { StepsStyleConfig as Steps } from 'chakra-ui-steps';

const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: true,
}


const ChakraTheme = extendTheme({
  ...config,
  colors: {
    overcompiled: {
      100: "#123FFF"
    },
    yellow: {
      50: "#FEFAE7",
      100: "#FBF0BB",
      200: "#F9E790",
      300: "#F6DD65",
      400: "#F4D339",
      500: "#F1CA0E",
      600: "#C1A20B",
      700: "#917908",
      800: "#605106",
      900: "#302803"
    },
    blue: {
      50: "#EAF4FB",
      100: "#C3E1F4",
      200: "#9CCEEC",
      300: "#76BAE5",
      400: "#4FA7DE",
      500: "#2894D7",
      600: "#2076AC",
      700: "#185981",
      800: "#103B56",
      900: "#081E2B"
    }
  },
  components: {
    Steps,
  },
}, withProse({
  baseStyle:
    (props) => ({
      h2: {
        color: mode('gray.700', 'gray.100')(props)
      }
    })

  }
))

export default ChakraTheme