nandi.uk
This repository has no description
1'use client';
2import Link from 'next/link';
3import classes from './global.module.css';
4
5import {
6 createTheme,
7 Avatar,
8 Button,
9 CheckboxIndicator,
10 Indicator,
11 MenuItem,
12 Modal,
13 NavLink,
14 Spoiler,
15 TabsTab,
16 Tooltip,
17 Text,
18 Combobox,
19 Notification,
20 Menu,
21 SegmentedControl,
22 Anchor,
23} from '@mantine/core';
24
25export const theme = createTheme({
26 primaryShade: {
27 light: 6,
28 dark: 6,
29 },
30 primaryColor: 'tangerine',
31 colors: {
32 tangerine: [
33 '#fff1e2',
34 '#ffe1cc',
35 '#ffc29a',
36 '#ffa164',
37 '#fe8537',
38 '#fe731a',
39 '#ff6400',
40 '#e45800',
41 '#cb4d00',
42 '#b14000',
43 ],
44 stone: [
45 '#fafaf9',
46 '#f5f5f4',
47 '#e7e5e4',
48 '#d6d3d1',
49 '#a8a29e',
50 '#78716c',
51 '#57534e',
52 '#44403c',
53 '#292524',
54 '#0c0a09',
55 ],
56 blue: [
57 '#e3faff',
58 '#cff0fe',
59 '#a2dff8',
60 '#72cdf3',
61 '#4cbdef',
62 '#35b4ed',
63 '#23afed',
64 '#109eda',
65 '#0088be',
66 '#0076a8',
67 ],
68 grape: [
69 '#ffe8ff',
70 '#fdceff',
71 '#f79bff',
72 '#f164ff',
73 '#ec36ff',
74 '#ea25ff',
75 '#e803ff',
76 '#ce00e4',
77 '#b800cc',
78 '#a000b3',
79 ],
80 },
81 fontFamily:
82 'Hanken Grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
83 defaultRadius: 'md',
84 spacing: {
85 xxs: '5px',
86 },
87 components: {
88 Button: Button.extend({
89 defaultProps: {
90 radius: 'xl',
91 },
92 }),
93 NavLink: NavLink.extend({
94 styles: (theme) => ({
95 root: { borderRadius: theme.radius.md },
96 label: {
97 fontSize: theme.fontSizes.md,
98 fontWeight: 600,
99 },
100 }),
101 }),
102 Avatar: Avatar.extend({
103 defaultProps: {
104 radius: 'md',
105 },
106 }),
107 Menu: Menu.extend({
108 defaultProps: {
109 radius: 'lg',
110 },
111 }),
112 MenuItem: MenuItem.extend({
113 defaultProps: {
114 fz: 'md',
115 fw: 600,
116 },
117 }),
118 Anchor: Anchor.extend({
119 defaultProps: {
120 component: Link,
121 },
122 }),
123 CheckboxIndicator: CheckboxIndicator.extend({
124 defaultProps: {
125 radius: 'xl',
126 },
127 }),
128 Modal: Modal.extend({
129 defaultProps: {
130 radius: 'lg',
131 transitionProps: { transition: 'pop' },
132 },
133 }),
134 Spoiler: Spoiler.extend({
135 styles: {
136 control: {
137 color: 'gray',
138 fontWeight: 600,
139 },
140 },
141 }),
142 TabsTab: TabsTab.extend({
143 defaultProps: {
144 fw: 500,
145 fz: 'md',
146 },
147 }),
148 Tooltip: Tooltip.extend({
149 defaultProps: {
150 position: 'top-start',
151 openDelay: 500,
152 },
153 }),
154 Title: Text.extend({
155 styles: {
156 root: {
157 wordBreak: 'break-word',
158 },
159 },
160 }),
161 Text: Text.extend({
162 styles: {
163 root: {
164 wordBreak: 'break-word',
165 },
166 },
167 }),
168 Combobox: Combobox.extend({
169 defaultProps: {
170 classNames: {
171 option: classes.option,
172 },
173 },
174 }),
175 Indicator: Indicator.extend({
176 styles: {
177 indicator: {
178 zIndex: 0,
179 },
180 },
181 }),
182 Notification: Notification.extend({
183 defaultProps: {
184 radius: 'lg',
185 withBorder: true,
186 withCloseButton: true,
187 },
188 }),
189 SegmentedControl: SegmentedControl.extend({
190 defaultProps: {
191 withItemsBorders: false,
192 radius: 'lg',
193 },
194 styles: {
195 root: {
196 zIndex: 0,
197 },
198 },
199 }),
200 },
201});