tldraw/styles/stitches.config.ts

92 lines
2 KiB
TypeScript
Raw Normal View History

2021-05-09 21:22:25 +00:00
import { createCss, defaultThemeMap } from "@stitches/react"
2021-05-09 12:03:39 +00:00
2021-05-09 21:22:25 +00:00
const { styled, global, css, theme, getCssString } = createCss({
themeMap: {
...defaultThemeMap,
},
2021-05-09 12:03:39 +00:00
theme: {
2021-05-10 12:16:57 +00:00
colors: {
brushFill: "rgba(0,0,0,.1)",
brushStroke: "rgba(0,0,0,.5)",
2021-05-12 11:27:33 +00:00
hint: "rgba(66, 133, 244, 0.200)",
selected: "rgba(66, 133, 244, 1.000)",
2021-05-12 22:08:53 +00:00
bounds: "rgba(65, 132, 244, 1.000)",
boundsBg: "rgba(65, 132, 244, 0.100)",
2021-05-14 22:56:41 +00:00
border: "#aaa",
panel: "#fefefe",
2021-05-26 10:34:10 +00:00
hover: "#efefef",
2021-05-26 19:20:52 +00:00
text: "#333",
2021-05-17 10:01:11 +00:00
input: "#f3f3f3",
inputBorder: "#ddd",
2021-05-10 12:16:57 +00:00
},
2021-05-09 12:03:39 +00:00
space: {},
2021-05-09 21:22:25 +00:00
fontSizes: {
0: "10px",
1: "12px",
2: "13px",
3: "16px",
4: "18px",
},
fonts: {
2021-05-14 22:56:41 +00:00
ui: '"Recursive", system-ui, sans-serif',
2021-05-09 21:22:25 +00:00
},
2021-05-09 12:03:39 +00:00
fontWeights: {},
lineHeights: {},
letterSpacings: {},
sizes: {},
borderWidths: {},
borderStyles: {},
radii: {},
shadows: {},
zIndices: {},
transitions: {},
},
2021-05-12 22:08:53 +00:00
utils: {
zStrokeWidth: () => (value: number | number[]) => {
if (Array.isArray(value)) {
return {
strokeWidth: `calc(${value[0]} / var(--camera-zoom))`,
}
}
// const [val, min, max] = value
// return {
// strokeWidth:
// min !== undefined && max !== undefined
// ? `clamp(${min}, ${val} / var(--camera-zoom), ${max})`
// : min !== undefined
// ? `min(${min}, ${val} / var(--camera-zoom))`
// : `calc(${val} / var(--camera-zoom))`,
// }
// }
return {
strokeWidth: `calc(${value} / var(--camera-zoom))`,
}
},
2021-05-12 22:08:53 +00:00
},
2021-05-09 12:03:39 +00:00
})
const light = theme({})
const dark = theme({})
const globalStyles = global({
"*": { boxSizing: "border-box" },
":root": {
"--camera-zoom": 1,
"--scale": "calc(1 / var(--camera-zoom))",
},
2021-05-09 13:04:42 +00:00
"html, body": {
2021-05-09 21:22:25 +00:00
padding: "0px",
margin: "0px",
2021-05-09 13:04:42 +00:00
overscrollBehavior: "none",
2021-05-09 21:22:25 +00:00
fontFamily: "$ui",
fontSize: "$2",
2021-05-09 13:04:42 +00:00
},
2021-05-09 12:03:39 +00:00
})
export default styled
2021-05-09 21:22:25 +00:00
export { css, getCssString, globalStyles, light, dark }