design-system/src/theme/index.ts at b47c6e571adefc3f468836666e3551f9fc03fead · raid-guild/design-system · 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
import { extendTheme } from '../components/chakra';

import colors from './colors';
import gradientStyles from './gradientStyles';

import Accordion from './components/Accordion';
import Badge from './components/Badge';
import Button from './components/Button';
import Card from './components/Card';
import Checkbox from './components/Checkbox';
import FormLabel from './components/FormLabel';
import RadioBox from './components/RadioBox';
import Heading from './components/Heading';
import Input from './components/Input';
import Link from './components/Link';
import Menu from './components/Menu';
import NumberInput from './components/NumberInput';
import Radio from './components/Radio';
import Select from './components/Select';
import Slider from './components/Slider';
import Spinner from './components/Spinner';
import Switch from './components/Switch';
import Text from './components/Text';
import Textarea from './components/Textarea';
import Tooltip from './components/Tooltip';

const theme = extendTheme({
  styles: {
    global: {
      '*': {
        margin: 0,
        padding: 0,
        boxSizing: 'border-box',
      },
      body: {
        bg: 'gray.800',
        fontFamily: 'texturina',
        color: 'white',
        minHeight: '100vh',
        minWidth: '100vw',
        overflowY: 'overlay',
      },

      // Scrollbar styles
      '::-webkit-scrollbar': {
        width: '10px',
        background: 'transparent',
      },
      '::-webkit-scrollbar-thumb': {
        background: '#ff3864',
        borderRadius: '5px',
      },
      '::-webkit-scrollbar-thumb:hover': {
        background: '#e4728b',
      },
    },
  },
  colors,
  fonts: {
    texturina: `'Texturina', serif`,
    jetbrains: `'JetBrains Mono', monospace`,
    rubik: `'Rubik Mono One', sans-serif`,
    uncial: `'Uncial Antiqua', serif`,
    spaceMono: `'Space Mono', monospace`,
  },
  components: {
    Accordion,
    Badge,
    Button,
    Card,
    Checkbox,
    FormLabel,
    RadioBox,
    Heading,
    Input,
    Link,
    Menu,
    NumberInput,
    Radio,
    Select,
    Slider,
    Spinner,
    Switch,
    Textarea,
    Text,
    Tooltip,
  },
  layerStyles: {
    ...gradientStyles,
  },
});

export const clientTheme = extendTheme({
  colors,
  layerStyles: {
    ...gradientStyles,
  },
});

export default theme;