[improvement] update dark mode (#2468)
This PR updates the colors on tldraw's dark mode. ### Change Type - [x] `minor` — New feature ### Release Notes - Updated dark mode colors.
This commit is contained in:
Steve Ruiz
GitHub
parent
24bf2cd581
commit
4dda5c4c46
2 changed files with 76 additions and 73 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue