docs: restore html and body font sizes

Author: levithomason

docs/src/Style.ts

@@ -27,21 +27,3 @@ style.main = {
 }
 
 export default style
-
-export const semanticCssOverrides = `
-  .crossout {
-    text-decoration: line-through!important;
-  }
-
-  .ui.secondary.inverted.menu a.item.disabled:hover {
-    color: rgba(255,255,255,.7)!important;
-    cursor: not-allowed!important;
-  }
-
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 0;
-  }
-`

docs/src/app.tsx

@@ -2,14 +2,9 @@ import * as React from 'react'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from '../../src/lib'
-import { semanticCssOverrides } from './Style'
 import { ThemeContext } from './context/theme-context'
 import Router from './routes'
 
-const semanticStylesOverrideTheme = {
-  staticStyles: [semanticCssOverrides],
-}
-
 interface AppState {
   themeName: string
   changeTheme: (newTheme: string) => void
@@ -34,11 +29,20 @@ class App extends React.Component<any, AppState> {
       changeTheme: this.changeTheme,
     }
   }
+
   render() {
     const { themeName } = this.state
     return (
       <ThemeContext.Provider value={this.state}>
-        <Provider theme={mergeThemes(semanticStylesOverrideTheme, themes[themeName])}>
+        <Provider
+          theme={mergeThemes(themes[themeName], {
+            // adjust Teams' theme to Semantic UI's font size scheme
+            siteVariables: {
+              htmlFontSize: '14px',
+              bodyFontSize: '1rem',
+            },
+          })}
+        >
           <Router />
         </Provider>
       </ThemeContext.Provider>

src/themes/teams/siteVariables.ts

@@ -94,6 +94,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 bodyBackground = white
 export const bodyColor = black
 export const bodyLineHeight = lineHeightBase

src/themes/teams/staticStyles/globalStyles.ts

@@ -8,6 +8,7 @@ const globalStyles: StaticStyleFunction = siteVars => ({
     padding: siteVars.bodyPadding,
     margin: siteVars.bodyMargin,
     fontFamily: siteVars.bodyFontFamily,
+    fontSize: siteVars.bodyFontSize,
     lineHeight: siteVars.bodyLineHeight,
   },
 })