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>
This commit is contained in:
Steve Ruiz 2024-04-17 10:31:55 +01:00 committed by GitHub
parent 6282f65519
commit 7732e99811
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 17 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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%);

View file

@ -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',