tldraw/packages/www/styles/stitches.config.ts

140 lines
3.5 KiB
TypeScript
Raw Normal View History

import { createCss, defaultThemeMap } from '@stitches/react'
2021-05-09 12:03:39 +00:00
const { styled, css, theme, getCssString } = createCss({
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-06-27 13:53:06 +00:00
codeHl: 'rgba(144, 144, 144, .15)',
2021-06-04 21:21:03 +00:00
brushFill: 'rgba(0,0,0,.05)',
brushStroke: 'rgba(0,0,0,.25)',
2021-06-01 21:49:32 +00:00
hint: 'rgba(216, 226, 249, 1.000)',
2021-05-28 20:30:27 +00:00
selected: 'rgba(66, 133, 244, 1.000)',
bounds: 'rgba(65, 132, 244, 1.000)',
2021-06-10 09:49:16 +00:00
boundsBg: 'rgba(65, 132, 244, 0.05)',
2021-06-20 10:56:43 +00:00
highlight: 'rgba(65, 132, 244, 0.15)',
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)',
border: '#aaaaaa',
canvas: '#f8f9fa',
2021-05-28 20:30:27 +00:00
panel: '#fefefe',
inactive: '#cccccf',
hover: '#efefef',
text: '#333333',
2021-07-14 13:45:24 +00:00
tooltipBg: '#1d1d1d',
tooltipText: '#ffffff',
muted: '#777777',
2021-05-28 20:30:27 +00:00
input: '#f3f3f3',
inputBorder: '#dddddd',
warn: 'rgba(255, 100, 100, 1)',
lineError: 'rgba(255, 0, 0, .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-07-10 16:14:49 +00:00
},
space: {
0: '2px',
1: '3px',
2: '4px',
3: '8px',
4: '12px',
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-05-09 12:03:39 +00:00
zIndices: {},
transitions: {},
},
media: {
sm: '(min-width: 640px)',
md: '(min-width: 768px)',
},
2021-05-12 22:08:53 +00:00
utils: {
2021-05-29 12:40:41 +00:00
zDash: () => (value: number) => {
return {
strokeDasharray: `calc(${value}px / var(--camera-zoom)) calc(${value}px / var(--camera-zoom))`,
}
},
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))`,
}
}
return {
2021-05-28 13:08:51 +00:00
strokeWidth: `calc(${value}px / var(--camera-zoom))`,
}
},
2021-05-12 22:08:53 +00:00
},
2021-05-09 12:03:39 +00:00
})
const dark = theme({
2021-07-10 16:14:49 +00:00
colors: {
brushFill: 'rgba(180, 180, 180, .05)',
brushStroke: 'rgba(180, 180, 180, .25)',
2021-07-10 16:14:49 +00:00
hint: 'rgba(216, 226, 249, 1.000)',
2021-07-10 21:56:49 +00:00
selected: 'rgba(38, 150, 255, 1.000)',
bounds: 'rgba(38, 150, 255, 1.000)',
boundsBg: 'rgba(38, 150, 255, 0.05)',
highlight: 'rgba(38, 150, 255, 0.15)',
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-07-10 20:39:29 +00:00
border: '#202529',
canvas: '#343d45',
panel: '#49555f',
inactive: '#aaaaad',
2021-07-10 20:39:29 +00:00
hover: '#343d45',
text: '#f8f9fa',
muted: '#e0e2e6',
2021-07-10 16:14:49 +00:00
input: '#f3f3f3',
inputBorder: '#ddd',
2021-07-14 13:45:24 +00:00
tooltipBg: '#1d1d1d',
tooltipText: '#ffffff',
2021-07-10 20:39:29 +00:00
codeHl: 'rgba(144, 144, 144, .15)',
2021-07-10 16:14:49 +00:00
lineError: 'rgba(255, 0, 0, .1)',
},
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-07-10 16:14:49 +00:00
})
2021-05-09 12:03:39 +00:00
export default styled
export { css, getCssString, dark }