PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Cleans up borders, canvas color

Browse source
This commit is contained in:
Steve Ruiz 2021-05-30 14:49:33 +01:00
parent 03d0eadb6e
commit 836de0c752
7 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/canvas/canvas.tsx
View file

@ -76,6 +76,7 @@ const MainSVG = styled('svg', {
height: '100%', height: '100%',
touchAction: 'none', touchAction: 'none',
zIndex: 100, zIndex: 100,
backgroundColor: '$canvas',
'& *': { '& *': {
userSelect: 'none', userSelect: 'none',

12
components/panel.tsx
View file

@ -5,18 +5,19 @@ export const Root = styled('div', {
backgroundColor: '$panel', backgroundColor: '$panel',
borderRadius: '4px', borderRadius: '4px',
overflow: 'hidden', overflow: 'hidden',
border: '1px solid $border',
pointerEvents: 'all', pointerEvents: 'all',
userSelect: 'none', userSelect: 'none',
zIndex: 200, zIndex: 200,
boxShadow: '0px 2px 25px rgba(0,0,0,.16)', border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
variants: { variants: {
isOpen: { isOpen: {
true: {}, true: {},
false: { false: {
height: 34, padding: 2,
width: 34, height: 38,
width: 38,
}, },
}, },
}, },
@ -42,7 +43,7 @@ export const Header = styled('div', {
width: '100%', width: '100%',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
borderBottom: '1px solid $border', padding: 2,
position: 'relative', position: 'relative',
'& h3': { '& h3': {
@ -91,5 +92,4 @@ export const Footer = styled('div', {
padding: '0 12px', padding: '0 12px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderTop: '1px solid $border',
}) })

7
components/style-panel/style-panel.tsx
View file

@ -212,13 +212,16 @@ const StylePanelRoot = styled(Panel.Root, {
maxWidth: 184, maxWidth: 184,
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
variants: { variants: {
isOpen: { isOpen: {
true: {}, true: {},
false: { false: {
height: 34, padding: 2,
width: 34, height: 38,
width: 38,
}, },
}, },
}, },

3
components/tools-panel/tools-panel.tsx
View file

@ -170,12 +170,13 @@ const Container = styled('div', {
backgroundColor: '$panel', backgroundColor: '$panel',
borderRadius: '4px', borderRadius: '4px',
overflow: 'hidden', overflow: 'hidden',
border: '1px solid $border', border: '1px solid $panel',
pointerEvents: 'all', pointerEvents: 'all',
userSelect: 'none', userSelect: 'none',
height: '100%', height: '100%',
display: 'flex', display: 'flex',
padding: 4, padding: 4,
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
'& svg': { '& svg': {
strokeWidth: 0, strokeWidth: 0,

4
components/tools-panel/undo-redo.tsx
View file

@ -31,11 +31,11 @@ const Container = styled('div', {
borderRadius: '4px', borderRadius: '4px',
overflow: 'hidden', overflow: 'hidden',
alignSelf: 'flex-end', alignSelf: 'flex-end',
border: '1px solid $border',
pointerEvents: 'all', pointerEvents: 'all',
userSelect: 'none', userSelect: 'none',
zIndex: 200, zIndex: 200,
boxShadow: '0px 2px 12px rgba(0,0,0,.08)', border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
display: 'flex', display: 'flex',
padding: 4, padding: 4,

4
components/tools-panel/zoom.tsx
View file

@ -39,11 +39,11 @@ const Container = styled('div', {
borderRadius: '4px', borderRadius: '4px',
overflow: 'hidden', overflow: 'hidden',
alignSelf: 'flex-end', alignSelf: 'flex-end',
border: '1px solid $border',
pointerEvents: 'all', pointerEvents: 'all',
userSelect: 'none', userSelect: 'none',
zIndex: 200, zIndex: 200,
boxShadow: '0px 2px 12px rgba(0,0,0,.08)', border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
display: 'flex', display: 'flex',
padding: 4, padding: 4,

1
styles/stitches.config.ts
View file

@ -13,6 +13,7 @@ const { styled, global, css, theme, getCssString } = createCss({
bounds: 'rgba(65, 132, 244, 1.000)', bounds: 'rgba(65, 132, 244, 1.000)',
boundsBg: 'rgba(65, 132, 244, 0.100)', boundsBg: 'rgba(65, 132, 244, 0.100)',
border: '#aaa', border: '#aaa',
canvas: '#fafafa',
panel: '#fefefe', panel: '#fefefe',
inactive: '#cccccf', inactive: '#cccccf',
hover: '#efefef', hover: '#efefef',