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>
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 5 KiB |
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 5 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
@ -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%);
|
||||
|
|
|
@ -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',
|
||||
|
|