microsoft · miroslavstastny · Apr 8, 2019
@@ -19,6 +19,7 @@ class App extends React.Component<any, ThemeContextData> {
     return (
       <ThemeContext.Provider value={this.state}>
         <Provider
+          baseRemSize={14}
           as={React.Fragment}
           theme={mergeThemes(themes[themeName], {
             // adjust Teams' theme to Semantic UI's font size scheme

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Provider } from '@stardust-ui/react'
+import { Provider, Text } from '@stardust-ui/react'
 
 const theme = { siteVariables: { brand: 'cornflowerblue' } }
 
@@ -11,7 +11,13 @@ const ProviderExampleShorthand = () => (
       </p>
 
       <Provider.Consumer
-        render={theme => <code>theme.siteVariables.brand = {theme.siteVariables.brand}</code>}
+        render={theme => (
+          <>
+            <code>theme.siteVariables.brand = {theme.siteVariables.brand}</code>
+            <pre>{JSON.stringify(theme.fontSizes(theme.pxToRem), null, 2)}</pre>
+            <Text size="medium">Medium text</Text>
+          </>
+        )}
       />
     </div>
   </Provider>

@@ -4,8 +4,9 @@ import { Provider, Text } from '@stardust-ui/react'
 
 const TextSizesExampleShorthand = () => (
   <Provider.Consumer
-    render={({ siteVariables }) => {
-      return _.map(siteVariables.fontSizes, (value, key) => (
+    render={({ siteVariables, fontSizes, pxToRem }) => {
+      const computedFontSizes = fontSizes(pxToRem)
+      return _.map(computedFontSizes, (value, key) => (
         <div key={key}>
           <Text size={key as any} content={`This is size="${key}" size font.`} />
         </div>

@@ -4,8 +4,9 @@ import { Provider, Text } from '@stardust-ui/react'
 
 const TextSizesExample = () => (
   <Provider.Consumer
-    render={({ siteVariables }) => {
-      return _.map(siteVariables.fontSizes, (value, key) => (
+    render={({ siteVariables, fontSizes, pxToRem }) => {
+      const computedFontSizes = fontSizes(pxToRem)
+      return _.map(computedFontSizes, (value, key) => (
         <div key={key}>
           <Text size={key as any}>This is size="{key}" size font.</Text>
         </div>

@@ -27,9 +27,11 @@ import ProviderConsumer from './ProviderConsumer'
 import { mergeSiteVariables } from '../../lib/mergeThemes'
 import ProviderBox from './ProviderBox'
 import { Extendable } from '../../types'
+import { createPxToRem, getDocumentRemSize } from '../../lib/fontSizeUtility'
 
 export interface ProviderProps extends ChildrenComponentProps {
   theme: ThemeInput
+  baseRemSize?: number
 }
 
 /**
@@ -63,6 +65,7 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
       ),
       animations: PropTypes.object,
     }),
+    baseRemSize: PropTypes.number,
     children: PropTypes.node.isRequired,
   }
 
@@ -142,7 +145,7 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
   }
 
   render() {
-    const { theme, children, ...unhandledProps } = this.props
+    const { theme, baseRemSize, children, ...unhandledProps } = this.props
 
     // rehydration disabled to avoid leaking styles between renderers
     // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
@@ -151,6 +154,14 @@ class Provider extends React.Component<Extendable<ProviderProps>> {
         render={(incomingTheme: ThemePrepared) => {
           const outgoingTheme: ThemePrepared = mergeThemes(incomingTheme, theme)
 
+          if (baseRemSize) {
+            outgoingTheme.pxToRem = createPxToRem(baseRemSize)
+          }
+          if (!outgoingTheme.pxToRem) {
+            // TODO: should be done by mergeThemes()?
+            outgoingTheme.pxToRem = createPxToRem(getDocumentRemSize())
+          }
+
           // Heads up!
           // We should call render() to ensure that a subscription for DOM updates was created
           // https://github.com/stardust-ui/react/issues/581

@@ -1,11 +1,12 @@
 import * as _ from 'lodash'
 import isBrowser from './isBrowser'
+import { PxToRem } from '../types'
 
 const DEFAULT_REM_SIZE_IN_PX = 16
 
 let _documentRemSize: number | null = null
 
-const getDocumentRemSize = (): number => {
+export const getDocumentRemSize = (): number => {
   return isBrowser()
     ? getFontSizeValue(getComputedStyle(document.documentElement).fontSize) ||
         DEFAULT_REM_SIZE_IN_PX
@@ -20,6 +21,12 @@ export const updateCachedRemSize = () => {
   _documentRemSize = null
 }
 
+export const createPxToRem = (remSize: number): PxToRem => (valueInPx: number): string => {
+  const convertedValueInRems = valueInPx / remSize
+
+  return `${_.round(convertedValueInRems, 4)}rem`
+}
+
 /**
  * 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().

@@ -17,6 +17,8 @@ import {
   ThemeIcons,
   ComponentSlotStyle,
   ThemeAnimation,
+  FontSizesInput,
+  FontSizesPrepared,
 } from '../themes/types'
 import callable from './callable'
 import { felaRenderer, felaRtlRenderer } from './felaRenderer'
@@ -194,12 +196,26 @@ export const mergeStyles = (...sources: ComponentSlotStyle[]) => {
   }
 }
 
+export const mergePxToRem = (target, ...sources) => {
+  return sources.reduce((acc, next) => {
+    return typeof next === 'function' ? next : acc
+  }, target)
+}
+
+export const mergeFontSizes = (...sources: FontSizesInput[]): FontSizesPrepared => {
+  // TODO: test me
+  return sources.reduce((acc, next) => {
+    return !!next ? callable(next) : acc
+  }, callable({}))
+}
+
 const mergeThemes = (...themes: ThemeInput[]): ThemePrepared => {
   const emptyTheme = {
     siteVariables: {},
     componentVariables: {},
     componentStyles: {},
     fontFaces: [],
+    fontSizes: {},
     staticStyles: [],
     icons: {},
     animations: {},
@@ -223,11 +239,18 @@ const mergeThemes = (...themes: ThemeInput[]): ThemePrepared => {
       acc.rtl = mergedRTL
     }
 
+    const mergedPxToRem = mergePxToRem(acc.pxToRem, next.pxToRem)
+    if (typeof mergedPxToRem === 'function') {
+      acc.pxToRem = mergedPxToRem
+    }
+
     // Use the correct renderer for RTL
     acc.renderer = acc.rtl ? felaRtlRenderer : felaRenderer
 
     acc.fontFaces = mergeFontFaces(...acc.fontFaces, ...next.fontFaces)
 
+    acc.fontSizes = mergeFontSizes(acc.fontSizes, next.fontSizes) // FIXME: this does not work if you use mergeThemes(no sizes, no sizes) to create a theme
+
     acc.staticStyles = mergeStaticStyles(...acc.staticStyles, ...next.staticStyles)
 
     acc.animations = mergeAnimations(acc.animations, next.animations)

@@ -33,6 +33,7 @@ import { FocusZoneProps, FocusZone, FocusZone as FabricFocusZone } from './acces
 import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities'
 import createAnimationStyles from './createAnimationStyles'
 import { generateColorScheme } from './colorUtils'
+import { createPxToRem } from './fontSizeUtility'
 
 export interface RenderResultConfig<P> {
   ElementType: React.ElementType<P>
@@ -164,6 +165,8 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
           componentStyles = {},
           rtl = false,
           renderer = felaRenderer,
+          fontSizes = callable({}),
+          pxToRem = createPxToRem(16), // FIXME
         } = theme || {}
         const ElementType = getElementType({ defaultProps }, props) as React.ReactType<P>
 
@@ -173,7 +176,7 @@ const renderComponent = <P extends {}>(config: RenderConfig<P>): React.ReactElem
         const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
           componentVariables[displayName],
           props.variables,
-        )(siteVariables)
+        )(siteVariables, fontSizes(pxToRem))
 
         const animationCSSProp = props.animation
           ? createAnimationStyles(props.animation, theme)

@@ -36,7 +36,7 @@ export interface TextVariables {
   fontWeightBold: number
 }
 
-export default (siteVariables): TextVariables => {
+export default (siteVariables, fontSizes): TextVariables => {
   const colorVariant = 500
 
   return {
@@ -51,25 +51,25 @@ export default (siteVariables): TextVariables => {
     errorColor: siteVariables.colors.red[500],
     successColor: siteVariables.colors.green[500],
 
-    fontSizeSmallest: siteVariables.fontSizes.smallest,
+    fontSizeSmallest: fontSizes.smallest,
     fontLineHeightSmallest: siteVariables.lineHeightSmallest,
 
-    fontSizeSmaller: siteVariables.fontSizes.smaller,
+    fontSizeSmaller: fontSizes.smaller,
     fontLineHeightSmaller: siteVariables.lineHeightSmaller,
 
-    fontSizeSmall: siteVariables.fontSizes.small,
+    fontSizeSmall: fontSizes.small,
     fontLineHeightSmall: siteVariables.lineHeightSmall,
 
-    fontSizeMedium: siteVariables.fontSizes.medium,
+    fontSizeMedium: fontSizes.medium,
     fontLineHeightMedium: siteVariables.lineHeightMedium,
 
-    fontSizeLarge: siteVariables.fontSizes.large,
+    fontSizeLarge: fontSizes.large,
     fontLineHeightLarge: siteVariables.lineHeightLarge,
 
-    fontSizeLarger: siteVariables.fontSizes.larger,
+    fontSizeLarger: fontSizes.larger,
     fontLineHeightLarger: siteVariables.lineHeightLarger,
 
-    fontSizeLargest: siteVariables.fontSizes.largest,
+    fontSizeLargest: fontSizes.largest,
     fontLineHeightLargest: siteVariables.lineHeightLargest,
 
     fontWeightLight: siteVariables.fontWeightLight,

@@ -0,0 +1,13 @@
+import { FontSizesObject } from '../types'
+
+const fontSizes: FontSizesObject = {
+  smallest: '0.8rem',
+  smaller: '1rem',
+  small: '1.2rem',
+  medium: '1.4rem',
+  large: '1.8rem',
+  larger: '2.4rem',
+  largest: '3rem',
+}
+
+export default fontSizes
@@ -2,6 +2,7 @@ import { ThemeInput } from '../types'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
+import fontSizes from './fontSizes'
 import { FontIconSpec, ThemeIconSpec, ThemeIcons } from 'src/themes/types'
 import { default as fontIcons, icons } from './components/Icon/index'
 
@@ -17,4 +18,5 @@ export default {
   icons: themeIcons,
   componentVariables,
   componentStyles,
+  fontSizes,
 } as ThemeInput
@@ -22,7 +22,7 @@ export type AttachmentVariables = {
   focusOutlineColor: string
 }
 
-export default siteVariables => ({
+export default (siteVariables, fontSizes) => ({
   padding: pxToRem(8),
   iconSpace: pxToRem(12),
 
@@ -33,11 +33,11 @@ export default siteVariables => ({
   progressColor: siteVariables.naturalColors.lightGreen[900],
   progressHeight: 4,
 
-  headerFontSize: siteVariables.fontSizes.medium,
+  headerFontSize: fontSizes.medium,
   headerFontWeight: siteVariables.fontWeightSemibold,
   headerLineHeight: siteVariables.lineHeightSmall,
 
-  descriptionFontSize: siteVariables.fontSizes.small,
+  descriptionFontSize: fontSizes.small,
   descriptionFontWeight: siteVariables.fontWeightRegular,
   descriptionLineHeight: siteVariables.lineHeightSmall,
 

@@ -18,13 +18,13 @@ export interface InputVariables {
   placeholderColor: string
 }
 
-export default (siteVars): InputVariables => ({
+export default (siteVars, fontSizes): InputVariables => ({
   backgroundColor: siteVars.gray10,
   borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
   borderWidth: `0 0 ${pxToRem(2)} 0`,
 
   fontColor: siteVars.gray02,
-  fontSize: siteVars.fontSizes.medium,
+  fontSize: fontSizes.medium, // TODO: not used in styles - remove?
 
   iconPosition: 'absolute',
   iconRight: pxToRem(10),

@@ -28,27 +28,27 @@ export interface ListItemVariables {
   selectedFocusOutlineColor: string
 }
 
-export default (siteVariables: any): ListItemVariables => {
+export default (siteVariables: any, fontSizes): ListItemVariables => {
   return {
     minHeight: pxToRem(48),
     rootPadding: `0 ${pxToRem(18)} 0 ${pxToRem(20)}`,
 
     // Header
     // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
     headerLineHeight: siteVariables.lineHeightSmall,
-    headerFontSize: siteVariables.fontSizes.medium,
+    headerFontSize: fontSizes.medium,
 
     // Header Media
-    headerMediaFontSize: siteVariables.fontSizes.small,
+    headerMediaFontSize: fontSizes.small,
     // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
     headerMediaLineHeight: siteVariables.lineHeightSmall,
 
     // Content
-    contentFontSize: siteVariables.fontSizes.small,
+    contentFontSize: fontSizes.small,
     contentLineHeight: siteVariables.lineHeightSmall,
 
     // Content Media
-    contentMediaFontSize: siteVariables.fontSizes.small,
+    contentMediaFontSize: fontSizes.small,
     contentMediaLineHeight: siteVariables.lineHeightSmall,
 
     // Selectable

@@ -21,12 +21,12 @@ export type RadioGroupItemVariables = {
   padding: string
 }
 
-export default (siteVars: any): RadioGroupItemVariables => ({
+export default (siteVars: any, fontSizes): RadioGroupItemVariables => ({
   colorDisabled: siteVars.gray06,
   focusInnerBorderColor: siteVars.colors.white,
   focusOuterBorderColor: siteVars.colors.black,
 
-  textFontSize: siteVars.fontSizes.medium,
+  textFontSize: fontSizes.medium,
 
   textColorDefault: siteVars.gray02,
   textColorDefaultHoverFocus: siteVars.colors.grey[900],

@@ -10,10 +10,10 @@ export interface ReactionVariables {
   outlineOffsetFocus: string
 }
 
-export default (siteVars): ReactionVariables => ({
+export default (siteVars, fontSizes): ReactionVariables => ({
   color: siteVars.gray03,
   colorHover: siteVars.colors.grey[900],
-  contentFontSize: siteVars.fontSizes.small,
+  contentFontSize: fontSizes.small,
   fontWeightHover: siteVars.fontWeightBold,
   outlineColorFocus: siteVars.colors.primary[500],
   outlineWidthFocus: pxToRem(2),

@@ -0,0 +1,11 @@
+import { FontSizesInput } from '../types'
+
+const fontSizes: FontSizesInput = pxToRem => ({
+  smaller: pxToRem(10),
+  small: pxToRem(12),
+  medium: pxToRem(14),
+  large: pxToRem(18),
+  larger: pxToRem(24),
+})
+
+export default fontSizes