WIP Styling

Author: CryogenicPlanet

.npmrc

@@ -1 +1 @@
-{}
+{"teamId":"team_gPGmSMaFuy3jJl6E00x2coyr","apiUrl":"https://api.vercel.com"}

.turbo/config.json

@@ -60,12 +60,12 @@
     "zustand": "^3.6.9"
   },
   "devDependencies": {
-    "@tldraw/core": "*",
-    "@tldraw/intersect": "*",
-    "@tldraw/vec": "*",
     "@swc-node/jest": "^1.4.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
+    "@tldraw/core": "*",
+    "@tldraw/intersect": "*",
+    "@tldraw/vec": "*",
     "@types/node": "^17.0.14",
     "@types/react": "^17.0.38",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
@@ -74,7 +74,8 @@
     "lask": "^0.0.29",
     "mobx": "^6.3.8",
     "react": ">=16.8",
-    "react-dom": "^16.8 || ^17.0"
+    "react-dom": "^16.8 || ^17.0",
+    "twind": "^0.16.16"
   },
   "jest": {
     "setupFilesAfterEnv": [
@@ -103,4 +104,4 @@
     }
   },
   "gitHead": "4b1137849ad07da36fc8f0f19cb64e7535a79296"
-}
+}

packages/tldraw/package.json

@@ -206,7 +206,7 @@ export const StyleMenu = React.memo(function ColorMenu(): JSX.Element {
                     size={18}
                     strokeWidth={2.5}
                     fill={
-                      displayedStyle.isFilled ? fills.light[style as ColorStyle] : 'transparent'
+                     'transparent'
                     }
                     stroke={strokes.light[style as ColorStyle]}
                   />

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

@@ -1,5 +1,7 @@
 import { createStitches, defaultThemeMap } from '@stitches/react'
 
+import * as colors from 'twind/colors'
+
 const { styled, createTheme } = createStitches({
   themeMap: {
     ...defaultThemeMap,
@@ -8,18 +10,18 @@ const { styled, createTheme } = createStitches({
     colors: {
       bounds: 'rgba(65, 132, 244, 1.000)',
       boundsBg: 'rgba(65, 132, 244, 0.05)',
-      hover: '#ececec',
-      overlay: 'rgba(0, 0, 0, 0.15)',
+      hover: colors.blueGray[800],
+      overlay: colors.blueGray[800],
       overlayContrast: 'rgba(255, 255, 255, 0.15)',
-      panel: '#fefefe',
+      panel: colors.blueGray[900],
       panelContrast: '#ffffff',
       selected: 'rgba(66, 133, 244, 1.000)',
       selectedContrast: '#fefefe',
       sponsor: '#ec6cb9',
       sponsorContrast: '#ec6cb944',
-      text: '#333333',
-      tooltip: '#1d1d1d',
-      tooltipContrast: '#ffffff',
+      text: colors.gray['300'],
+      tooltip: colors.black,
+      tooltipContrast: colors.gray[300],
       warn: 'rgba(255, 100, 100, 1)',
     },
     shadows: {
@@ -51,8 +53,8 @@ const { styled, createTheme } = createStitches({
       4: '18px',
     },
     fonts: {
-      ui: '"Recursive", system-ui, sans-serif',
-      body: '"Recursive", system-ui, sans-serif',
+      ui: '"Inter", system-ui, sans-serif',
+      body: '"Inter ", system-ui, sans-serif',
       mono: '"Recursive Mono", monospace',
     },
     fontWeights: {},
@@ -98,15 +100,15 @@ export const dark = createTheme({
   colors: {
     bounds: 'rgba(38, 150, 255, 1.000)',
     boundsBg: 'rgba(38, 150, 255, 0.05)',
-    hover: '#444A50',
+    hover: colors.blueGray[800],
     overlay: 'rgba(0, 0, 0, 0.15)',
     overlayContrast: 'rgba(255, 255, 255, 0.15)',
-    panel: '#363D44',
+    panel: colors.blueGray[900],
     panelContrast: '#49555f',
     selected: 'rgba(38, 150, 255, 1.000)',
     selectedContrast: '#fefefe',
-    text: '#f8f9fa',
-    tooltip: '#1d1d1d',
+    text: colors.gray[100],
+    tooltip: colors.black,
     tooltipContrast: '#ffffff',
   },
   shadows: {

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

@@ -4636,6 +4636,11 @@ csstype@^3.0.2, csstype@^3.0.4:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
+csstype@^3.0.5:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
 csv-generate@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.4.3.tgz#bc42d943b45aea52afa896874291da4b9108ffff"
@@ -4987,6 +4992,20 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz#79d5846c4f90eba3e617d9031e921de9324f84ed"
   integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==
 
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -5001,6 +5020,22 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@^4.0.0, domhandler@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.5.2:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5181,6 +5216,11 @@ enquirer@^2.3.0:
   dependencies:
     ansi-colors "^4.1.1"
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -6376,6 +6416,16 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+htmlparser2@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -9934,6 +9984,11 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-vendorizer@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/style-vendorizer/-/style-vendorizer-2.1.1.tgz#5f06601c1724cfb314fe1153e7e442c58dde771c"
+  integrity sha512-gVO6Cwxtg8iX0X1W4xMhSc5WbQpiIBQDkhq3JkwebMRRgyhCfuvMrnPlTAGTRjfQPGRmzgjCOZ4drehTnLahHA==
+
 styled-jsx@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"
@@ -10328,6 +10383,15 @@ turbo@^1.1.2:
     turbo-windows-32 "1.1.2"
     turbo-windows-64 "1.1.2"
 
+twind@^0.16.16:
+  version "0.16.16"
+  resolved "https://registry.yarnpkg.com/twind/-/twind-0.16.16.tgz#76959cd21897528f9a2631a293e3381b668332ad"
+  integrity sha512-UlAYjkGCdgjg4xU1SIwRW0PpG0anZrY32+kS2jYsi32yb4RuW0ttzaI1OglgwAUk/rZwzoINilnIFORzOSFZag==
+  dependencies:
+    csstype "^3.0.5"
+    htmlparser2 "^6.0.0"
+    style-vendorizer "^2.0.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"