Color tweaks (light and dark mode) (#3486)

This PR makes some changes to the appearance of colors in light and dark
mode. In general colors should be very slightly darker and less
saturated in light mode, creating greater contrast against the canvas,
fill, and note colors.

Before:

![image](https://github.com/tldraw/tldraw/assets/23072548/aa9a0c64-bf7a-4cde-a611-92fa6d78eabb)

After:

![image](https://github.com/tldraw/tldraw/assets/23072548/352bc688-aa68-4b50-b990-fab643cb0bef)

There are still some balancing to do on dark mode.

Before:
<img width="1393" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/d87114a1-c96e-4b77-bd29-7b44f4faa54f">

After:
<img width="1504" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/c8818afe-b961-4a1d-8852-914ff599a7f3">

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Adjusts colors

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>

packages/editor/editor.css

@@ -151,11 +151,11 @@
 
 .tl-theme__dark {
 	--color-accent: hsl(0, 76%, 60%);
-	--color-background: hsl(240, 5%, 8%);
+	--color-background: hsl(240, 5%, 6.5%);
 	--color-brush-fill: hsl(0, 0%, 71%, 5.1%);
 	--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
-	--color-grid: hsl(0, 0%, 56%);
-	--color-low: hsl(260, 5%, 12.5%);
+	--color-grid: hsl(0, 0%, 40%);
+	--color-low: hsl(260, 4.5%, 10.5%);
 	--color-low-border: hsl(207, 10%, 10%);
 	--color-culled: hsl(210, 11%, 19%);
 	--color-muted-none: hsl(0, 0%, 100%, 0%);
@@ -164,10 +164,10 @@
 	--color-muted-2: hsl(0, 0%, 100%, 5%);
 	--color-hint: hsl(0, 0%, 100%, 7%);
 	--color-overlay: hsl(0, 0%, 0%, 50%);
-	--color-divider: hsl(240, 9%, 25%);
-	--color-panel-contrast: hsl(240, 13%, 22%);
-	--color-panel: hsl(220, 8%, 15%);
-	--color-panel-overlay: hsl(210, 11%, 24%, 82%);
+	--color-divider: hsl(240, 9%, 22%);
+	--color-panel-contrast: hsl(245, 12%, 23%);
+	--color-panel: hsl(235, 6.8%, 13.5%);
+	--color-panel-overlay: hsl(210, 10%, 24%, 82%);
 	--color-focus: hsl(217, 76%, 80%);
 	--color-selected: hsl(217, 89%, 61%);
 	--color-selected-contrast: hsl(0, 0%, 100%);

packages/tlschema/src/styles/TLColorStyle.ts

@@ -67,7 +67,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		blue: {
-			solid: '#4263eb',
+			solid: '#4465e9',
 			note: {
 				fill: '#8AA3FF',
 				text: '#000000',
@@ -93,7 +93,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		grey: {
-			solid: '#adb5bd',
+			solid: '#9fa8b2',
 			note: {
 				fill: '#C0CAD3',
 				text: '#000000',
@@ -106,7 +106,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		'light-blue': {
-			solid: '#4dabf7',
+			solid: '#4ba1f1',
 			note: {
 				fill: '#9BC4FD',
 				text: '#000000',
@@ -119,7 +119,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		'light-green': {
-			solid: '#40c057',
+			solid: '#4cb05e',
 			note: {
 				fill: '#98D08A',
 				text: '#000000',
@@ -132,7 +132,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		'light-red': {
-			solid: '#ff8787',
+			solid: '#f87777',
 			note: {
 				fill: '#F7A5A1',
 				text: '#000000',
@@ -145,7 +145,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		'light-violet': {
-			solid: '#e599f7',
+			solid: '#e085f4',
 			note: {
 				fill: '#DFB0F9',
 				text: '#000000',
@@ -158,7 +158,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		orange: {
-			solid: '#f76707',
+			solid: '#e16919',
 			note: {
 				fill: '#FAA475',
 				text: '#000000',
@@ -197,7 +197,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		yellow: {
-			solid: '#ffc078',
+			solid: '#f1ac4b',
 			note: {
 				fill: '#FED49A',
 				text: '#000000',
@@ -226,7 +226,7 @@ export const DefaultColorThemePalette: {
 	darkMode: {
 		id: 'dark',
 		text: 'hsl(210, 17%, 98%)',
-		background: 'hsl(240, 5%, 8%)',
+		background: 'hsl(240, 5%, 6.5%)',
 		solid: '#010403',
 
 		black: {
@@ -243,7 +243,7 @@ export const DefaultColorThemePalette: {
 			},
 		},
 		blue: {
-			solid: '#4263eb',
+			solid: '#4f72fc', // 3c60f0
 			note: {
 				fill: '#2A3F98',
 				text: '#f2f2f2',