fix(Theme): Use global REM-base, do not set html font-size in static styles

CHANGELOG.md

@@ -19,27 +19,28 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Rename `flipInRtl` Icon's `slot` to `svgFlippingInRtl` in Teams theme @mnajdova ([#1179](https://github.com/stardust-ui/react/pull/1179))
-
-### Performance
-- Drop usages of `FelaTheme` component and use `React.Context` to get `theme` directly @layershifter ([#1163](https://github.com/stardust-ui/react/pull/1163))
-- Use `tslib` to replace helpers with their imports, reduces bundle size @layershifter ([#1184](https://github.com/stardust-ui/react/pull/1184))
-
-### Features
-- Add `Reaction` variables to Teams dark and HOC themes @mnajdova ([#1152](https://github.com/stardust-ui/react/pull/1152))
-- Move `Grid`'s and `Image`'s styles and variables from Teams to base theme @mnajdova ([#1182](https://github.com/stardust-ui/react/pull/1182))
-- Export `play` and `pause` icons in Teams theme @layershifter ([#1189](https://github.com/stardust-ui/react/pull/1189))
-- Export `eye` and `eye-slash` icons in Teams theme @alinais ([#1194](https://github.com/stardust-ui/react/pull/1194))
+- Do not set html `font-size` in theme static styles @miroslavstastny ([#1190](https://github.com/stardust-ui/react/pull/1190))
 
 ### Fixes
 - Fix the reset of the `highlightedIndex` when search query changes @silviuavram ([#1168](https://github.com/stardust-ui/react/pull/1168))
 - Fix click triggering logic of `Space` and `Enter` keys for `MenuItem` @kuzhelov ([#1175](https://github.com/stardust-ui/react/pull/1175))
 - Truncate `content` and `header` of `ListItem` when used from `DropdownSelectedItem` @silviuavram ([#1161](https://github.com/stardust-ui/react/pull/1161))
 - Fix `rotate` prop on `Icon` not working in `rtl` @mnajdova ([#1179](https://github.com/stardust-ui/react/pull/1179))
-- Updated themeing for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033)
+- Updated theming for `Attachment` for Teams, Teams Dark and Teams Contrast @bcalvery ([#1033]https://github.com/stardust-ui/react/pull/1033)
 - `FocusTrapZone` - Do not propagate any keyboard events @sophieH29 ([#1180](https://github.com/stardust-ui/react/pull/1180))
 - Capture effect of `Esc` key down event within component for `Popup` and `Dropdown` @kuzhelov ([#1183](https://github.com/stardust-ui/react/pull/1183))
 - Fix example's code of `Theming Examples` guide @kuzhelov ([#1192](https://github.com/stardust-ui/react/pull/1192))
 
+### Features
+- Add `Reaction` variables to Teams dark and HOC themes @mnajdova ([#1152](https://github.com/stardust-ui/react/pull/1152))
+- Move `Grid`'s and `Image`'s styles and variables from Teams to base theme @mnajdova ([#1182](https://github.com/stardust-ui/react/pull/1182))
+- Export `play` and `pause` icons in Teams theme @layershifter ([#1189](https://github.com/stardust-ui/react/pull/1189))
+- Export `eye` and `eye-slash` icons in Teams theme @alinais ([#1194](https://github.com/stardust-ui/react/pull/1194))
+
+### Performance
+- Drop usages of `FelaTheme` component and use `React.Context` to get `theme` directly @layershifter ([#1163](https://github.com/stardust-ui/react/pull/1163))
+- Use `tslib` to replace helpers with their imports, reduces bundle size @layershifter ([#1184](https://github.com/stardust-ui/react/pull/1184))
+
 <!--------------------------------[ v0.26.0 ]------------------------------- -->
 ## [v0.26.0](https://github.com/stardust-ui/react/tree/v0.26.0) (2019-04-03)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.25.1...v0.26.0)

docs/src/app.tsx

@@ -27,12 +27,6 @@ class App extends React.Component<any, ThemeContextData> {
                 a: {
                   textDecoration: 'none',
                 },
-                html: {
-                  fontSize: '14px',
-                },
-                body: {
-                  fontSize: '1rem',
-                },
               },
             ],
           })}

docs/src/index.ejs

@@ -24,6 +24,11 @@
       }
     })()
   </script>
+  <style>
+    html {
+      font-size: 14px;
+    }
+  </style>
 </head>
 <body>
   <script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7/dist/polyfill.min.js"></script>

packages/react/src/components/Provider/Provider.tsx

@@ -10,7 +10,6 @@ import {
   felaRtlRenderer,
   isBrowser,
   mergeThemes,
-  updateCachedRemSize,
   ChildrenComponentProps,
 } from '../../lib'
 
@@ -185,8 +184,6 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
     if (!this.staticStylesRendered && staticStyles) {
       this.renderStaticStyles(mergedTheme)
       this.staticStylesRendered = true
-
-      updateCachedRemSize()
     }
   }
 }

packages/react/src/lib/fontSizeUtility.ts

@@ -16,12 +16,8 @@ const getFontSizeValue = (size?: string | null): number | null => {
   return (size && parseFloat(size)) || null
 }
 
-export const updateCachedRemSize = () => {
-  _documentRemSize = null
-}
-
 /**
- * Converts the provided px size to rem based on the default font size of 10px unless
+ * Converts the provided px size to rem based on the default font size of 16px unless
  * the HTML font size has been previously defined with setHTMLFontSize().
  * @param {number} valueInPx - The px value to convert to rem.
  * @param {number} baseRemSize - Rem size to use for convertions. Optional - document's font size will be taken otherwise.
@@ -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
+    // invalidating the cache is not possible as resetting cached value won't trigger recalculation of site variables,
+    // for which originally computed values will stay unchanged
     _documentRemSize = getDocumentRemSize()
   }
 

packages/react/src/lib/index.ts

@@ -35,7 +35,7 @@ export {
 export { default as isBrowser } from './isBrowser'
 export { default as doesNodeContainClick } from './doesNodeContainClick'
 
-export { pxToRem, updateCachedRemSize } from './fontSizeUtility'
+export { pxToRem } from './fontSizeUtility'
 export { default as createAnimationStyles } from './createAnimationStyles'
 export { default as createComponent } from './createStardustComponent'
 export { getKindProp } from './getKindProp'

packages/react/src/themes/teams/siteVariables.ts

@@ -1,11 +1,6 @@
 import { pxToRem } from '../../lib'
 import { colors, naturalColors } from './colors'
 
-//
-// VARIABLES
-//
-export const htmlFontSize = '10px' // what 1rem represents
-
 //
 // COLORS
 //
@@ -90,7 +85,7 @@ export const bodyPadding = 0
 export const bodyMargin = 0
 export const bodyFontFamily =
   '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
-export const bodyFontSize = '1.4rem'
+export const bodyFontSize = fontSizes.medium
 export const bodyBackground = colors.white
 export const bodyColor = colors.grey[900]
 export const bodyLineHeight = lineHeightMedium

packages/react/src/themes/teams/staticStyles/globalStyles.ts

@@ -1,9 +1,6 @@
 import { StaticStyleFunction } from '../../types'
 
 const globalStyles: StaticStyleFunction = siteVars => ({
-  html: {
-    fontSize: siteVars.htmlFontSize,
-  },
   body: {
     padding: siteVars.bodyPadding,
     margin: siteVars.bodyMargin,

packages/react/src/themes/types.ts

@@ -133,7 +133,6 @@ export interface SiteVariablesInput extends ObjectOf<any> {
   contextualColors?: ContextualColors
   emphasisColors?: EmphasisColors
   naturalColors?: NaturalColorsStrict
-  htmlFontSize?: string
 }
 
 export interface SiteVariablesPrepared extends SiteVariablesInput {