More things removed

Remove borders
remove text, stickey
remove border from panels

Author: patheticGeek

packages/tldraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modfy/tldraw",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "A tiny little drawing app (editor)",
   "author": "@steveruizok",
   "repository": {
@@ -57,6 +57,7 @@
     "react-hotkey-hook": "^1.0.2",
     "react-hotkeys-hook": "^3.4.4",
     "tslib": "^2.3.1",
+    "twind": "^0.16.16",
     "zustand": "^3.6.9"
   },
   "devDependencies": {

packages/tldraw/src/Tldraw.tsx

@@ -385,7 +385,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
       brushStroke: `rgba(${brushBase}, ${isCadSelectMode ? 0.4 : 0.25})`,
       brushDashStroke: `rgba(${brushBase}, .6)`,
     }
-  }, [settings.isDarkMode, settings.isCadSelectMode, appState.selectByContain, userTheme])
+  }, [settings.isDarkMode, settings.isCadSelectMode, appState.selectByContain])
 
   const isInSession = app.session !== undefined
 
@@ -574,6 +574,10 @@ const StyledUI = styled('div', {
   zIndex: 2,
   '& > *': {
     pointerEvents: 'all',
+    outline: 'none'
+  },
+  '& > *:focus': {
+    outline: 'none'
   },
 })
 

packages/tldraw/src/components/Primitives/Panel/Panel.tsx

@@ -6,7 +6,6 @@ export const Panel = styled('div', {
   flexDirection: 'row',
   boxShadow: '$panel',
   padding: '$2',
-  border: '1px solid $panelContrast',
   gap: 0,
   variants: {
     side: {

packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx

@@ -160,7 +160,6 @@ export const StyledToolButton = styled('button', {
       circle: {
         padding: '$2',
         [`& ${StyledToolButtonInner}`]: {
-          border: '1px solid $panelContrast',
           borderRadius: '100%',
           boxShadow: '$panel',
         },

packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx

@@ -3,8 +3,6 @@ import {
   ArrowTopRightIcon,
   CursorArrowIcon,
   Pencil1Icon,
-  Pencil2Icon,
-  TextIcon,
 } from '@radix-ui/react-icons'
 import { TDSnapshot, TDShapeType } from '~types'
 import { useTldrawApp } from '~hooks'
@@ -39,14 +37,6 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
     app.selectTool(TDShapeType.Arrow)
   }, [app])
 
-  const selectTextTool = React.useCallback(() => {
-    app.selectTool(TDShapeType.Text)
-  }, [app])
-
-  const selectStickyTool = React.useCallback(() => {
-    app.selectTool(TDShapeType.Sticky)
-  }, [app])
-
   return (
     <Panel side="center" id="TD-PrimaryTools">
       <ToolButtonWithTooltip
@@ -87,25 +77,6 @@ export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
       >
         <ArrowTopRightIcon />
       </ToolButtonWithTooltip>
-      <ToolButtonWithTooltip
-        kbd={'9'}
-        label={TDShapeType.Text}
-        onClick={selectTextTool}
-        isLocked={isToolLocked}
-        isActive={activeTool === TDShapeType.Text}
-        id="TD-PrimaryTools-Text"
-      >
-        <TextIcon />
-      </ToolButtonWithTooltip>
-      <ToolButtonWithTooltip
-        kbd={'0'}
-        label={TDShapeType.Sticky}
-        onClick={selectStickyTool}
-        isActive={activeTool === TDShapeType.Sticky}
-        id="TD-PrimaryTools-Pencil2"
-      >
-        <Pencil2Icon />
-      </ToolButtonWithTooltip>
     </Panel>
   )
 })

packages/tldraw/src/components/TopPanel/StyleMenu/StyleMenu.tsx

@@ -205,9 +205,7 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
                   <CircleIcon
                     size={18}
                     strokeWidth={2.5}
-                    fill={
-                     'transparent'
-                    }
+                    fill={'transparent'}
                     stroke={strokes.light[style as ColorStyle]}
                   />
                 </ToolButton>