microsoft · kuzhelov · Dec 6, 2018 · Oct 18, 2018 · Nov 6, 2018 · Nov 6, 2018
@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))
+- Decouple `pxToRem` from HTML page's font size @kuzhelov ([#371](https://github.com/stardust-ui/react/pull/371))
 
 ### Features
 - `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))

@@ -6,7 +6,7 @@ import { semanticCssOverrides } from './Style'
 import { ThemeContext } from './context/theme-context'
 import Router from './routes'
 
-const semanticStyleOverrides = {
+const semanticStylesOverrideTheme = {
   staticStyles: [semanticCssOverrides],
 }
 
@@ -38,15 +38,7 @@ class App extends React.Component<any, AppState> {
     const { themeName } = this.state
     return (
       <ThemeContext.Provider value={this.state}>
-        <Provider
-          theme={mergeThemes(semanticStyleOverrides, themes[themeName], {
-            // adjust Teams' theme to Semantic UI's font size scheme
-            siteVariables: {
-              htmlFontSize: '14px',
-              bodyFontSize: '1rem',
-            },
-          })}
-        >
+        <Provider theme={mergeThemes(semanticStylesOverrideTheme, themes[themeName])}>
           <Router />
         </Provider>
       </ThemeContext.Provider>

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="font-size: 14px;">
 <head>
   <base href='<%= __BASENAME__ %>'>
   <meta charset="UTF-8">

@@ -1,73 +1,23 @@
 import * as _ from 'lodash'
-import isBrowser from './isBrowser'
 
 const DEFAULT_FONT_SIZE_IN_PX = 16
-const DEFAULT_REM_SIZE_IN_PX = 10
-let _htmlFontSizeInPx: number | null = null
-
-const getComputedFontSize = (): number => {
-  return isBrowser()
-    ? getFontSizeValue(getComputedStyle(document.documentElement).fontSize) ||
-        DEFAULT_REM_SIZE_IN_PX
-    : DEFAULT_FONT_SIZE_IN_PX
-}
-
-const getFontSizeValue = (size?: string | null): number | null => {
-  return (size && parseFloat(size)) || null
-}
 
 /**
- * Converts the provided px size to rem based on the default font size of 10px unless
- * the HTML font size has been previously defined with setHTMLFontSize().
+ * Converts the provided px size to rem based on the default font size of 16px unless
+ * another base size is provided.
  * @param {number} value The px value to convert to rem.
+ * @param {number} [baseSize] Base font size to use for rem convertion. Optional, 16px is used by default.
  * @example
  * // Returns '1rem'
- * pxToRem(10)
+ * pxToRem(16)
+ *
+ *  * // Returns '2rem'
+ * pxToRem(16, 8)
  * @returns {string} The value converted to the rem.
  */
-export const pxToRem = (value: number = 0): string => {
-  if (!_htmlFontSizeInPx) {
-    _htmlFontSizeInPx = getComputedFontSize()
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (value < 0) {
-      throw new Error(`Invalid value of: '${value}'.`)
-    }
-  }
-  const convertedValueInRems = value / _htmlFontSizeInPx
+export const pxToRem = (value: number, baseSize?: number): string => {
+  const baseFontSize = baseSize || DEFAULT_FONT_SIZE_IN_PX
+  const convertedValueInRems = value / baseFontSize
 
   return `${_.round(convertedValueInRems, 4)}rem`
 }
-
-/**
- * Sets the HTML font size for use for px to rem conversion.
- * Providing null for fontSize will get the computed font size based on the document, or set it to DEFAULT_REM_SIZE_IN_PX.
- * @param {string} [fontSize] The font size in px, to set as the HTML font size in the fontSizeUtility.
- * @example
- * // Sets the HTML font size to 10px.
- * setHTMLFontSize('10px')
- * @example
- * // Sets the HTML font size based on document.fontSize.
- * setHTMLFontSize()
- */
-export const setHTMLFontSize = (fontSize?: string): void => {
-  if (!fontSize) {
-    throw new Error('fontSize is not defined')
-  }
-
-  const htmlFontSizeValue = getFontSizeValue(fontSize) || 0
-  const htmlFontSizeUnit = fontSize.replace(htmlFontSizeValue.toString(), '')
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (htmlFontSizeValue <= 0) {
-      throw new Error(`Invalid htmlFontSizeValue of: '${htmlFontSizeValue}'.`)
-    }
-
-    if (htmlFontSizeUnit !== 'px') {
-      throw new Error(`Expected htmlFontSize to be in px, but got: '${htmlFontSizeUnit}'.`)
-    }
-  }
-
-  _htmlFontSizeInPx = htmlFontSizeValue || getComputedFontSize()
-}
@@ -32,7 +32,7 @@ export { default as typescriptUtils } from './typescriptUtils'
 export { default as doesNodeContainClick } from './doesNodeContainClick'
 export { default as leven } from './leven'
 
-export { pxToRem, setHTMLFontSize } from './fontSizeUtility'
+export { pxToRem } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
 export { default as createComponent } from './createStardustComponent'

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../../teams/utils'
 
 export default (siteVars: any) => {
   return {

@@ -1,7 +1,7 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { AttachmentProps } from '../../../../components/Attachment/Attachment'
 import { AttachmentVariables } from './attachmentVariables'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const attachmentStyles: ComponentSlotStylesInput<AttachmentProps, AttachmentVariables> = {
   root: ({ props, variables }): ICSSInJSStyle => ({

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { AvatarPropsWithDefaults } from '../../../../components/Avatar/Avatar'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ButtonProps, ButtonState } from '../../../../components/Button/Button'
 import { truncateStyle } from '../../../../styles/customCSS'

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export interface ButtonVariables {
   [key: string]: string | number

@@ -1,7 +1,7 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ChatMessageProps } from '../../../../components/Chat/ChatMessage'
 import { ChatMessageVariables } from './chatMessageVariables'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const px10asRem = pxToRem(10)
 

@@ -1,6 +1,6 @@
 import { ICSSInJSStyle } from '../../../types'
 import { ChatVariables } from './chatVariables'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const chatStyles = {
   root: ({ variables: v }: { variables: ChatVariables }): ICSSInJSStyle => ({

@@ -1,6 +1,7 @@
 import * as _ from 'lodash'
 
-import { childrenExist, pxToRem } from '../../../../lib'
+import { childrenExist } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle, ICSSPseudoElementStyle } from '../../../types'
 import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider'
 

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
+import { pxToRem } from '../../utils'
 
 import { EmphasisColors, NaturalColors } from '../../../types'
-import { pxToRem } from '../../../../lib'
 
 export interface DividerVariables {
   colors: Record<keyof (EmphasisColors & NaturalColors), string>

@@ -1,6 +1,6 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { FormProps } from '../../../../components/Form/Form'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const formFieldStyles: ComponentSlotStylesInput<FormProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => ({}),

@@ -1,6 +1,6 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { FormProps } from '../../../../components/Form/Form'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const formStyles: ComponentSlotStylesInput<FormProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => ({

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ICSSInJSStyle } from '../../../types'
 
 export default {

@@ -4,7 +4,7 @@ import { fittedStyle } from '../../../../styles/customCSS'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../../types/utils'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
-import { pxToRem } from './../../../../lib'
+import { pxToRem } from '../../utils'
 import { getStyle as getSvgStyle } from './svg'
 
 const sizes = new Map([

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export interface IconVariables {
   [key: string]: string | number | boolean | undefined

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ImageProps } from '../../../../components/Image/Image'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export default () => ({
   width: undefined,

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export interface InputVariables {
   backgroundColor: string

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export default () => {
   const vars: any = {}

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { LabelProps } from '../../../../components/Label/Label'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export default () => {
   const color = 'rgba(0, 0, 0, 0.6)'

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ListItemProps } from '../../../../components/List/ListItem'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuVariables } from './menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuProps } from '../../../../components/Menu/Menu'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export interface MenuVariables {
   defaultColor: string

@@ -1,5 +1,5 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 export interface PopupContentVariables {
   [key: string]: string | number

@@ -3,7 +3,7 @@ import {
   RadioGroupItemProps,
   RadioGroupItemState,
 } from '../../../../components/RadioGroup/RadioGroupItem'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const radioStyles: ComponentSlotStylesInput<RadioGroupItemProps & RadioGroupItemState, any> = {
   root: ({ props }): ICSSInJSStyle => ({

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { RadioGroupItemProps } from '../../../../components/RadioGroup/RadioGroupItem'
 
 export default (siteVars: any, props: RadioGroupItemProps) => {

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { StatusPropsWithDefaults } from '../../../../components/Status/Status'
 import { StatusVariables } from './statusVariables'

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const treeItemStyles = {
   root: (): ICSSInJSStyle => ({

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const treeStyles = {
   root: (): ICSSInJSStyle => ({

@@ -1,5 +1,5 @@
 import { ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../../../lib'
+import { pxToRem } from '../../utils'
 
 const treeTitleStyles = {
   root: ({ variables }): ICSSInJSStyle => ({

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../lib'
+import { pxToRem } from './utils'
 import { colors } from './colors'
 
 //
@@ -94,7 +94,6 @@ 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 bodyBackground = white
 export const bodyColor = black
 export const bodyLineHeight = lineHeightBase
@@ -8,7 +8,6 @@ const globalStyles: StaticStyleFunction = siteVars => ({
     padding: siteVars.bodyPadding,
     margin: siteVars.bodyMargin,
     fontFamily: siteVars.bodyFontFamily,
-    fontSize: siteVars.bodyFontSize,
     lineHeight: siteVars.bodyLineHeight,
   },
 })

@@ -0,0 +1,5 @@
+import { pxToRem as basePxToRem } from '../../../lib'
+
+const themeFontSizeInPx = 14
+
+export const pxToRem = (sizeInPx: number) => basePxToRem(sizeInPx, themeFontSizeInPx)