fix(query-devtools): Inherit font size from parent instead of root #6246
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 1284e57. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1284e57:
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
Codecov ReportAttention: ❗ Your organization needs to install the Codecov GitHub app to enable full functionality.
... and 81 files with indirect coverage changes 📢 Thoughts on this report? Let us know!. |
2 participants
Fixes #6226
We cannot use em units because the scale of these units change based on the styles of the parent container. So the design tokens would have different behavior for nested elements.
Instead we calculate the computed fontSize style whenever the devtools are mounted and set a CSS variable --tsqd-font-size. The rest of the tokens can derive their value based on this CSS variable.
I have also added a window focus listener so that this computation is run again everytime the user focuses back on the browser. So if they change any styles in their stylesheet, we can recompute the inherited font-size.