From 4dda5c4c46e915e55193c9ee5e3c4446e4221521 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sat, 13 Jan 2024 18:04:19 +0000 Subject: [PATCH] [improvement] update dark mode (#2468) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR updates the colors on tldraw's dark mode. ### Change Type - [x] `minor` — New feature ### Release Notes - Updated dark mode colors. --- packages/editor/editor.css | 147 ++++++++++++++++++----------------- packages/tldraw/package.json | 2 +- 2 files changed, 76 insertions(+), 73 deletions(-) diff --git a/packages/editor/editor.css b/packages/editor/editor.css index e3b03b614..c7e02a380 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -21,6 +21,7 @@ --radius-2: 6px; --radius-3: 9px; --radius-4: 13px; + /* Z Index */ --layer-background: 100; --layer-grid: 150; --layer-canvas: 200; @@ -77,16 +78,18 @@ --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); + /* fonts */ --tl-font-draw: 'tldraw_draw', sans-serif; --tl-font-sans: 'tldraw_sans', sans-serif; --tl-font-serif: 'tldraw_serif', serif; --tl-font-mono: 'tldraw_mono', monospace; + /* fext outline */ --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); - /* Own properties */ + /* own properties */ position: relative; top: 0px; left: 0px; @@ -96,85 +99,85 @@ } .tl-theme__light { - --color-accent: #e64a4a; - --color-background: rgb(249, 250, 251); - --color-brush-fill: rgba(144, 144, 144, 0.102); - --color-brush-stroke: rgba(144, 144, 144, 0.251); - --color-grid: rgb(109, 109, 109); + --color-accent: hsl(0, 76%, 60%); + --color-background: hsl(210, 20%, 98%); + --color-brush-fill: hsl(0, 0%, 56%, 10.2%); + --color-brush-stroke: hsl(0, 0%, 56%, 25.1%); + --color-grid: hsl(0, 0%, 43%); --color-low: hsl(204, 16%, 94%); --color-low-border: hsl(204, 16%, 92%); - --color-culled: rgb(235, 238, 240); - --color-muted-none: rgba(0, 0, 0, 0); - --color-muted-0: rgba(0, 0, 0, 0.02); - --color-muted-1: rgba(0, 0, 0, 0.1); - --color-muted-2: rgba(0, 0, 0, 0.042); - --color-hint: rgba(0, 0, 0, 0.055); - --color-overlay: rgba(0, 0, 0, 0.2); - --color-divider: #e8e8e8; - --color-panel-contrast: #ffffff; - --color-panel-overlay: rgba(255, 255, 255, 0.82); - --color-panel: #fdfdfd; - --color-focus: #004094; - --color-selected: #2f80ed; - --color-selected-contrast: #ffffff; - --color-selection-fill: #1e90ff06; - --color-selection-stroke: #2f80ed; - --color-text-0: #1d1d1d; - --color-text-1: #2d2d2d; - --color-text-3: #a4a5a7; - --color-text-shadow: #ffffff; - --color-primary: #2f80ed; - --color-warn: #d10b0b; - --color-text: #000000; - --color-laser: #ff0000; - - --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.09); - --shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.16), 0px 2px 3px rgba(0, 0, 0, 0.24), - 0px 2px 6px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); - --shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.28), 0px 2px 6px rgba(0, 0, 0, 0.14), + --color-culled: hsl(204, 14%, 93%); + --color-muted-none: hsl(0, 0%, 0%, 0%); + --color-muted-0: hsl(0, 0%, 0%, 2%); + --color-muted-1: hsl(0, 0%, 0%, 10%); + --color-muted-2: hsl(0, 0%, 0%, 4.3%); + --color-hint: hsl(0, 0%, 0%, 5.5%); + --color-overlay: hsl(0, 0%, 0% 20%); + --color-divider: hsl(0, 0%, 91%); + --color-panel-contrast: hsl(0, 0%, 100%); + --color-panel-overlay: hsl(0, 0%, 100%, 82%); + --color-panel: hsl(0, 0%, 99%); + --color-focus: hsl(214, 100%, 29%); + --color-selected: hsl(214, 84%, 56%); + --color-selected-contrast: hsl(0, 0%, 100%); + --color-selection-fill: hsl(210, 100%, 56% 2.4%); + --color-selection-stroke: hsl(214, 84%, 56%); + --color-text-0: hsl(0, 0%, 11%); + --color-text-1: hsl(0, 0%, 18%); + --color-text-3: hsl(220, 2%, 65%); + --color-text-shadow: hsl(0, 0%, 100%); + --color-primary: hsl(214, 84%, 56%); + --color-warn: hsl(0, 90%, 43%); + --color-text: hsl(0, 0%, 0%); + --color-laser: hsl(0, 100%, 50%); + /* Shadows */ + --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%); + --shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), + 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); + --shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--color-panel-contrast); - --shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.19), 0px 5px 4px rgba(0, 0, 0, 0.16), - 0px 2px 16px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px var(--color-panel-contrast); + --shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), + 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast); } .tl-theme__dark { - --color-accent: #e64a4a; - --color-background: #212529; - --color-brush-fill: rgba(180, 180, 180, 0.05); - --color-brush-stroke: rgba(180, 180, 180, 0.25); - --color-grid: #909090; - --color-low: #2c3136; - --color-low-border: #30363b; - --color-culled: rgb(47, 52, 57); - --color-muted-none: rgba(255, 255, 255, 0); - --color-muted-0: rgba(255, 255, 255, 0.02); - --color-muted-1: rgba(255, 255, 255, 0.1); - --color-muted-2: rgba(255, 255, 255, 0.05); - --color-hint: rgba(255, 255, 255, 0.1); - --color-overlay: rgba(0, 0, 0, 0.35); - --color-divider: #49555f; - --color-panel-contrast: #49555f; - --color-panel: #363d44; - --color-panel-overlay: rgba(54, 61, 68, 0.82); - --color-focus: #a5c3f3; - --color-selected: #4285f4; - --color-selected-contrast: #ffffff; - --color-selection-fill: rgba(38, 150, 255, 0.05); - --color-selection-stroke: #2f80ed; - --color-text-0: #f0eded; - --color-text-1: #d9d9d9; - --color-text-3: #6d747b; - --color-text-shadow: #292f35; - --color-primary: #2f80ed; - --color-warn: #ef6464; - --color-text: #f8f9fa; - --color-laser: #ff0000; - - --shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038, + --color-accent: hsl(0, 76%, 60%); + --color-background: hsl(240, 5%, 8%); + --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%, 5%); + --color-low-border: hsl(207, 10%, 10%); + --color-culled: hsl(210, 11%, 19%); + --color-muted-none: hsl(0, 0%, 100%, 0%); + --color-muted-0: hsl(0, 0%, 100%, 2%); + --color-muted-1: hsl(0, 0%, 100%, 10%); + --color-muted-2: hsl(0, 0%, 100%, 5%); + --color-hint: hsl(0, 0%, 100%, 10%); + --color-overlay: hsl(0, 0%, 0%, 35%); + --color-divider: hsl(240, 9%, 25%); + --color-panel-contrast: hsl(240, 13%, 19%); + --color-panel: hsl(220, 8%, 15%); + --color-panel-overlay: hsl(210, 11%, 24%, 82%); + --color-focus: hsl(217, 76%, 80%); + --color-selected: hsl(217, 89%, 61%); + --color-selected-contrast: hsl(0, 0%, 100%); + --color-selection-fill: hsl(209, 100%, 57%, 5%); + --color-selection-stroke: hsl(214, 84%, 56%); + --color-text-0: hsl(0, 9%, 94%); + --color-text-1: hsl(0, 0%, 85%); + --color-text-3: hsl(210, 6%, 45%); + --color-text-shadow: hsl(210, 13%, 18%); + --color-primary: hsl(214, 84%, 56%); + --color-warn: hsl(0, 81%, 66%); + --color-text: hsl(210, 17%, 98%); + --color-laser: hsl(0, 100%, 50%); + /* Shadows */ + --shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast); - --shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055, + --shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 46.7%), 0px 2px 6px hsl(0, 0%, 0%, 33.3%), inset 0px 0px 0px 1px var(--color-panel-contrast); - --shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22), + --shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 46.7%), 0px 2px 12px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast); } diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json index 3b98a1ca2..96e2a8db3 100644 --- a/packages/tldraw/package.json +++ b/packages/tldraw/package.json @@ -31,7 +31,7 @@ "scripts": { "test": "lazy inherit", "test-coverage": "lazy inherit", - "dev": "chokidar '../{editor/src/lib/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs' --initial", + "dev": "chokidar '../{editor/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs' --initial", "prebuild": "node ./scripts/copy-css-files.mjs", "build": "yarn run -T tsx ../../scripts/build-package.ts", "build-api": "yarn run -T tsx ../../scripts/build-api.ts",