From d45d77bedf032a0a640f6a7d041548be489bbd14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Wed, 27 Mar 2024 09:44:22 +0000 Subject: [PATCH] styling: make dotcom and examples site have consistent font styling (#3271) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Our font styling for dotcom vs. our examples app is _ever_ so slightly different. - the Inter fonts weren't being consistently linked. Sometimes we grabbed 700, sometimes 800, sometimes 500 or 400 - the dotcom specified a default weight of 500 and line-height 1.6 which was not specified in the our UI. this made the UI inconsistent - furthermore, we didn't specify `text-rendering` nor `font-smooth` and that also made things inconsistent - finally, our buttons needed to inherit the line-height because otherwise they were reverting to the user agent default before: Screenshot 2024-03-26 at 15 23 12 after: Screenshot 2024-03-26 at 15 22 53 ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Add a brief release note for your PR here. --------- Co-authored-by: Steve Ruiz --- apps/docs/content/getting-started/installation.mdx | 2 +- apps/dotcom/styles/core.css | 2 +- apps/dotcom/styles/globals.css | 2 +- apps/examples/src/styles.css | 2 +- apps/vscode/editor/public/index.css | 2 +- packages/tldraw/src/lib/ui.css | 7 +++++++ templates/nextjs/src/app/globals.css | 2 +- templates/vite/src/index.css | 2 +- 8 files changed, 14 insertions(+), 7 deletions(-) diff --git a/apps/docs/content/getting-started/installation.mdx b/apps/docs/content/getting-started/installation.mdx index dcd8a282e..0b07cbeb3 100644 --- a/apps/docs/content/getting-started/installation.mdx +++ b/apps/docs/content/getting-started/installation.mdx @@ -56,7 +56,7 @@ If you'd like to deeply change the way that tldraw looks, you can copy the `tldr We also use Inter as the default tldraw font. You can import this font however you like (or use a different font!) but here's the CSS import from Google fonts that we use: ```css -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); ``` ### HTML diff --git a/apps/dotcom/styles/core.css b/apps/dotcom/styles/core.css index 9650d147e..94f907e35 100644 --- a/apps/dotcom/styles/core.css +++ b/apps/dotcom/styles/core.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); :root { font-family: diff --git a/apps/dotcom/styles/globals.css b/apps/dotcom/styles/globals.css index a506a6985..ad09c7c00 100644 --- a/apps/dotcom/styles/globals.css +++ b/apps/dotcom/styles/globals.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@600;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); @import url('tldraw/tldraw.css'); @import url('./z-board.css'); diff --git a/apps/examples/src/styles.css b/apps/examples/src/styles.css index 34519b1a7..a99dc6670 100644 --- a/apps/examples/src/styles.css +++ b/apps/examples/src/styles.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); :root { --gray-light: #f5f5f5; diff --git a/apps/vscode/editor/public/index.css b/apps/vscode/editor/public/index.css index 2aa70f680..076c49a9c 100644 --- a/apps/vscode/editor/public/index.css +++ b/apps/vscode/editor/public/index.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); html, body { diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css index 25c4d4f2d..3aa2a278d 100644 --- a/packages/tldraw/src/lib/ui.css +++ b/packages/tldraw/src/lib/ui.css @@ -29,6 +29,7 @@ pointer-events: all; font-weight: inherit; font-family: inherit; + line-height: inherit; text-rendering: optimizeLegibility; font-size: 12px; gap: 0px; @@ -337,6 +338,12 @@ z-index: var(--layer-panels); -webkit-transform: translate3d(0, 0, 0); --sab: env(safe-area-inset-bottom); + font-weight: 500; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smooth: antialiased; + text-rendering: optimizeLegibility; } .tlui-layout__top { diff --git a/templates/nextjs/src/app/globals.css b/templates/nextjs/src/app/globals.css index 08c1971ff..e3899e63f 100644 --- a/templates/nextjs/src/app/globals.css +++ b/templates/nextjs/src/app/globals.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); @import url('tldraw/tldraw.css'); body { diff --git a/templates/vite/src/index.css b/templates/vite/src/index.css index a2c40f840..0cdf99e8e 100644 --- a/templates/vite/src/index.css +++ b/templates/vite/src/index.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700@400;700&display=swap'); @import url('tldraw/tldraw.css'); body {