2021-11-03 16:46:33 +00:00
|
|
|
import { createStitches, defaultThemeMap } from '@stitches/react'
|
2021-05-09 12:03:39 +00:00
|
|
|
|
2021-11-06 11:16:30 +00:00
|
|
|
const { styled, createTheme } = createStitches({
|
2021-05-09 21:22:25 +00:00
|
|
|
themeMap: {
|
|
|
|
...defaultThemeMap,
|
|
|
|
},
|
2021-05-09 12:03:39 +00:00
|
|
|
theme: {
|
2021-05-10 12:16:57 +00:00
|
|
|
colors: {
|
2021-05-28 20:30:27 +00:00
|
|
|
bounds: 'rgba(65, 132, 244, 1.000)',
|
2021-06-10 09:49:16 +00:00
|
|
|
boundsBg: 'rgba(65, 132, 244, 0.05)',
|
2021-11-16 16:01:29 +00:00
|
|
|
hover: '#ececec',
|
2021-06-10 09:49:16 +00:00
|
|
|
overlay: 'rgba(0, 0, 0, 0.15)',
|
2021-07-14 13:45:24 +00:00
|
|
|
overlayContrast: 'rgba(255, 255, 255, 0.15)',
|
2021-05-28 20:30:27 +00:00
|
|
|
panel: '#fefefe',
|
2021-11-16 16:01:29 +00:00
|
|
|
panelContrast: '#ffffff',
|
|
|
|
selected: 'rgba(66, 133, 244, 1.000)',
|
|
|
|
selectedContrast: '#fefefe',
|
|
|
|
sponsor: '#ec6cb9',
|
|
|
|
sponsorContrast: '#ec6cb944',
|
2021-07-11 07:03:20 +00:00
|
|
|
text: '#333333',
|
2021-11-16 16:01:29 +00:00
|
|
|
tooltip: '#1d1d1d',
|
|
|
|
tooltipContrast: '#ffffff',
|
2021-07-14 10:42:16 +00:00
|
|
|
warn: 'rgba(255, 100, 100, 1)',
|
2021-05-10 12:16:57 +00:00
|
|
|
},
|
2021-07-10 16:14:49 +00:00
|
|
|
shadows: {
|
|
|
|
2: '0px 1px 1px rgba(0, 0, 0, 0.14)',
|
|
|
|
3: '0px 2px 3px rgba(0, 0, 0, 0.14)',
|
|
|
|
4: '0px 4px 5px -1px rgba(0, 0, 0, 0.14)',
|
|
|
|
8: '0px 12px 17px rgba(0, 0, 0, 0.14)',
|
|
|
|
12: '0px 12px 17px rgba(0, 0, 0, 0.14)',
|
|
|
|
24: '0px 24px 38px rgba(0, 0, 0, 0.14)',
|
2021-07-14 13:45:24 +00:00
|
|
|
key: '1px 1px rgba(0,0,0,1)',
|
2021-11-03 16:46:33 +00:00
|
|
|
panel: `0px 0px 16px -1px rgba(0, 0, 0, 0.05),
|
|
|
|
0px 0px 16px -8px rgba(0, 0, 0, 0.05),
|
2021-11-23 15:06:16 +00:00
|
|
|
0px 0px 16px -12px rgba(0, 0, 0, 0.12),
|
|
|
|
0px 0px 2px 0px rgba(0, 0, 0, 0.08)`,
|
2021-07-10 16:14:49 +00:00
|
|
|
},
|
|
|
|
space: {
|
|
|
|
0: '2px',
|
|
|
|
1: '3px',
|
|
|
|
2: '4px',
|
|
|
|
3: '8px',
|
2021-07-11 12:51:01 +00:00
|
|
|
4: '12px',
|
2021-07-14 10:42:16 +00:00
|
|
|
5: '16px',
|
2021-07-10 16:14:49 +00:00
|
|
|
},
|
2021-05-09 21:22:25 +00:00
|
|
|
fontSizes: {
|
2021-05-28 20:30:27 +00:00
|
|
|
0: '10px',
|
|
|
|
1: '12px',
|
|
|
|
2: '13px',
|
|
|
|
3: '16px',
|
|
|
|
4: '18px',
|
2021-05-09 21:22:25 +00:00
|
|
|
},
|
|
|
|
fonts: {
|
2021-05-14 22:56:41 +00:00
|
|
|
ui: '"Recursive", system-ui, sans-serif',
|
2021-06-27 13:53:06 +00:00
|
|
|
body: '"Recursive", system-ui, sans-serif',
|
2021-06-27 21:30:37 +00:00
|
|
|
mono: '"Recursive Mono", monospace',
|
2021-05-09 21:22:25 +00:00
|
|
|
},
|
2021-05-09 12:03:39 +00:00
|
|
|
fontWeights: {},
|
|
|
|
lineHeights: {},
|
|
|
|
letterSpacings: {},
|
|
|
|
sizes: {},
|
2021-07-10 16:14:49 +00:00
|
|
|
borderWidths: {
|
|
|
|
0: '$1',
|
|
|
|
},
|
2021-05-09 12:03:39 +00:00
|
|
|
borderStyles: {},
|
2021-07-10 16:14:49 +00:00
|
|
|
radii: {
|
|
|
|
0: '2px',
|
|
|
|
1: '4px',
|
|
|
|
2: '8px',
|
2021-11-03 16:46:33 +00:00
|
|
|
3: '12px',
|
|
|
|
4: '16px',
|
2021-07-10 16:14:49 +00:00
|
|
|
},
|
2021-05-09 12:03:39 +00:00
|
|
|
zIndices: {},
|
|
|
|
transitions: {},
|
|
|
|
},
|
2021-05-30 13:14:35 +00:00
|
|
|
media: {
|
2021-09-21 15:47:04 +00:00
|
|
|
micro: '(max-width: 370px)',
|
2021-05-30 13:14:35 +00:00
|
|
|
sm: '(min-width: 640px)',
|
|
|
|
md: '(min-width: 768px)',
|
|
|
|
},
|
2021-05-12 22:08:53 +00:00
|
|
|
utils: {
|
2021-05-13 10:13:14 +00:00
|
|
|
zStrokeWidth: () => (value: number | number[]) => {
|
|
|
|
if (Array.isArray(value)) {
|
|
|
|
return {
|
2021-05-28 13:08:51 +00:00
|
|
|
strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
|
2021-05-13 10:13:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2021-05-28 13:08:51 +00:00
|
|
|
strokeWidth: `calc(${value}px / var(--camera-zoom))`,
|
2021-05-13 10:13:14 +00:00
|
|
|
}
|
|
|
|
},
|
2021-05-12 22:08:53 +00:00
|
|
|
},
|
2021-05-09 12:03:39 +00:00
|
|
|
})
|
|
|
|
|
2021-11-06 11:16:30 +00:00
|
|
|
export const dark = createTheme({
|
2021-07-10 16:14:49 +00:00
|
|
|
colors: {
|
2021-07-10 21:56:49 +00:00
|
|
|
bounds: 'rgba(38, 150, 255, 1.000)',
|
|
|
|
boundsBg: 'rgba(38, 150, 255, 0.05)',
|
2021-11-16 16:01:29 +00:00
|
|
|
hover: '#444A50',
|
2021-07-10 16:14:49 +00:00
|
|
|
overlay: 'rgba(0, 0, 0, 0.15)',
|
2021-07-14 13:45:24 +00:00
|
|
|
overlayContrast: 'rgba(255, 255, 255, 0.15)',
|
2021-11-16 16:01:29 +00:00
|
|
|
panel: '#363D44',
|
|
|
|
panelContrast: '#49555f',
|
|
|
|
selected: 'rgba(38, 150, 255, 1.000)',
|
|
|
|
selectedContrast: '#fefefe',
|
2021-07-10 20:39:29 +00:00
|
|
|
text: '#f8f9fa',
|
2021-11-16 16:01:29 +00:00
|
|
|
tooltip: '#1d1d1d',
|
|
|
|
tooltipContrast: '#ffffff',
|
2021-07-10 16:14:49 +00:00
|
|
|
},
|
2021-07-10 20:39:29 +00:00
|
|
|
shadows: {
|
|
|
|
2: '0px 1px 1px rgba(0, 0, 0, 0.24)',
|
|
|
|
3: '0px 2px 3px rgba(0, 0, 0, 0.24)',
|
|
|
|
4: '0px 4px 5px -1px rgba(0, 0, 0, 0.24)',
|
|
|
|
8: '0px 12px 17px rgba(0, 0, 0, 0.24)',
|
|
|
|
12: '0px 12px 17px rgba(0, 0, 0, 0.24)',
|
|
|
|
24: '0px 24px 38px rgba(0, 0, 0, 0.24)',
|
2021-11-03 16:46:33 +00:00
|
|
|
panel: `0px 0px 16px -1px rgba(0, 0, 0, 0.05),
|
|
|
|
0px 0px 16px -8px rgba(0, 0, 0, 0.09),
|
|
|
|
0px 0px 16px -12px rgba(0, 0, 0, 0.2)`,
|
2021-07-10 20:39:29 +00:00
|
|
|
},
|
2021-07-10 16:14:49 +00:00
|
|
|
})
|
2021-05-09 12:03:39 +00:00
|
|
|
|
2021-11-06 11:16:30 +00:00
|
|
|
export { styled }
|