tldraw/styles/stitches.config.ts
2021-06-20 13:35:47 +01:00

105 lines
2.5 KiB
TypeScript

import { createCss, defaultThemeMap } from '@stitches/react'
const { styled, global, css, theme, getCssString } = createCss({
themeMap: {
...defaultThemeMap,
},
theme: {
colors: {
brushFill: 'rgba(0,0,0,.05)',
brushStroke: 'rgba(0,0,0,.25)',
hint: 'rgba(216, 226, 249, 1.000)',
selected: 'rgba(66, 133, 244, 1.000)',
bounds: 'rgba(65, 132, 244, 1.000)',
boundsBg: 'rgba(65, 132, 244, 0.05)',
highlight: 'rgba(65, 132, 244, 0.15)',
overlay: 'rgba(0, 0, 0, 0.15)',
border: '#aaa',
canvas: '#fafafa',
panel: '#fefefe',
inactive: '#cccccf',
hover: '#efefef',
text: '#333',
muted: '#777',
input: '#f3f3f3',
inputBorder: '#ddd',
},
space: {},
fontSizes: {
0: '10px',
1: '12px',
2: '13px',
3: '16px',
4: '18px',
},
fonts: {
ui: '"Recursive", system-ui, sans-serif',
},
fontWeights: {},
lineHeights: {},
letterSpacings: {},
sizes: {},
borderWidths: {},
borderStyles: {},
radii: {},
shadows: {},
zIndices: {},
transitions: {},
},
media: {
sm: '(min-width: 640px)',
md: '(min-width: 768px)',
},
utils: {
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)) {
// const [val, min, max] = value
// return {
// strokeWidth:
// min !== undefined && max !== undefined
// ? `clamp(${min}px, (calc(${val}px / var(--camera-zoom))), ${max}px)`
// : min !== undefined
// ? `min(${min}px, calc(${val}px / var(--camera-zoom)))`
// : `calc(${val}px / var(--camera-zoom))`,
// }
return {
strokeWidth: `calc(${value[0]}px / var(--camera-zoom))`,
}
}
return {
strokeWidth: `calc(${value}px / var(--camera-zoom))`,
}
},
},
})
const light = theme({})
const dark = theme({})
const globalStyles = global({
'*': { boxSizing: 'border-box' },
':root': {
'--camera-zoom': 1,
'--scale': 'calc(1 / var(--camera-zoom))',
},
'html, body': {
padding: '0px',
margin: '0px',
overscrollBehavior: 'none',
fontFamily: '$ui',
fontSize: '$2',
backgroundColor: '$canvas',
},
})
export default styled
export { css, getCssString, globalStyles, light, dark }