-
Notifications
You must be signed in to change notification settings - Fork 54
fix(Theme): Use global REM-base, do not set html font-size in static styles #1190
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1190 +/- ##
==========================================
- Coverage 82.49% 82.48% -0.01%
==========================================
Files 742 742
Lines 8762 8758 -4
Branches 1170 1236 +66
==========================================
- Hits 7228 7224 -4
Misses 1519 1519
Partials 15 15
Continue to review full report at Codecov.
|
@@ -35,6 +31,9 @@ export const updateCachedRemSize = () => { | |||
*/ | |||
export const pxToRem = (valueInPx: number, baseRemSize?: number): string => { | |||
if (!baseRemSize && !_documentRemSize) { | |||
// there is no way how to reset the cached value, once it's cached, it's cached |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit-nit: may suggest
- to remove
once it's cached, it's cached
, as it provides no additional value in explanation :) - rephrase the rest in a more succinct way
as resetting cached value won't trigger recalculation of site variables, for which originally computed values will stay unchanged
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just one thing I would like to refine before merge: https://github.com/stardust-ui/react/pull/1190/files#r273730374
BREAKING CHANGE
Teams theme no longer sets
font-size
onhtml
.Set correct
font-size
onhtml
manually BEFORE Stardust is imported.This is a hotfix which fixes #988.
What was broken
pxToRem
useshtml
font-size
as a base to correctly convert pixels to REMs. There are several problems with it:html
font-size
is global on a page, two themes loaded at the same time cannot use different base font sizes for thepxToRem
, But the previous semantics withhtmlFontSize
being a theme'ssiteVariable
andProvider
resetting the cached base when a new theme was loaded looked like it is possible.pxToRem
is called before the static styles are applied, statichtml
font-size
was cached before the themes font size was applied resulting in broken design (see pxToRem sometimes returning incorrect size #988).Fix
Teams theme no longer sets
html
font-size
in its static styles and expects it to be correctly set BEFORE Stardust is imported not so set false expectations.Limitations of the fix
It's no possible to scale Stardust components to:
These limitations are not new, they were present before the fix as well.
There is another PR #1186 which is an experiment on how to introduce more advanced fix without these limitations later.